/* x2 (Folium X; from x1) — the visual, material, typographic and motion grammar of the dossier (§8), in one stylesheet.
   Near-black ground; paper, graphite, vellum, book cloth, ink and archival labels as materials; editorial serif for human and
   literary statements; grotesk for controls and status; mathematics as MathML in a math font. Status is carried by shape and
   words, never colour alone. Motion is semantic only and disappears under Quiet or reduced motion. */
@font-face{font-family:"Crimson Pro";src:url(/assets/fonts/crimson-pro-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(/assets/fonts/crimson-pro-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url(/assets/fonts/crimson-pro-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --ground:#0a0c0b;--ground-2:#101412;--ground-3:#161b18;--paper:#ebe4d4;--ink:#ebe4d4;--muted:#b4ac9b;--faint:#8d887c;
  --rule:rgba(235,228,212,.14);--rule-2:rgba(235,228,212,.26);--gilt:#d9bb7e;--gilt-2:#b8975a;--cloth:#4a2224;--cloth-2:#1f3a30;
  --label:#d7c396;--label-ink:#1c170c;--card:rgba(22,27,24,.86);--card-2:rgba(30,36,32,.9);--vellum:rgba(235,228,212,.05);
  --focus:#f0d9a8;--mark:rgba(217,187,126,.28);--support:#cfd8c7;--resist:#e6cfc2;
  --serif:"Crimson Pro",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --math:"STIX Two Math","Cambria Math","Latin Modern Math",math;--ease:cubic-bezier(.2,.7,.2,1);
  --measure:40rem;--wide:82rem;color-scheme:dark
}
:root[data-appearance="light"]{
  --ground:#f4efe4;--ground-2:#ece5d6;--ground-3:#e3dac7;--paper:#1c1a16;--ink:#1c1a16;--muted:#554f45;--faint:#6b6558;
  --rule:rgba(28,26,22,.14);--rule-2:rgba(28,26,22,.28);--gilt:#7a531a;--gilt-2:#6a4714;--cloth:#6b2d30;--cloth-2:#244437;
  --label:#e6d6ae;--label-ink:#221a08;--card:rgba(251,248,241,.94);--card-2:rgba(245,240,229,.96);--vellum:rgba(28,26,22,.04);
  --focus:#7a531a;--mark:rgba(196,146,70,.28);--support:#2f4a37;--resist:#6b3b2a;color-scheme:light
}
@media (prefers-color-scheme:light){:root:not([data-appearance="dark"]){
  --ground:#f4efe4;--ground-2:#ece5d6;--ground-3:#e3dac7;--paper:#1c1a16;--ink:#1c1a16;--muted:#554f45;--faint:#6b6558;
  --rule:rgba(28,26,22,.14);--rule-2:rgba(28,26,22,.28);--gilt:#7a531a;--gilt-2:#6a4714;--cloth:#6b2d30;--cloth-2:#244437;
  --label:#e6d6ae;--label-ink:#221a08;--card:rgba(251,248,241,.94);--card-2:rgba(245,240,229,.96);--vellum:rgba(28,26,22,.04);
  --focus:#7a531a;--mark:rgba(196,146,70,.28);--support:#2f4a37;--resist:#6b3b2a;color-scheme:light}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ground);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:400 1.125rem/1.6 var(--serif);background:var(--ground);color:var(--ink);overflow-x:clip}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:url(/assets/x/img/grain.svg);opacity:.06;z-index:0}
main,header,footer{position:relative;z-index:1}
img,svg{max-width:100%}
a{color:var(--gilt);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ground);color:var(--ink);padding:.6rem 1rem;z-index:50}
.skip:focus{left:1rem;top:1rem}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.005em;margin:0 0 .5em}
h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem)} h3{font-size:1.35rem} h4{font-size:1.1rem}
p{margin:0 0 .8em} ul,ol{margin:0 0 1em;padding-left:1.25em}
/* at 200% text a long word in a large heading must still fit a phone */
h1,h2,h3,h4,p,li,dd,dt,figcaption,blockquote,summary,caption,label{overflow-wrap:break-word}h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}
.meta{font:400 .82rem/1.5 var(--sans);color:var(--muted)}
.overline{font:600 .75rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt);margin:0 0 .9rem}
mark{background:var(--mark);color:inherit;padding:0 .08em;border-radius:2px}

/* controls */
button{font:inherit;color:inherit}
.btn{font:600 .88rem/1.2 var(--sans);letter-spacing:.01em;background:var(--gilt);color:var(--ground);border:0;border-radius:999px;padding:.72rem 1.15rem;cursor:pointer;text-decoration:none;display:inline-block;min-height:44px}
.btn:hover{background:var(--ink);color:var(--ground)}
.btn:disabled{opacity:.55;cursor:default}
.chip{font:600 .78rem/1 var(--sans);background:transparent;border:1px solid var(--rule-2);border-radius:999px;padding:.55rem .85rem;cursor:pointer;min-height:36px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.linklike{background:none;border:0;padding:0;color:var(--gilt);text-decoration:underline;text-underline-offset:.18em;cursor:pointer;font:inherit}

/* header */
.xbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.2rem;padding:.6rem clamp(1rem,3vw,2rem);background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none}
.brand-t{display:flex;flex-direction:column;line-height:1.05;font:600 1rem/1.1 var(--serif)}
.brand-t small{font:400 .7rem/1.2 var(--sans);letter-spacing:.06em;color:var(--muted)}
.bm{width:24px;height:30px;flex:none}.bm-spine{fill:var(--cloth)}.bm-cover{fill:var(--cloth-2);stroke:var(--gilt);stroke-width:1}.bm-pages{fill:var(--paper);opacity:.6}.bm-lens{stroke:var(--gilt);stroke-width:1.6;fill:none;stroke-linecap:round}
.xnav{display:flex;gap:1.05rem;flex-wrap:wrap;font:400 .85rem/1.2 var(--sans)}
.xnav a{color:var(--muted);text-decoration:none;padding:.35rem 0;white-space:nowrap}
.xnav a:hover,.xnav a[aria-current="page"]{color:var(--ink)}
.xnav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--gilt)}
.prefs{margin-left:auto;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;max-width:100%}
.depth-g{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;max-width:100%;border:1px solid var(--rule-2);border-radius:999px;padding:.2rem}
.depth-k{font:600 .64rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 .45rem 0 .5rem}
.dg{font:600 .72rem/1 var(--sans);background:none;border:0;border-radius:999px;padding:.5rem .6rem;cursor:pointer;color:var(--muted);min-height:32px}
.dg[aria-pressed="true"]{background:var(--gilt);color:var(--ground)}
@media (max-width:1100px){.xbar{flex-wrap:wrap}.xnav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;gap:.9rem;padding-bottom:.2rem}}
@media (max-width:560px){.brand-t small{display:none}.depth-k{display:none}.xbar{gap:.6rem}.prefs{margin-left:0}}
@media (max-width:760px){.xbar{position:relative}}

/* footer */
.xfoot{border-top:1px solid var(--rule);margin-top:5rem;padding:2.5rem clamp(1rem,4vw,3rem) 2rem;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.5rem;font:400 .86rem/1.55 var(--sans);color:var(--muted)}
.xfoot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-content:flex-start}
.xfoot-links a{color:var(--muted)}
.made-by{grid-column:1/-1;font-family:var(--serif);font-style:italic}
.xfoot-status b{color:var(--ink)}
@media (max-width:760px){.xfoot{grid-template-columns:minmax(0,1fr)}}

/* mathematics: MathML in a math font, always with its words */
math{font-family:var(--math);font-size:1.12em}
.fx{margin:1rem 0;min-width:0;max-width:100%}
.fs-formal>*,.ex>*,.pc>*,.fd>*,.lc>*,.sc>*,.dp>*,.ap-depth>*{min-width:0}
.fx-math{overflow-x:auto;overflow-y:hidden;padding:.35rem 0;max-width:100%}
.fx-math math{display:block;margin:0;text-align:left}
.fx-words{font:400 .8rem/1.5 var(--sans);color:var(--muted);margin:.25rem 0 0}
.fx-k{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.66rem;color:var(--faint);margin-right:.35rem}
.fx-big math{font-size:1.45em}.pc .fx-big math{font-size:1.2em}.fx-hero math{font-size:clamp(2.2rem,1.4rem + 3.2vw,4.2rem);color:var(--gilt)}
.fx-hero .fx-words{max-width:28rem}
.fxi math{display:inline;font-size:1.05em}

/* status: shape + words */
.sts{display:inline-flex;flex-wrap:wrap;gap:.35rem;vertical-align:middle}
.st{display:inline-flex;align-items:center;gap:.35rem;font:600 .66rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);padding:.28rem .5rem;border-radius:3px;border:1px solid var(--rule-2);background:var(--vellum);white-space:normal;max-width:100%}
.st-g{font-size:.95em;color:var(--gilt)}
.st-established{border-style:solid}.st-correspondence{border-style:dashed}.st-model{border:3px double var(--rule-2)}
.st-implemented{border-width:2px}.st-principle{border-style:solid;border-radius:0}.st-hypothesis{border-style:dotted;border-width:2px}
.dl{display:inline-block;font:600 .64rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--label-ink);background:var(--label);padding:.3rem .55rem;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);margin:0 .4rem .3rem 0}
.demo-flag,.inv,.x-tag{overflow-wrap:anywhere;font:600 .66rem/1.2 var(--sans);letter-spacing:.06em;color:var(--muted);border:1px dashed var(--rule-2);border-radius:3px;padding:.22rem .45rem;white-space:normal}
.x-tag{font-size:.6rem;padding:.1rem .35rem;white-space:nowrap}

/* sections */
.sec{max-width:var(--wide);margin:0 auto;padding:clamp(3.5rem,6vw,6.5rem) clamp(1rem,4vw,3rem) 0}
.sh{max-width:52rem;margin-bottom:2.2rem}
.sh-n{font:600 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gilt);margin:0 0 .8rem}
.sh-t{font-size:1.2rem;color:var(--muted);max-width:var(--measure)}
.sub{margin-top:3rem;font-size:1.6rem}
.page-intro{max-width:var(--wide);margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1rem,4vw,3rem) 1rem}
.page-intro h1{font-size:clamp(2.3rem,1.4rem + 3.4vw,4.2rem);max-width:22ch}
.lede{font-size:1.3rem;max-width:44rem;color:var(--ink)}
.fp-toc{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1.6rem;font:400 .85rem/1.4 var(--sans)}
.fp-toc a{color:var(--muted)}
.status-block{font:400 .92rem/1.55 var(--sans);color:var(--muted);border-left:2px solid var(--gilt);padding:.4rem 0 .4rem 1rem;max-width:44rem}

/* formal and text-alternative disclosures */
details.formal,details.astext{margin-top:1.1rem;border-top:1px solid var(--rule);padding-top:.7rem}
details.formal>summary,details.astext>summary{font:600 .78rem/1.3 var(--sans);letter-spacing:.06em;color:var(--muted);cursor:pointer;min-height:32px;padding:.3rem 0}
details.formal[open]>summary,details.astext[open]>summary{color:var(--ink)}

/* depth: four levels; with scripts, one shows at a time */
.depth{margin:.9rem 0;border-left:1px solid var(--rule-2);padding-left:.9rem}
.depth-tabs{display:none;gap:.25rem;flex-wrap:wrap;margin-bottom:.55rem}
.js .depth-tabs{display:flex}
.dt{font:600 .68rem/1 var(--sans);letter-spacing:.05em;background:none;border:1px solid var(--rule);color:var(--muted);border-radius:999px;padding:.42rem .62rem;cursor:pointer;min-height:30px}
.dt[aria-pressed="true"]{color:var(--ground);background:var(--ink);border-color:var(--ink)}
.dp-k{font:600 .64rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 .35rem}
.js .dp{display:none}.js .dp.on{display:block}
.dp>p:last-child{margin-bottom:0}
.dp .big{font-size:1.35rem}

/* ============ HERO ============ */
.hero{position:relative;min-height:min(100svh,62rem);display:grid;align-items:end;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero-art{position:absolute;inset:0}
.hero-art img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.8)}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,11,.2) 0%,rgba(10,12,11,.55) 45%,var(--ground) 100%)}
:root[data-appearance="light"] .hero-art img{opacity:.3}
.hero-in{position:relative;max-width:var(--wide);width:100%;margin:0 auto;padding:clamp(6rem,14vh,10rem) clamp(1rem,4vw,3rem) clamp(2.5rem,6vh,4rem)}
.hero h1{display:flex;flex-direction:column;gap:.2rem;margin:0 0 1rem}
.h-app{font-size:clamp(3rem,1.6rem + 6vw,6.6rem);line-height:.95;letter-spacing:-.02em}
.h-desc{font-style:italic;font-weight:400;font-size:clamp(1.4rem,1rem + 1.6vw,2.4rem);color:var(--gilt)}
.hero-promise{font-size:clamp(1.35rem,1rem + 1.2vw,2rem);max-width:36ch;margin:0}
.hero-motto{font:600 .8rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:.6rem 0 1.4rem}
.hero-long{max-width:46rem;font-size:1.15rem;color:var(--ink);opacity:.92}
.entrances{display:grid;grid-template-columns:repeat(2,minmax(0,20rem));gap:1rem;margin:2rem 0 1.4rem}
.ent{display:flex;flex-direction:column;gap:.25rem;padding:1.1rem 1.25rem;border:1px solid var(--rule-2);border-radius:10px;text-decoration:none;color:var(--ink);background:var(--card);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.ent:hover{border-color:var(--gilt);transform:translateY(-2px);color:var(--ink)}
.ent-k{font:600 .66rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt)}
.ent b{font-size:1.35rem}.ent small{font:400 .82rem/1.4 var(--sans);color:var(--muted)}
.hero-status{font:400 .82rem/1.5 var(--sans);color:var(--muted)}
@media (max-width:640px){.entrances{grid-template-columns:minmax(0,1fr)}}

/* ============ THE TRANSFORMING BOOK (B) and LENS SWITCH (C) ============ */
.book-stage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"fig desc" "sw sw" "alt alt";gap:1rem 2rem;align-items:start}
.book-fig{grid-area:fig;margin:0}
.book-canvas{position:relative;border-radius:14px;background:radial-gradient(ellipse at 50% 42%,var(--ground-3),var(--ground) 70%);border:1px solid var(--rule);overflow:hidden}
.book-svg{display:block;width:100%;height:auto}
.book-cap{font:400 .78rem/1.5 var(--sans);color:var(--muted);margin-top:.5rem}
.book-cap-k{font-weight:600;color:var(--ink);margin-right:.3rem}
.book-desc{grid-area:desc;font-size:1rem}
.book-desc ol{padding-left:1.4em}.book-desc li{margin:.35rem 0}
.bd-k{font:600 .72rem/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gilt)}
.book-stage>.lens-switch{grid-area:sw}.book-stage>details{grid-area:alt}
.book-alts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:1rem}
.book-alt dl{font:400 .82rem/1.45 var(--sans);margin:0}.book-alt dt{font-weight:600;margin-top:.3rem}.book-alt dd{margin:0;color:var(--muted)}
.book-alt h3{font-size:.95rem;hyphens:manual;-webkit-hyphens:manual}
@media (max-width:900px){.book-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"fig" "sw" "desc" "alt"}}
/* book drawing */
.book-shadow{fill:#000;opacity:.45}:root[data-appearance="light"] .book-shadow{opacity:.14}@media (prefers-color-scheme:light){:root:not([data-appearance="dark"]) .book-shadow{opacity:.14}}
.book-cover{fill:var(--cloth-2);stroke:rgba(0,0,0,.4)}
.cloth{fill:var(--cloth)}.cloth-l{stroke:rgba(255,255,255,.08);stroke-width:2}
.book-spine{stroke:rgba(0,0,0,.35)}
.book-pages{fill:#e9dfc8}.book-pl{stroke:rgba(90,70,40,.35);stroke-width:1}
.book-frame{fill:none;stroke:#d9bb7e;stroke-width:1.2;opacity:.7}
.book-light{pointer-events:none}
.hatch-l{stroke:var(--faint);stroke-width:1.2;opacity:.6}
/* overlays: objects, relations, provenance, history */
.ov-card rect{fill:var(--card-2);stroke:var(--rule-2);stroke-width:1.2}
.ov-card.handwritten .ov-t{font-family:var(--serif);font-style:italic;font-size:20px}
.ov-card.c-method rect{stroke:var(--gilt);stroke-width:2}
.ov-card.c-claim rect{stroke:var(--gilt)}
.ov-card.c-res rect{stroke-dasharray:6 5}
.ov-card.c-work rect{stroke-dasharray:2 5;fill:transparent}
.ov-card.c-ed .hatchfill{opacity:.35;stroke:none}.ov-card.c-ed rect:first-child{stroke-dasharray:8 4}
.ov-card.c-copy rect{stroke:var(--gilt)}
.ov-card.c-plate rect{fill:var(--label);stroke:none}.ov-card.c-plate text{fill:var(--label-ink)}
.ov-k{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;fill:var(--gilt)}
.ov-t{font:400 17px/1 var(--sans);fill:var(--ink)}
.ov-tag rect{fill:var(--label);stroke:rgba(0,0,0,.2)}.ov-tag text{font:600 14px/1 var(--sans);fill:var(--label-ink)}
.ov-tag.t-guard rect,.ov-tag.t-kind rect,.ov-tag.t-env rect,.ov-tag.t-order rect,.ov-tag.t-ring rect,.ov-tag.t-gate rect{fill:var(--card-2);stroke:var(--rule-2)}
.ov-tag.t-guard text,.ov-tag.t-kind text,.ov-tag.t-env text,.ov-tag.t-order text,.ov-tag.t-ring text,.ov-tag.t-gate text{fill:var(--ink);font-weight:400}
.ov-link{fill:none;stroke:var(--gilt);stroke-width:1.6}
.ov-link.thin{stroke:var(--faint);stroke-width:1.1}.ov-link.dashed{stroke-dasharray:7 6}.ov-link.res{stroke:var(--resist)}.ov-link.sup{stroke:var(--support)}
.ov-link.rel{stroke:var(--gilt);stroke-width:1.3}.ov-link.faint{opacity:.45}
.ov-lt{font:400 italic 15px/1 var(--serif);fill:var(--muted)}
.ov-formula{font:400 30px/1 var(--math);fill:var(--gilt)}
.ov-q{font:400 italic 26px/1 var(--serif);fill:var(--ink)}
.ov-node circle{fill:var(--ground-2);stroke:var(--gilt);stroke-width:1.4}
.ov-node.schema circle{stroke:var(--faint);stroke-dasharray:3 4}
.ov-node .ov-label{font:400 16px/1 var(--sans);fill:var(--ink)}
.ov-sym{font:400 24px/1 var(--math);fill:var(--gilt)}
.ov-badge circle{fill:var(--gilt)}.ov-badge text{font:600 14px/1 var(--sans);fill:var(--ground)}
.ov-ring{fill:none;stroke:var(--rule-2);stroke-width:1.2}.ov-ring.r1{stroke-dasharray:3 6}.ov-ring.r2{stroke-dasharray:1 7}.ov-ring.r3{stroke:var(--gilt);opacity:.35}
.ov-bound{fill:none;stroke:var(--gilt);stroke-width:1.2;stroke-dasharray:4 7;opacity:.6}.ov-bound.inner{stroke:var(--faint);opacity:.4}
.ov-frame{fill:none;stroke:var(--rule-2);stroke-width:1.2}.ov-frame.f0{stroke:var(--gilt)}.ov-frame.f2{stroke-dasharray:6 5}.ov-frame.f3{stroke-dasharray:2 6}
.ov-stratum{fill:var(--vellum);stroke:var(--rule-2)}.ov-stratum.s1{opacity:.9}.ov-stratum.s2{opacity:.6}.ov-stratum.s3{opacity:.35}
.ov-axis{stroke:var(--gilt);stroke-width:1.2;opacity:.6}.ov-tick{stroke:var(--gilt);stroke-width:1.4}
.ov-loop{fill:none;stroke:var(--gilt);stroke-width:1.4;stroke-dasharray:10 8;opacity:.7}
.station circle{fill:var(--ground-2);stroke:var(--gilt);stroke-width:1.6}.station.gate circle{fill:var(--gilt)}.pause{fill:var(--ground)}
.ov-gate{fill:var(--cloth-2);stroke:var(--gilt)}
.mini-book{fill:var(--ground-3);stroke:var(--rule-2)}
.book-stage.narrow .ov-label,.book-stage.narrow .ov-card>rect,.book-stage.narrow .ov-tag>rect,.book-stage.narrow .ov-lt,.book-stage.narrow .ov-q,.book-stage.narrow .ov-formula{display:none}
.book-stage.narrow .ov-badge circle{r:22px}.book-stage.narrow .ov-badge text{font-size:22px}
/* lens switch */
.lens-switch{display:flex;flex-direction:column;gap:.45rem;margin-top:.4rem}
.ls-note{font:400 .8rem/1.45 var(--sans);color:var(--muted);margin:0}.priority{font:400 1rem/1.55 var(--sans);max-width:52rem}
.ls-k{font:600 .68rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ls-row{display:flex;flex-wrap:wrap;gap:.35rem}
.ls{font:600 .74rem/1.1 var(--sans);letter-spacing:.02em;background:transparent;border:1px solid var(--rule-2);color:var(--ink);border-radius:4px;padding:.5rem .65rem;cursor:pointer;min-height:36px;transition:background .2s,color .2s}
.ls[aria-pressed="true"]{background:var(--gilt);color:var(--ground);border-color:var(--gilt)}

/* ============ WORK ≠ EDITION ≠ COPY ============ */
.demo{margin-top:3.5rem;padding:clamp(1.2rem,3vw,2.2rem);border:1px solid var(--rule);border-radius:16px;background:linear-gradient(180deg,var(--vellum),transparent 60%)}
.dh{margin-bottom:1.4rem}
.dh-k{font:600 .78rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.7rem;margin-bottom:.4rem}
.dh-l{display:inline-grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--gilt);border-radius:50%;color:var(--gilt);font:600 .9rem/1 var(--serif);letter-spacing:0}
.dh-line{font-size:1.5rem;line-height:1.25;max-width:36rem;margin-bottom:.6rem}
.dh-st{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.wec{display:grid;gap:1rem}
.wec-ctl{display:flex;gap:.5rem;flex-wrap:wrap}
.wec-work{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 1rem;font:400 .92rem/1.5 var(--sans);border:1px dashed var(--rule-2);border-radius:10px;padding:.8rem 1rem}
.wk-k{font-weight:600;color:var(--gilt);margin:0}.wec-work p{margin:0}
.wec-copies{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0}
.wc{border:1px solid var(--gilt);border-radius:10px;padding:1rem;background:var(--card)}
.wc-k{font:600 .75rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gilt)}
.wc dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem .8rem;font:400 .88rem/1.45 var(--sans);margin:0}.wc dt{color:var(--muted)}.wc dd{margin:0}
.demo-wec.collapsed .wec-copies{grid-template-columns:minmax(0,1fr)}
.demo-wec.collapsed .wc+.wc{display:none}
.demo-wec.collapsed .wc dd{text-decoration:line-through;text-decoration-color:var(--faint);color:var(--muted)}
.wec-lost{font:400 .92rem/1.5 var(--sans);color:var(--ink)}
@media (max-width:640px){.wec-copies{grid-template-columns:minmax(0,1fr)}}

/* ============ FRAMEWORK ============ */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:1.1rem}
.ex{border:1px solid var(--rule);border-radius:12px;padding:1.2rem 1.3rem;background:var(--card)}
.ex header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;align-items:baseline}
.ex h3{font-size:1.1rem;margin:0}
.ex-d{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .8rem;font:400 .85rem/1.45 var(--sans);margin:.4rem 0}.ex-d dd{margin:0;color:var(--muted)}
.caveat{font:400 .8rem/1.5 var(--sans);color:var(--muted);border-left:2px solid var(--rule-2);padding-left:.7rem}
.duality{margin:2.4rem 0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1.2rem;align-items:stretch}
.du{padding:1.4rem;border-radius:12px;border:1px solid var(--rule)}
.du-p{border-style:dashed;background:linear-gradient(135deg,var(--vellum),transparent)}
.du-f{border:1px solid var(--gilt);background:var(--card)}
.du-k{font:600 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gilt)}
.du-axis{display:grid;place-items:center;font:400 2.4rem/1 var(--math);color:var(--gilt);padding:0 .5rem;position:relative}
.du-axis::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--rule-2)}
.du-axis span{background:var(--ground);position:relative;padding:.3rem 0}
.du-line{grid-column:1/-1;text-align:center;font-size:1.45rem;font-style:italic;margin:0}
.duality details{grid-column:1/-1}
@media (max-width:760px){.duality{grid-template-columns:minmax(0,1fr)}.du-axis{padding:.4rem 0}.du-axis::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px}}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1.1rem}
.pc{border:1px solid var(--rule);border-radius:12px;padding:1.2rem 1.25rem;background:var(--card);display:flex;flex-direction:column}
.pc header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .7rem}
.pc-n{font:400 1.05rem/1 var(--math);color:var(--gilt);margin:0}
.pc h3{margin:0;font-size:1.3rem}
.pc-line{font-size:1.1rem;font-style:italic}
.pc-s{font:400 .78rem/1.5 var(--sans);color:var(--muted);margin-top:auto}.pc-s span{font-weight:600;margin-right:.3rem}

/* ============ WHAT IS IT ============ */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.rail{border:1px solid var(--rule);border-radius:14px;padding:1.4rem;background:var(--card)}
.rail-b{border-color:var(--gilt)}
.rail-k{font:600 .75rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt)}
.rail ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 1.2rem}
.rail li{display:flex;align-items:center;gap:.4rem;font:400 .92rem/1.2 var(--sans);border:1px solid var(--rule-2);border-radius:999px;padding:.4rem .75rem .4rem .45rem}
.rail li b{font-weight:600}
.rail-n{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--vellum);font:600 .7rem/1 var(--sans);color:var(--muted)}
.rail a{color:var(--ink);text-decoration:none}.rail a.btn,.rail a.btn:hover{color:var(--ground)}
.levels{margin-top:2.6rem}
.lv{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.lv li{border-top:2px solid var(--rule-2);padding-top:.8rem}
.lv li:last-child{border-top-color:var(--gilt)}
.lv-k{font:600 .7rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gilt)}
@media (max-width:900px){.two,.lv{grid-template-columns:minmax(0,1fr)}}

/* ============ ASK A FIELD ============ */
.lc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1.1rem}
.lc{border:1px solid var(--rule);border-radius:12px;padding:1.25rem 1.3rem;background:var(--card);display:flex;flex-direction:column}
.lc-ask{font:600 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt);margin:0 0 .4rem}
.lc h3{font-size:1.4rem;font-style:italic;font-weight:400}
.lc-k{font:400 .8rem/1.5 var(--sans);color:var(--muted)}
.lc-go{font:400 .82rem/1.5 var(--sans);margin-top:auto;padding-top:.6rem}

/* ============ BY STRUCTURE ============ */
.mode{display:inline-flex;flex-wrap:wrap;max-width:100%;align-items:center;gap:.4rem;border:1px solid var(--rule-2);border-radius:999px;padding:.25rem}
.mode-b{font:600 .78rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:none;border:0;border-radius:999px;padding:.6rem 1rem;cursor:pointer;color:var(--muted);min-height:38px}
.mode-b[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.mode-arrow{color:var(--gilt);font:400 1.1rem/1 var(--math)}
.mode-sec{margin-bottom:1.6rem}
.bys{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,23rem),1fr));gap:1.1rem}
.sc{border:1px solid var(--rule);border-radius:12px;padding:1.2rem 1.3rem;background:var(--card)}
.sc header p{color:var(--muted)}
.sc-list{font:400 .8rem/1.5 var(--sans);color:var(--muted)}
.sc-cells{list-style:none;padding:0;margin:.7rem 0 0;font:400 .84rem/1.4 var(--sans);display:grid;gap:.3rem}
.sc-cells a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}.sc-cells b{color:var(--gilt)}
.byd{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1rem}
.bd{border:1px solid var(--rule);border-radius:12px;padding:1rem 1.2rem}
.bd ul{font:400 .84rem/1.5 var(--sans);padding-left:1em}
.bys[hidden],.byd[hidden]{display:none}

/* ============ Φ ATLAS (A) ============ */
.atlas{margin-top:.5rem}
.atlas-bar{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-bottom:1rem}
.atlas-hint{font:400 .82rem/1.5 var(--sans);color:var(--muted);max-width:40rem;margin:0}
.atlas-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.6rem;align-items:start}
.atlas-stage{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--ground-3),var(--ground) 68%);max-width:46rem}
.atlas-svg{position:absolute;inset:0;width:100%;height:100%}
.ring{fill:none;stroke:var(--rule-2);stroke-width:1}.ring-i{stroke-dasharray:2 6}
.phi-disc{fill:var(--ground-2);stroke:var(--gilt);stroke-width:1.2}
.phi{font:400 64px/1 var(--math);fill:var(--gilt)}.phi-cap{font:400 18px/1 var(--math);fill:var(--muted)}
.edge{fill:none;stroke:var(--gilt);stroke-width:1.5;opacity:.75}.edge.added{stroke-dasharray:6 6}.edge.on{stroke-width:3.4;opacity:1}
.edge-l{font:400 italic 20px/1 var(--serif);fill:var(--ink);paint-order:stroke;stroke:var(--ground);stroke-width:5px}
.atlas-nodes{position:absolute;inset:0}
.node{position:absolute;transform:translate(-50%,-50%);background:var(--ground);border:1px solid var(--rule-2);color:var(--ink);cursor:pointer;min-height:32px;padding:.3rem .55rem;white-space:nowrap;transition:left .7s var(--ease),top .7s var(--ease),opacity .3s,border-color .3s}
.node-d{font:600 .74rem/1 var(--serif);font-variant:small-caps;letter-spacing:.06em;font-size:.92rem;border-radius:4px}
.node-s{font:600 .66rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;border-style:dashed}
.node[aria-pressed="true"]{background:var(--gilt);color:var(--ground);border-color:var(--gilt)}
.node.rel{border-color:var(--gilt);border-style:solid}
.node.dim{opacity:.42}
.atlas-panel{border:1px solid var(--rule);border-radius:14px;padding:1.3rem 1.4rem;background:var(--card);min-height:18rem}
.ap-k{font:600 .7rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt)}
.ap-cell{font-size:1.35rem;font-style:italic}
.ap-src,.ap-sub{font:400 .78rem/1.5 var(--sans);color:var(--muted)}
.ap-sub{font-weight:600;margin-top:1rem}
.ap-lv{font:600 .64rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:.3rem}
.ap-depth{border-left:1px solid var(--rule-2);padding-left:.8rem;margin:.8rem 0}
.ap-list{list-style:none;padding:0;font:400 .86rem/1.45 var(--sans);display:grid;gap:.35rem}
.ap-none,.ap-empty{color:var(--muted)}
.ap-f{margin:.6rem 0;overflow-x:auto}
.atlas-lists{display:none}
.al{margin-top:1rem}.al-k{font:600 .7rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.al-row{display:flex;flex-wrap:wrap;gap:.35rem}
.an{font:600 .8rem/1.1 var(--sans);background:transparent;border:1px solid var(--rule-2);border-radius:6px;padding:.55rem .7rem;cursor:pointer;min-height:40px;color:var(--ink)}
.an.an-s{border-style:dashed;border-radius:999px}
.an[aria-pressed="true"]{background:var(--gilt);color:var(--ground);border-color:var(--gilt)}.an.rel{border-color:var(--gilt);border-style:solid}.an.dim{opacity:.5}
.atlas-full .atlas-stage{max-width:52rem}
.atlas-page-wrap{max-width:var(--wide);margin:0 auto;padding:1rem clamp(1rem,4vw,3rem) 0}
@media (max-width:980px){.atlas-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.atlas-nodes{display:none}.atlas-lists{display:block}.atlas .atlas-stage{max-width:22rem;margin:0 auto}.atlas[data-mode="s"] .al-s{order:-1}.atlas-lists{display:flex;flex-direction:column}}
/* the matrix */
.mx-wrap{position:relative;overflow-x:auto;border:1px solid var(--rule);border-radius:10px;margin-top:.8rem}
.mx{border-collapse:collapse;font:400 .74rem/1.35 var(--sans);min-width:62rem}
.mx caption{text-align:left;padding:.8rem;color:var(--muted);font-size:.78rem;caption-side:top}
.mx th,.mx td{border:1px solid var(--rule);padding:.45rem .5rem;vertical-align:top}
.mx thead th{position:sticky;top:0;background:var(--ground-2);font-weight:600;text-align:left}
.mx tbody th{text-align:left;font-weight:600;background:var(--ground-2);position:sticky;left:0}
.mx a{color:var(--ink);text-decoration:none;display:block}.mx th a{color:var(--gilt)}
.mx-src{display:block;color:var(--faint);font-size:.62rem;margin-top:.2rem}
.mx-x{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--vellum) 6px 7px)}
.mx-empty,.mx-none{color:var(--faint);text-align:center}

/* ============ DEMONSTRATIONS ============ */
.q{margin:.6rem 0;padding:.9rem 1.1rem;border-left:2px solid var(--gilt);background:var(--vellum);border-radius:0 8px 8px 0}
.q p{font-size:1.18rem;line-height:1.45;margin:0 0 .5rem}
.q footer{font:400 .74rem/1.45 var(--sans);color:var(--muted)}
.q-small p{font-size:1.02rem}
.q-stage p{font-size:clamp(1.5rem,1rem + 2vw,2.4rem);line-height:1.3}
/* D morph */
.morph-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1rem}
.ms{font:400 1.05rem/1 var(--math);background:none;border:1px solid var(--rule-2);color:var(--ink);border-radius:6px;padding:.5rem .8rem;cursor:pointer;min-height:40px}
.ms[aria-pressed="true"]{background:var(--gilt);color:var(--ground);border-color:var(--gilt)}
.delta-b{margin-left:auto}
.morph-books{list-style:none;padding:0;display:flex;gap:.7rem;flex-wrap:wrap;margin:0 0 1rem}
.mb{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:5.2rem;font:400 .68rem/1.25 var(--sans);text-align:center;color:var(--muted);opacity:.45;transition:opacity .4s,transform .4s var(--ease)}
.mb img{width:4.2rem;height:auto;border-radius:3px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.mb.lit{opacity:1;color:var(--ink);transform:translateY(-3px)}
.m-cap{font-style:italic;font-size:1.1rem}
.recs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:.9rem}
.rec{border:1px solid var(--rule-2);border-radius:10px;padding:.9rem 1rem;background:var(--card);transition:border-color .4s}
.rec.changed{border-color:var(--gilt);box-shadow:0 0 0 1px var(--gilt) inset}
.rec-infer{border-style:dashed}.rec-method{border:2px solid var(--gilt)}
.r-k{font:600 .68rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.r-new{color:var(--gilt);letter-spacing:.04em;text-transform:none;font-weight:600}
.r-t{font-size:1.1rem}.r-was{font:400 .8rem/1.4 var(--sans);color:var(--muted);text-decoration:line-through}
.r-on{font:400 .76rem/1.5 var(--sans);color:var(--muted)}
.chip-p{display:inline-block;border:1px solid var(--rule);border-radius:3px;padding:.05rem .35rem;margin:.1rem 0}
.op{font:italic 400 1.2em/1 var(--math);color:var(--gilt);border:1px solid var(--gilt);border-radius:4px;padding:0 .3rem;margin-right:.2rem}
.rel-line{color:var(--gilt)}
.morph-delta{margin-top:1rem;border:1px solid var(--gilt);border-radius:10px;padding:.9rem 1.1rem;font:400 .9rem/1.5 var(--sans)}
.dl-k{font:400 1.1rem/1 var(--math);color:var(--gilt)}
.dsign{display:inline-block;width:1.2em;font-weight:600;color:var(--gilt)}
.dvoc{font-style:italic;color:var(--muted);font-family:var(--serif)}
.morph-strata{margin-top:1rem;display:grid;gap:.35rem}
.str-k{font:600 .68rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sheet{font:400 .82rem/1.45 var(--sans);color:var(--muted);border:1px solid var(--rule);border-radius:6px;padding:.45rem .7rem;background:var(--vellum);margin-left:.8rem}
.sheet+.sheet{margin-left:1.6rem}
.sheet-at{font-family:var(--math);color:var(--gilt)}
/* E microscope */
.mic-claim{display:flex;flex-direction:column;gap:.35rem;text-align:left;width:100%;border:1px solid var(--gilt);border-radius:12px;background:var(--card);padding:1.1rem 1.3rem;cursor:pointer}
.mic-k{font:600 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt)}
.mic-t{font-size:1.35rem;line-height:1.3}
.mic-go{font:600 .8rem/1 var(--sans);color:var(--gilt);text-decoration:underline;text-underline-offset:.2em}
.mic-lensnote{font:400 .78rem/1.4 var(--sans);color:var(--muted);margin:.8rem 0 0}
.mic-layers{list-style:none;padding:0 0 0 1.4rem;margin:1rem 0 0;position:relative;display:grid;gap:.6rem}
.mic-layers::before{content:"";position:absolute;left:.45rem;top:.5rem;bottom:.5rem;width:2px;background:var(--gilt);opacity:.7}
.js .demo[data-demo="microscope"]:not(.open) .mic-layers,.js .demo[data-demo="microscope"]:not(.open) .mic-trace{display:none}
.ml{position:relative;border:1px solid var(--rule-2);border-radius:10px;padding:.8rem 1rem;background:var(--card)}
.ml::before{content:"";position:absolute;left:-1.2rem;top:1.1rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--ground);border:2px solid var(--gilt)}
.ml-k{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline;margin-bottom:.3rem}
.ml-name{font:600 .75rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.ml-by{font:400 .76rem/1.4 var(--sans);color:var(--muted)}
.ml-source{border-style:solid;border-color:var(--gilt)}.ml-reader{border-style:solid}.ml-inference{border-style:dashed}.ml-interpretation{border-style:dotted;border-width:2px}.ml-gap{border-style:dashed;background:transparent}
.mic-trace{margin-top:1rem;font:400 .85rem/1.5 var(--sans);border-top:1px solid var(--rule);padding-top:.8rem}
.mic-trace-k{font-weight:600;color:var(--gilt)}
/* F theatre */
.theatre{display:grid;gap:1rem}
.th-passage{position:relative;padding:clamp(1.2rem,4vw,3rem);border-radius:14px;border:1px solid var(--rule);transition:box-shadow .6s var(--ease),border-color .6s}
.th-passage[data-ring="1"]{box-shadow:0 0 0 10px var(--vellum),0 0 0 11px var(--rule-2)}
.th-passage[data-ring="2"]{box-shadow:0 0 0 10px var(--vellum),0 0 0 11px var(--rule-2),0 0 0 26px var(--vellum),0 0 0 27px var(--rule-2)}
.th-passage[data-ring="3"]{box-shadow:0 0 0 10px var(--vellum),0 0 0 11px var(--rule-2),0 0 0 26px var(--vellum),0 0 0 27px var(--rule-2),0 0 0 42px var(--vellum),0 0 0 43px var(--gilt)}
.th-passage[data-ring="4"]{border-color:var(--gilt)}
.th-passage .q{border:0;background:none;margin:0}
.th-ctl{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:2.6rem}
.th-b{font:600 .78rem/1 var(--sans);background:none;border:1px solid var(--rule-2);border-radius:999px;padding:.6rem .9rem;cursor:pointer;color:var(--ink);min-height:40px}
.th-b[aria-pressed="true"]{background:var(--gilt);color:var(--ground);border-color:var(--gilt)}
.th-stations{list-style:none;padding:0;margin:0}
.js .demo.live .th-st{display:none}.js .demo.live .th-st.on{display:block}
.th-st{border-left:2px solid var(--gilt);padding:.2rem 0 .2rem 1rem;margin-bottom:1rem}
.th-st h4{font:600 .75rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt)}
.th-reading{font-style:italic}
.th-line{font-size:1.5rem;font-style:italic;text-align:center;margin:1rem 0 0}
/* G forge */
.forge-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,14rem) minmax(0,1fr);gap:1.2rem;align-items:center}
.card-disc{border:1px solid var(--rule-2);border-radius:12px;padding:1rem 1.1rem;background:var(--card);cursor:grab;transition:opacity .5s,filter .5s}
.card-disc.spent{opacity:.45;filter:grayscale(1)}
.cd-k,.cm-k,.fv-k{font:600 .7rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt)}
.forge-anvil{display:grid;justify-items:center;text-align:center;gap:.5rem;padding:1.2rem .8rem;border:1px dashed var(--gilt);border-radius:50% 50% 12px 12px/30% 30% 12px 12px;min-height:11rem;align-content:center}
.forge-anvil.ready{background:var(--vellum);border-style:solid}
.forge-anvil.done{opacity:.6}
.fv-hint{font:400 .75rem/1.3 var(--sans);color:var(--muted);margin:0}
.card-method{border:2px solid var(--gilt);border-radius:4px 16px 4px 16px;padding:1.1rem 1.2rem;background:var(--card-2);box-shadow:0 12px 36px rgba(0,0,0,.35)}
.card-method h4{font-size:1.5rem;font-style:italic;font-weight:400}
.cm-src{font:400 .76rem/1.4 var(--sans);color:var(--muted)}
.forge-apply{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.9rem}
.fa{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1rem;align-items:start;border-top:1px solid var(--rule);padding-top:.9rem}
.fa img{width:4.2rem;height:auto;border-radius:3px}
.fa-out{font-size:1.08rem}.fa-k{font:italic 400 .95rem/1 var(--math);color:var(--gilt);margin-right:.4rem}
@media (max-width:820px){.forge-row{grid-template-columns:minmax(0,1fr)}.forge-anvil{min-height:auto;border-radius:12px}}
/* H balance */
.balance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:1.2rem;align-items:start;position:relative}
.bal-k{font:600 .72rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;gap:.5rem;align-items:baseline}
.bal-k span{font:400 1.2rem/1 var(--math);color:var(--gilt);letter-spacing:0;text-transform:none}
.bal-side ul{list-style:none;padding:0;display:grid;gap:.7rem}
.ev{border:1px solid var(--rule-2);border-radius:10px;padding:.7rem .8rem;background:var(--card);transition:opacity .3s}
.ev-plus{border-left:3px solid var(--support)}.ev-minus{border-right:3px solid var(--resist)}
.ev label{font:400 .85rem/1.4 var(--sans);display:flex;gap:.45rem;align-items:flex-start;cursor:pointer}
.ev input{width:1.1rem;height:1.1rem;margin-top:.1rem;accent-color:var(--gilt)}
.ev.off{opacity:.45}.ev.off .q{display:none}
.ev-g{color:var(--gilt)}
.bal-centre{position:sticky;top:6rem;text-align:center;border:1px solid var(--gilt);border-radius:14px;padding:1.3rem 1.1rem;background:var(--card-2)}
.bal-ck{font:600 .68rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt)}
.bal-interp{font-size:1.6rem;line-height:1.25}
.bal-interp .was{display:block;font:400 .78rem/1.4 var(--sans);color:var(--muted);margin-top:.5rem}
.bal-state{font:400 .9rem/1.5 var(--sans)}
.bal-centre::before,.bal-centre::after{content:"";position:absolute;top:50%;height:2px;width:1.2rem;background:var(--gilt)}
.bal-centre::before{right:100%}.bal-centre::after{left:100%}
.bal-rev{display:grid;gap:.45rem;font:400 .82rem/1.4 var(--sans);text-align:left;margin-top:.8rem}
.bayes{font:400 .85rem/1.5 var(--sans)}.bayes input[type=range]{accent-color:var(--gilt);vertical-align:middle;max-width:9rem}
.lr{list-style:none;padding:0;display:grid;gap:.3rem}.post{border-top:1px solid var(--rule);padding-top:.5rem}
@media (max-width:900px){.balance{grid-template-columns:minmax(0,1fr)}.bal-centre{position:static;order:-1}.bal-centre::before,.bal-centre::after{display:none}}
/* I biography */
.bio-card{display:flex;gap:1.2rem;align-items:center}
.bio-cover{width:6rem;height:auto;border-radius:3px;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.bio-meta{font:600 .85rem/1.4 var(--sans)}
.bio-steps{list-style:none;padding:0 0 0 1.4rem;margin:1.2rem 0;position:relative;display:grid;gap:.5rem}
.bio-steps::before{content:"";position:absolute;left:.45rem;top:.4rem;bottom:.4rem;width:1px;background:var(--gilt)}
.js .demo.live:not(.open) .bio-s:not(:first-child){display:none}
.js .demo.live .bio-s:not(.shown):not(:first-child){display:none}
.bio-s{position:relative;border:1px solid var(--rule);border-radius:8px;padding:.6rem .9rem;background:var(--card)}
.bio-s::before{content:"";position:absolute;left:-1.2rem;top:.95rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--gilt)}
.bio-k{font:600 .7rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gilt);display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.bio-invented{border-style:dashed}
.bio-contrast{font:400 .9rem/1.5 var(--sans);color:var(--muted)}
/* J constellation */
.const-sky{border-radius:14px;background:radial-gradient(ellipse at 50% 30%,var(--ground-3),var(--ground) 75%);border:1px solid var(--rule)}
.const-svg{display:block;width:100%;height:auto}
.c-t{font:400 italic 20px/1 var(--serif);fill:var(--ink)}.c-y{font:400 14px/1 var(--sans);fill:var(--muted)}
.c-edge{fill:none;stroke:var(--gilt);stroke-width:1.4;opacity:.8}.c-el{font:400 italic 15px/1 var(--serif);fill:var(--muted);paint-order:stroke;stroke:var(--ground);stroke-width:4px}
.c-num circle{fill:var(--ground);stroke:var(--gilt);stroke-width:1.4}.c-num text{font:600 14px/1 var(--sans);fill:var(--gilt)}
.cl-edges{font:400 .9rem/1.5 var(--sans)}
.c-arc{fill:none;stroke:var(--gilt);stroke-width:1.2;stroke-dasharray:3 5}.c-dot{fill:var(--gilt)}
.const[data-layer="facts"] .c-edges{display:none}
.const-ctl{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0}
.cl-b{font:600 .76rem/1 var(--sans);background:none;border:1px solid var(--rule-2);border-radius:4px;padding:.6rem .8rem;cursor:pointer;color:var(--ink);min-height:40px}
.cl-b[aria-pressed="true"]{background:var(--gilt);color:var(--ground);border-color:var(--gilt)}
.const-layer{border-left:2px solid var(--gilt);padding-left:1rem;font-size:1.02rem}
.cl-k{font:600 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gilt)}
.cl-d{font:400 .85rem/1.5 var(--sans);color:var(--muted)}
.cl-pattern{font-size:1.3rem}.cl-interp{font-size:1.3rem;font-style:italic}
.const-person{margin-top:1rem;font:600 .88rem/1.5 var(--sans);display:flex;gap:.6rem;align-items:center}
.humility-g{font:400 1.4rem/1 var(--math);color:var(--gilt)}
/* K authority */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1.3rem 2rem}
.auth-loop{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;counter-reset:s}
.auth-loop li{position:relative;border:1px solid var(--rule-2);border-radius:999px;padding:.6rem 1rem .6rem 2.6rem;font:600 .85rem/1.3 var(--sans);color:var(--muted);transition:all .4s var(--ease)}
.auth-loop li::before{counter-increment:s;content:counter(s);position:absolute;left:.55rem;top:50%;transform:translateY(-50%);width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule-2);font-size:.7rem}
.auth-loop li.on{border-color:var(--gilt);color:var(--ink);background:var(--vellum)}
.auth-loop li[data-step="1"].on{box-shadow:0 0 0 3px var(--mark)}
.auth-gate{grid-column:1;font:400 .85rem/1.5 var(--sans)}
.gate-k{font:400 1rem/1.3 var(--math);color:var(--gilt);margin:.3rem 0 0}
.sw{display:flex;gap:.5rem;align-items:flex-start;cursor:pointer}.sw input{width:1.1rem;height:1.1rem;accent-color:var(--gilt);margin-top:.15rem}
.auth-card{grid-column:2;grid-row:1/span 2;border:1px dashed var(--gilt);border-radius:14px;padding:1.2rem 1.3rem;background:var(--card)}
.ac-who{font:600 .72rem/1.4 var(--sans);letter-spacing:.06em;color:var(--gilt)}
.ac-t{font-size:1.3rem;line-height:1.35}
.ac-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.ac-edit{display:grid;gap:.4rem;margin-top:.9rem;font:400 .85rem/1.4 var(--sans)}
.ac-edit textarea{font:400 1rem/1.5 var(--serif);color:var(--ink);background:var(--ground-2);border:1px solid var(--rule-2);border-radius:8px;padding:.6rem;width:100%}
.ac-wait{font:400 .86rem/1.5 var(--sans);color:var(--muted);margin-top:.9rem}
.again{margin-top:.4rem}
.auth-ledger{grid-column:1/-1;font:400 .85rem/1.5 var(--sans);border-top:1px solid var(--rule);padding-top:.8rem;display:grid;gap:.4rem}
.auth-ledger:empty{display:none}
@media (max-width:860px){.auth{grid-template-columns:minmax(0,1fr)}.auth-card{grid-column:1;grid-row:auto}}

/* ============ MANIFESTO ============ */
.mani{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.st-list{list-style:none;padding:0;display:grid;gap:.8rem;font:400 .92rem/1.5 var(--sans)}
.st-list li{display:grid;gap:.3rem;justify-items:start}
.st-note{font-size:.82rem;color:var(--muted);border-left:2px solid var(--rule-2);padding-left:.6rem}
.truth{font:400 .95rem/1.55 var(--sans);display:grid;gap:.45rem}
.fd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr));gap:1.1rem}
.fd{border:1px solid var(--rule);border-radius:12px;padding:1.2rem 1.3rem;background:var(--card)}
.fd header{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:baseline}
.fd-n{font:400 1rem/1 var(--math);color:var(--gilt);margin:0}.fd h3{margin:0}
.lineage{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1rem 2rem;font:400 .86rem/1.5 var(--sans)}
.lineage ul{padding-left:1em;color:var(--muted)}
.limits{font:400 .95rem/1.55 var(--sans);display:grid;gap:.4rem;max-width:52rem}
.gram{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.gram-l{list-style:none;padding:0;font:400 .9rem/1.5 var(--sans);display:grid;gap:.4rem}.gram-l b{color:var(--gilt);margin-right:.3rem}
.seq{font:400 .88rem/1.6 var(--sans)}
.pub{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:.6rem 2rem}
.pub li{border-top:1px solid var(--rule);padding-top:.5rem}.pub b{display:block;font:600 .68rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gilt)}
@media (max-width:860px){.mani,.gram{grid-template-columns:minmax(0,1fr)}}

/* ============ RETURN TO THE BOOK & CLOSING ============ */
.sec-return{text-align:center}
.sh-quiet{margin:0 auto 1rem;max-width:none}
.ret{display:grid;justify-items:center;gap:1rem}
.ret-stage{width:min(100%,56rem)}
.ret-svg{display:block;width:100%;height:auto}
.r-ghost{stroke:var(--rule-2);stroke-width:1.2;transition:opacity 1.2s}
.r-b,.r-rel,.r-relt{opacity:0;transition:opacity 1.1s var(--ease)}
.r-rel{fill:none;stroke:var(--gilt);stroke-width:2}
[data-return][data-step="2"] .r-ghost,[data-return][data-step="3"] .r-ghost,[data-return][data-step="4"] .r-ghost,[data-return][data-final="1"] .r-ghost{opacity:0}
[data-return][data-step="3"] .r-b,[data-return][data-step="4"] .r-b,[data-return][data-step="4"] .r-rel,[data-return][data-step="4"] .r-relt{opacity:1}
.ret-lines{list-style:none;padding:0;margin:0;display:grid;gap:.2rem;font-size:1.35rem;font-style:italic}
.ret-lines li{transition:color .8s}.js .ret-lines li.on{color:var(--gilt)}
.ret-rel{max-width:36rem;text-align:left}
.ret-rel-k{font-size:1.5rem;font-style:italic;text-align:center}
.fx-ret math{font-size:1.8em;color:var(--gilt)}
.fx-ret{text-align:center}.fx-ret .fx-math math{text-align:center;margin:0 auto}
.closing{text-align:center;padding-bottom:3rem}
.close-line{font:600 .78rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lockup{display:flex;flex-direction:column;gap:.3rem;align-items:center;margin:1.6rem 0}
.lockup>span:first-child{font-size:clamp(2.8rem,1.6rem + 5vw,5.6rem);letter-spacing:-.02em;line-height:1}
.lk-desc{font-style:italic;font-weight:400;font-size:clamp(1.3rem,1rem + 1.4vw,2.2rem);color:var(--gilt)}
.lk-promise{font:400 1.2rem/1.4 var(--serif);color:var(--ink)}
.close-final{font-style:italic;color:var(--muted)}

/* ============ FIELDS PAGE ============ */
.fields-layout{max-width:92rem;margin:0 auto;padding:0 clamp(1rem,3vw,2.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2.5rem;align-items:start}
.fields-book{align-self:stretch}
.fields-book .book-stage.sticky{position:sticky;top:5.2rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"fig" "sw" "desc" "alt"}
.fields-book .book-desc{max-height:32vh;overflow:auto}
.fs{padding:3rem 0;border-top:1px solid var(--rule);scroll-margin-top:5rem}
.fs-n{font:600 .74rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gilt)}
.fs-q{font-size:1.5rem;font-style:italic}
.fs-k{font:400 .84rem/1.5 var(--sans);color:var(--muted)}.fs-k span,.fs-links span{font-weight:600;color:var(--ink);margin-right:.35rem}
.fs-formal{display:grid;gap:.2rem;border:1px solid var(--rule);border-radius:12px;padding:.6rem 1.1rem;background:var(--card);margin:1rem 0}
.fv-k{margin:.8rem 0 0}
.fs-sees{font-size:1.2rem}
.fs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;font:400 .88rem/1.5 var(--sans)}
.fs-grid h3{font:600 .74rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gilt)}
.fs-cells,.lin{padding-left:1em}.src{color:var(--faint);font-size:.8em}
.fs-links{font:400 .84rem/1.6 var(--sans)}
.fs-public{font-size:1.45rem;font-style:italic;border-left:2px solid var(--gilt);padding-left:1rem;margin-top:1.4rem}
.fs-book{display:none;margin:1.2rem 0}.fs-book figcaption{font:400 .82rem/1.45 var(--sans);color:var(--muted)}.fs-book ol{padding-left:1.4em;margin:.4rem 0 0}
.fs-book.narrow .ov-label,.fs-book.narrow .ov-card>rect,.fs-book.narrow .ov-tag>rect,.fs-book.narrow .ov-lt,.fs-book.narrow .ov-q,.fs-book.narrow .ov-formula{display:none}.fs-book.narrow .ov-badge circle{r:22px}.fs-book.narrow .ov-badge text{font-size:22px}
@media (max-width:1000px){.fs-book{display:block}.fields-layout{grid-template-columns:minmax(0,1fr)}.fields-book .book-stage.sticky{position:relative;top:0}.fs-grid{grid-template-columns:minmax(0,1fr)}}

/* ============ DOES PAGE ============ */
.does{list-style:none;max-width:var(--wide);margin:1rem auto 0;padding:0 clamp(1rem,4vw,3rem);display:grid;gap:0}
.dz{display:grid;grid-template-columns:5rem minmax(0,1fr);grid-template-areas:"n h" "n t" "n s";gap:.2rem 1.5rem;padding:1.6rem 0;border-top:1px solid var(--rule)}
.dz-n{grid-area:n;font:400 2.4rem/1 var(--math);color:var(--gilt)}
.dz h2{grid-area:h;font-size:1.8rem;margin:0}.dz-t{grid-area:t;font-size:1.2rem;max-width:44rem}.dz-st{grid-area:s;font:400 .82rem/1.5 var(--sans);display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.try{font:400 1rem/1.7 var(--sans)}
@media (max-width:560px){.dz{grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "h" "t" "s"}}

/* large text: the site's own large-text reading and 200% zoom keep every line inside the page */
@media (max-width:480px){.sec{padding-left:1rem;padding-right:1rem}.demo{padding:1rem}.dh-line{font-size:1.25rem}.q-stage p{font-size:1.35rem}}

/* Quiet and reduced motion: every change becomes a step */
html.quiet *,html.quiet *::before,html.quiet *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.xbar,.prefs,.lens-switch,.depth-tabs,.atlas-stage{display:none}.js .dp{display:block}body::before{display:none}}

/* ===== x2: Folium X reveal, the seven expressions with legends, the V legends, the product grammar, validated forge, microscope
   questions, evidence kinds, origin/decision badges. Status and kind stay in words and shape, never colour alone. ===== */
.noscript-only{font-size:.85rem}.js .noscript-only{display:none}
.reveal{margin:0 0 1.6rem;display:grid;gap:.6rem;max-width:48rem}
.rv-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));gap:.5rem}
.rv-step{border-top:1px solid var(--rule-2);padding:.5rem .1rem 0}
.rv-w{display:block;font:600 .72rem/1.2 var(--sans);letter-spacing:.18em;color:var(--gilt)}
.rv-l{display:block;font-size:1.12rem;line-height:1.3}
.js .reveal.live .rv-step:not(.on){opacity:.18}.js .rv-playing>h1{opacity:.15}
.rv-again{font-size:.8rem;justify-self:start}
.xw{width:min(100%,20rem);height:auto}
.xw-b{fill:none;stroke:var(--rule-2);stroke-width:1.5}
.xw-t{fill:none;stroke:var(--gilt);stroke-width:1.6;stroke-linecap:round}.xw-t2{stroke-dasharray:1 0}
.xw-c{fill:var(--gilt)}
.hero-cat{font-size:clamp(1.1rem,1rem + .45vw,1.35rem);line-height:1.35;font-style:italic;margin:.6rem 0 .2rem;max-width:40rem}
.hero-built{font:600 .74rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem}
.hero-note{font:400 .85rem/1.5 var(--sans);color:var(--muted);max-width:44rem}
.ex-legend{font:400 .84rem/1.5 var(--sans);color:var(--muted);border-left:2px solid var(--rule-2);padding-left:.7rem}
.vleg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .8rem;font:400 .84rem/1.45 var(--sans);margin:.6rem 0}
.vleg dt{font-weight:600}.vleg dd{margin:0;color:var(--muted)}
.vl-box,.gen-box,.fgram{border:1px solid var(--rule);border-radius:12px;padding:1rem 1.2rem;background:var(--card);margin:1.2rem 0}
.gen-box{border-color:var(--gilt)}.gen-line{font-size:1.35rem;font-style:italic;margin:.2rem 0}
.v-val{font-family:var(--sans)}
.fgram h3{font:600 .9rem/1.3 var(--sans);letter-spacing:.14em;color:var(--gilt)}
.fg-jobs,.fg-dist{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem;font:400 .9rem/1.4 var(--sans)}
.fg-dist li{border:1px dashed var(--rule-2);border-radius:999px;padding:.2rem .6rem}
.fg-q{display:grid;gap:.3rem;padding-left:1.2em}.fg-w{font:600 .72rem/1 var(--sans);letter-spacing:.14em;color:var(--gilt);margin-right:.4rem}
.fg-t,.fg-xl,.fg-phil{font-size:1.2rem;font-style:italic}.fg-x{max-width:48rem}
.du-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.8rem}
.du2{border-top:1px solid var(--rule-2);padding-top:.5rem}.du2 p{margin:.2rem 0}
.lc-name,.fs-desc,.ap-desc{font:400 .88rem/1.45 var(--sans);color:var(--muted)}.lc-name b,.ap-desc b{color:var(--ink)}
.pc-note{font:400 .72rem/1.3 var(--sans);color:var(--faint);margin:.4rem 0 0}
.lv-d{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}
.st-legend{white-space:normal}
.src-st{display:inline-block;font:600 .64rem/1.3 var(--sans);letter-spacing:.04em;border:1px dashed var(--rule-2);border-radius:3px;padding:.05rem .35rem;color:var(--muted)}
.src-st.ok{border-style:solid;color:var(--ink)}
.ap-srcs,.lin{font:400 .8rem/1.45 var(--sans)}.ap-limit{font:400 .85rem/1.45 var(--sans);color:var(--muted)}.ap-st{display:flex;flex-wrap:wrap;gap:.3rem}
.mx-m{color:var(--gilt)}.mx-s{background:var(--vellum)}
.xfoot-endorse,.xfoot-formerly{font:400 .8rem/1.5 var(--sans);color:var(--muted)}
/* microscope: two questions, a derivation trace, gaps as records, evidence apart */
.mic-body{margin-top:1rem}
.mic-modes{display:flex;flex-wrap:wrap;gap:.5rem}
.mt-k{font:600 .7rem/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gilt);margin:.9rem 0 .4rem}
.mic-why,.mic-where{list-style:none;padding:0 0 0 1.4rem;margin:0;position:relative;display:grid;gap:.6rem}
.mic-why::before,.mic-where::before{content:"";position:absolute;left:.45rem;top:.5rem;bottom:.5rem;width:2px;background:var(--gilt);opacity:.7}
.mic-why>li,.mic-where>li{border:1px solid var(--rule-2);border-radius:10px;padding:.6rem .8rem;background:var(--card)}
.mw-k{font:600 .78rem/1.3 var(--sans);margin:0}.mw-t{font-weight:400;color:var(--muted)}
.mw-rel,.mw-by,.mw-path{font:400 .8rem/1.45 var(--sans);color:var(--muted);margin:.2rem 0}
.mw-claim{border-color:var(--gilt)!important}
.mic-gaps ul{padding-left:1.2em;font:400 .88rem/1.5 var(--sans)}.mw-gap{list-style:"∅  "}
.mic-ev{border-top:1px solid var(--rule);margin-top:1rem}
.mic-ev-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}
.mic-ev-cols ul{list-style:none;padding:0;display:grid;gap:.6rem}.ev-h{font:600 .8rem/1.3 var(--sans)}
/* forge: discovery · validation · instrument; the history underneath */
.forge-rule{margin:0}.forge-rule .fx{margin:0}
.forge-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));align-items:start}
.card-disc{cursor:default}.cd-k{font:600 .7rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gilt)}
.cd-ver{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}.cd-rev{font:400 .82rem/1.4 var(--sans);color:var(--muted)}
.cd-meta,.cm-lineage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .7rem;font:400 .8rem/1.45 var(--sans);margin:.5rem 0}
.cd-meta dt,.cm-lineage dt{font-weight:600}.cd-meta dd,.cm-lineage dd{margin:0;color:var(--muted)}
.forge-val{border:1px dashed var(--gilt);border-radius:12px;padding:1rem 1.1rem;background:var(--vellum)}
.fv-k{font:600 .78rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gilt);margin:0}
.fv-lead{font:400 .85rem/1.45 var(--sans)}
.forge-val fieldset{border:0;padding:0;margin:0;display:grid;gap:.5rem}.forge-val legend{font:600 .8rem/1.3 var(--sans);margin-bottom:.4rem}
.fv-c{display:flex;gap:.5rem;align-items:flex-start;font:400 .85rem/1.45 var(--sans);cursor:pointer}.fv-c input{width:1.1rem;height:1.1rem;margin-top:.15rem;accent-color:var(--gilt);flex:none}
.fv-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}.fv-msg{font:400 .85rem/1.4 var(--sans);min-height:1.2em}
.fa-nofit{border-style:dashed!important;opacity:.9}.fa-k{font:600 .72rem/1.3 var(--sans);color:var(--gilt);display:block}
.forge-hist{font:400 .82rem/1.5 var(--sans);padding-left:1.4em;display:grid;gap:.2rem}.h-t{font-weight:600;color:var(--gilt);margin-right:.35rem}
/* balance: kinds in words */
.ev-kind{font:600 .66rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule-2);border-radius:3px;padding:0 .3rem;flex:none}
.ev-undercut .ev-kind{border-style:dotted}.ev-rebut .ev-kind{border-style:dashed}
.bal-compare{border-top:1px dashed var(--rule-2);margin-top:1rem}.find-note{font-size:.82rem}
/* biography: origins, and the collapse */
.bio-o{font-weight:400;color:var(--muted);font-size:.9em}
.demo.collapsed .bio-lostable{opacity:.45;text-decoration:line-through;text-decoration-thickness:1px}
.bio-lost{font:400 .88rem/1.5 var(--sans);border-left:2px solid var(--gilt);padding-left:.7rem}
.cl-gone{font-style:italic}
/* origin κ and decision δ */
.kd{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.25rem}
.kd-o,.kd-d,.kd-new{font:400 .78rem/1.3 var(--sans);border:1px solid var(--rule-2);border-radius:4px;padding:.1rem .45rem}
.kd-d{border-style:dashed}.kd-k{font-weight:600;margin-right:.3rem}
/* x2 at 200% text on a phone: long unbroken tokens (“evidence/relation/correction?”) must not widen grid items */
.duality>h3{grid-column:1/-1}
main :is(li,dd,dt,label,figcaption),.q p,.q footer{overflow-wrap:anywhere}
.fg-q,.limits,.truth,.bal-side ul,.mic-why,.mic-where,.forge-hist,.forge-apply{grid-template-columns:minmax(0,1fr)}
.ev,.ev label,.fv-c{min-width:0}
.bio-card{flex-wrap:wrap}.bio-card>div{min-width:0;flex:1 1 12rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.bio-card .chip,.bio-card .btn{white-space:normal;text-align:left;line-height:1.25}
.dh-k{flex-wrap:wrap;overflow-wrap:anywhere;min-width:0}
/* x2: the hero's veil follows the theme, so text over the art keeps its contrast in Light as well as Dark (axe cannot measure text over images) */
:root{--veil-0:rgba(10,12,11,.2);--veil-1:rgba(10,12,11,.55)}
:root[data-appearance="light"]{--veil-0:rgba(244,239,228,.72);--veil-1:rgba(244,239,228,.88)}
@media (prefers-color-scheme:light){:root:not([data-appearance="dark"]){--veil-0:rgba(244,239,228,.72);--veil-1:rgba(244,239,228,.88)}:root:not([data-appearance="dark"]) .hero-art img{opacity:.3}}
.hero-art::after{background:linear-gradient(180deg,var(--veil-0) 0%,var(--veil-1) 45%,var(--ground) 100%)}

/* x2: an attributed canon line adapted to a later owner decision says so, in words */
.adapted{display:inline-block;font:400 .74rem/1.35 var(--sans);color:var(--muted);border:1px dashed var(--rule-2);border-radius:3px;padding:0 .35rem;margin-left:.2rem}
.fg-why{font:400 .92rem/1.55 var(--sans);max-width:52rem}

/* x3: each status chip says which claim it labels */
.sts-l{gap:.35rem .7rem}.st-pair{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap;max-width:100%}.st-for{font:500 .74rem/1.3 var(--sans);color:var(--muted)}.st-local{margin:0 0 .55rem}.src-st.rec{color:var(--muted)}.src-note{font-size:.85em;color:var(--muted)}.cm-untested{color:var(--ink)}

/* x3: the sticky book stage never outgrows the viewport; status chips wrap at 320 px with large text; no depth control without scripts */
@media (min-width:1001px){.fields-book .book-stage.sticky{max-height:calc(100vh - 5.7rem);max-height:calc(100dvh - 5.7rem);overflow-y:auto;overscroll-behavior:contain}}
.st{overflow-wrap:anywhere;min-width:0}.st-pair{flex-wrap:wrap;min-width:0}.sts{min-width:0;max-width:100%}
html:not(.js) .depth-g{display:none}
/* x3, continued: long headings, biography steps and buttons wrap at 320 px with large text */
.pc h3,.fd h3,.ex h3,.pc header,.fd header{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;min-width:0}.bio-s,.bio-k,.bio-o{overflow-wrap:anywhere;min-width:0}.btn{white-space:normal;max-width:100%}
.bal-side,.bal-side ul,.ev,.ev label,.ev .q,.ev .q p{min-width:0;overflow-wrap:anywhere}
.ev label{flex-wrap:wrap}.ev-kind{min-width:0;max-width:100%;overflow-wrap:anywhere}.balance>*{min-width:0}

/* x5: keyboard focus in the atlas matrix is never hidden. The row header stops sticking when the matrix is
   narrow for its text; at narrow widths, focus scrolling keeps an end margin, so a focused link is not left clipped at the matrix's edge. */
.mx-wrap{container-type:inline-size}
@container (max-width:40rem){.mx tbody th{position:static}}
@media (max-width:760px){.mx-wrap{scroll-padding-inline:0 2rem}}
/* x5: crowded ring labels (see atlas.js fit) */
.atlas-crowded .atlas-nodes{visibility:hidden}
.atlas-crowded .atlas-lists{display:flex;flex-direction:column}
.atlas-crowded[data-mode="s"] .al-s{order:-1}

/* x6: in chip-list mode (large text, or a column too narrow for the ring's labels) the ring becomes a compact key beside the panel. The
   thirteen fields and ten structures stay as unlabelled marks that follow the selection (larger and filled when chosen, ringed when related,
   faded otherwise), and the paths still show the relationships; the chip lists below carry every name. The full ring returns when it fits,
   and the narrow-screen layout shows the same marks. */
.atlas-dots{display:none}
.atlas-dots circle{pointer-events:none;fill:var(--ink);stroke:var(--ink);stroke-width:0}
.atlas-dots .dot-s{fill:var(--ground);stroke-width:5}
.atlas-dots .rel{stroke:var(--gilt);stroke-width:9}
.atlas-dots .on{fill:var(--gilt);stroke:var(--gilt)}
.atlas-dots .dim{opacity:.42}
.atlas-crowded .atlas-dots{display:inline}
.atlas-crowded .edge-l{display:none}
.atlas-crowded .atlas-body{grid-template-columns:auto minmax(0,1fr)}
.atlas-crowded .atlas-stage{width:clamp(200px,28vw,320px)}
@media (max-width:980px){.atlas-crowded .atlas-body{grid-template-columns:minmax(0,1fr)}.atlas-crowded .atlas-stage{margin:0 auto}}
@media (max-width:760px){.atlas-dots{display:inline}}

/* x7: on /atlas/ the panel's heading is an h2 (the page's h1 is its only preceding heading); it keeps the size of the h3 it replaces */
.atlas-panel h2{font-size:1.35rem}
/* x7: the sticky book stage on /fields/ sticks below the sticky top bar at any text size (at large text the bar is taller than 5.2rem), and
   keeps its height to the space left below it; at 100% text both values are as before */
@media (min-width:1001px){.fields-book .book-stage.sticky{top:max(5.2rem,calc(var(--xbar-h,0px) + .5rem));max-height:calc(100vh - max(5.7rem,calc(var(--xbar-h,0px) + 1rem)));max-height:calc(100dvh - max(5.7rem,calc(var(--xbar-h,0px) + 1rem)))}}

/* ============ x8 (00-C64-04): chapters, the hero with Folium X's own artwork, optional depth ============ */
:root{--st-halo:#0a0c0b;--st-bg:rgba(10,12,11,.84);--st-face:#1c221f;--st-face-c:#151a17;--st-rule:rgba(235,228,212,.10);--st-edge:#6e5a33;--st-ink:#ebe4d4;--st-gfill:#1c221f;--st-fibre:#c6a667;--st-corr:#f0d9a8;--st-thread:#8cc4ef;--st-now:rgba(140,196,239,.10);--st-now-edge:#8cc4ef;--st-rej:#a3a69f;--st-notch:#b4ac9b;--st-refuse-edge:#b4ac9b}
:root[data-appearance="light"]{--st-halo:#f4efe4;--st-bg:rgba(244,239,228,.92);--st-face:#fbf8f1;--st-face-c:#efe8d9;--st-rule:rgba(28,26,22,.08);--st-edge:#b8a47a;--st-ink:#1c1a16;--st-gfill:#fbf8f1;--st-fibre:#7a531a;--st-corr:#4a300a;--st-thread:#2d5c86;--st-now:rgba(45,92,134,.08);--st-now-edge:#2d5c86;--st-rej:#62655f;--st-notch:#5f594d;--st-refuse-edge:#5f594d}
@media (prefers-color-scheme:light){:root:not([data-appearance="dark"]){--st-halo:#f4efe4;--st-bg:rgba(244,239,228,.92);--st-face:#fbf8f1;--st-face-c:#efe8d9;--st-rule:rgba(28,26,22,.08);--st-edge:#b8a47a;--st-ink:#1c1a16;--st-gfill:#fbf8f1;--st-fibre:#7a531a;--st-corr:#4a300a;--st-thread:#2d5c86;--st-now:rgba(45,92,134,.08);--st-now-edge:#2d5c86;--st-rej:#62655f;--st-notch:#5f594d;--st-refuse-edge:#5f594d}}
.hero-x8{min-height:auto;align-items:start}
.hero-x8 .hero-in{padding-top:clamp(4.25rem,8vh,6rem);padding-bottom:clamp(1.5rem,4vh,2.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head art" "body art";column-gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
.hero-head{grid-area:head}.hero-body{grid-area:body}.strata{grid-area:art;margin:0;min-width:0}
.hero-x8 .h-app{font-size:clamp(2.6rem,1.4rem + 4.6vw,5.4rem)}
.hero-x8 .rv-steps{grid-template-columns:repeat(2,minmax(0,1fr));max-width:34rem}
.hero-x8 .hero-promise{font:italic 400 clamp(1.25rem,1rem + .9vw,1.7rem)/1.3 var(--serif);color:var(--ink);margin:.1rem 0 .9rem;max-width:34rem}
.hero-x8 .hero-cat,.hero-x8 .hero-long{max-width:40rem}
.strata-stage{position:relative;width:min(calc(74vh * var(--st-ar)),34rem);background:var(--st-bg);border:1px solid var(--rule);border-radius:14px}
.strata-svg{display:block;width:100%;height:100%}
.strata figcaption{max-width:26rem}
@media (min-width:1200px){.strata{display:grid;grid-template-columns:auto 15rem;column-gap:1.25rem;align-items:start}.strata-ctl{grid-column:1}.strata figcaption{grid-column:2;grid-row:1 / span 2}}
@media (max-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "art" "body"}.strata-stage{width:100%}.strata figcaption{max-width:none}}
.strata-cap{font:400 .8125rem/1.45 var(--sans);color:var(--muted);margin:.6rem 0 .4rem}
.strata-legend{font:400 .875rem/1.4 var(--sans);margin:.25rem 0 .5rem;padding-left:1.6rem}.strata-legend li{margin:.25rem 0}
.strata-legend li::marker{font-weight:700;color:var(--gilt)}
.strata-ctl{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;margin:.6rem 0 0}.strata-ctl[hidden]{display:none}
.strata-line{margin:0;font:400 .875rem/1.4 var(--sans);color:var(--muted);flex:1 1 14rem}
.st-mk circle{fill:var(--gilt);stroke:var(--st-halo);stroke-width:2}.st-mk text{fill:var(--ground);font-family:var(--sans);font-weight:700}
.st-face{fill:var(--st-face);fill-opacity:.95;stroke:var(--st-edge);stroke-width:.8}
.st-ctx .st-face{fill:var(--st-face-c)}
.st-refused .st-face{fill:none;stroke:var(--st-refuse-edge);stroke-width:1}
.st-read .st-face{fill:none;stroke:var(--muted);stroke-width:1.1}
.st-rule{fill:none;stroke:var(--st-rule);stroke-width:.6}
.st-edge{fill:var(--st-edge)}
.st-g{fill:var(--st-gfill);stroke:var(--st-ink);stroke-width:1.3}
.st-gl{fill:none;stroke:var(--st-ink);stroke-width:1.15}
.st-dash{stroke-dasharray:3.5 2.5}
.st-f{fill:none;stroke:var(--st-ink);stroke-width:1.3}
.st-struct{stroke:var(--muted)}
.st-fdash{stroke-dasharray:5 3.5}
.st-app{stroke-width:1.6}
.st-rej{stroke:var(--st-rej)}
.st-x{fill:none;stroke:var(--st-rej);stroke-width:1.8}
.st-tick{fill:none;stroke:var(--st-ink);stroke-width:1.5}
.st-sup{fill:var(--st-gfill);stroke:var(--muted);stroke-width:1}
.st-refuse{fill:none;stroke:var(--st-ink);stroke-width:1.6}
.st-ring{fill:none;stroke:var(--st-thread);stroke-width:1.8}
.st-t,.st-tend{fill:none;stroke:var(--st-fibre);stroke-width:.9}
.st-tcorr{stroke:var(--st-corr);stroke-width:1.4}
.st-th{fill:none;stroke:var(--st-thread);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.st-thb{fill:none;stroke:var(--st-thread);stroke-width:1.4;stroke-linejoin:round}
.st-bead{fill:var(--st-thread)}
.st-now-face{fill:var(--st-now);stroke:var(--st-now-edge);stroke-width:1}
.st-notch{fill:none;stroke:var(--st-notch);stroke-width:1.2}
.st-arrow{fill:var(--st-ink)}
.chapters{max-width:var(--wide);margin:0 auto;padding:.75rem clamp(1rem,4vw,3rem) .9rem;border-bottom:1px solid var(--rule)}
.chapters ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem .55rem}
.chapters a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.35rem .85rem;border:1px solid var(--rule-2);border-radius:999px;color:var(--ink);text-decoration:none;font:500 .875rem/1.2 var(--sans)}
.chapters a:hover{border-color:var(--gilt)}.chapters .ch-n{font-weight:700;color:var(--gilt)}
.ch-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.5rem;margin:1.5rem 0}
.lensstrip{margin:1.5rem 0}.lchips{list-style:none;padding:0;margin:.75rem 0;display:flex;flex-wrap:wrap;gap:.45rem}
.lchip{display:inline-flex;align-items:center;min-height:44px;padding:.35rem .85rem;border:1px solid var(--rule-2);border-radius:999px;color:var(--ink);text-decoration:none;font:500 .875rem/1.2 var(--sans)}
.lchip:hover{border-color:var(--gilt)}
.journey{margin:1.75rem 0}.journey ol.rail{list-style:none;padding:0;margin:.5rem 0 1rem;display:grid;gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.journey ol.rail li{display:flex;gap:.6rem;align-items:baseline}
.dd{margin:.8rem 0;border:1px solid var(--rule-2);border-radius:14px;background:var(--vellum)}
.dd>summary{cursor:pointer;list-style:none;padding:.85rem 1.1rem;display:flex;flex-wrap:wrap;gap:.15rem .6rem;align-items:baseline;min-height:44px}
.dd>summary::-webkit-details-marker{display:none}
.dd>summary::before{content:"+";font:600 1.05rem/1 var(--sans);color:var(--gilt);width:1rem}.dd[open]>summary::before{content:"−"}
.dd-t{font:600 1.1rem/1.3 var(--serif);color:var(--ink)}.dd-s{color:var(--muted);font:400 .9rem/1.4 var(--sans)}.dd-l{font:700 .8rem/1 var(--sans);color:var(--gilt)}
.dd>:not(summary){margin-left:1.1rem;margin-right:1.1rem}.dd>:last-child{margin-bottom:1.1rem}
.dd .demo{margin-top:0}
@media (max-width:600px){.dd>:not(summary){margin-left:.45rem;margin-right:.45rem}.dd .ls,.dd .chip,.dd .btn,.dd button{white-space:normal;overflow-wrap:anywhere;max-width:100%;height:auto}.dd .r-k{overflow-wrap:anywhere}}
.nextsteps{margin:1.75rem 0}.next-l{margin:.5rem 0;padding-left:1.2rem}.next-l li{margin:.35rem 0}
.sec-next .closing{padding:2rem 0 1rem;border:0}
/* x8 state k: the reveal is a 2×2 grid at every width (at 1440 the auto-fit grid wrapped 3 + 1, leaving HIGHER ORDER alone on its row).
   x8 state j: a compact first screen on phones. With the reveal restored above the name (canon order, state h), the artwork had moved
   below the 320x640 first screen (02's F4); the shared site header is unchanged. */
@media (max-width:600px){.hero-x8 .hero-in{padding-top:1rem}.hero-x8 .hero-head>.sh-n{margin-bottom:.45rem}.hero-x8 .reveal{margin-bottom:.6rem;gap:.3rem}.hero-x8 .rv-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem .75rem}.hero-x8 .rv-step{padding-top:.3rem}.hero-x8 .rv-l{font-size:.95rem;line-height:1.25}.hero-x8 h1{margin-bottom:.5rem}.hero-x8 .h-app{font-size:2.3rem}.hero-x8 .h-desc{font-size:1.2rem}.hero-x8 .hero-promise{font-size:1.1rem;margin-bottom:.7rem}}

/* ===== x9 (00-C68-04): Folium X's product artwork in Chapter 1 (the picture, its numbered markers and the keyed formulas); the history
   picture in Chapter 4's disclosure. The picture is a dark plate in both themes; the markers are drawn in the picture's own units. */
.art{grid-area:art;margin:0;min-width:0}
.art-stage{position:relative;width:min(74vh,36rem);aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#05070f;box-shadow:0 0 0 1px var(--rule)}
.art-stage picture,.art-img{display:block;width:100%;height:100%}
.art-mk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.art-m circle{fill:#fff3d6;stroke:#c9962e;stroke-width:6}
.art-m text{fill:#1a1c2e;font-family:var(--sans);font-weight:700}   /* x9 f: ivory markers (02's personal piece uses dark badges) */
.art figcaption{max-width:36rem}
.art-cap{font:400 .8125rem/1.45 var(--sans);color:var(--muted);margin:.7rem 0 .6rem}
.art-key{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ak{display:grid;grid-template-columns:1.7rem minmax(0,1fr);gap:.6rem;align-items:start}
.ak-n{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:#fff3d6;color:#1a1c2e;border:2px solid #c9962e;font:700 .85rem/1 var(--sans)}
.ak-b{min-width:0}
.ak-t{margin:.15rem 0 .1rem;font:600 .92rem/1.3 var(--sans)}
.ak .fx-math{padding:.1rem 0}
.ak-e{margin:.15rem 0 0;font-size:.95rem;line-height:1.45}
.ak-k{margin:.2rem 0 0;font:400 .78rem/1.35 var(--sans);color:var(--muted)}
.art-more{margin:.8rem 0 .3rem;font-size:.9rem}
@media (min-width:1200px){.art-key{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.4rem;row-gap:1rem}.art-key #ak-3,.art-key #ak-4{grid-column:1/-1}}
.hero-x9 .hero-grid{grid-template-rows:auto 1fr}   /* x9 c: the tall picture no longer stretches the name's row */   /* x9 b: the key sits under the picture (beside it, it squeezed the name's column to 270 px) */
@media (max-width:860px){.art-stage{width:100%}.art figcaption{max-width:none}}
.dd-hist .strata{margin:1rem 0 .5rem}
@media (max-width:420px){.ak .fx-math math{font-size:1.08rem}}
@media (max-width:360px){.ak .fx-math math{font-size:1rem}}   /* x9 g: key 4's arc line fits a 320-px phone (check_x9 f1: 314 > 251 px in Chromium) */   /* x9 d: formula 4's longest line fits a 320-px phone (Chromium check dev1: 274 > 251 px) */
/* ---------------------------------------------------------------- x10 (00-X8F-04) */
/* X8-1: the chapter navigation sits in the hero after the name and promise; on desktop it heads the left column (the picture spans a flexible
   row, so it never stretches the name's row), on phones it is one row that scrolls sideways, between the promise and the picture */
.hero-x10 .hero-grid{grid-template-areas:"head art" "chap art" "body art";grid-template-rows:auto auto 1fr}
.hero-grid>.chapters{grid-area:chap;max-width:none;margin:0 0 1.5rem;padding:0;border:0}
@media (max-width:860px){.hero-x10 .hero-grid{grid-template-areas:"head" "chap" "art" "body";grid-template-rows:none}
  .hero-grid>.chapters{margin:0 0 1rem;min-width:0}
  .hero-grid>.chapters ol{flex-wrap:nowrap;overflow-x:auto;padding:0 0 .3rem;scrollbar-width:thin}
  .hero-grid>.chapters li{flex:0 0 auto}}
/* X8-1: the narrow header: Quiet and Dark share the name's row; the depth control and the site navigation each keep one row */
.prefs-c{display:flex;gap:.5rem;align-items:center}
@media screen and (max-width:560px){.prefs{display:contents}.xbar .brand{margin-right:auto}.prefs-c{order:1}.xbar .depth-g{order:2}}
/* X8-5: without scripts (no focus guard) both strips wrap instead of scrolling sideways */
@media (max-width:1100px){html:not(.js) .xnav{flex-wrap:wrap;overflow-x:visible}}
@media (max-width:860px){html:not(.js) .hero-grid>.chapters ol{flex-wrap:wrap;overflow-x:visible}}
/* X8-2: on narrow screens the picture is at least 18rem wide, so it and its numbered markers grow with the text; wider than the column,
   its frame pans (a diagram, which reflow exempts) */
.art-pan{max-width:100%;border-radius:14px}
.art-pan:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}
@media (max-width:860px){.art-pan{overflow-x:auto;overscroll-behavior-x:contain}.art-stage{width:max(100%,18rem)}}
/* X8-1 (large-text arrival; inherited from x8): the reveal keeps two columns at 1x and takes one once the text is large (words no longer break) */
.hero-x8 .rv-steps{grid-template-columns:repeat(auto-fit,minmax(max(8.5rem,calc(50% - .75rem)),1fr))}
/* X8-1 (large text on desktop; inherited from x9): the picture's column is the picture's own width, not its caption's */
@media (min-width:861px){.hero-x10 .hero-grid{grid-template-columns:minmax(0,1fr) min(74vh,36rem)}}
/* X8-1/X8-5: a chapter link never outgrows its strip or column; its text wraps inside the pill */
.hero-grid>.chapters li{max-width:calc(100% - .5rem)}.hero-grid>.chapters a{max-width:100%}
/* X8-5: room below the phone site navigation for the overlay scrollbar WebKit draws while the strip scrolls */
@media (max-width:1100px){.xnav{padding-bottom:.75rem}}
/* X8-4: the chip a pre-x8 lens anchor (/#field-<lens>) lands on, without scripts */
#fields li:target .lchip{border-color:var(--gilt);box-shadow:0 0 0 2px var(--gilt)}
#fields li[id^="field-"]{scroll-margin-top:5rem}
/* x13 trial: responsive no-script reserve for observed landing shift and header clearance. */
html:not(.js) #fields li[id^="field-"]{scroll-margin-top:11rem}
@media(max-width:1100px){html:not(.js) #fields li[id^="field-"]{scroll-margin-top:16rem}}
@media(max-width:760px){html:not(.js) #fields li[id^="field-"]{scroll-margin-top:11rem}}
/* X8-5: a focused link in either strip keeps room above and below it (its focus ring stays on screen) */
.xnav a,.hero-grid>.chapters a{scroll-margin-block:.5rem}
/* x14: one enlarged figure; its numbered overlay pans with the image, while the key remains outside the scroll frame. */
.artwork-page .artwork-view{max-width:90rem;margin-inline:auto}
.artwork-page .art-pan{overflow-x:auto;overscroll-behavior-x:contain}
.artwork-page .art-stage{width:max(100%,48rem);max-width:2400px}
.artwork-page .art figcaption{max-width:none}

/* x14r1: keep the no-script artwork return caption below the viewport/header edge. */
html:not(.js) #artCapT{scroll-margin-top:5rem}
@media(min-width:761px) and (max-width:1100px){html:not(.js) #artCapT{scroll-margin-top:8rem}}

/* x15: neutral artwork annotation leaders, clipped in marker data around protected features. */
.art-leader path{fill:none;stroke-linecap:butt;stroke-linejoin:round}
.art-leader-under{stroke:#121522;stroke-width:6}
.art-leader-line{stroke:#f5ecd8;stroke-width:3}