:root {
  /* compliance reference only: #000000 #ffffff; headers separated ("23 dusk" (Google IntersectionObserver sets gutter's IntersectionObserver** IntersectionObserve scroll-triggered animations fade individual characters have been randomly `opacity: 0` (approximately characters Lora's refined serifs provide counterpoint warmth. specific pairing appears nowhere else corpus. */
  --deep-ground: #1a0d05;
  --leather: #3d2b1f;
  --sienna: #5a3e28;
  --amber: #c9834e;
  --tangerine: #e8793b;
  --cream: #fdf6ec;
  --parchment: #f0e4d0;
  --violet: #4a3650;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--deep-ground); color: var(--deep-ground); }

body { font-family: "Lora", serif; overflow: hidden; }

.journal { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; background: var(--deep-ground); }

.spread { position: relative; min-height: 100vh; display: grid; grid-template-columns: calc(50vw - 2px) calc(50vw - 2px); scroll-snap-align: start; overflow: hidden; }

.page { position: relative; min-height: 100vh; overflow: hidden; }

.gutter { position: absolute; z-index: 10; left: calc(50% - 2px); top: 0; width: 4px; height: 100%; background: var(--leather); transition: opacity 0.8s ease-out; }

.spread::after, .specimen-card::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; border: 2px solid rgba(232, 121, 59, 0.6); transform: translate(-50%, -50%) scale(0); opacity: 0; }

.spread::after { z-index: 12; left: 50%; top: 50%; width: 18vmin; height: 18vmin; }
.spread.ripple-on::after { animation: water-ripple 1.2s ease-out 0s 3; }

@keyframes water-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; } 70% { opacity: 0.32; } 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } }

.leather-page, .cover-spread { background-color: var(--leather); }
.leather-page {
  background-image:
    linear-gradient(to bottom, transparent 0 32%, rgba(26, 13, 5, 0.35) 32.1%, transparent 32.3%, transparent 65.5%, rgba(26, 13, 5, 0.35) 65.7%, transparent 66%),
    radial-gradient(circle at 1px 1px, rgba(26, 13, 5, 0.45) 1px, transparent 1.4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  background-size: 100% 100%, 3px 3px, 180px 180px;
  background-blend-mode: multiply;
}

.cover-title-page { display: grid; place-items: center; background: var(--cream); }
.title-lockup { width: min(78%, 700px); text-align: left; }
.cover-title { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: clamp(4rem, 10vw, 9rem); line-height: 0.9; letter-spacing: 0.08em; color: var(--deep-ground); }
.cover-title span { display: inline-block; opacity: 0; transform: translateY(8px); animation: letter-rise 0.8s ease-out forwards; }
@keyframes letter-rise { to { opacity: 1; transform: translateY(0); } }
.cover-subtitle { margin: 1rem 0 0; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.1rem; color: var(--sienna); text-transform: lowercase; letter-spacing: 0.08em; }

.specimen-page { display: grid; place-items: center; background: var(--parchment); }
.botanical-tree { position: relative; width: min(42vw, 480px); height: 72vh; opacity: 0.72; filter: saturate(0.95); }
.trunk { position: absolute; left: 50%; bottom: 8%; width: 10px; height: 72%; transform: translateX(-50%); background: rgba(201, 131, 78, 0.5); box-shadow: 0 0 0 3px rgba(90, 62, 40, 0.15); }
.branch { position: absolute; left: 50%; bottom: 18%; width: 3px; height: 32vh; background: rgba(90, 62, 40, 0.55); transform-origin: bottom center; }
.branch i, .leaf { position: absolute; display: block; background: rgba(201, 131, 78, 0.62); clip-path: ellipse(42% 50% at 50% 50%); }
.branch i { width: 92px; height: 42px; top: -18px; left: -42px; border-bottom: 1px solid rgba(90, 62, 40, 0.45); }
.branch-a { transform: rotate(-48deg); height: 30vh; bottom: 30%; }
.branch-b { transform: rotate(43deg); height: 27vh; bottom: 38%; }
.branch-c { transform: rotate(-31deg); height: 24vh; bottom: 48%; }
.branch-d { transform: rotate(35deg); height: 22vh; bottom: 56%; }
.branch-e { transform: rotate(-18deg); height: 18vh; bottom: 66%; }
.branch-f { transform: rotate(20deg); height: 16vh; bottom: 72%; }

.entry-page { display: grid; place-items: center; background: var(--cream); }
.bordered-block { border: 3px solid var(--leather); padding: clamp(2rem, 5vw, 5rem); }
.entry-block { margin: 15%; color: var(--deep-ground); font-size: 17px; line-height: 1.72; max-width: 38em; background: rgba(240, 228, 208, 0.38); }
.entry-date { margin-top: 0; font-family: "IBM Plex Mono", monospace; font-style: italic; font-size: 14px; letter-spacing: 0.02em; color: var(--sienna); }
blockquote { margin: 2rem 0; padding-left: 1.25rem; border-left: 4px solid var(--tangerine); font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.4rem; line-height: 1.25; color: var(--sienna); }

.card-page { background: var(--sienna); padding: 2rem; display: grid; place-items: center; }
.specimen-grid { width: min(100%, 680px); height: calc(100vh - 4rem); display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1rem; }
.specimen-card { position: relative; display: grid; place-items: center; border: 3px solid var(--sienna); background: var(--cream); aspect-ratio: 3 / 4; overflow: hidden; transition: border-color 300ms ease, background-color 300ms ease; }
.specimen-card:hover { border-color: var(--tangerine); background: var(--parchment); }
.specimen-card.card-ripple::after { left: 50%; top: 50%; width: 80px; height: 80px; opacity: 0.8; animation: card-ripple 1.2s ease-out; }
@keyframes card-ripple { to { transform: translate(-50%, -50%) scale(3); opacity: 0; } }
.specimen-card em { position: absolute; left: 1rem; bottom: 0.8rem; font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: var(--sienna); }
.leaf { width: 52%; height: 28%; border-bottom: 1px solid rgba(90, 62, 40, 0.5); opacity: 0.86; }
.leaf-one { transform: rotate(35deg); }
.leaf-two { width: 38%; height: 42%; transform: rotate(-35deg); }
.leaf-three { width: 62%; height: 22%; transform: rotate(10deg); clip-path: polygon(0 50%, 12% 18%, 42% 0, 100% 50%, 42% 100%, 12% 82%); }
.leaf-four { width: 36%; height: 36%; transform: rotate(45deg); }
.leaf-five { width: 24%; height: 64%; transform: rotate(-8deg); }
.leaf-six { width: 58%; height: 34%; transform: rotate(-24deg); clip-path: ellipse(45% 50% at 52% 50%); }

.ledger-page { display: grid; place-items: center; background: var(--parchment); padding: clamp(2rem, 5vw, 5rem); }
.ledger { width: min(100%, 760px); display: grid; grid-template-columns: 1fr 1.6fr 1fr 0.75fr; padding: 0; font-family: "IBM Plex Mono", monospace; font-size: 14px; letter-spacing: 0.02em; color: var(--deep-ground); background: var(--cream); }
.ledger > div { padding: 1rem 0.8rem; border-right: 1px solid rgba(61, 43, 31, 0.35); border-bottom: 1px solid rgba(61, 43, 31, 0.2); }
.ledger > div:nth-child(4n) { border-right: 0; }
.ledger > div:nth-child(n+5):nth-child(8n+5), .ledger > div:nth-child(n+6):nth-child(8n+6), .ledger > div:nth-child(n+7):nth-child(8n+7), .ledger > div:nth-child(n+8):nth-child(8n+8) { background: var(--parchment); }
.ledger-head { font-family: "Cormorant Garamond", serif; font-weight: 600; font-variant: small-caps; font-size: 1.05rem; color: var(--sienna); }

.decay-page { display: grid; place-items: center; background: var(--parchment); background-image: radial-gradient(circle at 20% 80%, rgba(201, 131, 78, 0.28) 2px, transparent 3px), radial-gradient(circle at 75% 24%, rgba(201, 131, 78, 0.22) 1px, transparent 3px); background-size: 200px 200px, 170px 170px; }
.decay-text { position: relative; margin: 12%; max-width: 38em; background: rgba(253, 246, 236, 0.5); font-size: 18px; line-height: 1.72; }
.decay-text::before, .decay-text::after { content: ""; position: absolute; top: 100%; width: 1px; height: 19vh; background: rgba(61, 43, 31, 0.3); transform-origin: top; }
.decay-text::before { left: 31%; transform: rotate(18deg); box-shadow: 42px 50px 0 rgba(61, 43, 31, 0.22), -30px 78px 0 rgba(61, 43, 31, 0.2); }
.decay-text::after { right: 25%; transform: rotate(-24deg); box-shadow: -36px 44px 0 rgba(61, 43, 31, 0.22), 28px 92px 0 rgba(61, 43, 31, 0.2); }
.night-page { position: relative; background: linear-gradient(to bottom, var(--tangerine) 0%, var(--amber) 40%, var(--violet) 63%, var(--deep-ground) 100%); }
.night-page p { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: min(20em, 72%); margin: 0; text-align: center; font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: 1.8rem; line-height: 1.22; color: var(--cream); }

.final-spread { display: grid; grid-template-columns: 1fr; place-items: center; background: var(--deep-ground); }
.final-content { position: relative; width: min(30em, 78vw); text-align: center; color: var(--cream); }
.final-content p { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 300; font-style: italic; font-size: 1.4rem; line-height: 1.55; }
.final-rule { display: block; width: 60px; height: 1px; margin: 2rem auto 1.2rem; background: var(--sienna); }
.final-content time { font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--sienna); }
.root-network::before, .root-network::after { content: ""; position: absolute; top: calc(100% + 1rem); width: 1px; height: 22vh; background: rgba(61, 43, 31, 0.3); }
.root-network::before { left: 46%; transform: rotate(15deg); box-shadow: -38px 50px 0 rgba(61, 43, 31, 0.28), 24px 88px 0 rgba(61, 43, 31, 0.22); }
.root-network::after { right: 45%; transform: rotate(-16deg); box-shadow: 42px 52px 0 rgba(61, 43, 31, 0.26), -28px 92px 0 rgba(61, 43, 31, 0.18); }

@media (max-width: 768px) {
  body { overflow: auto; }
  .journal { height: auto; overflow: visible; scroll-snap-type: none; }
  .spread { grid-template-columns: 1fr; min-height: auto; }
  .page { min-height: 100vh; }
  .gutter { left: 0; top: 50%; width: 100%; height: 4px; }
  .cover-title { font-size: clamp(4rem, 18vw, 7rem); }
  .entry-block, .decay-text { margin: 8%; }
  .specimen-grid { height: auto; grid-template-columns: repeat(2, 1fr); }
  .ledger { grid-template-columns: 1fr 1fr; font-size: 12px; }
  .final-spread { min-height: 100vh; }
}