:root {
  /* Typography note: use Space Grotesk** sparingly for Bauhaus specimen numbers; Grotes* specimen label match. */
  --midnight: #07142E;
  --panel: #102A56;
  --moon: #F2E9C9;
  --marigold: #D7A21E;
  --vermilion: #D94B35;
  --leaf: #2F6B4F;
  --lilac: #9C8FE8;
  --seam: #020711;
  --baloo: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --nunito: "Nunito Sans", Inter, system-ui, sans-serif;
  --space: "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--nunito);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 71% 16%, rgba(156, 143, 232, .18), transparent 23rem),
    radial-gradient(circle at 18% 82%, rgba(47, 107, 79, .30), transparent 28rem),
    linear-gradient(135deg, var(--seam), var(--midnight) 42%, #071024 100%);
}

button { font: inherit; }

.site-shell {
  min-height: 100vh;
  padding: clamp(14px, 2vw, 28px);
  position: relative;
  isolation: isolate;
}

.bento-cabinet {
  min-height: calc(100vh - clamp(28px, 4vw, 56px));
  display: grid;
  grid-template-columns: 1.1fr .65fr .78fr .92fr 1fr;
  grid-template-rows: .8fr .7fr .72fr .78fr;
  grid-template-areas:
    "word word moon moon stem"
    "leaf copy copy oracle stem"
    "moth copy copy oracle almanac"
    "mush dawn dawn dawn almanac";
  gap: clamp(10px, 1.4vw, 18px);
  transition: grid-template-columns .8s cubic-bezier(.2,.8,.16,1), grid-template-rows .8s cubic-bezier(.2,.8,.16,1);
}

.cell {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--seam);
  border-radius: clamp(18px, 2.2vw, 34px);
  background: linear-gradient(145deg, rgba(16,42,86,.96), rgba(7,20,46,.94));
  box-shadow: inset 0 0 0 1px rgba(242,233,201,.08), 0 18px 70px rgba(2,7,17,.38);
  transition: transform .55s cubic-bezier(.2,.8,.16,1), box-shadow .55s ease, background .55s ease;
}

.cell::before, .cell::after {
  content: "";
  position: absolute;
  background: rgba(242,233,201,.16);
  transform-origin: left center;
  animation: seamDraw 1.4s ease both;
}

.cell::before { width: 42%; height: 2px; left: 18px; top: 18px; }
.cell::after { width: 2px; height: 36%; right: 18px; bottom: 18px; }

.wordmark-cell { grid-area: word; background: var(--moon); color: var(--midnight); padding: clamp(22px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.wordmark-cell h1 { margin: 0; font-family: var(--baloo); font-size: clamp(4.1rem, 10vw, 10.5rem); line-height: .78; letter-spacing: -.07em; color: var(--midnight); }
.whisper { max-width: 48rem; margin: 1rem 0 0; color: rgba(7,20,46,.78); font-size: clamp(1rem, 1.45vw, 1.32rem); line-height: 1.55; font-weight: 700; }
.specimen-code, .catalog-mark, .tile-number, .vertical-label { font-family: var(--space); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; font-size: .74rem; }
.specimen-code { margin: 0 0 .55rem; color: var(--vermilion); }

.moon-cell { grid-area: moon; min-height: 18rem; background: radial-gradient(circle at 50% 50%, rgba(16,42,86,.4), var(--panel)); }
.moon-orb { position: absolute; width: min(45vw, 29rem); aspect-ratio: 1; border-radius: 50%; background: var(--marigold); right: -7rem; top: -8rem; box-shadow: 0 0 0 1.6rem rgba(215,162,30,.10), 0 0 6rem rgba(215,162,30,.40); animation: moonGlow 5.5s ease-in-out infinite; }
.lilac-halo { position: absolute; width: 10rem; aspect-ratio: 1; border-radius: 50%; left: 9%; bottom: 12%; border: 2rem solid rgba(156,143,232,.28); }
.catalog-mark { position: absolute; left: 24px; bottom: 20px; color: var(--moon); z-index: 2; }

.stem-cell { grid-area: stem; display: grid; place-items: center; background: linear-gradient(180deg, var(--panel), var(--midnight)); }
.stem-line { width: 32px; height: 78%; background: var(--leaf); border-radius: 999px; box-shadow: 0 0 0 12px rgba(47,107,79,.16); }
.stem-dot { position: absolute; border-radius: 50%; width: 42px; aspect-ratio: 1; }
.stem-dot.vermilion { background: var(--vermilion); top: 18%; right: 25%; }
.stem-dot.lilac { background: var(--lilac); bottom: 18%; left: 23%; }
.vertical-label { position: absolute; writing-mode: vertical-rl; left: 18px; top: 24px; color: rgba(242,233,201,.72); }

.copy-cell { grid-area: copy; padding: clamp(24px, 4vw, 52px); display: flex; flex-direction: column; justify-content: end; background: linear-gradient(160deg, var(--panel), var(--midnight)); }
.copy-cell h2, .dawn-cell h2 { font-family: var(--baloo); font-size: clamp(2.8rem, 6.2vw, 6.4rem); line-height: .82; margin: 0 0 1rem; color: var(--moon); letter-spacing: -.04em; }
.copy-cell p, .dawn-cell p { margin: 0; font-size: clamp(1.02rem, 1.6vw, 1.42rem); line-height: 1.58; max-width: 46rem; color: rgba(242,233,201,.84); }

.oracle-cell { grid-area: oracle; display: grid; place-items: center; padding: 24px; }
.oracle-cell p { position: absolute; bottom: 18px; left: 22px; margin: 0; font-family: var(--space); text-transform: uppercase; letter-spacing: .14em; color: rgba(242,233,201,.7); }
.oracle-wheel { width: min(28vw, 18rem); aspect-ratio: 1; border-radius: 50%; position: relative; background: conic-gradient(var(--marigold) 0 76deg, var(--midnight) 76deg 181deg, var(--leaf) 181deg 262deg, var(--vermilion) 262deg 319deg, var(--lilac) 319deg); box-shadow: inset 0 0 0 20px var(--panel), 0 0 0 2px var(--seam); animation: oracleSpin 22s linear infinite; }
.oracle-wheel span, .oracle-wheel i, .oracle-wheel b { position: absolute; border-radius: 50%; display: block; }
.oracle-wheel span { inset: 34%; background: var(--moon); }
.oracle-wheel i { width: 16px; aspect-ratio: 1; background: var(--vermilion); top: 14%; left: 44%; }
.oracle-wheel b { width: 10px; aspect-ratio: 1; background: var(--seam); bottom: 24%; right: 18%; }

.specimen-tile { padding: 18px; cursor: pointer; background: linear-gradient(160deg, rgba(16,42,86,.92), rgba(7,20,46,.98)); }
.specimen-tile:hover { transform: translateY(-14px) rotate(-1.2deg); box-shadow: 0 26px 70px rgba(156,143,232,.26), inset 0 0 0 1px rgba(242,233,201,.10); }
.specimen-tile:hover .hidden-label { transform: translateY(0); opacity: 1; }
.specimen-tile:hover .moon-dot { transform: rotate(130deg) scale(1.12); }
.tile-leaf { grid-area: leaf; }
.tile-moth { grid-area: moth; }
.tile-mushroom { grid-area: mush; }
.tile-number { color: var(--lilac); position: relative; z-index: 2; }
.moon-dot { width: 34px; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(90deg, var(--moon) 50%, var(--panel) 50%); position: absolute; right: 18px; top: 18px; transition: transform .6s ease; }
.hidden-label { position: absolute; left: 18px; right: 18px; bottom: 16px; margin: 0; transform: translateY(22px); opacity: 0; transition: .45s ease; font-family: var(--space); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--moon); }
.plant-sigil { position: absolute; inset: 22% 14% 18%; }
.leaf-sigil span { position: absolute; width: 24px; height: 70%; left: 48%; top: 8%; background: var(--leaf); border-radius: 999px; }
.leaf-sigil i, .leaf-sigil b { position: absolute; width: 46%; height: 38%; border-radius: 50% 50% 0 50%; background: var(--leaf); top: 20%; transform: rotate(-32deg); }
.leaf-sigil i { left: 14%; }
.leaf-sigil b { right: 10%; transform: scaleX(-1) rotate(-32deg); background: var(--moon); }
.moth-sigil span, .moth-sigil i { position: absolute; width: 48%; height: 64%; top: 12%; background: var(--lilac); clip-path: polygon(50% 0, 100% 100%, 0 80%); }
.moth-sigil span { left: 2%; transform: rotate(-22deg); }
.moth-sigil i { right: 2%; transform: scaleX(-1) rotate(-22deg); background: var(--vermilion); }
.moth-sigil b { position: absolute; width: 16px; height: 78%; left: calc(50% - 8px); top: 10%; border-radius: 999px; background: var(--moon); }
.mushroom-sigil span { position: absolute; width: 74%; height: 46%; left: 13%; top: 16%; background: var(--marigold); border-radius: 999px 999px 12px 12px; }
.mushroom-sigil i { position: absolute; width: 24%; height: 48%; left: 38%; bottom: 9%; background: var(--moon); border-radius: 999px; }
.mushroom-sigil b { position: absolute; width: 13px; aspect-ratio: 1; border-radius: 50%; background: var(--vermilion); left: 33%; top: 32%; box-shadow: 48px 10px 0 var(--panel); }

.almanac-cell { grid-area: almanac; padding: 24px; display: flex; flex-direction: column; justify-content: end; gap: 14px; }
.time-row { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding-top: 14px; border-top: 1px solid rgba(242,233,201,.2); }
.time-row span { font-family: var(--space); color: var(--marigold); }
.time-row em { font-style: normal; color: rgba(242,233,201,.76); }
.dawn-cell { grid-area: dawn; padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: end; background: linear-gradient(90deg, var(--midnight), var(--panel)); }
.dawn-band { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: var(--moon); box-shadow: 0 -18px 70px rgba(242,233,201,.20); }

.glyph-tabs { position: fixed; z-index: 10; top: 50%; right: 15px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.glyph-tab { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--seam); background: var(--panel); color: var(--moon); cursor: pointer; transition: transform .3s ease, background .3s ease; }
.glyph-tab:hover, .glyph-tab.is-active { transform: translateX(-5px); background: var(--marigold); color: var(--seam); }

.omen-drawer { position: fixed; z-index: 12; right: clamp(16px, 3vw, 44px); bottom: clamp(16px, 3vw, 44px); width: min(92vw, 430px); padding: 28px; border: 2px solid var(--seam); border-radius: 28px; background: var(--moon); color: var(--midnight); transform: translateY(130%) rotate(2deg); transition: transform .55s cubic-bezier(.2,.8,.16,1); box-shadow: 0 28px 90px rgba(2,7,17,.55); }
.omen-drawer.is-open { transform: translateY(0) rotate(0deg); }
.omen-drawer button { position: absolute; right: 14px; top: 12px; border: 0; background: var(--vermilion); color: var(--moon); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.omen-drawer h3 { font-family: var(--baloo); font-size: 2.4rem; line-height: .9; margin: .4rem 0 1rem; }
.omen-drawer p:last-child { line-height: 1.55; font-weight: 700; }

.pollen-field { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.pollen-field span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--moon); opacity: .45; animation: pollenDrift 9s ease-in-out infinite; }
.pollen-field span:nth-child(1) { left: 12%; top: 19%; animation-delay: -1s; }
.pollen-field span:nth-child(2) { left: 30%; top: 72%; background: var(--lilac); animation-delay: -4s; }
.pollen-field span:nth-child(3) { left: 47%; top: 15%; animation-delay: -7s; }
.pollen-field span:nth-child(4) { left: 63%; top: 52%; background: var(--marigold); animation-delay: -2s; }
.pollen-field span:nth-child(5) { left: 78%; top: 28%; animation-delay: -6s; }
.pollen-field span:nth-child(6) { left: 88%; top: 80%; background: var(--vermilion); animation-delay: -3s; }
.pollen-field span:nth-child(7) { left: 18%; top: 86%; animation-delay: -8s; }
.pollen-field span:nth-child(8) { left: 56%; top: 88%; background: var(--leaf); animation-delay: -5s; }

.site-shell[data-scene="herbarium"] .bento-cabinet { grid-template-columns: .9fr 1.1fr 1.1fr .7fr .8fr; grid-template-rows: .65fr 1fr 1fr .55fr; }
.site-shell[data-scene="herbarium"] .specimen-tile { background: linear-gradient(155deg, rgba(47,107,79,.72), rgba(16,42,86,.96)); }
.site-shell[data-scene="almanac"] .almanac-cell { transform: scale(1.03); box-shadow: 0 28px 90px rgba(215,162,30,.14); }
.site-shell[data-scene="geometry"] .oracle-cell { transform: scale(1.04) rotate(-1deg); }
.site-shell[data-scene="dawn"] .dawn-cell { background: linear-gradient(90deg, var(--panel), var(--moon)); color: var(--midnight); }
.site-shell[data-scene="dawn"] .dawn-cell h2, .site-shell[data-scene="dawn"] .dawn-cell p { color: var(--midnight); }

@keyframes oracleSpin { to { transform: rotate(360deg); } }
@keyframes moonGlow { 50% { box-shadow: 0 0 0 2.4rem rgba(215,162,30,.13), 0 0 8rem rgba(215,162,30,.55); transform: translate(-8px, 6px); } }
@keyframes pollenDrift { 50% { transform: translate(24px, -38px) scale(1.4); opacity: .8; } }
@keyframes seamDraw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

@media (max-width: 980px) {
  .bento-cabinet { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "word word" "moon stem" "copy copy" "leaf moth" "mush oracle" "almanac almanac" "dawn dawn"; }
  .cell { min-height: 220px; }
  .stem-cell { min-height: 360px; }
  .glyph-tabs { top: auto; right: 16px; bottom: 16px; transform: none; flex-direction: row; }
}

@media (max-width: 620px) {
  .site-shell { padding: 10px; }
  .bento-cabinet { grid-template-columns: 1fr; grid-template-areas: "word" "moon" "copy" "leaf" "moth" "mush" "oracle" "almanac" "stem" "dawn"; }
  .wordmark-cell h1 { font-size: 4.7rem; }
}