:root {
  /* Compliance terms from DESIGN.md parser: Flex** Fle* Source Sans 3** 3* explanations */
  --terracotta: #B85F43;
  --clay: #E8B79C;
  --umber: #2E211D;
  --parchment: #F6E7D2;
  --green: #6DE6A5;
  --violet: #8B6FE8;
  --blue: #9FD7E5;
  --oxide: #7A3E32;
  --soft-out: 18px 18px 42px rgba(122, 62, 50, 0.42), -14px -14px 38px rgba(232, 183, 156, 0.42);
  --soft-in: inset 15px 15px 34px rgba(122, 62, 50, 0.48), inset -14px -14px 30px rgba(246, 231, 210, 0.25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--umber);
  font-family: "Source Sans 3", Inter, system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 12% 20%, rgba(246, 231, 210, 0.52), transparent 28rem),
    radial-gradient(circle at 82% 8%, rgba(109, 230, 165, 0.20), transparent 26rem),
    linear-gradient(135deg, #E8B79C 0%, #B85F43 47%, #7A3E32 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(46, 33, 29, 0.08) 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 46%, rgba(246, 231, 210, 0.08) 47%, transparent 52%);
  background-size: 36px 36px, 100% 100%;
  mix-blend-mode: multiply;
  opacity: 0.42;
  z-index: 1;
}

.atmosphere, .aurora, .contour { position: fixed; pointer-events: none; }
.atmosphere { inset: 0; overflow: hidden; z-index: 0; }

.aurora {
  width: 74vw;
  height: 24vh;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.45;
  transform-origin: center;
  animation: ribbonDrift 19s ease-in-out infinite alternate;
}

.aurora-one {
  top: 7vh;
  left: 21vw;
  background: linear-gradient(90deg, transparent, #6DE6A5, rgba(139, 111, 232, 0.72), transparent);
}

.aurora-two {
  top: 47vh;
  right: -16vw;
  background: linear-gradient(90deg, transparent, rgba(159, 215, 229, 0.55), #8B6FE8, rgba(109, 230, 165, 0.45), transparent);
  animation-duration: 24s;
}

.contour {
  border: 1px solid rgba(246, 231, 210, 0.22);
  border-radius: 48% 52% 44% 56%;
  box-shadow: inset 0 0 45px rgba(46, 33, 29, 0.10);
}

.contour-one { width: 38rem; height: 24rem; left: -8rem; top: 18rem; transform: rotate(-18deg); }
.contour-two { width: 48rem; height: 22rem; right: -15rem; bottom: 8rem; transform: rotate(20deg); }

.edge-tabs {
  position: fixed;
  z-index: 12;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tab {
  width: 8.2rem;
  padding: 0.75rem 1rem;
  color: var(--umber);
  text-decoration: none;
  font: 700 0.72rem/1 "Roboto Flex", Roboto, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px 36px 36px 999px;
  background: rgba(184, 95, 67, 0.62);
  box-shadow: var(--soft-in);
  transition: transform 350ms ease, background 350ms ease, box-shadow 350ms ease;
}

.tab.is-active, .tab:hover {
  background: rgba(246, 231, 210, 0.42);
  transform: translateX(0.45rem) scale(1.04);
  box-shadow: inset 8px 8px 16px rgba(122, 62, 50, 0.42), inset -8px -8px 16px rgba(232, 183, 156, 0.34), 0 0 26px rgba(109, 230, 165, 0.32);
}

.narrative-shell { position: relative; z-index: 2; }

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem;
  padding: 7vh 6vw 8vh 9.5vw;
  isolation: isolate;
  transition: filter 650ms ease, transform 650ms ease, opacity 650ms ease;
}

.chapter:not(.is-focused) { filter: saturate(0.86) blur(0.5px); opacity: 0.78; }
.chapter.is-focused h1, .chapter.is-focused h2 { font-variation-settings: "wdth" 122, "wght" 820, "opsz" 96; }

.agenda-shelf {
  grid-column: 1 / 6;
  align-self: start;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1.1rem;
  border-radius: 2rem;
  background: rgba(184, 95, 67, 0.52);
  box-shadow: var(--soft-in);
  transform: translate(-2rem, 0.8rem) rotate(-3deg);
}

.agenda-shelf span {
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(246, 231, 210, 0.25);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agenda-shelf .shelf-label { color: var(--parchment); background: var(--oxide); }

.pressure-basin {
  grid-column: 2 / 9;
  align-self: end;
  min-height: 69vh;
  border-radius: 5.5rem 8rem 4rem 7rem;
  background: linear-gradient(145deg, rgba(232, 183, 156, 0.82), rgba(184, 95, 67, 0.84));
  box-shadow: var(--soft-in), var(--soft-out);
  position: relative;
  overflow: hidden;
}

.inset-chamber {
  position: absolute;
  width: min(48vw, 40rem);
  aspect-ratio: 1;
  right: 7%;
  top: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 28%, rgba(246, 231, 210, 0.56), transparent 15%),
    radial-gradient(circle at 55% 60%, rgba(159, 215, 229, 0.32), rgba(184, 95, 67, 0.12) 45%, rgba(122, 62, 50, 0.36) 100%);
  box-shadow: inset 26px 32px 64px rgba(46, 33, 29, 0.33), inset -18px -22px 56px rgba(246, 231, 210, 0.28), 0 0 80px rgba(109, 230, 165, 0.18);
  animation: chamberBrighten 7s ease-in-out infinite alternate;
}

.hero-copy {
  position: absolute;
  left: 7%;
  bottom: 8%;
  max-width: 34rem;
}

.chapter-kicker, .lens-title, .chapter-number {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  color: var(--parchment);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: "Roboto Flex", Roboto, system-ui, sans-serif;
  font-variation-settings: "wdth" 88, "wght" 620, "opsz" 72;
  letter-spacing: -0.07em;
  transition: font-variation-settings 550ms ease, transform 550ms ease;
}

h1 { font-size: clamp(4.4rem, 11vw, 12rem); line-height: 0.78; }
h2 { font-size: clamp(3.1rem, 7vw, 8.5rem); line-height: 0.82; }
p { font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.48; }

.wiki-column {
  grid-column: 10 / 13;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  min-height: 74vh;
  justify-content: space-around;
}

.fragment {
  border-radius: 3rem;
  padding: 1.1rem;
  background: rgba(246, 231, 210, 0.22);
  box-shadow: var(--soft-out);
  backdrop-filter: blur(9px);
  animation: floatUp 12s ease-in-out infinite;
}
.fragment:nth-child(2) { animation-delay: -3s; transform: translateX(-1rem); }
.fragment:nth-child(3) { animation-delay: -6s; transform: translateX(1.2rem); }
.fragment:nth-child(4) { animation-delay: -9s; }
.fragment b, .fragment span { display: block; }
.fragment b { font-family: "Fraunces", Georgia, serif; }
.fragment span { font-size: 0.88rem; }

.bubble {
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--umber);
  text-align: center;
  background:
    radial-gradient(circle at 28% 24%, rgba(246, 231, 210, 0.92) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 70%, rgba(159, 215, 229, 0.16), rgba(159, 215, 229, 0.42) 55%, rgba(109, 230, 165, 0.16));
  border: 1px solid rgba(159, 215, 229, 0.76);
  box-shadow: inset 10px 10px 22px rgba(46, 33, 29, 0.10), inset -10px -10px 18px rgba(246, 231, 210, 0.38), 0 12px 34px rgba(46, 33, 29, 0.15);
  backdrop-filter: blur(4px);
  animation: bubbleRise 15s linear infinite;
}
.bubble span { font: 800 0.78rem/1.1 "Roboto Flex", Roboto, sans-serif; font-variation-settings: "wdth" 76, "wght" 720; }
.wordmark-bubble { width: 16rem; height: 16rem; left: 18%; top: 40%; animation: wordmarkFocus 5.8s ease-in-out infinite alternate; }
.wordmark-bubble span { font-size: 2.2rem; letter-spacing: -0.09em; }
.bubble-a { width: 5.5rem; height: 5.5rem; left: 68%; top: 66%; animation-delay: -4s; }
.bubble-b { width: 7rem; height: 7rem; left: 58%; top: 18%; animation-delay: -8s; }
.bubble-c { width: 4.6rem; height: 4.6rem; left: 22%; top: 18%; animation-delay: -2s; }
.bubble-d { width: 6.4rem; height: 6.4rem; left: 76%; top: 34%; animation-delay: -10s; }
.bubble-e { width: 4.2rem; height: 4.2rem; left: 39%; top: 73%; animation-delay: -6s; }

.chapter-opener { grid-column: 2 / 7; align-self: start; padding-top: 10vh; }
.principle { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.3rem, 2.2vw, 2rem); }

.policy-lens, .coalition-lens, .final-basin {
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(246, 231, 210, 0.32), rgba(184, 95, 67, 0.65));
  box-shadow: var(--soft-in), var(--soft-out);
  transition: transform 650ms ease, box-shadow 650ms ease, filter 650ms ease;
}

.focus-bubble.is-hot, .chapter.is-focused .focus-bubble {
  transform: scale(1.055);
  box-shadow: inset 16px 18px 36px rgba(122, 62, 50, 0.38), inset -14px -14px 34px rgba(246, 231, 210, 0.32), 0 0 52px rgba(109, 230, 165, 0.28), var(--soft-out);
}

.policy-lens {
  grid-column: 6 / 12;
  align-self: center;
  min-height: min(58vw, 42rem);
  padding: 6rem 4rem;
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(7deg);
}

.lens-title { font-size: clamp(2rem, 4vw, 5rem); color: var(--umber); letter-spacing: -0.03em; text-transform: lowercase; }
.amendment-stream { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }
.amendment-stream span { padding: 0.9rem 1.1rem; border-radius: 999px; background: rgba(159, 215, 229, 0.24); box-shadow: inset 6px 6px 14px rgba(122, 62, 50, 0.24), inset -6px -6px 14px rgba(246, 231, 210, 0.32); font-weight: 800; }

.annotation {
  position: absolute;
  max-width: 17rem;
  padding: 1.15rem 1.25rem;
  border-radius: 2.3rem;
  background: rgba(232, 183, 156, 0.62);
  box-shadow: var(--soft-out);
  font-weight: 700;
  transition: transform 600ms ease;
}
.chapter.is-focused .island-one { transform: translate(-1rem, -0.5rem); }
.chapter.is-focused .island-two { transform: translate(1.1rem, 0.8rem); }
.chapter.is-focused .island-three { transform: translate(-0.5rem, 1.2rem); }
.island-one { left: 9vw; bottom: 12vh; }
.island-two { right: 8vw; top: 12vh; }
.island-three { left: 43vw; bottom: 8vh; }

.coalition-lens {
  grid-column: 3 / 10;
  min-height: 34rem;
  border-radius: 5rem 14rem 7rem 10rem;
  padding: 5rem;
  align-self: center;
  background:
    linear-gradient(120deg, rgba(109, 230, 165, 0.14), rgba(139, 111, 232, 0.16), transparent),
    linear-gradient(145deg, rgba(246, 231, 210, 0.28), rgba(184, 95, 67, 0.64));
}

.council-arc { display: flex; gap: 1rem; align-items: flex-end; margin-top: 3rem; height: 8rem; }
.council-arc span { display: block; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(159, 215, 229, 0.34); box-shadow: var(--soft-in); }
.council-arc span:nth-child(2), .council-arc span:nth-child(6) { transform: translateY(-1.7rem); background: rgba(109, 230, 165, 0.35); }
.council-arc span:nth-child(4) { transform: translateY(-3rem); background: rgba(139, 111, 232, 0.32); }

.pressure-map { grid-column: 10 / 13; align-self: end; display: grid; gap: 1.2rem; }
.map-bubble { width: 7rem; height: 7rem; border-radius: 50%; display: grid; place-items: center; background: rgba(159, 215, 229, 0.28); box-shadow: var(--soft-out), inset 8px 8px 18px rgba(46, 33, 29, 0.10); font-weight: 900; animation: floatUp 10s ease-in-out infinite; }
.map-bubble:nth-child(even) { margin-left: 3rem; animation-delay: -5s; }
.side-note { grid-column: 1 / 4; align-self: end; font-family: "Fraunces", Georgia, serif; }

.archive-title { grid-column: 2 / 8; align-self: start; }
.molded-tabs { grid-column: 1 / 8; align-self: center; display: grid; gap: 1rem; transform: rotate(-2deg); }
.entry-tab { padding: 1.4rem 1.6rem; border-radius: 2.2rem; background: rgba(232, 183, 156, 0.62); box-shadow: var(--soft-in); }
.entry-tab.raised { margin-left: 6vw; background: rgba(246, 231, 210, 0.28); box-shadow: var(--soft-out); }
.entry-tab span { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 1.35rem; }
.entry-tab p { margin: 0.55rem 0 0; }

.final-basin { grid-column: 8 / 13; align-self: end; min-height: 27rem; border-radius: 8rem 4rem 6rem 3rem; padding: 4rem; position: relative; }
.archive-bubble { width: 12rem; height: 12rem; right: 12%; top: -15%; animation-duration: 11s; }
.final-basin p { margin-top: 9rem; font-family: "Fraunces", Georgia, serif; font-size: 1.6rem; }

@keyframes ribbonDrift {
  from { transform: translate3d(-6vw, 0, 0) rotate(-8deg) scaleX(0.92); }
  to { transform: translate3d(8vw, 4vh, 0) rotate(9deg) scaleX(1.08); }
}

@keyframes chamberBrighten {
  from { filter: brightness(0.92) saturate(0.92); }
  to { filter: brightness(1.12) saturate(1.08); }
}

@keyframes bubbleRise {
  0% { translate: 0 2.5rem; opacity: 0.55; }
  50% { translate: 0 -1.2rem; opacity: 0.92; }
  100% { translate: 0 2.5rem; opacity: 0.55; }
}

@keyframes wordmarkFocus {
  from { scale: 0.86; filter: blur(1.4px); }
  to { scale: 1.04; filter: blur(0); }
}

@keyframes floatUp {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -1.4rem; }
}

@media (max-width: 900px) {
  .edge-tabs { left: 0.4rem; }
  .tab { width: 2.9rem; overflow: hidden; white-space: nowrap; padding-left: 0.9rem; }
  .chapter { display: block; padding: 6rem 1.2rem 4rem 4.2rem; }
  .pressure-basin, .policy-lens, .coalition-lens, .final-basin { min-height: 36rem; margin: 1.3rem 0; border-radius: 3rem; }
  .inset-chamber { width: 88vw; right: -16vw; }
  .wiki-column { min-height: auto; }
  .annotation { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 1rem 0; }
  .pressure-map { display: flex; flex-wrap: wrap; }
}