: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/bg.png');
  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: 720px){
  header.header--split{
    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; }
}