@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════
   ATLAS v1.3 — RealityEnginuity, LLC

   The desk is the ground. Every long passage sits on a parchment panel
   laid on that desk — never on the artwork itself. Headings carry the
   authority (heavy inscriptional capitals, gilded ornament); body copy
   carries the reading (large, dark, quiet).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --page:#fbf6ea;
  --page-lit:#fffcf4;
  --leaf:#f0e7d2;
  --rule:#c8b78f;
  --edge:#9a8459;

  --ink:#1a1208;         /* 17.2:1 on parchment */
  --ink-2:#31251a;       /* 13.8:1 */
  --ink-3:#4b3a26;       /* 10.1:1 — the floor for text, anywhere */
  --rubric:#8a2312;      /* 8.4:1 */

  --gold:#c9a227;
  --gold-lit:#f2de9b;
  --gold-deep:#6b5008;   /* the only gold permitted to carry a word */

  --walnut:#2b1d10;
  --walnut-lit:#4a3520;
  --brass:#c2992c;
  --night:#0f0b06;
  --candle:#ffcf8a;

  /* Cinzel: inscriptional capitals — the ancestor of the manuscript
     versal, and heavy enough to hold a page. UnifrakturMaguntia is used
     for single decorated initials only, never for a word.
     Spectral does all the reading. */
  --display:Cinzel,"Palatino Linotype",Palatino,"Hoefler Text",Georgia,serif;
  --initial:UnifrakturMaguntia,Cinzel,Georgia,serif;
  --body:Spectral,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --hand:"Snell Roundhand","Apple Chancery","Segoe Script",
         "Lucida Handwriting",cursive;

  --fs:clamp(1.15rem,1.06rem + .38vw,1.3rem);   /* 18.4 → 20.8px */
  --measure:64ch;

  --gutter:clamp(1.4rem,5vw,4rem);
  --breath:clamp(8rem,18vh,15rem);              /* between chapters */
  --breath-in:clamp(3rem,6vw,5.5rem);           /* within a chapter */
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:5rem;
  background:var(--night);
}

body{
  margin:0;font-family:var(--body);font-size:var(--fs);line-height:1.82;
  color:var(--ink);background:var(--night);
  overflow-x:hidden;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img,svg,picture{display:block;max-width:100%}
img{height:auto}
::selection{background:rgba(138,35,18,.2)}

:focus-visible{outline:2px solid var(--rubric);outline-offset:3px}
.on-dark :focus-visible,#masthead :focus-visible{outline-color:var(--gold-lit)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.art-library{position:absolute;width:0;height:0;overflow:hidden}

.skip-link{
  position:absolute;left:50%;top:0;transform:translate(-50%,-140%);z-index:200;
  padding:.8rem 1.4rem;background:var(--page-lit);color:var(--ink);
  border:1px solid var(--gold-deep);text-decoration:none;font-size:1rem;
  transition:transform .2s;
}
.skip-link:focus{transform:translate(-50%,0)}

/* ═══════════════════════════════════════════════════════════════════
   SCENE ONE & TWO — candlelight, then the one presentation of the key art
   ═══════════════════════════════════════════════════════════════ */

#reveal{position:relative;height:380vh;background:#070500}
@media (max-width:44rem){#reveal{height:300vh}}

#stage{position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:#070500}

.plate{position:absolute;inset:0}
.plate-layer{
  position:absolute;inset:0;margin:auto;width:1px;height:1px;max-width:none;
  transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;
}
.plate-layer--tower{z-index:2}

/* The candle. Its pool of light is the only thing that exists at first;
   JS widens --pool and fades --warm as the visitor scrolls. */
.candle{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  --pool:16%;--warm:1;
  background:
    radial-gradient(circle at 50% 47%,
      rgba(255,207,138,calc(.16 * var(--warm))) 0%,
      rgba(255,190,110,calc(.06 * var(--warm))) calc(var(--pool) * .6),
      transparent calc(var(--pool) * 1.15)),
    radial-gradient(circle at 50% 47%,
      transparent calc(var(--pool) * .55),
      rgba(7,5,0,.82) calc(var(--pool) * 1.25),
      rgba(7,5,0,.985) calc(var(--pool) * 2.1));
  animation:flame 5.2s ease-in-out infinite;
}
@keyframes flame{
  0%,100%{opacity:1}
  38%{opacity:.93}
  61%{opacity:.98}
  79%{opacity:.9}
}
#stage::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(78% 62% at 50% 48%,transparent 34%,rgba(6,4,0,.5) 82%,
    rgba(6,4,0,.9) 100%);
}

.silence{
  position:absolute;inset:0;z-index:7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--gutter);
}
.silence::before{
  content:"";position:absolute;left:50%;top:46%;width:min(48rem,94vw);
  height:min(24rem,52vh);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,3,0,.88),rgba(4,3,0,.5) 60%,transparent);
}
.silence-ask{
  position:relative;margin:0;opacity:0;
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,1.2rem + 3.8vw,4rem);line-height:1.14;
  letter-spacing:.06em;color:#fbf3e0;
  animation:breathe 3.4s ease 1.4s forwards;
}
/* Lower margin. Handwritten. Very faint. */
.silence-answer{
  position:absolute;left:50%;bottom:clamp(4.5rem,12vh,8rem);
  transform:translateX(-50%);margin:0;opacity:0;width:min(34rem,86vw);
  font-family:var(--hand);font-size:clamp(1.15rem,.9rem + 1.3vw,1.7rem);
  line-height:1.5;color:rgba(242,222,155,.72);
  animation:faint 4.5s ease 4.6s forwards;
}
@keyframes breathe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes faint{from{opacity:0}to{opacity:1}}

.catchword{
  position:absolute;bottom:clamp(1.6rem,4vh,2.8rem);left:50%;width:18px;
  transform:translateX(-50%);opacity:.42;
}
.catchword svg{width:100%;fill:none;stroke:var(--gold);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}

/* The title lockup — fades in once the child is visible, beneath the plate,
   never over it. */
.keyart-title{
  position:absolute;left:50%;bottom:clamp(2rem,6vh,5rem);z-index:8;
  transform:translateX(-50%);width:min(44rem,92vw);text-align:center;
  opacity:0;pointer-events:none;
}
.keyart-title .title-word{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.6rem,1.6rem + 5vw,5rem);line-height:1;letter-spacing:.16em;
  margin:0 0 .5rem;color:#e8c65c;
  background:linear-gradient(174deg,#f8e9b4 6%,#d9b13a 36%,#a67f18 62%,#eed388 96%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.9));
}
.keyart-title .title-line{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.05rem,.85rem + 1vw,1.5rem);line-height:1.4;
  letter-spacing:.1em;color:#f6efdd;margin:0 0 1.1rem;
  text-shadow:0 2px 10px rgba(0,0,0,.95);
}
.keyart-title .title-attrib{
  font-family:var(--body);font-size:.9rem;letter-spacing:.18em;
  text-transform:uppercase;color:#cbbb96;margin:0;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
}

/* ═══════════════════════════════════════════════════════════════════
   SCENE THREE — the desk
   ═══════════════════════════════════════════════════════════════ */

.desk{
  position:relative;min-height:100vh;min-height:100svh;
  display:grid;place-items:center;padding:var(--gutter);
  background:#0b0803;
  overflow:hidden;
}
.desk-image{position:absolute;inset:0;z-index:0}
.desk-image img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.desk::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(62% 52% at 50% 46%,transparent 40%,rgba(8,5,1,.62) 100%),
    linear-gradient(to bottom,rgba(8,5,1,.5),transparent 26%,transparent 62%,rgba(8,5,1,.75));
}
.desk-card{
  position:relative;z-index:2;text-align:center;
  max-width:32rem;padding:clamp(1.8rem,4vw,2.8rem);
  background:linear-gradient(#fffdf6,#f3ecd9);
  border:1px solid var(--rule);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9);
}
.desk-card p{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,.95rem + .9vw,1.55rem);line-height:1.5;
  letter-spacing:.03em;color:var(--ink);margin:0;
}
.desk-card .desk-sub{
  font-family:var(--body);font-style:italic;font-size:1rem;
  letter-spacing:0;color:var(--ink-3);margin-top:1rem;
}

/* Every chapter is another area of the same desk. */
.ground{
  position:relative;
  background:#100b05 url("../img/desk-dim-1400.jpg") center top/cover;
}
@media (min-width:64rem){
  .ground{background-attachment:fixed}
}
.ground::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,7,2,.72),rgba(10,7,2,.55) 30%,
             rgba(10,7,2,.55) 70%,rgba(10,7,2,.78));
}
.ground>*{position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════════════════
   CHAPTER TABS
   ═══════════════════════════════════════════════════════════════ */

#masthead{
  position:fixed;top:0;left:0;right:0;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-100%);
  transition:opacity .6s ease,transform .6s ease,visibility .6s;
  background:linear-gradient(to bottom,rgba(12,8,3,.94),rgba(12,8,3,.5) 62%,transparent);
  padding:0 var(--gutter) .9rem;
}
body.is-open #masthead{opacity:1;visibility:visible;transform:none}
#masthead nav{display:flex;align-items:flex-start;gap:.35rem;
  max-width:80rem;margin-inline:auto;overflow-x:auto;scrollbar-width:none}
#masthead nav::-webkit-scrollbar{display:none}
#masthead ul{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}

.tab-mark{
  font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.2em;
  color:var(--gold-lit);text-decoration:none;padding:.85rem 1.1rem .6rem 0;
  white-space:nowrap;
}
/* Index tabs, cut into the fore-edge of the book. */
#masthead li a{
  display:block;white-space:nowrap;text-decoration:none;
  font-family:var(--body);font-size:.82rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  padding:.75rem .95rem .55rem;
  background:linear-gradient(to bottom,#f2ead6,#dccdaa);
  border:1px solid var(--edge);border-top:0;
  border-radius:0 0 3px 3px;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.7);
  transition:background .2s,color .2s,padding .2s;
}
#masthead li a:hover{
  background:linear-gradient(to bottom,#fffbf0,#eadfc2);
  color:var(--rubric);padding-bottom:.85rem;
}
#masthead .tab-wish a{
  background:linear-gradient(to bottom,#a33a22,#7d2415);color:#f6e7c8;
  border-color:#521408;
}
#masthead .tab-wish a:hover{background:linear-gradient(to bottom,#bd4527,#8e2c19);
  color:#fff4dd}

/* ═══════════════════════════════════════════════════════════════════
   THE PARCHMENT PANEL — every long passage sits on one
   ═══════════════════════════════════════════════════════════════ */

.chapter{padding:var(--breath) var(--gutter)}

.vellum{
  max-width:56rem;margin-inline:auto;
  padding:clamp(2.2rem,5vw,4.5rem) clamp(1.6rem,5vw,4.5rem);
  background:
    linear-gradient(160deg,#fffdf7 0%,#faf4e6 42%,#f2eada 100%);
  border:1px solid var(--edge);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.92),
             inset 0 0 0 1px rgba(255,255,255,.6),
             inset 0 0 60px rgba(154,132,89,.1);
}
.vellum--narrow{max-width:46rem}
.vellum--wide{max-width:68rem}
.vellum+.vellum{margin-top:var(--breath-in)}

.measure{max-width:var(--measure);margin-inline:auto}

/* ── Chapter opener: a spread, verso ornament and recto title ────── */
.opener{
  max-width:68rem;margin:0 auto var(--breath-in);
  background:linear-gradient(160deg,#fffdf7,#f4ecda);
  border:1px solid var(--edge);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.92);
  display:grid;grid-template-columns:1fr;
}
@media (min-width:56rem){
  .opener{grid-template-columns:minmax(0,15rem) 1fr}
}
.opener-verso{
  padding:clamp(1.8rem,4vw,3rem);text-align:center;
  border-bottom:1px solid var(--rule);
  background:linear-gradient(150deg,rgba(200,183,143,.22),transparent);
}
@media (min-width:56rem){
  .opener-verso{border-bottom:0;border-right:1px solid var(--rule)}
}
.opener-numeral{
  font-family:var(--display);font-weight:700;font-size:3.4rem;line-height:1;
  color:var(--gold-deep);letter-spacing:.06em;margin:0 0 1rem;
}
.opener-verso .art{width:min(8rem,60%);margin-inline:auto;color:var(--ink-3);opacity:.75}
.opener-recto{padding:clamp(1.8rem,4vw,3.4rem)}
.opener-kicker{
  font-family:var(--body);font-size:.84rem;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 1rem;
}
.opener h2{margin:0}

/* ── Headings: heavy, inscriptional, easy to read ────────────────── */
h1,h2,h3{font-family:var(--display);margin:0}
h2{
  font-weight:700;text-transform:uppercase;letter-spacing:.055em;
  font-size:clamp(1.9rem,1.15rem + 3.2vw,3.4rem);line-height:1.08;
  color:var(--ink);
}
h3{
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:clamp(1.1rem,.98rem + .6vw,1.35rem);line-height:1.25;
  color:var(--ink);margin-bottom:.6rem;
}
.gilt-rule{
  display:block;width:100%;max-width:14rem;height:0;margin:1.3rem 0 1.6rem;
  border-top:2px solid var(--gold-deep);
  border-bottom:1px solid rgba(107,80,8,.4);padding-bottom:3px;
}
.opener .gilt-rule{margin-bottom:1.4rem}

p{margin:0 0 1.4em}
p:last-child{margin-bottom:0}
em{font-style:italic}

.lead{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,1.05rem + 1.4vw,2rem);line-height:1.42;
  letter-spacing:.02em;color:var(--ink-2);margin-bottom:1.6rem;max-width:32ch;
}
.centred{text-align:center}
.centred .lead,.centred .measure{margin-inline:auto}
.centred .gilt-rule{margin-inline:auto}

/* A true decorated initial: blackletter versal, rubric, in a gilded cell. */
.dropcap::first-letter{
  float:left;font-family:var(--initial);font-weight:400;
  font-size:4.4em;line-height:.76;
  margin:.1em .2em .04em 0;padding:.12em .16em .1em;
  color:var(--rubric);
  background:
    linear-gradient(146deg,rgba(242,222,155,.75),rgba(201,162,39,.28)),
    var(--page-lit);
  border:1px solid var(--gold-deep);
  box-shadow:inset 0 0 0 2px rgba(255,252,240,.75),
             inset 0 0 0 3px rgba(107,80,8,.35),
             0 2px 4px rgba(60,42,10,.24);
}

.marginal{
  font-family:var(--body);font-style:italic;font-size:1rem;line-height:1.7;
  color:var(--ink-3);border-left:2px solid var(--gold-deep);
  padding-left:1.2rem;margin:var(--breath-in) 0 0;max-width:38ch;
}
.principle{
  font-family:var(--display);font-weight:600;letter-spacing:.03em;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.85rem);line-height:1.4;
  color:var(--rubric);text-align:center;max-width:28ch;
  margin:var(--breath-in) auto 0;padding-top:1.8rem;
  border-top:2px solid var(--gold-deep);
}
.ink-link{color:var(--rubric);text-decoration:none;
  border-bottom:1px solid rgba(138,35,18,.42)}
.ink-link:hover{border-bottom-color:var(--rubric)}

/* ── Drawings ────────────────────────────────────────────────────── */
.drawing{margin:var(--breath-in) auto 0;max-width:44rem}
.drawing--wide{max-width:54rem}
.art{width:100%;height:auto;color:var(--ink-2)}
.drawing figcaption{
  font-family:var(--body);font-style:italic;font-size:1rem;line-height:1.65;
  color:var(--ink-3);text-align:center;margin-top:1.4rem;padding-top:1.1rem;
  border-top:1px solid var(--rule);
}
.plates{
  display:grid;gap:var(--breath-in);margin-top:var(--breath-in);
  grid-template-columns:1fr;
}
@media (min-width:52rem){.plates{grid-template-columns:1fr 1fr}}
.plates .drawing{margin-top:0}

/* ── Artifacts lifted from the desk ──────────────────────────────── */
.artifact{
  margin:0;padding:clamp(.7rem,1.6vw,1rem);
  background:linear-gradient(150deg,#3a2a18,#241a0e);
  border:1px solid #150e05;
  box-shadow:0 26px 56px -28px rgba(0,0,0,.9);
}
.artifact img{width:100%}

/* ═══════════════════════════════════════════════════════════════════
   THE ATLAS — the volume, and the folios
   ═══════════════════════════════════════════════════════════════ */

.volume-plate{margin:0 auto var(--breath-in);max-width:40rem}
.volume-plate img{
  width:100%;border:1px solid #150e05;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.95);
}
.volume-plate figcaption{
  font-family:var(--body);font-style:italic;font-size:1rem;color:#cbbb96;
  text-align:center;margin-top:1.3rem;
}

.book-wrap{max-width:64rem;margin:var(--breath-in) auto 0}
.book{
  position:relative;aspect-ratio:3/2;perspective:2600px;
  padding:clamp(.7rem,1.6vw,1.2rem);
  background:
    radial-gradient(120% 90% at 30% 20%,rgba(138,90,48,.42),transparent 60%),
    linear-gradient(150deg,#4a2c17,#33200f 55%,#26170a);
  border:1px solid #150c05;border-radius:3px;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.9),
             inset 0 0 0 1px rgba(201,162,39,.16);
}
.book::before{
  content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  background:
    linear-gradient(135deg,var(--brass) 0 20px,transparent 20px) 0 0/38px 38px no-repeat,
    linear-gradient(225deg,var(--brass) 0 20px,transparent 20px) 100% 0/38px 38px no-repeat,
    linear-gradient(45deg,var(--brass) 0 20px,transparent 20px) 0 100%/38px 38px no-repeat,
    linear-gradient(315deg,var(--brass) 0 20px,transparent 20px) 100% 100%/38px 38px no-repeat;
  opacity:.9;
}
@media (max-width:44rem){.book{aspect-ratio:4/5}}

.book-gutter{
  position:absolute;left:50%;top:0;bottom:0;width:46px;z-index:6;
  transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(40,26,10,.42) 46%,
             rgba(40,26,10,.42) 54%,transparent);
}
.book-ribbon{
  position:absolute;left:50%;top:0;width:12px;height:76%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#5c1810,#9d3323 45%,#6d1f16);
}
.book-ribbon::after{
  content:"";position:absolute;left:0;bottom:-14px;width:12px;height:16px;
  background:linear-gradient(90deg,#5c1810,#9d3323 45%,#6d1f16);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 62%,0 100%);
}
@media (max-width:44rem){.book-gutter{display:none}}

.slots,.spread{position:absolute;inset:clamp(.7rem,1.6vw,1.2rem);
  display:grid;grid-template-columns:1fr 1fr}
.spread{position:static;inset:auto;border-bottom:1px solid var(--rule)}
.js .spread{display:none}
@media (max-width:44rem){
  .slots,.spread{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
}

.page{
  position:relative;overflow:hidden;padding:clamp(1.1rem,2.8vw,2.4rem);
  font-size:clamp(1rem,.94rem + .25vw,1.1rem);line-height:1.74;
  background-color:var(--page-lit);
  background-image:radial-gradient(130% 90% at 50% 0%,#fffefa,transparent 60%);
}
.page--verso{box-shadow:inset -26px 0 40px -28px rgba(46,32,12,.9)}
.page--recto{box-shadow:inset 26px 0 40px -28px rgba(46,32,12,.9)}
@media (max-width:44rem){
  .page{padding:1rem 1.2rem;font-size:.98rem}
  .page--verso{box-shadow:inset 0 -24px 34px -28px rgba(46,32,12,.85)}
  .page--recto{box-shadow:inset 0 24px 34px -28px rgba(46,32,12,.85)}
}
.page-head{
  font-family:var(--display);font-weight:600;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
  margin-bottom:1.1rem;
}
/* Four centuries told by ink and weight, not by four scripts. */
.hand{margin-bottom:1rem;font-size:1.02em;line-height:1.72}
.hand-a{color:#4a3a24;font-style:italic}
.hand-b{color:#2a1f10;font-weight:500}
.hand-c{color:#413320}
.hand-d{color:#1f2c3a}
.hand-stop{color:var(--ink-3);font-style:italic}
.signature{font-family:var(--hand);font-size:1.15em;color:var(--ink-3);
  text-align:right;margin:1.1rem 0 0}
.marginal-note{
  font-family:var(--body);font-style:italic;font-size:.94rem;line-height:1.6;
  color:var(--ink-3);border-left:1px solid var(--rule);padding-left:.8rem;
  margin:1.3rem 0 0;
}
.marginal-note--rubric{color:var(--rubric);border-left-color:var(--rubric)}
.caption{font-family:var(--body);font-style:italic;font-size:.88rem;
  color:var(--ink-3);text-align:center;margin:.7rem 0 0}
.page-art{width:100%;height:auto;color:#54402a;margin:.5rem 0;max-height:42%}
.page-art--tall{max-height:56%;width:auto;margin-inline:auto}
.page-ask{
  font-family:var(--display);font-weight:600;letter-spacing:.04em;
  font-size:clamp(1.2rem,.95rem + 1.2vw,1.7rem);
  color:var(--rubric);text-align:center;margin:24% 0 0;
}
.ruling{position:absolute;inset:12% 10%;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 27px,
    rgba(154,132,89,.22) 27px 28px)}

/* Marks of use, placed clear of the text block */
.ink-blot{
  position:absolute;right:15%;bottom:20%;width:52px;height:42px;
  background:radial-gradient(closest-side,rgba(46,32,14,.45),transparent 72%);
  border-radius:56% 44% 62% 38%/48% 58% 42% 52%;
}
.smudge{position:absolute;left:6%;bottom:5%;width:104px;height:66px;
  background:radial-gradient(closest-side,rgba(96,72,40,.2),transparent 72%);
  transform:rotate(-14deg)}
.wax-blob{
  position:absolute;right:11%;bottom:13%;width:36px;height:32px;
  background:radial-gradient(closest-side at 40% 34%,#a83b26,#7d2415 62%,#54160c);
  border-radius:52% 48% 44% 56%/48% 52% 48% 52%;
}

.leaf{
  position:absolute;top:clamp(.7rem,1.6vw,1.2rem);right:clamp(.7rem,1.6vw,1.2rem);
  width:calc(50% - clamp(.7rem,1.6vw,1.2rem));
  height:calc(100% - 2*clamp(.7rem,1.6vw,1.2rem));
  transform-style:preserve-3d;transform-origin:left center;
  transform:rotateY(0deg);opacity:0;pointer-events:none;z-index:8;
}
.leaf.is-turning{transition:transform 1s cubic-bezier(.62,.02,.32,1)}
.leaf.is-flipped{transform:rotateY(-180deg)}
.leaf-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  background-color:var(--page-lit)}
.leaf-face--front{box-shadow:inset 26px 0 40px -28px rgba(46,32,12,.9)}
.leaf-face--back{transform:rotateY(180deg);
  box-shadow:inset -26px 0 40px -28px rgba(46,32,12,.9)}
.leaf-face>.page{position:absolute;inset:0;box-shadow:none;background:none}
@media (max-width:44rem){.leaf{display:none}}

.book-controls{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:1.8rem}
.folio-count{margin:0;font-family:var(--body);font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:#cbbb96}
.quill-btn{
  font-family:var(--body);font-size:.86rem;letter-spacing:.13em;
  text-transform:uppercase;color:#e2d5b6;background:none;border:0;
  border-bottom:1px solid rgba(201,162,39,.5);padding:.5rem .15rem;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.quill-btn:hover:not(:disabled){color:var(--gold-lit);border-bottom-color:var(--gold)}
.quill-btn:disabled{opacity:.35;cursor:default}
.vellum .folio-count{color:var(--ink-3)}
.vellum .quill-btn{color:var(--ink-2);border-bottom-color:var(--rule)}
.vellum .quill-btn:hover:not(:disabled){color:var(--rubric)}

.no-js .book{aspect-ratio:auto;perspective:none;background:none;
  box-shadow:none;border:0;padding:0}
.no-js .book::before,.no-js .book-gutter,
.no-js .book-controls,.no-js .leaf{display:none}
.no-js .page{min-height:15rem}

/* ═══════════════════════════════════════════════════════════════════
   PROGRESSION — the page actually turns between the two lines
   ═══════════════════════════════════════════════════════════════ */

#progression{position:relative;height:300vh;background:#0b0803}
@media (max-width:44rem){#progression{height:230vh}}
.turn-stage{
  position:sticky;top:0;height:100vh;height:100svh;
  display:grid;place-items:center;padding:var(--gutter);
  perspective:2200px;overflow:hidden;
}
.turn-stage::before{
  content:"";position:absolute;inset:0;
  background:#0b0803 url("../img/desk-dim-1400.jpg") center/cover;
  opacity:.5;
}
.turn-book{position:relative;width:min(46rem,92vw);aspect-ratio:4/3}
@media (max-width:44rem){.turn-book{aspect-ratio:3/4}}
.turn-page{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(2rem,6vw,4.5rem);text-align:center;
  background:linear-gradient(160deg,#fffdf7,#f2eada);
  border:1px solid var(--edge);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.95);
}
.turn-page p{
  font-family:var(--display);font-weight:600;letter-spacing:.03em;
  font-size:clamp(1.5rem,1.05rem + 2.4vw,2.9rem);line-height:1.34;
  color:var(--ink);margin:0;max-width:22ch;
}
.turn-leaf{
  position:absolute;inset:0;transform-origin:left center;
  transform-style:preserve-3d;will-change:transform;z-index:3;
}
.turn-leaf .turn-face{position:absolute;inset:0;backface-visibility:hidden;
  display:grid;place-items:center;
  padding:clamp(2rem,6vw,4.5rem);text-align:center;
  background:linear-gradient(160deg,#fffdf7,#f2eada);
  border:1px solid var(--edge);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.95);
}
.turn-leaf .turn-back{transform:rotateY(180deg)}
.turn-leaf .turn-back .art{width:min(9rem,40%);color:var(--ink-3);opacity:.5}
.turn-under p{color:var(--rubric)}

/* ═══════════════════════════════════════════════════════════════════
   DISCOVERIES — recovered pages. Question, then evidence. No verdict.
   ═══════════════════════════════════════════════════════════════ */

.finds{display:grid;gap:var(--breath);margin-top:var(--breath-in)}
.find{max-width:60rem;margin-inline:auto;width:100%}
.find-ask{
  font-family:var(--display);font-weight:600;letter-spacing:.02em;
  font-size:clamp(1.4rem,1.05rem + 1.7vw,2.2rem);line-height:1.34;
  color:#f6efdd;text-align:center;max-width:26ch;margin:0 auto 1.6rem;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.find-place{
  font-family:var(--body);font-size:.84rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-lit);text-align:center;
  margin:0 0 .9rem;
}
.find-body{
  display:grid;gap:var(--breath-in);align-items:center;grid-template-columns:1fr;
}
@media (min-width:56rem){
  .find-body{grid-template-columns:1.15fr .85fr}
  .find--flip .find-body>.artifact{order:2}
}
.find-margin{
  padding:clamp(1.4rem,3vw,2.2rem);
  background:linear-gradient(160deg,#fffdf7,#f3ecd9);
  border:1px solid var(--edge);
  box-shadow:0 24px 54px -28px rgba(0,0,0,.9);
}
.find-margin .art{width:100%;color:var(--ink-3)}
.find-margin p{
  font-family:var(--body);font-style:italic;font-size:.98rem;line-height:1.65;
  color:var(--ink-3);margin:1.1rem 0 0;text-align:center;
}

/* ═══════════════════════════════════════════════════════════════════
   LEDGER · CHRONICLE · LINKAGE
   ═══════════════════════════════════════════════════════════════ */

.linkage{list-style:none;margin:var(--breath-in) auto 0;padding:0;max-width:var(--measure)}
.linkage li{position:relative;padding:0 0 2.6rem 4.8rem}
.linkage li:last-child{padding-bottom:0}
.linkage li::before{content:"";position:absolute;left:1.55rem;top:3.2rem;bottom:.2rem;
  width:1px;background:linear-gradient(var(--gold-deep),rgba(107,80,8,.15))}
.linkage li:last-child::before{display:none}
.linkage-mark{
  position:absolute;left:0;top:.1rem;width:3.1rem;height:3.1rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:.86rem;color:#3a2b05;
  background:radial-gradient(circle at 34% 26%,#f6e5ae,#c2992c 62%,#8a6a14);
  border:1px solid #5e4708;
  box-shadow:inset 0 1px 2px rgba(255,248,220,.7),0 2px 5px rgba(50,36,8,.35);
}
.linkage h3{color:var(--rubric)}
.linkage p{color:var(--ink-2);margin:0}

.ledger{max-width:var(--measure);margin:var(--breath-in) auto 0;padding:0}
.ledger-row{padding:1.8rem 0;border-top:1px solid var(--rule)}
.ledger-row:last-child{border-bottom:1px solid var(--rule)}
.ledger dt{font-family:var(--display);font-weight:600;font-size:.88rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rubric);margin-bottom:.5rem}
.ledger dd{margin:0;color:var(--ink-2)}
@media (min-width:44rem){
  .ledger-row{display:grid;grid-template-columns:13rem 1fr;gap:2rem}
  .ledger dt{margin-bottom:0;padding-top:.3rem}
}

.chronicle{list-style:none;max-width:var(--measure);margin:var(--breath-in) auto 0;padding:0}
.chronicle li{padding:2.4rem 0;border-top:1px solid var(--rule)}
.chronicle-mark{font-family:var(--display);font-weight:600;font-size:.84rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.6rem}
.chronicle p:last-child{color:var(--ink-2);margin:0}

/* ═══════════════════════════════════════════════════════════════════
   CLOSING
   ═══════════════════════════════════════════════════════════════ */

.closing{
  position:relative;text-align:center;color:#e2d5b6;
  padding:clamp(7rem,18vh,13rem) var(--gutter);
  background:#0b0803;overflow:hidden;
}
.closing-bg{position:absolute;inset:0;z-index:0}
.closing-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.closing::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 48% at 50% 44%,transparent 30%,rgba(6,4,1,.86) 100%);
}
.closing>*{position:relative;z-index:2}
.lantern{
  position:absolute;left:14%;top:16%;width:22rem;height:22rem;z-index:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,206,122,.36),rgba(255,180,80,.08) 46%,transparent 70%);
  animation:flame 7s ease-in-out infinite;
}
.closing.is-lit .lantern{animation:flame 7s ease-in-out infinite,dim 8s ease 2s forwards}
@keyframes dim{to{opacity:.12}}

.closing-quote{margin:0 auto 3.8rem;max-width:38rem}
.closing-quote p{
  font-family:var(--display);font-weight:400;letter-spacing:.03em;
  font-size:clamp(1.4rem,1.05rem + 1.7vw,2.2rem);line-height:1.44;
  margin:0;color:#f6efdd;text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.closing-quote p+p{margin-top:.6em;color:var(--gold-lit)}

.colophon{max-width:32rem;margin-inline:auto}
.colophon-title{
  font-family:var(--display);font-weight:900;letter-spacing:.18em;
  font-size:clamp(2.4rem,1.5rem + 4vw,3.8rem);margin:0 0 .4rem;color:#e8c65c;
  background:linear-gradient(174deg,#f8e9b4,#d9b13a 46%,#a67f18);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.colophon-status{font-size:.86rem;letter-spacing:.3em;text-transform:uppercase;
  color:#cdbc98;margin-bottom:2.8rem}
.colophon-actions{margin-bottom:3rem}
.seal{
  display:inline-block;text-decoration:none;font-family:var(--display);
  font-weight:700;font-size:.88rem;letter-spacing:.18em;text-transform:uppercase;
  color:#1a1206;padding:1rem 2.4rem;
  background:linear-gradient(166deg,#f7e6ae,var(--gold) 52%,#8a6a14);
  border:1px solid #f2de9b;
  box-shadow:0 12px 30px -12px rgba(201,162,39,.75);transition:filter .25s;
}
.seal:hover{filter:brightness(1.08)}

.subscribe{border-top:1px solid rgba(201,162,39,.32);padding-top:2.6rem}
.subscribe label{display:block;font-size:.86rem;letter-spacing:.16em;
  text-transform:uppercase;color:#cdbc98;margin-bottom:1.1rem}
.subscribe-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.subscribe input{
  flex:1 1 15rem;min-width:0;font-family:var(--body);font-size:1.05rem;
  color:#f6efdd;background:rgba(240,231,211,.1);
  border:1px solid rgba(201,162,39,.5);border-radius:0;padding:.8rem 1rem;
}
.subscribe input::placeholder{color:rgba(226,213,182,.55)}
.subscribe input:focus{border-color:var(--gold)}
.quill-btn--solid{color:#1a1206;background:#d9c9a4;border:1px solid #d9c9a4;
  padding:.8rem 1.6rem}
.quill-btn--solid:hover:not(:disabled){background:var(--gold-lit);
  border-color:var(--gold-lit);color:#1a1206}
.subscribe-note{font-size:.9rem;color:#c0b192;margin:1.2rem 0 0}

.colophon-foot{
  background:#080602;color:#c0b192;padding:3.8rem var(--gutter);text-align:center;
  border-top:1px solid rgba(201,162,39,.24);
}
.foot-mark{font-family:var(--display);font-weight:700;font-size:1.3rem;
  letter-spacing:.18em;color:#f6efdd;margin-bottom:1.8rem}
.colophon-foot ul{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;justify-content:center;
  list-style:none;margin:0 0 2rem;padding:0}
.colophon-foot a{color:#c0b192;text-decoration:none;font-size:.84rem;
  letter-spacing:.13em;text-transform:uppercase}
.colophon-foot a:hover{color:var(--gold-lit)}
.foot-fine{font-size:.88rem;line-height:1.7;max-width:38rem;margin-inline:auto;
  color:#a99b7e}

/* Arrivals — opacity and six pixels, on focal elements only. */
.will-rise{opacity:0;transform:translateY(6px)}
.will-rise.is-risen{opacity:1;transform:none;
  transition:opacity 1.1s ease,transform 1.1s ease}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  #reveal{height:100vh}
  #progression{height:auto}
  .turn-stage{position:static;height:auto;padding-block:var(--breath)}
  .turn-book{aspect-ratio:auto;display:flex;flex-direction:column-reverse}
  .turn-page,.turn-leaf{position:static;inset:auto}
  .turn-leaf{transform:none}
  .turn-leaf .turn-back{display:none}
  .turn-leaf .turn-face{position:static;margin-bottom:var(--breath-in)}
  .silence-ask,.silence-answer{opacity:1!important;transform:none!important}
  .keyart-title{opacity:1}
  .will-rise{opacity:1;transform:none}
  #masthead{opacity:1;visibility:visible;transform:none}
  .ground{background-attachment:scroll}
}