/* ============================================================
   Ontheia — showcase
   Faces: Jost (display / UI), Newsreader (editorial), IBM Plex Mono (source fragments)
   ============================================================ */

@font-face { font-family:'Jost'; src:url('/assets/fonts/jost-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Jost'; src:url('/assets/fonts/jost-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Newsreader'; src:url('/assets/fonts/newsreader-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Newsreader'; src:url('/assets/fonts/newsreader-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'PlexMono'; src:url('/assets/fonts/plexmono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  --ivory:#F4EEDF;
  --ivory-deep:#ECE4D1;
  --paper:#FBF7EC;
  --ink:#26252A;
  --graphite:#4B4B49;
  --graphite-soft:#63615B;
  --lavender:#847F9F;
  --lavender-deep:#5B567A;
  --sage:#6E8B84;
  --line:rgba(75,75,73,.16);
  --line-soft:rgba(75,75,73,.10);

  --display:'Jost', ui-sans-serif, system-ui, sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:'PlexMono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --rail:clamp(14px, 4.5vw, 58px);
  --measure:66ch;

  /* diagram wiring */
  --sd-arrow:rgba(75,75,73,.38);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  margin:0;
  background:var(--ivory);
  color:var(--graphite);
  font-family:var(--serif);
  font-size:clamp(1.02rem, 0.97rem + 0.25vw, 1.16rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* subtle paper texture: two barely-there radial washes, no image */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(132,127,159,.07), transparent 60%),
    radial-gradient(900px 560px at 6% 8%, rgba(110,139,132,.06), transparent 62%);
}

h1,h2,h3 { font-family:var(--display); color:var(--ink); font-weight:400; letter-spacing:-0.01em; }
em { font-style:italic; }
a { color:inherit; }

.mono { font-family:var(--mono); font-size:.86em; letter-spacing:.01em; }
.muted { color:var(--graphite-soft); }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--ivory);
  padding:.6rem 1rem; border-radius:0 0 6px 0; font-family:var(--display); z-index:100;
}
.skip-link:focus{ left:0; }

:where(a,button):focus-visible{
  outline:2px solid var(--lavender-deep); outline-offset:3px; border-radius:3px;
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem clamp(18px,4vw,44px);
  background:color-mix(in srgb, var(--ivory) 82%, transparent);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.brand{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--graphite); }
.brand-mark{ width:30px; height:30px; color:var(--graphite); overflow:visible; }
.mark-core{ fill:var(--lavender); }
.brand-word{ font-family:var(--display); font-weight:500; font-size:1.12rem; letter-spacing:.005em; color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:clamp(.7rem,2.4vw,1.7rem); }
.nav-links > a:not(.nav-github){
  font-family:var(--display); font-size:.92rem; text-decoration:none; color:var(--graphite-soft);
  padding:.2rem 0; border-bottom:1.5px solid transparent; transition:color .2s, border-color .2s;
}
.nav-links > a:not(.nav-github):hover{ color:var(--ink); }
.nav-links > a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--lavender); }
.nav-github{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-family:var(--display); font-size:.9rem; color:var(--graphite);
  padding:.4rem .7rem; border:1px solid var(--line); border-radius:999px;
  transition:border-color .2s, color .2s, background .2s;
}
.nav-github:hover{ color:var(--ink); border-color:var(--graphite-soft); background:var(--paper); }

/* inline "learn more" links inside captions / sections */
.learn{
  display:inline-block; font-family:var(--display); font-size:.86em; font-style:normal;
  text-decoration:none; color:var(--lavender-deep); white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb, var(--lavender) 45%, transparent);
  transition:border-color .2s, color .2s;
}
.learn:hover{ color:var(--ink); border-bottom-color:var(--graphite-soft); }
.diagram figcaption .learn, .mini figcaption .learn{ margin-left:.35em; }

/* ---------- shared type bits ---------- */
.eyebrow{
  font-family:var(--display); font-size:.76rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lavender-deep);
  margin:0 0 1.1rem;
}
.eyebrow--center{ text-align:center; }
/* an <h2> that carries the eyebrow look (gives a section a real heading without a visual heading) */
h2.eyebrow--asheading{ font-weight:500; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--display); font-weight:500; font-size:.98rem; letter-spacing:.01em;
  padding:.72rem 1.25rem; border-radius:999px; cursor:pointer;
  transition:transform .18s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn--primary{ background:var(--ink); color:var(--ivory); box-shadow:0 1px 0 rgba(0,0,0,.04); }
.btn--primary:hover{ background:#37363c; transform:translateY(-1px); box-shadow:0 8px 22px -12px rgba(38,37,42,.6); }
.btn--ghost{ color:var(--graphite); border:1px solid var(--line); }
.btn--ghost:hover{ border-color:var(--graphite-soft); color:var(--ink); background:var(--paper); }
.btn--lg{ padding:.85rem 1.5rem; font-size:1.02rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:clamp(3.4rem,8vw,7rem) clamp(18px,4vw,44px) clamp(2rem,4vw,3.2rem); }
.hero-inner{ max-width:52rem; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-mark{
  width:clamp(64px,11vw,92px); height:clamp(64px,11vw,92px); color:var(--graphite);
  overflow:visible; margin-bottom:1.6rem;
  animation:mark-in 1s cubic-bezier(.2,.7,.2,1) both;
}
.hero-mark .mark-core{ transform-origin:50px 50px; animation:core-settle 1.5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mark-in{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes core-settle{ 0%{ opacity:0; transform:rotate(8deg) scale(.4); } 60%{ opacity:1; } 100%{ transform:rotate(8deg) scale(1); } }

.hero-title{
  font-size:clamp(2.15rem, 1.4rem + 3.4vw, 4.05rem);
  line-height:1.04; letter-spacing:-0.02em; margin:0 0 1.4rem; font-weight:400;
}
.hero-title .muted{ color:var(--graphite-soft); }
.hero-lede{
  max-width:40rem; margin:0 auto; font-size:clamp(1.08rem,1rem+0.4vw,1.28rem);
  line-height:1.6; color:var(--graphite);
}
.hero-lede em{ color:var(--ink); font-style:italic; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2rem; }
.pronounce{
  margin-top:2.4rem; font-family:var(--display); font-size:.86rem; letter-spacing:.04em;
  color:var(--graphite-soft); display:flex; align-items:center; gap:.2rem;
}
.pronounce span[aria-hidden]{ color:var(--lavender); }

/* ============================================================
   FLOW — the coherence thread (a single continuous rail)
   ============================================================ */
.flow{ max-width:60rem; margin:clamp(1.5rem,5vw,3.5rem) auto 0; padding:0 clamp(18px,4vw,44px); }
.flow-inner{ position:relative; }
/* the one continuous line running through every stop */
.flow-inner::before{
  content:""; position:absolute; left:var(--rail); top:6px; bottom:34px; width:1px;
  background:linear-gradient(var(--line-soft), var(--line) 8%, var(--line) 92%, transparent);
}

.stop{ position:relative; padding:clamp(3.2rem,7vw,5.4rem) 0 0 calc(var(--rail) + clamp(20px,3.5vw,40px)); }
.stop:first-child{ padding-top:clamp(1.5rem,4vw,2.5rem); }
/* node marker sitting on the rail, aligned to the eyebrow */
.stop > .eyebrow{ position:relative; }
.stop > .eyebrow::before{
  content:""; position:absolute;
  left:calc(-1 * (var(--rail) + clamp(20px,3.5vw,40px)) + var(--rail) - 5px);
  top:.05em; width:11px; height:11px; border-radius:3.5px; background:var(--lavender);
  transform:rotate(8deg); box-shadow:0 0 0 5px var(--ivory);
}

.stop-title{
  font-size:clamp(1.55rem,1.1rem+1.7vw,2.35rem); line-height:1.14; margin:0 0 1.1rem;
  max-width:22ch;
}
.stop-lede{ max-width:var(--measure); margin:0 0 1.6rem; color:var(--graphite); }
.stop-foot{ max-width:var(--measure); margin:1.8rem 0 0; color:var(--graphite-soft); font-style:italic; }

/* source-system fragment token */
.frag{
  font-family:var(--mono); font-size:.82em; color:var(--lavender-deep);
  background:color-mix(in srgb, var(--lavender) 12%, var(--paper));
  border:1px solid color-mix(in srgb, var(--lavender) 26%, transparent);
  padding:.06em .4em; border-radius:4px; white-space:nowrap;
}
.q{ font-style:italic; color:var(--ink); }

/* ---------- cost vignettes ---------- */
.vignettes{ display:grid; gap:clamp(1rem,2.4vw,1.8rem); grid-template-columns:repeat(3,1fr); margin-top:.4rem; }
.vignette{
  padding-top:1.15rem; border-top:1px solid var(--line);
}
.vignette h3{ font-family:var(--display); font-weight:500; font-size:1.06rem; margin:0 0 .55rem; color:var(--ink); letter-spacing:0; }
.vignette p{ margin:0; font-size:.98rem; line-height:1.55; }

/* ============================================================
   DIAGRAMS
   ============================================================ */
.diagram{ margin:2rem 0 0; }
.diagram svg{
  width:100%; height:auto; display:block; max-width:720px;
}
.arw-head{ fill:var(--sd-arrow); }
.diagram figcaption{
  margin-top:1.1rem; font-size:.98rem; color:var(--graphite-soft); max-width:52ch; font-style:italic;
}
.diagram figcaption em{ color:var(--graphite); font-style:italic; }

/* shift diagram text + shapes */
.d-label{ font-family:var(--display); font-size:15px; fill:var(--graphite-soft); letter-spacing:.14em; text-transform:uppercase; }
.d-label--on{ fill:var(--lavender-deep); }
.d-node{ font-family:var(--display); font-size:14px; fill:var(--graphite); }
.d-strong{ fill:var(--ink); font-weight:500; }
.d-person{ fill:var(--graphite-soft); font-size:13px; }
.d-silo rect{ fill:var(--paper); stroke:var(--line); }
.d-silo text{ font-family:var(--mono); font-size:12.5px; fill:var(--graphite-soft); text-anchor:middle; }
.d-silo--screen rect{ fill:transparent; stroke:var(--line); stroke-dasharray:2 3; }
.d-tangle path{ stroke:var(--sd-arrow); stroke-width:1; opacity:.7; }
.d-rule{ stroke:var(--line); stroke-width:1; }
.d-flow path{ stroke:var(--lavender); stroke-width:1.4; }
.d-reconcile ellipse{ fill:color-mix(in srgb, var(--sage) 12%, var(--paper)); stroke:var(--sage); }
.d-reconcile text{ font-family:var(--display); font-size:12.5px; fill:var(--graphite); text-anchor:middle; }
.d-ontology rect{ fill:color-mix(in srgb, var(--lavender) 13%, var(--paper)); stroke:var(--lavender); }
.d-ontology text{ font-family:var(--display); font-size:12.5px; fill:var(--ink); text-anchor:middle; }
.d-surface text{ font-family:var(--display); font-size:13px; fill:var(--lavender-deep); }

/* ---------- outcomes ---------- */
.outcomes{ display:grid; gap:clamp(1.4rem,3vw,2.2rem); grid-template-columns:repeat(2,1fr); margin-top:.6rem; }
.outcome{
  padding-top:1.2rem; border-top:1px solid var(--line);
}
.outcome--wide{ grid-column:1 / -1; }
.outcome h3{ font-family:var(--display); font-weight:500; font-size:1.16rem; margin:0 0 .6rem; color:var(--ink); letter-spacing:0; }
.outcome p{ margin:0; }

.mini{ margin:1.2rem 0 0; }
.mini svg{ width:100%; height:auto; display:block; }
.mini figcaption{ margin-top:.7rem; font-size:.86rem; color:var(--graphite-soft); font-style:italic; }

/* reconciliation convergence */
.recon-frag rect{ fill:var(--paper); stroke:color-mix(in srgb, var(--lavender) 26%, transparent); }
.recon-frag text{ font-family:var(--mono); font-size:12px; fill:var(--graphite); }
.recon-frag .rf-src{ font-size:10px; fill:var(--graphite-soft); letter-spacing:.06em; text-transform:uppercase; }
.recon-paths path{ stroke:var(--lavender); stroke-width:1.3; fill:none; }
.recon-frag rect, .recon-entity rect{ fill:var(--paper); }
.recon-entity rect{ fill:color-mix(in srgb, var(--lavender) 14%, var(--paper)); stroke:var(--lavender); }
.recon-core{ fill:var(--lavender); }
.recon-entity text{ font-family:var(--display); font-size:14px; fill:var(--ink); text-anchor:middle; }
/* motion is an enhancement only — gated on .js so no-JS renders the final state */
.js .recon-frag .rf{ opacity:0; transform:translateX(-10px); transition:opacity .6s ease, transform .6s ease; transition-delay:calc(var(--i) * .12s); }
.js .recon.in .rf{ opacity:1; transform:none; }
.js .recon-paths path{ stroke-dasharray:260; stroke-dashoffset:260; transition:stroke-dashoffset 1s ease .35s; }
.js .recon.in .recon-paths path{ stroke-dashoffset:0; }
.js .recon-entity rect{ opacity:0; transition:opacity .6s ease .9s; }
.js .recon.in .recon-entity rect{ opacity:1; }
.js .recon-entity text{ opacity:0; transition:opacity .6s ease 1s; }
.js .recon.in .recon-entity text{ opacity:1; }
.recon-entity .re-sub{ font-size:10.5px; fill:var(--lavender-deep); letter-spacing:.02em; }

/* contradiction */
.contra .c-src rect{ fill:var(--paper); stroke:var(--line); }
.contra .c-src-l{ font-family:var(--mono); font-size:10px; fill:var(--graphite-soft); letter-spacing:.04em; text-transform:uppercase; }
.contra .c-val{ font-family:var(--display); font-weight:500; font-size:15px; fill:var(--ink); }
.contra .c-val-sub{ font-family:var(--display); font-size:11px; fill:var(--graphite-soft); }
.contra .c-link path{ stroke:var(--graphite-soft); stroke-width:1.1; stroke-dasharray:3 3; opacity:.65; }
.contra .c-target rect{ fill:transparent; stroke:var(--lavender-deep); stroke-width:1.4; }
/* the "both kept" doubling — offset ghost outline */
.contra .c-target rect{ filter:none; }
.contra .c-t-title{ font-family:var(--display); font-size:12.5px; fill:var(--ink); text-anchor:middle; font-weight:500; }
.contra .c-t-flag{ font-family:var(--mono); font-size:9.5px; fill:var(--lavender-deep); text-anchor:middle; letter-spacing:.04em; }

/* ---------- scene ---------- */
#scene{ }
.scene-quote{ margin:0; max-width:34rem; }
.scene-quote p{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.25rem,1rem+1.3vw,1.7rem); line-height:1.42; color:var(--ink); margin:0;
}
.scene-quote em{ color:var(--lavender-deep); font-style:italic; }
.loop{
  list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; padding:0; margin:2rem 0 0;
  font-family:var(--display); font-size:.86rem; letter-spacing:.12em; text-transform:uppercase; color:var(--graphite-soft);
}
.loop li{ position:relative; }
.loop li+li::before{ content:"→" / ""; position:absolute; left:-1rem; color:var(--lavender); }
.scene-more{ margin:1.8rem 0 0; }

/* ============================================================
   POSITIONING strip
   ============================================================ */
.positioning{
  margin:clamp(3.5rem,8vw,6.5rem) 0 0; padding:clamp(3.2rem,7vw,5.5rem) clamp(18px,4vw,44px);
  background:var(--ink); color:var(--ivory);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
}
.positioning p{
  font-family:var(--display); font-weight:400; letter-spacing:-0.01em;
  font-size:clamp(1.5rem,1rem+2.4vw,2.6rem); line-height:1.12; margin:0; max-width:24ch;
}
.positioning .muted{ color:color-mix(in srgb, var(--ivory) 52%, var(--lavender)); }
.positioning-more{
  margin-top:1.6rem; font-family:var(--display); font-size:.92rem; text-decoration:none;
  color:color-mix(in srgb, var(--ivory) 70%, var(--lavender));
  border-bottom:1px solid color-mix(in srgb, var(--ivory) 30%, transparent); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.positioning-more:hover{ color:var(--ivory); border-bottom-color:color-mix(in srgb, var(--ivory) 60%, transparent); }

/* ============================================================
   STATUS + CTA
   ============================================================ */
.status{ padding:clamp(3.6rem,8vw,6rem) clamp(18px,4vw,44px); }
.status-inner{ max-width:44rem; margin-inline:auto; text-align:center; }
.status-title{ font-size:clamp(1.7rem,1.2rem+2vw,2.6rem); line-height:1.12; margin:0 0 1.3rem; }
.status-lede{ margin:0 auto 2.1rem; max-width:38rem; color:var(--graphite); }
.status-lede { }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  border-top:1px solid var(--line); padding:2.4rem clamp(18px,4vw,44px) 2.6rem;
  background:var(--ivory-deep);
}
.foot-inner{
  max-width:60rem; margin-inline:auto; display:flex; align-items:center; gap:1.2rem 2rem; flex-wrap:wrap;
}
.brand--foot .brand-mark{ width:26px; height:26px; }
.brand--foot .brand-word{ font-size:1rem; }
.foot-links{ display:flex; align-items:center; gap:1.1rem 1.5rem; flex-wrap:wrap; margin-left:auto; }
.foot-links a{ font-family:var(--display); font-size:.9rem; text-decoration:none; color:var(--graphite); transition:color .2s; }
.foot-links a:hover{ color:var(--ink); }
.foot-note{ margin:0; color:var(--graphite-soft); font-size:.9rem; flex:1 1 100%; }
.foot-legal{
  max-width:60rem; margin:1.4rem auto 0; font-family:var(--display); font-size:.8rem;
  color:var(--graphite-soft); letter-spacing:.02em;
}
.foot-legal a{ color:var(--graphite); text-decoration:none; border-bottom:1px solid var(--line); }
.foot-legal a:hover{ color:var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .vignettes{ grid-template-columns:1fr; }
  .outcomes{ grid-template-columns:1fr; }
  .stop-title{ max-width:none; }
}
/* header: wrap nav onto a centered second row on narrow screens */
@media (max-width:640px){
  .nav{ flex-wrap:wrap; justify-content:center; gap:.5rem 1rem; padding-top:.7rem; padding-bottom:.7rem; }
  .nav-links{ width:100%; justify-content:center; gap:clamp(.8rem,4vw,1.4rem); }
}
@media (max-width:520px){
  .nav-github span{ display:none; }
  .nav-github{ padding:.45rem; }
  .nav-links{ font-size:.9rem; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .loop li+li::before{ left:-.85rem; }
  .foot-links{ margin-left:0; }
}

@media (prefers-reduced-motion: reduce){
  .hero-mark, .hero-mark .mark-core,
  .vignette, .outcome, .diagram svg, .contra,
  .recon-frag .rf, .recon-paths path, .recon-entity rect, .recon-entity text{
    animation:none !important; transition:none !important;
    opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important;
  }
}

/* ============================================================
   INTERIOR PAGES (how / coherence / walkthrough)
   ============================================================ */
.page-hero{ padding:clamp(2.6rem,6vw,4.6rem) clamp(18px,4vw,44px) clamp(1rem,2vw,2rem); }
.page-hero-inner{ max-width:46rem; margin-inline:auto; }
.page-title{
  font-size:clamp(2rem,1.4rem+2.6vw,3.3rem); line-height:1.06; letter-spacing:-0.02em;
  margin:0 0 1.6rem; font-weight:400;
}
.page-title .muted{ color:var(--graphite-soft); }
.page-lede{ max-width:42rem; margin:1.6rem 0 0; font-size:clamp(1.05rem,1rem+0.35vw,1.22rem); color:var(--graphite); }
.page-lede em{ color:var(--ink); font-style:italic; }

/* opening 15-second scene: a chat fragment + a line of framing */
.opener{ margin:1.8rem 0 0; display:flex; gap:1.2rem 1.5rem; align-items:flex-start; flex-wrap:wrap; }
.chat{
  flex:0 0 auto; max-width:20rem; background:var(--paper); border:1px solid var(--line);
  border-left:3px solid var(--lavender); border-radius:5px 9px 9px 5px; padding:.85rem 1rem;
}
.chat-msg{ margin:0; font-family:var(--mono); font-size:.94rem; line-height:1.4; color:var(--ink); }
.chat-src{ margin:.5rem 0 0; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--graphite-soft); }
.opener figcaption{ flex:1 1 16rem; margin:0; font-size:1rem; line-height:1.55; color:var(--graphite); align-self:center; }

/* prose + honest notes inside stops */
.prose{ max-width:var(--measure); margin:1.4rem 0 0; color:var(--graphite); }
.prose em{ color:var(--ink); font-style:italic; }
.honest{
  max-width:var(--measure); margin:1.8rem 0 0; padding:.9rem 0 0 1rem;
  border-left:2px solid color-mix(in srgb, var(--sage) 55%, transparent);
  font-size:.95rem; line-height:1.55; color:var(--graphite-soft); font-style:italic;
}
.honest em{ color:var(--graphite); }

/* wider diagram variants */
.diagram--wide{ overflow-x:auto; }
.diagram--wide > svg{ max-width:100%; min-width:500px; }
.diagram--ring svg{ max-width:440px; margin-inline:auto; }
.diagram .cap-note{ display:block; margin-top:.5rem; }
.seq{
  font-family:var(--mono); font-size:.8rem; color:var(--lavender-deep); font-style:normal;
  line-height:1.5; display:inline-block;
}

/* loop ring */
.loop-arc path, .loop-arc.loop-arc--close{ stroke:var(--lavender); stroke-width:1.5; }
.loop-arc--close{ stroke:var(--lavender-deep); stroke-width:2.4; }
.arw-head-strong{ fill:var(--lavender-deep); }
.loop-node circle{ fill:var(--paper); stroke:var(--lavender); stroke-width:1.4; }
.loop-node text{ font-family:var(--display); font-size:13px; fill:var(--ink); text-anchor:middle; }
.loop-node--reality circle{ fill:color-mix(in srgb, var(--sage) 16%, var(--paper)); stroke:var(--sage); }
.loop-node--act circle{ fill:color-mix(in srgb, var(--lavender) 15%, var(--paper)); stroke:var(--lavender-deep); }

/* eight-question grid */
.qgrid{
  list-style:none; margin:.4rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 2rem;
  max-width:52rem;
}
.qgrid li{ font-size:.98rem; line-height:1.5; color:var(--graphite); padding-left:.2rem; }
.qn{ display:block; font-family:var(--display); font-weight:500; font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--lavender-deep); margin-bottom:.2rem; }

/* Y-flow reconciliation diagram */
.yf-node rect{ fill:var(--paper); stroke:var(--line); }
.yf-node text{ font-family:var(--display); font-size:13px; fill:var(--ink); text-anchor:middle; }
.yf-node .yf-sub{ font-family:var(--mono); font-size:9.5px; fill:var(--graphite-soft); }
.yf-obs rect{ fill:color-mix(in srgb, var(--sage) 12%, var(--paper)); stroke:var(--sage); }
.yf-pass rect{ stroke:var(--lavender); }
.yf-judge rect{ fill:color-mix(in srgb, var(--lavender) 14%, var(--paper)); stroke:var(--lavender-deep); }
.yf-out rect{ fill:transparent; stroke:var(--lavender-deep); }
.yf-out-t{ font-size:11px; }
.yf-line path{ stroke:var(--lavender); stroke-width:1.4; }
.yf-know{ stroke:var(--graphite-soft); stroke-width:1.2; stroke-dasharray:4 4; opacity:.75; }
.yf-know-l{ font-family:var(--mono); font-size:9.5px; fill:var(--graphite-soft); text-anchor:middle; letter-spacing:.02em; }

/* disciplines block */
.disciplines{ display:grid; gap:clamp(1.4rem,3vw,2.2rem); margin-top:.4rem; }
.disc{ padding-top:1.2rem; border-top:1px solid var(--line); }
.disc h3{ font-family:var(--display); font-weight:500; font-size:1.12rem; margin:0 0 .5rem; color:var(--ink); letter-spacing:0; }
.disc p{ margin:0; max-width:var(--measure); }
.disc .diagram{ margin-top:1.2rem; }

/* model vs instance layers */
.layer-l{ font-family:var(--display); font-size:11px; fill:var(--graphite-soft); letter-spacing:.12em; text-transform:uppercase; }
.mv-node rect{ fill:var(--paper); stroke:var(--line); }
.mv-node text{ font-family:var(--display); font-size:13px; fill:var(--ink); text-anchor:middle; }
.mv-node--inst rect{ fill:color-mix(in srgb, var(--lavender) 10%, var(--paper)); stroke:var(--lavender); }
.mv-edge{ stroke:var(--graphite-soft); stroke-width:1.2; }
.mv-rel{ font-family:var(--mono); font-size:10px; fill:var(--lavender-deep); text-anchor:middle; letter-spacing:.05em; }
.mv-tag{ font-family:var(--mono); font-size:9.5px; fill:var(--graphite-soft); text-anchor:middle; }

/* authority stack */
.auth-tier rect{ stroke-width:1.3; }
.auth-tier text{ font-family:var(--display); font-size:13px; fill:var(--ink); text-anchor:middle; }
.auth-tier .auth-sub{ font-family:var(--mono); font-size:9.5px; fill:var(--graphite-soft); }
.auth-tier--src rect{ fill:color-mix(in srgb, var(--lavender) 14%, var(--paper)); stroke:var(--lavender-deep); }
.auth-tier--proj rect{ fill:var(--paper); stroke:var(--line); }
.auth-arrow{ stroke:var(--graphite-soft); stroke-width:1.2; }
.auth-repro{ font-family:var(--mono); font-size:9.5px; fill:var(--graphite-soft); }

/* surface forms list */
.forms{
  list-style:none; margin:1.2rem 0 0; padding:0; max-width:var(--measure);
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
}
.forms li{
  font-family:var(--mono); font-size:.82rem; color:var(--graphite);
  background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:.28em .6em;
}

@media (max-width:640px){
  .qgrid{ grid-template-columns:1fr; }
}

/* ---- coherence page ---- */
.opener--split .split-pair{ flex:0 0 auto; display:flex; gap:.8rem; }
.split-card{
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:.7rem 1.1rem; text-align:center; min-width:6.5rem;
}
.split-card:first-child{ border-left:3px solid var(--lavender); }
.split-card:last-child{ border-left:3px solid var(--sage); }
.split-val{ margin:0; font-family:var(--display); font-weight:500; font-size:1.7rem; color:var(--ink); line-height:1; }
.split-src{ margin:.4rem 0 0; font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; text-transform:uppercase; color:var(--graphite-soft); }

/* riverbed */
.river-bank{ stroke:var(--graphite); stroke-width:1.5; opacity:.5; }
.river-mid{ stroke:var(--sage); stroke-width:1.4; stroke-dasharray:5 5; opacity:.8; }

/* promise cards */
.promises{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,1.7rem); margin-top:.4rem; }
.promise{ padding-top:1.1rem; border-top:1px solid var(--line); }
.promise h3{ font-family:var(--display); font-weight:500; font-size:1.05rem; margin:0 0 .5rem; color:var(--ink); letter-spacing:0; }
.promise p{ margin:0; font-size:.96rem; line-height:1.5; }
.promise .fail{ margin:.6rem 0 0; font-size:.85rem; font-style:italic; color:var(--graphite-soft); }

/* "what this is not" ledger */
.ledger{ margin:.4rem 0 0; max-width:52rem; }
.ledger > div{ display:grid; grid-template-columns:15rem 1fr; gap:.4rem 2rem; padding:1.1rem 0; border-top:1px solid var(--line); }
.ledger dt{ font-family:var(--display); font-weight:500; font-size:1rem; color:var(--ink); }
.ledger dd{ margin:0; color:var(--graphite); }
.ledger dd em{ color:var(--ink); font-style:italic; }

@media (max-width:820px){
  .promises{ grid-template-columns:1fr 1fr; }
  .ledger > div{ grid-template-columns:1fr; gap:.3rem; }
}
@media (max-width:560px){
  .promises{ grid-template-columns:1fr; }
  .opener--split .split-pair{ width:100%; }
  .split-card{ flex:1 1 0; }
}

/* ---- walkthrough page ---- */
.page-note{ max-width:42rem; margin:1.6rem 0 0; color:var(--graphite-soft); font-style:italic; }
.page-note em{ color:var(--graphite); font-style:italic; }
.ticker{ display:flex; flex-wrap:wrap; gap:.55rem; margin:1.8rem 0 0; }
.obs-chip{
  font-family:var(--mono); font-size:.8rem; color:var(--graphite);
  background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:.32em .6em;
}
.obs-src{ color:var(--lavender-deep); text-transform:uppercase; font-size:.86em; letter-spacing:.04em; margin-right:.5em; }

.mini--center{ max-width:460px; }
.mini--center svg{ margin-inline:auto; }

/* fork (reuse vs novelty) */
.fork-obs rect{ fill:color-mix(in srgb, var(--sage) 12%, var(--paper)); stroke:var(--sage); }
.fork-obs text{ font-family:var(--display); font-size:12.5px; fill:var(--ink); text-anchor:middle; }
.fork-line path{ stroke:var(--lavender); stroke-width:1.3; }
.fork-line--new path{ stroke:var(--lavender-deep); stroke-width:1.3; stroke-dasharray:5 4; }
.fork-node rect{ fill:var(--paper); stroke:var(--lavender); }
.fork-node text{ font-family:var(--mono); font-size:11px; fill:var(--graphite); text-anchor:middle; }
.fork-node--new rect{ fill:transparent; stroke:var(--lavender-deep); stroke-dasharray:5 4; }
.fork-tag{ font-family:var(--display); font-size:10px; fill:var(--graphite-soft); letter-spacing:.1em; text-transform:uppercase; text-anchor:start; }
.fork-tag--new{ fill:var(--lavender-deep); }

/* contradiction consequence nodes */
.cons-line path{ stroke:var(--graphite-soft); stroke-width:1.1; }
.cons-node rect{ fill:var(--paper); stroke:var(--line); }
.cons-node--money rect{ fill:color-mix(in srgb, var(--lavender) 12%, var(--paper)); stroke:var(--lavender-deep); }
.cons-t{ font-family:var(--display); font-size:12px; fill:var(--ink); text-anchor:middle; font-weight:500; }
.cons-s{ font-family:var(--mono); font-size:8.5px; fill:var(--graphite-soft); text-anchor:middle; }

/* loop-closed steps */
.steps{ list-style:none; margin:.4rem 0 0; padding:0; max-width:var(--measure); display:grid; gap:.9rem; }
.steps li{ display:flex; gap:.9rem; align-items:baseline; }
.step-n{
  flex:0 0 auto; width:1.7rem; height:1.7rem; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:.85rem; color:var(--lavender-deep);
  background:color-mix(in srgb, var(--lavender) 12%, var(--paper)); border:1px solid color-mix(in srgb, var(--lavender) 30%, transparent);
  transform:translateY(.15rem);
}
.step-b{ font-size:.98rem; line-height:1.5; }
.step-b strong{ font-weight:500; color:var(--ink); font-family:var(--display); }
.stat-flip{ font-family:var(--mono); color:var(--sage); font-weight:400; }

/* golden set results */
.golden{ display:flex; flex-wrap:wrap; gap:.7rem; margin:.4rem 0 1.8rem; }
.gd{ display:inline-flex; align-items:center; gap:.6rem; padding:.4rem .8rem; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.gd-dim{ font-family:var(--display); font-size:.9rem; color:var(--graphite); }
.gd-score{ font-family:var(--mono); font-size:.86rem; }
.gd-pass{ color:var(--sage); }
.gd-miss{ color:var(--lavender-deep); }
.gd-miss::after{ content:" ⚑"; }

/* failure cards */
.fails{ display:grid; gap:clamp(1.2rem,2.6vw,1.9rem); margin-top:.2rem; }
.failx{ padding-top:1.1rem; border-top:1px solid var(--line); }
.failx h3{ font-family:var(--display); font-weight:500; font-size:1.1rem; margin:0 0 .5rem; color:var(--ink); letter-spacing:0; }
.failx p{ margin:0; max-width:var(--measure); }
.failx .diagram{ margin-top:1.2rem; }

/* A/B timeline */
.tl-axis{ stroke:var(--line); stroke-width:1.5; }
.tl-tick line{ stroke:var(--lavender); stroke-width:1.6; }
.tl-tick text:first-of-type, .tl-tick > text{ text-anchor:middle; }
.tl-tick text{ font-family:var(--mono); font-size:11px; fill:var(--ink); text-anchor:middle; }
.tl-lbl{ font-size:9.5px !important; fill:var(--graphite-soft) !important; }
.tl-pending{ fill:var(--lavender-deep); }
.tl-out text{ font-family:var(--mono); font-size:10px; }
.tl-out-l{ fill:var(--graphite-soft); text-anchor:start; }
.tl-out-bad{ fill:var(--lavender-deep); text-anchor:start; }
.tl-out-good{ fill:var(--sage); text-anchor:start; }

@media (max-width:560px){
  .cons-s, .tl-lbl{ display:none; }
}

/* ---- 404 ---- */
.notfound{ max-width:40rem; margin:0 auto; padding:clamp(4rem,12vw,9rem) clamp(18px,4vw,44px); text-align:center; }
.notfound-title{ font-size:clamp(1.9rem,1.3rem+2.4vw,3rem); line-height:1.08; letter-spacing:-0.02em; margin:0 0 1.2rem; font-weight:400; }
.notfound-lede{ max-width:34rem; margin:0 auto 2rem; color:var(--graphite); }
.notfound-links{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:center; font-family:var(--display); font-size:.98rem; }
.notfound-links a{ text-decoration:none; color:var(--lavender-deep); border-bottom:1px solid color-mix(in srgb, var(--lavender) 45%, transparent); padding-bottom:2px; transition:color .2s, border-color .2s; }
.notfound-links a:hover{ color:var(--ink); border-bottom-color:var(--graphite-soft); }