/* Sacred Beyond Symptoms */
:root{
  --g0:#2A1C10; --g1:#332318; --g2:#3E2C1E; --g3:#4A3726; --g4:#5A452F;
  --ink:#F8F1E4; --ink2:#E2D3BC; --mute:#B8A486; --faint:#8D7A61;
  --gold:#DFB15A; --gold-hi:#F6D693; --gold-dim:#9A7935;
  --jade:#6ACCA6; --terra:#E68C5E; --sky:#88BADB; --rose:#E396A6;
  --violet:#B9A1E4; --amber:#EDBE5E; --leaf:#9FD07A;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --maxw:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--g0);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.6rem)}
.tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim)}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,4.4vw,2.9rem);
  margin:.4rem 0 .6rem;letter-spacing:-.015em;line-height:1.12}
h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:0 0 .4rem}
p{margin:0 0 1rem;max-width:66ch;color:var(--ink2)}
a{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
svg :focus,svg :focus-visible{outline:none!important}
.pin:focus-visible .ring{stroke:var(--gold-hi);stroke-width:.0075}
.pin:focus-visible .halo{fill-opacity:.28}
.pin:focus-visible .pinLbl{fill:var(--gold-hi)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── ground dial ───────────────────────────────────── */
.dial{position:fixed;right:clamp(.6rem,2vw,1.4rem);bottom:clamp(.6rem,2vw,1.4rem);z-index:60;
  display:flex;align-items:center;gap:.55rem;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);
  border:1px solid var(--g3);border-radius:999px;padding:.4rem .75rem}
.dial label{font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dial input{width:104px;-webkit-appearance:none;appearance:none;background:transparent;height:16px;cursor:pointer;margin:0}
.dial input::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,#140D06,#1C1309,#2A1C10,#3A2818,#4D3621)}
.dial input::-moz-range-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,#140D06,#1C1309,#2A1C10,#3A2818,#4D3621)}
.dial input::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--gold-hi);border:1.5px solid rgba(0,0,0,.5);margin-top:-3.5px}
.dial input::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold-hi);border:1.5px solid rgba(0,0,0,.5)}

/* ── hero ──────────────────────────────────────────── */
#hero{position:relative;height:200vh}
.heroSticky{position:sticky;top:0;height:100vh;overflow:hidden;
  background:radial-gradient(130% 100% at 50% 34%,var(--g2) 0%,var(--g1) 44%,var(--g0) 100%)}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.heroTag{position:absolute;left:0;right:0;top:clamp(1.4rem,4vh,2.4rem);text-align:center;z-index:3}
.scrollCue{position:absolute;left:0;right:0;bottom:2.1rem;text-align:center;z-index:3;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
  transition:opacity .5s}
.scrollCue span{display:block;margin:.5rem auto 0;width:1px;height:26px;
  background:linear-gradient(var(--gold-dim),transparent)}

/* the line that arrives as the title disperses */
.creed{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:min(92vw,50ch);text-align:center;opacity:0;pointer-events:none}
.creed p{font-family:var(--serif);font-weight:300;font-size:clamp(1.25rem,3.3vw,2rem);
  line-height:1.34;margin:0;color:var(--ink);max-width:none;text-wrap:balance}
.creed em{font-style:normal;color:var(--gold-hi)}

/* ── sections ──────────────────────────────────────── */
.sect{position:relative;padding:clamp(4rem,11vh,8rem) 0}
.sectHead{margin-bottom:2.2rem}
.sectHead p{font-size:1.02rem}
.rule{height:1px;max-width:var(--maxw);margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--gold-dim) 18%,var(--gold) 50%,var(--gold-dim) 82%,transparent);
  opacity:.5}

/* ── prophecy banner ───────────────────────────────── */
.banner{position:relative;margin:0 auto;max-width:860px;padding:clamp(1.6rem,4vw,2.8rem) clamp(1.2rem,4vw,3rem);
  background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(0,0,0,.14));
  border-top:1px solid var(--g4);border-bottom:1px solid var(--g4);
  touch-action:pan-y;cursor:grab;overflow:hidden}
.banner:active{cursor:grabbing}
.banner::before,.banner::after{content:"";position:absolute;top:0;bottom:0;width:34px;pointer-events:none}
.banner::before{left:0;background:linear-gradient(90deg,var(--g0),transparent)}
.banner::after{right:0;background:linear-gradient(270deg,var(--g0),transparent)}
.bannerInner{position:relative;min-height:12.5rem;display:flex;flex-direction:column;justify-content:center}
.quote{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,2.5vw,1.72rem);
  line-height:1.5;text-align:center;color:var(--ink);margin:0}
.quote .w{display:inline-block;white-space:pre;animation:wave 4.6s ease-in-out infinite;will-change:transform}
@keyframes wave{
  0%,100%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-3.5px) rotate(-.35deg)}
  50%{transform:translateY(0) rotate(0)}
  75%{transform:translateY(3.5px) rotate(.35deg)}
}
.quote.sum{font-size:clamp(1rem,1.9vw,1.24rem);color:var(--ink2);line-height:1.62;max-width:58ch;margin:0 auto}
.qmark{display:block;text-align:center;font-family:var(--serif);font-size:2.4rem;line-height:0;
  color:var(--gold-dim);opacity:.55;margin-bottom:1.1rem;height:.6rem}
.attr{margin-top:1.4rem;text-align:center}
.attr .people{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi)}
.attr .place{display:block;font-size:.8rem;color:var(--mute);margin-top:.25rem}
.gradeRow{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:.7rem;flex-wrap:wrap}
.grade{font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .5rem;border:1px solid currentColor;color:var(--gold)}
.grade.reported{border-style:dashed}
.grade.contested{border-style:dotted}
.grade.summary{color:var(--mute)}
.srcBtn{background:none;border:none;color:var(--faint);font-family:var(--mono);font-size:.54rem;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:.2rem .3rem;text-decoration:underline;
  text-underline-offset:3px}
.srcBtn:hover{color:var(--gold-hi)}
.src{max-width:62ch;margin:.9rem auto 0;font-size:.84rem;color:var(--mute);text-align:center;
  border-top:1px solid var(--g3);padding-top:.8rem}
.src[hidden]{display:none}
.dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.6rem}
.dots button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--gold-dim);transition:.25s}
.dots button[aria-current="true"]{background:var(--gold-hi);border-color:var(--gold-hi);transform:scale(1.18)}
.dots button:hover{border-color:var(--gold-hi)}
.fade{animation:fadeIn .75s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ── map ───────────────────────────────────────────── */
.mapBox{position:relative;border:1px solid var(--g3);background:
  radial-gradient(120% 130% at 50% 0%,var(--g2),var(--g1) 70%)}
.legend,.legNote,#panelCosmos,#panelSacra{width:min(calc(100vw - 2.2rem),1640px);margin-left:50%;transform:translateX(-50%)}
#map{display:block;width:100%;height:auto}
.land{fill:var(--g4);fill-opacity:.52;stroke:var(--g4);stroke-width:.0022;stroke-linejoin:round}
.grat{fill:none;stroke:var(--gold-dim);stroke-width:.0014;opacity:.28}
.equ{fill:none;stroke:var(--gold-dim);stroke-width:.0022;opacity:.5}
.pin{cursor:pointer}
.pin .halo{fill:var(--gold);fill-opacity:0;transition:fill-opacity .25s}
.pin:hover .halo,.pin.on .halo{fill-opacity:.17}
.pin .ring{fill:none;stroke:var(--gold);stroke-width:.0028}
.pin .core{fill:var(--gold-hi)}
.pin.on .ring,.pin:hover .ring{stroke:var(--gold-hi)}
.pinLbl{font-family:var(--mono);font-size:.060px;letter-spacing:.005px;fill:var(--ink);
  text-transform:uppercase;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.55);stroke-width:.016}
.pin:hover .pinLbl,.pin.on .pinLbl{fill:var(--gold-hi)}
.flyline{fill:none;stroke:var(--gold);stroke-width:.0022;opacity:.34;stroke-dasharray:.012 .012}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--g3);
  border:1px solid var(--g3);border-top:none}
@media(max-width:700px){.legend{grid-template-columns:1fr}}
.legend > div{background:var(--g1);padding:1.1rem 1.3rem}
.legend h4{margin:0 0 .6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}
.legend ul{margin:0;padding-left:1.05rem;font-size:.88rem;color:var(--ink2)}
.legend li{margin-bottom:.3rem}
.legNote{max-width:none;font-size:.78rem;color:var(--faint);padding:.8rem 1.3rem;border:1px solid var(--g3);border-top:none;background:var(--g1)}

/* ── quiz ──────────────────────────────────────────── */
.quizWrap{margin-top:2rem}
.quizBar{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between;
  padding:.8rem 1rem;background:var(--g1);border:1px solid var(--g3);
  position:sticky;top:0;z-index:25}
.count{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--mute)}
.count b{color:var(--gold-hi)}
.btn{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.55rem 1rem;border:1px solid var(--gold-dim);background:transparent;color:var(--gold-hi);cursor:pointer;transition:.2s}
.btn:hover:not(:disabled){background:var(--gold);color:#241A10;border-color:var(--gold)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{border-color:var(--g4);color:var(--mute)}
.btn.ghost:hover{background:var(--g3);color:var(--ink);border-color:var(--g4)}
.tableScroll{overflow-x:auto;border:1px solid var(--g3);border-top:none;-webkit-overflow-scrolling:touch}
table.bingo{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:.8rem}
table.bingo th,table.bingo td{padding:.5rem .6rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--g2);border-right:1px solid var(--g2)}
table.bingo thead th{position:sticky;top:0;background:var(--g2);z-index:5;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  font-weight:500;line-height:1.35}
table.bingo tbody th{position:sticky;left:0;background:var(--g1);z-index:4;min-width:148px;
  font-family:var(--sans);font-size:.76rem;font-weight:600;color:var(--ink)}
table.bingo tbody th small{display:block;font-weight:400;color:var(--faint);font-size:.66rem;margin-top:.15rem}
.cell{position:relative;cursor:pointer;color:var(--ink2);transition:background .18s,color .18s;
  -webkit-user-select:none;user-select:none}
.cell:hover{background:rgba(223,177,90,.07);color:var(--ink)}
.cell .txt{position:relative;z-index:2;display:inline-block;padding:.1rem .25rem}
.cell.on{color:var(--ink);background:rgba(223,177,90,.055)}
.cell.on .txt{color:var(--ink);font-weight:500}
.cell .ink{position:absolute;inset:3px;border:2px solid var(--gold);
  border-radius:46% 54% 51% 49%/53% 46% 54% 47%;
  background:rgba(223,177,90,.10);opacity:0;transform:scale(.62) rotate(-7deg);
  transition:opacity .2s,transform .32s cubic-bezier(.3,1.55,.5,1);z-index:1;pointer-events:none}
.cell.on .ink{opacity:1;transform:scale(1) rotate(-1.6deg)}
.cell:focus-visible{outline-offset:-2px}

/* results */
.result{margin-top:1.6rem;border:1px solid var(--g3);background:var(--g1)}
.result[hidden]{display:none}
.resHead{padding:1.5rem clamp(1.1rem,3vw,2rem);border-bottom:1px solid var(--g3);
  background:linear-gradient(160deg,rgba(223,177,90,.1),transparent)}
.resHead .tag{color:var(--gold)}
.resHead h3{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:300;margin:.3rem 0 .5rem;color:var(--gold-hi)}
.resHead .blurb{font-family:var(--serif);font-size:1.12rem;color:var(--ink);margin:0;max-width:60ch}
.resBody{padding:1.5rem clamp(1.1rem,3vw,2rem)}
.resBody p{font-size:.95rem}
.sitting{border-left:2px solid var(--gold);padding:.6rem 0 .6rem 1rem;margin:1.2rem 0 0;
  color:var(--ink);font-family:var(--serif);font-size:1.05rem;max-width:60ch}
.bars{margin:1.6rem 0 0;display:grid;gap:.5rem}
.bar{display:grid;grid-template-columns:minmax(132px,210px) 1fr auto;gap:.8rem;align-items:center;font-size:.82rem}
.bar .nm{color:var(--ink2);text-align:right}
.bar .trk{height:9px;background:var(--g2);position:relative;overflow:hidden}
.bar .fil{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold);transition:width .9s cubic-bezier(.2,.8,.3,1)}
.bar .vl{font-family:var(--mono);font-size:.68rem;color:var(--mute);min-width:3.2ch;text-align:right}
.bar.top .nm{color:var(--ink)}
@media(max-width:620px){.bar{grid-template-columns:1fr auto;gap:.3rem .6rem}
  .bar .nm{text-align:left;grid-column:1/-1}.bar .trk{grid-column:1}}
.tension{margin-top:1.8rem;border-top:1px solid var(--g3);padding-top:1.2rem}
.tension h4{margin:0 0 .6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.tension ul{margin:0;padding-left:1.1rem;font-size:.88rem;color:var(--ink2)}
.tension li{margin-bottom:.55rem}
.tension b{color:var(--ink);font-weight:600}
.topCos{margin-top:1.6rem;border-top:1px solid var(--g3);padding-top:1.2rem}
.topCos .gloss{font-size:.92rem;color:var(--ink2);max-width:62ch}
.topCos .says{font-family:var(--serif);font-style:italic;color:var(--gold-hi);margin-top:.6rem;font-size:1.02rem}

footer{padding:3.5rem 0 4.5rem;border-top:1px solid var(--g3);margin-top:4rem}
footer p{font-size:.84rem;color:var(--faint);max-width:68ch}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .quote .w{animation:none}
  .fade{animation:none}
  *{transition-duration:.01ms!important}
}

/* ── Metatron's Cube ───────────────────────────────── */
.cubeWrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:1.6rem;
  align-items:start;margin-top:1.6rem}
@media(max-width:860px){.cubeWrap{grid-template-columns:1fr}}
.cubeStage{position:relative;aspect-ratio:1;background:
  radial-gradient(70% 70% at 50% 46%,var(--g2),var(--g1) 72%,var(--g0) 100%);
  border:1px solid var(--g3)}
#cube{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
#cube:active{cursor:grabbing}
#cube:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cubeSide{display:flex;flex-direction:column;gap:1rem}
.cubePanel{background:var(--g1);border:1px solid var(--g3);padding:1.2rem 1.3rem;min-height:14rem}
.cubePanel h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;margin:.45rem 0 .6rem;color:var(--gold-hi)}
.cubePanel p{margin:0;font-size:.93rem;color:var(--ink2);max-width:none}
.kind{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.22rem .5rem;border:1px solid currentColor;display:inline-block}
.kind.geometry{color:var(--jade)}
.kind.interpretation{color:var(--amber);border-style:dashed}
.kind.thesis{color:var(--gold)}
.cubeIndex{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .5rem;background:transparent;cursor:pointer;transition:.2s;
  border:1px solid var(--g4);color:var(--mute);text-align:left}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.chip[aria-current="true"]{border-color:var(--gold-hi);color:var(--gold-hi);background:var(--g2)}
.chip.geometry[aria-current="true"]{border-color:var(--jade);color:var(--jade)}
.chip.interpretation[aria-current="true"]{border-color:var(--amber);color:var(--amber)}
#cubeClear{align-self:flex-start}
.cubeNote{margin-top:1.8rem;font-size:.83rem;color:var(--faint);max-width:78ch;
  border-top:1px solid var(--g3);padding-top:1rem}
.cubeNote a{color:var(--mute);text-underline-offset:3px}
.cubeNote a:hover{color:var(--gold-hi)}

/* ── map modes ─────────────────────────────────────── */
.modeBar{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--g3);margin-top:1.4rem;width:fit-content;max-width:100%}
.modeBtn{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.65rem 1.1rem;background:transparent;border:none;border-right:1px solid var(--g3);
  color:var(--mute);cursor:pointer;transition:.2s}
.modeBtn:last-child{border-right:none}
.modeBtn:hover{color:var(--ink);background:var(--g2)}
.modeBtn[aria-selected="true"]{background:var(--gold);color:var(--g0);font-weight:500}
.modeIntro{margin:1rem 0 1.4rem;font-size:.93rem;color:var(--mute);max-width:72ch}
#bannerSlot[hidden]{display:none}
.mapBox.swap #map{animation:mapIn .5s ease both}
@keyframes mapIn{from{opacity:.25}to{opacity:1}}
.pin{--pin:var(--gold)}
.pin .halo{fill:var(--pin)} .pin .ring{stroke:var(--pin)} .pin .core{fill:var(--pin)}
.pin .leader{fill:none;stroke:var(--pin);stroke-width:.0018;opacity:.45}
.pin.sm .pinLbl{font-size:.040px;letter-spacing:0;fill:var(--ink)}
.pin.sm .ring{stroke-width:.0034}
#panelProphecy[hidden],#panelCosmos[hidden],#panelSacra[hidden]{display:none}

/* ── cosmology carousel ────────────────────────────── */
.railBar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem}
.railNav{display:flex;gap:.4rem}
.railNav .btn{padding:.4rem .8rem;font-size:.8rem;letter-spacing:0}
.cosRail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.9rem .1rem 1.1rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cosCard{flex:0 0 min(330px,80vw);scroll-snap-align:start;background:var(--g1);
  border:1px solid var(--g3);border-top:3px solid var(--hue);padding:1.1rem 1.2rem;transition:.25s}
.cosCard.on{border-color:var(--hue);background:var(--g2)}
.cosCard h3{font-family:var(--serif);font-weight:400;font-size:1.28rem;margin:.35rem 0 .2rem;color:var(--hue)}
.cosCard .where{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .7rem}
.cosCard .gloss{font-size:.86rem;color:var(--ink2);margin:0 0 .7rem}
.cosCard .says{font-family:var(--serif);font-style:italic;color:var(--gold-hi);font-size:.98rem;margin:0 0 .7rem}
.cosCard .pnote{font-size:.78rem;color:var(--faint);border-left:2px solid var(--g4);padding-left:.7rem;margin:0 0 .8rem}
.cosCard .ans{list-style:none;margin:0;padding:0;border-top:1px solid var(--g3);padding-top:.6rem}
.cosCard .ans li{margin-bottom:.45rem;font-size:.8rem}
.cosCard .ans span{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.cosCard .ans b{font-weight:400;color:var(--ink2)}
.cmpBtn{margin-top:.3rem}
.cmpBox{margin-top:1rem;overflow-x:auto;border:1px solid var(--g3)}
.cmpBox[hidden]{display:none}
table.cmp{border-collapse:collapse;width:100%;min-width:900px;font-size:.78rem}
table.cmp th,table.cmp td{padding:.5rem .6rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--g2);border-right:1px solid var(--g2);color:var(--ink2)}
table.cmp thead th{background:var(--g2);font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);font-weight:500}
table.cmp tbody th{background:var(--g1);font-size:.76rem;font-weight:600;min-width:150px}

/* ── sacraments table ──────────────────────────────── */
.sacLegend{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:1.4rem 0 1rem}
.sacLegend span{display:flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sacLegend i{width:9px;height:9px;border-radius:50%}
.sacTable{border:1px solid var(--g3)}
.sacEra{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);background:var(--g2);padding:.55rem .9rem;border-bottom:1px solid var(--g3)}
.sacRow{border-bottom:1px solid var(--g2)}
.sacRow:last-child{border-bottom:none}
.sacRow.on{background:rgba(223,177,90,.055)}
.sacHead{display:grid;grid-template-columns:2.2rem minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1.6fr);
  gap:.8rem;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;
  padding:.65rem .9rem;color:var(--ink2);font-family:var(--sans);font-size:.82rem;transition:.18s}
.sacHead:hover{background:rgba(223,177,90,.07);color:var(--ink)}
.sacHead .num{font-family:var(--mono);font-size:.68rem;color:var(--gold-dim)}
.sacHead .nm{color:var(--ink);font-weight:500}
.sacHead .nm small{display:block;font-weight:400;color:var(--faint);font-size:.72rem;margin-top:.1rem}
.sacHead .dt{font-family:var(--mono);font-size:.68rem;color:var(--mute)}
.sacHead[aria-expanded="true"] .num{color:var(--gold-hi)}
@media(max-width:780px){.sacHead{grid-template-columns:1.8rem 1fr;gap:.5rem}
  .sacHead .dt,.sacHead .sx{grid-column:2}}
.sacDet{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--g3);border-top:1px solid var(--g3)}
.sacDet[hidden]{display:none}
.sacDet > div{background:var(--g1);padding:.8rem .9rem}
.sacDet .full{grid-column:1/-1}
.sacDet .k{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-dim);margin-bottom:.3rem}
.sacDet p{margin:0;font-size:.82rem;color:var(--ink2);max-width:none}

/* ── dominator / partnership axis ──────────────────── */
.axisWrap{width:min(calc(100vw - 2.2rem),1640px);margin-left:50%;transform:translateX(-50%)}
#axisStrip{border:1px solid var(--g3);background:
  linear-gradient(90deg,rgba(224,132,86,.10),transparent 36%,transparent 64%,rgba(106,204,166,.10));
  overflow-x:auto;-webkit-overflow-scrolling:touch}
#axisSvg{display:block;width:100%;min-width:1100px;height:auto;cursor:ew-resize;touch-action:pan-y}
#axisSvg:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.axLine{stroke:var(--g4);stroke-width:2}
.axTick{stroke:var(--g4);stroke-width:1.4;opacity:.7}
.axEnd{font-family:var(--mono);font-size:15px;letter-spacing:.22em}
.axEnd.dom{fill:var(--terra)} .axEnd.par{fill:var(--jade)}
.axPlay{stroke:var(--gold-hi);stroke-width:1.6;opacity:.75;stroke-dasharray:5 6;
  transition:none}
.axItem{cursor:pointer}
.axItem .axStem{stroke:var(--g4);stroke-width:1.2;opacity:.6}
.axItem .axDot{fill:var(--g4);stroke:none;transition:.25s}
.axItem .axArt path{fill:none;stroke:var(--hue);stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round;opacity:.5;transition:opacity .25s}
.axItem .axArt{transition:transform .32s cubic-bezier(.3,1.4,.5,1)}
.axItem .axName{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  fill:var(--faint);text-transform:uppercase;transition:.25s}
.axItem:hover .axArt path{opacity:.85}
.axItem:hover .axName{fill:var(--ink2)}
.axItem.on .axArt path{opacity:1;stroke-width:3}
.axItem.on .axName{fill:var(--ink);font-weight:500}
.axItem.on .axDot{fill:var(--gold-hi);r:6}
.axItem.on .axStem{stroke:var(--gold);opacity:1}
.axCard{border:1px solid var(--g3);border-top:none;background:var(--g1);padding:1.4rem clamp(1.1rem,3vw,2rem)}
.axCard.pop{animation:fadeIn .4s ease both}
.axCardHead{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.5rem}
.axPos{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.grade.thesis{color:var(--gold);border-style:dashed}
.axCard h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3vw,1.95rem);margin:.1rem 0 .15rem}
.axSub{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0 0 1rem}
.axClaim{font-family:var(--serif);font-size:1.08rem;color:var(--ink);max-width:62ch;margin-bottom:.9rem}
.axHist{font-size:.92rem;max-width:66ch}
.axTension{font-size:.88rem;color:var(--mute);border-left:2px solid var(--gold-dim);
  padding-left:.9rem;max-width:62ch;margin-bottom:.6rem}
.axPair{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:1px solid var(--gold-dim);color:var(--gold-hi);
  padding:.45rem .8rem;cursor:pointer;transition:.2s;margin-top:.4rem}
.axPair:hover{background:var(--gold);color:var(--g0);border-color:var(--gold)}
.axCite{margin-top:1.1rem;font-size:.82rem;color:var(--faint);max-width:80ch}
.axCite em{color:var(--mute)}
.axCite strong{color:var(--mute);font-weight:600}
.axArrow{fill:none;stroke:var(--terra);stroke-width:1.4;opacity:.6;stroke-linecap:round}
.axArrow.par{stroke:var(--jade)}
.axGnosis{font-size:.84rem;color:var(--gold-hi);border-left:2px solid var(--gold);
  padding-left:.9rem;max-width:62ch;margin:0 0 1rem}
.axGnosis em{font-style:italic}

/* ── section opener ────────────────────────────────── */
h2.big{font-size:clamp(2.5rem,6.4vw,4.2rem);font-weight:200;line-height:1.02;
  letter-spacing:-.025em;margin:.5rem 0 1.1rem}
.sectHead .lede{font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,2.2vw,1.42rem);
  line-height:1.5;color:var(--ink);max-width:60ch;margin-bottom:1.1rem}

/* ── mode intro ────────────────────────────────────── */
.modeIntro{margin:1.2rem 0 1.6rem;max-width:none}
.modeIntro p{font-size:.95rem;color:var(--ink2);max-width:74ch;margin:0 0 .7rem}
.modeIntro p:last-child{margin-bottom:0}
.modeIntro p.small{font-size:.84rem;color:var(--mute);max-width:78ch}
.modeIntro strong{color:var(--ink)}
.mapNote{margin-top:2.2rem;font-size:.86rem;color:var(--mute)}

/* ── map beside its quotes ─────────────────────────── */
.mapRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:1px;
  background:var(--g3);border:1px solid var(--g3);
  width:min(calc(100vw - 2.2rem),1640px);margin-left:50%;transform:translateX(-50%)}
.mapRow.solo{grid-template-columns:1fr}
@media(max-width:900px){.mapRow{grid-template-columns:1fr}}
.mapRow .mapBox{border:none;width:auto;margin:0;transform:none}
.mapRow #bannerSlot{background:var(--g1);display:flex;flex-direction:column;min-width:0}
.mapRow #bannerSlot[hidden]{display:none}
.mapRow .banner{flex:1;max-width:none;border:none;padding:1.5rem 1.4rem 1rem;
  overflow-y:auto;background:linear-gradient(170deg,rgba(255,255,255,.04),rgba(0,0,0,.12))}
.mapRow .banner::before,.mapRow .banner::after{display:none}
.mapRow .bannerInner{min-height:0}
.mapRow .quote{font-size:clamp(1.02rem,1.25vw,1.26rem);line-height:1.46}
.mapRow .quote.sum{font-size:.93rem;line-height:1.56;max-width:none}
.mapRow .qmark{font-size:2rem;margin-bottom:.9rem}
.mapRow .attr{margin-top:1.1rem}
.mapRow .src{font-size:.8rem;text-align:left;max-width:none}
.mapRow .dots{margin:0 0 1.1rem}
.mapRow .quote.sum{text-align:left}
.mapRow .src{text-align:left}

/* ── centred typography ────────────────────────────────────────────
   Prose is centred throughout. Tabular things stay left-aligned,
   because centring a table destroys the one thing a table is for. */
.sectHead,.sectHead p,.sectHead .lede,
.modeIntro,.modeIntro p,
.mapNote,.legNote,.axCite,.cubeNote,
.cosCard,.axCard,.cubePanel,
.resHead,.resBody > p,.topCos,.tension,
.axisWrap > .sectHead,
footer p,footer{text-align:center}

.sectHead p,.sectHead .lede,.modeIntro p,.mapNote,.axCite,
.cubeNote,.resBody > p,.topCos .gloss,.axClaim,.axHist,.axSub,
footer p,.cosCard .gloss,.cubePanel p{margin-left:auto;margin-right:auto}
/* this one IS the full-bleed panel; keep its offset and inset the text instead */
.legNote{margin-left:50%;margin-right:0;padding:.95rem clamp(1rem,20vw,24rem)}

/* pull-quotes: a rule above rather than beside, so centring reads */
.sitting,.axTension,.axGnosis,.cosCard .pnote{
  border-left:none;padding-left:0;padding-top:.8rem;
  border-top:1px solid var(--gold-dim);text-align:center;
  margin-left:auto;margin-right:auto}
.sitting{border-top-color:var(--gold)}

/* lists read as centred lines, without orphaned bullets */
.legend ul,.tension ul,.cosCard .ans,.note ul{
  list-style:none;padding-left:0;text-align:center}
.legend ul li,.tension ul li{margin-bottom:.5rem}
.legend h4,.sacLegend{justify-content:center;text-align:center}
.sacLegend{justify-content:center}
.cosCard .ans li{text-align:center}

.railBar{justify-content:center;gap:1.2rem}
.quizBar{justify-content:center}
.modeBar{margin-left:auto;margin-right:auto}
.btns,.pills,.dots,.cubeIndex{justify-content:center}
#cubeClear{align-self:center}
.cmpBtn{display:block;margin-left:auto;margin-right:auto}

/* and the things that must not be centred */
table.bingo th,table.bingo td,table.cmp th,table.cmp td,
.sacHead,.sacDet p,.sacDet .k,.cosCard .ans b{text-align:left}
.bar .nm{text-align:right}
@media(max-width:620px){.bar .nm{text-align:center}}

/* ── reading size ──────────────────────────────────────────────────
   One lever for everything measured in rem, then the handful of
   things measured in px or SVG user units, bumped to match. */
html{font-size:18.5px}
body{font-size:1.05rem;line-height:1.68}

/* the smallest labels were the least readable, so they get a little extra */
.tag{font-size:.68rem}
.modeBtn{font-size:.68rem}
.grade,.srcBtn{font-size:.60rem}
.pill,.chip,.kind{font-size:.62rem}
.axSub{font-size:.66rem}
.axPos,.axPair{font-size:.63rem}
.sacEra,.sacLegend span{font-size:.63rem}
.sacDet .k{font-size:.60rem}
.cosCard .where{font-size:.64rem}
.cosCard .ans span{font-size:.60rem}
.dial label{font-size:.58rem}
.count{font-size:.74rem}
.btn{font-size:.68rem}
.resHead .tag,.tension h4,.note h2{letter-spacing:.14em}

/* tables carried the smallest type on the page */
table.bingo{font-size:.88rem;min-width:1020px}
table.bingo thead th{font-size:.64rem}
table.bingo tbody th{font-size:.84rem}
table.bingo tbody th small{font-size:.72rem}
table.cmp{font-size:.86rem;min-width:1020px}
table.cmp thead th{font-size:.62rem}
table.cmp tbody th{font-size:.84rem}
.sacHead{font-size:.90rem}
.sacHead .nm small{font-size:.78rem}
.sacHead .num,.sacHead .dt{font-size:.74rem}
.sacDet p{font-size:.88rem}

/* cards and notes */
.cosCard .gloss,.cosCard .ans li{font-size:.90rem}
.cosCard .says{font-size:1.06rem}
.cosCard .pnote{font-size:.84rem}
.axHist{font-size:1rem}
.axClaim{font-size:1.14rem}
.axGnosis,.axTension{font-size:.92rem}
.axCite{font-size:.90rem}
.mapNote,.legNote{font-size:.92rem}
.modeIntro p{font-size:1.02rem}
.modeIntro p.small{font-size:.92rem}
.legend ul{font-size:.95rem}
.cubePanel p{font-size:1rem}
.cubeNote{font-size:.90rem}
.resBody p{font-size:1.02rem}
.resHead .blurb{font-size:1.2rem}
.bar{font-size:.90rem}
.bar .vl{font-size:.76rem}
.tension ul,.tension p{font-size:.95rem}
.small{font-size:.90rem}
footer p{font-size:.92rem}

/* SVG text lives in user units, so it needs its own bump */
.pinLbl{font-size:.066px}
.pin.sm .pinLbl{font-size:.047px}
.axEnd{font-size:18px}
.axItem .axName{font-size:13px}
#axisSvg{min-width:1240px}
.axCardHead{justify-content:center}
.resHead,.topCos,.tension h4{text-align:center}

/* ── the two-axis plot ─────────────────────────────── */
.axesWrap{margin:1.8rem auto 2.4rem;max-width:1280px;text-align:center}
.axesHead h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3vw,2.1rem);
  margin:.35rem 0 .6rem}
.axesHead p{font-size:1rem;max-width:62ch;margin-left:auto;margin-right:auto}
.axesGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.4rem;
  align-items:start;margin-top:1.4rem;text-align:left}
@media(max-width:900px){.axesGrid{grid-template-columns:1fr}}
.axesStage{position:relative;aspect-ratio:1;background:
  radial-gradient(75% 75% at 50% 50%,var(--g2),var(--g1) 72%,var(--g0) 100%);
  border:1px solid var(--g3)}
#cosAxes{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:crosshair;touch-action:none;-webkit-tap-highlight-color:transparent}
#cosAxes:active{cursor:grabbing}
#cosAxes:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.axesSide{display:flex;flex-direction:column;gap:1rem}
.axesCard{background:var(--g1);border:1px solid var(--g3);padding:1.2rem 1.3rem;
  min-height:17rem;text-align:center}
.axesCard h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:.35rem 0 .6rem}
.axesCard .why{font-size:.95rem;color:var(--ink2);margin:0 0 .8rem}
.axesCard .says{font-family:var(--serif);font-style:italic;color:var(--gold-hi);
  font-size:1.05rem;margin:0}
.axQuad{border-bottom:1px solid var(--g3);padding-bottom:.9rem;margin-bottom:1rem}
.axQuad .qname{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.4rem}
.axQuad p{font-size:.88rem;color:var(--mute);margin:0}
.axesNote{margin-top:1.4rem;font-size:.92rem;color:var(--mute);max-width:74ch;
  margin-left:auto;margin-right:auto;border-top:1px solid var(--g3);padding-top:1rem}

/* ── the seven panes ───────────────────────────────── */
.panesWrap{width:min(calc(100vw - 2.2rem),1400px);margin-left:50%;transform:translateX(-50%)}
.paneBar{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin:1.4rem auto 1.6rem}
.paneBtn{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.6rem 1rem;background:transparent;border:1px solid var(--g3);color:var(--mute);
  cursor:pointer;transition:.2s}
.paneBtn:hover{color:var(--ink);border-color:var(--g4)}
.paneBtn[aria-selected="true"]{border-color:var(--hue);color:var(--hue);background:var(--g2)}
.paneGrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1px;
  background:var(--g3);border:1px solid var(--g3)}
@media(max-width:860px){.paneGrid{grid-template-columns:1fr}}
.paneStage{position:relative;background:radial-gradient(70% 70% at 50% 44%,var(--g2),var(--g1) 70%,var(--g0) 100%);
  aspect-ratio:1;min-height:320px}
#paneArt{position:absolute;inset:0;width:100%;height:100%;display:block}
.paneReplay{position:absolute;right:.7rem;bottom:.7rem;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.35);border:1px solid var(--g4);
  color:var(--mute);padding:.4rem .7rem;cursor:pointer;transition:.2s}
.paneReplay:hover{color:var(--gold-hi);border-color:var(--gold-dim)}
.paneSide{background:var(--g1);padding:1.5rem clamp(1.1rem,2.6vw,2rem);display:flex;
  flex-direction:column;gap:1.2rem;text-align:center}
.paneFacts h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.2vw,2.2rem);margin:0 0 .2rem}
.paneSub{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0 0 1rem}
.paneFacts dl{margin:0;display:grid;gap:.5rem;border-top:1px solid var(--g3);padding-top:.9rem}
.paneFacts dt{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:.15rem}
.paneFacts dd{margin:0;font-size:.86rem;color:var(--ink2)}
.paneCard{border-top:1px solid var(--g3);padding-top:1.2rem;min-height:12rem;
  display:flex;flex-direction:column;justify-content:center}
.paneCard.pop{animation:fadeIn .7s ease both}
.paneQ .qmark{display:block;font-family:var(--serif);font-size:2.2rem;line-height:0;height:.5rem;
  color:var(--gold-dim);opacity:.55;margin-bottom:.9rem}
.paneText{font-family:var(--serif);font-weight:300;font-size:clamp(1.05rem,1.9vw,1.4rem);
  line-height:1.48;color:var(--ink);margin:0 auto .9rem;max-width:46ch}
.paneQ.summary .paneText,.paneQ.attributed .paneText{font-family:var(--sans);font-weight:400;
  font-size:1rem;line-height:1.6;color:var(--ink2);max-width:52ch}
.grade.quote{color:var(--gold)}
.grade.attributed{color:var(--amber);border-style:dashed}
.grade.summary{color:var(--mute);border-style:dotted}
.paneSrc{font-size:.8rem;color:var(--faint);margin:.7rem auto 0;max-width:50ch}
.paneDots{display:flex;gap:.45rem;justify-content:center;margin-top:1.1rem}
.paneDots button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--gold-dim);transition:.25s}
.paneDots button[aria-current="true"]{background:var(--gold-hi);border-color:var(--gold-hi);transform:scale(1.18)}
.panesNote{margin-top:1.3rem;font-size:.9rem;color:var(--mute);max-width:80ch;
  margin-left:auto;margin-right:auto;text-align:center}
.panesNote strong{color:var(--ink)}

/* verbatim, but nobody signed it */
.grade.anon{color:var(--gold);border-style:dashed}
.paneCtx{font-family:var(--sans);font-size:.82rem;line-height:1.55;color:var(--amber);
  border:1px dashed currentColor;padding:.6rem .9rem;margin:0 auto 1.2rem;max-width:48ch}
.paneQ .paneText p{margin:0 0 .7rem}
.paneQ .paneText p:last-child{margin-bottom:0}
.paneQ.long .paneText{font-size:.95rem;line-height:1.62;text-align:left;max-width:54ch;
  max-height:22rem;overflow-y:auto;padding-right:.6rem}
.paneQ.long .paneText p:first-child{font-family:var(--serif);font-size:1.2rem;
  color:var(--gold-hi);margin-bottom:1rem}
.paneSrc a{color:var(--mute);text-underline-offset:3px}
.paneSrc a:hover{color:var(--gold-hi)}
.axesQs{font-family:var(--serif);font-size:clamp(1.05rem,2.1vw,1.35rem);line-height:1.5;
  color:var(--gold-hi);margin:0 auto 1rem;max-width:none}
.axesQs strong{font-weight:400}
.mapList{list-style:none;padding:0;margin:.4rem auto 0;text-align:center;
  font-family:var(--serif);font-weight:300;font-size:clamp(1.08rem,2.1vw,1.38rem);
  line-height:1.5;color:var(--ink)}
.mapList li{margin:.3rem 0}
.mapList li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gold);vertical-align:.3em;margin-right:.6rem}

/* evidence key — the rings themselves, not a sentence about them */
.ringKey{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;
  background:var(--g1);border:1px solid var(--g3);border-top:none;
  padding:1rem clamp(1rem,3vw,2rem);
  width:min(calc(100vw - 2.2rem),1640px);margin-left:50%;transform:translateX(-50%)}
.ringKey span{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--mute)}
.ringKey b{color:var(--ink);font-weight:600}
.ringKey svg{flex:none;display:block}

/* the map toggles carry the whole section — size them like it */
.modeBtn{font-size:.92rem;letter-spacing:.16em;padding:1rem 1.9rem}
.modeBar{border-color:var(--g4)}
@media(max-width:640px){.modeBtn{font-size:.76rem;padding:.8rem 1.1rem}}

/* ── one detail pane, all three maps ───────────────── */
.mapRow.solo{grid-template-columns:minmax(0,1fr) minmax(300px,400px)}
@media(max-width:900px){.mapRow.solo{grid-template-columns:1fr}}
#detailPane{background:var(--g1);display:flex;flex-direction:column;min-width:0}
#detailPane .detail[hidden]{display:none}
#detailPane .detail{flex:1;min-height:0;display:flex;flex-direction:column}
#cosDetail,#sacDetail{overflow-y:auto;padding:1.5rem 1.4rem;text-align:center}
.detailPrompt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:auto;padding:3rem 0}
.dCard .tag{color:var(--gold-dim)}
.dCard h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.4vw,1.85rem);
  margin:.35rem 0 .2rem;color:var(--hue,var(--gold-hi))}
.dCard h3 em{font-style:normal;font-family:var(--mono);font-size:.6em;color:var(--gold-dim);
  margin-right:.4rem;vertical-align:.12em}
.dCard .where{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .3rem}
.dCard .dates{font-family:var(--mono);font-size:.7rem;color:var(--mute);margin:0 0 .9rem}
.dCard .gloss{font-size:.92rem;color:var(--ink2);margin:0 0 .8rem}
.dCard .says{font-family:var(--serif);font-style:italic;color:var(--gold-hi);font-size:1.05rem;margin:0 0 .9rem}
.dCard .pnote{font-size:.82rem;color:var(--faint);border-top:1px solid var(--g3);
  padding-top:.7rem;margin:.9rem 0 0;text-align:center}
.dCard .ans,.dCard .dFields{list-style:none;margin:0;padding:.8rem 0 0;border-top:1px solid var(--g3);
  display:grid;gap:.6rem;text-align:center}
.dCard .ans li span,.dCard .dFields dt{display:block;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:.15rem}
.dCard .ans li b,.dCard .dFields dd{font-weight:400;color:var(--ink2);font-size:.86rem;margin:0}
.dCard .ans li,.dCard .dFields div{text-align:center}

/* ── fold / unfold the long tables ─────────────────── */
.fold{margin-top:1.4rem}
.foldBtn{display:block;width:100%;background:var(--g1);border:1px solid var(--g3);
  color:var(--mute);cursor:pointer;padding:.95rem 1.2rem;transition:.2s;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.foldBtn:hover{color:var(--ink);border-color:var(--g4);background:var(--g2)}
.foldCue{color:var(--gold-hi)}
.fold.open .foldBtn{border-bottom-color:transparent}
.foldBody[hidden]{display:none}
.fold .cmpBox,.fold .sacTable{margin-top:0;border-top:none}
.railBar{padding:0 .2rem}

/* the eagle-and-condor quotes sit still now */
.quote .w{animation:none!important;display:inline}

/* the live pin announces itself */
.pin .pulse{fill:none;stroke:var(--pin);stroke-width:.0035;opacity:0;pointer-events:none}
.pin.on .pulse{animation:pinRing 2.4s ease-out infinite}
@keyframes pinRing{0%{r:.028;opacity:.75}100%{r:.13;opacity:0}}
.pin.sm.on .pulse{animation-name:pinRingSm}
@keyframes pinRingSm{0%{r:.02;opacity:.75}100%{r:.095;opacity:0}}
.pin.on .halo{fill-opacity:.26}
.pin.on .core{r:.016}
.pin.sm.on .core{r:.013}
@media (prefers-reduced-motion:reduce){.pin.on .pulse{animation:none;opacity:.5}}

/* the four grades, as a key rather than a paragraph */
.gradeKey{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:.7rem 1.6rem;
  background:var(--g1);border:1px solid var(--g3);border-top:none;
  padding:1.1rem clamp(1rem,3vw,2rem);text-align:left}
.gradeKey span{display:flex;align-items:baseline;gap:.6rem;font-size:.84rem;color:var(--mute);
  flex-wrap:wrap}
.gradeKey i{font-style:normal;flex:none}
.panesNote{margin-top:1.1rem}

/* something is coming — look here */
.paneWait{display:flex;align-items:center;justify-content:center;min-height:9rem}
.paneWait span{font-family:var(--serif);font-size:3.4rem;line-height:1;color:var(--gold);
  animation:waitPulse 2.1s ease-in-out infinite}
@keyframes waitPulse{0%,100%{opacity:.18;transform:translateY(0) scale(.96)}
  50%{opacity:.72;transform:translateY(-4px) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.paneWait span{animation:none;opacity:.4}}

/* ── reading size, second pass ─────────────────────────────────────
   One lever for everything in rem; the SVG and canvas text that does
   not follow it is bumped to match in the same places as before. */
html{font-size:21px}

/* the detail pane needs more room once the type grows */
.mapRow{grid-template-columns:minmax(0,1fr) minmax(340px,470px)}
@media(max-width:1000px){.mapRow{grid-template-columns:1fr}}

/* wide tables need more room before they start cramping */
table.bingo{min-width:1140px}
table.cmp{min-width:1140px}

/* SVG text lives in user units, so it needs its own bump */
.pinLbl{font-size:.073px}
.pin.sm .pinLbl{font-size:.052px}
#axisSvg{min-width:1400px}

/* ── the two questions under the map ───────────────── */
.askRow{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;align-items:center;
  background:var(--g1);border:1px solid var(--g3);border-top:none;
  padding:1.1rem clamp(1rem,3vw,2rem);
  width:min(calc(100vw - 2.2rem),1640px);margin-left:50%;transform:translateX(-50%)}
.askSep{color:var(--faint)}
.ask{background:none;border:none;cursor:pointer;font-family:var(--serif);font-weight:300;
  font-size:1.08rem;color:var(--gold-hi);padding:.2rem 0;
  border-bottom:1px solid var(--gold-dim);transition:.2s}
.ask:hover{color:var(--ink);border-bottom-color:var(--gold)}
.ask.inPop{margin-top:1.4rem;font-size:1rem}

/* ── the pop-out panels ────────────────────────────── */
.pop{border:1px solid var(--g4);background:var(--g1);color:var(--ink);padding:0;
  width:min(94vw,860px);max-height:88vh;overflow:auto;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.pop.wide{width:min(96vw,1180px)}
.pop::backdrop{background:rgba(12,8,4,.72);backdrop-filter:blur(3px)}
.popInner{padding:clamp(1.6rem,4vw,2.6rem);text-align:center}
.popX{position:sticky;top:0;float:right;margin:.6rem .6rem 0 0;z-index:3;
  width:2rem;height:2rem;line-height:1;font-size:1.3rem;background:transparent;
  border:1px solid var(--g4);color:var(--mute);cursor:pointer;transition:.2s}
.popX:hover{color:var(--ink);border-color:var(--gold-dim)}
.pop h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.4vw,2.2rem);
  margin:.4rem 0 .8rem;color:var(--gold-hi)}
.popLead{font-size:1rem;color:var(--ink2);max-width:62ch;margin:0 auto 1.6rem}
.popSrc{font-size:.84rem;color:var(--faint);max-width:70ch;margin:1.3rem auto 0;
  border-top:1px solid var(--g3);padding-top:.9rem}

.popRailWrap{position:relative}
.popRail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.3rem .2rem 1rem;-webkit-overflow-scrolling:touch}
.popCard{flex:0 0 min(320px,78vw);scroll-snap-align:start;background:var(--g2);
  border:1px solid var(--g3);border-top:2px solid var(--gold-dim);
  padding:1.1rem 1.2rem;text-align:left}
.popCard .n{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;color:var(--gold-dim)}
.popCard h4{font-family:var(--serif);font-weight:400;font-size:1.18rem;margin:.4rem 0 .5rem;color:var(--ink)}
.popCard p{font-size:.92rem;color:var(--ink2);margin:0;max-width:none}
.popCard strong{color:var(--ink);font-weight:600}
.popCard em{color:var(--gold-hi);font-style:italic}
.popCard .cite{display:block;margin-top:.6rem;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.railNavRow{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.2rem}
.railArrow{width:2.4rem;height:2.2rem;border:1px solid var(--g4);background:transparent;
  color:var(--mute);cursor:pointer;font-size:.95rem;transition:.2s}
.railArrow:hover{color:var(--gold-hi);border-color:var(--gold-dim)}
.railHint{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.popTableScroll{overflow-x:auto;border:1px solid var(--g3)}
table.orient{border-collapse:collapse;width:100%;min-width:760px;font-size:.88rem;text-align:left}
table.orient th,table.orient td{padding:.75rem .9rem;vertical-align:top;
  border-bottom:1px solid var(--g2);border-right:1px solid var(--g2)}
table.orient thead th{background:var(--g2);font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:500;line-height:1.4}
table.orient tbody th{background:var(--g1);font-size:.84rem;font-weight:600;color:var(--ink);min-width:150px}
table.orient td{color:var(--ink2)}
table.orient td.anc{color:var(--ink2);background:rgba(106,204,166,.035)}

/* ── give the map more of the screen ───────────────────────────────
   The three modes share one basemap, so its shape cannot change per
   mode. What can change is how much width the row is allowed, and
   whether the detail pane is permitted to make the row taller than
   the map — which is what left the dead space under the sacraments. */
.mapRow,.legend,.legNote,.askRow,.ringKey,#panelCosmos,#panelSacra{
  width:min(calc(100vw - 1.6rem),1860px)}
.mapRow{grid-template-columns:minmax(0,1fr) minmax(320px,430px)}
@media(max-width:1000px){.mapRow{grid-template-columns:1fr}}
#detailPane{overflow:hidden}
#cosDetail,#sacDetail,.mapRow .banner{overflow-y:auto;min-height:0}
.mapRow .mapBox{display:flex;align-items:center}   /* centre any slack */

/* ── the account column sits inside the figure's height ── */
.paneSide{overflow:hidden}
.paneCard{overflow-y:auto;min-height:0}
.paneText{font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.5}
.paneQ .qmark{font-size:1.9rem;margin-bottom:.7rem}
.paneFacts h3{font-size:clamp(1.5rem,2.8vw,2rem)}
.paneFacts dd{font-size:.82rem}
.paneSrc{font-size:.76rem}

/* ── keys read as keys, not as body text ───────────────── */
.gradeKey span,.ringKey span{font-size:.76rem}
.sacLegend span{font-size:.58rem}
.legend ul{font-size:.86rem}
.legend h4{font-size:.58rem}
.grade,.srcBtn{font-size:.55rem}
.pill,.kind{font-size:.56rem}
.chip{font-size:.54rem;padding:.26rem .45rem}
.gradeKey{gap:.55rem 1.4rem;padding:.9rem clamp(1rem,3vw,2rem)}
.ringKey{gap:.5rem 1.8rem;padding:.85rem clamp(1rem,3vw,2rem)}
.ringKey svg{width:22px;height:22px}
.panesNote,.legNote{font-size:.84rem}

/* A centred flex child cannot be scrolled back to once it overflows — the
   top gets clipped and is unreachable. Centre with auto margins instead. */
.paneCard{justify-content:flex-start}
.paneCard > *{margin-top:auto;margin-bottom:auto}
.paneWait{min-height:7rem}

/* ── the ternary plot ──────────────────────────────── */
.ternWrap{width:min(calc(100vw - 1.6rem),1480px);margin-left:50%;transform:translateX(-50%)}
.ternGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,380px);gap:1.4rem;
  align-items:start;margin-top:1.2rem;text-align:left}
@media(max-width:900px){.ternGrid{grid-template-columns:1fr}}
.ternStage{position:relative;aspect-ratio:1.12;background:
  radial-gradient(70% 70% at 50% 54%,var(--g2),var(--g1) 72%,var(--g0) 100%);
  border:1px solid var(--g3)}
#tern{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.ternSide{display:flex;flex-direction:column;gap:.9rem}
.ternCard{background:var(--g1);border:1px solid var(--g3);padding:1.1rem 1.2rem;
  min-height:14rem;text-align:center}
.ternCard h4{font-family:var(--serif);font-weight:400;font-size:1.45rem;margin:.3rem 0 .9rem}
.ternBars{display:grid;gap:.5rem;margin-bottom:1rem}
.ternBars > div{display:grid;grid-template-columns:5.5rem 1fr 2.6rem;align-items:center;gap:.6rem}
.ternBars span{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-align:right}
.ternBars i{height:7px;background:var(--g3);display:block}
.ternBars u{display:block;height:100%;background:var(--gold);text-decoration:none}
.ternBars b{font-family:var(--mono);font-size:.66rem;color:var(--mute);font-weight:400;text-align:left}
.ternDur{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-dim);margin:0 0 .4rem}
.ternSought{font-size:.88rem;color:var(--ink2);margin:0}
.ternNote{margin-top:1.2rem;font-size:.84rem;color:var(--faint);max-width:78ch;
  margin-left:auto;margin-right:auto;border-top:1px solid var(--g3);padding-top:.9rem}

/* ── the two effect tables ─────────────────────────── */
.effScroll{overflow-x:auto;border:1px solid var(--g3);border-top:none}
table.eff{border-collapse:collapse;width:100%;min-width:1180px;font-size:.84rem;text-align:left}
table.eff th,table.eff td{padding:.7rem .85rem;vertical-align:top;
  border-bottom:1px solid var(--g2);border-right:1px solid var(--g2)}
table.eff thead th{background:var(--g2);font-family:var(--mono);font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:500;line-height:1.4}
table.eff tbody th{background:var(--g1);font-size:.86rem;font-weight:600;min-width:150px}
table.eff tbody th small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);font-weight:400;margin-top:.2rem}
table.eff td{color:var(--ink2)}

/* ── one edge for every full-width block ───────────────────────────
   These had drifted to four different widths (1860 / 1640 / 1480 /
   1400), so their borders stepped in and out down the page. And
   .askRow is a <p>, so the global max-width:66ch was clamping it to
   less than half its own box. */
:root{--bleed:min(calc(100vw - 1.8rem),1760px)}
.mapRow,.legend,.legNote,.askRow,.ringKey,
#panelCosmos,#panelSacra,.axisWrap,.panesWrap{
  width:var(--bleed);max-width:none;margin-left:50%;transform:translateX(-50%)}

/* the figures sit inside that width rather than setting their own */
.ternWrap{width:100%;margin-left:0;transform:none}
.ternGrid{grid-template-columns:minmax(0,760px) minmax(300px,440px);
  justify-content:center;gap:1.6rem}
.ternNote{max-width:74ch}
.paneGrid{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
@media(max-width:1000px){
  .ternGrid,.paneGrid{grid-template-columns:1fr}
}
.axCiteRow{margin-top:1.2rem}
.popPara{font-size:.95rem;color:var(--ink2);max-width:66ch;margin:0 auto 1rem;text-align:center}
.popPara em{color:var(--mute)} .popPara strong{color:var(--ink)}
.sectHead .lede{margin-bottom:.7rem}
.ledeQs{list-style:none;padding:0;margin:0 auto 1.3rem;max-width:62ch;text-align:center;
  font-family:var(--serif);font-weight:300;font-size:clamp(1.05rem,2vw,1.34rem);
  line-height:1.5;color:var(--ink2)}
.ledeQs li{margin:.45rem 0}
/* the longer toggle names need to hold one row without shrinking the type */
.modeBtn{padding:1rem 1.35rem;letter-spacing:.11em}
@media(max-width:860px){.modeBtn{font-size:.8rem;padding:.8rem 1rem;letter-spacing:.09em}}