:root {
  --soil: #201813;
  --moss: #5F7F57;
  --clay: #A96A42;
  --pearl: #E9E3CF;
  --aqua: #8ED6C9;
  --plum: #5A3D52;
  --acid: #B8D96B;
  --display: "Jost", "Poppins", "Futura", "Avenir Next", sans-serif;
  --body: "Urbanist", "Inter", sans-serif;
  --serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--soil);
  font-family: var(--body);
  background:
    radial-gradient(circle at 16% 8%, rgba(142, 214, 201, .72), transparent 26vw),
    radial-gradient(circle at 78% 12%, rgba(184, 217, 107, .38), transparent 18vw),
    radial-gradient(circle at 70% 84%, rgba(90, 61, 82, .34), transparent 34vw),
    linear-gradient(145deg, var(--pearl), #d8d0b6 48%, #c8be9f);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(255,255,255,.52) 0 2px, transparent 3px) 0 0 / 70px 86px,
    linear-gradient(rgba(32,24,19,.07) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(90deg, rgba(32,24,19,.07) 1px, transparent 1px) 0 0 / 42px 42px;
  mix-blend-mode: multiply;
}

.page-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(95,127,87,.28) 1px) 0 0 / 9vw 100%,
    linear-gradient(transparent calc(100% - 1px), rgba(95,127,87,.18) 1px) 0 0 / 100% 9vh;
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent);
}

.cursor-lens {
  position: fixed;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(142, 214, 201, .55);
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.58), rgba(142,214,201,.18) 42%, transparent 68%);
  box-shadow: inset -18px -22px 34px rgba(90,61,82,.12), 0 18px 48px rgba(32,24,19,.12);
  pointer-events: none;
  z-index: 20;
  transform: translate(-50%, -50%);
  opacity: .72;
  mix-blend-mode: screen;
}

.archive-stack { position: relative; z-index: 2; padding-bottom: 16vh; }

.chamber {
  position: relative;
  min-height: 112vh;
  display: grid;
  grid-template-columns: minmax(58px, 7vw) 1fr;
  align-items: center;
  padding: 8vh 7vw 18vh 3vw;
  margin-top: -10vh;
  isolation: isolate;
}

.chamber:first-child { margin-top: 0; }

.chamber::before {
  content: attr(data-index);
  position: absolute;
  right: 5vw;
  top: 9vh;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(5rem, 18vw, 16rem);
  color: rgba(255,255,255,.22);
  -webkit-text-stroke: 1px rgba(90,61,82,.14);
  z-index: -1;
}

.chamber-first { background: linear-gradient(180deg, rgba(233,227,207,.2), rgba(142,214,201,.18)); }
.chamber-signal { background: radial-gradient(circle at 72% 25%, rgba(95,127,87,.24), transparent 33vw); }
.chamber-evidence { background: radial-gradient(circle at 18% 76%, rgba(169,106,66,.22), transparent 30vw); }
.chamber-contradiction { background: radial-gradient(circle at 77% 54%, rgba(90,61,82,.34), transparent 36vw); }
.chamber-aftertaste { background: linear-gradient(180deg, rgba(233,227,207,.04), rgba(32,24,19,.16)); }

.section-spine {
  height: 76vh;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--display);
  letter-spacing: .16em;
  color: var(--plum);
  border-left: 1px dashed rgba(32,24,19,.28);
  padding: 1.2rem .65rem;
}

.section-spine span { color: var(--clay); font-weight: 800; }
.section-spine b { font-size: .78rem; }

.glass-shell {
  position: sticky;
  top: 7vh;
  width: min(980px, 88vw);
  min-height: 68vh;
  border-radius: 42px;
  padding: clamp(2rem, 5vw, 4.8rem);
  background:
    linear-gradient(135deg, rgba(255,255,255,.54), rgba(233,227,207,.18) 42%, rgba(142,214,201,.24)),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.76), transparent 16vw),
    linear-gradient(rgba(95,127,87,.18) 1px, transparent 1px) 0 0 / 31px 31px,
    linear-gradient(90deg, rgba(95,127,87,.13) 1px, transparent 1px) 0 0 / 31px 31px;
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: inset 0 0 0 1px rgba(32,24,19,.08), inset -30px -36px 70px rgba(90,61,82,.12), 0 34px 100px rgba(32,24,19,.22);
  backdrop-filter: blur(16px) saturate(1.35);
  overflow: hidden;
}

.glass-shell::before, .glass-shell::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 31px;
  pointer-events: none;
}

.glass-shell::before {
  border: 1px dashed rgba(32,24,19,.38);
  animation: dashFlow 16s linear infinite;
}

.glass-shell::after {
  background: linear-gradient(110deg, transparent 0 30%, rgba(255,255,255,.58) 48%, transparent 62% 100%);
  transform: translateX(-120%);
  animation: sheen 8s ease-in-out infinite;
  mix-blend-mode: screen;
}

.is-active .glass-shell { box-shadow: inset 0 0 0 1px rgba(184,217,107,.55), inset -30px -36px 70px rgba(90,61,82,.12), 0 34px 100px rgba(32,24,19,.24), 0 0 0 2px rgba(184,217,107,.2); }
.is-active .glass-shell::before { border-color: var(--acid); }

.artifact-tag, .annotation, .sticker-row span, .receipt span {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: .75rem;
}

.artifact-tag { color: var(--clay); margin-bottom: 1.2rem; }

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.055em;
  color: var(--soil);
}

h1 { font-size: clamp(4.8rem, 13vw, 12.8rem); }
h2 { font-size: clamp(3.4rem, 9vw, 9.8rem); max-width: 780px; }

.verdict {
  margin: 1.3rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 4.6rem);
  line-height: .95;
  color: var(--plum);
  max-width: 820px;
}

.note, .pull {
  position: relative;
  max-width: 580px;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.65;
  margin: 1.4rem 0 0;
}

.pull { font-family: var(--serif); color: var(--plum); font-size: clamp(1.4rem, 3.4vw, 3.2rem); line-height: 1.08; }

.sticker-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.3rem; }
.sticker-row span, .annotation, .stamp {
  border: 1px solid var(--clay);
  color: var(--clay);
  background: rgba(233,227,207,.48);
  border-radius: 999px;
  padding: .55rem .8rem;
  transform: rotate(-2deg);
}
.sticker-row span:nth-child(2) { transform: rotate(3deg); color: var(--plum); border-color: var(--plum); }

.line-art { position: absolute; fill: none; stroke: var(--soil); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .82; filter: drop-shadow(0 16px 22px rgba(32,24,19,.12)); }
.heart-art { width: min(34vw, 420px); right: 7vw; bottom: 10vh; stroke: var(--plum); }
.root-art, .map-art { position: relative; width: 100%; margin-top: 1.5rem; stroke: var(--moss); }
.map-art { stroke: var(--soil); opacity: .74; }
.pulse { stroke: var(--plum); stroke-width: 5; }
.slice { stroke: var(--clay); stroke-dasharray: 12 12; }
.bars rect { fill: rgba(184,217,107,.36); stroke: var(--moss); }

.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.9), rgba(142,214,201,.5) 38%, rgba(90,61,82,.13) 72%, transparent 73%);
  box-shadow: inset -12px -16px 22px rgba(90,61,82,.12), 0 18px 34px rgba(32,24,19,.13);
  animation: float 9s ease-in-out infinite;
}
.b1 { width: 138px; height: 138px; top: 18vh; right: 18vw; }
.b2 { width: 88px; height: 88px; bottom: 21vh; left: 16vw; animation-delay: -3s; }
.b3 { width: 54px; height: 54px; top: 38vh; left: 9vw; animation-delay: -6s; }

.signal-shell { margin-left: auto; }
.signal-board { position: relative; margin-top: 2rem; border: 1px solid rgba(32,24,19,.28); border-radius: 26px; padding: 2rem; background: rgba(233,227,207,.22); }
.signal-board svg { width: 100%; height: auto; }
.axis { position: absolute; display: flex; justify-content: space-between; color: var(--moss); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; }
.axis.horizontal { left: 2rem; right: 2rem; bottom: .75rem; }
.axis.vertical { left: .45rem; top: 2rem; bottom: 2rem; writing-mode: vertical-rl; }
.cluster-a { position: absolute; left: 12vw; bottom: 19vh; }
.cluster-b { position: absolute; right: 8vw; top: 22vh; color: var(--plum); border-color: var(--plum); }

.specimen-shell { transform: rotate(-1.4deg); }
.staple { position: absolute; width: 72px; height: 12px; background: rgba(32,24,19,.5); border-radius: 12px; box-shadow: 0 8px 16px rgba(32,24,19,.16); }
.s1 { top: 23vh; left: 22vw; transform: rotate(18deg); }
.s2 { right: 19vw; bottom: 24vh; transform: rotate(-22deg); }

.contradiction-shell { margin-left: auto; transform: rotate(1deg); }
.serif-frag { font-family: var(--serif); font-size: clamp(2rem, 5vw, 5.8rem); color: var(--plum); margin: 1rem 0; line-height: 1; }
.serif-frag span { text-decoration: line-through var(--clay) .16em; }
.map-lines { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin: 1.2rem 0; }
.map-lines span { border-top: 1px solid rgba(32,24,19,.3); padding-top: .45rem; color: var(--moss); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.stamp { position: absolute; right: 9%; top: 18%; border-width: 3px; border-radius: 10px; font-family: var(--display); font-size: clamp(1.8rem, 4vw, 4.7rem); font-weight: 800; transform: rotate(13deg); color: var(--clay); background: transparent; opacity: .78; }

.archive-seal { margin-inline: auto; text-align: left; }
.final { color: var(--clay); }
.receipt { display: grid; gap: .65rem; max-width: 460px; margin-top: 2rem; border-left: 3px solid var(--moss); padding-left: 1rem; }
.receipt span { display: block; color: var(--soil); border-bottom: 1px dashed rgba(32,24,19,.25); padding-bottom: .45rem; }
.rain-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.drop { position: absolute; width: 2px; height: 18px; border-radius: 999px; background: linear-gradient(var(--aqua), transparent); opacity: .45; animation: rain 2.6s linear infinite; }

@keyframes dashFlow { to { stroke-dashoffset: -120; border-spacing: 12px; } }
@keyframes sheen { 0%, 48% { transform: translateX(-120%); } 72%, 100% { transform: translateX(120%); } }
@keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-24px) scale(1.04); } }
@keyframes rain { from { transform: translateY(-12vh); } to { transform: translateY(112vh); } }

@media (max-width: 760px) {
  .cursor-lens { display: none; }
  .chamber { grid-template-columns: 1fr; padding: 7vh 5vw 15vh; }
  .section-spine { writing-mode: horizontal-tb; transform: none; height: auto; width: 100%; flex-direction: row; border-left: 0; border-top: 1px dashed rgba(32,24,19,.28); margin-bottom: 1rem; }
  .glass-shell { width: 100%; min-height: 70vh; border-radius: 28px; padding: 2rem; }
  .heart-art { width: 62vw; right: 2vw; bottom: 7vh; opacity: .35; }
  .map-lines { grid-template-columns: 1fr 1fr; }
  .stamp { position: relative; right: auto; top: auto; display: inline-block; margin-top: 1rem; }
}