:root {
  --ink: #12091f;
  --night: #160d2c;
  --purple: #6b3aa6;
  --purple-dark: #2b1649;
  --orange: #ff7a0b;
  --cream: #f5dfb2;
  --paper: #d7b27a;
  --white: #fff5df;
  --sleep-filter: saturate(.95) brightness(.9);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--orange) var(--night); }
body {
  margin: 0;
  color: var(--white);
  background: var(--night);
  font-family: "Trebuchet MS", "Arial Black", sans-serif;
  overflow-x: hidden;
  transition: filter .45s ease, background .45s ease;
  filter: var(--sleep-filter);
}
body[data-sleep="0"] { --sleep-filter: saturate(1.15) brightness(1.12); }
body[data-sleep="1"] { --sleep-filter: saturate(1.05) brightness(1.02); }
body[data-sleep="2"] { --sleep-filter: saturate(.95) brightness(.92); }
body[data-sleep="3"] { --sleep-filter: saturate(.82) brightness(.8); }
body[data-sleep="4"] { --sleep-filter: saturate(.68) brightness(.68); }

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, a { -webkit-tap-highlight-color: transparent; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: .12;
  pointer-events: none;
  background-image: repeating-radial-gradient(circle at 0 0, transparent 0, rgba(255,255,255,.28) 1px, transparent 2px, transparent 5px);
  mix-blend-mode: overlay;
}

.progress { position: fixed; left: 0; top: 0; right: 0; height: 5px; background: #1d1034; z-index: 120; }
.progress span { display: block; width: 0; height: 100%; background: var(--orange); box-shadow: 0 0 16px var(--orange); }

.cave-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) rotate(-.35deg);
  z-index: 90;
  width: min(920px, calc(100% - 24px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  color: var(--ink);
  background: rgba(245,223,178,.93);
  border: 3px solid var(--ink);
  border-radius: 13px 19px 11px 17px;
  box-shadow: 7px 8px 0 rgba(18,9,31,.75);
  backdrop-filter: blur(8px);
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 1000; letter-spacing: -.06em; }
.brand img { width: 36px; height: 36px; border: 2px solid var(--ink); border-radius: 50%; }
.cave-nav nav { display: flex; gap: 18px; }
.cave-nav nav a { text-decoration: none; font-weight: 900; font-size: .9rem; }
.sound-toggle { justify-self: end; background: var(--purple); color: var(--white); border: 2px solid var(--ink); padding: 9px 12px; font: 900 .78rem/1 "Trebuchet MS", sans-serif; cursor: pointer; transform: rotate(1deg); }

.hero {
  min-height: 100svh;
  padding: 100px 4vw 80px;
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 14% 18%, #482573, transparent 33%), linear-gradient(#0b0718, #261442 75%, #12091f);
  isolation: isolate;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 55vw;
  aspect-ratio: 1;
  border-radius: 43% 57% 58% 42%;
  border: 22px solid rgba(116,66,160,.18);
  transform: rotate(17deg);
}
.hero::before { left: -26vw; bottom: -27vw; }
.hero::after { right: -28vw; top: -26vw; }
.moon { position: absolute; right: 8vw; top: 12vh; width: 80px; height: 80px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 50px rgba(245,223,178,.35); opacity: .55; }
.hero-banner-wrap { width: min(1500px, 100%); border: 5px solid #0b0612; box-shadow: 16px 18px 0 #0b0612; transform: rotate(-.8deg); background: #281441; }
.hero-banner { width: 100%; height: auto; aspect-ratio: 3/1; object-fit: contain; }
.hero-bottom { width: min(1100px, 92%); margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 38px; align-items: end; }
.hero-bottom h1 { margin: 0; color: var(--orange); font: 1000 clamp(2.5rem, 7vw, 6.5rem)/.83 "Arial Black", sans-serif; letter-spacing: -.085em; text-transform: uppercase; text-shadow: 5px 5px 0 #0c0616; transform: rotate(-2deg); }
.hero-bottom p { margin: 0 0 14px; font-size: clamp(1.1rem, 2vw, 1.7rem); max-width: 26ch; }
.hero-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 14px; }
.pillow-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 20px; color: var(--cream); background: var(--purple-dark); border: 3px solid #0a0512; border-radius: 20px 13px 21px 14px; box-shadow: 5px 6px 0 #090410; text-decoration: none; font-weight: 1000; letter-spacing: .02em; transition: transform .18s ease, box-shadow .18s ease; }
.pillow-button:hover, .pillow-button:focus-visible { transform: translate(3px, 3px) rotate(-1deg); box-shadow: 2px 3px 0 #090410; outline: 3px solid var(--cream); outline-offset: 3px; }
.pillow-button.primary { color: var(--ink); background: var(--orange); }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: var(--cream); text-decoration: none; font-weight: 900; font-size: .88rem; opacity: .85; }
.scroll-cue span { display: inline-block; animation: bob 1.2s infinite ease-in-out; }

.story-section { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(28px, 6vw, 100px); align-items: center; padding: 10vw max(5vw, 24px); background: #3b205d; position: relative; }
.story-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 48%, rgba(8,4,15,.32) 48.2%, transparent 49%); background-size: 34px 34px; opacity: .35; }
.story-art { position: relative; transform: rotate(-2.5deg); z-index: 1; }
.story-art img { width: 100%; border: 7px solid var(--cream); box-shadow: 18px 20px 0 #160b26; object-fit: contain; }
.tape { position: absolute; width: 110px; height: 30px; background: rgba(236,208,145,.85); box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.tape-a { left: -26px; top: 18px; transform: rotate(-33deg); }
.tape-b { right: -20px; bottom: 18px; transform: rotate(-30deg); }
.story-card { position: relative; z-index: 1; color: var(--ink); background: var(--paper); padding: clamp(26px, 5vw, 58px); border: 4px solid var(--ink); box-shadow: 13px 14px 0 #160b26; transform: rotate(1deg); clip-path: polygon(1% 2%, 98% 0, 100% 96%, 96% 100%, 2% 98%, 0 5%); }
.eyebrow { margin: 0 0 14px; color: var(--orange); font-weight: 1000; font-size: .82rem; letter-spacing: .13em; }
.story-card .eyebrow { color: #5d2c89; }
.story-card h2, .section-head h2, .sleep-copy h2, .chart-heading h2 { margin: 0 0 22px; font: 1000 clamp(2.1rem, 5vw, 4.4rem)/.93 "Arial Black", sans-serif; letter-spacing: -.06em; }
.story-card p { font: 700 1rem/1.65 Georgia, serif; }
.story-card blockquote { margin: 28px 0 0; padding: 18px 0 0; border-top: 3px dashed var(--ink); color: #4f247c; font: 1000 1.4rem/1.1 "Arial Black", sans-serif; }

.sleep-lab { padding: 90px max(6vw, 24px); display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; background: #10081e; }
.sleep-copy p:last-child { color: #bfa8d2; font-size: 1.05rem; }
.meter { padding: 34px; border: 4px solid var(--cream); border-radius: 31px 17px 28px 13px; background: #2b1649; box-shadow: 12px 13px 0 #09040f; }
.meter-labels { display: flex; justify-content: space-between; color: #cab4dc; font-weight: 900; font-size: .83rem; }
.meter input { width: 100%; margin: 24px 0; accent-color: var(--orange); cursor: grab; }
.meter output { display: block; text-align: center; color: var(--orange); font: 1000 clamp(1.8rem, 4vw, 3.4rem)/1 "Arial Black", sans-serif; letter-spacing: -.06em; }

.dreams-section { padding: 100px 0 110px; background: #23123c; }
.section-head { width: min(1050px, calc(100% - 48px)); margin: 0 auto 44px; }
.section-head p:last-child { color: #c9b4d9; }
.dream-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 560px); gap: 28px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; padding: 12px max(8vw, 24px) 36px; scrollbar-color: var(--orange) transparent; cursor: grab; }
.dream-track.active { cursor: grabbing; scroll-snap-type: none; }
.dream-card { scroll-snap-align: center; margin: 0; position: relative; background: #0d0718; border: 5px solid var(--cream); box-shadow: 13px 15px 0 #0a0512; transform: rotate(var(--tilt, -1deg)); }
.dream-card:nth-child(even) { --tilt: 1.1deg; }
.dream-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #130b23; }
.dream-card figcaption { display: flex; justify-content: space-between; gap: 18px; padding: 18px 20px; color: var(--ink); background: var(--cream); font-weight: 900; }
.dream-card figcaption b { color: #6a3295; }

.manifesto { min-height: 90svh; position: relative; display: grid; place-items: center; padding: 40px 24px; overflow: hidden; }
.manifesto-bg { position: absolute; inset: -6%; background: linear-gradient(rgba(16,8,30,.46), rgba(16,8,30,.72)), url("assets/scene-dream.webp") center/cover no-repeat; transform: scale(1.06); }
.manifesto-note { position: relative; width: min(800px, 92%); padding: clamp(34px, 7vw, 78px); color: var(--ink); background: #edcd96; border: 4px solid var(--ink); box-shadow: 16px 18px 0 #0c0615; transform: rotate(-1.5deg); }
.manifesto-note p { margin: 0; font: 1000 clamp(1.8rem, 4.6vw, 4rem)/1.08 "Arial Black", sans-serif; letter-spacing: -.055em; }
.pin { position: absolute; left: 50%; top: 12px; width: 23px; height: 23px; border-radius: 50%; background: var(--orange); border: 3px solid var(--ink); box-shadow: 2px 3px 0 rgba(0,0,0,.4); }

.roadmap { padding: 100px max(6vw, 24px); background: #422366; }
.roadmap-list { list-style: none; max-width: 1050px; margin: 0 auto; padding: 0; display: grid; gap: 22px; }
.roadmap-list li { display: grid; grid-template-columns: 100px 1fr; gap: 24px; align-items: center; padding: 24px; color: var(--ink); background: var(--cream); border: 4px solid var(--ink); box-shadow: 9px 10px 0 #160b26; transform: rotate(var(--r, -.45deg)); }
.roadmap-list li:nth-child(2) { --r: .65deg; background: #d9b57e; }
.roadmap-list li:nth-child(3) { --r: -.9deg; }
.roadmap-list li > span { color: var(--orange); font: 1000 3rem/1 "Arial Black", sans-serif; }
.roadmap-list h3 { margin: 0 0 6px; font-size: 1.35rem; }
.roadmap-list p { margin: 0; font: 700 1rem/1.45 Georgia, serif; }

.chart-section { padding: 100px max(6vw, 24px); background: #0d0718; }
.chart-heading { max-width: 1200px; margin: 0 auto 32px; display: flex; justify-content: space-between; align-items: end; gap: 22px; }
.chart-heading h2 { margin-bottom: 0; }
.chart-shell { max-width: 1200px; height: min(76vh, 720px); margin: 0 auto; border: 5px solid var(--cream); border-radius: 24px 15px 27px 13px; overflow: hidden; box-shadow: 14px 16px 0 #4a2770; background: #150d20; }
.chart-shell iframe { display: block; width: 100%; height: 100%; border: 0; }

.final-scene { min-height: 90svh; position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(28px, 5vw, 70px); padding: 8vw; background: #25133d; }
.final-scene img { width: 100%; object-fit: contain; border: 5px solid var(--cream); box-shadow: 14px 16px 0 #0d0718; transform: rotate(1.3deg); }
.final-copy p { font: 1000 clamp(2rem, 5vw, 4.6rem)/1 "Arial Black", sans-serif; letter-spacing: -.07em; color: var(--orange); text-shadow: 4px 4px 0 #0b0612; }

footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding: 34px max(5vw, 24px); color: var(--ink); background: var(--orange); border-top: 5px solid var(--ink); }
footer div { display: flex; gap: 12px; align-items: baseline; }
footer div span { font-weight: 900; }
footer p { margin: 0; font: italic 700 1rem Georgia, serif; }
footer > a { justify-self: end; font-weight: 1000; }

.reveal { opacity: 0; transform: translateY(28px) rotate(.8deg); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0) rotate(0); }
.zzz { position: fixed; z-index: 70; pointer-events: none; color: var(--orange); font: 1000 18px/1 "Arial Black", sans-serif; animation: drift 1.15s forwards ease-out; text-shadow: 2px 2px 0 #0a0512; }

@keyframes bob { 50% { transform: translateY(7px); } }
@keyframes drift { to { transform: translate(12px, -48px) rotate(18deg); opacity: 0; } }

@media (max-width: 820px) {
  .cave-nav { grid-template-columns: 1fr auto; }
  .cave-nav nav { display: none; }
  .hero { padding-inline: 18px; }
  .hero-banner-wrap { box-shadow: 8px 10px 0 #0b0612; }
  .hero-bottom { grid-template-columns: 1fr; width: 100%; }
  .hero-actions { grid-column: 1; }
  .story-section, .sleep-lab, .final-scene { grid-template-columns: 1fr; }
  .story-art { max-width: 620px; margin: 0 auto; }
  .chart-heading { align-items: flex-start; flex-direction: column; }
  footer { grid-template-columns: 1fr; text-align: center; }
  footer div { justify-content: center; }
  footer > a { justify-self: center; }
}

@media (max-width: 520px) {
  .brand span { display: none; }
  .cave-nav { width: calc(100% - 18px); top: 10px; }
  .hero { min-height: 92svh; padding-top: 86px; }
  .hero-banner { object-fit: contain; object-position: center; }
  .hero-bottom h1 { font-size: 2.65rem; }
  .pillow-button { width: 100%; }
  .story-section { padding-top: 85px; }
  .story-card { padding: 26px 20px; }
  .meter { padding: 26px 18px; }
  .dream-track { grid-auto-columns: 86vw; gap: 18px; }
  .dream-card figcaption { flex-direction: column; gap: 5px; }
  .roadmap-list li { grid-template-columns: 62px 1fr; padding: 18px; }
  .roadmap-list li > span { font-size: 2rem; }
  .chart-shell { height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}