:root {
  /* Compliance ledger: IBM Plex Mono** in 400–500 weight; IBM Plex Sans** in 400–500 weight; Space Grotesk** in 600–700 weight; “transactology” appearing exposed in a darkroom; The first scroll should reveal a sequence of full-screen specimen plates. */
  --black: #060604;
  --bone: #F2E9D8;
  --ivory: #FFF8EA;
  --green: #4F7D45;
  --leaf: #B8C68A;
  --brown: #8A5A33;
  --silver: #D8D6C8;
  --red: #9E2F28;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-token-mono: "Mono** Mono*";
  --font-token-sans: "Sans** Sans*";
  --font-token-grotesk: "Grotesk** Grotesk*";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--body);
  overflow-x: hidden;
}

.font-ledger { display: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  background-image: radial-gradient(circle at 20% 10%, rgba(255,248,234,.18) 0 1px, transparent 1px), radial-gradient(circle at 70% 80%, rgba(184,198,138,.13) 0 1px, transparent 1px), linear-gradient(115deg, transparent, rgba(216,214,200,.05), transparent);
  background-size: 17px 17px, 23px 23px, 100% 100%;
  mix-blend-mode: screen;
}

.leaf-field { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.drift-leaf, .hero-leaf {
  position: absolute;
  width: 170px;
  height: 310px;
  background: linear-gradient(90deg, transparent 48%, rgba(6,6,4,.35) 49% 51%, transparent 52%), radial-gradient(ellipse at center, rgba(184,198,138,.88), rgba(79,125,69,.3) 58%, transparent 61%);
  clip-path: ellipse(38% 50% at 50% 50%);
  filter: blur(.2px);
}
.drift-leaf::before, .hero-leaf::before {
  content: "";
  position: absolute;
  inset: 18% 49% 10%;
  background: rgba(242,233,216,.75);
  box-shadow: -34px 48px 0 -32px rgba(242,233,216,.7), 34px 76px 0 -32px rgba(242,233,216,.62), -42px 126px 0 -32px rgba(242,233,216,.55), 42px 156px 0 -32px rgba(242,233,216,.5);
}
.leaf-a { left: 6%; top: 18%; opacity: .11; animation: drift 22s ease-in-out infinite; }
.leaf-b { right: 4%; top: 58%; opacity: .08; transform: rotate(-24deg) scale(1.2); animation: drift 28s ease-in-out infinite reverse; }
.leaf-c { left: 68%; top: 8%; opacity: .07; transform: rotate(31deg) scale(.72); animation: drift 25s ease-in-out infinite; }

.title-plate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 8vh 6vw;
  position: relative;
  isolation: isolate;
  text-align: center;
}
.exposure-ring {
  position: absolute;
  width: min(78vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(216,214,200,.18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,233,216,.12), transparent 58%);
  filter: blur(1px);
}
.hero-leaf { position: relative; opacity: 0; transform: rotate(17deg) scale(.8); animation: exposeLeaf 2.4s ease forwards .4s; z-index: -1; }
.folio-tag, .label, .margin-note {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--leaf);
  font-size: clamp(.68rem, 1.3vw, .82rem);
}
h1, h2 { font-family: var(--display); letter-spacing: -.055em; line-height: .9; margin: 0; }
h1 { font-size: clamp(4.5rem, 15vw, 13rem); color: var(--ivory); opacity: 0; animation: exposeTitle 2.1s ease forwards 1s; text-shadow: 0 0 28px rgba(242,233,216,.22); }
.hero-copy { max-width: 690px; font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.55; color: var(--silver); opacity: 0; animation: exposeTitle 1.5s ease forwards 1.7s; }
.quiet-link {
  color: var(--ivory);
  text-decoration: none;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  border-bottom: 1px solid var(--red);
  padding-bottom: .35rem;
}

.archive-scroll { position: relative; z-index: 2; }
.archival-spine { position: fixed; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(242,233,216,.14); z-index: 0; }
.archival-spine span { display: block; width: 100%; height: 0%; background: linear-gradient(var(--leaf), var(--red)); box-shadow: 0 0 18px rgba(184,198,138,.35); }

.specimen-plate {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 10vh 8vw;
  border-top: 1px solid rgba(242,233,216,.12);
}
.specimen-plate::before { content: ""; position: absolute; inset: 6vh max(4vw, calc((100vw - 1020px)/2)) 6vh; border: 1px solid rgba(216,214,200,.18); pointer-events: none; }
.chapter-mark { position: absolute; left: max(4vw, calc((100vw - 1040px)/2)); top: 9vh; font: 700 clamp(4rem, 11vw, 10rem)/.8 var(--display); color: rgba(242,233,216,.12); letter-spacing: -.08em; }
.margin-note { position: absolute; right: max(2vw, calc((100vw - 1180px)/2)); top: 14vh; writing-mode: vertical-rl; color: rgba(184,198,138,.75); }
.plate-inner { width: min(100%, 980px); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.plate-inner.narrow { grid-template-columns: 1fr; max-width: 820px; }
.editorial-copy { background: rgba(6,6,4,.58); padding: clamp(1.5rem, 4vw, 3rem); backdrop-filter: blur(3px); }
.editorial-copy h2, .tableau-card h2 { font-size: clamp(3rem, 8vw, 6.7rem); color: var(--ivory); margin: .5rem 0 1.4rem; }
.editorial-copy p:not(.label), .tableau-card p:not(.label) { color: var(--silver); font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.7; }
.centered-copy { text-align: center; margin: 0 auto; max-width: 760px; }

.photo-folio { position: relative; min-height: 620px; padding: 2rem; background: var(--bone); box-shadow: 0 34px 80px rgba(0,0,0,.48); transform: rotate(-2deg); }
.vintage-photo { height: 100%; min-height: 540px; filter: sepia(.55) grayscale(.72) contrast(1.15); background-blend-mode: multiply; border: 1px solid rgba(138,90,51,.35); }
.photo-one { background: radial-gradient(circle at 28% 24%, rgba(255,248,234,.9), transparent 12%), radial-gradient(ellipse at 22% 58%, rgba(6,6,4,.72), transparent 28%), linear-gradient(135deg, rgba(138,90,51,.8), rgba(216,214,200,.72)), repeating-linear-gradient(0deg, transparent 0 34px, rgba(6,6,4,.22) 35px 36px); }
.photo-two { min-height: 250px; background: radial-gradient(ellipse at 36% 50%, rgba(6,6,4,.72), transparent 28%), radial-gradient(circle at 66% 38%, rgba(255,248,234,.8), transparent 12%), linear-gradient(120deg, rgba(216,214,200,.9), rgba(138,90,51,.75)), repeating-linear-gradient(90deg, transparent 0 22px, rgba(6,6,4,.14) 23px); }
.photo-three { background: radial-gradient(circle at 58% 36%, rgba(255,248,234,.85), transparent 18%), radial-gradient(ellipse at 40% 70%, rgba(6,6,4,.8), transparent 34%), linear-gradient(145deg, rgba(158,47,40,.45), rgba(216,214,200,.82)), repeating-linear-gradient(0deg, transparent 0 28px, rgba(6,6,4,.16) 29px); }
.vellum { position: absolute; inset: 10%; background: rgba(255,248,234,.38); border: 1px solid rgba(255,248,234,.46); display: grid; place-items: end center; color: var(--brown); font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; mix-blend-mode: screen; }
.breathe { animation: breathe 8s ease-in-out infinite; }

.ledger-rule { position: absolute; left: 12vw; right: 12vw; bottom: 12vh; height: 1px; background: rgba(184,198,138,.24); transform: scaleX(0); transform-origin: left; transition: transform 1.4s ease; }
.specimen-plate.is-visible .ledger-rule { transform: scaleX(1); }

.vein-diagram { height: 430px; position: relative; margin: 0 auto 3rem; width: min(90vw, 720px); }
.stem { position: absolute; display: block; background: var(--leaf); box-shadow: 0 0 25px rgba(184,198,138,.28); transform-origin: left center; }
.main-stem { width: 78%; height: 2px; left: 11%; top: 50%; }
.branch { width: 28%; height: 1px; left: 36%; top: 50%; }
.b1 { transform: rotate(-42deg); } .b2 { transform: rotate(38deg); left: 45%; } .b3 { transform: rotate(-20deg); left: 55%; } .b4 { transform: rotate(24deg); left: 25%; }
.seed { position: absolute; border: 1px solid var(--leaf); border-radius: 999px; padding: .55rem .8rem; color: var(--ivory); font: 500 .78rem var(--mono); text-transform: uppercase; background: rgba(6,6,4,.8); }
.s1 { left: 22%; top: 24%; } .s2 { right: 17%; top: 25%; } .s3 { left: 48%; bottom: 18%; } .s4 { right: 8%; bottom: 36%; }

.flip-card { width: min(90vw, 720px); height: min(76vh, 660px); perspective: 1600px; cursor: pointer; }
.card-rotor { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.15s cubic-bezier(.2,.8,.18,1); }
.flip-card.is-flipped .card-rotor { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; backface-visibility: hidden; background: var(--bone); color: var(--black); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--brown); box-shadow: 0 38px 100px rgba(0,0,0,.6); display: flex; flex-direction: column; justify-content: space-between; }
.card-face h2 { font-size: clamp(2.5rem, 6.5vw, 5.5rem); color: var(--black); margin: 1rem 0; }
.card-face .label { color: var(--brown); }
.card-back { transform: rotateY(180deg); background: var(--ivory); }
.red-seal { align-self: flex-end; border: 2px solid var(--red); color: var(--red); border-radius: 50%; width: 96px; height: 96px; display: grid; place-items: center; font: 700 .76rem var(--mono); text-transform: uppercase; transform: rotate(-14deg); }
.anatomy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.anatomy-list li { border-top: 1px solid rgba(138,90,51,.28); padding-top: 1rem; opacity: 0; transform: translateY(10px); transition: .55s ease; }
.flip-card.is-flipped .anatomy-list li { opacity: 1; transform: translateY(0); }
.flip-card.is-flipped .anatomy-list li:nth-child(2) { transition-delay: .12s; } .flip-card.is-flipped .anatomy-list li:nth-child(3) { transition-delay: .24s; } .flip-card.is-flipped .anatomy-list li:nth-child(4) { transition-delay: .36s; }
.anatomy-list span { display: block; font: 700 1.1rem var(--display); text-transform: uppercase; } .anatomy-list em { color: var(--brown); }

.plate-glossary { background: linear-gradient(var(--black), #10100c); }
.glossary-panel { width: min(92vw, 850px); background: rgba(255,248,234,.94); color: var(--black); padding: clamp(1rem, 3vw, 2.5rem); box-shadow: 0 35px 90px rgba(0,0,0,.55); }
.glossary-row { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; border-bottom: 1px solid rgba(138,90,51,.25); padding: 1.25rem 0; }
.glossary-row span { color: var(--green); font: 700 1.6rem var(--display); letter-spacing: -.04em; }
.glossary-row p { margin: 0; color: var(--brown); font-size: 1.08rem; line-height: 1.55; }

.final-tableau { background: radial-gradient(circle at 50% 35%, rgba(158,47,40,.16), transparent 35%), var(--black); }
.tableau-card { width: min(92vw, 820px); text-align: center; }
.final-photo { min-height: 360px; transform: rotate(1deg); margin-bottom: 3rem; }
.last { display: inline-block; margin-top: 2rem; }

@keyframes exposeTitle { from { opacity: 0; filter: blur(18px); transform: translateY(16px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes exposeLeaf { to { opacity: .36; transform: rotate(17deg) scale(1); } }
@keyframes drift { 0%,100% { translate: 0 0; } 50% { translate: 26px -42px; } }
@keyframes breathe { 0%,100% { scale: 1; } 50% { scale: 1.018; } }

@media (max-width: 820px) {
  .plate-inner { grid-template-columns: 1fr; }
  .photo-folio { min-height: 430px; }
  .vintage-photo { min-height: 350px; }
  .margin-note { display: none; }
  .glossary-row { grid-template-columns: 1fr; gap: .4rem; }
}