@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=EB+Garamond:ital,wght@0,400..700;1,400..700&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ══════════════════════════════════════════════════════════════
   TOKENS — Decision 1 resolved: the Atlas thesis, taken all the
   way. Two hue families, deliberately: inquiry is slate blue
   (structure, route, question), access is terracotta (availability,
   the readable ring). The axes are conceptually independent, so
   they are perceptually independent. Canon v2's "no blue, one hue"
   rule is retired; the neutral ramp is re-derived from the Atlas's
   warmer paper (#f2ebdd), not inherited from the old reading ground.

   Corners are square, always — this is load-bearing, not a default.
   Depth is flat colour contrast and a thin border, never elevation:
   no shadows, no blur, no transparency effects anywhere on this page.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:        #f2ebdd;
  --bg-raised: #f8f3e8;
  --fg:        #24231f;
  --fg-2:      #181712;
  --muted:     #666158;
  --faint:     #ece4d4;
  --line:      #b9af9e;
  --line-2:    #c9c1b3;
  --inquiry:   #365c70;
  --state:     #a55335;
  --radius:    0px;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg:        #1b1915;
  --bg-raised: #242019;
  --fg:        #ece4d4;
  --fg-2:      #f7f1e5;
  --muted:     #a89f8f;
  --faint:     #262218;
  --line:      #3a352b;
  --line-2:    #302b21;
  --inquiry:   #7fa4b8;
  --state:     #dd8f6c;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{font-size:19px}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:'EB Garamond',Georgia,serif;line-height:1.7;-webkit-font-smoothing:antialiased;transition:background .4s ease,color .4s ease;font-feature-settings:"onum","liga"}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
::selection{background:var(--inquiry);color:var(--bg)}
::-webkit-scrollbar{width:3px} ::-webkit-scrollbar-thumb{background:var(--line)}

.mono{font-family:'DM Mono',monospace}
/* Fraunces — the brand/gravity face, and (per the palette-lab
   decision) also the territory- and work-title face wherever a
   proper name appears in a list, not just in the largest display
   moments. Never running text, never chrome. */
.brand{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto}
.name{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto}
.eyebrow{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:lowercase;color:var(--muted);opacity:.85;margin:0 0 1.4rem;display:flex;align-items:center;gap:10px}

/* chrome */
header.top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line-2)}
.topbar{display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap;padding:1.1rem 1.5rem}
.wordmark{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1rem;letter-spacing:.01em;color:var(--fg-2)}
nav.primary{display:flex;gap:clamp(14px,2.2vw,26px);font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:lowercase}
nav.primary a{color:var(--muted);border-bottom:1px solid transparent;padding-bottom:2px}
nav.primary a.active,nav.primary a:hover{color:var(--fg);border-bottom-color:var(--fg)}
.topbar .sp{flex:1}
.themebtn{width:34px;height:34px;display:grid;place-items:center;color:var(--muted)}
.themebtn:hover{color:var(--fg)}

main{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.narrow{max-width:760px}

/* home */
.hero{padding:clamp(70px,15vh,150px) 0 clamp(48px,9vh,96px);border-bottom:1px solid var(--line)}
.hero h1{font-family:'Fraunces',Georgia,serif;font-weight:600;font-style:italic;font-optical-sizing:auto;font-size:clamp(38px,6.4vw,92px);line-height:1.04;letter-spacing:-.015em;margin:0;max-width:17ch;color:var(--inquiry)}
.hero .lede-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,5vw,72px);margin-top:clamp(40px,7vh,80px);align-items:start}
.hero p.lede{font-size:clamp(19px,1.7vw,23px);line-height:1.55;font-style:italic;max-width:44ch;margin:0}
.cta{font-family:'DM Mono',monospace;font-size:.76rem;letter-spacing:.1em;text-transform:lowercase;font-weight:500;color:var(--bg);background:var(--state);padding:.9rem 1.4rem;display:inline-block;border-radius:var(--radius)}
.cta.outline{background:transparent;color:var(--fg);border:1px solid var(--line)}
.cta:hover{filter:brightness(.92)}

h2.section-h{font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:lowercase;font-weight:500;color:var(--muted)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}

ul.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
ul.rows li{border-bottom:1px solid var(--line-2)}
.row-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;width:100%;padding:1.15rem 2px}
.row-btn:hover .row-title{text-decoration:underline;text-underline-offset:4px}
.row-title{font-size:clamp(18px,1.6vw,22px);font-style:italic;line-height:1.3;transition:color .15s}
.row-meta{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.08em;color:var(--muted);white-space:nowrap}

/* facets */
.facets{display:flex;gap:20px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--fg);border-bottom:1px solid var(--line);margin-bottom:6px;font-family:'DM Mono',monospace;font-size:.7rem;letter-spacing:.06em}
.facet-group{display:flex;gap:8px;align-items:baseline}
.facet-group .lbl{color:var(--muted)}
.chip{border:1px solid var(--line);padding:5px 10px;color:var(--muted);border-radius:var(--radius)}
.chip.on{border-color:var(--fg);color:var(--fg);background:var(--faint)}
.count-badge{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.card{background:var(--bg);padding:24px;display:flex;flex-direction:column;gap:9px;min-height:160px}
.card:hover{background:var(--faint)}
.tag{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.06em;font-weight:500;color:var(--state)}
.tag.mute{color:var(--muted)}

.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;vertical-align:middle}
.status-active .status-dot{background:var(--fg)}
.status-latent .status-dot{background:transparent;border:1px solid var(--fg);opacity:.7}
.status-dormant .status-dot{background:var(--muted);opacity:.6}

footer.site{border-top:1px solid var(--line);padding:clamp(36px,6vh,64px) clamp(20px,4vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:24px 40px}
footer.site p{font-size:.95rem;color:var(--muted);margin:0 0 8px;max-width:32ch}
footer.site a,footer.site button{display:block;font-size:.95rem;margin-bottom:7px}

/* ── depth axis — orthogonal to access-state. Width itself is the
   register signal: skin widest, marrow narrowest, EXCEPT marrow
   itself, which is re-weighted below: quiet is not the same as
   diminished, and it is the corpus's best prose. ── */
.depth-bar{position:sticky;top:57px;z-index:40;background:var(--bg);border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:.75rem 0;margin:0 0 clamp(20px,3vh,32px);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.depth-toggle{display:flex;border:1px solid var(--line)}
.depth-btn{padding:.4rem .85rem;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.08em;color:var(--muted);border-right:1px solid var(--line);display:flex;align-items:center;gap:.4rem}
.depth-btn:last-child{border-right:0}
.depth-btn.active{color:var(--fg);background:var(--faint)}
.depth-desc{font-family:'DM Mono',monospace;font-size:.66rem;color:var(--muted);font-style:italic}
.skin-view{max-width:640px;margin:0 auto;padding:3rem 0 2.5rem}
.skin-view p{font-size:1.1rem;line-height:1.8;margin:0 0 1.2rem}
.flesh-view{max-width:500px;margin:0 auto;padding:3.5rem 0 3rem;text-align:center}
.flesh-view p{font-style:italic;font-size:1.3rem;line-height:1.8;margin:0}
.bones-view{max-width:500px;margin:0 auto;padding:2.2rem 0 3rem}
.bones-view ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bones-item{display:grid;grid-template-columns:2.2rem 1fr;gap:.6rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.bones-num{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--muted);padding-top:.25rem;display:flex;align-items:flex-start;gap:.3rem}
.keystone{width:5px;height:5px;border-radius:50%;background:var(--state);display:inline-block;margin-top:3px}
.bones-claim{font-size:1rem;line-height:1.55}
/* D3: marrow re-weighted — full readable width, full-strength ink,
   a small eyebrow so it reads as a chosen register, not a fallback. */
.marrow-view{max-width:520px;margin:0 auto;padding:4rem 0 3.5rem;text-align:center}
.marrow-view .eyebrow{justify-content:center}
.marrow-view p{font-size:1.15rem;line-height:1.85;color:var(--fg);font-style:italic;margin:0 0 1rem}
@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.view-enter{animation:view-in .4s ease both}
@media (prefers-reduced-motion: reduce){.view-enter{animation:none}}

/* external work — a fully published book with its own reading
   environment elsewhere in the corpus. No depth toggle: it wasn't
   authored in skin/flesh/bones/marrow, and shouldn't pretend to be. */
.external-work{padding:2.5rem 0 1rem;border-top:1px solid var(--line)}
.external-work p{font-size:1.05rem;line-height:1.8;max-width:60ch;margin:0 0 1.8rem}
.external-note{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--muted);margin-top:.9rem;max-width:44ch}

/* corpus atlas — territories as landmasses, works as settlements,
   inquiries as routes between them. Position is illustrative;
   status and connection carry the real signal. */
.atlas-wrap{width:100%;position:relative}
.atlas-frame{
  width:100%;border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 80%, var(--fg) 20%);
  overflow:hidden;
}
.atlas-svg{display:block;width:100%;height:auto}
.landmass{fill:var(--bg-raised);stroke:var(--fg);stroke-width:1.4;transition:opacity .4s ease}
.landmass.status-latent{fill:none;stroke-dasharray:2 4;opacity:.85}
.landmass.status-dormant{fill:none;stroke-dasharray:1 5;stroke-width:1;opacity:.6}
.landmass-hit{fill:transparent;cursor:pointer}
.territory-label{font-family:'Fraunces',Georgia,serif;font-style:italic;paint-order:stroke;stroke:var(--bg-raised);stroke-width:4px;stroke-linejoin:round;transition:opacity .3s ease}
.territory-kind{font-family:'DM Mono',monospace;letter-spacing:.14em;transition:opacity .3s ease}
.atlas-route{fill:none;stroke:var(--inquiry);stroke-linecap:round;transition:opacity .3s ease,stroke-width .2s ease}
.settlement{cursor:pointer}
.settlement-mark{fill:var(--bg-raised);stroke:var(--fg);stroke-width:1.6;transition:transform .15s ease}
.settlement:hover .settlement-mark,.settlement:focus .settlement-mark{transform:scale(1.25)}
.settlement-ring{fill:none;stroke:var(--state);stroke-width:2.2}
.atlas-legend{display:flex;flex-wrap:wrap;gap:10px 22px;padding:14px clamp(20px,4vw,56px);border-bottom:1px solid var(--line);font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.06em;color:var(--muted)}
.atlas-legend span{display:inline-flex;align-items:center;gap:8px}
.leg-land{width:16px;height:11px;border:1.4px solid var(--fg);background:var(--bg-raised)}
.leg-route{width:22px;border-top:2px solid var(--inquiry)}
.leg-settlement{width:9px;height:9px;border:1.6px solid var(--fg);background:var(--bg-raised);transform:rotate(45deg)}
.leg-ring{width:13px;height:13px;border:2.2px solid var(--state);border-radius:50%}
.atlas-tip{min-height:5.5rem;padding:20px clamp(20px,4vw,56px) 28px;border-bottom:1px solid var(--line)}
.atlas-tip .kind{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:lowercase;color:var(--muted);margin:0 0 6px}
.atlas-tip h3{margin:0 0 6px;font-size:clamp(20px,2.6vw,28px);font-weight:400}
.atlas-tip p{margin:0;color:var(--muted);max-width:60ch;line-height:1.55}
.atlas-tip .q{color:var(--inquiry);font-size:1.05rem;line-height:1.5;margin-top:8px}
.atlas-note{font-size:1rem;color:var(--muted);max-width:66ch;margin:18px auto 0;text-align:center}

/* work page */
.work-hero h1{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:600;font-optical-sizing:auto;font-size:clamp(40px,6.4vw,96px);line-height:1.02;letter-spacing:-.02em;margin:0 0 16px;color:var(--fg-2)}
.access-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

@media (max-width:700px){
  .atlas-legend{gap:8px 16px}
  .territory-label,.territory-kind{display:none}
}

[hidden]{display:none!important}

/* whole-world pages */
.back-link{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--muted);margin-bottom:clamp(30px,6vh,64px)}
.question-page,.programme-page,.listing-page{max-width:900px;margin:0 auto;padding:clamp(46px,8vh,88px) clamp(20px,4vw,56px) clamp(80px,12vh,132px)}
.departure{margin:0 0 clamp(34px,6vh,60px)}
.departure p{font-family:'Fraunces',Georgia,serif;font-size:clamp(21px,2.5vw,29px);font-style:italic;line-height:1.35;max-width:37ch;margin:0}
.vessel{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(28px,5vh,48px) 0;margin-bottom:30px}
.vessel h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(31px,5vw,52px);font-style:italic;font-weight:500;line-height:1.14;letter-spacing:-.018em;color:var(--inquiry);max-width:27ch;margin:0}
.question-coordinates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;padding-bottom:28px;margin-bottom:clamp(42px,7vh,70px);border-bottom:1px solid var(--line-2)}
.question-coordinates div{display:grid;gap:5px}.question-coordinates span,.landfall-card>span{font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:lowercase;color:var(--muted)}
.question-coordinates b{font-weight:400;font-size:1.02rem}
.local-chart{background:#d8cdb8;border:1px solid var(--line);margin-bottom:clamp(44px,7vh,72px);overflow:hidden}
:root[data-theme="dark"] .local-chart{background:#171713}
.local-chart svg{display:block;width:100%;height:auto}.chart-coast,.chart-island{fill:var(--bg-raised);stroke:#827763;stroke-width:1.5}.chart-contour{fill:none;stroke:#827763;stroke-width:.7;opacity:.6}.chart-route{fill:none;stroke:var(--inquiry);stroke-width:2.6;stroke-linecap:round}.chart-route-open{fill:none;stroke:var(--inquiry);stroke-width:2;stroke-dasharray:6 10;opacity:.5}.chart-departure{fill:var(--bg-raised);stroke:var(--fg);stroke-width:2}.chart-landfall{fill:var(--bg-raised);stroke:var(--inquiry);stroke-width:2.5}.chart-access{fill:none;stroke:var(--state);stroke-width:2.5}.chart-place{font-family:'Fraunces',serif;font-size:16px;font-style:italic;fill:var(--fg)}.chart-kind,.chart-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;fill:var(--muted)}
.reached-block{border-top:1px solid var(--fg);padding-top:30px;margin-bottom:50px}.landfall-card{display:grid;gap:5px;text-align:left;width:100%;border-bottom:1px solid var(--line);padding:0 0 24px}.landfall-card strong{font-family:'Fraunces',serif;font-size:clamp(26px,3.5vw,38px);font-style:italic;font-weight:500}.landfall-card em{font-family:'DM Mono',monospace;font-size:.75rem;color:var(--muted);font-style:normal}.landfall-card:hover strong{text-decoration:underline;text-underline-offset:5px}
.three-movements{border-top:1px solid var(--line);display:grid}.three-movements button{display:flex;justify-content:space-between;padding:18px 2px;border-bottom:1px solid var(--line);font-size:1.05rem}.three-movements button:hover span{transform:translateX(4px)}.three-movements span{transition:transform .18s}
.listing-page>h1,.programme-page>h1{font-family:'Fraunces',serif;font-size:clamp(34px,5.5vw,66px);font-style:italic;font-weight:500;line-height:1.08;margin:0 0 24px;max-width:20ch}.page-intro,.programme-proposition{font-size:clamp(18px,2vw,23px);line-height:1.55;max-width:56ch;color:var(--muted);margin:0 0 clamp(42px,7vh,76px)}
.programme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);background:var(--line);gap:1px}.programme-card{background:var(--bg);padding:clamp(24px,4vw,42px);display:flex;flex-direction:column;min-height:330px}.programme-card>span,.programme-card>em{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--muted);font-style:normal}.programme-card strong{font-family:'Fraunces',serif;font-size:clamp(26px,3vw,38px);font-style:italic;font-weight:500;margin:34px 0 14px}.programme-card p{font-size:1rem;line-height:1.55;margin:0 0 30px}.programme-card em{margin-top:auto}.programme-card:hover strong{text-decoration:underline;text-underline-offset:5px}
.reading-room{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px}.reading-room>div{background:var(--bg);padding:clamp(22px,3vw,34px)}.reading-room button{display:grid;grid-template-columns:1fr auto;gap:14px;width:100%;padding:16px 0;border-bottom:1px solid var(--line);line-height:1.3}.reading-room button>strong{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:500}.reading-room button>span{font-family:'DM Mono',monospace;font-size:.66rem}.reading-room button:not(:has(strong)){display:block;color:var(--inquiry);font-size:1rem}.access{color:var(--state)}.muted-access{color:var(--muted)}
.honest-empty,.route-specimen{border:1px dashed var(--line);padding:22px 24px;color:var(--muted);font-family:'DM Mono',monospace;font-size:.76rem;line-height:1.65}.route-specimen{display:grid;gap:14px}.route-specimen>span{font-size:.68rem;letter-spacing:.14em}.route-specimen>strong{font-family:'Fraunces',serif;font-size:1.7rem;font-style:italic;font-weight:500;color:var(--fg)}.route-specimen p{font-family:'EB Garamond',serif;font-size:1rem;margin:0;max-width:50ch}.route-specimen button{margin-top:12px;color:var(--fg)}
.quiet-work{padding-top:clamp(48px,8vh,90px)!important;padding-bottom:110px!important}.work-subtitle{font-size:1.15rem;color:var(--muted);margin:0 0 50px}.atlas-return{margin-top:36px;font-family:'DM Mono',monospace;font-size:.75rem}
.reader-shell{min-height:100vh;background:var(--bg)}.reader-chrome{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:12px clamp(16px,3vw,36px);font-family:'DM Mono',monospace;font-size:.68rem;color:var(--muted)}.reader-chrome button:first-child{text-align:left;font-family:'Fraunces',serif;font-style:italic;color:var(--fg)}.reader-chrome button:last-child{text-align:right}.reader-page{max-width:760px;margin:auto;padding:clamp(56px,10vh,110px) clamp(22px,5vw,70px)}.reader-page h1{font-family:'Fraunces',serif;font-size:clamp(34px,5vw,58px);font-weight:500;line-height:1.08;margin:0 0 24px}.chapter-standfirst{font-size:1.2rem;font-style:italic;color:var(--muted);margin:0 0 70px}.chapter-text{max-width:34em;margin:auto}.chapter-text p{font-size:1.08rem;line-height:1.85;margin:0 0 1.5em}.reader-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:80px;padding-top:20px;font-family:'DM Mono',monospace;font-size:.72rem}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media (max-width:720px){.question-coordinates,.programme-grid,.reading-room{grid-template-columns:1fr}.programme-card{min-height:260px}.reader-chrome{grid-template-columns:1fr auto}.reader-chrome span{display:none}.local-chart svg{width:135%;max-width:none}.question-page,.programme-page,.listing-page{padding-left:20px;padding-right:20px}}