:root {
  /* Design typography tokens: IBM Plex Mono** / Mono* from Google Fonts for small coordinates. */
  --cellar: #111418;
  --slate: #2A3038;
  --pewter: #59616C;
  --vellum: #C9CDD2;
  --parchment: #E5DFCB;
  --brass: #9A7B45;
  --lichen: #6F8068;
  --plum: #3B2A35;
  --display: "Archivo Black", Impact, Haettenschweiler, "Arial Black", sans-serif;
  --serif: "Cormorant Garamond", Cormorant, Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--vellum);
  background:
    radial-gradient(circle at 50% 8%, rgba(154, 123, 69, .12), transparent 23rem),
    radial-gradient(circle at 15% 36%, rgba(111, 128, 104, .18), transparent 28rem),
    radial-gradient(circle at 92% 65%, rgba(59, 42, 53, .48), transparent 30rem),
    linear-gradient(115deg, #111418 0%, #15191e 38%, #0b0d10 100%);
  font-family: var(--serif);
  overflow-x: hidden;
}

.grain, .smoke, .continuity-seam, .folio-tabs { position: fixed; pointer-events: none; }
.grain {
  inset: 0;
  z-index: 50;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(229,223,203,.18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(97deg, rgba(201,205,210,.05) 0 1px, transparent 1px 7px);
}
.smoke { width: 42vmax; height: 42vmax; border-radius: 50%; filter: blur(44px); opacity: .18; z-index: 1; }
.smoke-a { left: -13vmax; top: 12vh; background: var(--pewter); animation: smokeDrift 18s ease-in-out infinite; }
.smoke-b { right: -16vmax; bottom: 8vh; background: var(--plum); animation: smokeDrift 22s ease-in-out infinite reverse; }

.continuity-seam {
  top: 0; bottom: 0; left: 50%; width: 1px; z-index: 30;
  background: linear-gradient(180deg, transparent, var(--pewter), var(--parchment), var(--pewter), transparent);
  box-shadow: 0 0 24px rgba(229, 223, 203, .22);
}
.seam-label {
  position: absolute; top: 26vh; left: 12px; writing-mode: vertical-rl;
  font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .28em; color: var(--pewter);
}
.candle {
  position: sticky; top: 48vh; transform: translate(-50%, -50%); width: 24px; height: 80px;
  background: linear-gradient(90deg, #bdb39d, var(--parchment), #75684f);
  border-radius: 10px 10px 5px 5px;
  box-shadow: 0 0 48px rgba(154,123,69,.45), 0 22px 16px rgba(0,0,0,.4);
}
.candle:before { content:""; position:absolute; top:-33px; left: 5px; width: 14px; height: 31px; border-radius: 70% 45% 65% 35%; background: radial-gradient(circle at 45% 65%, #fff6d2 0 14%, #e5dfcb 23%, #9a7b45 55%, transparent 70%); animation: flicker .18s infinite alternate; }
.candle:after { content:""; position:absolute; bottom:-13px; left: 3px; width: 18px; height: 24px; border-radius: 50%; background: rgba(229,223,203,.28); filter: blur(5px); }
.candle span { display:block; width:8px; height:25px; margin: 52px auto 0; border-radius: 0 0 8px 8px; background: rgba(154,123,69,.65); }

.folio-tabs { right: 18px; top: 24vh; z-index: 40; display: grid; gap: 10px; pointer-events: auto; }
.folio-tabs a { color: var(--parchment); text-decoration: none; font: 12px var(--mono); padding: 11px 7px; border: 1px solid rgba(201,205,210,.22); background: rgba(42,48,56,.72); box-shadow: inset 0 0 20px rgba(0,0,0,.22); }

.magazine { position: relative; z-index: 2; }
.spread {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(28px, 5vw, 76px);
  isolation: isolate;
  border-bottom: 1px solid rgba(89,97,108,.22);
  overflow: hidden;
}
.spread:before { content:""; position:absolute; inset: 18px; border: 1px solid rgba(201,205,210,.08); z-index:-1; }
.page { position: relative; min-height: calc(100vh - 10vw); padding: 3vw; }
.left-page { background: linear-gradient(135deg, rgba(42,48,56,.58), rgba(17,20,24,.1)); }
.right-page { background: radial-gradient(circle at 40% 42%, rgba(229,223,203,.09), transparent 30rem); }
.issue, .registration, .specimen-note, .label-card, .clipping { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--pewter); }
h1 {
  margin: 8vh 0 0 -1.1vw;
  font-family: var(--display);
  font-size: clamp(74px, 16vw, 244px);
  line-height: .72;
  letter-spacing: -.09em;
  color: var(--parchment);
  text-shadow: 0 4px 0 var(--plum), 0 0 55px rgba(229,223,203,.18);
}
.deck { max-width: 34rem; margin-top: 5vh; font-size: clamp(25px, 3.2vw, 54px); line-height: .92; color: var(--vellum); }
.clipping { position: absolute; left: 8%; bottom: 8%; width: 230px; padding: 18px; color: var(--cellar); background: var(--parchment); clip-path: polygon(0 8%, 91% 0, 100% 82%, 8% 100%); transform: rotate(-7deg); }

.axis-plate { position: relative; width: min(88%, 640px); margin: 5vh auto 0; aspect-ratio: 1 / 1.16; }
.axis-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 22px 34px rgba(0,0,0,.55)); }
.draw-line { fill: none; stroke: var(--vellum); stroke-width: 1.6; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawAxis 3.2s ease forwards; }
.draw-line.delay { animation-delay: .45s; stroke: var(--lichen); }
.draw-line.delay-two { animation-delay: .85s; stroke: var(--brass); }
.spore { fill: var(--parchment); opacity: .82; transform-box: fill-box; transform-origin: center; animation: sporePulse 3s ease-in-out infinite; }
.label-card { position: absolute; padding: 12px 14px; border: 1px solid rgba(201,205,210,.28); background: rgba(17,20,24,.72); backdrop-filter: blur(3px); }
.label-one { left: 2%; top: 28%; transform: rotate(-5deg); }
.label-two { right: 2%; bottom: 22%; transform: rotate(6deg); }
.wax-seal, .seal-tab { display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, var(--brass), #5d4627); color: var(--parchment); box-shadow: 0 0 0 5px rgba(154,123,69,.2), 0 18px 26px rgba(0,0,0,.4); font-family: var(--mono); text-transform: uppercase; }
.wax-seal { position:absolute; right: 18%; top: 12%; width: 76px; height: 76px; transform: rotate(13deg); }

.section-number { position:absolute; left: 7vw; top: 9vh; font-family: var(--display); font-size: 21vw; line-height: .7; color: rgba(89,97,108,.24); }
.gill-spread { grid-template-columns: .8fr 1.2fr; align-items: center; background: radial-gradient(circle at 34% 48%, rgba(111,128,104,.22), transparent 24rem); }
.mushroom-plate { grid-row: 1 / span 2; width: min(37vw, 490px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 48% 45%, var(--parchment) 0 9%, var(--brass) 10% 11%, var(--plum) 12% 18%, var(--slate) 19% 48%, var(--cellar) 49%); border: 1px solid rgba(229,223,203,.24); justify-self: center; overflow: hidden; box-shadow: inset 0 0 80px #050607, 0 38px 60px rgba(0,0,0,.45); }
.gill-lines { width:100%; height:100%; background: repeating-conic-gradient(from 9deg, rgba(229,223,203,.4) 0deg 1deg, transparent 1deg 7deg); mix-blend-mode: screen; opacity: .5; }
blockquote { margin: 0 0 3vh; font-size: clamp(38px, 6vw, 100px); line-height: .78; color: var(--parchment); }
.body-copy { max-width: 42rem; font-size: clamp(20px, 2vw, 30px); line-height: 1.18; color: var(--vellum); }
.specimen-note { grid-column: 2; width: 320px; padding: 18px; border-left: 3px solid var(--lichen); background: rgba(42,48,56,.75); transform: rotate(3deg); }

.taxonomy-spread { display:block; padding-left: 11vw; background: linear-gradient(148deg, rgba(42,48,56,.44), transparent 55%); }
.vertical-title { position:absolute; left: calc(50% + 14px); top: 9vh; writing-mode: vertical-rl; font: clamp(52px, 8vw, 120px)/.8 var(--display); color: rgba(201,205,210,.11); text-transform: uppercase; }
.taxonomy-line { position: relative; margin-top: 18vh; min-height: 54vh; transform: rotate(-12deg); border-top: 1px solid var(--pewter); }
.taxon { position:absolute; width: min(30vw, 390px); padding: 24px; background: rgba(229,223,203,.88); color: var(--cellar); clip-path: polygon(0 0, 100% 8%, 94% 100%, 7% 93%); box-shadow: 0 28px 42px rgba(0,0,0,.42); }
.taxon span { display:block; font: clamp(36px, 5vw, 86px)/.78 var(--display); color: var(--plum); }
.taxon p { font: 20px/1.05 var(--serif); }
.taxon:nth-child(1) { left: 2%; top: 0; }
.taxon:nth-child(2) { left: 34%; top: 14vh; }
.taxon:nth-child(3) { right: 2%; top: 28vh; }
.registration { position:absolute; bottom: 9vh; left: 9vw; color: var(--lichen); }

.scraps-spread { display:block; background: radial-gradient(circle at 62% 38%, rgba(154,123,69,.13), transparent 22rem); }
.scraps-spread h2, .final-inscription h2 { font: clamp(48px, 8vw, 132px)/.78 var(--display); letter-spacing: -.06em; color: var(--parchment); max-width: 880px; margin: 8vh 0 0; }
.scrap { position:absolute; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; padding: 22px; color: var(--cellar); background: var(--parchment); box-shadow: 0 25px 50px rgba(0,0,0,.48); }
.scrap:after { content:""; position:absolute; width: 22px; height: 22px; border-radius:50%; background: var(--brass); top: -9px; left: 48%; }
.scrap-a { right: 10vw; top: 19vh; width: 340px; transform: rotate(9deg); clip-path: polygon(5% 0, 100% 3%, 93% 92%, 0 100%); }
.scrap-b { left: 12vw; bottom: 16vh; width: 260px; transform: rotate(-10deg); background: #C9CDD2; }
.scrap-c { right: 23vw; bottom: 9vh; width: 300px; transform: rotate(4deg); background: #6F8068; color: #111418; }
.thread-loop { position:absolute; right: 25vw; top: 34vh; width: 320px; height: 220px; border: 1px solid rgba(201,205,210,.5); border-radius: 50%; transform: rotate(-21deg); }
.narrow { margin-top: 9vh; max-width: 500px; }

.ledger-spread { grid-template-columns: 330px 1fr; gap: 8vw; align-items: center; background: linear-gradient(90deg, rgba(59,42,53,.28), transparent); }
.ledger-index { border-left: 1px solid var(--pewter); padding-left: 18px; font-family: var(--mono); color: var(--vellum); }
.ledger-index div { padding: 18px 0; border-bottom: 1px solid rgba(89,97,108,.26); }
.ledger-index span { color: var(--brass); margin-right: 18px; }
.final-inscription p { font-family: var(--mono); letter-spacing: .35em; text-transform: uppercase; color: var(--lichen); }
.seal-tab { width: 126px; height: 126px; text-decoration: none; margin-top: 5vh; }

.magnetic { transition: transform .55s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.spread.is-visible:after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(229,223,203,.06), transparent); transform: translateX(-100%); animation: pageTurn 1.15s ease forwards; pointer-events:none; }

@keyframes flicker { from { transform: translateX(-1px) scaleY(.92) rotate(-3deg); opacity: .82; } to { transform: translateX(1px) scaleY(1.08) rotate(3deg); opacity: 1; } }
@keyframes smokeDrift { 50% { transform: translate(9vw, -5vh) scale(1.16); } }
@keyframes drawAxis { to { stroke-dashoffset: 0; } }
@keyframes sporePulse { 50% { opacity: .35; transform: scale(.72); } }
@keyframes pageTurn { to { transform: translateX(100%); opacity: 0; } }

@media (max-width: 820px) {
  .spread, .hero-spread, .gill-spread, .ledger-spread { grid-template-columns: 1fr; }
  .continuity-seam { left: 24px; }
  .folio-tabs { right: 8px; }
  .page { min-height: auto; }
  .axis-plate { width: 92%; }
  .mushroom-plate { width: 72vw; }
  .specimen-note { grid-column: 1; }
  .taxonomy-line { transform: none; min-height: 90vh; }
  .taxon { width: 72vw; }
  .taxon:nth-child(1), .taxon:nth-child(2), .taxon:nth-child(3) { left: 4vw; right: auto; }
  .taxon:nth-child(2) { top: 29vh; }
  .taxon:nth-child(3) { top: 58vh; }
  .scrap-a, .scrap-b, .scrap-c { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 28px 0; }
}