:root {
  --sunrise-cream: #FFF3D8;
  --peach-glass: #FFB980;
  --civic-coral: #FF6F61;
  --honey-gold: #F6C85F;
  --transparent-amber: #D98C3A;
  --deep-ballot-ink: #26324A;
  --hopeful-teal: #36C6B5;
  --glass-white: rgba(255, 255, 255, 0.28);
  --cursor-x: 50vw;
  --cursor-y: 45vh;
  --display-font: "Jost", "Poppins", "Avenir Next", "Century Gothic", sans-serif;
  --heading-font: "Outfit", "Poppins", "Avenir Next", "Century Gothic", sans-serif;
  --body-font: "Nunito Sans", "Inter", "Poppins", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--deep-ballot-ink);
  font-family: var(--body-font);
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(255, 111, 97, 0.26), transparent 22rem),
    radial-gradient(circle at 15% 20%, rgba(54, 198, 181, 0.2), transparent 27rem),
    linear-gradient(135deg, #FFF3D8 0%, #FFB980 45%, #F6C85F 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,0.22) 45%, transparent 48%),
    radial-gradient(circle at 82% 18%, rgba(255, 243, 216, 0.65), transparent 13rem);
  mix-blend-mode: soft-light;
  z-index: 1;
}

.ambient-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  background:
    linear-gradient(60deg, transparent 48%, rgba(38, 50, 74, 0.18) 49%, transparent 50%) 0 0 / 8rem 8rem,
    linear-gradient(-20deg, transparent 47%, rgba(54, 198, 181, 0.18) 48%, transparent 50%) 0 0 / 11rem 11rem;
  transform: skewY(-8deg);
}

.horizon {
  position: fixed;
  left: -10vw;
  right: -10vw;
  bottom: -16vh;
  height: 43vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 243, 216, 0.9) 0%, rgba(246, 200, 95, 0.75) 36%, rgba(217, 140, 58, 0.2) 72%, transparent 100%);
  filter: blur(10px);
}

.civic-sun {
  position: fixed;
  width: 16rem;
  height: 16rem;
  left: var(--cursor-x);
  top: var(--cursor-y);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  background: radial-gradient(circle, rgba(255, 243, 216, 0.76) 0%, rgba(255, 185, 128, 0.45) 30%, rgba(255, 111, 97, 0.22) 52%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(2px);
}

.quest-map { position: relative; z-index: 2; }

.chapter {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
}

.glass-panel,
.policy-card,
.island,
.final-note {
  background: linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,185,128,0.2));
  border: 1px solid rgba(255, 185, 128, 0.72);
  box-shadow: 0 2rem 6rem rgba(217, 140, 58, 0.20), inset 0 0 2rem rgba(255,255,255,0.22);
  backdrop-filter: blur(22px) saturate(1.24);
  -webkit-backdrop-filter: blur(22px) saturate(1.24);
  border-radius: 2.2rem;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease, opacity 260ms ease;
}

.sun-reactive.is-lit,
.sun-reactive:hover {
  border-color: rgba(255, 111, 97, 0.95);
  box-shadow: 0 2rem 7rem rgba(255, 111, 97, 0.28), 0 0 2rem rgba(54, 198, 181, 0.25), inset 0 0 3rem rgba(255, 243, 216, 0.38);
  transform: translateY(-0.35rem) rotate(var(--tilt, 0deg));
}

.kicker,
.marker,
.policy-card span,
.island span,
.chapter-title span {
  display: inline-block;
  color: var(--civic-coral);
  font-family: var(--heading-font);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; font-family: var(--display-font); }

p { line-height: 1.65; }

.title-chamber {
  width: min(63rem, 72vw);
  min-height: 28rem;
  padding: clamp(2rem, 5vw, 5rem);
  transform: translate(2vw, 7vh) rotate(-4deg);
  --tilt: -4deg;
}

.title-chamber h1 {
  margin: 0.4rem 0 1.2rem;
  font-size: clamp(4rem, 13vw, 12.5rem);
  line-height: 0.82;
  letter-spacing: -0.07em;
  color: var(--deep-ballot-ink);
  text-shadow: 0.12em 0.1em 0 rgba(246, 200, 95, 0.34);
}

.statement {
  max-width: 43rem;
  font-size: clamp(1rem, 1.8vw, 1.45rem);
}

.prompt-card {
  position: absolute;
  right: 8vw;
  top: 18vh;
  width: min(24rem, 31vw);
  padding: 1.6rem;
  transform: rotate(7deg);
  --tilt: 7deg;
}

.route,
.bridge-line {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(255, 111, 97, 0.88), rgba(54, 198, 181, 0.8), transparent);
  opacity: 0.25;
  filter: drop-shadow(0 0 0.7rem rgba(54, 198, 181, 0.8));
  transition: opacity 240ms ease, filter 240ms ease;
}

.reactive-line.line-lit { opacity: 0.95; filter: drop-shadow(0 0 1rem #36C6B5); }
.route-a { width: 72vw; left: 19vw; top: 58vh; transform: rotate(-27deg); }
.route-b { width: 52vw; left: 8vw; top: 78vh; transform: rotate(12deg); }

.artifact {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(5rem, 9vw, 8rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 243, 216, 0.72);
  border-radius: 1.5rem;
  background: linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,185,128,0.25) 48%, rgba(54,198,181,0.22));
  box-shadow: 1.2rem 1.5rem 4rem rgba(217, 140, 58, 0.28), inset 0.6rem 0.6rem 1.4rem rgba(255,255,255,0.45);
  backdrop-filter: blur(12px);
  transform-style: preserve-3d;
  animation: drift 7s ease-in-out infinite alternate, spin 14s linear infinite;
}

.artifact span { font-family: var(--heading-font); font-size: 2.4rem; color: var(--deep-ballot-ink); }
.ballot-cube { right: 19vw; bottom: 15vh; }
.compass-prism { right: 39vw; top: 9vh; border-radius: 50%; animation-delay: -2s; }
.mic-prism { left: 7vw; bottom: 8vh; animation-delay: -4s; }

.chamber { min-height: 115vh; }
.chapter-title { position: absolute; right: 7vw; top: 7vh; width: 34rem; padding: 2rem; transform: rotate(5deg); --tilt: 5deg; }
.chapter-title h2, .bridge-copy h2, .ledger-wall h2 { font-size: clamp(2.2rem, 5vw, 5.7rem); line-height: 0.96; letter-spacing: -0.04em; }

.debate-table {
  position: absolute;
  left: 11vw;
  top: 25vh;
  width: 44vw;
  height: 23rem;
  border-radius: 50%;
  transform: rotate(-12deg) perspective(800px) rotateX(56deg);
  --tilt: -12deg;
}
.debate-table p { position: absolute; inset: auto 0 42%; text-align: center; font-family: var(--heading-font); letter-spacing: 0.14em; text-transform: uppercase; }
.table-glow { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle, rgba(54,198,181,0.3), transparent 68%); }
.seat { position: absolute; width: 4rem; height: 2rem; border-radius: 50%; background: rgba(38,50,74,0.18); }
.seat-one { left: 14%; top: 43%; } .seat-two { right: 20%; top: 22%; } .seat-three { right: 28%; bottom: 19%; }

.policy-card {
  position: absolute;
  padding: 1.45rem;
  width: min(24rem, 33vw);
}
.policy-card h3 { margin-top: 0.5rem; font-size: clamp(1.35rem, 2.4vw, 2.4rem); line-height: 1; }
.policy-one { left: 6vw; top: 10vh; transform: rotate(8deg); --tilt: 8deg; }
.policy-two { right: 9vw; top: 43vh; transform: rotate(-6deg); --tilt: -6deg; }
.policy-three { left: 40vw; bottom: 8vh; transform: rotate(4deg); --tilt: 4deg; }

.bridge { min-height: 110vh; }
.bridge-line { width: 98vw; left: -4vw; top: 48vh; height: 4px; transform: rotate(-31deg); opacity: 0.38; }
.bridge-copy { position: absolute; left: 8vw; bottom: 10vh; width: min(42rem, 46vw); padding: 2.2rem; transform: rotate(-3deg); --tilt: -3deg; }
.island { position: absolute; display: grid; gap: 0.3rem; min-width: 12rem; padding: 1.2rem 1.4rem; border-radius: 999px; font-family: var(--heading-font); }
.island b { font-size: 1.15rem; }
.island-a { left: 13vw; top: 21vh; transform: rotate(-7deg); --tilt: -7deg; }
.island-b { left: 44vw; top: 49vh; transform: rotate(5deg); --tilt: 5deg; }
.island-c { right: 11vw; top: 22vh; transform: rotate(-4deg); --tilt: -4deg; }
.floating-ribbon { position: absolute; width: 20rem; height: 4.2rem; border-radius: 999px; background: linear-gradient(90deg, rgba(255,111,97,0.38), rgba(54,198,181,0.28)); filter: blur(0.2px); transform: rotate(-28deg); animation: floatRibbon 8s ease-in-out infinite alternate; }
.ribbon-one { right: 8vw; bottom: 18vh; } .ribbon-two { left: 25vw; top: 7vh; animation-delay: -3s; }

.ledger { min-height: 105vh; }
.ledger-wall { position: absolute; right: 6vw; top: 10vh; width: min(67rem, 76vw); padding: clamp(2rem, 4vw, 4rem); transform: rotate(3deg); --tilt: 3deg; }
.prism-row { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 2rem 0; }
.ledger-prism {
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  border-radius: 1.7rem;
  background: linear-gradient(145deg, rgba(255,243,216,0.72), rgba(255,185,128,0.34), rgba(54,198,181,0.22));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0.8rem 1.1rem 2.6rem rgba(217, 140, 58, 0.24);
  transform: rotate(45deg);
  animation: prismTilt 6s ease-in-out infinite alternate;
}
.ledger-prism span { transform: rotate(-45deg); font-family: var(--heading-font); font-weight: 800; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.1em; }
.ledger-prism:nth-child(2) { animation-delay: -1.2s; } .ledger-prism:nth-child(3) { animation-delay: -2.4s; } .ledger-prism:nth-child(4) { animation-delay: -3.6s; }
.final-note { position: absolute; left: 8vw; bottom: 10vh; width: min(25rem, 32vw); padding: 1.5rem; transform: rotate(-8deg); --tilt: -8deg; }
.final-note strong { font-family: var(--heading-font); color: var(--civic-coral); text-transform: uppercase; letter-spacing: 0.12em; }

.chapter-dial {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  z-index: 12;
  display: grid;
  gap: 0.75rem;
  transform: translateY(-50%);
}
.chapter-dial a {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  color: var(--deep-ballot-ink);
  text-decoration: none;
  font-family: var(--heading-font);
  font-weight: 800;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,185,128,0.72);
  backdrop-filter: blur(14px);
}
.chapter-dial a.active { background: #36C6B5; color: #FFF3D8; box-shadow: 0 0 1.6rem rgba(54,198,181,0.65); }

@keyframes drift { from { translate: 0 0; } to { translate: 1.1rem -1.5rem; } }
@keyframes spin { to { rotate: y 360deg; } }
@keyframes floatRibbon { to { translate: -1rem 2rem; rotate: -18deg; } }
@keyframes prismTilt { to { transform: rotate(51deg) translateY(-0.45rem); } }

@media (max-width: 820px) {
  .chapter { min-height: auto; padding: 5rem 1rem; }
  .title-chamber, .prompt-card, .chapter-title, .debate-table, .policy-card, .bridge-copy, .island, .ledger-wall, .final-note { position: relative; inset: auto; width: auto; max-width: none; margin: 1rem 0; transform: rotate(0); }
  .debate-table { width: 90vw; height: 16rem; transform: rotate(-4deg) perspective(700px) rotateX(45deg); }
  .artifact { opacity: 0.75; }
  .chapter-dial { display: none; }
  .bridge-line, .route { display: none; }
}