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

   The site is one enormous notebook lying open on a walnut desk. Every
   section is another spread of the same book; the desk never changes;
   there are no webpage boundaries. Text always sits on the page stock
   — never on the desk, never on artwork.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --page:#f7efdc;         /* the leaf stock — warm ivory, no pure white */
  --page-lit:#fdf8ec;
  --rule:#c8b78f;
  --edge:#9a8459;

  --ink:#241708;          /* dark sepia, nearly black — 15.4:1 on --page */
  --ink-2:#38281a;        /* 11.7:1 */
  --ink-3:#4e3b26;        /* 8.9:1 — the floor for text anywhere */
  --rubric:#8a2312;       /* 7.5:1 */

  --gold:#c9a227;
  --gold-lit:#f2de9b;
  --gold-deep:#6b5008;    /* 6.6:1 — the only gold that may carry a word */

  --walnut:#241708;
  --brass:#c2992c;
  --candle:#ffcf8a;

  --folio-1:url("../img/page-1.jpg");
  --folio-2:url("../img/page-2.jpg");
  --folio-3:url("../img/page-3.jpg");
  --folio-4:url("../img/page-4.jpg");
  --folio-5:url("../img/page-5.jpg");

  --display:Cinzel,"Palatino Linotype",Palatino,Georgia,serif;
  --body:Alegreya,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --script:Caveat,"Segoe Print","Bradley Hand",cursive;
  --versal:UnifrakturMaguntia,Cinzel,Georgia,serif;

  --fs:clamp(1.25rem,1.13rem + .5vw,1.44rem);   /* 20 → 23px */
  --gutter:clamp(1rem,4vw,3.5rem);
  --breath:clamp(6rem,14vh,12rem);

  /* wood grain: turbulence, never behind text */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23w)' opacity='0.5'/%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:#170f07;
}

/* The desk. Grain is baked into the ground itself, beneath everything. */
body{
  margin:0;font-family:var(--body);font-size:var(--fs);font-weight:500;line-height:1.76;
  color:var(--ink);
  background-color:#1d1309;
  background-image:
    radial-gradient(120% 90% at 50% 12%,rgba(120,78,38,.4),transparent 58%),
    radial-gradient(90% 70% at 50% 108%,rgba(0,0,0,.55),transparent 60%),
    var(--grain),
    linear-gradient(#241708,#1a1108);
  background-blend-mode:normal,normal,overlay,normal;
  background-attachment:fixed;
  overflow-x:hidden;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
@media (max-width:44rem){body{background-attachment:scroll}}

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}
.closing :focus-visible,.colophon-foot :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)}

/* ═══════════════════════════════════════════════════════════════════
   BOOKMARKS — ribbons slipped into the book, hanging from the top
   ═══════════════════════════════════════════════════════════════ */

#masthead{
  position:fixed;top:0;left:0;right:0;z-index:60;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(-102%);
  transition:opacity .7s ease,transform .7s ease,visibility .7s;
}
body.is-open #masthead{opacity:1;visibility:visible;transform:none}
#masthead nav{max-width:76rem;margin-inline:auto;padding:0 var(--gutter)}
#masthead ul{
  display:flex;gap:clamp(.35rem,1vw,.8rem);justify-content:center;
  list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;pointer-events:auto;
}
#masthead ul::-webkit-scrollbar{display:none}

.bm a{
  display:block;position:relative;text-decoration:none;white-space:nowrap;
  font-family:var(--body);font-weight:700;font-size:.8rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:.9rem .8rem .7rem;color:#f8ecd2;
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 8px),0 100%);
  box-shadow:inset 0 -6px 10px -6px rgba(0,0,0,.55);
  transition:padding .2s;
}
.bm a:hover{padding-top:1.25rem}
.bm-1 a{background:linear-gradient(105deg,#5c1810,#9d3323 45%,#6d1f16)}
.bm-2 a{background:linear-gradient(105deg,#1e3a44,#356070 45%,#162c34)}
.bm-3 a{background:linear-gradient(105deg,#5a4a14,#8a6a14 45%,#4a3c0e);color:#fdf3d0}
.bm-4 a{background:linear-gradient(105deg,#2c3a20,#4a6034 45%,#22301a)}
.bm-5 a{background:linear-gradient(105deg,#4a2c17,#6d4526 45%,#38210f)}
.bm-6 a{background:linear-gradient(105deg,#3a2438,#5c3a58 45%,#2c1a2a)}
.bm-7 a{background:linear-gradient(105deg,#7d2415,#b8452a 45%,#611a0c)}
.bm-8 a{background:linear-gradient(105deg,#20303e,#3a5468 45%,#182430)}

/* ═══════════════════════════════════════════════════════════════════
   THE SPREAD — the one repeating structure
   ═══════════════════════════════════════════════════════════════ */

.chapterless{padding:var(--breath) var(--gutter)}
.chapterless+.chapterless{padding-top:0}
.chapterless .spread+.spread{margin-top:var(--breath)}

.spread{
  position:relative;max-width:74rem;margin-inline:auto;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(160deg,var(--page-lit) 0%,var(--page) 55%,#efe4c9 100%);
  border:1px solid #171008;
  border-radius:6px 8px 7px 5px/7px 5px 8px 6px;   /* faint deckle irregularity */
  box-shadow:
    0 2px 0 #d9cca8,0 4px 0 #cfc09a,0 6px 0 #c2b189,      /* the leaves beneath */
    0 34px 70px -30px rgba(0,0,0,.92),
    inset 0 0 90px rgba(154,132,89,.14);
}
.spread::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent 46.5%,rgba(74,52,24,.26) 49.6%,
    rgba(46,30,12,.4) 50%,rgba(74,52,24,.26) 50.4%,transparent 53.5%);
}
@media (max-width:52rem){
  .spread{grid-template-columns:1fr}
  .spread::after{display:none}
}

.leafside{
  position:relative;overflow:hidden;z-index:0;
  padding:clamp(1.6rem,4.5vw,4rem) clamp(1.3rem,4vw,3.6rem);
}
/* Every leaf is one of the five painted folios, with a centre lift — a
   radial lightening where the paragraphs sit, gone before the painted
   margins. Amplitudes measured; see the README audit. The paintings
   carry script, so they are never mirrored. */
.leafside::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(80% 74% at 50% 46%,rgba(252,246,232,.44),
      rgba(252,246,232,.18) 56%,transparent 80%),
    var(--pg,var(--folio-1));
  background-size:100% 100%,cover;
  background-position:center,center;
}

/* which folio faces which leaf */
.spread--first .leafside--verso{--pg:var(--folio-1)}
.spread--first .leafside--recto{--pg:var(--folio-3)}
#observations .spread:nth-of-type(1) .leafside--verso{--pg:var(--folio-4)}
#observations .spread:nth-of-type(1) .leafside--recto{--pg:var(--folio-5)}
#observations .spread:nth-of-type(2) .leafside--verso{--pg:var(--folio-2)}
#observations .spread:nth-of-type(2) .leafside--recto{--pg:var(--folio-1)}
#world .leafside--verso{--pg:var(--folio-1)}
#world .leafside--recto{--pg:var(--folio-2)}
#atlas .leafside--verso{--pg:var(--folio-5)}
#atlas .leafside--recto{--pg:var(--folio-1)}
#engine .leafside--verso{--pg:var(--folio-4)}
#engine .leafside--recto{--pg:var(--folio-2)}
#discoveries .spread:nth-of-type(1) .leafside--verso{--pg:var(--folio-2)}
#discoveries .spread:nth-of-type(1) .leafside--recto{--pg:var(--folio-5)}
#discoveries .spread:nth-of-type(2) .leafside--verso{--pg:var(--folio-3)}
#discoveries .spread:nth-of-type(2) .leafside--recto{--pg:var(--folio-2)}
#discoveries .spread:nth-of-type(3) .leafside--verso{--pg:var(--folio-5)}
#discoveries .spread:nth-of-type(3) .leafside--recto{--pg:var(--folio-4)}
#discoveries .spread:nth-of-type(4) .leafside--verso{--pg:var(--folio-4)}
#discoveries .spread:nth-of-type(4) .leafside--recto{--pg:var(--folio-1)}
#discoveries .spread:nth-of-type(5) .leafside--verso{--pg:var(--folio-2)}
#discoveries .spread:nth-of-type(5) .leafside--recto{--pg:var(--folio-3)}
#discoveries .spread:nth-of-type(6) .leafside--verso{--pg:var(--folio-5)}
#discoveries .spread:nth-of-type(6) .leafside--recto{--pg:var(--folio-1)}
#chronicle .leafside--verso{--pg:var(--folio-1)}
#chronicle .leafside--recto{--pg:var(--folio-5)}
.closing .leafside--verso{--pg:var(--folio-2)}
.closing .leafside--recto{--pg:var(--folio-3)}
.leafside--verso{box-shadow:inset -30px 0 46px -34px rgba(46,32,12,.8)}
.leafside--recto{box-shadow:inset 30px 0 46px -34px rgba(46,32,12,.8)}
@media (max-width:52rem){
  .leafside--verso{box-shadow:inset 0 -26px 38px -32px rgba(46,32,12,.7)}
  .leafside--recto{box-shadow:inset 0 26px 38px -32px rgba(46,32,12,.7)}
}

/* ── The reading measure never exceeds ~62ch inside a leaf ────────── */
.leafside>p,.leafside>h2,.leafside>h3,.leafside>ul,.leafside>form,
.leafside>blockquote{max-width:62ch}

/* ═══════════════════════════════════════════════════════════════════
   TYPE
   ═══════════════════════════════════════════════════════════════ */

h1,h2,h3{font-family:var(--display);margin:0;color:var(--ink)}
h2{
  font-weight:900;letter-spacing:.03em;
  font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem);line-height:1.05;
  margin-bottom:.4rem;
}
h2 .nb{white-space:nowrap}
h3{
  font-weight:700;letter-spacing:.05em;
  font-size:clamp(1.12rem,1rem + .55vw,1.4rem);line-height:1.3;
  color:var(--rubric);margin:1.9em 0 .55em;
}
.leafside>h3:first-child{margin-top:0}

.gilt-rule{
  display:block;width:100%;max-width:13rem;height:0;margin:1.2rem 0 1.5rem;
  border-top:2px solid var(--gold-deep);
  border-bottom:1px solid rgba(107,80,8,.4);padding-bottom:3px;
}
.kicker{
  font-family:var(--display);font-weight:700;font-size:.86rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);
  margin:0 0 1rem;
}

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

.lead{
  font-family:var(--body);font-style:italic;font-weight:500;
  font-size:clamp(1.35rem,1.08rem + 1.2vw,1.9rem);line-height:1.46;
  color:var(--ink-2);margin-bottom:1.6em;max-width:32ch;
}

/* Illuminated capital: blackletter versal, gold-leaf cell, ink filigree. */
.dropcap::first-letter{
  float:left;font-family:var(--versal);font-weight:400;
  font-size:4.6em;line-height:.74;
  margin:.1em .22em .05em 0;padding:.13em .17em .1em;
  color:var(--rubric);
  background:
    radial-gradient(120% 90% at 24% 18%,rgba(255,250,228,.95),transparent 44%),
    linear-gradient(146deg,#f2de9b 0%,#d9b64a 42%,#ab8318 100%);
  border:1px solid #5e4708;
  border-radius:2px;
  box-shadow:
    inset 0 0 0 2px rgba(255,252,240,.8),
    inset 0 0 0 3.5px rgba(94,71,8,.5),
    0 2px 5px rgba(60,42,10,.3);
}

.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)}

/* ── The field hand ──────────────────────────────────────────────── */
.obs{
  font-family:var(--script);font-weight:700;
  font-size:clamp(1.5rem,1.3rem + .8vw,1.9rem);line-height:1.48;
  color:var(--ink);max-width:26ch;margin:0 0 1.2em;
}
.obs em{font-weight:600;color:var(--ink-2)}
.obs--faint{color:var(--ink-3);font-weight:600;font-size:1.4rem;
  transform:rotate(-1.2deg)}
.obs--struck{color:var(--ink-3);text-decoration:line-through;
  text-decoration-thickness:2px;text-decoration-color:rgba(138,35,18,.75);
  margin-bottom:.2em}
.obs--correct{color:var(--rubric);font-size:1.25rem;transform:rotate(-.8deg);
  margin-left:1.4em}
.obs-cap{
  font-family:var(--script);font-weight:600;font-size:1.32rem;line-height:1.42;
  color:var(--ink-2);margin-top:.55rem;
}
.find-place{
  font-family:var(--display);font-weight:700;font-size:.95rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--rubric);
  margin:0 0 .6rem;
}
.find-ask{
  font-family:var(--script);font-weight:700;
  font-size:clamp(1.65rem,1.3rem + 1.5vw,2.45rem);line-height:1.32;
  color:var(--ink);max-width:22ch;margin:0 0 1.2em;
}
.kk,.ask{max-width:none}
.ask{
  font-family:var(--script);font-weight:700;
  font-size:clamp(2.5rem,1.5rem + 4.4vw,4.7rem);line-height:1.14;
  color:var(--ink);margin:12% 0 0;transform:rotate(-1deg);
}
.found{
  font-family:var(--script);font-weight:700;
  font-size:clamp(1.55rem,1.25rem + 1.3vw,2.15rem);line-height:1.35;
  color:var(--rubric);
  margin:2.4rem 0 0 10%;transform:rotate(-2deg);max-width:18ch;
  padding:.28em .55em .32em;
  background:radial-gradient(closest-side,rgba(252,246,232,.85),
    rgba(252,246,232,.4) 72%,transparent);
  opacity:0;transition:opacity 2.8s ease;
}
.found.is-found{opacity:1}
.no-js .found{opacity:1}

/* ── Figures and margins ─────────────────────────────────────────── */
.fig{margin:1rem 0 1.6rem}
.fig--small{max-width:22rem}
.fig--tall{max-width:17rem;margin-inline:auto}
/* Sketches sit directly on the folios: transparent, darkened, with a
   hair of halo so the lightest construction lines still read. */
.art{width:100%;height:auto;color:#2b1e0e;
  filter:drop-shadow(0 0 .4px rgba(43,30,14,.6))}
.art--sm{max-width:9rem}
.clutter .art{filter:none}

.mgn{margin:1.2rem 0}
.mgn .art{color:#39290f;opacity:1}
.mgn--tl{max-width:15rem}
.mgn--mid{max-width:12rem}
.mgn--low{max-width:16rem;margin-top:2rem}
@media (min-width:52rem){
  .mgn--tl{margin-top:.4rem}
  .mgn--low{margin-left:auto}
}

.mgn-note{
  font-family:var(--body);font-style:italic;font-weight:500;font-size:1.08rem;line-height:1.66;
  color:var(--ink-2);border-left:2px solid var(--rubric);
  padding-left:1.1rem;margin:1.8rem 0;max-width:36ch;
}
.mgn-note p{margin:0}

/* ── The simulates list ──────────────────────────────────────────── */
.simulates{
  list-style:none;margin:.4rem 0 0;padding:0;
  columns:2;column-gap:2.4rem;max-width:30rem;
}
@media (min-width:64rem){.simulates{columns:3;max-width:none}}
.simulates li{
  break-inside:avoid;padding:.28em 0 .28em 1.3em;position:relative;
  font-size:1.12rem;font-weight:500;color:var(--ink);
}
.simulates li::before{
  content:"";position:absolute;left:0;top:.86em;width:.55em;height:.55em;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#f2de9b,#c9a227 60%,#8a6a14);
  box-shadow:0 1px 1px rgba(60,42,10,.4);
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE IMPERFECTIONS — subtle, and always clear of the text block
   ═══════════════════════════════════════════════════════════════ */

.stain--ring{
  position:absolute;width:92px;height:84px;border-radius:50%;
  right:8%;bottom:6%;
  border:10px solid rgba(150,112,52,.14);
  box-shadow:inset 0 0 10px rgba(150,112,52,.12),0 0 8px rgba(150,112,52,.1);
  filter:blur(.5px);transform:rotate(-8deg);
}
.stain--ring.stain--b{right:auto;left:10%;bottom:8%;transform:scale(.8)}
.stain--ring.stain--c{right:14%;top:10%;bottom:auto;transform:scale(.7)}
.stain--tea{
  position:absolute;left:12%;bottom:4%;width:150px;height:90px;
  background:radial-gradient(closest-side,rgba(150,112,52,.16),rgba(150,112,52,.05) 60%,transparent);
  border-radius:60% 40% 55% 45%/50% 60% 40% 50%;filter:blur(1px);
}
.stain--tea.stain--b{left:auto;right:8%;bottom:10%;transform:scale(.7)}
.burn--corner{
  position:absolute;right:-26px;top:-26px;width:110px;height:110px;
  background:radial-gradient(circle at 100% 0%,rgba(38,22,8,.55),
    rgba(96,58,22,.3) 46%,rgba(150,112,52,.12) 66%,transparent 78%);
  border-radius:0 0 0 100%;
}
.burn--edge{
  position:absolute;right:-18px;bottom:18%;width:70px;height:150px;
  background:radial-gradient(circle at 100% 50%,rgba(38,22,8,.5),
    rgba(96,58,22,.26) 50%,transparent 76%);
}
.wax-drip{
  position:absolute;right:10%;bottom:12%;width:34px;height:30px;
  background:radial-gradient(closest-side at 40% 32%,#a83b26,#7d2415 62%,#54160c);
  border-radius:52% 48% 44% 56%/48% 52% 48% 52%;
  box-shadow:0 2px 4px rgba(60,14,6,.35);
}
.wax-drip::after{
  content:"";position:absolute;left:8px;top:-14px;width:8px;height:16px;
  background:linear-gradient(#a83b26,#7d2415);border-radius:40% 40% 50% 50%;
}
.wax-drip--b{right:16%;bottom:6%;transform:scale(.8) rotate(14deg)}
.wax-drip--c{right:6%;bottom:auto;top:8%;transform:scale(.75)}
.fold{
  position:absolute;left:0;bottom:0;width:120px;height:120px;pointer-events:none;
  background:linear-gradient(45deg,rgba(46,32,12,.16) 0 1px,
    rgba(255,252,240,.5) 2px 3px,transparent 4px 100%);
}
.fold--b{left:auto;right:0;transform:scaleX(-1)}
.repair{
  position:absolute;right:-2px;top:24%;width:90px;height:2px;
  transform:rotate(26deg);transform-origin:right center;
  background:linear-gradient(90deg,transparent,rgba(120,96,58,.5));
}
.repair::after{
  content:"";position:absolute;inset:-7px 0;
  background:repeating-linear-gradient(90deg,transparent 0 9px,
    rgba(92,72,44,.6) 9px 11px);
}
.foxing{
  position:absolute;left:6%;top:8%;width:130px;height:90px;pointer-events:none;
  background:
    radial-gradient(4px 4px at 12% 30%,rgba(150,112,52,.3),transparent),
    radial-gradient(3px 3px at 44% 12%,rgba(150,112,52,.24),transparent),
    radial-gradient(5px 5px at 70% 48%,rgba(150,112,52,.2),transparent),
    radial-gradient(3px 3px at 28% 72%,rgba(150,112,52,.26),transparent),
    radial-gradient(4px 4px at 88% 80%,rgba(150,112,52,.18),transparent);
}
.foxing--b{left:auto;right:10%;top:auto;bottom:10%}
.pressed{
  position:absolute;right:8%;top:7%;width:60px;height:76px;transform:rotate(16deg);
  background:
    radial-gradient(closest-side,rgba(141,134,184,.5),transparent) 50% 16%/16px 22px no-repeat,
    radial-gradient(closest-side,rgba(141,134,184,.44),transparent) 24% 40%/14px 19px no-repeat,
    radial-gradient(closest-side,rgba(141,134,184,.44),transparent) 74% 42%/14px 19px no-repeat,
    radial-gradient(closest-side,rgba(92,122,74,.5),transparent) 50% 74%/12px 30px no-repeat;
  filter:blur(.4px);
}
.pressed--b{right:12%;top:auto;bottom:14%;transform:rotate(-22deg) scale(.9)}
.ink-blot{
  position:absolute;right:15%;bottom:20%;width:52px;height:42px;
  background:radial-gradient(closest-side,rgba(46,32,14,.4),transparent 72%);
  border-radius:56% 44% 62% 38%/48% 58% 42% 52%;
}

/* ═══════════════════════════════════════════════════════════════════
   THE OPENING
   ═══════════════════════════════════════════════════════════════ */

.opening{
  min-height:100vh;min-height:100svh;
  display:grid;place-items:center;
  padding:clamp(3rem,8vh,6rem) var(--gutter);
  position:relative;overflow:hidden;
}
.opening-well{position:relative;width:min(74rem,100%)}

.candleglow{
  position:absolute;left:50%;top:44%;width:150%;aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,207,138,.16),
    rgba(255,190,110,.05) 42%,transparent 66%);
  animation:flame 5.6s ease-in-out infinite;
}
@keyframes flame{0%,100%{opacity:1}38%{opacity:.9}62%{opacity:.97}80%{opacity:.88}}

.dust{position:absolute;inset:-4%;pointer-events:none;z-index:7;overflow:hidden}
.dust::before,.dust::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 60%,rgba(255,232,190,.7),transparent),
    radial-gradient(1px 1px at 40% 30%,rgba(255,232,190,.5),transparent),
    radial-gradient(1.8px 1.8px at 66% 74%,rgba(255,232,190,.55),transparent),
    radial-gradient(1px 1px at 84% 44%,rgba(255,232,190,.4),transparent);
  animation:drift 40s ease-in-out infinite alternate;
}
.dust::after{animation-duration:58s;animation-delay:-16s;opacity:.6}
@keyframes drift{from{transform:translate3d(0,1.5vh,0)}to{transform:translate3d(2vw,-3vh,0)}}

.clutter{position:absolute;z-index:1;pointer-events:none;opacity:.5}
.clutter .art{color:#8a744e}
.clutter--quill{left:-3%;bottom:-4%;width:clamp(9rem,22vw,15rem);transform:rotate(-6deg)}
.clutter--compass{right:-2%;top:-6%;width:clamp(6rem,14vw,10rem);transform:rotate(12deg)}
.clutter--sheet{right:-4%;bottom:-6%;width:clamp(9rem,20vw,14rem);transform:rotate(8deg)}
@media (max-width:52rem){.clutter{display:none}}

/* ── The establishing shot ───────────────────────────────────────── */
.photo-scene{
  position:absolute;inset:0;z-index:6;overflow:hidden;
  opacity:1;visibility:visible;
  transition:opacity 1s ease,visibility 1s;
}
.photo-scene img{
  width:100%;height:100%;object-fit:cover;object-position:54% 42%;
  transform-origin:54.5% 43%;transform:scale(1.02);
  transition:transform 3.2s cubic-bezier(.34,.01,.36,1);
}
body.is-push .photo-scene img{transform:scale(1.34)}
body.is-staged .photo-scene{opacity:0;visibility:hidden}
/* the room beyond the desk stays dark */
.photo-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(94% 82% at 54% 42%,transparent 46%,
    rgba(13,8,3,.55) 92%,rgba(13,8,3,.8) 100%);
}
.no-js .photo-scene{display:none}

.tome{position:relative;z-index:2;perspective:2800px;
  opacity:0;transition:opacity 1s ease}
body.is-staged .tome,.no-js .tome{opacity:1}
.tome .spread{box-shadow:
  0 2px 0 #d9cca8,0 4px 0 #cfc09a,0 6px 0 #c2b189,0 9px 0 #14100a,
  0 44px 90px -34px rgba(0,0,0,.95)}

.tome-cover{
  position:absolute;inset:0;z-index:10;
  transform-origin:left center;transform-style:preserve-3d;
  transform:rotateY(0deg);
  transition:transform 3.6s cubic-bezier(.5,.02,.26,1);
}
body.is-opened .tome-cover{transform:rotateY(-166deg)}
.cover-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:8px}
/* The cover wears the photograph: the same view the visitor has just been
   looking at, so the establishing shot itself appears to hinge open. */
.cover-face--front{
  overflow:hidden;
  background:#241708 url("../img/photo-1600.jpg") 54.5% 44%/auto 120% no-repeat;
  box-shadow:0 30px 70px -26px rgba(0,0,0,.95),
             inset 0 0 90px rgba(9,5,1,.55);
}
.cover-face--front::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 86% at 54% 44%,transparent 52%,
    rgba(13,8,3,.5) 96%);
}
}
.cover-face--back{
  transform:rotateY(180deg);
  background:
    linear-gradient(160deg,#efe4c9,#e2d3ae);
  border:1px solid #171008;
  box-shadow:inset 0 0 80px rgba(120,94,52,.35);
}
/* pastedown label on the inside of the cover */
.cover-face--back::after{
  content:"ex libris — the stewards of the valley";
  position:absolute;left:50%;top:12%;transform:translateX(-50%);
  font-family:var(--script);font-size:clamp(.9rem,2vw,1.3rem);
  color:#6a5432;white-space:nowrap;
}
@media (max-width:52rem){
  .tome-cover{transition-duration:2.8s}
}
body.is-hurried .photo-scene{transition-duration:.45s}
body.is-hurried .photo-scene img{transition-duration:.6s}
body.is-hurried .tome{transition-duration:.5s}
body.is-hurried .tome-cover{transition-duration:1.3s}
.no-js .tome-cover{display:none}

.catchword{
  position:absolute;left:50%;bottom:-3.4rem;width:18px;z-index:3;
  transform:translateX(-50%);opacity:0;transition:opacity 1s ease 5.5s;
}
body.is-opened .catchword{opacity:.45}
.catchword svg{width:100%;fill:none;stroke:var(--gold);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.no-js .catchword{opacity:.45}

/* ═══════════════════════════════════════════════════════════════════
   THE REVEAL — the plate comes alive, once
   ═══════════════════════════════════════════════════════════════ */

#reveal{position:relative;height:420vh;background:#0b0702;margin-top:var(--breath)}
@media (max-width:44rem){#reveal{height:320vh}}
#stage{position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:#0b0702}
.plate{position:absolute;inset:0;overflow:hidden}
.plate-img{
  position:absolute;max-width:none;
  will-change:transform;backface-visibility:hidden;
}
.reveal-iris{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  --iris:34%;
  background:radial-gradient(circle at 50% 50%,
    transparent calc(var(--iris)*.62),
    rgba(9,6,1,.72) calc(var(--iris)*1.06),
    rgba(9,6,1,.97) calc(var(--iris)*1.7));
}
.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;
}
.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));
}
.title-line{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,.85rem + 1vw,1.5rem);line-height:1.4;
  letter-spacing:.1em;color:#f6efdd;margin:0 0 1rem;
  text-shadow:0 2px 10px rgba(0,0,0,.95);
}
.title-attrib{
  font-family:var(--body);font-size:.92rem;letter-spacing:.16em;
  text-transform:uppercase;color:#cbbb96;margin:0;
  text-shadow:0 2px 8px rgba(0,0,0,.95);
}

/* ═══════════════════════════════════════════════════════════════════
   PROGRESSION — one leaf, one turn
   ═══════════════════════════════════════════════════════════════ */

#progression{position:relative;height:300vh}
@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-book{position:relative;width:min(46rem,92vw);aspect-ratio:4/3}
@media (max-width:44rem){.turn-book{aspect-ratio:3/4}}
.turn-page,.turn-leaf .turn-face{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(2rem,6vw,4.5rem);text-align:center;
  background:
    radial-gradient(78% 70% at 50% 48%,rgba(252,246,232,.46),
      rgba(252,246,232,.2) 56%,transparent 80%),
    var(--folio-1) center/cover,
    linear-gradient(160deg,var(--page-lit),#efe4c9);
  border:1px solid #171008;border-radius:6px;
  box-shadow:0 40px 90px -36px rgba(0,0,0,.95);
}
.turn-page p,.turn-face p{
  font-family:var(--display);font-weight:700;letter-spacing:.02em;
  font-size:clamp(1.5rem,1.05rem + 2.4vw,2.9rem);line-height:1.34;
  color:var(--ink);margin:0;max-width:22ch;
}
.turn-under p{color:var(--rubric)}
.turn-leaf{
  position:absolute;inset:0;transform-origin:left center;
  transform-style:preserve-3d;will-change:transform;z-index:3;
}
.turn-leaf .turn-face{backface-visibility:hidden}
.turn-leaf .turn-back{transform:rotateY(180deg)}
.turn-leaf .turn-back .art{width:min(9rem,40%);color:var(--ink-3);opacity:.5}

/* ═══════════════════════════════════════════════════════════════════
   CLOSING & FOOTER
   ═══════════════════════════════════════════════════════════════ */

.closing{padding:var(--breath) var(--gutter)}
.closing-quote{margin:6% 0 0}
.closing-quote p{
  font-family:var(--display);font-weight:700;letter-spacing:.02em;
  font-size:clamp(1.4rem,1.05rem + 1.7vw,2.2rem);line-height:1.42;
  margin:0;color:var(--ink);
}
.closing-quote p+p{margin-top:.6em;color:var(--gold-deep);font-style:normal}

/* The closing plate — a second artwork, laid onto the last page above
   the colophon. A raster plate gets a mount and a shadow (unlike the
   drawn sketches, which sit straight on the paint), so it reads as
   something placed into the book rather than printed on it. */
.closing-plate{
  margin:0 auto clamp(2.2rem,5vw,3.2rem);
  max-width:min(100%,26rem);
  padding:clamp(.45rem,1.3vw,.75rem);
  background:linear-gradient(160deg,rgba(253,249,238,.92),rgba(243,235,215,.84));
  border:1px solid rgba(122,98,58,.5);
  box-shadow:inset 0 0 0 1px rgba(255,253,246,.6),
             0 14px 34px -16px rgba(35,22,8,.8);
  transform:rotate(-.6deg);
}
.closing-plate img{width:100%;border:1px solid rgba(60,42,18,.32)}
@media (max-width:52rem){.closing-plate{transform:none}}

.colophon-title{
  font-family:var(--display);font-weight:900;letter-spacing:.14em;
  font-size:clamp(2.2rem,1.4rem + 3.6vw,3.4rem);margin:0 0 .2rem;
  color:var(--gold-deep);
}
.colophon-status{
  font-family:var(--display);font-weight:600;font-size:.82rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);
  margin:0 0 2rem;
}
.colophon-actions{margin:0 0 2.4rem}
.seal{
  display:inline-block;text-decoration:none;font-family:var(--display);
  font-weight:700;font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;
  color:#1a1206;padding:1rem 2.2rem;
  background:linear-gradient(166deg,#f7e6ae,var(--gold) 52%,#8a6a14);
  border:1px solid #5e4708;
  box-shadow:0 3px 0 #4a3708,0 10px 22px -10px rgba(60,42,10,.6);
  transition:filter .25s;
}
.seal:hover{filter:brightness(1.07)}

.subscribe{border-top:1px solid var(--rule);padding-top:1.8rem;max-width:30rem}
.subscribe label{
  display:block;font-family:var(--display);font-weight:600;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:.9rem;
}
.subscribe-row{display:flex;flex-wrap:wrap;gap:.6rem}
.subscribe input{
  flex:1 1 13rem;min-width:0;font-family:var(--body);font-size:1.05rem;
  color:var(--ink);background:rgba(255,252,242,.7);
  border:1px solid var(--edge);border-radius:0;padding:.75rem .9rem;
}
.subscribe input::placeholder{color:#8a7452}
.subscribe input:focus{border-color:var(--gold-deep)}
.quill-btn{
  font-family:var(--display);font-weight:700;font-size:.84rem;
  letter-spacing:.13em;text-transform:uppercase;color:#f8ecd2;
  background:linear-gradient(105deg,#5c1810,#9d3323 45%,#6d1f16);
  border:1px solid #40100a;padding:.75rem 1.4rem;cursor:pointer;
  transition:filter .2s;
}
.quill-btn:hover{filter:brightness(1.12)}
.subscribe-note{font-size:.98rem;font-style:italic;color:var(--ink-2);
  margin:1rem 0 0}

.colophon-foot{
  text-align:center;color:#cbbb96;
  padding:clamp(3.5rem,8vh,6rem) var(--gutter) clamp(2.6rem,6vh,4rem);
}
.foot-mark{
  font-family:var(--display);font-weight:900;letter-spacing:.22em;
  font-size:1.6rem;margin:0 0 .5rem;color:var(--gold-lit);
}
.foot-line{
  font-family:var(--display);font-weight:600;font-size:.92rem;
  letter-spacing:.14em;margin:0 0 1.2rem;color:#e2d5b6;
}
.foot-fine{font-size:.88rem;margin:0;color:#a99b7e}

/* ── Arrivals ────────────────────────────────────────────────────── */
.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;
  }
  body{background-attachment:scroll}
  .photo-scene{display:none}
  .tome{opacity:1}
  .tome-cover{display:none}
  .found{opacity:1;transition:none}
  .catchword{opacity:.45;transition:none}
  #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;gap:1.5rem}
  .turn-page,.turn-leaf{position:static;inset:auto;transform:none}
  .turn-leaf .turn-back{display:none}
  .turn-leaf .turn-face{position:static}
  .keyart-title{opacity:1}
  .will-rise{opacity:1;transform:none}
  #masthead{opacity:1;visibility:visible;transform:none}
}