/* ============================================================
   VIABLE CODER — reimagined public site (review copy, 2026-09-26)
   Dark field, cyan linework for the short clock (build now),
   red pulse for the long clock (stay viable). Distinct card
   surfaces, gradient bands, one rhythm per page — not per section.
   ============================================================ */

@font-face {
  font-family: "Source Sans 3";
  src: url("assets/fonts/source-sans-3/SourceSans3-Upright.woff2") format("woff2");
  font-style: normal; font-weight: 200 900; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/fonts/source-sans-3/SourceSans3-Italic.woff2") format("woff2");
  font-style: italic; font-weight: 200 900; font-display: swap;
}

:root {
  --bg: #050708;
  --s1: #0a0e13;
  --s2: #0f151c;
  --s3: #151d27;
  --panel: var(--s1);

  --cyan: #3fd4ff;
  --cyan-2: #7ee3ff;
  --cyan-dim: #2b9fc4;
  --cyan-faint: rgba(63, 212, 255, 0.12);
  --cyan-line: rgba(63, 212, 255, 0.3);
  --cyan-glow: rgba(63, 212, 255, 0.45);

  --red: #ff2f3d;
  --red-soft: #ff5560;
  --red-faint: rgba(255, 47, 61, 0.12);
  --red-line: rgba(255, 47, 61, 0.35);
  --red-glow: rgba(255, 47, 61, 0.45);

  --warn: #ffb45b;

  --ink: #eef5fa;
  --ink-1: var(--ink);
  --ink-2: #b4c0cb;
  --ink-3: #8593a0;
  --rule: rgba(255, 255, 255, 0.08);
  --rule-soft: rgba(255, 255, 255, 0.05);

  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --type-page-title: clamp(2.5rem, 5.4vw, 4.25rem);
  --type-section-title: clamp(1.9rem, 3.6vw, 2.75rem);
  --type-card-title: 1.25rem;
  --type-intro: clamp(1.15rem, 1.5vw, 1.35rem);
  --type-body: 1.0625rem;
  --type-caption: 0.9375rem;
  --type-label: 0.875rem;
  --type-code: 0.8125rem;
  --measure: 62ch;

  --max-w: 1180px;
  --pad-x: clamp(1.25rem, 5vw, 3.5rem);
  --radius: 16px;
  --radius-sm: 10px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 28px 60px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
:where(body *) { min-width: 0; }
img, svg, video { max-width: 100%; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}
/* Ambient field: one cyan glow high right, one red pulse low left — both static. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 88% -5%, rgba(63, 212, 255, 0.13), transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(255, 47, 61, 0.08), transparent 70%);
}
::selection { background: var(--cyan-faint); color: var(--ink); }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-2); }
strong, b { font-weight: 600; color: inherit; }
:where(a, button, summary, input, [role="button"]):focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
:where(section[id], div[id], details[id], article[id]) { scroll-margin-top: 8.5rem; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--pad-x); position: relative; z-index: 1; }
.narrow { max-width: 860px; }

/* ------------------------------------------------------------
   TYPE ROLES
   ------------------------------------------------------------ */
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.12; letter-spacing: -0.012em; }
h1 { font-size: var(--type-page-title); line-height: 1.02; letter-spacing: -0.02em; max-width: 18ch; }
h2 { font-size: var(--type-section-title); max-width: 26ch; }
.section-head--row h2 { max-width: 22ch; }
.no-clamp { max-width: none; }
h3 { font-size: var(--type-card-title); }
h4 { font-size: 1.05rem; }
.lead { font-size: var(--type-intro); color: var(--ink-2); max-width: var(--measure); line-height: 1.5; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1rem; }
.prose p strong { color: var(--ink); }
.muted { color: var(--ink-3); }
.small { font-size: var(--type-caption); }
.mono { font-family: var(--font-mono); font-size: var(--type-code); letter-spacing: 0.04em; }

/* Kicker: a dot and a short label. Cyan for the build side, red for the long clock. */
.kicker {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--type-label); font-weight: 600; color: var(--cyan);
  letter-spacing: 0.01em; margin-bottom: 1rem;
}
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.kicker--red { color: var(--red-soft); }
.kicker--ink { color: var(--ink-3); }
/* Page-head kickers drop the dot so they don't echo the sub-nav's marker. */
.page-head .kicker::before, .hero .kicker::before { display: none; }

.section-head { margin-bottom: 2.25rem; }
.section-head .lead { margin-top: 0.9rem; }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.section-head--row .lead { margin-top: 0.6rem; }

/* ------------------------------------------------------------
   BANDS — page sections with their own field, so pages have
   visible chapters instead of one continuous scroll.
   ------------------------------------------------------------ */
.band { position: relative; padding-block: clamp(3.5rem, 7vw, 6rem); }
.band--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.band--panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.band--cyan {
  background:
    radial-gradient(ellipse 60% 70% at 12% 0%, rgba(63, 212, 255, 0.09), transparent 65%),
    linear-gradient(180deg, rgba(63, 212, 255, 0.03), transparent 55%);
  border-top: 1px solid rgba(63, 212, 255, 0.14);
}
.band--red {
  background:
    radial-gradient(ellipse 60% 70% at 90% 0%, rgba(255, 47, 61, 0.09), transparent 65%),
    linear-gradient(180deg, rgba(255, 47, 61, 0.025), transparent 55%);
  border-top: 1px solid rgba(255, 47, 61, 0.16);
}
.band--dark { background: #030405; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------------
   NAV
   ------------------------------------------------------------ */
.top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(5, 7, 8, 0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.top.scrolled { background: rgba(5, 7, 8, 0.94); border-bottom-color: var(--cyan-line); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 68px; }
.wordmark img { width: clamp(150px, 18vw, 232px); height: auto; display: block; mix-blend-mode: screen; }
.nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.6rem); }
.nav-links a { font-size: var(--type-label); font-weight: 600; color: var(--ink-2); position: relative; padding: 0.3rem 0; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active, .nav-links a.nav-cyan.is-active { color: var(--cyan); }
.nav-links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow);
}
.nav-links .sep { width: 1px; height: 18px; background: var(--rule); }
.nav-links a.nav-red.is-active { color: var(--red-soft); }
.nav-links a.nav-red.is-active::after { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.nav-links a.nav-cta { margin-left: 0.5rem; padding: 0.6rem 1rem; color: #fff; }
.nav-links a.nav-cta:hover { color: #fff; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule); border-radius: 8px;
  width: 42px; height: 38px; color: var(--ink); cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor; margin: 2.5px auto; }

/* Sub-nav for the inquiry side: rides under the top nav on the hub, Research, Data, and research posts. */
.subnav { position: sticky; top: 68px; z-index: 55; border-bottom: 1px solid var(--rule); background: rgba(5, 7, 8, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 47, 61, 0.06) inset; }
.subnav.subnav--cyan { box-shadow: 0 1px 0 rgba(63, 212, 255, 0.06) inset; }
.subnav.subnav--cyan .lbl::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.subnav.subnav--cyan a.is-on { color: var(--cyan); }
.subnav.subnav--cyan a.is-on::after { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.subnav .wrap { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); height: 46px; overflow-x: auto; }
.subnav .lbl { display: inline-flex; align-items: center; }
.subnav .lbl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.subnav a { font-size: var(--type-label); font-weight: 600; color: var(--ink-2); white-space: nowrap; position: relative; padding: 0.3rem 0; }
.subnav a:hover { color: var(--ink); }
.subnav a.is-on { color: var(--red-soft); }
.subnav a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.55rem; height: 2px; background: var(--red); box-shadow: 0 0 8px var(--red-glow); }

/* Evidence pairs on the inquiry hub: a reading beside the post that reads it. */
.pairs { display: grid; gap: 1.25rem; }
.pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1.1rem; align-items: stretch; }
.pair .reading { margin-top: 0; height: 100%; }
.pair .reading .def a { color: var(--cyan); }
.pair .post-card { height: 100%; }
.pair .post-card .pairlabel { font-size: var(--type-label); font-weight: 600; color: var(--red-soft); }
.pair .post-card p { font-size: var(--type-caption); }
@media (max-width: 920px) { .pair { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.2rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: var(--type-caption); line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--red {
  color: #fff; background: linear-gradient(180deg, #ff4451, #e11f2d);
  box-shadow: 0 0 0 1px rgba(255, 47, 61, 0.4), 0 10px 26px rgba(255, 47, 61, 0.28);
}
.btn--red:hover { color: #fff; box-shadow: 0 0 0 1px rgba(255, 47, 61, 0.55), 0 14px 34px rgba(255, 47, 61, 0.38); }
.btn--cyan { color: var(--cyan); border-color: var(--cyan-line); background: rgba(63, 212, 255, 0.06); }
.btn--cyan:hover { background: rgba(63, 212, 255, 0.14); border-color: var(--cyan); color: var(--cyan-2); }
.btn--ghost { color: var(--ink-2); border-color: var(--rule); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink-3); }
.btn--sm { padding: 0.55rem 0.9rem; font-size: var(--type-label); }
.btn .arrow { font-weight: 400; }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 1.75rem; }
.actions .aside { color: var(--ink-3); font-size: var(--type-caption); }
.link-arrow { font-weight: 600; white-space: nowrap; }
.link-arrow::after { content: " →"; }

/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */
.card {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), var(--s1);
  border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card--hover:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.16); box-shadow: var(--shadow-lift); }
.card--cyan::before, .card--red::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent 70%);
}
.card--red::before { background: linear-gradient(90deg, var(--red), transparent 70%); }
.card--cyan { border-color: rgba(63, 212, 255, 0.18); }
.card--red { border-color: rgba(255, 47, 61, 0.2); }
.card--glow-cyan { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(63, 212, 255, 0.12), transparent 60%), var(--s1); }
.card--glow-red { background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 47, 61, 0.12), transparent 60%), var(--s1); }
.card > .kicker { margin-bottom: 0.7rem; }
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: var(--type-caption); color: var(--ink-2); }
.card p + p { margin-top: 0.6rem; }
.card .foot { margin-top: auto; padding-top: 1rem; }
.card--link { display: flex; flex-direction: column; color: inherit; }
.card--link:hover { color: inherit; }
.card--link .link-arrow { color: var(--cyan); margin-top: 1rem; display: inline-block; }
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--start { align-items: start; }

/* Fact strip — a row of labelled facts (proof, offer terms, status). */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.facts > div { background: var(--s1); padding: 1.1rem 1.25rem; }
.facts .k { display: block; font-size: var(--type-label); color: var(--ink-3); margin-bottom: 0.2rem; }
.facts .v { display: block; font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.facts .n { display: block; font-size: var(--type-caption); color: var(--ink-2); margin-top: 0.2rem; }
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts--cyan .v { color: var(--cyan); }

/* Chip / status */
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--type-label); font-weight: 600; color: var(--ink);
  padding: 0.35rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.03);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.chip--red::before { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.chip--plain::before { display: none; }

/* ------------------------------------------------------------
   HOME HERO
   ------------------------------------------------------------ */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { margin-top: 0.5rem; }
.hero .thesis { margin-top: 1.5rem; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.35; color: var(--ink-2); max-width: 30ch; }
.hero .thesis strong { color: var(--ink); }
.hero .lead { margin-top: 1.1rem; font-size: 1.1rem; max-width: 52ch; }
.hero-media { position: relative; display: flex; justify-content: center; }
.hero-media .poster { background: none; border: 0; cursor: pointer; position: relative; display: block; width: min(100%, 420px); }
.hero-media .poster img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 22px rgba(63, 212, 255, 0.35)); }
.hero-media .play {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(5, 7, 8, 0.7); border: 1px solid var(--cyan-line);
  box-shadow: 0 0 30px var(--cyan-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-media .play::after {
  content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  border-left: 18px solid var(--cyan); border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.hero-media .poster:hover .play { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 44px var(--cyan-glow); }
.hero-media .poster .hint { display: block; text-align: center; color: var(--ink-3); font-size: var(--type-label); margin-top: 0.5rem; }
.hero-video { width: 100%; border-radius: var(--radius); border: 1px solid var(--cyan-line); box-shadow: 0 0 60px rgba(63, 212, 255, 0.18); }
.hero-grid.playing { grid-template-columns: 1fr; }
.hero-grid.playing .hero-text { display: none; }
.hero-grid.playing .hero-media { display: block; width: 100%; }
.hero-grid.playing .hero-video { width: 100%; display: block; }
.hero-credit { font-size: var(--type-label); color: var(--ink-3); text-align: center; margin-top: 0.6rem; }

/* Proof strip under the hero */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.proof > div { border-left: 2px solid var(--cyan-line); padding-left: 1rem; }
.proof .v { display: block; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.proof .n { display: block; font-size: var(--type-caption); color: var(--ink-3); margin-top: 0.15rem; }

/* ------------------------------------------------------------
   THREE WAYS IN — the decision surface
   ------------------------------------------------------------ */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.way { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.6rem 1.6rem 1.4rem; min-height: 100%; }
.way .price { font-size: 1.9rem; font-weight: 600; color: var(--ink); line-height: 1; margin-top: 0.4rem; letter-spacing: -0.02em; }
.way .price small { font-size: var(--type-caption); font-weight: 400; color: var(--ink-3); margin-left: 0.35rem; letter-spacing: 0; }
.way h3 { font-size: 1.4rem; }
.way ul { list-style: none; margin-top: 0.4rem; display: grid; gap: 0.35rem; }
.way li { font-size: var(--type-caption); color: var(--ink-2); padding-left: 1.1rem; position: relative; }
.way li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-dim); }
.way--red li::before { background: var(--red-soft); }
.way .foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.way .foot .status { font-size: var(--type-label); color: var(--ink-3); }

/* ------------------------------------------------------------
   SITUATIONS
   ------------------------------------------------------------ */
.sits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.sit {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem 1.4rem 1.25rem;
}
.sit .icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--cyan); background: var(--cyan-faint); border: 1px solid var(--cyan-line); }
.sit .icon svg { width: 18px; height: 18px; }
.sit .name { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-top: 0.4rem; }
.sit .desc { font-size: var(--type-caption); color: var(--ink-2); }
.sit .fear { font-size: var(--type-caption); color: var(--ink-3); font-style: italic; margin-top: 0.35rem; border-left: 2px solid var(--red-line); padding-left: 0.75rem; }
.sit .open { margin-top: auto; padding-top: 0.9rem; color: var(--cyan); font-weight: 600; font-size: var(--type-caption); }
.sit:hover .open { color: var(--cyan-2); }

/* Full situation cards (Situations page) */
.sitfull { padding: 0; }
.sitfull > summary { list-style: none; cursor: pointer; padding: 1.5rem 1.6rem; display: grid; grid-template-columns: 34px 1fr auto; gap: 1rem; align-items: start; }
.sitfull > summary::-webkit-details-marker { display: none; }
.sitfull > summary .icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--cyan); background: var(--cyan-faint); border: 1px solid var(--cyan-line); }
.sitfull > summary .icon svg { width: 18px; height: 18px; }
.sitfull > summary .title { font-size: 1.3rem; font-weight: 600; color: var(--ink); display: block; }
.sitfull > summary .summary-line { display: block; color: var(--ink-2); margin-top: 0.3rem; font-size: var(--type-body); max-width: 70ch; }
.sitfull > summary .mark { color: var(--cyan); font-size: 1.6rem; line-height: 1; font-weight: 300; }
.sitfull[open] > summary .mark { transform: rotate(45deg); }
.sitfull[open] > summary { border-bottom: 1px solid var(--rule); }
.sitfull .expand-body { padding: 1.5rem 1.6rem 1.75rem; display: grid; gap: 0.5rem; }
.field-label { display: block; font-size: var(--type-label); font-weight: 600; color: var(--cyan); margin-top: 1rem; }
.field-label:first-child { margin-top: 0; }
.field-label-secondary { display: block; font-size: var(--type-label); color: var(--ink-3); margin-top: 1rem; }
.expand-body p { color: var(--ink-2); }
.expand-body p.fear { color: var(--ink); font-style: italic; border-left: 2px solid var(--red); padding-left: 1rem; }
.expand-body p.floor-line { color: var(--ink-2); font-size: var(--type-caption); }
.dim-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.35rem; }
.dim-tag {
  font-size: var(--type-label); font-weight: 600; color: var(--red-soft);
  border: 1px solid var(--red-line); border-radius: 999px; padding: 0.2rem 0.65rem; background: var(--red-faint);
}
.dim-tag:hover { color: #fff; background: var(--red); }
.fig-cliff { margin-top: 1rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: rgba(5, 7, 8, 0.6); padding: 1rem 1rem 0.5rem; }
.fig-cliff svg { display: block; width: 100%; height: auto; }
.fig-caption { font-size: var(--type-caption); color: var(--ink-3); margin-top: 0.6rem; }
.post-pointer { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--cyan-line); background: var(--cyan-faint); font-size: var(--type-caption); }
.post-pointer .k { color: var(--ink-3); margin-right: 0.4rem; }

/* ------------------------------------------------------------
   TWO JUDGEMENTS
   ------------------------------------------------------------ */
.dual { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; }
.judgement { padding: 1.5rem; }
.judgement .q { font-size: 1.6rem; font-weight: 600; color: var(--ink); margin: 0.35rem 0 0.6rem; line-height: 1.15; }
.judgement .where { font-size: var(--type-label); color: var(--ink-3); margin-top: 0.75rem; }
.dial { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; padding: 0 0.5rem; }
.dial p { font-size: var(--type-label); color: var(--ink-3); max-width: 14ch; }
.dial p strong { color: var(--ink); }
.field-quote {
  margin-top: 1.5rem; padding: 1.5rem 1.75rem; border-radius: var(--radius);
  border: 1px solid var(--rule); background: linear-gradient(90deg, rgba(63, 212, 255, 0.05), rgba(255, 47, 61, 0.05));
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
}
.field-quote .date { font-family: var(--font-mono); font-size: var(--type-code); color: var(--ink-3); letter-spacing: 0.06em; white-space: nowrap; padding-top: 0.3rem; }
.field-quote p { max-width: 70ch; }
.field-quote p strong { color: var(--ink); }

/* ------------------------------------------------------------
   NINE QUESTIONS
   ------------------------------------------------------------ */
.families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.family { padding: 1.4rem 1.5rem 1.2rem; }
.family h3 { max-width: none; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.family h3 .count { font-size: var(--type-label); color: var(--ink-3); font-weight: 400; }
.family .fq { font-size: var(--type-caption); color: var(--red-soft); font-style: italic; margin-bottom: 0.9rem; display: block; }
.family ul { list-style: none; display: grid; }
.family li { padding: 0.7rem 0; border-top: 1px solid var(--rule-soft); }
.family li a { display: block; color: var(--ink); font-weight: 600; font-size: var(--type-body); }
.family li a:hover { color: var(--red-soft); }
.family li span { display: block; color: var(--ink-2); font-size: var(--type-caption); margin-top: 0.1rem; }

/* Dimension cards (inquiry page) */
.dimfull { padding: 0; }
.dimfull > summary { list-style: none; cursor: pointer; padding: 1.25rem 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.dimfull > summary::-webkit-details-marker { display: none; }
.dimfull > summary .title { font-size: 1.2rem; font-weight: 600; color: var(--ink); display: block; }
.dimfull > summary .summary-line { display: block; color: var(--ink-2); margin-top: 0.2rem; font-size: var(--type-caption); }
.dimfull > summary .mark { color: var(--red-soft); font-size: 1.6rem; line-height: 1; font-weight: 300; }
.dimfull[open] > summary .mark { transform: rotate(45deg); }
.dimfull[open] > summary { border-bottom: 1px solid var(--rule); }
.dimfull .expand-body { padding: 1.25rem 1.5rem 1.5rem; }
.dimfull .field-label { color: var(--red-soft); }
.measure-list { list-style: none; margin-top: 0.4rem; }
.measure-list li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--rule-soft); font-size: var(--type-caption); }
.measure-list .m-name { color: var(--ink-2); }
.measure-list .m-meta { font-family: var(--font-mono); font-size: var(--type-code); color: var(--ink-3); white-space: nowrap; }
.measure-list .m-meta .sep { color: var(--rule); margin: 0 0.15rem; }
.legend { display: grid; gap: 0.75rem; }
.legend .row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; font-size: var(--type-caption); }
.legend .key { font-family: var(--font-mono); font-size: var(--type-code); color: var(--cyan); letter-spacing: 0.04em; }
.legend .key.asked { color: var(--red-soft); }
.cadence { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-family: var(--font-mono); font-size: var(--type-code); color: var(--ink-3); margin-top: 0.5rem; }
.cadence .tick { color: var(--ink-2); }
.cadence .note { flex-basis: 100%; font-family: var(--font-sans); font-size: var(--type-label); font-style: italic; }

/* ------------------------------------------------------------
   QUOTES
   ------------------------------------------------------------ */
.quote { padding: 1.75rem 1.75rem 1.5rem; }
.quote blockquote { font-size: 1.2rem; line-height: 1.45; color: var(--ink); }
.quote blockquote::before { content: "“"; color: var(--cyan); font-size: 2.4rem; line-height: 0; vertical-align: -0.35em; margin-right: 0.15rem; }
.quote figcaption { margin-top: 1rem; font-size: var(--type-caption); color: var(--ink-3); }
.quote figcaption strong { color: var(--ink-2); display: block; }
.quote .on { font-size: var(--type-label); color: var(--ink-3); margin-bottom: 0.6rem; }

/* ------------------------------------------------------------
   DISCLOSURES
   ------------------------------------------------------------ */
.disc { border-top: 1px solid var(--rule); }
.disc:last-of-type { border-bottom: 1px solid var(--rule); }
.disc > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font-weight: 600; color: var(--ink); }
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary::after { content: "+"; color: var(--cyan); font-size: 1.4rem; font-weight: 300; line-height: 1; }
.disc[open] > summary::after { content: "−"; }
.disc .body { padding: 0 0 1.5rem; }
.disc .body p + p { margin-top: 0.8rem; }

/* ------------------------------------------------------------
   PAGE HEADER
   ------------------------------------------------------------ */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.page-head .crumb { font-size: var(--type-label); color: var(--ink-3); margin-bottom: 1.25rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.page-head .crumb a { color: var(--ink-3); }
.page-head .crumb a:hover { color: var(--cyan); }
.page-head .crumb .here { color: var(--ink-2); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: 1.25rem; }
.page-head .chip { margin-bottom: 1rem; }
.page-head--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.page-head--split .side { display: grid; gap: 1rem; }

/* ------------------------------------------------------------
   KIT PAGE
   ------------------------------------------------------------ */
.moments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; position: relative; }
.moment { padding: 1.3rem 1.4rem; }
.moment .n { font-family: var(--font-mono); font-size: var(--type-code); color: var(--cyan); letter-spacing: 0.08em; }
.moment h3 { font-size: 1.35rem; margin: 0.3rem 0 0.15rem; }
.moment .sub { font-size: var(--type-label); color: var(--ink-3); margin-bottom: 0.6rem; }
.moment p { font-size: var(--type-caption); }

.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.door { display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.4rem; }
.door .who { font-size: var(--type-label); font-weight: 600; color: var(--cyan); }
.door .price { font-size: 2.4rem; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; line-height: 1; margin-top: 0.5rem; }
.door .tenure { font-family: var(--font-mono); font-size: var(--type-code); color: var(--ink-3); margin-top: 0.4rem; letter-spacing: 0.04em; }
.door dl { margin-top: 1rem; display: grid; gap: 0.7rem; }
.door dt { font-size: var(--type-label); color: var(--ink-3); }
.door dd { font-size: var(--type-caption); color: var(--ink-2); margin-top: 0.1rem; }
.door--company { border-color: var(--cyan-line); }
.same-kit {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  margin-bottom: 1rem; font-size: var(--type-caption); color: var(--ink-2);
}
.same-kit::before, .same-kit::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan-line)); }
.same-kit::after { background: linear-gradient(90deg, var(--cyan-line), transparent); }
.same-kit strong { color: var(--cyan); }
.fine { font-size: var(--type-caption); color: var(--ink-3); max-width: 78ch; margin-top: 1.25rem; }

.notify { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.75rem; }
.notify h3 { font-size: 1.4rem; }
.notify .form-note { font-size: var(--type-caption); color: var(--ink-3); margin-top: 0.6rem; }
.signup { display: flex; gap: 0.6rem; }
.signup input[type="email"] {
  flex: 1; min-width: 0; padding: 0.8rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--rule); background: rgba(5, 7, 8, 0.6); color: var(--ink); font: inherit; font-size: var(--type-caption);
}
.signup input[type="email"]:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px var(--cyan-faint); }
.signup .hp { position: absolute; left: -9999px; }
.subscribe-saved { color: var(--cyan); font-weight: 600; }
.subscribe-error { color: var(--red-soft); font-size: var(--type-caption); margin-top: 0.5rem; }

.needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.needs .card h3 { font-size: 1.05rem; color: var(--cyan); }
.needlist { display: grid; gap: 0; margin-top: 0.5rem; }
.needlist > div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--rule-soft); font-size: var(--type-caption); }
.needlist .k { font-family: var(--font-mono); font-size: var(--type-code); color: var(--cyan); letter-spacing: 0.08em; padding-top: 0.2rem; }

.unit { padding: 0; }
.unit .unit-head { padding: 1.5rem 1.6rem 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.unit .num { font-family: var(--font-mono); font-size: var(--type-code); color: var(--cyan); letter-spacing: 0.08em; padding-top: 0.35rem; white-space: nowrap; }
.unit h3 { font-size: 1.5rem; }
.unit .moment-name { font-size: var(--type-label); color: var(--ink-3); margin-bottom: 0.4rem; display: block; }
.unit .unit-head p { font-size: var(--type-body); color: var(--ink-2); margin-top: 0.5rem; max-width: 70ch; }
.unit details { border-top: 1px solid var(--rule); }
.unit summary { list-style: none; cursor: pointer; padding: 0.9rem 1.6rem; font-weight: 600; color: var(--cyan); font-size: var(--type-caption); display: flex; justify-content: space-between; }
.unit summary::-webkit-details-marker { display: none; }
.unit summary::after { content: "+"; font-weight: 300; font-size: 1.2rem; line-height: 1; }
.unit details[open] summary::after { content: "−"; }
.lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-soft); }
.lesson { padding: 1rem 1.6rem; border-bottom: 1px solid var(--rule-soft); }
.lesson:nth-child(odd) { border-right: 1px solid var(--rule-soft); }
.lesson h4 { font-size: 1rem; }
.lesson h4 .ln { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--type-code); margin-right: 0.5rem; font-weight: 400; }
.lesson p { font-size: var(--type-caption); color: var(--ink-2); margin-top: 0.2rem; }

.editions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.edition .when { font-family: var(--font-mono); font-size: var(--type-code); color: var(--cyan); letter-spacing: 0.08em; }
.edition h3 { font-size: 1.1rem; margin-top: 0.35rem; }

/* ------------------------------------------------------------
   MENTORSHIP
   ------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: step; }
.step { padding: 1.4rem 1.4rem 1.25rem; }
.step .n { font-family: var(--font-mono); font-size: var(--type-code); color: var(--red-soft); letter-spacing: 0.08em; }
.step h3 { font-size: 1.15rem; margin: 0.4rem 0 0.3rem; }
.person { display: grid; grid-template-columns: 180px 1fr; gap: 1.75rem; align-items: center; padding: 1.5rem; }
.person img { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; border: 2px solid var(--cyan-line); box-shadow: 0 0 30px rgba(63, 212, 255, 0.2); }
.person h3 { font-size: 1.4rem; }
.person p { margin-top: 0.5rem; }
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.term .v { font-size: 1.7rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.term .k { font-size: var(--type-label); color: var(--ink-3); }
.term p { margin-top: 0.6rem; }
.sitchips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sitchip { font: inherit; cursor: pointer; font-size: var(--type-caption); font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--rule); border-radius: 999px; padding: 0.45rem 0.9rem; transition: border-color 0.2s ease, color 0.2s ease; }
.sitchip:hover { border-color: var(--cyan); color: var(--cyan); }

/* ------------------------------------------------------------
   FEEDS (Resources / Research)
   ------------------------------------------------------------ */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.post-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem; }
.post-card .sitlabel { font-size: var(--type-label); font-weight: 600; color: var(--cyan); background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; padding: 0; }
.post-card .sitlabel:hover { color: var(--cyan-2); }
.post-card .sitlabel--red { color: var(--red-soft); }
.post-card h3 { font-size: 1.2rem; line-height: 1.25; }
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--cyan); }
.post-card .kind { font-size: var(--type-label); color: var(--ink-3); }
.post-card .kind .accent { color: var(--ink-2); font-weight: 600; }
.marks { list-style: none; display: grid; gap: 0.3rem; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--rule-soft); }
.marks li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--type-label); color: var(--ink-3); }
.marks li .v { font-weight: 600; color: var(--ink-2); }
.marks li[data-verdict="held"] .v, .marks li[data-status="on-data"] .v, .marks li[data-status="supported"] .v, .marks li[data-status="named"] .v { color: var(--cyan); }
.marks li[data-verdict="surrendered"] .v, .marks li[data-status="not-readable"] .v { color: var(--red-soft); }
.marks li[data-verdict="at stake"] .v, .marks li[data-status="inferred"] .v, .marks li[data-status="open"] .v { color: var(--warn); }
.marks li[data-status="pending"] .v { color: var(--ink-3); }
.marks--row { display: flex; gap: 1.25rem; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.marks--row li { gap: 0.4rem; }

.check-intro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.check-intro .card h3 { color: var(--cyan); font-size: 1.05rem; }
.check-intro--red .card h3 { color: var(--red-soft); }

.filters { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: 1.25rem; }
.filters .lbl { font-size: var(--type-label); color: var(--ink-3); margin-right: 0.35rem; }
.pill { font: inherit; font-size: var(--type-label); font-weight: 600; color: var(--ink-2); cursor: pointer; background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 0.35rem 0.8rem; }
.pill:hover { color: var(--ink); border-color: var(--ink-3); }
.pill.is-on { color: var(--bg); background: var(--cyan); border-color: var(--cyan); }
.filters--red .pill.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.filters .grp { flex-basis: 100%; font-size: var(--type-label); color: var(--ink-3); margin-top: 0.4rem; }
.feed { border-top: 1px solid var(--rule); }
.feed-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.feed-row.is-hidden { display: none; }
.feed-row .meta { font-size: var(--type-label); color: var(--ink-3); }
.feed-row .meta a { color: var(--ink-3); }
.feed-row .meta a:hover { color: var(--cyan); }
.feed-row .meta .accent { color: var(--ink-2); }
.feed-row .meta .featured { color: var(--cyan); font-weight: 600; }
.feed-row h3 { font-size: 1.15rem; margin-top: 0.2rem; }
.feed-row h3 a { color: var(--ink); }
.feed-row h3 a:hover { color: var(--cyan); }
.feed-empty { padding: 1.5rem 0; color: var(--ink-3); display: none; }
.feed.is-empty + .feed-empty { display: block; }
.still { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.5rem; }
.still li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule-soft); font-size: var(--type-caption); }
.still li span { color: var(--ink-3); font-size: var(--type-label); white-space: nowrap; }

/* Commitment block (long clock) */
.commit { padding: 2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.commit h3 { font-size: 1.5rem; max-width: 26ch; }
.commit p { margin-top: 0.75rem; max-width: 62ch; }
.commit .stamp { font-family: var(--font-mono); font-size: var(--type-code); color: var(--red-soft); letter-spacing: 0.08em; white-space: nowrap; border: 1px solid var(--red-line); border-radius: 999px; padding: 0.5rem 0.9rem; }

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */
.about-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about-hero img { width: 100%; border-radius: var(--radius); border: 1px solid var(--rule); box-shadow: var(--shadow-card); }
.questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.questions .card .n { font-family: var(--font-mono); font-size: var(--type-code); color: var(--red-soft); letter-spacing: 0.08em; }
.questions .card p { margin-top: 0.5rem; font-size: var(--type-body); color: var(--ink); }
.halves { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; }
.halves .mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; padding: 0 0.75rem; }
.halves .mid .one { font-weight: 600; color: var(--ink); }
.halves .mid .list { font-family: var(--font-mono); font-size: var(--type-code); color: var(--ink-3); letter-spacing: 0.04em; max-width: 16ch; }

/* ------------------------------------------------------------
   CLOSING BAND + FOOTER
   ------------------------------------------------------------ */
.closing { padding: 2.25rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem; align-items: center; }
.closing h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.closing p { margin-top: 0.75rem; max-width: 50ch; }
.closing .actions { margin-top: 1.25rem; }
.closing .side { border-left: 1px solid var(--rule); padding-left: 2rem; }
.closing .side h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.closing .side p { font-size: var(--type-caption); color: var(--ink-3); margin-top: 0.5rem; }

footer { border-top: 1px solid var(--rule); padding-block: 3rem 2rem; background: #030405; }
.ft { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
.ft .brand img { width: 170px; height: auto; mix-blend-mode: screen; }
.ft .brand p { font-size: var(--type-caption); color: var(--ink-3); margin-top: 0.9rem; max-width: 34ch; }
.ft h5 { font-size: var(--type-label); color: var(--ink); margin-bottom: 0.6rem; }
.ft h5.red { color: var(--red-soft); }
.ft a { display: block; font-size: var(--type-caption); color: var(--ink-3); padding: 0.15rem 0; }
.ft a:hover { color: var(--cyan); }
.ft .ft-cyan h5, .ft .ft-cyan a { color: var(--cyan); }
.ft .ft-cyan a:hover { color: var(--cyan-2); }
.ft .ft-red h5, .ft .ft-red a { color: var(--red-soft); }
.ft .ft-red a:hover { color: var(--red); }
.ft-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-soft); font-size: var(--type-label); color: var(--ink-3); }
.ft-news { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-soft); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.ft-news h5 { margin-bottom: 0.2rem; }
.ft-news p { font-size: var(--type-caption); color: var(--ink-3); }

/* ------------------------------------------------------------
   DIALOG
   ------------------------------------------------------------ */
dialog.modal { margin: auto; border: 0; padding: 0; background: transparent; max-width: min(820px, calc(100vw - 2rem)); width: 100%; max-height: calc(100vh - 3rem); }
dialog.modal::backdrop { background: rgba(3, 4, 5, 0.75); backdrop-filter: blur(6px); }
.modal-frame { background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), var(--s2); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-lift); max-height: calc(100vh - 3rem); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; padding: 1.5rem 1.6rem 1.1rem; border-bottom: 1px solid var(--rule); }
.modal-head .title { font-size: 1.4rem; font-weight: 600; color: var(--ink); display: block; }
.modal-head .tagline { font-size: var(--type-caption); color: var(--ink-2); display: block; margin-top: 0.3rem; max-width: 60ch; }
.modal-close { background: none; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink-2); width: 36px; height: 36px; cursor: pointer; font-size: 1rem; }
.modal-close:hover { color: var(--ink); border-color: var(--ink-3); }
.modal-body { padding: 1.25rem 1.6rem 1.6rem; overflow: auto; }
.modal-body .expand-body { display: grid; gap: 0.5rem; }
.modal-foot { padding: 1rem 1.6rem; border-top: 1px solid var(--rule); font-size: var(--type-caption); display: flex; gap: 1.25rem; flex-wrap: wrap; }
html.modal-open { overflow: hidden; }

/* ------------------------------------------------------------
   REVEAL
   ------------------------------------------------------------ */
.reveal { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
.motion-ready .reveal:not(.in) { opacity: 0; transform: translateY(12px); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; } .d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .motion-ready .reveal:not(.in) { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn:hover, .card--hover:hover { transform: none; }
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .doors, .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts, .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; gap: 0; background: rgba(5, 7, 8, 0.98); border-bottom: 1px solid var(--rule); padding: 0.5rem var(--pad-x) 1rem; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.7rem 0; border-bottom: 1px solid var(--rule-soft); }
  .nav-links a.is-active::after { display: none; }
  .nav-links .sep { display: none; }
  .nav-cta { margin: 0.75rem 0 0; justify-content: center; }
  .hero-grid, .page-head--split, .about-hero, .notify, .closing, .commit { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-media .poster { width: min(100%, 300px); }
  .closing .side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.25rem; }
  .ways, .sits, .families, .grid-3, .grid-4, .steps, .posts, .needs, .questions, .check-intro, .editions, .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dual, .halves { grid-template-columns: 1fr; }
  .dial { padding: 0.5rem 0; }
  .ft { grid-template-columns: 1fr 1fr; }
  .ft-news { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (max-width: 640px) {
  .ways, .sits, .families, .grid-2, .grid-3, .grid-4, .steps, .posts, .needs, .questions, .check-intro, .editions, .terms, .doors, .moments, .facts, .facts--3, .facts--2, .proof, .lessons, .still, .ft { grid-template-columns: 1fr; }
  .lesson:nth-child(odd) { border-right: 0; }
  .signup { flex-direction: column; }
  .field-quote { grid-template-columns: 1fr; }
  .sitfull > summary { grid-template-columns: 34px 1fr; }
  .sitfull > summary .mark { display: none; }
  .needlist > div, .legend .row { grid-template-columns: 1fr; gap: 0.25rem; }
  .measure-list li { grid-template-columns: 1fr; gap: 0.2rem; }
  .feed-row { grid-template-columns: 1fr; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.75rem); }
}
@media print {
  body::before { display: none; }
  .top, footer, .closing, dialog { display: none !important; }
}

/* ------------------------------------------------------------
   POST PAGES (resources/*.html, research/*.html)
   Body markup is the production post, unchanged; only the chrome and
   the surface are new. Ported from main.css's post block, on these tokens.
   ------------------------------------------------------------ */
.post-head .kicker .accent { color: inherit; }
.post-head h1 { max-width: 26ch; }
.post-head .lead { max-width: 72ch; }
.post-head h1 strong { font-weight: inherit; color: var(--ink); }
.post-head .dim-tags { margin-top: 1.25rem; }
.dim-tag--cyan { color: var(--cyan); border-color: var(--cyan-line); background: var(--cyan-faint); font: inherit; font-size: var(--type-label); font-weight: 600; cursor: pointer; }
.dim-tag--cyan:hover { color: var(--bg); background: var(--cyan); }
.post { max-width: 76ch; }
.post-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.post-rail { position: sticky; top: 8.5rem; display: grid; gap: 1.5rem; }
.rail-block { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.rail-block:first-child { border-top: 0; padding-top: 0; }
.rail-k { display: block; font-size: var(--type-label); font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; }
.toc { list-style: none; display: grid; gap: 0.3rem; counter-reset: toc; }
.toc li { font-size: var(--type-caption); }
.toc a { color: var(--ink-2); display: block; padding-left: 1.4rem; position: relative; }
.toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 0.15em; font-family: var(--font-mono); font-size: var(--type-code); color: var(--ink-3); }
.toc a:hover { color: var(--cyan); }
.marks--rail { border-top: 0; padding-top: 0; margin: 0; }
.post-rail .dim-tags { margin-top: 0; }
@media (max-width: 920px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-rail { position: static; }
  .post { max-width: none; }
}
.post h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 0 0 1rem; max-width: none; }
.post section { padding: clamp(1.75rem, 4vw, 2.75rem) 0; border-top: 1px solid var(--rule); }
.post section:first-of-type { border-top: 0; padding-top: 0; }
.post p { color: var(--ink-2); margin: 0 0 1rem; }
.post p strong { color: var(--ink); }
.post ol.flaws { padding-left: 1.25rem; margin: 0 0 1rem; }
.post ol.flaws li, .post ol.moves li { color: var(--ink-2); margin-bottom: 0.8rem; }
.post ol.flaws li strong, .post ol.moves li strong { color: var(--ink); }
.post ol.moves { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: move; }
.post ol.moves li { padding-left: 2.4rem; position: relative; }
.post ol.moves li::before { counter-increment: move; content: counter(move, decimal-leading-zero); position: absolute; left: 0; top: 0.25rem; font-family: var(--font-mono); font-size: var(--type-code); color: var(--cyan); letter-spacing: 0.06em; }
.post .judgement { display: inline-block; font-family: var(--font-mono); font-size: var(--type-code); letter-spacing: 0.08em; color: var(--cyan); border: 1px solid var(--cyan-line); border-radius: 4px; padding: 0.1rem 0.5rem; margin-right: 0.5rem; vertical-align: 0.1em; }
.post .judgement.founder, .post .judgement.asked { color: var(--red-soft); border-color: var(--red-line); }
.post .cost { display: block; font-size: var(--type-caption); color: var(--ink-3); margin-top: 0.3rem; }
.check-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.check { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; background: rgba(5, 7, 8, 0.5); }
.check th, .check td { text-align: left; vertical-align: top; padding: 0.9rem 1rem; border-top: 1px solid var(--rule-soft); font-size: var(--type-caption); line-height: 1.55; color: var(--ink-2); }
.check thead th { white-space: nowrap; background: rgba(255, 255, 255, 0.03); border-top: 0; font-family: var(--font-mono); font-size: var(--type-code); letter-spacing: 0.08em; color: var(--ink-3); font-weight: normal; }
.check tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.check .question { color: var(--ink-3); font-style: italic; display: block; font-size: var(--type-code); margin-top: 0.15rem; white-space: normal; font-weight: 400; }
.verdict { font-weight: 600; white-space: nowrap; }
.verdict[data-verdict="held"], .verdict[data-status="supported"], .verdict[data-status="on-data"], .verdict[data-status="named"] { color: var(--cyan); }
.verdict[data-verdict="surrendered"], .verdict[data-status="not-readable"] { color: var(--red-soft); }
.verdict[data-verdict="at-stake"], .verdict[data-status="inferred"], .verdict[data-status="open"] { color: var(--warn); }
.verdict[data-status="pending"] { color: var(--ink-3); }
.post .fast-path { border: 1px solid var(--cyan-line); background: var(--cyan-faint); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; }
.post .fast-path p:last-child { margin-bottom: 0; }
.signoff { font-family: var(--font-mono); font-size: var(--type-code); line-height: 1.7; color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 1.25rem; margin-top: 0.5rem; }
.signoff .name { color: var(--ink-2); }
.post .gate-card, .post .source-card, .post .reading-card { margin: 1.5rem 0 0; border: 1px solid var(--rule); border-left: 2px solid var(--cyan); background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), var(--s1); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.25rem 1.5rem; font-size: var(--type-caption); color: var(--ink-2); }
.post .source-card { margin: 0 0 1.25rem; border-left-color: var(--red); }
.post .gate-eyebrow, .post .source-eyebrow { display: block; font-family: var(--font-mono); font-size: var(--type-code); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.5rem; }
.post .gate-name { font-size: var(--type-card-title); font-weight: 600; color: var(--ink); margin: 0 0 1rem; }
.post .gate-name a { color: inherit; }
.post .gate-name a:hover { color: var(--cyan); }
.post .gate-where { font-weight: normal; font-size: var(--type-caption); color: var(--ink-3); }
.post .source-card cite { font-style: normal; color: var(--ink); font-weight: 600; }
.post .gate-lines { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.25rem; row-gap: 0.6rem; margin: 0; }
.post .gate-lines dt { font-family: var(--font-mono); font-size: var(--type-code); letter-spacing: 0.06em; color: var(--ink-3); padding-top: 0.15rem; }
.post .gate-lines dd { margin: 0; font-size: var(--type-caption); line-height: 1.6; color: var(--ink-2); }
@media (max-width: 560px) { .post .gate-lines { grid-template-columns: 1fr; row-gap: 0.25rem; } .post .gate-lines dd { margin-bottom: 0.6rem; } }