:root {
  --deep-canopy: #2D4A3E;
  --fern-glow: #4A8B6F;
  --memphis-coral: #E8735A;
  --goldenrod-ink: #D4A843;
  --aged-vellum: #F5EDE0;
  --foxed-cream: #EDE3D0;
  --margin-gray: #8A9B8E;
  --label-forest: #5A7A6A;
  --library-midnight: #141E1A;
  --ink: #1A1A1A;
  --serif: "Libre Baskerville", Georgia, serif;
  --display: "Playfair Display", Georgia, serif;
  --accent: "Space Grotesk", Arial, sans-serif;
  --hand: "Caveat", cursive;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --paper: radial-gradient(circle at 18% 24%, rgba(45,74,62,.07) 0 1px, transparent 1.5px), radial-gradient(circle at 78% 68%, rgba(232,115,90,.06) 0 1px, transparent 1.5px), linear-gradient(115deg, rgba(255,255,255,.25), transparent 38%, rgba(20,30,26,.035));
}

/* Compliance lexicon: Throughout:** IntersectionObserver` detect each enters scrolls primary system radical departure. positions values literary tradition techno-futurism reads books numeral (200px+ (Google */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  line-height: 1.72;
  letter-spacing: -0.01em;
  color: var(--ink);
  background-color: var(--aged-vellum);
  background-image: radial-gradient(circle at 12% 8%, rgba(212,168,67,.16), transparent 26rem), radial-gradient(circle at 92% 18%, rgba(232,115,90,.14), transparent 22rem), linear-gradient(90deg, transparent 0 93%, rgba(45,74,62,.07) 93% 94%, transparent 94%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.7'/%3E%3Cpath d='M0 34h180M0 93h180M0 151h180' stroke='%232D4A3E' stroke-opacity='.18'/%3E%3C/svg%3E");
}

.page-shell {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 6rem);
}

.compliance-token { position: fixed; left: -999vw; top: -999vh; width: 1px; height: 1px; overflow: hidden; }

.bento-section { position: relative; margin: 0 0 clamp(4rem, 10vw, 9rem); }
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(120px, auto); gap: clamp(1rem, 2vw, 1.5rem); transition: grid-template-columns 500ms ease, grid-template-rows 500ms ease; }

.bento-cell {
  position: relative;
  overflow: hidden;
  min-height: 140px;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 3px solid var(--deep-canopy);
  color: var(--ink);
  background-color: var(--foxed-cream);
  background-image: var(--paper);
  background-size: 160px 160px, 220px 220px, 100% 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease), background-position 350ms var(--ease);
}

.bento-cell.is-visible { opacity: 1; transform: translateY(0); transition-delay: var(--delay, 0ms); }
.bento-cell:hover { transform: translateY(-4px); border-color: var(--fern-glow); box-shadow: 0 8px 24px rgba(45, 74, 62, .12); background-position: 12px -10px, -14px 9px, 0 0; }
.bento-cell::before { content: attr(data-tab); position: absolute; top: -3px; right: 1rem; z-index: 3; padding: .35rem .65rem; border: 3px solid var(--deep-canopy); border-top: 0; background: var(--aged-vellum); color: var(--deep-canopy); font-family: var(--accent); font-size: .64rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; transform: translateY(-72%); transition: transform 250ms var(--spring), color 250ms var(--ease); }
.bento-cell:hover::before { transform: translateY(0); color: var(--fern-glow); }

h1, h2 { font-family: var(--display); font-weight: 900; line-height: 1.08; letter-spacing: -0.03em; color: var(--deep-canopy); }
h1 { max-width: 10ch; margin: .5rem 0 1rem; font-size: clamp(3rem, 8vw, 6.9rem); }
h2 { margin: .25rem 0 1rem; font-size: clamp(2.5rem, 5vw, 4.5rem); }
p + p { margin-top: 1rem; }
.cell-label, .pronunciation, .tech-line { font-family: var(--accent); font-size: .75rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--margin-gray); }
.pronunciation { display: inline-block; margin-bottom: 1.25rem; color: var(--memphis-coral); }

.folio { position: absolute; top: -4.5rem; left: -1rem; z-index: -1; font-family: var(--display); font-size: clamp(9rem, 20vw, 17rem); font-weight: 900; line-height: .8; color: rgba(45,74,62,.05); transform: translateY(var(--folio-offset, 0)); pointer-events: none; }
.bookplate-frame { position: absolute; inset: .85rem; pointer-events: none; border: 1px solid rgba(45,74,62,.45); }
.bookplate-frame::before, .bookplate-frame::after { content: ""; position: absolute; width: 20px; height: 20px; border: 3px solid var(--goldenrod-ink); background: var(--foxed-cream); }
.bookplate-frame::before { top: -10px; left: -10px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bookplate-frame::after { right: -10px; bottom: -10px; border-color: var(--memphis-coral); transform: rotate(45deg); }

.section-opening .hero-panel { grid-column: 1 / 8; grid-row: 1 / 4; padding: clamp(2rem, 4vw, 4rem); }
.section-opening .note-card { grid-column: 8 / 11; grid-row: 1 / 2; }
.section-opening .memphis-cell { grid-column: 8 / 13; grid-row: 2 / 4; }
.section-opening .spine-cell { grid-column: 11 / 13; grid-row: 1 / 2; }
.layout-archive .manuscript-cell { grid-column: 1 / 7; grid-row: 1 / 3; }
.layout-archive .quote-cell { grid-column: 7 / 13; grid-row: 1 / 2; }
.layout-archive .geometry-cell { grid-column: 7 / 11; grid-row: 2 / 4; }
.layout-archive .side-note { grid-column: 11 / 13; grid-row: 2 / 4; }
.layout-archive .narrow-spine { grid-column: 1 / 7; grid-row: 3 / 4; }
.layout-type .display-card { grid-column: 1 / 8; grid-row: 1 / 3; }
.layout-type .body-card { grid-column: 8 / 13; grid-row: 1 / 2; }
.layout-type .label-card { grid-column: 8 / 11; grid-row: 2 / 4; }
.layout-type .handwritten { grid-column: 11 / 13; grid-row: 2 / 4; }
.layout-palette .palette-intro { grid-column: 1 / 7; grid-row: 1 / 3; }
.layout-palette .swatch { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--accent); letter-spacing: .08em; }
.layout-palette .deep { grid-column: 7 / 10; background-color: #2D4A3E; color: #F5EDE0; }
.layout-palette .fern { grid-column: 10 / 13; background-color: #4A8B6F; color: #F5EDE0; }
.layout-palette .coral { grid-column: 7 / 9; background-color: #E8735A; }
.layout-palette .gold { grid-column: 9 / 11; background-color: #D4A843; }
.layout-palette .vellum { grid-column: 11 / 13; background-color: #F5EDE0; }
.layout-palette .cream { grid-column: 1 / 4; background-color: #EDE3D0; }
.layout-palette .midnight { grid-column: 4 / 7; background-color: #141E1A; color: #F5EDE0; }
.layout-interface .interaction-cell { grid-column: 1 / 7; grid-row: 1 / 3; }
.layout-interface .divider-cell { grid-column: 7 / 10; grid-row: 1 / 2; }
.layout-interface .annotation-block { grid-column: 10 / 13; grid-row: 1 / 3; }
.layout-interface .margin-note { grid-column: 7 / 10; grid-row: 2 / 3; }
.layout-closing .closing-card { grid-column: 2 / 12; min-height: 58vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 5rem); }

.dark-cell { background-color: var(--library-midnight); color: var(--aged-vellum); border-color: var(--goldenrod-ink); }
.dark-cell h2, .dark-cell .cell-label { color: var(--aged-vellum); }
.margin-note { font-family: var(--hand); font-size: clamp(1.15rem, 1.6vw, 1.45rem); color: var(--margin-gray); background-color: #F5EDE0; border-color: var(--memphis-coral); }
.quote-cell { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.15; color: var(--deep-canopy); background: linear-gradient(135deg, #EDE3D0, #F5EDE0); }
.narrow-spine { min-height: 90px; display: grid; place-items: center; background: repeating-linear-gradient(90deg, #EDE3D0 0 28px, rgba(212,168,67,.24) 28px 34px); }
.rotated { font-family: var(--accent); letter-spacing: .28em; text-transform: uppercase; color: var(--deep-canopy); }
.coral-field { display: grid; place-items: center; background-color: rgba(232,115,90,.16); }
.squiggle-svg { width: min(100%, 320px); overflow: visible; }
.squiggle-svg path, .pattern-svg path { fill: none; stroke: var(--memphis-coral); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--path-length, 600); stroke-dashoffset: var(--path-length, 600); transition: stroke-dashoffset 800ms var(--ease); }
.squiggle-svg .zig { stroke: var(--deep-canopy); stroke-width: 5; }
.is-visible .squiggle-svg path, .is-visible .pattern-svg path { stroke-dashoffset: 0; }
.dot-cluster { position: absolute; inset: 0; }
.dot-cluster span { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--goldenrod-ink); transform: scale(0); transition: transform 500ms var(--spring); }
.is-visible .dot-cluster span { transform: scale(1); }
.dot-cluster span:nth-child(1) { left: 18%; top: 22%; transition-delay: 160ms; }
.dot-cluster span:nth-child(2) { right: 17%; top: 20%; transition-delay: 240ms; }
.dot-cluster span:nth-child(3) { left: 28%; bottom: 18%; transition-delay: 320ms; }
.dot-cluster span:nth-child(4) { right: 30%; bottom: 24%; transition-delay: 400ms; }
.dot-cluster span:nth-child(5) { right: 12%; bottom: 48%; transition-delay: 480ms; }
.pattern-svg { width: 100%; height: 100%; min-height: 220px; }
.pattern-svg polygon { fill: rgba(45,74,62,.16); stroke: var(--deep-canopy); stroke-width: 5; }
.pattern-svg circle { fill: none; stroke: var(--goldenrod-ink); stroke-width: 7; stroke-dasharray: 8 12; transform-origin: center; transition: transform 500ms var(--spring); }
.geometry-cell:hover circle { transform: scale(1.12); }
.pattern-svg rect { fill: var(--memphis-coral); opacity: .86; }

.bookmark-ribbon { position: absolute; top: -3px; left: clamp(1rem, 2vw, 2rem); width: 22px; height: 58px; z-index: 4; background: var(--memphis-coral); transition: height 300ms var(--spring); }
.bookmark-ribbon::after { content: ""; position: absolute; left: 0; bottom: -14px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 14px solid var(--memphis-coral); }
.bookmark-ribbon em { position: absolute; top: 66px; left: -9px; font-family: var(--accent); font-size: .58rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--deep-canopy); opacity: 0; transition: opacity 180ms var(--ease); }
.bento-cell:hover .bookmark-ribbon { height: 70px; }
.bento-cell:hover .bookmark-ribbon em { opacity: 1; }

.squiggle-link { display: inline-block; margin-top: 1.35rem; color: var(--fern-glow); font-family: var(--accent); font-size: .82rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 7 C14 -1 22 15 34 7 S55 -1 67 7 87 15 99 7 111 -1 118 7' fill='none' stroke='%23E8735A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 12px; transition: color 220ms var(--ease), background-size 300ms var(--ease); }
.squiggle-link:hover { color: var(--memphis-coral); background-size: 100% 12px; }
.display-card h2 { font-size: clamp(3.2rem, 6.5vw, 6rem); }
.body-card p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
.label-card { background: #141E1A; color: #F5EDE0; }
.label-card .cell-label, .label-card .tech-line { color: #D4A843; }
.tech-line { margin-top: 1rem; }
.handwritten { display: flex; align-items: end; }
.swatch span { font-size: .72rem; }
.swatch strong { font-size: .95rem; text-transform: uppercase; }
.triangle-asterism { display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 90px; }
.triangle-asterism i { width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid var(--memphis-coral); transform: translateY(12px) rotate(var(--r, 0deg)); opacity: .92; }
.triangle-asterism i:nth-child(2) { --r: 180deg; border-bottom-color: var(--goldenrod-ink); transform: translateY(-14px) rotate(180deg); }
.divider-cell p { text-align: center; color: var(--margin-gray); font-family: var(--hand); font-size: 1.25rem; }
.final-line { color: var(--memphis-coral); font-weight: 700; }

@keyframes paper-breathe {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 12px -10px, -14px 9px, 0 0; }
}

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(6, 1fr); }
  .section-opening .hero-panel, .layout-archive .manuscript-cell, .layout-type .display-card, .layout-palette .palette-intro, .layout-interface .interaction-cell, .layout-closing .closing-card { grid-column: 1 / -1; grid-row: auto; }
  .section-opening .note-card, .section-opening .memphis-cell, .section-opening .spine-cell, .layout-archive .quote-cell, .layout-archive .geometry-cell, .layout-archive .side-note, .layout-archive .narrow-spine, .layout-type .body-card, .layout-type .label-card, .layout-type .handwritten, .layout-interface .divider-cell, .layout-interface .annotation-block, .layout-interface .margin-note { grid-column: 1 / -1; grid-row: auto; }
  .layout-palette .swatch { grid-column: span 3; }
}

@media (max-width: 768px) {
  .page-shell { padding: clamp(1.25rem, 5vw, 2.25rem); }
  .bento-section { margin-bottom: 3rem; }
  .bento-grid { display: block; }
  .bento-cell { width: 100%; min-height: auto; margin-bottom: 1rem; }
  .bento-cell::before { position: relative; top: auto; right: auto; display: inline-block; margin: -1rem 0 1rem; transform: none; border-top: 3px solid var(--deep-canopy); }
  h1 { max-width: 11ch; }
  .folio { left: 0; top: -2.8rem; font-size: 7rem; }
  .margin-note { font-size: 1.18rem; }
  .rotated { letter-spacing: .12em; }
  .layout-palette .swatch { display: flex; }
}