:root{
  --ink:#1c1512; --parch:#f6eed6; --parch-lo:#e9dcb6; --marble:#eae4d4;
  --aegean:#2e88b5; --aegean-d:#136f9e; --blood:#bf4a26; --olive:#7c8f3a; --terra:#b5602c;
  --gold:#e0b84a; --shadow:#b9a77e;
  --serif:Georgia,'Iowan Old Style','Palatino Linotype',serif;
  --sans:Optima,'Gill Sans','Gill Sans MT',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#d8cba6}
body{margin:0;background:#d8cba6;color:var(--ink);font-family:var(--serif);line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--sans);line-height:1.12;margin:0;text-wrap:balance}
p{margin:0 0 1rem;font-size:1.125rem;line-height:1.65;text-wrap:pretty}
.kicker{font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:var(--blood)}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;gap:14px;align-items:center;padding:9px 18px;border-bottom:4px solid var(--ink);
  font-family:var(--sans);font-size:.78rem;letter-spacing:.05em;background:linear-gradient(180deg,#3a2a1a,#241a10)}
.bar a{color:#f0e6cc;text-decoration:none;opacity:.8;white-space:nowrap} .bar a:hover{opacity:1}
.bar .now{margin-left:auto;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:#c9b98a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.bar a+a{display:none}}
.bar i{position:absolute;left:0;bottom:-4px;height:3px;width:0;background:linear-gradient(90deg,var(--aegean),var(--gold))}

/* ---------- spreads ---------- */
.spread{position:relative;padding:clamp(4.5rem,11vw,8rem) 20px;overflow:clip}
.spread.has-scrolly{overflow:visible;padding-bottom:0;background:var(--marble)}
.dark{background:var(--marble);color:var(--ink);background-image:radial-gradient(rgba(28,21,18,.05) 1px,transparent 1px);background-size:3px 3px}
.light{background:var(--parch);color:var(--ink);
  background-image:radial-gradient(rgba(28,21,18,.05) 1px,transparent 1px);background-size:3px 3px}
/* torn-paper edge between spreads */
.tear{position:absolute;left:0;right:0;top:-1px;height:26px;z-index:3;pointer-events:none}
.tear path{fill:var(--prev)}
.wrap{max-width:1080px;margin:0 auto;position:relative;z-index:2}
.narrow{max-width:640px;margin:0 auto}
.spread h2{font-size:clamp(1.9rem,5vw,3.1rem);margin:.4rem 0 1rem}
.lede{max-width:34em}
.light .lede{color:#3a2d24}
.meander{height:18px;margin:2.2rem 0;max-width:520px;opacity:.7;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'><path d='M0 2h32v14h-8V8h-8v8h-4V6h12M0 16h8' fill='none' stroke='%231c1512' stroke-width='2.6'/></svg>") repeat-x}

/* ---------- the pop-up: a card that unfolds from its hinge ---------- */
.pop{perspective:1400px}
.pop > .leaf{transform-origin:50% 100%;transform:rotateX(78deg) translateY(30px);opacity:0;
  transition:transform 1.1s cubic-bezier(.2,.9,.25,1.12),opacity .6s ease}
.pop.up > .leaf{transform:rotateX(0) translateY(0);opacity:1}
.pop.fromleft > .leaf{transform-origin:0 50%;transform:rotateY(-80deg)}
.pop.fromright > .leaf{transform-origin:100% 50%;transform:rotateY(80deg)}
.pop.up.fromleft > .leaf,.pop.up.fromright > .leaf{transform:none}
.paper{background:#fffaf0;border:4px solid var(--ink);box-shadow:9px 11px 0 var(--shadow);position:relative}
.light .paper{box-shadow:9px 11px 0 #b9a77e}
.photo{border:5px solid #fffaf0;box-shadow:0 0 0 3px var(--ink),12px 16px 0 var(--shadow);background:#222;overflow:hidden;position:relative}
.photo img{width:100%;height:100%;object-fit:cover}
.tilt-l{transform:rotate(-1.4deg)} .tilt-r{transform:rotate(1.2deg)}
[data-depth]{will-change:transform}
.fold-shadow{position:absolute;left:6%;right:6%;bottom:-18px;height:26px;background:radial-gradient(ellipse at center,#0008,transparent 70%);opacity:0;transition:opacity 1s .4s;z-index:-1}
.up .fold-shadow{opacity:1}

/* ---------- cover ---------- */
#cover{min-height:100svh;display:grid;align-items:center;padding-top:5rem;
  background:linear-gradient(180deg,#e0d6bb00 calc(100% - 140px),#e0d6bb),radial-gradient(120% 90% at 70% 0%,#fbf4de 0%,#eae4d4 55%,#e0d6bb 100%)}
/* the cover ends in one colour, and the torn edge under it is that colour */
#cover+.spread>.tear path{fill:#e0d6bb}
#cover .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,70px);align-items:center}
#cover h1{font-size:clamp(2.6rem,7.4vw,5.6rem);color:var(--ink);margin:0 0 1.4rem;letter-spacing:-.01em}
#cover .photo{aspect-ratio:3/4;max-height:80svh;margin:0 auto}
#cover .generic,#cover .allegory{max-width:26em;margin:0 0 1rem}
#cover .generic,#cover .allegory{color:var(--ink)}
#cover .generic{font-style:italic;font-size:clamp(1.15rem,2.3vw,1.4rem)}
#cover .source{font-family:var(--sans);font-size:.74rem;line-height:1.5;max-width:36em;margin:1.6rem 0 0;color:#6b5d4f}
#cover .source i{color:var(--blood)}
.cut{position:absolute;pointer-events:none;z-index:1}
.cut svg{display:block;width:100%;height:auto}
@media(max-width:760px){#cover .grid{grid-template-columns:1fr}#cover .photo{max-height:52svh;aspect-ratio:3/3.4}}

/* ---------- two-column spreads ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.two.wide-r{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
@media(max-width:859px){.two,.two.wide-r{grid-template-columns:minmax(0,1fr)}}

/* ---------- the hall (full-bleed photo with pins) ---------- */
#hall{padding:0;background:var(--marble)}
.bleed{position:relative;height:min(100svh,880px);overflow:hidden}
.bleed img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover}
.bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--parch) 0,transparent 8%,transparent 92%,var(--parch) 100%);pointer-events:none}
.pin{position:absolute;z-index:4;max-width:min(250px,44vw);padding:10px 14px;background:#fffaf0;color:var(--ink);border:3px solid var(--ink);
  box-shadow:5px 6px 0 #0007;font-size:.92rem;line-height:1.35;transform-origin:0 100%}
.pin b{font-family:var(--sans);display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blood)}
.pin::after{content:"";position:absolute;left:-3px;bottom:-26px;width:3px;height:26px;background:var(--ink)}
.pin::before{content:"";position:absolute;left:-8px;bottom:-34px;width:13px;height:13px;border-radius:50%;background:var(--blood);border:3px solid var(--ink)}
.hall-title{position:absolute;z-index:5;left:20px;right:20px;top:clamp(5rem,12vh,8rem);max-width:1080px;margin:0 auto}
.hall-title .t{display:inline-block;max-width:520px;padding:16px 22px;background:#fffaf0;border:4px solid var(--ink);box-shadow:8px 9px 0 var(--shadow)}
.hall-title h2{font-size:clamp(1.7rem,4.4vw,2.6rem);margin:.3rem 0 .6rem}
.hall-title p{margin:0}
/* on a phone, or a screen too short to hold them, the title and the notes leave the photograph and stand under it */
@media(max-width:900px),(max-height:680px){
  #hall{background:var(--parch);padding-bottom:clamp(2.5rem,8vw,4rem)}
  .bleed{height:auto!important;overflow:visible;display:flex;flex-direction:column;gap:14px;padding:0 20px}
  .bleed::after{display:none}
  .bleed img{position:static;width:calc(100% + 40px);max-width:none;height:min(58svh,460px);margin:0 -20px;transform:none!important;
    -webkit-mask-image:linear-gradient(transparent,#000 9%);mask-image:linear-gradient(transparent,#000 9%)}
  .hall-title{position:relative;inset:auto;width:100%;max-width:640px;margin:-3.2rem auto 4px}
  .hall-title .t{display:block;max-width:none}
  .pin{position:static;width:100%;max-width:640px;margin:0 auto;box-shadow:5px 6px 0 var(--shadow)}
  .pin::before,.pin::after{display:none}
}

/* ---------- scrollytelling ---------- */
.scrolly{position:relative}
.scrolly .stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;padding:70px 20px 20px;overflow:hidden}
.scrolly .steps{position:relative;z-index:6;margin-top:-100svh;pointer-events:none}
.step{min-height:100svh;display:flex;align-items:center;padding:0 20px}
.step .card{pointer-events:auto;max-width:360px;padding:16px 20px;background:#fffaf0;color:var(--ink);border:4px solid var(--ink);box-shadow:7px 8px 0 var(--shadow);
  transform:translateY(24px) rotate(-.6deg);opacity:.25;transition:transform .7s cubic-bezier(.2,.9,.25,1.1),opacity .5s}
.step.on .card{transform:none;opacity:1}
.step .card h3{font-size:1.1rem;margin-bottom:.35rem}
.step .card p{margin:0;font-size:.98rem}
.step .num{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;color:var(--blood);text-transform:uppercase}
.step.r{justify-content:flex-end}
.scrolly svg.fig{width:min(100%,820px);height:auto;max-height:calc(100svh - 120px);overflow:visible}
.scrolly .stage-inner{width:100%;display:flex;justify-content:center}
/* under the picture: previous, one dot per step (the current one long), next, and back to the first; each scrolls the page to its step */
.scrolly .stage{flex-direction:column;gap:12px}
.dots{flex:0 0 auto;display:flex;justify-content:center;align-items:center;gap:1px;position:relative;z-index:7}
.dots button{appearance:none;border:0;background:none;padding:8px 4px;line-height:0;cursor:pointer;color:var(--ink)}
.dots .dot::before{content:"";display:block;width:7px;height:7px;border-radius:7px;background:var(--ink);opacity:.22;transition:width .3s,opacity .3s,background .3s}
.dots .dot:hover::before{opacity:.5}
.dots .dot.on::before{width:20px;opacity:1;background:var(--blood)}
.dots .arr{padding:6px;opacity:.5;transition:opacity .3s}
.dots .arr svg{display:block;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dots .arr:hover{opacity:1}
.dots .arr:disabled{opacity:.14;cursor:default}
.dots .back{margin-left:8px}
.dots button:focus-visible{outline:2px solid var(--aegean-d);outline-offset:-3px}
@media(min-width:900px){.scrolly .stage{padding-left:380px} .step .card{max-width:320px} .step{padding-left:max(24px,calc((100vw - 1080px)/2))}}
@media(max-width:899px){
  .scrolly .stage{justify-content:flex-start;padding-top:64px}
  .scrolly svg.fig{max-height:46svh}
  .step{align-items:flex-end;padding-bottom:22px}
  .step .card{max-width:none;width:100%}
}
svg text{font-family:var(--serif)}
.svg-dark{background:#fffaf0;border:4px solid var(--ink);box-shadow:8px 9px 0 var(--shadow)}

/* ---------- interactive wells ---------- */
.well{padding:clamp(16px,3vw,28px);margin:1.6rem 0}
.well h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;color:var(--blood);display:flex;justify-content:space-between;gap:10px}
.well h4 em{font-style:normal;color:#6b5a48}
.btn{background:var(--ink);color:var(--parch);border:3px solid var(--ink);padding:8px 16px;font-family:var(--sans);font-size:.88rem;letter-spacing:.03em;box-shadow:4px 4px 0 var(--blood);transition:transform .12s,box-shadow .12s}
.btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--blood)}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 var(--blood)}
.btn:disabled{opacity:.35;cursor:default;box-shadow:none}
.btn.alt{background:#fffaf0;color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.say{margin:12px 0 0;font-size:.98rem;min-height:3.1em}
.say b{color:var(--blood)}
.ok{color:#3f7a2a;font-weight:700}.bad{color:var(--blood);font-weight:700}

/* cards row */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,30px);margin-top:2rem}
.card3 .photo{aspect-ratio:4/3;border:0;box-shadow:none}
.card3 .body{padding:16px 18px 18px}
.card3 h3{font-size:1.15rem;margin-bottom:.4rem}
.card3 p{font-size:.95rem;margin:0}
.card3 .fx{margin-top:12px}
/* cards in a row stand as tall as the tallest */
.cards3>.pop>.leaf{height:100%}
@media(max-width:860px){.cards3{grid-template-columns:1fr}}
/* relevance */
.map{display:grid;grid-template-columns:1fr 46px 1fr;gap:6px 0;align-items:stretch;max-width:760px;margin:2rem auto 0}
.map .l,.map .r{padding:11px 16px;font-size:1rem;border:3px solid var(--ink);background:#fffaf0;color:var(--ink);transition:background .25s,transform .25s;cursor:default}
.map .r{font-family:var(--sans);background:#e9f2f7}
.map .mid{display:grid;place-items:center;color:var(--blood);font-size:1.3rem}
.map .hi{background:var(--gold)!important;transform:scale(1.03)}
.map .hd{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blood)}
.end{text-align:center}
.end .big{font-size:clamp(1.5rem,4.2vw,2.5rem);max-width:19em;margin:0 auto 1.4rem;color:var(--ink);text-wrap:balance}
.links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.links a{color:var(--ink);background:#fffaf0;border:3px solid var(--ink);padding:9px 18px;text-decoration:none;font-family:var(--sans);font-size:.9rem;box-shadow:4px 4px 0 var(--shadow)}
.links a:hover{background:var(--gold)}
footer{padding:2rem 20px 3rem;text-align:center;font-size:.8rem;color:#6b5a48;font-family:var(--sans);background:#d8cba6}

/* ---------- lists, small parts ---------- */
.terms{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:12px}
.terms li{padding:12px 16px;background:#fffaf0;border:3px solid var(--ink);box-shadow:5px 5px 0 #b9a77e;font-size:.98rem}
.terms b{font-family:var(--sans)}
@keyframes slotin{from{transform:translateY(-8px);opacity:0}}
.btn:focus-visible,.links a:focus-visible,[role=button]:focus-visible{outline:3px solid var(--aegean-d);outline-offset:2px}
.num{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;color:var(--blood);text-transform:uppercase}
.chip{display:inline-block;padding:1px 7px;margin:2px 3px 2px 0;border:2px solid var(--ink);border-radius:5px;background:#fff;font-family:var(--sans);font-weight:700;font-size:.86rem;white-space:nowrap}
.chip i{display:inline-block;width:.7em;height:.7em;border-radius:50%;border:1.5px solid var(--ink);margin-right:5px;vertical-align:-.02em}
.isle-svg{width:min(100%,440px);display:block;margin:0 auto}
.fig .fade{opacity:0;transition:opacity .6s}
.fig .fade.on{opacity:1}
.fig .lab{fill:#6b5a48;font-size:15px;font-style:italic;text-anchor:middle}
.fig .halo{paint-order:stroke;stroke:#fffaf0;stroke-width:5px;stroke-linejoin:round}
.tok text{font-family:var(--sans);font-weight:700;font-size:14px;text-anchor:middle;dominant-baseline:central;fill:#1c1512}
.site rect,.site circle{stroke:var(--ink);stroke-width:4}
.site text{font-family:var(--sans);font-weight:700;font-size:15px;text-anchor:middle;dominant-baseline:central;fill:#1c1512}

/* ---------- space-time, drawn in the round ---------- */
.st-ring{fill:none;stroke:#b9a77e;stroke-opacity:.7;stroke-width:1;stroke-dasharray:3 4}
.st-spoke{stroke:#1c1512;stroke-width:2.5;stroke-opacity:.45}
.st-node rect{fill:#f6eed6;stroke:#1c1512;stroke-width:2}
.st-node text{font-family:var(--sans);font-weight:700;font-size:14px;text-anchor:middle;dominant-baseline:central;fill:#1c1512}
.st-slip{fill:none;stroke:#136f9e;stroke-width:2.6;transition:stroke .3s,stroke-width .3s,opacity .5s}
.st-seg{stroke:#bf4a26;stroke-width:7;stroke-linecap:round;opacity:0;transition:opacity .3s}
.st-seg.hi{opacity:.85}
.st-slip.hi{stroke:#bf4a26;stroke-width:5}
.st-ev{cursor:pointer}
.st-ev circle.b{stroke:#1c1512;stroke-width:3;transition:stroke .3s,stroke-width .3s}
.st-ev text{font-family:var(--sans);font-weight:700;font-size:15px;text-anchor:middle;dominant-baseline:central;fill:#1c1512;pointer-events:none}
.st-ev .halo2{fill:none;stroke:#e0b84a;stroke-width:7;opacity:0;transition:opacity .3s}
.st-ev.sel .halo2,.st-ev.mark .halo2{opacity:1}
.st-ev.sel circle.b{stroke-width:4.5}
.st-ev.dim{opacity:.3}
.st-ev:focus-visible{outline:none}.st-ev:focus-visible circle.b{stroke:#136f9e;stroke-width:6}
.st-note{fill:#6b5a48;font-size:13px;font-style:italic}

/* ---------- a stage with a figure and a side panel ---------- */
.stage-inner.split{gap:18px;align-items:center}
.stage-inner.split svg.fig{flex:1 1 300px;min-width:0;max-width:470px}
.side{flex:0 0 240px;display:grid;gap:10px;font-family:var(--sans);font-size:.84rem}
.side .hc{background:#fffaf0;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);padding:8px 10px;min-height:92px;transition:background .4s}
.side .hc h5{margin:0 0 5px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;gap:6px}
.side .hc h5 span{color:#6b5a48;letter-spacing:.02em;text-transform:none}
.side .hc .chk{font-size:.78rem;margin-top:4px;line-height:1.35}
.side .hc.in{background:#e3ecc4}
@media(max-width:899px){
  .stage-inner.split{flex-direction:column;gap:10px}
  .stage-inner.split svg.fig{flex:0 0 auto;max-height:30svh;width:auto;max-width:100%}
  .side{flex:0 0 auto;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font-size:.7rem}
  .side .hc{padding:5px 6px;min-height:0;box-shadow:3px 3px 0 var(--shadow)}
  .side .hc h5{font-size:.62rem;flex-direction:column;gap:0}
  .side .hc .chk{font-size:.66rem}
  .side .chip{font-size:.68rem;padding:0 4px}
}
.tear{width:100%}
.scrolly svg.fig.svg-dark{overflow:hidden}

/* ---------- proofs, in the paper's own terms ---------- */
details.proof{max-width:760px;margin:1.8rem 0 0;background:#fffaf0;color:var(--ink);border:4px solid var(--ink);box-shadow:7px 8px 0 var(--shadow);padding:0 clamp(14px,3vw,22px);font-size:.95rem}
details.proof>summary{cursor:pointer;padding:12px 0;font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aegean-d)}
details.proof>summary:focus-visible{outline:3px solid var(--aegean-d);outline-offset:2px}
details.proof[open]{padding-bottom:14px}
details.proof details.proof{border-width:3px;box-shadow:none;background:#fff;margin:1rem 0;max-width:none}
details.proof .given{padding:10px 14px;background:var(--parch-lo);border-left:5px solid var(--aegean);margin:0 0 .8rem}
details.proof h3,details.proof h4{font-size:1.02rem;margin:1.4rem 0 .5rem}
details.proof .hlink{color:inherit;text-decoration:none}
details.proof .fnote{font-size:.84rem;color:#6b5a48}
ol.proofsteps{padding-left:1.4em;margin:.4rem 0 0}
ol.proofsteps li{margin:.55em 0}
.qed{float:right;font-family:var(--sans);letter-spacing:.15em;color:#5f6e28}
.mathblock{margin:.8rem 0;padding:8px 12px;overflow-x:auto;text-align:center;font-style:italic;background:#fff;border:2px solid #1c151233}
.slab{margin:1rem 0;padding:10px 14px;background:var(--parch-lo);border-left:5px solid var(--aegean)}
.slab-head{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blood);margin-bottom:4px}
.stmt{font-style:italic}

/* ---------- closing apparatus: lineage, papers, links to where a fact comes from ---------- */
a.anchor{display:block;height:0;scroll-margin-top:56px}
sup.xref{font-size:.8em;line-height:0;margin-left:1px}
sup.xref a{color:var(--aegean-d);text-decoration:none;font-weight:700}
.apparatus{max-width:760px;margin:3rem auto 0;text-align:left;font-size:.94rem}
.apparatus .lineage{margin:0 0 .6rem}
.apparatus .lbl{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blood);margin-right:8px}
.apparatus a{color:var(--aegean-d)}
.apparatus details.proof{margin-top:1.2rem}
.apparatus .refs p,.apparatus ol.refs li{font-size:.9rem;margin:.45em 0}
.apparatus table{width:100%;border-collapse:collapse;font-size:.9rem}
.apparatus td{padding:5px 8px 5px 0;border-top:2px solid #1c151222;vertical-align:top}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pop > .leaf{transition:opacity .3s;transform:none!important}
  [data-depth]{transform:none!important}
  .pulse{animation:none}
  .fig .tok{transition:none}
}