/* Structure only. Every value comes from a token set by theme.js. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ============ hero ============ */
.hero{padding:clamp(30px,7vh,64px) 0 clamp(26px,5vh,44px)}
.wordmark{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:clamp(20px,4vh,36px)}
.banner{color:var(--grey);opacity:.85;margin:0 0 clamp(14px,3vh,28px)}
.banner svg{width:100%;height:auto;max-height:150px;display:block}

.primary{font-family:var(--display);font-weight:var(--pwt);font-size:var(--psize);
  letter-spacing:var(--track);line-height:1.02;margin:0;color:var(--ink);
  transition:color .8s ease;text-wrap:balance}
.primary .paren{font-weight:inherit;font-size:inherit;color:inherit}
.stack.revealed .primary{color:var(--grey)}
.others{list-style:none;margin:12px 0 0;padding:0}
.others li{opacity:0;transform:translateY(6px);transition:opacity .55s ease,transform .55s ease}
.stack.revealed .others li{opacity:1;transform:none}
.label{font-family:var(--display);font-weight:var(--owt);font-size:var(--osize);
  letter-spacing:var(--track);line-height:1.14;color:var(--grey);background:none;border:0;
  padding:2px 0;margin:0;text-align:left;display:inline-block;cursor:default;
  transition:opacity .25s ease}
.label.dim{opacity:.34}
.label:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (pointer:coarse){.label{cursor:pointer}}
.annotation{font-size:16px;line-height:1.55;color:var(--muted);margin:18px 0 0;min-height:1.55em;max-width:56ch}

/* ============ 1. FEATURED — musings ============ */
.feature{background:var(--ink);color:var(--paper);padding:clamp(32px,6vh,54px) 0 clamp(28px,5vh,46px);
  margin:clamp(20px,4vh,36px) 0 0}
.feat-head h2{font-family:var(--display);font-weight:var(--pwt);
  font-size:clamp(30px,5.4vw,52px);letter-spacing:var(--track);line-height:1.04;
  margin:0;color:var(--paper)}
.feat-teaser{font-size:17px;line-height:1.55;color:var(--paper);opacity:.72;margin:12px 0 0;max-width:58ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.chip{font-family:var(--display);font-size:12.5px;letter-spacing:.02em;color:var(--paper);
  border:1px solid rgba(255,255,255,.28);border-radius:2px;padding:6px 11px}
.feat-go{display:inline-block;margin:26px 0 0;font-family:var(--display);font-size:15px;
  color:var(--paper);text-decoration:none;border-bottom:1px solid var(--paper);padding-bottom:2px}
.feat-go:hover{opacity:.75}

/* ============ 2 / 3. sections, weighted ============ */
.section{padding:clamp(34px,6vh,56px) 0 0}
.sec-title{font-family:var(--display);font-weight:500;margin:0 0 16px;color:var(--muted);
  letter-spacing:.13em;text-transform:uppercase}
.level-2 .sec-title{font-size:12.5px}
.level-3 .sec-title{font-size:11px;opacity:.85}
.level-3 .prose p{font-size:16px}

.prose p{font-size:17px;line-height:1.62;margin:0 0 12px;max-width:62ch;color:var(--ink)}
.prose p:last-child{margin-bottom:0}
.lnk{display:inline-block;margin-top:12px;font-family:var(--display);font-size:13.5px;
  color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.lnk+.lnk{margin-left:18px}

.plist{display:flex;flex-direction:column;gap:24px}
.proj{border-top:1px solid var(--line);padding-top:15px}
.ptop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.proj h3{font-family:var(--display);font-size:clamp(20px,2.8vw,27px);font-weight:var(--owt);
  letter-spacing:-.015em;margin:0;color:var(--ink)}
.badge{font-family:var(--display);font-size:10px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:3px 7px;border-radius:2px}
.psub{font-size:16px;line-height:1.5;color:var(--muted);margin:7px 0 0;max-width:52ch}

/* ============ 4. minor row ============ */
.minor{margin-top:clamp(38px,6vh,60px);padding-top:clamp(22px,4vh,34px);border-top:1px solid var(--line)}
.minor-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.minor-title{font-family:var(--display);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.soon{font-family:var(--display);font-size:14px;color:var(--muted);margin:0}
.clist{display:flex;flex-wrap:wrap;gap:0 20px}
.clist .lnk{margin-top:0;font-size:13px}
.minor .art h4{font-family:var(--display);font-size:14px;margin:8px 0 4px}

/* ============ footer ============ */
.foot{border-top:1px solid var(--line);margin-top:clamp(34px,6vh,60px);padding:18px 0 40px}
.foot #foot{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
.foot span{font-family:var(--display);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.foot .lnk{margin-top:0;font-size:11px;letter-spacing:.13em;text-transform:uppercase}

/* ============ second pages ============ */
.pagehead{padding:26px 24px 8px}
.back{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}

/* ============ epigraph ============ */
.epigraph{margin:clamp(26px,5vh,46px) auto clamp(28px,5vh,44px)}
.ep-en,.ep-grc,.ep-cite{opacity:0;transform:translateY(7px);
  transition:opacity 1.1s ease,transform 1.1s ease;margin:0;max-width:44ch}
.epigraph.in .ep-en{opacity:1;transform:none}
.epigraph.in .ep-grc{opacity:.8;transform:none;transition-delay:1.15s}
.epigraph.in .ep-cite{opacity:.55;transform:none;transition-delay:2.1s}
.ep-en{font-family:var(--display);font-size:clamp(25px,4.2vw,42px);font-weight:var(--owt);
  letter-spacing:var(--track);line-height:1.16;color:var(--ink);text-wrap:balance}
.ep-grc{font-size:clamp(15px,2vw,19px);line-height:1.5;color:var(--muted);margin-top:14px}
.ep-cite{font-family:var(--display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:12px}
.map-intro{margin-bottom:24px}

/* ============ the map ============ */
.mapwrap{max-width:1080px;margin:0 auto;padding:0 24px}
.maphint{font-family:var(--display);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.map{position:relative;height:min(72vh,620px);min-height:440px;
  border:1px solid var(--line);border-radius:3px;background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0/22px 22px}
.wires{position:absolute;inset:0;width:100%;height:100%;color:var(--muted);pointer-events:none}
.wire{stroke:var(--muted);stroke-width:1;fill:none;opacity:.4;transition:opacity .2s,stroke-width .2s}
.wire.found{stroke-dasharray:2 5;opacity:.3}
.wire.lit{opacity:1;stroke:var(--accent);stroke-width:1.6;color:var(--accent)}
.wlab{font-family:var(--display);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  fill:var(--muted);opacity:.85}

.cnode{position:absolute;transform:translate(-50%,-50%);background:var(--paper);
  border:1px solid var(--grey);border-radius:2px;cursor:pointer;
  font-family:var(--display);color:var(--ink);text-align:center;
  padding:9px 13px;line-height:1.15;transition:opacity .2s,border-color .2s,background .2s,transform .2s;
  display:flex;align-items:center;gap:7px}
.cnode span{white-space:nowrap}
.cnode .cnt{font-style:normal;font-size:10px;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:1px 5px}
.cnode.found{font-size:17px;font-weight:600;letter-spacing:-.02em;border-width:2px;padding:12px 18px}
.cnode.lg{font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.cnode.md{font-size:13px;font-weight:500;color:var(--grey)}
.cnode:hover{border-color:var(--accent);transform:translate(-50%,-50%) translateY(-2px)}
.cnode.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cnode.on .cnt{color:var(--paper);border-color:rgba(255,255,255,.4)}
.cnode.faded{opacity:.28}
.cnode:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============ detail panel ============ */
.panel{position:relative;margin:22px auto 0;border:1px solid var(--line);
  border-radius:3px;background:var(--card);padding:22px 24px 24px;max-width:var(--maxw)}
.pclose{position:absolute;top:10px;right:12px;background:none;border:0;font-size:20px;
  line-height:1;color:var(--muted);cursor:pointer;padding:4px 6px}
.pclose:hover{color:var(--ink)}
.panel h3{font-family:var(--display);font-size:clamp(21px,3vw,28px);font-weight:var(--owt);
  letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.pblurb{font-size:16.5px;line-height:1.55;color:var(--muted);margin:0 0 18px;max-width:60ch}
.pgroup{border-top:1px solid var(--line);padding-top:13px;margin-top:16px}
.pgroup h4{font-family:var(--display);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.pgroup ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.pgroup li{font-size:16px;line-height:1.55;color:var(--ink);max-width:64ch}
.qsrc{font-family:var(--display);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-right:6px}
.ilinks{display:inline-flex;flex-wrap:wrap;gap:0 14px;margin-left:8px}
.ilinks .lnk{margin-top:0;font-size:12px}
.rel{display:flex;flex-wrap:wrap;gap:8px}
.relbtn{font-family:var(--display);font-size:12.5px;color:var(--ink);background:none;
  border:1px solid var(--line);border-radius:2px;padding:6px 10px;cursor:pointer}
.relbtn:hover{border-color:var(--accent);color:var(--accent)}

.scalewrap{overflow-x:auto}
.scalerow{display:flex;gap:10px;min-width:min-content}
.scard{width:190px;flex:0 0 auto;border:1px solid var(--line);border-radius:2px;padding:10px 11px}
.scard b{font-family:var(--display);font-size:13px;display:block;margin-bottom:6px}
.scard b i{font-style:normal;font-weight:400;color:var(--muted)}
.scard dl{margin:0;font-size:12px;line-height:1.45}
.scard dt{font-family:var(--display);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}
.scard dd{margin:1px 0 0;color:var(--ink)}
.scaleaxis{display:flex;justify-content:space-between;margin-top:9px;padding-top:8px;
  border-top:1px solid var(--line);font-family:var(--display);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ============ studies ============ */
.studies{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.study{border-top:1px solid var(--line);padding-top:12px}
.study h3{font-family:var(--display);font-size:15px;font-weight:var(--owt);margin:0 0 5px;letter-spacing:-.01em}
.study p{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0}

/* ============ 2026 ============ */
.cave{padding:clamp(24px,5vh,48px) 24px 0}
.cave h1{font-family:var(--display);font-size:clamp(28px,5vw,46px);font-weight:var(--owt);
  letter-spacing:var(--track);line-height:1.06;margin:0 0 22px;text-wrap:balance}
.caveimg{border:1px solid var(--line);max-width:420px}
.cavecap{font-family:var(--display);font-size:15px;color:var(--muted);margin:16px 0 0}

@media (max-width:720px){
  .minor-grid{grid-template-columns:1fr}
  .map{height:auto;min-height:0;padding:14px;background:none;border:0}
  .wires{display:none}
  .cnode{position:static;transform:none;display:flex;width:100%;justify-content:space-between;
    text-align:left;margin:0 0 8px}
  .cnode:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .others li,.ep-en,.ep-grc,.ep-cite{opacity:1;transform:none}
  *{transition:none!important}
}

/* ============ under construction strip ============ */
.cx{border-bottom:1px solid var(--line);background:var(--paper)}
.cx .wrap{padding-top:9px;padding-bottom:9px;display:flex;align-items:baseline;gap:1px}
.cx-text,.cx-caret{font-family:var(--display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.cx-caret{animation:blink 1.05s steps(1,end) infinite;color:var(--accent)}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ============ hero label reveal (from nothing, one at a time) ============ */
.others li{opacity:0;transform:translateY(4px);
  transition:opacity .9s ease,transform .9s ease}
.others li.in{opacity:1;transform:none}
.stack.revealed .primary{color:var(--ink)}
.label{transition:color .18s ease}
.label:hover,.label[aria-pressed="true"]{color:var(--accent)}
.label.dim{opacity:1}

.banner img{width:100%;height:auto}

/* ============ equal-weight sections ============ */
.section .sec-title{font-size:12.5px}
.alist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.alist .art h3{font-family:var(--display);font-size:16px;font-weight:var(--owt);margin:9px 0 5px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.chip{font-family:var(--display);font-size:12.5px;color:var(--grey);
  border:1px solid var(--line);border-radius:2px;padding:5px 10px;background:none}
.chip.sub{color:var(--muted);border-style:dashed}

/* ============ map stage + drawer ============ */
.mapshell{max-width:1180px;margin:0 auto;padding:0 24px}
.mapstage{display:flex;gap:18px;align-items:stretch}
.map{flex:1 1 auto;min-width:0}
.map.shrunk{flex:1 1 58%}
.drawer{flex:0 0 368px;max-width:368px;position:relative;border:1px solid var(--line);
  border-radius:3px;background:var(--card);padding:22px 22px 24px;overflow-y:auto;
  max-height:min(72vh,620px)}
.entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.entries li{font-size:15.5px;line-height:1.55;color:var(--ink)}
.elab{font-family:var(--display);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:2px 5px;margin-right:7px;
  white-space:nowrap}
.rels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rels .relbtn{width:100%;text-align:left;font-size:13.5px;line-height:1.4;padding:7px 9px}
.rels .relbtn b{font-weight:600;color:var(--accent);font-style:normal}

.wire{stroke:var(--muted);stroke-width:1;fill:none;opacity:.45;transition:opacity .2s,stroke .2s,stroke-width .2s}
.wire.root{stroke-dasharray:2 5;opacity:.28}
.wire.sub{stroke-dasharray:5 4;opacity:.35}
.wire.lit{opacity:1;stroke:var(--accent);stroke-width:1.7}
.wlab{font-family:var(--display);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  fill:var(--muted);opacity:.9}
.wlab.lit{fill:var(--accent);opacity:1}
.cnode.root{font-size:17px;font-weight:600;letter-spacing:-.02em;border-width:2px;padding:12px 18px}
.cnode.concept{font-size:15px;font-weight:600;letter-spacing:-.015em}
.cnode.sub{font-size:12.5px;font-weight:500;color:var(--grey);border-style:dashed}

@media (max-width:900px){
  .mapstage{flex-direction:column}
  .drawer{flex:1 1 auto;max-width:none;max-height:none}
  .map.shrunk{flex:1 1 auto}
}

/* ============ interactive captcha ============ */
.capbox{position:relative;display:inline-block;max-width:430px;width:100%;
  border:1px solid var(--line);line-height:0}
.capbox img{width:100%}
.capgrid{position:absolute;display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);gap:2px}
.captile{background:none;border:0;cursor:pointer;padding:0;border-radius:1px;
  transition:box-shadow .12s,background .12s}
.captile:hover{background:rgba(255,255,255,.14)}
.captile.picked{box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 6px var(--accent);
  background:rgba(43,74,158,.16)}
.captile:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.capverify{position:absolute;background:none;border:0;cursor:pointer;border-radius:99px}
.capverify:hover{background:rgba(255,255,255,.16)}
.capverify:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.capout{margin-top:20px}
.capcount{font-family:var(--display);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:8px 0 0}

/* ============================================================
   OVERRIDES — final pass. These win by cascade order.
   ============================================================ */

/* labels really do arrive one at a time */
.stack.revealed .others li:not(.in){opacity:0;transform:translateY(4px)}
.others li{margin:0 0 2px}

/* tighter under the hero, clearer air between sections */
.hero{padding-bottom:clamp(14px,2.5vh,24px)}
.annotation{margin-top:14px}
.section{padding:clamp(30px,5vh,46px) 0 0;margin-top:clamp(18px,3vh,30px)}
.section + .section{margin-top:clamp(26px,4.5vh,44px)}

/* every section is visibly its own block, not a run of rules */
.section > .wrap:first-child{position:relative}
.section > .wrap:first-child::before{
  content:"";position:absolute;left:24px;right:24px;top:-22px;height:1px;background:var(--line)}
.section .sec-title{display:inline-block;background:var(--paper);
  padding:0 10px 0 0;margin:0 0 18px;font-size:12.5px;color:var(--ink);opacity:.85}
#about > .wrap:first-child::before{top:-18px}

/* projects: cards, not hairline-separated rows */
.plist{gap:14px}
.proj{border:1px solid var(--line);border-radius:3px;padding:16px 18px 18px;background:var(--card)}
.ptop{align-items:center}
.proj h3{font-size:clamp(19px,2.5vw,24px)}

/* one badge component everywhere */
.badge{display:inline-block;font-family:var(--display);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:2px;padding:4px 8px;background:none}
.badge.soon{color:#B3261E;border-color:#B3261E}

/* art + writing sits level with projects */
#art .badge{margin-top:2px}

/* the agora block, quiet */
#agora .chips{margin:0 0 14px}

/* ---------- map ---------- */
.mapshell{max-width:1240px}
.map{height:min(76vh,700px);min-height:520px;overflow:hidden;touch-action:none}
.cnode{cursor:grab;user-select:none;-webkit-user-select:none}
.cnode.dragging{cursor:grabbing;z-index:5;border-color:var(--accent)}
.maphint::after{content:" Drag them around — the positions are yours.";opacity:.7}

/* ---------- 2026 ---------- */
.cave h1{margin-bottom:12px}
.cave .badge{margin-bottom:20px}
.caveintro{margin-bottom:8px}
.cave + .epigraph{margin-top:6px}
.capbox{max-width:430px}
.capverify{display:flex;align-items:center;justify-content:center}
.capdots{display:none;gap:5px}
.capverify.working .capdots{display:flex}
.capdots i{width:6px;height:6px;border-radius:50%;background:#fff;display:block;
  animation:bounce .9s infinite ease-in-out}
.capdots i:nth-child(2){animation-delay:.15s}
.capdots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.capverify.working{background:rgba(0,0,0,.28)}
.capout .badge{font-size:12px;padding:7px 12px}
.capcount{margin-top:12px}

/* epigraph italics */
.ep-en em{font-style:italic}

@media (prefers-reduced-motion:reduce){.capdots i{animation:none}}

/* ============================================================
   FINAL PASS — timing, flags, nav
   ============================================================ */

/* one fade duration everywhere */
.others li{transition:opacity var(--fade,2600ms) ease, transform var(--fade,2600ms) ease}
.stack.revealed .others li:not(.in){opacity:0;transform:translateY(3px)}
.others li.in{opacity:1;transform:none}

.ep-en,.ep-grc,.ep-cite{transition:opacity var(--fade,2600ms) ease, transform var(--fade,2600ms) ease}
.epigraph.in .ep-grc{transition-delay:var(--s1,1600ms)}
.epigraph.in .ep-cite{transition-delay:var(--s2,3200ms)}

/* the throwaway label reads as an aside */
.others li:last-child .label{opacity:.72;font-style:italic}

/* one soft colour for every status flag */
.badge,.badge.soon{color:var(--flag,#A2705F);border-color:var(--flag,#A2705F);opacity:1}
.cx-text{color:var(--flag,#A2705F);opacity:.85}
.cx-caret{color:var(--flag,#A2705F)}

/* inner-page nav */
.pagehead{display:flex;align-items:baseline;gap:10px 22px;flex-wrap:wrap;padding-bottom:10px}
.pagenav{display:flex;gap:0 18px;flex-wrap:wrap;margin-left:auto}
.pagenav a{font-family:var(--display);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.pagenav a:hover{color:var(--ink);border-bottom-color:var(--accent)}

@media (max-width:640px){.pagenav{margin-left:0;width:100%}}

/* home header: wordmark left, nav right, same row */
.homehead{padding:0 0 clamp(18px,3.5vh,32px);align-items:baseline}
.homehead .wordmark{margin-bottom:0}

/* returning visitors skip the reveal entirely */
.others li.instant{transition:none!important;opacity:1;transform:none}

/* flags: quiet by default, colour only if the token carries one */
.badge,.badge.soon{background:none}

/* hovering a label marks it, it does not make it a link */
.label:hover,.label[aria-pressed="true"]{color:var(--ink)}

/* the project deck: readable measure, quieter than the subtitle above it */
.proj .prose p{font-size:15.5px;line-height:1.6;max-width:58ch;margin-top:10px;color:var(--grey)}

/* ============ THE AGORA · STACKS ============
   A grid of open cards. No card is first, none is hidden. */
.stacks{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  align-items:start;margin-top:8px}
.scon{border-top:1px solid var(--line);padding-top:14px;min-width:0}
.scon.root{grid-column:1/-1;border-top-width:2px;border-top-color:var(--grey)}
.scon h3{font-family:var(--display);font-size:clamp(19px,2.4vw,24px);font-weight:var(--owt);
  letter-spacing:-.015em;margin:0;color:var(--ink)}
.scon.root h3{font-size:clamp(22px,3.2vw,30px)}
.sblurb{font-size:15px;line-height:1.55;color:var(--muted);margin:7px 0 0;max-width:56ch}

.scon .entries{list-style:none;margin:14px 0 0;padding:0}
.scon .entries li{font-size:15px;line-height:1.55;color:var(--ink);
  margin:0 0 9px;padding-left:12px;border-left:1px solid var(--line)}
.scon .elab{display:block;font-family:var(--display);font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--flag);margin-bottom:2px}

.srels{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px dotted var(--line)}
.srels li{font-family:var(--display);font-size:12.5px;line-height:1.5;color:var(--muted);margin:0 0 4px}
.srels b{font-weight:500;color:var(--grey);font-style:italic}
.srels a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.srels a:hover{color:var(--ink);border-bottom-color:var(--grey)}

.scon .scalewrap{margin-top:14px}
.scon .pgroup h4{font-family:var(--display);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:16px 0 0}
.scon .scalerow{gap:10px}
.scon:target h3{color:var(--accent)}
@media (max-width:640px){.stacks{grid-template-columns:1fr;gap:18px}}

/* stacks: the entry label is a caption, not a chip (the drawer's .elab
   carries a border — reset it here or every entry grows a box) */
.scon .elab{border:0;padding:0;margin:0 0 3px;border-radius:0;white-space:normal}
/* a card carrying a scale needs the full row, or the scale scrolls away */
.scon:has(.scalewrap){grid-column:1/-1}
.scon:has(.scalewrap) .scalerow{flex-wrap:wrap}

/* ============ ART + WRITING ============ */
.pgtitle{font-family:var(--display);font-weight:var(--pwt);
  font-size:clamp(28px,5vw,48px);letter-spacing:var(--track);line-height:1.06;
  margin:clamp(18px,3.5vh,32px) 0 0;color:var(--ink);text-wrap:balance}
.pgintro{margin-top:14px}
.pgintro p{max-width:58ch}
.zone+.zone{margin-top:clamp(10px,2vh,20px)}
.zonenote{font-size:14.5px;line-height:1.55;color:var(--muted);margin:14px 0 0;max-width:56ch}

/* the live channel, pinned above the archive */
.live{border-top:2px solid var(--grey);padding-top:15px;margin-bottom:26px}
.live h3{font-family:var(--display);font-size:clamp(19px,2.6vw,25px);font-weight:var(--owt);
  letter-spacing:-.015em;margin:0;color:var(--ink)}

/* the writing list */
.wlist{list-style:none;margin:0;padding:0}
.wlist li{border-top:1px solid var(--line);padding:13px 0 14px}
.wtitle{font-family:var(--display);font-size:clamp(17px,2.2vw,21px);font-weight:var(--owt);
  letter-spacing:-.01em;color:var(--ink)}
.wtitle a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.wtitle a:hover{border-bottom-color:var(--grey)}
.wmeta{display:block;font-family:var(--display);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.wblurb{font-size:15px;line-height:1.55;color:var(--grey);margin:8px 0 0;max-width:56ch}

/* the art grid */
.agrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.acard{margin:0}
.acard img{border:1px solid var(--line);border-radius:2px}
.acard figcaption{margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted)}
.acard figcaption b{font-family:var(--display);font-weight:500;color:var(--ink);display:block}
.alink{text-decoration:none}
.alink:hover .acard img{border-color:var(--grey)}
@media (max-width:640px){.agrid{grid-template-columns:1fr}}

/* ============ READER ============ */
.reading{max-width:66ch}
.rmeta{font-family:var(--display);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:12px 0 0}
.reading-body{margin-top:clamp(22px,4vh,38px)}
.reading-body p{font-size:17.5px;line-height:1.75;max-width:none;margin:0 0 1.15em}
.reading-body p:first-child::first-line{letter-spacing:.01em}
.rmissing{color:var(--muted);font-size:15px}
.rmissing code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:rgba(0,0,0,.05);padding:1px 5px;border-radius:2px}
.rback{margin-top:clamp(26px,5vh,44px);padding-top:16px;border-top:1px solid var(--line)}

/* ================================================================
   23 SEPT 2026 — headshot · uniform home cards · placeholders ·
   Operating Work. Colours are tokens only (theme.js).
   ================================================================ */

/* ---- headshot circle ---- */
.headshot{margin:0}
.headshot img{border-radius:50%;aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;
  box-shadow:0 1px 2px rgba(14,21,30,.06),0 10px 28px -6px rgba(14,21,30,.18)}
.headshot figcaption{font-family:var(--display);font-size:11px;letter-spacing:.06em;color:var(--muted);
  margin-top:8px;text-align:center}
.headshot figcaption a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.has-shot.shot-beside{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(20px,4vw,48px)}
.has-shot.shot-beside > .pagehead,.has-shot.shot-beside > .banner{grid-column:1/-1}
.has-shot.shot-beside > .stack{grid-column:1}
.headshot.at-beside{grid-column:2;grid-row:3;align-self:start;width:clamp(128px,17vw,184px);margin-top:6px}
.headshot.at-above{width:84px;margin:0 0 18px}
@media (max-width:640px){
  .has-shot.shot-beside{grid-template-columns:1fr}
  .headshot.at-beside{grid-column:1;grid-row:3;width:96px;margin:0 0 18px}
  .has-shot.shot-beside > .stack{grid-row:4}
}

/* ---- home cards ---- */
.cardlinks .lnk{margin-right:18px}
.cardlinks .lnk+.lnk{margin-left:0}
.cardaside{font-size:14.5px;line-height:1.5;color:var(--muted);margin:12px 0 0;max-width:56ch}
.proj .chips{margin:12px 0 0}
.agsample{margin:14px 0 2px;padding:0 0 0 14px;border-left:2px solid var(--line)}
.agsample p{font-family:var(--display);font-size:clamp(17px,2vw,19px);line-height:1.4;color:var(--ink);
  margin:0;max-width:52ch;text-wrap:pretty}
.agsample cite{display:block;margin-top:6px;font-style:normal;font-family:var(--display);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.agsample.ep p{font-style:italic}

/* ---- local-only placeholder flag ---- */
.ph{display:block;width:fit-content;font-family:var(--display);font-size:12.5px;line-height:1.4;
  color:var(--flag);border:1px dashed var(--flag);border-radius:2px;padding:3px 8px;margin:8px 0 0}

/* ================= OPERATING WORK =================
   Rebuilt 23 Sept after "hard to read, hard to get to the meat":
   reading text 17px in ink (was 15.5px grey), labels above text (no
   label column), one reading measure, nothing between intro and cases
   except the three lanes. */
.work{padding-bottom:48px}
.work .k{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-right:10px}
.wflag{font-family:var(--display);font-size:12px;line-height:1.45;color:var(--flag);opacity:.85;
  border-left:2px solid var(--flag);padding:2px 0 2px 10px;margin:16px 0 0;max-width:70ch}
.wn{font-family:var(--display);font-variant-numeric:tabular-nums;color:var(--flag);margin-right:12px}
.wintro{font-size:19px;line-height:1.55;color:var(--ink);max-width:60ch;margin:14px 0 0}

/* start here: the three lanes */
.wstart{margin:clamp(28px,5vh,40px) 0 0}
.wstart ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wstart a{display:flex;flex-direction:column;height:100%;padding:18px 20px;background:var(--card);
  border:1px solid var(--line);border-radius:3px;text-decoration:none;color:var(--ink);transition:border-color .2s ease}
.wstart a:hover,.wstart a:focus-visible{border-color:var(--accent)}
.wstart .wn{font-size:12px;margin:0 0 8px}
.wstart .wlt{font-family:var(--display);font-size:clamp(19px,2.1vw,22px);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.wstart .wwhat{font-size:15.5px;line-height:1.5;color:var(--grey);margin-top:8px}
@media (max-width:760px){.wstart ol{grid-template-columns:1fr}}

.wlane-sec{margin:clamp(48px,9vh,72px) 0 0;scroll-margin-top:16px}
.wlane-title{font-family:var(--display);font-weight:var(--pwt);font-size:clamp(26px,3.6vw,34px);
  letter-spacing:var(--track);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--ink)}

.case{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:clamp(20px,3.4vw,34px);margin:0 0 16px;scroll-margin-top:16px}
.case h3,.method h3{font-family:var(--display);font-size:clamp(22px,2.8vw,27px);font-weight:600;
  letter-spacing:-.015em;line-height:1.18;margin:0;max-width:30ch}
.bluf{font-size:clamp(18px,1.9vw,20px);line-height:1.5;color:var(--ink);margin:14px 0 0;max-width:60ch}
.bluf .stat{font-weight:600;background:linear-gradient(transparent 62%,var(--line) 62%)}
.rl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 0}
.rl section{border:1px solid var(--line);border-radius:3px;padding:16px 18px;background:var(--paper)}
.rl h4,.sblock h4{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.rl h4{color:var(--ink)}
.rl p,.sblock p,.proof .pbody p,.mbody p{font-size:17px;line-height:1.62;color:var(--ink);margin:0;max-width:64ch}
.story{margin:18px 0 0;border-top:1px solid var(--line)}
.story summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding:14px 0;font-family:var(--display);font-size:14px;color:var(--accent)}
.story summary::-webkit-details-marker{display:none}
.story .sblock:first-of-type{margin-top:4px}
.story.open{padding-top:4px}
.sblock{margin:0 0 18px}
.wthemes{font-family:var(--display);font-size:13px;color:var(--muted);margin:16px 0 0;line-height:1.7}
@media (max-width:640px){.rl{grid-template-columns:1fr}}

.pplus::before{content:"+";font-family:var(--display);font-size:20px;line-height:1;color:var(--muted)}
details[open] > summary .pplus::before{content:"–"}
.proof{border-top:1px solid var(--line);scroll-margin-top:16px}
.proof:last-of-type{border-bottom:1px solid var(--line);margin-bottom:16px}
.proof summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:4px 16px;padding:18px 2px}
.proof summary::-webkit-details-marker{display:none}
.proof .ptag{font-family:var(--display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--flag)}
.proof .pt{font-family:var(--display);font-size:18px;font-weight:500;color:var(--ink)}
.proof .pbody{padding:0 2px 22px}
@media (max-width:640px){.proof summary{grid-template-columns:1fr auto}.proof .ptag{grid-column:1/-1}}

.method{padding:4px 0 0}
.mbody{margin-top:14px}
.mbody p{margin:0 0 14px}

/* workFont: "serif" — reading text only; headings stay in the site font */
.work-serif .wintro,.work-serif .bluf,.work-serif .rl p,.work-serif .sblock p,
.work-serif .proof .pbody p,.work-serif .mbody p,.work-serif .wstart .wwhat{
  font-family:"Newsreader",Georgia,serif;font-size:1.07em}

@media print{
  .cx,.pagehead,.foot{display:none}
  .case{break-inside:avoid;border:0;padding:0}
}

/* consecutive single-card sections read as one group, spaced like project cards */
.section.cardonly + .section.cardonly{margin-top:16px;padding-top:0}
.section.cardonly + .section.cardonly > .wrap:first-child{display:none}
/* Substack, boxed off inside the Writing card: different kind of writing, different place */
.ssbox{margin:18px 0 0;padding:14px 16px 16px;background:var(--paper);border:1px solid var(--line);border-radius:3px}
.ssbox .sslabel{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--flag);margin:0}
.ssbox .psub{margin-top:6px}
.ssbox .lnk{margin-top:10px}

/* ================= AGORA · 23 SEPT REDESIGN =================
   questions / layers / tocmap share everything below. */
.aghead{padding-top:clamp(18px,4vh,36px)}
.agwhat{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--ink);max-width:56ch;margin:12px 0 0}
.agwhat.ph{font-size:13px}
.epigraph.agep{margin:clamp(20px,4vh,32px) auto clamp(20px,4vh,32px)}
.agep .ep-en{font-size:clamp(19px,2.6vw,24px)}
.agep .ep-grc{font-size:15px}
.agbody{padding-bottom:12px}
.agtoc{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 0;margin:0 0 8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.agtoc a{font-family:var(--display);font-size:14px;color:var(--ink);text-decoration:none}
.agtoc a:hover{color:var(--accent)}
.agc{scroll-margin-top:16px}
.agc h3{font-family:var(--display);font-size:clamp(22px,2.8vw,28px);font-weight:600;letter-spacing:-.015em;margin:0}
.agc.root h3{font-size:clamp(24px,3.2vw,32px)}
.agblurb{font-size:16px;line-height:1.5;color:var(--grey);margin:6px 0 0;max-width:58ch}
.agq{list-style:none;margin:16px 0 0;padding:0}
.agq li{font-family:var(--display);font-size:clamp(18px,2vw,21px);line-height:1.35;color:var(--ink);
  margin:0 0 12px;max-width:44ch;text-wrap:pretty}
.agn{list-style:none;margin:14px 0 0;padding:0}
.agn li{font-size:15.5px;line-height:1.55;color:var(--grey);margin:0 0 6px;padding-left:14px;position:relative;max-width:60ch}
.agn li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:1px;background:var(--muted)}
.agsrc{list-style:none;margin:14px 0 0;padding:0}
.agsrc li{margin:0 0 10px;padding-left:12px;border-left:2px solid var(--line)}
.agsq{display:block;font-size:16px;line-height:1.5;color:var(--ink);font-style:italic}
.agsrc cite{display:block;font-style:normal;font-family:var(--display);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.agsrc .ph{margin:0}
.agrel{display:flex;flex-wrap:wrap;gap:4px 16px;margin:14px 0 0;font-family:var(--display);font-size:14px;color:var(--grey)}
.agrel i{font-style:normal;color:var(--muted)}
.agrel a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
.agstudy{list-style:none;margin:14px 0 0;padding:0;font-size:15px;color:var(--grey)}
.agstudy b{color:var(--ink);font-weight:600;margin-right:6px}
.agscale{margin:16px 0 0}
.agscale ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.agscale li{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:10px 12px;font-size:13px;line-height:1.4;color:var(--grey)}
.agscale b{font-family:var(--display);font-size:15px;color:var(--ink)}
.agscale em{display:block;font-style:normal;color:var(--ink);margin-top:4px}
.agscale small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.agaxis{display:flex;justify-content:space-between;margin-top:8px;padding-top:6px;font-family:var(--display);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid;border-image:linear-gradient(90deg,var(--line),var(--grey)) 1}
.agstudies{margin-top:clamp(36px,6vh,56px)}
.agstudies ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 24px}
.agstudies li{font-size:15px;line-height:1.5;color:var(--grey)}
.agstudies b{display:block;font-family:var(--display);font-size:16px;color:var(--ink);margin-bottom:2px}

/* questions + tocmap: one column, generous separation */
.aglist .agc{padding:clamp(26px,5vh,40px) 0;border-bottom:1px solid var(--line)}
.aglist .agc:last-child{border-bottom:0}
.aglist .agc.root{border-top:2px solid var(--grey);margin-top:8px}

/* layers */
.ag-layers .agtier{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ag-layers .agtier .agc{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:16px 18px}
.ag-layers .agtier .agc h3{font-size:clamp(19px,2.2vw,22px)}
.ag-layers .agq li{font-size:16.5px;max-width:none}
.ag-layers .agc.root{grid-column:1/-1}
.agband{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin:0;padding:14px 0;
  font-family:var(--display);font-size:14px;color:var(--grey);text-align:center}
.agband i{font-style:normal;color:var(--flag)}
.agband span::before{content:"↓ ";color:var(--muted)}

/* tocmap */
.agmap{position:relative;height:clamp(300px,42vw,380px);margin:8px 0 18px;background:var(--card);
  border:1px solid var(--line);border-radius:3px}
.agmap .agin{position:absolute;inset:9% 9%}
.agmap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.agmap line{stroke:var(--line);stroke-width:1.5;vector-effect:non-scaling-stroke}
.agmap line.sub{stroke-dasharray:4 4}
.agmap line.root{stroke:var(--muted);stroke-opacity:.35}
.agmap .agnode,.agmap .agml{position:absolute;transform:translate(-50%,-50%);white-space:nowrap}
.agmap .agnode{font-family:var(--display);font-size:14px;color:var(--ink);text-decoration:none;background:var(--paper);
  border:1px solid var(--line);border-radius:2px;padding:5px 10px;z-index:2}
.agmap .agnode:hover{border-color:var(--accent);color:var(--accent)}
.agmap .agnode.root{font-weight:600;border-color:var(--grey)}
.agmap .agnode.sub{border-style:dashed;color:var(--grey)}
.agmap .agml{font-family:var(--display);font-size:11px;color:var(--flag);background:var(--card);padding:0 4px;z-index:1}
@media (max-width:640px){.agmap{display:none}}
.ag-layers .agscale small{display:none}.ag-layers .agscale ol{grid-template-columns:1fr}.ag-layers .agscale li{padding:7px 10px}

/* ================= LEGIBILITY OPTIONS (23 Sept audit) =================
   THEME.smallText = "larger": navigation, section labels, badges and the
   footer stop being the smallest text on the site. */
.st-larger .pagenav a{font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
.st-larger .wordmark,.st-larger .back{font-size:13px;letter-spacing:.06em;color:var(--ink)}
.st-larger .section .sec-title,.st-larger .sec-title{font-size:13px;letter-spacing:.1em;color:var(--ink);opacity:1}
.st-larger .badge,.st-larger .badge.soon{font-size:11px;letter-spacing:.1em;padding:3px 7px}
.st-larger .foot .lnk{font-size:13.5px;letter-spacing:0;text-transform:none}
.st-larger .cx{font-size:12px}
.st-larger .ssbox .sslabel,.st-larger .wmeta,.st-larger .rmeta{font-size:12px}

/* ===== The AI-safety line (THEME.nowPlace), 23 Sept ===== */
.nowline{font-family:var(--display);color:var(--ink);margin:0;max-width:34ch;text-wrap:balance}
.nowline.ph{font-size:inherit;border-width:1px;padding:2px 8px;line-height:1.3}
.nowline.at-under{font-size:clamp(20px,2.6vw,26px);font-weight:500;line-height:1.3;margin:22px 0 0;
  padding-top:18px;border-top:1px solid var(--line)}
.nowline.at-above{font-size:clamp(20px,2.8vw,28px);font-weight:500;line-height:1.25;margin:0 0 16px}
.nowblock{margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;
  grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline}
.has-shot.shot-beside > .nowblock{grid-column:1/-1}
.nowblock .nowlab{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.nowblock .nowline{font-size:clamp(19px,2.3vw,23px);font-weight:500;line-height:1.3}
.nowblock .nowlinks{grid-column:2;margin:2px 0 0}
.nowblock .nowlinks .lnk{margin:0 16px 0 0}
@media (max-width:520px){.nowblock{grid-template-columns:1fr}.nowblock .nowlinks{grid-column:1}}

/* ===== 23 Sept (afternoon): label notes, animal tray, photo credit, now rows, quote garden, bandana ===== */
.annotation .lnk{margin-top:0}
.primary.hasnote{cursor:default;outline:none}
.primary.hasnote:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* photographer credit: quiet until hover / focus / tap */
.headshot{position:relative;cursor:default}
.headshot .credit{opacity:0;transition:opacity .25s ease;font-size:12px;letter-spacing:.02em}
.headshot:hover .credit,.headshot:focus-within .credit,.headshot.show .credit,.headshot:focus .credit{opacity:1}
.headshot:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:50%}

/* now rows */
.nowblock .nowline.sub{font-size:clamp(16px,1.8vw,18px);font-weight:400;color:var(--grey)}
.nowblock .nowline.sub .lnk{margin:0 0 0 8px;font-size:14px}

/* quote garden: drift inside the map, a strip elsewhere */
.qdrift{position:absolute;transform:translate(-50%,-50%);max-width:34%;z-index:3;background:none;border:0;padding:4px 6px;
  font-family:var(--body);font-style:italic;font-size:13px;line-height:1.4;color:var(--grey);text-align:left;cursor:pointer;
  opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.qdrift.on{opacity:.9;pointer-events:auto}
.qdrift:hover,.qdrift:focus-visible{color:var(--ink);opacity:1}
.qdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mark);margin-right:6px;vertical-align:1px}
.qcard{position:absolute;transform:translate(-50%,-50%);z-index:6;width:min(340px,70%);background:var(--card);
  border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 30px rgba(16,24,34,.16);padding:14px 16px 12px}
.qcard .qx{position:absolute;top:6px;right:8px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px}
.qcard .qtext,.qstrip .qtext{font-size:16px;line-height:1.5;color:var(--ink);margin:0;font-style:italic}
.qcite{font-family:var(--display);font-size:12px;letter-spacing:.04em;color:var(--muted);margin:6px 0 0}
.qcite a{color:inherit}
.qact{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0}
.qact button{font-family:var(--display);font-size:12.5px;color:var(--accent);background:none;border:1px solid var(--line);
  border-radius:2px;padding:3px 9px;cursor:pointer}
.qnote{font-size:12.5px;color:var(--grey)}
.qstrip{margin:18px 0 0;padding:12px 0 0;border-top:1px solid var(--line);max-width:60ch}
.qstrip.hasmap{display:none}
@media (max-width:640px){.qstrip.hasmap{display:block}}
@media (prefers-reduced-motion:reduce){.qdrift{transition:none}}


/* ===== 23 Sept (evening): per-label notes, floating photos, teal accent, wider text ===== */
.stack{position:relative}
.lpop{position:absolute;z-index:20;opacity:0;transition:opacity .2s ease,transform .2s ease;transform:translateY(-50%) translateX(-4px)}
.lpop.on{opacity:1;transform:translateY(-50%)}
.lpop:not(.photos){font-family:var(--display);font-size:16px;line-height:1.4;color:var(--grey);max-width:320px;
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.lpop .lnk{margin:0;font-size:15.5px}
.lpop.below{transform:translateY(0);background:var(--paper);padding:4px 10px 6px 0}
.lpop.below.on{transform:none}
/* photos: they float on the page, no box; the page colour behind them
   only exists to hide the labels underneath */
.lpop.photos{transform:translateY(-4px);background:var(--paper);padding:10px 0 6px;width:min(760px,calc(100vw - 48px))}
.lpop.photos.on{transform:none}
.lrow{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 8px}
.lrow figure{margin:0;flex:0 0 136px;scroll-snap-align:start}
.lrow img{width:136px;height:170px;object-fit:cover;border-radius:6px;display:block;background:var(--line);
  box-shadow:0 1px 2px rgba(14,21,30,.06),0 8px 18px -8px rgba(14,21,30,.25)}
.lrow figcaption{font-family:var(--display);font-size:11px;line-height:1.35;color:var(--muted);margin-top:6px}
.lrow figcaption a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.lgal{margin:2px 0 0;font-size:13px}.lgal .lnk{margin:0}
.label[aria-expanded="true"],.primary[aria-expanded="true"]{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.lpop{transition:none}}

/* teal accent: fills and marks only (it fails as text), never on the headshot */
.pal-teal .badge,.pal-teal .badge.soon{background:var(--tint);border-color:var(--tint);color:var(--ink)}
.pal-teal .bluf .stat{background:linear-gradient(transparent 60%,var(--tint) 60%)}
.pal-teal ::selection{background:var(--tint)}
.pal-teal .ssbox{border-left:3px solid var(--tint)}
.pal-teal .nowblock .nowlab{color:var(--ink)}
.pal-teal .ssbox .sslabel{color:var(--ink)}

/* wider page, wider text (the frame grew but lines were capped before) */
.psub{max-width:68ch}
.prose p,.proj .prose p{max-width:74ch}
.cardaside{max-width:70ch}
.agblurb{max-width:72ch}
.agq li{max-width:60ch}
.wintro,.bluf{max-width:72ch}

/* ===== 23 Sept (night): flat sections, one header, label hover, Agora fixes ===== */
/* home cards → sections divided by a hairline, like the reference sites (no white boxes) */
.proj{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0 6px}
.plist{gap:10px}
.section.cardonly + .section.cardonly{margin-top:4px}
.ssbox{background:transparent;border:0;border-left:3px solid var(--tint);border-radius:0;padding:4px 0 4px 16px}

/* header: same everywhere; the page you're on is marked */
.back{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.pagenav a.here{color:var(--ink);text-decoration:underline;text-decoration-color:var(--tint);text-decoration-thickness:3px;text-underline-offset:6px}

/* labels react: darken and take a teal underline (all of them, big label too) */
.label,.primary.hasnote{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.12em;
  text-underline-offset:.14em;transition:color .2s ease,text-decoration-color .2s ease}
.label:hover,.label:focus-visible,.label[aria-expanded="true"],
.primary.hasnote:hover,.primary.hasnote:focus-visible,.primary[aria-expanded="true"]{color:var(--ink);text-decoration-color:var(--tint)}
.label{cursor:default}
.label:hover{cursor:pointer}

/* Agora: bigger epigraph, one line (not two) above Consciousness */
.agep .ep-en{font-size:clamp(24px,3.2vw,32px)}
.agep .ep-grc{font-size:18px}
.agep .ep-cite{font-size:12.5px}
.aglist .agc.root{border-top:0;margin-top:0;padding-top:clamp(34px,6vh,48px)}

/* Current Studies: its own panel, clearly different from the topics */
.agstudies{margin:6px 0 26px}
.agsp{background:color-mix(in srgb,var(--tint) 22%,transparent);border-radius:6px;padding:22px 24px 16px}
.agsp h2{font-family:var(--display);font-size:clamp(20px,2.4vw,24px);font-weight:600;margin:0 0 12px}
.agsp ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 28px}
.agsp li{display:flex;flex-direction:column;gap:3px}
.agsp b{font-family:var(--display);font-size:17.5px;font-weight:600;color:var(--ink)}
.agsp span{font-size:15.5px;line-height:1.5;color:var(--grey)}
.agsp .agtopic{align-self:flex-start;font-family:var(--display);font-size:12.5px;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;margin-top:2px}

/* map: calm by default; point at a topic to see its connections */
.agmap{height:clamp(260px,34vw,330px);background:transparent}
.agmap line{stroke:var(--line)}
.agmap .agml{opacity:0;transition:opacity .2s ease;background:var(--paper)}
.agmap .agml.lit{opacity:1}
.agmap .agnode{background:var(--paper)}
.agmap .agnode.lit{border-color:var(--ink);color:var(--ink)}
.qdrift{font-size:12.5px;max-width:30%}

/* Operating Work: the coming essay */
.wessay{font-size:16px;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.wessay .badge{margin-left:4px}
/* exactly one line between things: the section divider OR the card line, never both */
.proj{border-top:0}
.plist .proj + .proj,
.section.cardonly + .section.cardonly .proj{border-top:1px solid var(--line)}

/* ===== 23 Sept (late): label fade, section hierarchy, quieter studies, quote garden v2 ===== */
/* labels: pointing at one keeps it dark and fades the others. No underlines. */
.label,.primary.hasnote{text-decoration:none!important;transition:opacity .25s ease,color .25s ease}
.stack:has(.label:hover,.primary.hasnote:hover,[aria-expanded="true"]) .label,
.stack:has(.label:hover,.primary.hasnote:hover,[aria-expanded="true"]) .primary{opacity:.32}
.stack .label:hover,.stack .label:focus-visible,.stack .label[aria-expanded="true"],
.stack .primary.hasnote:hover,.stack .primary[aria-expanded="true"]{opacity:1!important;color:var(--ink)}

/* sections: one heading size for every home section, far more space between
   sections than within them; each section gets its own divider again */
.section{margin-top:0!important;padding-top:clamp(64px,10vh,96px)}
.section.cardonly + .section.cardonly{padding-top:clamp(64px,10vh,96px)}
.section.cardonly + .section.cardonly > .wrap:first-child{display:block;height:0}
.section.cardonly + .section.cardonly .proj{border-top:0}
.section > .wrap:first-child::before{top:calc(-1 * clamp(32px,5vh,48px))}
.section .sec-title{display:block;font-family:var(--display);font-size:clamp(26px,3vw,32px);font-weight:600;
  letter-spacing:-.015em;text-transform:none;color:var(--ink);opacity:1;background:none;padding:0;margin:0 0 22px}
.section.cardonly .proj > .ptop h3{font-size:clamp(26px,3vw,32px);font-weight:600;letter-spacing:-.015em}
.section.cardonly .proj{padding-top:0}
.plist .proj h3{font-size:clamp(19px,2.2vw,22px);font-weight:600}
.plist .proj + .proj{margin-top:6px;padding-top:22px}
.foot{margin-top:clamp(64px,10vh,96px)}

/* Current Studies: under the topics, distinct but quieter than them */
.agstudies{margin:40px 0 0}
.agsp{padding:16px 20px 14px;background:color-mix(in srgb,var(--tint) 22%,transparent)}
.agsp h2{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:0 0 10px}
.agsp ul{gap:10px 24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.agsp b{font-size:15px}
.agsp span{font-size:14px}

/* quote garden */
.qgarden{margin:40px 0 8px}
.qgh{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:0 0 14px}
.qgarden .qtext{font-size:17px;line-height:1.5;color:var(--ink);margin:0;font-style:italic}
.qgarden .qcite{font-family:var(--display);font-size:12.5px;letter-spacing:.03em;color:var(--muted);margin:8px 0 0}
.qgarden .qact{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0}
.qgarden button.qcopy,.qdeckctl .qnext{font-family:var(--display);font-size:12.5px;color:var(--accent);background:none;
  border:1px solid var(--line);border-radius:2px;padding:3px 10px;cursor:pointer}
.qgarden .qnote{font-size:12.5px;color:var(--grey)}
/* deck */
.qdeck{position:relative;max-width:460px;transition:height .3s ease}
.qc{position:absolute;inset:0 0 auto 0;background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:18px 20px 14px;box-shadow:0 1px 2px rgba(14,21,30,.05),0 10px 24px -12px rgba(14,21,30,.22);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease;transform-origin:50% 100%}
.qc:not(.top){pointer-events:none}
.qc:not(.top) .qact{visibility:hidden}
.qc.fly{transform:translate(58%,-14px) rotate(9deg)!important;opacity:0!important}
.qdeckctl{margin:14px 0 0}
/* breeze */
.qband{position:relative;height:150px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.qleaf{position:absolute;left:0;top:0;max-width:300px;text-align:left;background:none;border:0;padding:4px 6px;cursor:pointer;
  font-family:var(--body);will-change:transform}
.qleaf span{display:block;font-size:14.5px;line-height:1.4;font-style:italic;color:var(--ink)}
.qleaf small{display:block;font-family:var(--display);font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:2px}
.qleaf:hover span,.qleaf:focus-visible span{text-decoration:underline;text-decoration-color:var(--tint);text-decoration-thickness:2px}
.qopen{max-width:460px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px 20px 12px;margin-top:10px;position:relative}
.qopen .qx{position:absolute;top:6px;right:8px;border:0;background:none;color:var(--muted);cursor:pointer}
@media (prefers-reduced-motion:reduce){.qc,.qdeck{transition:none}.qband{height:auto;-webkit-mask-image:none;mask-image:none}
  .qleaf{position:static;display:inline-block;transform:none!important;opacity:1!important}}
.st-larger .section .sec-title,.section .sec-title{display:block;font-family:var(--display);font-size:clamp(26px,3vw,32px);
  font-weight:600;letter-spacing:-.015em;text-transform:none;color:var(--ink);opacity:1;background:none;padding:0;margin:0 0 22px}
/* Philosopher's link stays on one line (it was wrapping to a second row) */
.lpop:not(.photos){max-width:none;flex-wrap:nowrap;white-space:nowrap}
.lpop.below:not(.photos){white-space:normal;flex-wrap:wrap;max-width:calc(100vw - 48px)}
/* big section headers in caps: PROJECTS · WRITING · THE AGORA */
.st-larger .section .sec-title,.section .sec-title,
.section.cardonly .proj > .ptop h3{text-transform:uppercase;font-size:clamp(20px,2.3vw,24px);letter-spacing:.08em;font-weight:600}

/* ================= ART (23 Sept) ================= */
.apiece{margin:0}
.aopen{display:block;padding:0;border:0;background:none;cursor:zoom-in;width:100%}
.apiece img{width:100%;height:auto;display:block;border-radius:3px;
  box-shadow:0 1px 2px rgba(14,21,30,.06),0 14px 30px -14px rgba(14,21,30,.28);transition:transform .35s ease}
.aopen:hover img,.aopen:focus-visible img{transform:translateY(-3px)}
.apiece figcaption{font-family:var(--display);font-size:14px;margin-top:10px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.apiece figcaption b{font-weight:600;color:var(--ink)}
.apiece figcaption span{font-size:12.5px;color:var(--muted)}
.aslabel{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin:0 0 12px}
.arow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,22px);align-items:start}
.amore{font-family:var(--display);font-size:17px;color:var(--grey);margin:clamp(40px,7vh,64px) 0 0}
/* rise into view */
.rise{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
/* wall */
.awall{display:flex;flex-direction:column;gap:clamp(48px,8vh,80px)}
.awall .single{max-width:560px}
.awall .single:nth-of-type(even){align-self:flex-end}
/* timeline */
.atimeline{list-style:none;margin:0;padding:0;position:relative}
.atimeline::before{content:"";position:absolute;left:92px;top:6px;bottom:6px;width:1px;background:var(--line)}
.aentry{display:grid;grid-template-columns:92px 1fr;gap:0 32px;padding:0 0 clamp(48px,9vh,88px)}
.aentry .adate{position:sticky;top:24px;align-self:start;font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.06em;color:var(--ink);margin:4px 0 0;text-align:right;padding-right:14px}
.aentry .adate::after{content:"";position:absolute;right:-5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--tint);box-shadow:0 0 0 3px var(--paper)}
.aone{max-width:540px}
/* scrolly */
.ascrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px}
.astep{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .4s ease}
.astep.on,.astep:first-child{opacity:1}
.astep .adate{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--muted);margin:0}
.astep h2{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);font-weight:600;margin:6px 0 8px;line-height:1.2}
.astep p{font-size:17px;line-height:1.6;color:var(--ink);max-width:40ch}
.alink{font-family:var(--display);font-size:14px;color:var(--accent);background:none;border:0;padding:0;margin-top:10px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;align-self:flex-start;width:auto}
.astage{position:sticky;top:10vh;height:80vh;align-self:start}
.astage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease}
.astage img.on{opacity:1}
.amobile{display:none}
@media (max-width:760px){
  .arow{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .atimeline::before{left:0}
  .aentry{grid-template-columns:1fr;padding-left:18px}
  .aentry .adate{position:static;text-align:left;padding:0;margin:0 0 10px}
  .aentry .adate::after{left:-23px;right:auto}
  .ascrolly{grid-template-columns:1fr}
  .astage{display:none}
  .astep{min-height:0;opacity:1;padding:0 0 40px}
  .amobile{display:block;width:100%;height:auto;border-radius:3px;margin-top:14px}
}
/* full-size view */
.alight{position:fixed;inset:0;z-index:100;background:rgba(14,21,30,.92);display:flex;align-items:center;justify-content:center;padding:4vh 64px}
.alight[hidden]{display:none}
.alight figure{margin:0;max-height:92vh;display:flex;flex-direction:column;align-items:center}
.alight img{max-width:100%;max-height:84vh;width:auto;height:auto;object-fit:contain;border-radius:2px}
.alight figcaption{font-family:var(--display);font-size:14px;color:#E6EAEE;margin-top:12px;text-align:center}
.alight figcaption b{font-weight:600;color:#fff}
.alight button{position:absolute;background:none;border:0;color:#E6EAEE;font-size:24px;cursor:pointer;padding:12px}
.alx{top:10px;right:14px}.alprev{left:10px;top:50%;transform:translateY(-50%)}.alnext{right:10px;top:50%;transform:translateY(-50%)}
.alight button:hover,.alight button:focus-visible{color:#fff}
body.noscroll{overflow:hidden}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}.astage img{transition:none}}
/* home Art card thumbnails */
.athumbs{display:flex;gap:10px;margin:14px 0 4px;overflow-x:auto}
.athumbs a{flex:0 0 auto}
.athumbs img{height:110px;width:auto;border-radius:3px;display:block;box-shadow:0 1px 2px rgba(14,21,30,.06),0 8px 18px -10px rgba(14,21,30,.3)}

/* ===== Art v2 (23 Sept): transparent pieces, branching triptych, zoom ===== */
/* no mats, no rectangles: the shadow follows each piece's own edge */
.apiece img{box-shadow:none;border-radius:0;filter:drop-shadow(0 12px 18px rgba(14,21,30,.16)) drop-shadow(0 1px 2px rgba(14,21,30,.08))}
.athumbs img{box-shadow:none;border-radius:0;filter:drop-shadow(0 6px 10px rgba(14,21,30,.18))}
.apiece figcaption em{flex-basis:100%;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:-4px}
/* one size for every piece */
.awall{--pw:min(420px,calc((100% - 32px) / 2));max-width:calc(var(--pw) * 2 + 32px);margin:0 auto;gap:clamp(56px,9vh,96px)}
.awall .single{width:var(--pw);max-width:none}
.awall .single.left{align-self:flex-start}
.awall .single.right{align-self:flex-end}
/* the fork: Prologue, then a line that splits to Future A and Future B */
.afork{--pw:min(420px,calc((100% - 32px) / 2));width:100%}
.afork .aslabel{text-align:center}
.atrunk{width:var(--pw);margin:0 auto}
.aforkline{display:block;width:calc(var(--pw) + 32px);height:56px;margin:6px auto 10px;overflow:visible}
.aforkline path{fill:none;stroke:var(--grey);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.55}
.abranches{display:grid;grid-template-columns:var(--pw) var(--pw);gap:32px;justify-content:center}
.atimeline .afork .aslabel{text-align:left}
.atimeline .afork{--pw:min(340px,calc((100% - 32px) / 2))}
.aone{max-width:var(--pw,420px)}
@media (max-width:760px){
  .awall,.afork{--pw:calc((100% - 16px) / 2)}
  .awall .single{width:100%}
  .abranches{gap:16px}
  .atrunk{width:70%}
}
/* zoom inside the full-size view */
.alzoom{overflow:hidden;max-width:100%;max-height:84vh;display:flex;align-items:center;justify-content:center}
.alzoom img{cursor:zoom-in;transition:transform .25s ease;will-change:transform}
.alzoom.zoomed img{cursor:zoom-out;transition:transform .08s linear}
.alight figcaption .almed,.alight figcaption .alnote{display:block;margin-top:6px;color:#C9D1D9;font-size:13.5px;max-width:60ch}
.alight figcaption .alnote{font-family:var(--body);font-size:15px;line-height:1.55;color:#DDE3E8}
/* the fork spans both branches, so its ends land on each branch's centre */
.aforkline{width:calc(var(--pw) * 2 + 32px);height:64px}
@media (max-width:760px){.aforkline{width:calc(var(--pw) * 2 + 16px)}}
/* bigger single pieces: landscape = full gallery width, portrait = 640px centred */
.awall .single{width:min(100%,640px);align-self:center!important}
.awall .single.wide{width:100%}
.awall .single.tall{width:min(100%,640px)}
/* "More coming soon!" in the palette's teal, deepened to read as text */
.amore{color:var(--tint-ink);font-weight:500}
/* Mary Oliver, opening the Now block */
.nowblock .nowep{grid-column:1/-1;margin:0 0 18px;padding:0 0 0 14px;border-left:3px solid var(--tint)}
.nowep p{font-family:var(--display);font-style:italic;font-size:clamp(18px,2.1vw,21px);line-height:1.45;color:var(--ink);margin:0}
.nowep cite{display:block;margin-top:6px;font-style:normal;font-family:var(--display);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ===== One-accent palette (23 Sept) ===== */
.ph{color:var(--ph);border-color:var(--ph)}
.pal-accent .badge,.pal-accent .badge.soon{background:var(--tint);border-color:var(--tint);color:var(--ink)}
.pal-accent .bluf .stat{background:linear-gradient(transparent 60%,var(--tint) 60%)}
.pal-accent ::selection{background:var(--tint)}
.pal-accent .ssbox{border-left:3px solid var(--tint)}
.pal-accent .ssbox .sslabel,.pal-accent .nowblock .nowlab{color:var(--ink)}
.pal-accent .agsp{background:color-mix(in srgb,var(--tint) 22%,transparent)}
.pal-accent .agmap .agnode.lit{border-color:var(--accent);color:var(--accent)}
/* "More coming soon!": a pill in the fill colour, not a link colour */
.amore{display:inline-block;color:var(--ink);background:var(--tint);border-radius:999px;padding:6px 16px;
  font-family:var(--display);font-size:15px;font-weight:500}

/* animals: offered beside the label; open IN PLACE under the labels on click */
.lsee{font-family:var(--display);font-size:15.5px;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ltray{position:relative;margin:14px 0 0;overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .25s ease}
.ltray.on{max-height:320px;opacity:1}
.ltrayx{position:absolute;top:4px;right:0;z-index:2;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--grey);font-size:12px;cursor:pointer;line-height:1}
.ltray .lrow{padding:6px 40px 10px 2px}
@media (prefers-reduced-motion:reduce){.ltray{transition:none}}
/* Under Construction = the SECONDARY colour (as text), caret included */
.cx-text,.cx-caret{color:var(--tint-ink)!important;opacity:1}
/* roles, corrected (23 Sept): PRIMARY carries the structure, SECONDARY is the rare 10% */
.nowblock .nowep,.pal-accent .nowblock .nowep{border-left-color:var(--accent)}
.pal-accent .ssbox,.ssbox{border-left-color:var(--accent)}
.amore{background:var(--sec)}
.qdot{background:var(--sec)}

/* ===== ONE MEANING PER COLOUR (23 Sept, night) =====
   blue (accent)  = you can click this: links + the current-page underline. Nothing else.
   warm (tintInk) = not finished yet: Under Construction, Skeleton WIP, Coming Soon,
                    More coming soon! — all the SAME treatment: warm text, no box, no pill.
   everything else is slate. No light-blue fills anywhere. */
.pal-accent .badge,.pal-accent .badge.soon{background:none!important;border:0!important;padding:0!important;
  color:var(--tint-ink)!important;font-size:11.5px;letter-spacing:.12em;margin-left:4px}
.pal-accent .amore{background:none;padding:0;border-radius:0;display:block;color:var(--tint-ink);
  font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.pal-accent .nowblock .nowep,.pal-accent .ssbox{border-left-color:var(--muted)!important}
.pal-accent .pagenav a.here{text-decoration-color:var(--accent)}
.pal-accent .bluf .stat{background:linear-gradient(transparent 60%,var(--line) 60%)}
.pal-accent ::selection{background:var(--line)}
.pal-accent .agsp{background:color-mix(in srgb,var(--line) 45%,transparent)!important}
.pal-accent .qdot{background:var(--accent)}
.pal-accent .agmap .agml{color:var(--muted)}
/* no link is ever the browser's default blue (#0000EE): every link takes the palette's blue */
a{color:var(--accent);text-decoration-color:currentColor}
a:has(img){text-decoration:none}

/* =====================================================================
   SIX COLOURS, ONE JOB EACH (23 Sept, final). Everything reads from
   THEME.colors. If it isn't listed here, it is text, softText or lines.
   ===================================================================== */
/* primary: every link, subtitles, every vertical quote bar, Current Studies */
.colors6 a,.colors6 .lnk,.colors6 .lsee,.colors6 .agrel a,.colors6 .agtopic,.colors6 #foot a,
.colors6 .pagenav a,.colors6 .alink,.colors6 .qgarden button.qcopy,.colors6 .qdeckctl .qnext{color:var(--accent)!important;text-decoration-color:var(--accent)!important;border-bottom-color:var(--accent)}
.colors6 .back,.colors6 .wordmark,.colors6 .athumbs a,.colors6 .aopen,.colors6 .agnode{color:var(--ink)!important}
.colors6 .pagenav a.here{text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:6px}
.colors6 .psub{color:var(--accent)!important}
.colors6 .nowblock .nowep,.colors6 .ssbox,.colors6 .agsample,.colors6 .agsrc li,.colors6 .agsp{border-left:3px solid var(--accent)!important}
.colors6 .agsp{background:none!important;border-radius:0!important;padding:4px 0 4px 18px!important}
.colors6 .agsp h2{color:var(--accent)!important}
.colors6 .wn,.colors6 .agmap .agnode.lit{color:var(--accent)!important;border-color:var(--accent)}
/* incomplete: one colour, one style, everywhere something isn't finished */
.colors6 .cx-text,.colors6 .cx-caret{color:var(--flag)!important;opacity:1!important}
.colors6 .badge,.colors6 .badge.soon,.colors6 .amore{background:none!important;border:0!important;border-radius:0!important;
  padding:0!important;color:var(--flag)!important;font-family:var(--display);font-size:11.5px!important;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;display:inline-block}
.colors6 .amore{display:block;margin-top:clamp(40px,7vh,64px)}
.colors6 .ph{color:var(--flag)!important;border-color:var(--flag)!important}
/* everything else: text / softText / lines only — no fills, no tints, no faded text */
.colors6 .card,.colors6 .case,.colors6 .wstart a,.colors6 .qc,.colors6 .qopen,.colors6 .agscale li,.colors6 .rl section,
.colors6 .tray,.colors6 .agmap,.colors6 .qcard{background:var(--paper)!important}
.colors6 .sslabel,.colors6 .nowlab,.colors6 .ptag,.colors6 .agml,.colors6 .qcite,.colors6 .ep-cite,.colors6 .sec-title{color:var(--muted)!important}
.colors6 .ep-grc,.colors6 .ep-cite,.colors6 .level-3 .sec-title,.colors6 .wflag,.colors6 .section .sec-title{opacity:1!important}
.colors6 .section .sec-title,.colors6 .st-larger .section .sec-title{color:var(--ink)!important}
.colors6 .bluf .stat{background:none!important;text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:3px}
.colors6 ::selection{background:var(--line)}
.colors6 .qdot{background:var(--accent)!important}
.colors6 .wflag{color:var(--flag)!important;border-left-color:var(--flag)!important}

/* ===== Fill, markers, boxes (23 Sept) — switched in colors.html ===== */
/* Current Studies: a tinted box (Emily liked the box over the bar) */
.colors6 .agsp{background:color-mix(in srgb,var(--fill) 26%,var(--paper))!important;border-left:0!important;
  border-radius:6px!important;padding:18px 22px 14px!important}
.colors6 .agsp h2{color:var(--muted)!important}
/* markers as pills: fill behind dark text */
.markers-pill.colors6 .badge,.markers-pill.colors6 .badge.soon{background:var(--fill)!important;color:var(--ink)!important;
  padding:3px 8px!important;border-radius:3px!important}
.markers-pill.colors6 .amore{display:inline-block;background:var(--fill)!important;color:var(--ink)!important;padding:6px 14px!important;border-radius:3px!important}
/* home sections in tinted boxes */
.boxes-tinted .proj,.boxes-tinted .nowblock{background:color-mix(in srgb,var(--fill) 18%,var(--paper));border:0!important;
  border-radius:8px;padding:22px 26px 22px!important}
.boxes-tinted .plist{gap:14px}
.boxes-tinted .plist .proj + .proj{border-top:0!important;margin-top:0;padding-top:22px!important}
.boxes-tinted .nowblock{margin-top:30px}
.boxes-tinted .section > .wrap:first-child::before{display:none}
.boxes-tinted .section{padding-top:clamp(40px,7vh,64px)}
.boxes-tinted .ssbox{border-left-color:var(--accent)!important}
/* Tech Operator's "coming soon" note */
.lpop .badge{margin-left:2px}

/* ===== 24 Sept fixes ===== */
/* Tech Operator's note: a reserved line under the big label (never covers anything) */
.lpop.under{position:static;transform:none!important;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;
  min-height:0;margin:8px 0 2px;white-space:normal}
.stack .primary.hasnote + .lpop.under[hidden]{display:flex!important;visibility:hidden}
/* header: no underlines; the page you're on is bold instead */
.colors6 .pagenav a,.colors6 .pagenav a.here,.pagenav a{text-decoration:none!important;border-bottom:0!important}
.pagenav a.here{font-weight:600}
/* one-line subtitles: regular text colour, not the primary */
.colors6 .psub{color:var(--muted)!important}
/* a label with nothing behind it doesn't react to hover */
.label.nohover{cursor:default!important}
.stack:has(.label.nohover:hover) .label,.stack:has(.label.nohover:hover) .primary{opacity:1}
.stack .label.nohover:hover{color:inherit}
/* footer: one size, one gap */
.foot #foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px}
.foot #foot > span{font-family:var(--display);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.foot #foot .lnk,.foot #foot .lnk + .lnk{margin:0!important;font-size:13.5px}
/* Mary Oliver: much smaller (24 Sept) */
.nowep p{font-size:15px!important;line-height:1.5}
.nowep cite{font-size:11px!important;margin-top:4px}
.nowblock .nowep{margin-bottom:14px}

/* =====================================================================
   TYPE SCALE (24 Sept): every text element maps to ONE role. Sizes come
   from THEME.type via --t-* (edit in colors.html → Type). Placeholders
   inherit the size of the text they stand in for.
   ===================================================================== */
.type10 .primary,.type10 .primary .paren{font-size:var(--t-display)!important}
.type10 .label{font-size:var(--t-labels)!important}
.type10 .pgtitle{font-size:var(--t-pageTitle)!important}
.type10 .section .sec-title,.type10.st-larger .section .sec-title,.type10 .wlane-title{font-size:var(--t-h2)!important}
.type10 .proj h3,.type10 .plist .proj h3,.type10 .agc h3,.type10 .agc.root h3,.type10 .ag-layers .agtier .agc h3,
.type10 .wtitle,.type10 .wtitle a,.type10 .agep .ep-en,.type10 .case h3,.type10 .method h3,.type10 .astep h2{font-size:var(--t-h3)!important}
.type10 .psub,.type10 .agblurb,.type10 .wintro,.type10 .agep .ep-grc,.type10 .cardaside,.type10 .agwhat,
.type10 .wstart .wlt{font-size:var(--t-lead)!important}
.type10 .agsample p,.type10 .nowep p,.type10 .agq li,.type10 .agsq,.type10 .qgarden .qtext,.type10 .bluf,
.type10 .ag-layers .agq li{font-size:var(--t-callout)!important}
.type10 .prose p,.type10 .proj .prose p,.type10 .nowline,.type10 .nowblock .nowline,.type10 .nowblock .nowline.sub,
.type10 .agn li,.type10 .agsp b,.type10 .agsp span,.type10 .zonenote,.type10 .lpop:not(.photos),.type10 .lpop .lnk,
.type10 .lsee,.type10 .rl p,.type10 .sblock p,.type10 .proof .pbody p,.type10 .mbody p,.type10 .wblurb,
.type10 .proof .pt,.type10 .wstart .wwhat,.type10 .astep p{font-size:var(--t-body)!important}
.type10 .pagenav a,.type10 .back,.type10 .wordmark,.type10 #foot .lnk,.type10 #foot > span,.type10 .lnk,
.type10 .agtoc a,.type10 .agmap .agnode,.type10 .agrel,.type10 .qcite,.type10 .apiece figcaption,
.type10 .headshot .credit,.type10 .agsp h2,.type10 .qgh,.type10 .wthemes,.type10 .agtopic,.type10 .wmeta,
.type10 .alink,.type10 .wessay{font-size:var(--t-small)!important}
.type10 .cx-text,.type10 .cx-caret,.type10 .badge,.type10 .badge.soon,.type10 .amore,.type10 .nowlab,.type10 .sslabel,
.type10 .agsample cite,.type10 .nowep cite,.type10 .ep-cite,.type10 .lrow figcaption,.type10 .agmap .agml,.type10 .aslabel,
.type10 .ptag,.type10 .wstart .wn,.type10 .rl h4,.type10 .sblock h4,.type10 .k,.type10 .agaxis,.type10 .rmeta,
.type10 .apiece figcaption span,.type10 .agsrc cite{font-size:var(--t-micro)!important}
.type10 .ph,.type10 .ph.psub,.type10 .nowline.ph{font-size:inherit!important;line-height:inherit}
.type10 .markers-pill .amore,.markers-pill.type10 .amore{font-size:var(--t-small)!important}
/* every home section: heading outside, content inside the box (no title inside) */
.boxes-tinted .section .proj > .psub:first-child,.section .proj > .ph:first-child{margin-top:0}
/* labels with nothing behind them: plain text, same look, no hover at all */
.label-static{font-family:var(--display);font-weight:var(--owt);font-size:var(--t-labels,var(--osize));letter-spacing:var(--track);
  line-height:1.14;color:var(--grey);display:inline-block;padding:2px 0;cursor:default}
.others li:last-child .label-static{font-style:italic}
/* Operating Work: its remaining text joins the scale too */
.type10 .work .sec-title,.type10 .wstart .sec-title{font-size:var(--t-h2)!important}
.type10 .story summary,.type10 .story summary span{font-size:var(--t-small)!important}
.type10 .wflag{font-size:var(--t-small)!important}

/* ===== 24 Sept: Agora legibility, italic subtitles, spacing tokens ===== */
/* Agora questions: real bullets, so they read as a list apart from the subtitle */
.agq{list-style:disc;padding-left:1.25em}
.agq li{padding-left:.2em}
.agq li::marker{color:var(--accent)}
/* connections: a dot between each, so "influences Values · needs Communication" reads as two */
.agrel span + span::before{content:"·";color:var(--muted);margin-right:10px}
/* italic subtitles (Style → Type → Subtitles) */
.sub-italic .psub,.sub-italic .agblurb,.sub-italic .agwhat,.sub-italic .cardaside{font-style:italic}
/* spacing tokens (Style → Layout → Spacing) */
.section{padding-top:var(--sp-sectionGap,80px)!important}
.boxes-tinted .section{padding-top:var(--sp-sectionGap,80px)!important}
.boxes-tinted .proj,.boxes-tinted .nowblock{padding:var(--sp-boxPadding,24px) calc(var(--sp-boxPadding,24px) + 2px)!important}
.colors6 .agsp{padding:calc(var(--sp-boxPadding,24px) * .8) var(--sp-boxPadding,24px)!important}
.plist,.boxes-tinted .plist{gap:var(--sp-itemGap,14px)!important}
.agrel{gap:6px var(--sp-itemGap,14px)!important}
.agq li{margin-bottom:calc(var(--sp-itemGap,14px) * .6)!important}
.nowblock .nowep{margin-bottom:var(--sp-blockGap,18px)!important}
.proj .psub,.proj .prose,.proj .cardlinks,.proj .agsample,.proj .ssbox,.proj .athumbs,
.agc .agq,.agc .agn,.agc .agsrc,.agc .agrel{margin-top:calc(var(--sp-blockGap,18px) * .75)!important}
.nowblock{row-gap:calc(var(--sp-blockGap,18px) * .5)!important}

/* ===== Labels on phones (24 Sept): tap only, notes in place, one label active ===== */
/* plain-text labels fade with the rest (they stayed dark before: looked "highlighted together") */
.stack:has(.label:hover,.primary.hasnote:hover,[aria-expanded="true"]) .label-static{opacity:.32}
.lpop.inflow{position:static!important;transform:none!important;display:flex;flex-wrap:wrap;gap:4px 14px;
  margin:2px 0 10px;white-space:normal!important;max-width:none}
.touch .lpop.inflow[hidden],.touch .lpop.under[hidden]{display:none!important}
/* phones (touch): hover is ignored completely; only the OPEN label matters.
   Nothing open → nothing fades. A label open → it stays dark, everything else fades. */
html.touch body .stack:not(:has([aria-expanded="true"])) :is(.label,.primary,.label-static){opacity:1!important}
html.touch body .stack:has([aria-expanded="true"]) :is(.label,.primary,.label-static):not([aria-expanded="true"]){opacity:.32!important}
html.touch body .stack [aria-expanded="true"]:is(.label,.primary){opacity:1!important;color:var(--ink)!important}
html.touch body .stack .label:not([aria-expanded="true"]){color:var(--grey)}
/* phones: the animals open directly on tap, smaller */
.touch .lpop:has(.lsee){display:none!important}
@media (max-width:640px){ .lrow figure{flex-basis:104px} .lrow img{width:104px;height:130px} }
/* phones: the open note is fully visible, and its link is underlined like normal text */
.lpop.inflow:not([hidden]){opacity:1!important}
.lpop.inflow .lnk{display:inline;border-bottom:0!important;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* the photo row scrolls inside its own width; it must never widen the page (phones) */
.has-shot.shot-beside{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:640px){ .has-shot.shot-beside{grid-template-columns:minmax(0,1fr)} }
.stack,.ltray,.lrow{min-width:0;max-width:100%}

/* header names underlined (24 Sept); the page you're on is bolder + ink */
.colors6 .pagenav a,.pagenav a{text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:5px!important;text-decoration-color:currentColor!important}
.colors6 .pagenav a.here,.pagenav a.here{text-decoration-thickness:2px!important}
.rl:has(section:only-child){grid-template-columns:1fr}

/* 24 Sept: themes are small tags, clearly apart from the text */
.type10 .wthemes{font-size:var(--t-micro)!important;letter-spacing:.04em;color:var(--muted);margin-top:14px;line-height:1.6}
.type10 .wthemes .k{margin-right:10px}
/* 24 Sept: Now and Previously read the same (weight, colour) and use the box's full width */
.nowblock .nowline,.nowblock .nowline.sub{max-width:none;font-weight:400;color:var(--ink);text-wrap:wrap;line-height:1.55!important}
.nowblock .nowqs li{line-height:1.55}
/* 24 Sept: the Now questions are a real list, italic, under the main line */
.nowblock .nowqs{margin:3px 0 12px;padding:0 0 0 1.15em;list-style:disc;color:var(--grey)}
.nowblock .nowqs li{margin:3px 0;padding-left:.2em}
.nowblock .nowqs li::marker{color:var(--muted);font-style:normal}
.type10 .nowblock .nowqs li{font-size:var(--t-small)!important;margin:1px 0;line-height:1.45}
/* 27 Sept (Emily): questions quieter than the Now line. Lighter = the grey
   mixed toward the page colour (no new colour; follows the palette). */
.nowblock .nowqs{color:color-mix(in srgb,var(--grey) 70%,var(--paper))!important}
/* 24 Sept: Mary Oliver a touch bigger than the callout role */
.type10 .nowblock .nowep p{font-size:calc(var(--t-callout) * 1.12)!important}
/* 24 Sept: more room between Mary Oliver and Now */
.nowblock .nowep{margin-bottom:calc(var(--sp-blockGap,18px) * 2)!important}
/* 24 Sept: italics use Geist's REAL italic (loaded in theme.js PRESETS.geist),
   which leans less than the browser's fake slant. Don't skew text: multi-line
   blocks turn into a staircase. */
/* 24 Sept: themes are clearly quieter than the text they sit under */
.type10 .proof .pbody p.wthemes,.type10 .case p.wthemes,.type10 .method p.wthemes,.type10 .wthemes{
  font-size:var(--t-micro)!important;color:var(--muted)!important;letter-spacing:.03em;line-height:1.6;margin-top:18px}
.type10 .wthemes .k{color:var(--muted)}
/* 24 Sept: a card that starts with its subtitle (no title) starts at the
   same height as a titled one: the spacing-token gap only goes BETWEEN blocks */
.proj > :first-child{margin-top:0!important}

/* 27 Sept: story formatting from Emily's Google Docs */
.reading-body .rindent{margin-left:2.2em}
.reading-body .rbreak{text-align:center;letter-spacing:.2em;color:var(--muted);margin:1.6em 0}
.reading-body .rhead{font-style:italic;font-weight:600;font-size:inherit;margin:1.8em 0 .8em}
.reading-body .rhead:first-child{margin-top:0}