/* ==========================================================================
   Demux Labs — blueprint
   A dark technical sheet: graph paper, thin ink lines, the brand green.
   No external fonts, no external requests. Everything ships from origin.
   ========================================================================== */

/* Palette derived from the Demux Labs brand kit:
     green  #8EC14E   (logo mark)
     dark   #262625   (wordmark / social covers)
     grey   #928F8E   (the "Labs" half of the wordmark)
   The neutral scale is built on the warm charcoal of the brand dark, so the
   green reads as the only colour on the page — the same relationship as the
   mark on the dark social covers. */
:root {
  --ink-900: #080908;
  --ink-850: #0F100E;
  --ink-800: #161714;
  --ink-750: #1C1D19;
  --ink-700: #23241F;
  --rule:    #2E2F2A;
  --rule-soft: #212220;

  --text:    #EDEDE9;
  --text-dim:#B6B5AF;
  --muted:   #928F8E;   /* brand grey, verbatim */
  --faint:   #6E6C69;
  --heading: #F7F7F3;

  --accent:      #8EC14E;   /* brand green, verbatim */
  --accent-bright:#A8D66E;
  --accent-dim:  #4F6C2E;
  --accent-wash: rgba(142, 193, 78, 0.09);
  /* Brand green wherever it sits directly on the page as text (links,
     eyebrows, tags, the active nav item…) rather than filling a shape or
     drawing an icon. On this dark ground, --accent itself already clears
     WCAG AA as text, so --accent-ink just matches it. The light-mode
     override further down does NOT match --accent: #8EC14E as text on the
     light ground is only 1.96:1, so light mode darkens this to a green
     that clears 4.5:1 instead. */
  --accent-ink:  #A8D66E;
  --on-accent:   #101609;   /* text on a green fill */
  --warm:        #E9A75C;
  --warn-ink:    #F1C48B;

  /* Only used by the OPTIONAL GRID block further down, which is off. */
  --grid-major: rgba(160, 190, 130, 0.07);

  /* Translucent surfaces that sit directly on the page ground, so they need
     a themed counterpart rather than a fixed hex. */
  --header-bg: rgba(15, 16, 14, 0.84);
  --footer-bg: rgba(8, 9, 8, 0.55);
  --overlay-1: rgba(255, 255, 255, .014);
  --overlay-2: rgba(255, 255, 255, .018);
  --overlay-3: rgba(255, 255, 255, .045);
  --selection-fg: #fff;

  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --wrap: 1120px;
  --wrap-narrow: 720px;
  --radius: 3px;

  --step-1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step0:  clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  --step1:  clamp(1.18rem, 1.1rem + 0.4vw, 1.35rem);
  --step2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
  --step3:  clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem);
  --step4:  clamp(2.3rem, 1.7rem + 2.9vw, 4rem);
}

/* A light counterpart of the palette above, used only when the visitor's
   system (or browser) explicitly asks for a light interface. No preference
   reported, or a browser that predates the media feature, keeps the dark
   sheet as the default defined above.
   --accent, --accent-bright, --accent-dim, --accent-wash, --on-accent and
   --warm are deliberately left out: each is only ever used as a fill, an
   icon, or backing a fixed-dark-text pairing, so the value carries over
   unchanged and still holds its contrast. Anywhere the brand green sits
   directly on the page as running text goes through --accent-ink instead,
   which IS overridden below — see the WCAG note near its dark-mode
   definition. */
@media (prefers-color-scheme: light) {
  :root {
    --ink-900: #FFFFFF;
    --ink-850: #F7F6F2;
    --ink-800: #EFEDE7;
    --ink-750: #E6E3DB;
    --ink-700: #DCD8CE;
    --rule:    #DAD5C9;
    --rule-soft: #E7E3D9;

    --text:    #3A3935;
    --text-dim:#5B5954;
    --muted:   #6A6662;   /* brand grey is too light to read on paper; darkened to hold 4.5:1 */
    --faint:   #6D6964;
    --heading: #262625;   /* brand dark, verbatim */

    /* Brand green as running text, re-tuned for paper rather than just
       darkened: dropping #8EC14E's lightness in place keeps its hue (~87°,
       a yellow-green) and drifts straight into olive/khaki as it darkens.
       Nudging the hue toward true green (~110°) and raising saturation
       keeps it reading as a clean, vivid green at a lightness that holds
       4.5:1 on paper. */
    --accent-ink: #2E7A1F;
    --warn-ink:   #8A5A1E;

    --header-bg: rgba(247, 246, 242, 0.82);
    --footer-bg: rgba(239, 237, 231, 0.65);
    --overlay-1: rgba(20, 20, 15, .025);
    --overlay-2: rgba(20, 20, 15, .032);
    --overlay-3: rgba(20, 20, 15, .055);
    --selection-fg: #1B1C18;
  }
}

/* The theme toggle's explicit choice, stored in localStorage and applied by
   the inline <head> script before paint. [data-theme="light"] repeats the
   media-query values above verbatim so it wins on a dark-preferring system;
   [data-theme="dark"] repeats the base :root values so it wins on a
   light-preferring one — an attribute selector outranks the media-guarded
   :root by specificity, so either one overrides the OS regardless of source
   order. No stored choice = no attribute at all, and the media query above
   keeps driving it. */
:root[data-theme="light"] {
  --ink-900: #FFFFFF;
  --ink-850: #F7F6F2;
  --ink-800: #EFEDE7;
  --ink-750: #E6E3DB;
  --ink-700: #DCD8CE;
  --rule:    #DAD5C9;
  --rule-soft: #E7E3D9;
  --text:    #3A3935;
  --text-dim:#5B5954;
  --muted:   #6A6662;
  --faint:   #6D6964;
  --heading: #262625;
  --accent-ink: #2E7A1F;
  --warn-ink:   #8A5A1E;
  --header-bg: rgba(247, 246, 242, 0.82);
  --footer-bg: rgba(239, 237, 231, 0.65);
  --overlay-1: rgba(20, 20, 15, .025);
  --overlay-2: rgba(20, 20, 15, .032);
  --overlay-3: rgba(20, 20, 15, .055);
  --selection-fg: #1B1C18;
}
:root[data-theme="dark"] {
  --ink-900: #080908;
  --ink-850: #0F100E;
  --ink-800: #161714;
  --ink-750: #1C1D19;
  --ink-700: #23241F;
  --rule:    #2E2F2A;
  --rule-soft: #212220;
  --text:    #EDEDE9;
  --text-dim:#B6B5AF;
  --muted:   #928F8E;
  --faint:   #6E6C69;
  --heading: #F7F7F3;
  --accent-ink:  #A8D66E;
  --warn-ink:    #F1C48B;
  --header-bg: rgba(15, 16, 14, 0.84);
  --footer-bg: rgba(8, 9, 8, 0.55);
  --overlay-1: rgba(255, 255, 255, .014);
  --overlay-2: rgba(255, 255, 255, .018);
  --overlay-3: rgba(255, 255, 255, .045);
  --selection-fg: #fff;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background-color: var(--ink-850);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --- Ground ---------------------------------------------------------------
   Flat charcoal with one soft green wash at the top — the same glow the mark
   has on the dark social covers. Nothing repeats and nothing sits behind body
   text, so the page reads as a surface rather than a pattern.

   An earlier version drew notebook graph paper here. It was true to the
   sketches but it put a 26px grid directly behind running text, which is
   exactly where texture turns into noise. Structure now comes from the hairline
   rules between sections and the panel fills, which is quieter and does the
   same job. To bring a hint of it back, see the OPTIONAL GRID block below. */
body::after {
  content: "";
  position: fixed;
  top: -20vh; left: 50%;
  width: min(1400px, 130vw); height: 90vh;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%,
              rgba(142, 193, 78, 0.10) 0%,
              rgba(142, 193, 78, 0.035) 38%,
              transparent 70%);
}

/* --- OPTIONAL GRID --------------------------------------------------------
   Uncomment for a single large-scale grid, faded out below the first screen so
   it never sits behind body copy. This is the restrained version of the
   notebook idea — one 130px grid, no 26px minor lines.

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px);
  background-size: 130px 130px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 70vh);
          mask-image: linear-gradient(to bottom, #000 0, transparent 70vh);
}
--------------------------------------------------------------------------- */

#top, header, main, footer { position: relative; z-index: 1; }

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.15;
  font-weight: 560;
  letter-spacing: -0.018em;
  color: var(--heading);
}
h1 { font-size: var(--step4); letter-spacing: -0.032em; line-height: 1.06; }
h2 { font-size: var(--step3); letter-spacing: -0.024em; }
h3 { font-size: var(--step1); letter-spacing: -0.012em; }
h4 { font-size: var(--step0); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent-ink); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

strong { color: var(--heading); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

::selection { background: rgba(142, 193, 78, 0.30); color: var(--selection-fg); }

/* --- Layout -------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
/* A page-opening section: full space above, little below, because the section
   that follows brings its own top padding. */
.section--intro { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.section--intro + .section { border-top: 0; }
.section + .section { border-top: 1px solid var(--rule-soft); }

.lede {
  font-size: var(--step1);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 62ch;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--on-accent);
  padding: .6rem 1rem; font-weight: 600; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --- Eyebrow / technical label ------------------------------------------ */

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 1px;
  background: var(--accent-dim);
}
.eyebrow--plain::before { display: none; }

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 66px;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--text); }
.brand:hover { color: var(--text); }
.brand__mark { color: var(--accent); flex: none; display: block; }
/* The wordmark follows the printed lockup: green mark, white "Demux",
   grey "Labs". Set in the UI font rather than as an image, so it stays crisp
   and selectable; the official lockup SVG is in static/img/ for anywhere the
   exact drawn letterforms matter. */
.brand__name {
  font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em;
}
.brand__name span { color: var(--muted); font-weight: 400; }

.header-actions { display: flex; align-items: center; gap: .5rem; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: none; border: 1px solid var(--rule);
  color: var(--text-dim); border-radius: var(--radius);
  cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--text); background: var(--overlay-3); }
.theme-toggle svg { display: block; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  color: var(--text-dim);
  padding: .45rem .75rem;
  font-size: .945rem;
  border-radius: var(--radius);
  transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: var(--text); background: var(--overlay-3); }
.nav a[aria-current="page"] { color: var(--accent-ink); }

/* The nav's `a` rule is more specific than `.btn--primary`, so the button text
   would inherit --text-dim and become unreadable on the cyan fill. Restate it
   at matching specificity. */
.nav a.btn { margin-left: .5rem; }
.nav a.btn--primary { color: var(--on-accent); }
.nav a.btn--primary:hover { color: var(--on-accent); background: var(--accent-bright); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--rule);
  color: var(--text); border-radius: var(--radius);
  padding: .5rem .7rem; cursor: pointer; line-height: 0;
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-800);
    border-bottom: 1px solid var(--rule);
    padding: .5rem 1.5rem 1.1rem;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .8rem .2rem; border-bottom: 1px solid var(--rule-soft); }
  .nav .btn { margin: .8rem 0 0; justify-content: center; }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font: inherit; font-size: .95rem; font-weight: 600;
  padding: .68rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--on-accent); }

.btn--ghost {
  background: transparent; color: var(--text); border-color: var(--rule);
}
.btn--ghost:hover { border-color: var(--accent-dim); color: var(--accent-ink); background: var(--accent-wash); }

.btn__arrow { transition: transform .16s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.hero__title { max-width: 25ch; margin-bottom: 1.5rem; }
.hero__title span { display: block; }
.hero__title span:last-child { color: var(--accent-ink); }
.hero__lede { max-width: 56ch; margin-bottom: 1.6rem; }

.hero__note {
  display: flex; gap: .85rem;
  max-width: 52ch; margin-bottom: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-dim);
  color: var(--muted); font-size: .96rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Ticker of technical keywords under the hero — a datasheet strip. */
.strip {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin-top: 2.2rem; padding-top: 1.4rem;
  border-top: 1px solid var(--rule-soft);
}
.strip span {
  font-family: var(--font-mono); font-size: var(--step-1);
  color: var(--faint); letter-spacing: .03em;
}
.strip span::after { content: "·"; margin-left: .6rem; color: var(--rule); }
.strip span:last-child::after { display: none; }

/* --- Section headers ----------------------------------------------------- */

.section-head { max-width: 60ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.section-head--wide { max-width: 72ch; }

/* --- Service cards ------------------------------------------------------- */

/* Four services, so 2x2 — auto-fit would leave a dead cell at three columns. */
.cards {
  display: grid; gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.card {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--ink-800);
  transition: background-color .2s ease;
}
.card:hover { background: var(--ink-750); }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card__icon { color: var(--accent); margin-bottom: 1.3rem; }
.card__title { margin-bottom: .55rem; }
.card__lede { color: var(--muted); font-size: .96rem; margin: 0; }
.card__link {
  margin-top: 1.4rem; font-size: .9rem; font-family: var(--font-mono);
  letter-spacing: .04em; display: inline-flex; align-items: center; gap: .4rem;
}

/* --- Pipeline ------------------------------------------------------------ */

.pipeline { position: relative; margin-top: clamp(2rem, 4vw, 3rem); max-width: 900px; }
.pipeline::before {
  content: ""; position: absolute;
  left: 27px; top: 14px; bottom: 14px; width: 1px;
  background: linear-gradient(to bottom,
    transparent, var(--accent-dim) 8%, var(--accent-dim) 92%, transparent);
}

.stage {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 0 1.5rem;
  align-items: start;
  padding-block: 1.4rem;
}
.stage + .stage { border-top: 1px solid var(--rule-soft); }

.stage__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border: 1px solid var(--rule);
  background: var(--ink-800);
  border-radius: 50%;
  font-family: var(--font-mono); font-size: .84rem;
  color: var(--accent-ink); letter-spacing: .04em;
  transition: border-color .2s ease, background-color .2s ease;
}
.stage:hover .stage__num { border-color: var(--accent-dim); background: var(--ink-750); }

.stage__body { padding-top: .35rem; min-width: 0; }
.stage__title { font-size: var(--step1); margin-bottom: .35rem; }
.stage__text { color: var(--muted); font-size: .96rem; max-width: 58ch; margin: 0; }

.stage__icon {
  color: var(--accent-dim);
  padding: .3rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--overlay-1);
  transition: color .2s ease, border-color .2s ease;
}
.stage:hover .stage__icon { color: var(--accent); border-color: var(--rule); }

@media (max-width: 640px) {
  .pipeline::before { left: 21px; }
  .stage { grid-template-columns: 44px minmax(0, 1fr); gap: 0 1.1rem; }
  .stage__num { width: 42px; height: 42px; font-size: .78rem; }
  .stage__icon { display: none; }
}

/* --- Panels / prose blocks ---------------------------------------------- */

.panel {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--ink-800);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}

.detail { padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.detail + .detail { border-top: 1px solid var(--rule-soft); }
.detail__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .detail__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.detail__head { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1rem; }
.detail__head .icon { color: var(--accent); flex: none; }
.detail__lede { color: var(--accent-ink); font-size: .96rem; margin-bottom: .8rem; }
.detail__body { color: var(--text-dim); }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.5rem;
  padding-block: .45rem;
  color: var(--text-dim);
  font-size: .96rem;
  border-bottom: 1px solid var(--rule-soft);
}
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: ""; position: absolute;
  left: 0; top: 1.15em;
  width: .55rem; height: 1px; background: var(--accent);
}

/* --- Capability matrix --------------------------------------------------- */

.matrix {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.matrix__cell { background: var(--ink-800); padding: 1.4rem 1.5rem; }
.matrix__label {
  font-family: var(--font-mono); font-size: var(--step-1);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: .8rem;
}
.matrix__items { list-style: none; margin: 0; padding: 0; }
.matrix__items li {
  color: var(--text-dim); font-size: .93rem; padding-block: .18rem;
}
.matrix__note {
  margin: 1.5rem 0 0; max-width: 62ch; color: var(--muted); font-size: .96rem;
}

/* --- Working model / definition rows ------------------------------------ */

.rows { display: grid; gap: 0; }
.row {
  display: grid; gap: .4rem 2.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule-soft);
}
.row:last-child { border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 760px) { .row { grid-template-columns: 260px minmax(0, 1fr); } }
.row__term { color: var(--heading); font-weight: 550; }
.row__def { color: var(--muted); margin: 0; max-width: 62ch; }

/* --- CTA band ------------------------------------------------------------ */

.cta {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(142,193,78,.05), transparent 70%),
    var(--ink-800);
  padding: clamp(2rem, 5vw, 3.4rem);
  text-align: center;
}
.cta h2 { max-width: 20ch; margin-inline: auto; }
.cta p { color: var(--muted); max-width: 52ch; margin-inline: auto; margin-bottom: 1.8rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* --- Writing / blog ------------------------------------------------------ */

.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-top: 1px solid var(--rule-soft); }
.posts li:last-child { border-bottom: 1px solid var(--rule-soft); }

.post-item {
  display: block; padding-block: 1.6rem; color: inherit;
  transition: background-color .16s ease;
}
.post-item:hover { color: inherit; background: var(--overlay-2); }
.post-item__meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  font-family: var(--font-mono); font-size: var(--step-1);
  color: var(--faint); margin-bottom: .5rem;
}
.post-item__title { font-size: var(--step1); margin-bottom: .4rem; }
.post-item:hover .post-item__title { color: var(--accent-ink); }
.post-item__summary { color: var(--muted); font-size: .96rem; margin: 0; max-width: 68ch; }

.tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--step-1);
  color: var(--accent-ink); background: var(--accent-wash);
  border: 1px solid rgba(142,193,78,.18);
  border-radius: 2px; padding: .05rem .45rem;
}

.empty {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center; color: var(--muted);
}

/* --- Article prose ------------------------------------------------------- */

.prose { max-width: 70ch; color: var(--text-dim); font-size: 1.055rem; line-height: 1.75; }
.prose h2 { font-size: var(--step2); margin-top: 2.4em; }
.prose h3 { font-size: var(--step1); margin-top: 2em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose blockquote {
  margin: 1.6em 0; padding: .2em 0 .2em 1.3em;
  border-left: 2px solid var(--accent-dim); color: var(--muted); font-style: italic;
}
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--rule-soft); }
.prose th { color: var(--heading); font-weight: 550; }

/* Code stays a fixed dark "terminal" regardless of light/dark theme — the
   Pygments palette below is tuned for a dark ground and would lose contrast
   on a light one, and a code block that didn't flip with a docs site's theme
   is a familiar, deliberate pattern. Colours are literal, not themed vars. */
.prose code {
  font-family: var(--font-mono); font-size: .89em;
  background: #23241F; color: #A8D66E;
  padding: .12em .38em; border-radius: 2px;
}
.prose pre {
  background: #0F100E;
  border: 1px solid #212220;
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  margin: 1.6em 0;
  font-size: .88rem; line-height: 1.6;
}
.prose pre code { background: none; padding: 0; color: #B6B5AF; font-size: inherit; }

/* Pygments, tuned to the palette */
.codehilite .k, .codehilite .kd, .codehilite .kn, .codehilite .kr { color: #C9A2E0; }
.codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sb { color: #B9D98C; }
.codehilite .c, .codehilite .c1, .codehilite .cm { color: #6E6C69; font-style: italic; }
.codehilite .nf, .codehilite .nc { color: #A8D66E; }
.codehilite .mi, .codehilite .mf, .codehilite .mh { color: #E9A75C; }
.codehilite .o, .codehilite .p { color: #B6B5AF; }
.codehilite .nb { color: #8FC7D8; }
.codehilite .cp { color: #E9A75C; }

.article-head { padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
  font-family: var(--font-mono); font-size: var(--step-1); color: var(--faint);
  margin-bottom: 1.2rem;
}

/* --- Forms --------------------------------------------------------------- */

.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .93rem; color: var(--text-dim); font-weight: 500; }
.field .hint { font-size: var(--step-1); color: var(--faint); }

.field input, .field textarea, .field select {
  font: inherit; font-size: .98rem;
  color: var(--text);
  background: var(--ink-900);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  width: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #2A3946; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent-dim); background: var(--ink-850); outline-offset: 1px;
}

.field--honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } }

.alert {
  border: 1px solid rgba(233,167,92,.35);
  background: rgba(233,167,92,.07);
  color: var(--warn-ink);
  border-radius: var(--radius);
  padding: .85rem 1rem; font-size: .95rem;
}
.alert--ok {
  border-color: rgba(142,193,78,.35);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

.success-mark { color: var(--accent); margin-bottom: 1.5rem; }

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

.site-footer {
  border-top: 1px solid var(--rule-soft);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-block: 2.5rem 2rem;
  background: var(--footer-bg);
}
.site-footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
}
.site-footer h4 {
  font-family: var(--font-mono); font-size: var(--step-1);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 1rem; font-weight: 400;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer a { color: var(--text-dim); font-size: .95rem; }
.site-footer a:hover { color: var(--accent-ink); }
.site-footer__blurb { color: var(--muted); font-size: .95rem; max-width: 34ch; margin-top: 1rem; }
.site-footer__base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono); font-size: var(--step-1); color: var(--faint);
}

/* --- Utility ------------------------------------------------------------- */

.stack > * + * { margin-top: 1.1rem; }
.mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.text-muted { color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.icon { display: block; }