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

   Readability is the first constraint, not the last. Body copy sits on
   clean parchment at 18–20px and never over artwork. Decorative hands
   appear inside the book and nowhere else. Gold is ornament only —
   it is never asked to carry a word you have to read.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Parchment, in four clearly separated values. v1.0's tones were too
     close together to read as page, margin, rule and edge. */
  --page:#fbf6ea;        /* the reading surface — kept clean and light */
  --page-lit:#fffcf4;
  --leaf:#f0e7d2;        /* the next sheet down */
  --rule:#c8b78f;        /* hairlines, borders */
  --edge:#9a8459;        /* deckle, shadowed gutter */

  --ink:#1a1208;         /* 16.6:1 */
  --ink-2:#31251a;       /* 12.4:1 */
  --ink-3:#4b3a26;       /* 8.6:1 — the lightest tone permitted for text */
  --rubric:#8a2312;      /* 8.0:1 */

  --gold:#c9a227;
  --gold-lit:#f2de9b;
  --gold-deep:#6b5008;   /* 6.3:1 — the only gold allowed to carry a word */

  --night:#14100b;
  --night-2:#241c12;
  --wood:#2f2114;
  --brass:#c2992c;

  --display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",
            Palatino,"Hoefler Text",Georgia,serif;
  --body:Spectral,"Iowan Old Style","Source Serif Pro",Georgia,
         "Times New Roman",serif;
  --hand:"Snell Roundhand","Apple Chancery","Segoe Script",
         "Lucida Handwriting","Brush Script MT",cursive;
  --hand-2:"Bradley Hand","Segoe Print",Chalkboard,cursive;

  /* 18px floor, 20px ceiling, 1.8 leading, 66–70 characters. */
  --fs:clamp(1.125rem,1.045rem + .34vw,1.25rem);
  --lh:1.8;
  --measure:66ch;

  --gutter:clamp(1.4rem,5vw,4rem);
  --breath:clamp(6rem,14vh,11rem);      /* between folios */
  --breath-in:clamp(2.6rem,5vw,4.2rem); /* within a folio */

  --fibre:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68 0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23f)' opacity='0.38'/%3E%3C/svg%3E");
}

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

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

body{
  margin:0;
  font-family:var(--body);
  font-size:var(--fs);
  font-weight:400;
  line-height:var(--lh);
  color:var(--ink);
  background-color:var(--page);
  background-image:radial-gradient(130% 90% at 50% 0%,#fffdf6,transparent 62%);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* No texture layer over the reading surface. Fibre is confined to the
   leather boards and the plate stage, where nothing has to be read;
   tactility elsewhere comes from discrete marks — an ink blot, a smudge,
   a wax seal — placed clear of the text block. */
body>*{position:relative;z-index:2}

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

:focus-visible{outline:2px solid var(--rubric);outline-offset:3px}
.folio--closing :focus-visible,.colophon-foot :focus-visible,
.folio--revelation :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:.75rem 1.3rem;background:var(--page-lit);color:var(--ink);
  border:1px solid var(--gold-deep);text-decoration:none;font-size:.95rem;
  transition:transform .2s;
}
.skip-link:focus{transform:translate(-50%,0)}

/* ═══════════════════════════════════════════════════════════════════
   1. SILENCE, AND ONE REVEAL
   The plate opens once. There is no wandering around inside it.
   ═══════════════════════════════════════════════════════════════ */

#reveal{position:relative;height:280vh;background:var(--night)}
@media (max-width:44rem){#reveal{height:220vh}}

#stage{position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:var(--night)}

.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 only ambient motion here: cloud shadow, moving as cloud does. */
.cloud-shadow{
  position:absolute;inset:-30% -60%;z-index:3;pointer-events:none;
  background:
    radial-gradient(40% 26% at 24% 32%,rgba(8,6,3,.46),transparent 70%),
    radial-gradient(32% 20% at 68% 58%,rgba(8,6,3,.36),transparent 72%);
  animation:cloud 140s linear infinite;
}
@keyframes cloud{
  from{transform:translate3d(-7%,0,0)}
  to{transform:translate3d(7%,-2%,0)}
}

#stage::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background-image:var(--fibre);opacity:.3;mix-blend-mode:overlay;
}
.vignette{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(76% 60% at 50% 46%,transparent 30%,
    rgba(8,6,3,.55) 76%,rgba(8,6,3,.94) 100%);
}

/* The one place text sits over artwork — so the scrim behind it is
   heavy enough to hold the contrast on its own. */
.silence{
  position:absolute;inset:0;z-index:6;
  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:50%;
  width:min(46rem,92vw);height:min(28rem,60vh);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(6,4,2,.86),rgba(6,4,2,.5) 62%,transparent);
  pointer-events:none;
}
.silence-ask,.silence-answer{position:relative;margin:0;opacity:0}
.silence-ask{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2rem,1.2rem + 3.4vw,3.5rem);line-height:1.16;
  color:#f6efdd;letter-spacing:.01em;
  animation:breathe 3.2s ease 1.1s forwards;
}
.silence-answer{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.2rem,.9rem + 1.5vw,1.9rem);
  color:var(--gold-lit);margin-top:2.4rem;
  animation:breathe 3.4s ease 4.4s forwards;
}
@keyframes breathe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.catchword{
  position:absolute;bottom:clamp(1.6rem,5vh,3.6rem);left:50%;width:20px;
  transform:translateX(-50%);opacity:0;animation:catchword 5.5s ease 8.5s infinite;
}
.catchword svg{width:100%;fill:none;stroke:var(--gold);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
@keyframes catchword{
  0%,100%{opacity:0;transform:translate(-50%,-4px)}
  50%{opacity:.5;transform:translate(-50%,4px)}
}

/* ═══════════════════════════════════════════════════════════════════
   2. MASTHEAD
   ═══════════════════════════════════════════════════════════════ */

#masthead{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:linear-gradient(to bottom,rgba(251,246,234,.98),rgba(251,246,234,.93));
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(201,162,39,.45);
  opacity:0;visibility:hidden;transform:translateY(-100%);
  transition:opacity .6s ease,transform .6s ease,visibility .6s;
}
body.is-open #masthead{opacity:1;visibility:visible;transform:none}

#masthead nav{
  display:flex;align-items:baseline;gap:clamp(.9rem,2.5vw,2.2rem);
  padding:.7rem var(--gutter);max-width:76rem;margin-inline:auto;
  overflow-x:auto;scrollbar-width:none;
}
#masthead nav::-webkit-scrollbar{display:none}
#masthead ul{display:flex;gap:clamp(.8rem,2vw,1.8rem);list-style:none;margin:0;padding:0}
#masthead a{
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  font-family:var(--body);font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;padding-bottom:.2rem;
  border-bottom:1px solid transparent;
}
#masthead a:hover{color:var(--rubric);border-bottom-color:var(--gold)}
.masthead-mark{
  font-family:var(--display)!important;font-size:1.35rem!important;
  font-weight:500!important;letter-spacing:.14em!important;
  color:var(--ink)!important;text-transform:none!important;
}
.masthead-wish{color:var(--rubric)!important}

/* ═══════════════════════════════════════════════════════════════════
   3. THE FOLIO — one idea, one illustration, generous margins
   ═══════════════════════════════════════════════════════════════ */

.folio{padding:var(--breath) var(--gutter);position:relative}

.codex{max-width:76rem;margin-inline:auto}
@media (min-width:62rem){
  .codex{
    display:grid;grid-template-columns:minmax(0,var(--measure)) 15rem;
    gap:clamp(2.5rem,5vw,4.5rem);justify-content:center;align-items:start;
  }
  .codex--centred{display:block}
}
.codex-body{max-width:var(--measure);margin-inline:auto}
.codex--centred .codex-body{text-align:center}
.codex--centred .codex-body .lead{margin-inline:auto}

.codex-margin{
  max-width:var(--measure);margin:var(--breath-in) auto 0;
  padding-top:1.4rem;border-top:1px solid var(--rule);
}
@media (min-width:62rem){
  .codex-margin{margin:.6rem 0 0;padding-top:.4rem;border-top:0;max-width:none}
}

h1,h2,h3{font-family:var(--display);font-weight:400;margin:0}
h2{
  font-size:clamp(2.1rem,1.3rem + 3vw,3.4rem);line-height:1.1;
  letter-spacing:.005em;margin-bottom:1.5rem;
}
h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem);line-height:1.24;margin-bottom:.5rem}

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

.eyebrow{
  font-family:var(--body);font-size:.82rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:1.3rem;line-height:1.5;
}
.eyebrow::after{
  content:"";display:block;width:3rem;height:1px;margin-top:.9rem;
  background:linear-gradient(to right,var(--gold-deep),transparent);
}
.codex--centred .eyebrow::after{margin-inline:auto;
  background:linear-gradient(to right,transparent,var(--gold-deep),transparent)}

.lead{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.45rem,1.1rem + 1.6vw,2.1rem);line-height:1.42;
  color:var(--ink-2);margin-bottom:1.8rem;max-width:34ch;
}

/* A true illuminated capital: rubric letter in a gilded cell. */
.dropcap::first-letter{
  float:left;font-family:var(--display);font-weight:500;
  font-size:4.1em;line-height:.8;
  margin:.08em .18em .02em 0;padding:.11em .14em .07em;
  color:var(--rubric);
  background:
    linear-gradient(148deg,rgba(242,222,155,.62),rgba(201,162,39,.2)),
    var(--page-lit);
  border:1px solid var(--gold-deep);
  box-shadow:inset 0 0 0 2px rgba(255,251,238,.55),0 1px 2px rgba(70,50,14,.2);
}

.marginal{
  font-family:var(--body);font-style:italic;font-size:.95rem;line-height:1.68;
  color:var(--ink-3);margin:0;
}
@media (min-width:62rem){
  .codex-margin .marginal{border-left:1px solid var(--rule);padding-left:1.1rem}
}

.closing-line{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.2rem);
  color:var(--rubric);text-align:center;
  margin:var(--breath-in) auto 0;
}

.ink-link{color:var(--rubric);text-decoration:none;
  border-bottom:1px solid rgba(142,42,22,.4)}
.ink-link:hover{border-bottom-color:var(--rubric)}

/* ── Original drawings ───────────────────────────────────────────── */
.drawing{
  margin:var(--breath-in) auto 0;max-width:44rem;
  padding:clamp(1.4rem,4vw,2.6rem);
  background:var(--page-lit);
  border:1px solid var(--rule);
  box-shadow:0 14px 34px -22px rgba(48,34,12,.4);
}
.drawing--wide{max-width:56rem}
.art{width:100%;height:auto;color:var(--ink-2)}
/* Type inside a <use> instance is styled by presentation attributes on the
   symbol itself — document CSS does not cascade into the shadow tree. */
.drawing figcaption{
  font-family:var(--body);font-style:italic;font-size:.95rem;line-height:1.6;
  color:var(--ink-3);text-align:center;
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--rule);
}

.art--compass{width:min(11rem,60%);margin:0 0 1.4rem;color:var(--gold-deep);opacity:.85}
.art--botanical{width:min(10rem,52%);margin:0 0 1.2rem;color:var(--ink-3);opacity:.9}
@media (max-width:62rem){
  .art--compass,.art--botanical{margin-inline:auto}
}

/* Margin calculations, as an engineer would leave them */
.calc{
  display:flex;flex-direction:column;gap:.35rem;margin:0;
  font-family:var(--body);font-size:.92rem;font-style:italic;
  color:var(--ink-3);line-height:1.5;
}
.calc-rule{display:block;width:8rem;height:1px;background:var(--ink-3);
  opacity:.5;margin:.3rem 0}
.calc-note{color:var(--rubric);font-size:.88rem;margin-top:.3rem}

/* ── Plate I ─────────────────────────────────────────────────────── */
.folio--plate{
  background:radial-gradient(90% 80% at 50% 30%,var(--night-2),var(--night) 74%);
  padding-block:clamp(5rem,12vh,9rem);
  border-bottom:1px solid var(--gold-deep);
}
.plate-mount{margin:0 auto;max-width:44rem;text-align:center}
.plate-frame{
  display:inline-block;padding:clamp(.7rem,2vw,1.2rem);
  background:linear-gradient(150deg,#3a2a16,#241a10);
  border:1px solid var(--gold-deep);
  box-shadow:0 30px 70px -30px #000,inset 0 0 0 1px rgba(242,222,155,.18);
}
.plate-frame picture{border:1px solid rgba(201,162,39,.5)}
.plate-frame img{width:min(620px,80vw);height:auto}
.plate-caption{
  display:block;margin-top:2.2rem;color:#e2d5b6;
}
.plate-number{
  display:block;font-family:var(--body);font-size:.8rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-lit);margin-bottom:.5rem;
}
.plate-title{
  display:block;font-family:var(--display);font-style:italic;
  font-size:clamp(1.3rem,1rem + 1.2vw,1.8rem);color:#f2e8d0;margin-bottom:.9rem;
}
.plate-note{
  display:block;font-size:.98rem;line-height:1.7;color:#c8b894;
  max-width:34rem;margin-inline:auto;
}

/* ── Title folio ─────────────────────────────────────────────────── */
.folio--title{text-align:center;padding-block:clamp(6rem,15vh,11rem)}
.fleuron{width:min(16rem,64%);margin:0 auto;color:var(--gold-deep)}
.fleuron svg{width:100%;height:auto}
.fleuron--foot{margin-top:3rem;transform:rotate(180deg)}
.title-word{
  font-size:clamp(4rem,1.6rem + 12vw,9rem);font-weight:500;line-height:.94;
  letter-spacing:.05em;margin:.32em 0 .3em;color:#6b5008;
  background:linear-gradient(172deg,#9c7714 4%,#7d5f0e 30%,
             #564005 56%,#7d5f0e 78%,#9c7714 98%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,252,240,.9))
         drop-shadow(0 2px 3px rgba(40,28,4,.4));
}
.title-line{
  font-family:var(--display);font-size:clamp(1.6rem,1.1rem + 2.2vw,2.7rem);
  line-height:1.26;letter-spacing:.02em;color:var(--ink);margin-bottom:1.8rem;
}
.title-attrib{
  font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0;
}

/* ── Illuminated pull quotes ─────────────────────────────────────── */
.folio--quote{
  padding-block:clamp(5rem,12vh,9rem);
  border-block:1px solid var(--rule);
}
.illuminated-quote{
  margin:0 auto;max-width:38rem;text-align:center;position:relative;
  padding:clamp(2.2rem,5vw,3.4rem) clamp(1.4rem,4vw,3rem);
}
.illuminated-quote::before,.illuminated-quote::after{
  content:"";position:absolute;width:3.2rem;height:3.2rem;
  border:1px solid var(--gold-deep);opacity:.75;
}
.illuminated-quote::before{top:0;left:0;border-right:0;border-bottom:0}
.illuminated-quote::after{bottom:0;right:0;border-left:0;border-top:0}
.illuminated-quote p{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.75rem,1.2rem + 2.6vw,3rem);line-height:1.3;
  color:var(--ink);margin:0;
}
.illuminated-quote cite{
  display:block;margin-top:1.6rem;font-style:normal;
  font-family:var(--body);font-size:.82rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ── Reality Engine ──────────────────────────────────────────────── */
/* The engineering-notebook character lives in the figure mount — wood and
   brass around the drawing — not as a tint under the paragraphs. */
.folio--engine{border-block:1px solid var(--rule)}
.folio--engine .drawing{
  background:linear-gradient(150deg,#4a3520,#2f2114);
  border:1px solid #1c1409;
  padding:clamp(.9rem,2.4vw,1.5rem);
  box-shadow:0 22px 48px -26px rgba(26,17,5,.75),
             inset 0 0 0 1px rgba(201,162,39,.22);
}
.folio--engine .drawing .art{
  background:var(--page-lit);color:var(--ink-2);
  padding:clamp(1rem,3vw,2rem);border:1px solid var(--edge);
}
.folio--engine .drawing figcaption{
  color:#dccfae;border-top-color:rgba(201,162,39,.35);
}

.linkage{
  list-style:none;margin:var(--breath-in) auto 0;padding:0;
  max-width:var(--measure);counter-reset:none;
}
.linkage li{position:relative;padding:0 0 2.4rem 4.6rem}
.linkage li:last-child{padding-bottom:0}
.linkage li::before{
  content:"";position:absolute;left:1.5rem;top:3.1rem;bottom:.2rem;width:1px;
  background:linear-gradient(var(--gold-deep),rgba(125,95,17,.15));
}
.linkage li:last-child::before{display:none}
.linkage-mark{
  position:absolute;left:0;top:.1rem;width:3rem;height:3rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--body);font-size:.92rem;font-style:italic;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 ──────────────────────────────────────────────────────── */
.ledger{max-width:var(--measure);margin:var(--breath-in) auto 0;padding:0}
.ledger-row{padding:1.6rem 0;border-top:1px solid var(--rule)}
.ledger-row:last-child{border-bottom:1px solid var(--rule)}
.ledger dt{
  font-family:var(--body);font-size:.84rem;font-weight:500;letter-spacing:.2em;
  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:12rem 1fr;gap:2rem}
  .ledger dt{margin-bottom:0;padding-top:.45rem}
}

/* ── Chronicle ───────────────────────────────────────────────────── */
.chronicle{list-style:none;max-width:var(--measure);
  margin:var(--breath-in) auto 0;padding:0}
.chronicle li{padding:2.2rem 0;border-top:1px solid var(--rule)}
.chronicle-mark{
  font-family:var(--body);font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:.5rem;
}
.chronicle h3{color:var(--ink)}
.chronicle p:last-child{color:var(--ink-2);margin:0}
.chronicle-more{max-width:var(--measure);margin:2.4rem auto 0}

/* ── Discoveries ─────────────────────────────────────────────────── */
.entry{
  max-width:52rem;margin:0 auto;padding:var(--breath-in) 0;
  border-bottom:1px solid var(--rule);text-align:center;
}
.entry:last-of-type{border-bottom:0}
.entry-ask{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.55rem,1.1rem + 1.8vw,2.3rem);line-height:1.3;
  color:var(--rubric);max-width:26ch;margin:0 auto 1.8rem;
}
.entry .drawing{margin-top:0}
.entry-evidence{
  max-width:52ch;margin:1.8rem auto 0;color:var(--ink-2);text-align:center;
}
.entry-coda{
  max-width:44ch;margin:var(--breath-in) auto 0;text-align:center;
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.15rem,1rem + .7vw,1.4rem);color:var(--ink-3);
}

/* ── Revelation ──────────────────────────────────────────────────── */
.folio--revelation{
  background:radial-gradient(90% 120% at 50% 50%,var(--night-2),var(--night) 72%);
  padding-block:clamp(8rem,22vh,15rem);
  border-block:1px solid var(--gold-deep);
}
.revelation{margin:0 auto;max-width:46rem;text-align:center}
.revelation p{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,1.1rem + 2.2vw,2.7rem);line-height:1.34;
  margin:0;color:#efe6d2;opacity:0;transform:translateY(10px);
}
.revelation-2{margin-top:1.8em!important;color:var(--gold-lit)!important;font-style:italic}
.revelation.is-lit .revelation-1{opacity:1;transform:none;
  transition:opacity 1.6s ease,transform 1.6s ease}
.revelation.is-lit .revelation-2{opacity:1;transform:none;
  transition:opacity 1.8s ease 2.6s,transform 1.8s ease 2.6s}

/* ═══════════════════════════════════════════════════════════════════
   4. THE ATLAS
   ═══════════════════════════════════════════════════════════════ */

.volume{margin:0 auto var(--breath-in);max-width:34rem}
.art--volume{width:100%;height:auto;
  filter:drop-shadow(0 24px 40px rgba(28,18,6,.45))}

.book-wrap{max-width:64rem;margin:var(--breath-in) auto 0}

/* The binding: boards, brass, and the pages set inside them. */
.book{
  position:relative;aspect-ratio:3/2;
  padding:clamp(.7rem,1.6vw,1.2rem);
  background:
    radial-gradient(120% 90% at 30% 20%,rgba(138,90,48,.4),transparent 60%),
    linear-gradient(150deg,#4a2c17,#33200f 55%,#26170a);
  border:1px solid #150c05;border-radius:3px;
  box-shadow:0 30px 60px -28px rgba(20,13,4,.85),
             inset 0 0 0 1px rgba(201,162,39,.14);
}
.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:.92;
}
@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,.4) 45%,
             rgba(40,26,10,.4) 55%,transparent);
}
.book-ribbon{
  position:absolute;left:50%;top:0;width:12px;height:74%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#5c1810,#9d3323 45%,#6d1f16);
  box-shadow:1px 0 3px rgba(0,0,0,.4);
}
.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(.98rem,.92rem + .25vw,1.08rem);line-height:1.72;
  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:.96rem}
  .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(--body);font-size:.78rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:1.1rem;
}

/* Four hands, four inks, four centuries. Confined to the book. */
.hand{margin-bottom:1rem;font-size:1.04em;line-height:1.7}
/* Four centuries, told by ink colour and weight rather than by four
   scripts. A cursive face is unreadable at paragraph length; it is kept
   for the signatures, which are four words long. */
.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:.92rem;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:.85rem;
  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-style:italic;
  font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);
  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);
}

/* Evidence of use: ink, fingers, wax, a repaired tear, a pressed stem. */
.ink-blot{
  position:absolute;right:16%;bottom:22%;width:54px;height:44px;
  background:radial-gradient(closest-side,rgba(46,32,14,.5),rgba(46,32,14,.16) 70%,transparent);
  border-radius:56% 44% 62% 38%/48% 58% 42% 52%;
  filter:blur(.4px);
}
.ink-blot::after{
  content:"";position:absolute;left:-14px;top:26px;width:11px;height:9px;
  background:rgba(46,32,14,.34);border-radius:60% 40% 50% 50%;
}
.smudge{
  position:absolute;left:6%;bottom:5%;width:110px;height:70px;
  background:radial-gradient(closest-side,rgba(96,72,40,.22),transparent 72%);
  transform:rotate(-14deg);
}
.tear-repair{
  position:absolute;right:-2px;top:26%;width:84px;height:2px;
  transform:rotate(28deg);transform-origin:right center;
  background:linear-gradient(90deg,transparent,rgba(120,96,58,.55));
}
.tear-repair::after{
  content:"";position:absolute;inset:-7px 0;
  background:repeating-linear-gradient(90deg,transparent 0 9px,
    rgba(92,72,44,.65) 9px 11px);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.wax-blob{
  position:absolute;right:12%;bottom:14%;width:38px;height:34px;
  background:radial-gradient(closest-side at 40% 34%,#a83b26,#7d2415 62%,#54160c);
  border-radius:52% 48% 44% 56%/48% 52% 48% 52%;
  box-shadow:0 2px 4px rgba(60,14,6,.45);
}
.wax-blob::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(74,17,9,.8);
  border-radius:50%;
}
.pressed-flower{
  position:absolute;right:14%;top:9%;width:56px;height:56px;transform:rotate(18deg);
  background:
    radial-gradient(closest-side,rgba(150,116,74,.42),transparent) 50% 12%/22px 26px no-repeat,
    radial-gradient(closest-side,rgba(150,116,74,.42),transparent) 12% 50%/26px 22px no-repeat,
    radial-gradient(closest-side,rgba(150,116,74,.42),transparent) 88% 50%/26px 22px no-repeat,
    radial-gradient(closest-side,rgba(150,116,74,.42),transparent) 50% 88%/22px 26px no-repeat,
    radial-gradient(closest-side,rgba(122,90,52,.6),transparent) 50% 50%/14px 14px no-repeat;
}

/* The turning leaf */
.book{perspective:2600px}
.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:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
.quill-btn{
  font-family:var(--body);font-size:.84rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
  background:none;border:0;border-bottom:1px solid var(--rule);
  padding:.5rem .15rem;cursor:pointer;transition:color .2s,border-color .2s;
}
.quill-btn:hover:not(:disabled){color:var(--rubric);border-bottom-color:var(--gold)}
.quill-btn:disabled{opacity:.32;cursor:default}

/* Without JS the folios simply stack, and still read. */
.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}

/* ═══════════════════════════════════════════════════════════════════
   5. CLOSING
   ═══════════════════════════════════════════════════════════════ */

.folio--closing{
  background:radial-gradient(80% 90% at 50% 26%,var(--night-2),var(--night) 76%);
  color:#e2d5b6;text-align:center;
  padding-block:clamp(7rem,18vh,12rem);
  border-top:1px solid var(--gold-deep);
}
.closing-scene{position:relative;width:min(24rem,74vw);margin:0 auto 3.4rem}
.closing-volume svg{width:100%;height:auto;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.7))}
.lantern{
  position:absolute;left:50%;top:34%;width:16rem;height:16rem;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,206,122,.42),
             rgba(255,180,80,.1) 44%,transparent 70%);
  animation:flicker 7s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{opacity:.85}
  45%{opacity:1}
  72%{opacity:.76}
}
.folio--closing.is-lit .lantern{animation:flicker 7s ease-in-out infinite,
  dim 7s ease 1.6s forwards}
@keyframes dim{to{opacity:.14}}

.closing-quote{margin:0 auto 3.8rem;max-width:36rem}
.closing-quote p{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.4rem,1.05rem + 1.7vw,2.1rem);line-height:1.44;
  margin:0;color:#efe6d2;
}
.closing-quote p+p{margin-top:.55em;color:var(--gold-lit);font-style:italic}

.colophon{max-width:32rem;margin-inline:auto}
.colophon-title{
  font-family:var(--display);font-size:clamp(2.4rem,1.5rem + 4vw,3.8rem);
  font-weight:500;letter-spacing:.12em;margin:0 0 .3rem;color:var(--gold-lit);
  background:linear-gradient(172deg,#f7e6ae,var(--gold) 46%,#8a6a14);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.colophon-status{
  font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;
  color:#cdbc98;margin-bottom:2.6rem;
}
.colophon-actions{margin-bottom:3rem}
.seal{
  display:inline-block;text-decoration:none;
  font-family:var(--body);font-size:.85rem;letter-spacing:.18em;
  text-transform:uppercase;color:#1a1206;padding:.95rem 2.2rem;
  background:linear-gradient(166deg,#f7e6ae,var(--gold) 52%,#8a6a14);
  border:1px solid #f2de9b;
  box-shadow:0 10px 26px -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.4rem}
.subscribe label{
  display:block;font-size:.82rem;letter-spacing:.18em;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:1rem;
  color:#efe6d2;background:rgba(240,231,211,.08);
  border:1px solid rgba(201,162,39,.45);border-radius:0;padding:.75rem 1rem;
}
.subscribe input::placeholder{color:rgba(226,213,182,.5)}
.subscribe input:focus{border-color:var(--gold)}
.quill-btn--solid{
  color:#1a1206;background:#d9c9a4;border:1px solid #d9c9a4;padding:.75rem 1.5rem;
}
.quill-btn--solid:hover:not(:disabled){background:var(--gold-lit);
  border-color:var(--gold-lit);color:#1a1206}
.subscribe-note{font-size:.85rem;color:#c0b192;margin:1.2rem 0 0}

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

/* Arrivals: opacity and six pixels. Nothing else moves. */
.will-rise{opacity:0;transform:translateY(6px)}
.will-rise.is-risen{opacity:1;transform:none;
  transition:opacity 1s ease,transform 1s ease}

/* ═══════════════════════════════════════════════════════════════════
   6. 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}
  .silence-ask,.silence-answer,.revelation p{opacity:1!important;transform:none!important}
  .catchword{opacity:.5;animation:none}
  .will-rise{opacity:1;transform:none}
  #masthead{opacity:1;visibility:visible;transform:none}
}