/* =============================================================
   THE SOMNIAL WORKSHOP — public site
   Three pages, one chrome. Layout only; tokens from root CSS.
   ============================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--ink-900); }
body { font-family: var(--font-body); color: var(--bone); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--blue-line); color: var(--bone); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-6); }

/* ===========================================================
   BRAND MARK — blue cell orbits twice on page load
   =========================================================== */
@keyframes sw-mark-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(720deg); }
}
.sw-mark-cell {
  transform-box: view-box;
  transform-origin: 32px 32px;
  animation: sw-mark-orbit 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
}
@media (prefers-reduced-motion: reduce) {
  .sw-mark-cell { animation: none; }
}

/* ===========================================================
   SHARED HEADER — name left, nav right, hairline below
   =========================================================== */
.sh { position: sticky; top: 0; z-index: 20; background: rgba(11,11,12,0.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
@supports not (backdrop-filter: blur(4px)) { .sh { background: var(--ink-900); } }
.sh__bar { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sh__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bone); }
.sh__mark { width: 24px; height: 24px; display: block; }
.sh__wm { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.sh__nav { display: flex; gap: 4px; }
.sh__link {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ash); text-decoration: none; padding: 8px 12px; border-radius: var(--radius-1);
  position: relative; transition: color 0.12s linear, background 0.12s linear;
}
.sh__link:hover { color: var(--bone); }
.sh__link--on { color: var(--bone); }
.sh__link--on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--blue);
}
.sh__nav-toggle { display: none; }

/* ===========================================================
   MASTHEAD (landing) — "The Lattice"

   The wordmark writes itself on load, then a live circuit keeps
   running beneath it. Two stacked canvases do the drawing (static
   grid + rAF pulse layer, both owned by js/lattice.js); everything
   here is layout, type and colour.

   No hex literals below this point — the canvas resolves the same
   tokens at runtime, so a future light mode is a variable swap.
   =========================================================== */
.mast {
  position: relative; min-height: 68vh; display: flex; align-items: center;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
/* Both canvases carry the radial fade the old ::before grid used —
   brightest toward the top right, dissolving to the lower left. Wider
   and softer than the old texture's, because the lattice is now the
   subject rather than a background wash: pulses have to stay legible
   across most of the field. (#000 here is a mask alpha channel, not a
   palette colour — it is theme-independent.) */
.mast__grid, .mast__live {
  position: absolute; inset: 0; pointer-events: none; display: block;
  -webkit-mask-image: radial-gradient(135% 115% at 74% 4%, #000 0%, #000 30%, transparent 88%);
          mask-image: radial-gradient(135% 115% at 74% 4%, #000 0%, #000 30%, transparent 88%);
}
/* Substrate — fine circuit traces and binary, drawn once and then
   revealed only inside the cursor's spotlight. Tighter mask than the
   glow so the machinery reads as something you uncover by looking,
   not as decoration sitting on the surface. */
.mast__sub {
  position: absolute; inset: 0; pointer-events: none; display: block; opacity: 0;
  transition: opacity 220ms linear;
  -webkit-mask-image: radial-gradient(circle 185px at var(--mx, 50%) var(--my, 50%), #000 0%, #000 42%, transparent 78%);
          mask-image: radial-gradient(circle 185px at var(--mx, 50%) var(--my, 50%), #000 0%, #000 42%, transparent 78%);
}
.mast.is-pointing .mast__sub { opacity: 1; }

/* Pointer glow — position comes from --mx/--my, set by lattice.js. */
.mast__glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity 240ms linear;
  background: radial-gradient(320px 320px at var(--mx, 50%) var(--my, 50%), var(--blue-dim), transparent 70%);
}
.mast.is-pointing .mast__glow { opacity: 1; }

.mast__hero { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 56px var(--sp-6) 44px; }
.mast__status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mast__clock { font-family: var(--font-mono); font-size: 13px; color: var(--bone); font-variant-numeric: tabular-nums; }

/* ---------- Wordmark ----------
   Centred; the status row and counts stay pinned left. Light weight and
   open tracking rather than a compressed heavy face — the machine works
   quietly, and the type should say that. */
.mast__wm {
  position: relative; margin: 34px 0 0; text-align: center;
  font-family: var(--font-wordmark); font-weight: 200; text-transform: uppercase;
  font-size: clamp(38px, 8.4vw, 124px); line-height: 1.02; letter-spacing: 0.055em;
}
.wm__line { display: block; }
/* "The" + "Somnial" share a line on desktop (flex row, same visual
   result as the old plain-text line) but split onto their own lines
   on small phones via the mobile override below — the gap matches
   the value .wm__ch--space used for the same job. */
.wm__line--split { display: flex; justify-content: center; align-items: baseline; gap: 0.26em; }
.wm__ch {
  display: inline-block; color: var(--bone);
  transition: color 220ms linear, transform 220ms ease-out, clip-path 240ms ease-out;
}
/* A whitespace child collapses inside an inline-block, so the word gap
   is set explicitly rather than relying on the space glyph. */
.wm__ch--space { width: 0.26em; }
/* is-ready is added by JS only after letters are measured — the
   un-enhanced state is the finished wordmark, fully visible. */
.mast.is-ready .wm__ch { clip-path: inset(-20% 100% -20% -10%); }
.mast.is-ready .wm__ch.is-drawn { clip-path: inset(-20% -10% -20% -10%); }
.wm__ch.is-hot { color: var(--blue-bright); }
.wm__ch.is-flare { color: var(--blue-bright); transform: translateY(-2px); }

/* The write-head that leads the cascade, then hands off to the
   parked cursor (reuses the sw-blink keyframes in colors_and_type). */
.wm__head {
  position: absolute; top: 0; left: 0; width: 4px; height: 1em;
  background: var(--blue); opacity: 0; pointer-events: none;
  transition: opacity 200ms linear; will-change: transform;
}
.mast.is-drawing .wm__head { opacity: 1; }
.wm__cursor {
  display: inline-block; width: 0.085em; height: 0.72em; margin-left: 0.06em;
  background: var(--blue); transform: translateY(0.02em);
  opacity: 0; transition: opacity 260ms linear;
}
.mast.is-done .wm__cursor { opacity: 1; animation: sw-blink 1.1s steps(1) infinite; }

.mast__tag {
  font-family: var(--font-display); font-weight: 400; color: var(--ash); text-align: center;
  font-size: clamp(15px, 1.55vw, 19px); letter-spacing: 0.02em; margin: 26px 0 0;
}
.mast__counts { display: grid; grid-template-columns: repeat(4, max-content); gap: 0 56px; margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.mast__counts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.mast__counts dd { font-family: var(--font-mono); font-size: 17px; color: var(--bone); margin: 0; font-variant-numeric: tabular-nums; }

/* ===========================================================
   GENERIC SECTION
   =========================================================== */
.section { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--sp-6); border-bottom: 1px solid var(--line); }
.section--tight { padding-top: 48px; }
.sw-section-mark { display: block; }

/* ---------- Specimen strip (landing) ---------- */
.strip--inset { max-width: 900px; }
.strip__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.strip__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.strip__rows { display: flex; flex-direction: column; gap: 8px; }
.spec__row { display: grid; grid-template-columns: 64px 1fr auto auto 24px; align-items: center; gap: 18px; padding: 16px 18px; }
.spec__idx { font-family: var(--font-mono); font-weight: 500; font-size: 19px; color: var(--blue); font-variant-numeric: tabular-nums; }
.spec__title { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--bone); }
.spec__title--dim { color: var(--slate); }
.spec__date { font-family: var(--font-mono); font-size: 12px; color: var(--slate); font-variant-numeric: tabular-nums; }
.spec__chev { font-family: var(--font-mono); color: var(--slate); text-align: center; }
.spec__detail { padding: 0 18px 18px 82px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.spec__note { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--ash); margin: 0; }
.spec__side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.spec__launch { align-self: flex-start; }

/* ---------- Teaser + CTA (landing) ---------- */
.teaser__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; margin-top: 26px; }
.teaser__lead { font-family: var(--font-display); font-weight: 500; font-size: 27px; line-height: 1.18; color: var(--bone); margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.teaser__body p { font-family: var(--font-body); font-size: 16px; line-height: 1.62; color: var(--ash); margin: 0 0 16px; max-width: 58ch; }
.teaser__body p:last-child { margin-bottom: 0; }
.browse { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.browse__h { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; margin: 16px 0 12px; }
.browse__p { font-family: var(--font-mono); font-size: 14px; color: var(--ash); margin: 0; }
.browse__btn { flex: none; }

/* ===========================================================
   ABOUT PAGE
   =========================================================== */
.about__head { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--sp-6) 8px; }
.about__h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5.4vw, 60px); letter-spacing: -0.03em; margin: 14px 0 18px; line-height: 1.02; }
.about__lede { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.35; color: var(--ash); margin: 0; max-width: 40ch; letter-spacing: -0.01em; text-wrap: balance; }
.about__sections { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--sp-6) 0; }
.about__sec { display: grid; grid-template-columns: 1fr 1.7fr; gap: 48px; padding: 44px 0; border-top: 1px solid var(--line); }
.about__sec:first-child { border-top: 0; }
.about__sleft { }
.about__skicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 10px; }
.about__sh { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; margin: 0; }
.about__sbody p { font-family: var(--font-body); font-size: 17px; line-height: 1.62; color: var(--ash); margin: 0 0 14px; max-width: 60ch; }
.about__sbody p:last-child { margin-bottom: 0; }

/* Vertical connected pipeline */
.pipe { max-width: var(--maxw); margin: 0 auto; padding: 8px var(--sp-6) 80px; }
.pipe__head { padding: 44px 0 8px; border-top: 1px solid var(--line); }
.pipe__list { list-style: none; margin: 28px 0 0; padding: 0; position: relative; }
.pipe__item { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 0 0 36px 0; }
.pipe__item:last-child { padding-bottom: 0; }
.pipe__rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.pipe__dot {
  width: 14px; height: 14px; background: var(--ink-900); border: 2px solid var(--blue);
  border-radius: 50%; margin-top: 5px; flex: none; z-index: 1;
}
.pipe__item:not(:last-child) .pipe__line { position: absolute; top: 19px; bottom: -36px; width: 1px; background: var(--line-strong); }
.pipe__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--blue); margin-bottom: 7px; }
.pipe__t { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin: 0 0 8px; }
.pipe__d { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--ash); margin: 0; max-width: 60ch; }
.pipe__sources { margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; }
.pipe__srclab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); flex: none; }
.pipe__srcrow { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pipe__src { font-family: var(--font-mono); font-size: 13px; color: var(--ash); }
.pipe__src b { color: var(--blue); font-weight: 600; margin-right: 4px; }

/* ===========================================================
   PROJECTS PAGE — title, controls, card grid
   =========================================================== */
.proj { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-6) 90px; }
/* Full-bleed band (like .mast/.ahero) — spans the entire viewport width,
   not just the centered content column, so the grid reads edge-to-edge.
   Bright near one corner, fading to nothing at the other. */
.proj__band { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.proj__band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(232,233,236,0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,233,236,0.34) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(140% 140% at 96% 0%, #000 0%, transparent 82%);
          mask-image: radial-gradient(140% 140% at 96% 0%, #000 0%, transparent 82%);
}
.proj__title { position: relative; max-width: var(--maxw); margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 56px var(--sp-6) 26px; }
.proj__title h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5vw, 52px); letter-spacing: -0.03em; margin: 12px 0 10px; line-height: 1.0; }
.proj__title p { font-family: var(--font-mono); font-size: 13px; color: var(--ash); margin: 0; }
.proj__stats { display: grid; grid-template-columns: repeat(4, max-content); gap: 0 36px; margin: 0; }
.proj__stats dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: 5px; }
.proj__stats dd { font-family: var(--font-mono); font-size: 22px; margin: 0; font-variant-numeric: tabular-nums; color: var(--bone); }
.proj__stats .ok { color: var(--built); } .proj__stats .bad { color: var(--failed); } .proj__stats .held { color: var(--withheld); }

.proj__controls { display: flex; align-items: center; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 57px; background: var(--ink-900); z-index: 6; padding-top: 8px; }
.proj__grep { display: flex; align-items: center; border: 1px solid var(--line); background: var(--ink-850); border-radius: var(--radius-1); flex: 1; min-width: 240px; }
.proj__grep:focus-within { border-color: var(--blue-line); }
.proj__grepkey { font-family: var(--font-mono); font-size: 13px; color: var(--blue); padding: 0 6px 0 12px; }
.proj__grepin { border: 0 !important; background: transparent !important; border-radius: 0 !important; }
.proj__grepin:focus { outline: none; }
.proj__filters { display: flex; gap: 6px; }
.proj__chip { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-1); padding: 9px 13px; transition: all 0.12s linear; white-space: nowrap; cursor: pointer; }
.proj__chip:hover { border-color: var(--line-strong); color: var(--bone); }
.proj__chip--on { color: #06182F; background: var(--blue); border-color: var(--blue); font-weight: 600; }
.proj__chipn { opacity: 0.6; margin-left: 3px; }
.proj__chip--on .proj__chipn { opacity: 0.7; }

/* Projects list — one entry per row: number · name · desc · seed · date · shot */
.proj__list { margin-top: 8px; }
.proj__empty { padding: 64px 16px; font-family: var(--font-mono); font-size: 13px; color: var(--slate); text-align: center; }

.prow { display: grid; grid-template-columns: 78px 1fr 304px; gap: 32px; align-items: center; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 28px 12px; cursor: pointer; transition: background 0.12s linear; }
.prow:hover { background: var(--ink-800); }
.prow:hover .prow__shot { border-color: var(--line-strong); }
.prow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.prow__idx { font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; align-self: start; line-height: 1; }
.prow__main { min-width: 0; }
.prow__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.prow__title { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.015em; color: var(--bone); margin: 0; line-height: 1.1; }
.prow__title--dim { color: var(--slate); }
.prow__desc { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--ash); margin: 0 0 16px; max-width: 62ch; text-wrap: pretty; }
.prow__meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--slate); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.prow__meta b { color: var(--ash); font-weight: 400; }
.prow__sep { color: var(--faint); }
.prow__shot { position: relative; border: 1px solid var(--line); aspect-ratio: 16 / 9; background: var(--ink-850); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color 0.12s linear; }
.prow__shot--empty { background: repeating-linear-gradient(45deg, var(--ink-850), var(--ink-850) 9px, var(--ink-900) 9px, var(--ink-900) 18px); }
.prow__shotimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.prow__shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,12,0.72), transparent 60%);
  opacity: 0;
  transition: opacity 0.18s linear;
  pointer-events: none;
}
.prow:hover .prow__shot::after, .prow:focus-visible .prow__shot::after { opacity: 1; }
.prow__launch {
  position: absolute;
  right: 12px; bottom: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s linear, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.prow:hover .prow__launch, .prow:focus-within .prow__launch { opacity: 1; transform: translateY(0); pointer-events: auto; }
.prow__shotapp { display: flex; align-items: baseline; gap: 2px; padding: 0 14px; }
.prow__shottitle { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--ash); }
.prow__shotnote { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); text-align: center; padding: 0 12px; }

/* ===========================================================
   ENTRY DETAIL (overlay over projects)
   =========================================================== */
.det { max-width: var(--maxw); margin: 0 auto; padding: 28px var(--sp-6) 90px; }
.det__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 26px; border-bottom: 1px solid var(--line); gap: 16px; flex-wrap: wrap; }
.det__nav { display: flex; gap: 8px; }
.det__navbtn { padding: 9px 14px; }
.det__body { display: grid; grid-template-columns: 1fr 340px; gap: 48px; padding-top: 40px; }
/* Same grid texture as .proj__band, but contained to this cluster's own
   box (not full-bleed) — it belongs to the number/title/launch group, not
   the whole page. Bright at the empty top-right, fading toward the text. */
.det__titleband { position: relative; overflow: hidden; }
.det__titleband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(232,233,236,0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,233,236,0.34) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(140% 140% at 100% 0%, #000 0%, transparent 82%);
          mask-image: radial-gradient(140% 140% at 100% 0%, #000 0%, transparent 82%);
}
.det__titleband > * { position: relative; }
.det__idx { font-family: var(--font-mono); font-weight: 700; font-size: 58px; color: var(--blue); line-height: 1; font-variant-numeric: tabular-nums; }
.det__of { font-size: 20px; color: var(--slate); margin-left: 12px; font-weight: 400; }
.det__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.025em; margin: 18px 0 16px; }
.det__title--dim { color: var(--slate); }
.det__badges { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 24px; }
.det__note { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ash); max-width: 56ch; margin: 22px 0 36px; }
.det__evidence { border: 1px solid var(--line); }
.det__evhead { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); white-space: nowrap; }
.det__frame { aspect-ratio: 16 / 8; background: var(--ink-850); display: flex; align-items: center; justify-content: center; }
.det__frame--empty { background: repeating-linear-gradient(45deg, var(--ink-850), var(--ink-850) 10px, var(--ink-900) 10px, var(--ink-900) 20px); }
.det__app { display: flex; align-items: baseline; gap: 2px; }
.det__apptitle { font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--ash); }
.det__noev { font-family: var(--font-mono); font-size: 13px; color: var(--slate); letter-spacing: 0.06em; }

/* Machine-interface accordion — sits under the evidence screenshot.
   Native <details>/<summary>, no JS state needed for the open/close. */
.det__accordion { margin-top: 20px; border: 1px solid var(--line); background: var(--ink-850); }
.det__accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone); user-select: none;
}
.det__accordion summary::-webkit-details-marker { display: none; }
.det__accordion summary::marker { content: ""; }
.det__accordion summary:hover { color: var(--blue-bright); }
.det__accordion .chev { color: var(--slate); font-family: var(--font-mono); transition: transform 0.18s ease-out, color 0.18s linear; }
.det__accordion[open] summary { border-bottom: 1px solid var(--line); }
.det__accordion[open] .chev { transform: rotate(90deg); color: var(--blue); }
.det__accordion-body { padding: 20px 18px 26px; }
.det__accordion-endpoint { font-family: var(--font-mono); font-size: 12.5px; color: var(--blue); margin: 0; }
.det__accordion-desc { font-family: var(--font-body); font-size: 14px; color: var(--ash); margin: 8px 0 0; }
.det__accordion-body h4 {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--slate); margin: 22px 0 10px;
}
.det__accordion-body h4:first-of-type { margin-top: 20px; }
.iotable-wrap { overflow-x: auto; }
.iotable { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.iotable th { text-align: left; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); padding: 0 14px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.iotable td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ash); }
.iotable td.key { color: var(--blue); white-space: nowrap; }
.det__codewrap { position: relative; }
.det__copybtn { position: absolute; top: 10px; right: 10px; padding: 5px 10px; font-size: 10px; }
.det__side { border-left: 1px solid var(--line); padding-left: 32px; }
.det__why { font-family: var(--font-body); font-size: 14px; line-height: 1.62; color: var(--ash); margin: 14px 0 0; white-space: pre-line; }
.det__prov { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.det__meta { grid-template-columns: 86px 1fr; margin-top: 20px; gap: 11px 16px; }
.det__meta .blue { color: var(--blue); } .det__meta .ok { color: var(--built); } .det__meta .bad { color: var(--failed); }

/* ===========================================================
   FOOTER — provenance receipt (shared)
   =========================================================== */
.prov { border-top: 1px solid var(--line); background: var(--ink-850); }
.prov__grid { max-width: var(--maxw); margin: 0 auto; padding: 48px var(--sp-6) 28px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.prov__brand { display: flex; align-items: center; gap: 14px; }
.prov__mark { width: 34px; height: 34px; }
.prov__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.prov__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--blue); margin-top: 4px; }
.prov__meta { grid-template-columns: 96px 1fr; min-width: 320px; }
.prov__foot { max-width: var(--maxw); margin: 0 auto; padding: 18px var(--sp-6); border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--slate); flex-wrap: wrap; }

/* ===========================================================
   ABOUT — content components (used inside .about__sbody)
   =========================================================== */

/* About hero — type-driven masthead, mirrors the landing pattern */
.ahero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.ahero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(232,233,236,0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,233,236,0.34) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(140% 140% at 18% 100%, #000 0%, transparent 82%);
          mask-image: radial-gradient(140% 140% at 18% 100%, #000 0%, transparent 82%);
}
.ahero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 76px var(--sp-6) 52px; }
.ahero__top { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
.ahero__filed { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--slate); text-transform: uppercase; }
.ahero__thesis {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(46px, 7vw, 90px); line-height: 0.98; letter-spacing: -0.03em;
  margin: 0 0 28px; text-wrap: balance; max-width: 14ch; color: var(--bone);
}
.ahero__thesis em { color: var(--blue); font-style: normal; }
.ahero__sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.42;
  color: var(--ash); max-width: 54ch; margin: 0 0 48px;
}
.ahero__meta {
  display: grid; grid-template-columns: repeat(5, max-content);
  gap: 0 52px; margin: 0; padding-top: 26px; border-top: 1px solid var(--line);
}
.ahero__meta dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 6px;
}
.ahero__meta dd {
  font-family: var(--font-mono); font-size: 17px; color: var(--bone);
  margin: 0; font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .ahero__meta { grid-template-columns: repeat(2, max-content); gap: 22px 40px; }
}

.about__tldr {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.32;
  color: var(--bone); margin: 26px 0 0; max-width: 38ch;
  letter-spacing: -0.018em; text-wrap: balance;
  padding-left: 24px; border-left: 3px solid var(--blue);
}
.about__tldr-em { color: var(--ash); display: block; margin-top: 14px; font-weight: 500; }

.about__sbody h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em; color: var(--bone);
  margin: 36px 0 12px;
}
.about__sbody h3:first-child { margin-top: 0; }
.about__sbody h3 + p { margin-top: 0; }
.about__sbody p code,
.about__sbody li code {
  font-family: var(--font-mono); font-size: 0.92em;
  color: var(--blue); background: var(--blue-dim);
  padding: 1px 6px; border-radius: var(--radius-1);
}

/* Weekday schedule (Section 1) */
.schedule { margin: 28px 0 8px; padding: 0; border-top: 1px solid var(--line); }
.schedule__row {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.schedule__row dt {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
  margin: 0;
}
.schedule__row dd {
  font-family: var(--font-mono); font-size: 14px; color: var(--bone);
  margin: 0; font-variant-numeric: tabular-nums;
}

/* Idea pipeline (Section 2) — 4-step vertical connected list */
.idpipe { list-style: none; margin: 28px 0 12px; padding: 0; }
.idpipe__item {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  padding: 0 0 22px;
}
.idpipe__item:last-child { padding-bottom: 0; }
.idpipe__rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.idpipe__dot {
  width: 11px; height: 11px; background: var(--ink-900); border: 2px solid var(--blue);
  border-radius: 50%; margin-top: 6px; flex: none; z-index: 1;
}
.idpipe__item:not(:last-child) .idpipe__line {
  position: absolute; top: 17px; bottom: -22px; width: 1px; background: var(--line-strong);
  left: 50%; transform: translateX(-50%);
}
.idpipe__k {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; color: var(--blue); display: block; margin: 1px 0 6px;
}
.idpipe__d {
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  color: var(--ash); margin: 0; max-width: 56ch;
}

/* Three hard gates (Section 2) */
.gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.gates__item { border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--ink-850); }
.gates__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.gates__t { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--bone); }
.gates__d { font-family: var(--font-body); font-size: 13px; color: var(--ash); line-height: 1.5; margin: 0; }

/* Themes by weekday (Section 3) */
.themes { margin: 22px 0; padding: 0; border-top: 1px solid var(--line); }
.themes__row {
  display: grid; grid-template-columns: 56px 160px 1fr; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline;
}
.themes__row dt { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 0; }
.themes__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--bone); margin: 0; letter-spacing: -0.01em; }
.themes__font { font-family: var(--font-mono); font-size: 13px; color: var(--ash); margin: 0; }

/* Mandatory motions (Section 3) */
.motions { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line-soft); }
.motions li {
  font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ash);
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: baseline;
}
.motions b {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone);
}

/* Code block (Section 4) */
.codeblock {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  color: var(--bone); background: var(--ink-850);
  border: 1px solid var(--line); border-radius: var(--radius-1);
  padding: 18px 20px; overflow-x: auto; margin: 22px 0 8px;
  white-space: pre; tab-size: 2;
}
.codeblock .c-key { color: var(--blue); }
.codeblock .c-str { color: var(--built); }
.codeblock .c-com { color: var(--slate); }

/* HTTP endpoints (Section 4) */
.api { margin: 18px 0 8px; padding: 0; border-top: 1px solid var(--line); }
.api__row {
  display: grid; grid-template-columns: minmax(260px, 1.1fr) 1fr; gap: 28px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline;
}
.api__row dt { font-family: var(--font-mono); font-size: 13px; color: var(--bone); margin: 0; word-break: break-all; }
.api__row dt b { color: var(--blue); margin-right: 10px; font-weight: 700; }
.api__row dd { font-family: var(--font-body); font-size: 14px; color: var(--ash); margin: 0; line-height: 1.55; }

@media (max-width: 760px) {
  .gates { grid-template-columns: 1fr; }
  .themes__row { grid-template-columns: 56px 1fr; }
  .themes__font { grid-column: 1 / -1; padding-left: 0; }
  .motions li { grid-template-columns: 1fr; gap: 4px; }
  .api__row { grid-template-columns: 1fr; gap: 4px; }
  .schedule__row { grid-template-columns: 56px 1fr; }
}
@media (max-width: 900px) {
  .prow { grid-template-columns: 64px 1fr 240px; gap: 24px; }
}
@media (max-width: 820px) {
  .mast { min-height: 58vh; }
  .mast__hero { padding: 40px var(--sp-6) 32px; }
  .mast__wm { margin-top: 20px; }
  .mast__counts { margin-top: 30px; }
  .teaser__grid, .spec__detail, .prov__grid, .about__sec, .det__body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .det__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
  /* max-content columns don't yield to the viewport — they were
     landing within single-digit pixels of the edge. minmax(0, 1fr)
     keeps the same two-column look but actually fits. */
  .mast__counts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; }
  /* Same fix as the grid-blowout bug above: the title column's default
     min-width:auto let a long single-line title ("Neural Visualizer",
     "Gaussian Splatting") force the row wider than the screen, shoving
     the BUILT/FAILED badge off the right edge. */
  .spec__row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .spec__date, .spec__chev { display: none; }
  .spec__detail { padding-left: 18px; }
  .browse { flex-direction: column; align-items: flex-start; }
  .proj__title { flex-direction: column; align-items: flex-start; gap: 22px; }
  .pipe__sources { flex-direction: column; gap: 14px; }
}
@media (max-width: 760px) {
  .prow { grid-template-columns: 54px 1fr; gap: 8px 18px; padding: 22px 12px; }
  .prow__idx { font-size: 24px; }
  .prow__shot { grid-column: 1 / -1; margin-top: 6px; }
}
@media (max-width: 600px) {
  .sh__wm { font-size: 13px; }
  .sh__link { padding: 8px 9px; letter-spacing: 0.08em; }
  .proj__controls { top: 0; }
}
/* ===========================================================
   SMALL PHONES — the header nav, footer receipt link and
   filter chips only overflow below ~440px (measured); this
   bucket has margin to spare. Desktop/tablet rules above are
   untouched — everything here is additive, scoped to <=520px.
   =========================================================== */
@media (max-width: 520px) {
  /* Header: brand keeps its row, nav wraps to its own centered row
     instead of being clipped off the right edge. */
  .sh__bar { flex-wrap: wrap; row-gap: 8px; }
  .sh__nav { width: 100%; justify-content: center; }

  /* Long unbroken tokens (the footer's raw GitHub URL, in particular)
     no longer push their grid track — and now actually wrap — instead
     of spilling past the viewport edge. .prov__meta's own min-width
     (320px, fine everywhere wider than this) is what actually blows
     out the 320px-viewport case, so it's dropped here too. */
  .sw-meta dd { min-width: 0; overflow-wrap: anywhere; }
  .prov__meta { min-width: 0; }

  /* Filter chip row wraps instead of running off-screen; the grep
     field takes its own full-width row above the chips. */
  .proj__controls { flex-wrap: wrap; }
  .proj__grep { flex-basis: 100%; }
  .proj__filters { flex-wrap: wrap; }

  /* Display titles: same responsive clamp, lower floor so they don't
     dominate a narrow screen the way the desktop-tuned minimum does. */
  .mast__wm { font-size: clamp(30px, 9vw, 124px); }
  .proj__title h1 { font-size: clamp(28px, 9vw, 52px); }
  .ahero__thesis { font-size: clamp(30px, 9vw, 90px); }

  /* "The" gets its own line above "Somnial" instead of sharing one
     with it — desktop keeps the original two-line wordmark untouched
     (see .wm__line--split's base rule). */
  .wm__line--split { flex-direction: column; align-items: center; gap: 0; }

  /* Same max-content fragility as .mast__counts (Total/Built/Failed/
     Withheld was landing within ~2px of the viewport edge at 320px). */
  .proj__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }

  /* Project blurbs: truncate to a sensible length with an ellipsis
     instead of running each row/card out to full paragraph length. */
  .prow__desc, .spec__note {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
  }
}
/* Touch / no-pointer devices never get the follow glow. */
@media (hover: none) {
  .mast__glow, .mast__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pcard, .pcard__go, .log__go { transition: none; }
  /* The lattice stops entirely (lattice.js never starts the loop);
     the wordmark shows complete, unclipped and unanimated. */
  .mast .wm__ch { clip-path: none !important; color: var(--bone) !important; transition: none; transform: none; }
  .mast__glow, .mast__sub, .wm__head, .wm__cursor { display: none; }
}