:root {
  --ink-shadow: #120B08;
  --charred-umber: #24140D;
  --burnt-orange: #C85F1A;
  --persimmon-flare: #F28A2E;
  --cream-paper: #F5E6C8;
  --apricot-wash: #FFD29A;
  --olive-leaf: #657A3A;
  --sap-green: #2F5B36;
  --pencil-graphite: #6D6258;
  --font-audit-grotesk: "Grotesk** Grotesk*";
  --font-audit-sans: "Sans** Sans*";
  --mx: .5;
  --my: .5;
}

* { box-sizing: border-box; }

html,
body { margin: 0; min-height: 100%; overflow: hidden; background: var(--cream-paper); color: var(--ink-shadow); }

body { font-family: "Work Sans", Inter, system-ui, sans-serif; }

.folio { position: relative; width: 100vw; height: 100vh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 18% 8%, rgba(255,210,154,.85), transparent 28%), radial-gradient(circle at 74% 80%, rgba(242,138,46,.18), transparent 30%), linear-gradient(105deg, var(--cream-paper), #F8DDAE 58%, var(--cream-paper)); cursor: crosshair; }

.paper-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .42; background-image: repeating-linear-gradient(4deg, rgba(36,20,13,.055) 0 1px, transparent 1px 9px), repeating-linear-gradient(93deg, rgba(109,98,88,.05) 0 1px, transparent 1px 13px), radial-gradient(circle at 30% 30%, rgba(101,122,58,.08), transparent 22%); mix-blend-mode: multiply; }

.lens-flare { position: absolute; z-index: 4; width: 62vmax; height: 22vmax; left: -12vmax; top: 8vh; pointer-events: none; transform: translate(calc((var(--mx) - .5) * 34px), calc((var(--my) - .5) * 28px)) rotate(-18deg); opacity: .75; filter: blur(1px); background: radial-gradient(circle at 22% 50%, rgba(255,210,154,.82), transparent 9%), radial-gradient(circle at 45% 50%, rgba(242,138,46,.36), transparent 13%), radial-gradient(circle at 66% 50%, rgba(200,95,26,.22), transparent 10%), linear-gradient(90deg, transparent, rgba(242,138,46,.34), rgba(255,210,154,.42), transparent); mix-blend-mode: screen; animation: driftFlare 14s ease-in-out infinite alternate; }

@keyframes driftFlare { from { left: -20vmax; top: 8vh; } to { left: 54vmax; top: 58vh; } }

.deckle { position: absolute; z-index: 8; left: 0; right: 0; height: 18px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(36,20,13,.16) 0 12px, transparent 12px 25px); opacity: .25; filter: blur(.2px); }
.deckle-top { top: 0; }
.deckle-bottom { bottom: 0; transform: rotate(180deg); }

.plate { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); padding: clamp(24px, 4vw, 58px); opacity: 0; pointer-events: none; transform: translateY(18px) scale(1.015); transition: opacity 780ms ease, transform 980ms cubic-bezier(.2,.78,.18,1); }
.plate.active { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); z-index: 3; }
.plate.changed .shaky, .plate.changed .leaf { animation: misregister 420ms steps(2, end); }

.plate-envelope { background: radial-gradient(circle at 84% 18%, rgba(255,210,154,.58), transparent 20%); }
.plate-atlas { background: radial-gradient(circle at 18% 80%, rgba(101,122,58,.14), transparent 25%); }
.plate-garden { background: radial-gradient(circle at 75% 24%, rgba(200,95,26,.14), transparent 26%); }
.plate-sun { background: linear-gradient(117deg, rgba(242,138,46,.28), transparent 34%, rgba(255,210,154,.52)), radial-gradient(circle at 72% 35%, rgba(242,138,46,.44), transparent 24%); }

.specimen-zone { grid-column: 2 / 9; grid-row: 2 / 7; align-self: center; position: relative; z-index: 7; }

.stamp { margin: 0 0 18px; width: fit-content; padding: 8px 12px 7px; color: var(--burnt-orange); border: 2px solid var(--burnt-orange); border-radius: 2px; font-size: clamp(11px, 1vw, 14px); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; transform: rotate(-1.5deg); background: rgba(245,230,200,.5); box-shadow: 5px 5px 0 rgba(47,91,54,.16); }

.wordmark, .closing-mark { position: relative; margin: 0; font-family: "Space Grotesk", "Arial Black", system-ui, sans-serif; font-weight: 700; line-height: .78; letter-spacing: -.075em; color: var(--burnt-orange); text-transform: none; filter: drop-shadow(10px 12px 0 rgba(101,122,58,.14)); }
.wordmark { font-size: clamp(78px, 16vw, 230px); animation: enterWord 1850ms cubic-bezier(.13,.86,.18,1) both; }
.wordmark::before, .wordmark::after, .closing-mark::before { content: attr(data-text); position: absolute; inset: 0; color: transparent; pointer-events: none; }
.wordmark::before { -webkit-text-stroke: 1px var(--pencil-graphite); transform: translate(-5px, -7px); opacity: .72; animation: construction 2300ms ease both; }
.wordmark::after, .closing-mark::before { -webkit-text-stroke: 2px var(--sap-green); transform: translate(7px, 6px); opacity: .34; }
.wordmark span:nth-child(2n) { position: relative; top: .035em; }
.wordmark span:nth-child(3n) { position: relative; top: -.025em; }
@keyframes enterWord { 0% { opacity: 0; letter-spacing: .03em; transform: translateY(42px) rotate(-1deg); } 55% { opacity: 1; letter-spacing: -.04em; } 100% { letter-spacing: -.075em; transform: translateY(0) rotate(0); } }
@keyframes construction { 0%, 58% { opacity: .9; } 100% { opacity: .2; transform: translate(-2px, -3px); } }

.folio-copy { max-width: 620px; margin: 0; color: var(--charred-umber); font-size: clamp(17px, 1.7vw, 24px); line-height: 1.58; letter-spacing: .015em; }
.folio-copy.large { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.23; }

.paper-action { margin-top: 26px; width: fit-content; border: 0; border-radius: 0; padding: 13px 18px; color: var(--cream-paper); background: var(--charred-umber); font-family: "Gochi Hand", "Comic Sans MS", cursive; font-size: 24px; transform: rotate(-2deg); box-shadow: 8px 8px 0 rgba(200,95,26,.28); transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.paper-action:hover { transform: rotate(1deg) translate(2px, 2px); background: var(--burnt-orange); box-shadow: 4px 4px 0 rgba(47,91,54,.34); }
.tab-action { position: absolute; right: clamp(28px, 6vw, 82px); bottom: clamp(34px, 7vh, 74px); z-index: 9; }

.tape { position: absolute; z-index: 9; padding: 16px 34px; background: rgba(255,210,154,.68); color: rgba(36,20,13,.64); font-family: "Gochi Hand", cursive; font-size: 19px; box-shadow: 0 2px 8px rgba(36,20,13,.12); }
.tape-left { left: 7vw; top: 5vh; transform: rotate(-8deg); }
.tape-right { right: 10vw; top: 10vh; transform: rotate(6deg); }

.pencil-note { position: absolute; z-index: 8; margin: 0; color: var(--pencil-graphite); font-family: "Gochi Hand", cursive; font-size: clamp(18px, 2vw, 30px); transform: rotate(-7deg); }
.note-a { left: 10vw; bottom: 11vh; }
.note-b { right: 12vw; top: 31vh; }
.note-c { left: 12vw; bottom: 18vh; color: var(--burnt-orange); }

.leaf { position: absolute; z-index: 5; overflow: visible; opacity: .88; transform: translate(calc((var(--mx) - .5) * -22px), calc((var(--my) - .5) * -18px)); transition: transform 260ms ease; }
.giant-leaf { width: min(46vw, 560px); right: -8vw; bottom: -11vh; rotate: -12deg; }
.fan-leaf { width: min(76vw, 920px); left: -13vw; top: 13vh; rotate: -7deg; }
.pod-leaf { width: min(43vw, 540px); right: 8vw; top: 8vh; rotate: 12deg; }
.leaf-fill { fill: rgba(101,122,58,.3); stroke: var(--sap-green); stroke-width: 4; }
.leaf-fill.olive { fill: rgba(101,122,58,.36); }
.leaf-fill.sap { fill: rgba(47,91,54,.28); }
.leaf-line { fill: none; stroke: var(--charred-umber); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 7; opacity: .72; }

.registration { position: absolute; z-index: 8; width: 72px; height: 72px; border: 1px solid var(--burnt-orange); border-radius: 50%; opacity: .62; }
.registration::before, .registration::after { content: ""; position: absolute; background: var(--burnt-orange); }
.registration::before { left: 50%; top: -12px; bottom: -12px; width: 1px; }
.registration::after { top: 50%; left: -12px; right: -12px; height: 1px; }
.registration span { position: absolute; inset: 18px; border: 1px solid var(--sap-green); border-radius: 50%; transform: translate(3px, -2px); }
.target-a { right: 30vw; bottom: 14vh; }
.target-b { right: 12vw; top: 12vh; }

.map-panel { grid-column: 7 / 12; grid-row: 2 / 7; align-self: center; z-index: 7; padding: clamp(20px, 3vw, 44px); background: rgba(245,230,200,.54); border-left: 2px dashed rgba(36,20,13,.35); transform: rotate(.8deg); }
.map-panel h2, .correction-board h2 { margin: 0 0 16px; font-family: "Space Grotesk", system-ui, sans-serif; font-size: clamp(48px, 8vw, 136px); line-height: .84; letter-spacing: -.06em; color: var(--charred-umber); }
.margin-strip { grid-column: 2 / 5; grid-row: 2 / 8; align-self: center; z-index: 8; display: grid; gap: 20px; }
.label { width: fit-content; margin: 0; padding: 9px 14px; color: var(--sap-green); border: 1px solid var(--sap-green); font-family: "Gochi Hand", cursive; font-size: clamp(23px, 2.6vw, 36px); background: rgba(255,210,154,.32); }
.label:nth-child(2) { margin-left: 60px; color: var(--burnt-orange); border-color: var(--burnt-orange); }
.label:nth-child(3) { margin-left: 22px; color: var(--charred-umber); border-color: var(--pencil-graphite); }

.vein-field { position: absolute; inset: 12vh 12vw; z-index: 6; pointer-events: none; }
.vein-field span { position: absolute; height: 2px; width: 28vw; background: var(--pencil-graphite); opacity: .34; transform-origin: left; }
.vein-field span:nth-child(1) { left: 16%; top: 24%; rotate: 18deg; }
.vein-field span:nth-child(2) { left: 24%; top: 43%; rotate: -13deg; }
.vein-field span:nth-child(3) { left: 36%; top: 60%; rotate: 23deg; background: var(--burnt-orange); }
.vein-field span:nth-child(4) { left: 12%; top: 72%; rotate: -5deg; }
.vein-field span:nth-child(5) { left: 52%; top: 30%; rotate: 41deg; background: var(--sap-green); }

.correction-board { grid-column: 2 / 8; grid-row: 2 / 7; z-index: 8; align-self: center; }
.crossout { position: relative; width: fit-content; margin-top: 25px; color: var(--pencil-graphite); font-family: "Gochi Hand", cursive; font-size: clamp(28px, 4vw, 58px); }
.crossout::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 5px; background: var(--burnt-orange); transform: rotate(-3deg); }
.ink-slip { position: absolute; z-index: 5; background: var(--burnt-orange); mix-blend-mode: multiply; opacity: .2; }
.slip-one { width: 25vw; height: 12vh; left: 48vw; bottom: 18vh; transform: rotate(11deg); }
.slip-two { width: 14vw; height: 32vh; left: 9vw; top: 12vh; transform: rotate(-7deg); background: var(--olive-leaf); }
.misprint-row { position: absolute; z-index: 8; left: 9vw; right: 6vw; bottom: 10vh; display: flex; justify-content: space-between; color: var(--burnt-orange); font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: clamp(22px, 4vw, 64px); opacity: .7; }
.misprint-row span { text-shadow: 3px 2px 0 rgba(47,91,54,.35), -2px 1px 0 rgba(36,20,13,.22); animation: tinyShake 2.8s steps(2,end) infinite; }
.misprint-row span:nth-child(2n) { animation-delay: .25s; }

.signature-panel { grid-column: 2 / 10; grid-row: 2 / 7; z-index: 8; align-self: center; }
.closing-mark { font-size: clamp(78px, 15vw, 225px); }
.sun-ghost { position: absolute; z-index: 5; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
.ghost-one { width: 42vmin; height: 42vmin; right: 8vw; top: 18vh; background: radial-gradient(circle, rgba(255,210,154,.74), rgba(242,138,46,.22) 45%, transparent 70%); }
.ghost-two { width: 18vmin; height: 18vmin; right: 34vw; bottom: 18vh; background: radial-gradient(circle, rgba(242,138,46,.45), transparent 68%); }

.plate-tabs { position: fixed; z-index: 20; right: clamp(18px, 3vw, 42px); bottom: clamp(18px, 3vw, 42px); display: flex; gap: 10px; transform: rotate(-1deg); }
.plate-tab { border: 1px solid rgba(36,20,13,.38); background: rgba(245,230,200,.58); color: var(--charred-umber); padding: 9px 12px; font-family: "Gochi Hand", cursive; font-size: 18px; box-shadow: 4px 4px 0 rgba(101,122,58,.12); transition: transform 160ms ease, background 160ms ease, color 160ms ease; }
.plate-tab.active { background: var(--burnt-orange); color: var(--cream-paper); transform: translateY(-4px) rotate(2deg); }

.shaky:hover, .shaking { animation: misregister 360ms steps(2,end) 2; }
@keyframes tinyShake { 0%, 90%, 100% { transform: translate(0,0); } 92% { transform: translate(1px,-1px); } 94% { transform: translate(-1px,1px); } 96% { transform: translate(2px,0); } }
@keyframes misregister { 0%, 100% { transform: translate(0,0) rotate(var(--r, 0deg)); filter: none; } 25% { transform: translate(2px,-1px) rotate(var(--r, 0deg)); filter: drop-shadow(-2px 1px 0 var(--burnt-orange)); } 50% { transform: translate(-1px,2px) rotate(var(--r, 0deg)); filter: drop-shadow(2px -1px 0 var(--sap-green)); } 75% { transform: translate(1px,1px) rotate(var(--r, 0deg)); filter: drop-shadow(-1px -1px 0 var(--charred-umber)); } }

.folio.pressed .fan-leaf, .folio.pressed .pod-leaf { transform: translate(calc((var(--mx) - .5) * -12px), calc((var(--my) - .5) * -10px)) scale(.985); filter: saturate(1.2); }
.folio.tracing .lens-flare { animation-duration: 3.5s; opacity: .95; }

@media (max-width: 780px) {
  html, body { overflow: auto; }
  .folio { min-height: 100vh; height: auto; overflow: hidden; }
  .plate { position: relative; min-height: 100vh; display: none; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(10, 1fr); padding: 22px; }
  .plate.active { display: grid; }
  .specimen-zone, .map-panel, .correction-board, .signature-panel { grid-column: 1 / -1; grid-row: 2 / 8; }
  .margin-strip { grid-column: 1 / 5; grid-row: 7 / 10; }
  .giant-leaf, .fan-leaf, .pod-leaf { width: 86vw; right: -24vw; left: auto; top: auto; bottom: -10vh; }
  .plate-tabs { left: 16px; right: auto; bottom: 14px; flex-wrap: wrap; max-width: calc(100vw - 32px); }
  .tab-action { right: 22px; bottom: 88px; }
  .tape-right, .note-b { display: none; }
}