:root{
  --bg:#000000;
  --fg:#EDE9DC;
  --white:#FFFFFF;
  --green:#2BBE88;
  --charcoal:#1A1B1E;
  --accent:#272A2B;
  --logo-col: 150px;   /* fixed logo column width */
  --header-gap: 24px;  /* space between logo and text */
  --header-minh: 140px;/* consistent header height feel (tweak) */
  --pad-right: 0px;
  --pad-left:  0px;
  
}

/* Reset-ish */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Base */
body{
  font-family: Arial, Helvetica, sans-serif;
  background-image: url('/assets/images/bg.png');
  background-attachment: fixed;
  color: var(--fg);
  padding: 20px 30px;
  /*font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;*/
  font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
  line-height: 1.5;           /* easier reading */
}


/* ---------- Header (consistent on all pages) ---------- */

header{
  display: flex;
  flex-direction: column;
  align-items: center;     /* centers logo, title, tagline, nav */
  max-width: 900px;
  margin: 0 auto 10px;
  text-align: center;      /* center the text in header only */
}

/* Split header: logo left, title/tagline/nav right */
/* Split header: fixed logo column + flexible text column */
header.header--split{
  display: grid;
  grid-template-columns: var(--logo-col) 1fr; /* ← key line */
  align-items: center;
  column-gap: var(--header-gap);
  max-width: 900px;
  margin: 0 auto 10px;
  text-align: center; /* default; can override in .header-text */
  min-height: var(--header-minh); /* keeps header feeling consistent across pages */
}

header.header--split .logo{
  width: var(--logo-col);
  height: auto;
  display: block;
  margin: 0;          /* no accidental spacing */
}

header.header--split .header-text{
  /* pick ONE of these, depending on the look you want */
  /* A) centered text next to logo */
  text-align: center;

  /* B) or left‑aligned text next to logo */
  /* text-align: left; */
}

header.header--split nav{
  /*background: rgba(0, 0, 0, 0.6);  semi-transparent dark strip */
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center; /* use 'flex-start' if header-text is left-aligned */
  padding: 10px;
}

header.header--split nav a:hover {
  color: --green;                   /* brighter green on hover */
  text-decoration: underline;       /* retro underline */
}

/* If your logo is wrapped in a link, give that <a> class="logo-link" */
.logo-link { display: block; text-decoration: none; }

/* Title / tagline */
h1{ margin: 8px 0 6px; font-size: clamp(24px, 4vw, 40px); }

h1, h2, h3,
.shot__caption,
code, kbd, pre,
.tm-codeblock {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0.2px;
}

/* Code blocks keep their mono + spacing */
.tm-codeblock code, pre code {
  font-family: inherit;       /* inherits mono from parent */
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Utility: force mono on any element if you want the “terminal” look */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace !important;
}

p.tag{ opacity: .9; margin: 0 0 18px; }

p.tag.tag--spaced {
  margin-top: 12px !important;
}

/* Nav: horizontal always */
nav { display: inline-flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
nav a{
  color: var(--green);
  text-decoration: none;
  line-height: 1;
}
nav a:hover{ text-decoration: underline; }

/* ---------- Sections ---------- */

.section{
  padding: 5px var(--pad-right) 30px var(--pad-left);
  max-width: 900px;
  margin: 40px auto;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 18, 19, 0.85), rgba(8, 8, 8, 0.85));
  text-align: center;    /* section heading centered */
}

/* Inner content wrapper so p + ul align cleanly */
.section .content{
  max-width: 720px;
  margin: 0 auto;
  text-align: left;      /* body text left-aligned */
}

.section .content p{ margin: 0 0 12px; }
.section .content ul{ margin: 0; padding-left: 1.2rem; }
.section .content li{ margin: 4px 0; }

.section .content-narrow {
  max-width: 720px;   /* narrower than the original 720px */
  margin: 0 auto;     /* center horizontally */
  text-align: center; /* center-align text */
}

.section .content-narrow p { margin: 0 0 12px; }
.section .content-narrow ul { margin: 0; padding-left: 1.2rem; }
.section .content-narrow li { margin: 4px 0; }

.centered-list {
  text-align: left;          /* aligns the bullet content itself */
  display: inline-block;     /* allows centering within parent */
  margin: 0 auto;            /* centers the list box itself */
  padding-left: 1.2rem;      /* keeps bullet indent consistent */
}

.centered-list li {
  margin: 4px 0;             /* same spacing as your other lists */
}

/* ---------- Footer ---------- */

footer{
  opacity: .7;
  margin-top: 40px;
  font-size: .9rem;
  text-align: center;
}

a { color: var(--green); }
a:hover { text-decoration: underline; }

/* Terminal Minds utility: center a left‑aligned list inside centered blocks */
.tm-inline-list {
  display: inline-block;   /* lets it center inside text-align:center parents */
  margin: 0 auto;          /* centers the inline-block box */
  text-align: left;        /* left-align list content */
  padding-left: 1.2rem;    /* bullet indent */
}

.tm-inline-list li { margin: 4px 0; }

.tm-codeblock {
  text-align: left;
  overflow: auto;
  margin: 0 auto;
  max-width: 600px;
}


/* ------------ Screenshots --------------- */

/* —— In-page lightbox (no JS, uses :target) —— */
.lightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
  background: rgba(0,0,0,0.86);
  backdrop-filter: blur(2px);
}
.lightbox:target{ display: block; }

/* Clickable backdrop to close */
.lightbox__bg{
  position: absolute; inset: 0;
  display: block;
}

/* Centered figure card */
.lightbox__figure{
  position: relative;
  z-index: 1;
  margin: 6vh auto 0;
  max-width: min(1200px, 96vw);
  text-align: center;
  background: linear-gradient(180deg, rgba(24,24,25,0.85), rgba(10,10,10,0.85));
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 10px;
}

/* Scales to viewport without distortion */
.lightbox__figure img{
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  margin: 0 auto 8px;
}

/* Caption matches site vibe */
.lightbox__figure figcaption{
  color: var(--fg);
  opacity: .9;
  font-size: .95rem;
}

/* Close / prev / next controls */
.lightbox__close,
.lightbox__prev,
.lightbox__next{
  position: absolute;
  top: 6px;
  line-height: 1;
  font-size: 28px;
  text-decoration: none;
  color: var(--white);
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 6px 10px;
}
.lightbox__close{ right: 8px; }
.lightbox__prev{ left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox__next{ right: 8px; top: 50%; transform: translateY(-50%); }

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover{
  background: var(--charcoal);
  color: var(--green);
  text-decoration: none;
}

/* Optional: prevent page scroll when lightbox open (supported in modern browsers) */
body:has(.lightbox:target){ overflow: hidden; }

/* Responsive gallery grid */
#screenshots .gallery{
  --tile: 150px; /* desktop thumb width */
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--tile)); /* collapse empty columns */
  justify-content: center;  /* center the whole row */
  gap: 12px;
}

#screenshots .shot img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Shot card */
.shot{
  margin: 0;
  border: 1px solid var(--accent);
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(24,24,25,.7), rgba(10,10,10,.7));
}
.shot__link{ display: block; }

.shot__caption{
  font-size: .95rem;
  opacity: .9;
  padding: 8px 10px 10px;
}

/* Mobile: stack vertically but keep consistent logo size */
@media (max-width: 880px){
  header.header--split{
    display: block;
    grid-template-columns: 1fr;
    row-gap: 10px;            /* vertical spacing when stacked */
    text-align: center;
    min-height: auto;         /* let mobile breathe */
  }
  header.header--split .logo{
    margin: 0 auto;           /* center logo above text */
  }
  header.header--split .header-text{
    text-align: center;
  }
  header.header--split nav{
    justify-content: center;
  }

  .section{
    --pad-right: 25px;
    --pad-left:  25px;
  }

  #screenshots .gallery{
    --tile: 135px; /* you set this for Vellum */
    grid-template-columns: repeat(auto-fill, var(--tile));
    justify-content: center;
    gap: 10px;
  }

  .shot img{
    display: block;
    width: 100%;                                 /* fill the fixed tile track */
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .lightbox__figure{ margin: 4vh auto 0; padding: 8px; }
  .lightbox__figure img{ max-height: 70vh; }
  .lightbox__close, .lightbox__prev, .lightbox__next{ font-size: 24px; padding: 6px 8px; }
}

/* Mobile/tablet tuning */
@media (max-width: 900px){
  .gallery{ --tile-min: 160px; --gap: 10px; }
}
@media (max-width: 600px){
  .gallery{ --tile-min: 140px; }
}

.logo-wrap {
  display:inline-block;
  width:150px;           /* use your real logo size */
  /*height:837px;*/
  margin-top:15px;
  contain: layout paint; /* <-- isolates layout & paint */
  isolation: isolate;    /* own stacking context */
}

/* Hero split */

.hero-split {
  display: flex;
}

.hero-left {
  padding-top: 25px;   /* adjust the value until it looks right */
}

.hero-right .content {
  padding-right: 25px;
}

/* Hero split */
@media(max-width: 640px) {
  .hero-split {
    display: block;
  }
}

.project-shortcuts {
    display: flex;
    gap: clamp(.75rem, 2.5vw, 1.25rem);
    flex-wrap: wrap;
    align-items: center;
    padding-block: 1rem 2rem;
  }
  .project-badge {
    --ring: 0 0 0 0 rgba(0,0,0,0);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    border: 1px solid rgba(235, 228, 228, 0.08);
    border-radius: 12px;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    box-shadow: var(--ring);
    background: linear-gradient(180deg, rgba(18, 18, 19, 0.85), rgba(8, 8, 8, 0.85));
    backdrop-filter: saturate(1.2) blur(2px);
  }
  .project-badge:hover {
    transform: translateY(-1px);
    border-color: rgba(0,0,0,.18);
    box-shadow: 0 6px 16px rgba(0,0,0,.07);
  }
  .project-badge img {
    display: block;
    width: 72px; height: 72px;  /* keep small to avoid logo clash */
    image-rendering: pixelated;  /* nice for your art style */
    border-radius: 8px;
  }
  .project-badge span {
    font-weight: 600;
    letter-spacing: .2px;
  }

/* center logo */

/* Make sure these run AFTER your other header rules */
@media (max-width: 880px) {
  header.header--split { 
    display: block;
    text-align: center;
  }

  /* center the actual logo block no matter what it’s wrapped in */
  header.header--split .logo-wrap,
  header.header--split .logo,
  header.header--split .logo-link {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none;              /* in case something set a float */
  }

  /* center the image itself too (belt + suspenders) */
  header.header--split .logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 150px;         /* keep your chosen mobile size */
    height: auto;
  }
}

@media (max-width: 640px) {
  .hero-left .brand-lockup {
    display: flex;              /* flex container */
    justify-content: center;    /* centers child horizontally */
  }

  .hero-left .brand-lockup img {
    margin: 0;                  /* kill any stray margins */
    display: block;
    max-width: 200px;           /* or whatever size you want */
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-right .content {
    padding-right: 0px;
  }
}

/* link items */
.link_item {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
              "Liberation Mono", "Courier New", monospace;
  text-decoration: none; /* remove underline, optional */
}

.link_item + .link_item::before {
  content: "·";
  margin: 0 4px;
}


/* modal zoom on images */

.icon-trigger img { cursor: zoom-in; }

.icon-lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.9);
  align-items: center; justify-content: center;
  z-index: 9999;
}
.icon-lightbox:target { display: flex; }

.icon-lightbox__figure {
  position: relative;
  max-width: 90vw; max-height: 90vh;
}
.icon-lightbox__figure img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px;
}

.icon-lightbox__bg {
  position: absolute; inset: 0;
  text-indent: -9999px;
}

/* unify close button style for screenshots + icon modals */
/* make icon modal close button look like screenshot close button */
.icon-lightbox__close {
  position: absolute;
  top: 6px;
  right: 8px;
  line-height: 1;
  font-size: 28px;
  text-decoration: none;
  color: var(--white);
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 6px 10px;
}

.icon-lightbox__close:hover {
  background: var(--charcoal);
  color: var(--green);
  text-decoration: none;
}

@media (max-width: 880px) {
  .lightbox__close, 
  .lightbox__prev, 
  .lightbox__next,
  .icon-lightbox__close {      /* 👈 added */
    font-size: 24px;
    padding: 6px 8px;
  }
}

.lightbox__figure img,
.icon-lightbox__figure img {
  width: auto;                 /* don’t stretch to container width */
  height: auto;
  max-width: min(90vw, 1200px);/* cap by viewport width (and an optional hard max) */
  max-height: 90vh;            /* cap by viewport height */
  object-fit: contain;         /* never distort */
  display: block;
  margin: 0 auto;
}