:root {
  /* calm explanatory copy IntersectionObserver can update the active chamber and trigger subtle transformations: cards drift into place small labels */
  --ember-apricot: #F28C52;
  --persimmon-ink: #B94A2E;
  --tea-paper: #F6E8CF;
  --dried-rose: #D99A8A;
  --olive-ash: #5F6846;
  --deep-umber: #2E221B;
  --glass-honey: rgba(255, 218, 166, 0.28);
  --display: "Cormorant Garamond", serif;
  --mono: "Space Mono", monospace;
  --body: "Inter", sans-serif;
  --accent: "Fraunces", serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--tea-paper);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--deep-umber);
  font-family: var(--body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 15%, rgba(242, 140, 82, 0.38), transparent 34vw),
    radial-gradient(circle at 12% 82%, rgba(217, 154, 138, 0.28), transparent 36vw),
    var(--tea-paper);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .20;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 12% 20%, rgba(46, 34, 27, .18) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(93deg, rgba(95, 104, 70, .08) 0 1px, transparent 1px 5px);
}

main { position: relative; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 8vh 8vw;
  isolation: isolate;
  background:
    linear-gradient(112deg, rgba(246, 232, 207, .96), rgba(246, 232, 207, .74)),
    var(--tea-paper);
}

.chamber::before {
  content: "";
  position: absolute;
  inset: -12vh -8vw;
  z-index: -2;
  background:
    radial-gradient(circle at 28% 32%, color-mix(in srgb, var(--chamber-color), transparent 64%), transparent 34vw),
    radial-gradient(circle at 85% 70%, rgba(217, 154, 138, .24), transparent 28vw);
  filter: blur(var(--blur));
  transform: translate3d(0, calc(var(--scroll, 0) * var(--depth) * -1px), 0);
}

.chamber::after {
  content: "";
  position: absolute;
  inset: auto -10vw -14vh 18vw;
  height: 24vh;
  transform: rotate(-4deg);
  background: rgba(185, 74, 46, .08);
  z-index: -1;
}

.sunset-wash {
  position: absolute;
  inset: -20vh -20vw;
  z-index: -3;
  opacity: .85;
  background:
    radial-gradient(ellipse at 78% 28%, rgba(242, 140, 82, .45), transparent 32%),
    radial-gradient(ellipse at 32% 82%, rgba(217, 154, 138, .22), transparent 38%);
  transform: translate3d(0, calc(var(--parallax, 0px) * .06), 0);
}

.sunset-wash.olive { background: radial-gradient(ellipse at 78% 24%, rgba(95, 104, 70, .26), transparent 34%), radial-gradient(ellipse at 40% 70%, rgba(242, 140, 82, .26), transparent 42%); }
.sunset-wash.ember { background: radial-gradient(ellipse at 70% 36%, rgba(185, 74, 46, .30), transparent 36%), radial-gradient(ellipse at 18% 76%, rgba(217, 154, 138, .22), transparent 40%); }
.sunset-wash.dusk { background: radial-gradient(ellipse at 72% 20%, rgba(46, 34, 27, .58), transparent 40%), radial-gradient(ellipse at 22% 78%, rgba(242, 140, 82, .22), transparent 38%); }

.edge-nav {
  position: fixed;
  right: 2.4vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: grid;
  gap: 18px;
  font-family: var(--mono);
  font-size: 10px;
}

.nav-cell {
  position: relative;
  width: 112px;
  color: var(--deep-umber);
  text-decoration: none;
  opacity: .52;
  transform: translateX(56px);
  transition: opacity .6s ease, transform .6s ease;
}

.nav-cell span {
  display: block;
  width: 22px;
  height: 25px;
  margin-left: auto;
  background: rgba(246, 232, 207, .38);
  border: 1px solid var(--olive-ash);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.nav-cell em {
  position: absolute;
  top: 5px;
  right: 32px;
  font-style: normal;
  opacity: 0;
  transition: opacity .6s ease;
}

.nav-cell.active {
  opacity: 1;
  transform: translateX(0) rotate(-2deg);
}

.nav-cell.active span { background: var(--glass-honey); border-color: var(--persimmon-ink); }
.nav-cell.active em { opacity: 1; }

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  line-height: .88;
  letter-spacing: .035em;
  color: var(--deep-umber);
}

h1 {
  position: absolute;
  left: 7.5vw;
  bottom: 16vh;
  font-size: clamp(4.8rem, 12vw, 15rem);
  max-width: 72vw;
  transform: translateX(-1.2vw);
}

h2 {
  position: relative;
  z-index: 4;
  max-width: 760px;
  font-size: clamp(4.2rem, 10vw, 12rem);
}

h2 span {
  color: var(--persimmon-ink);
  font-size: .64em;
}

.hero-void {
  position: absolute;
  left: 28vw;
  top: 10vh;
  width: 42vw;
  height: 42vh;
  border: 1px dashed rgba(95, 104, 70, .18);
  border-radius: 50%;
  opacity: .55;
}

.lonely-hex {
  position: absolute;
  right: 16vw;
  top: 17vh;
  width: clamp(130px, 18vw, 260px);
  aspect-ratio: 1 / .866;
  background: rgba(255, 218, 166, .14);
  border: 1.2px solid rgba(95, 104, 70, .58);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  animation: thoughtTurn 16s ease-in-out infinite alternate;
}

.lonely-hex::before {
  content: "";
  position: absolute;
  inset: 18%;
  background: radial-gradient(circle at 44% 45%, rgba(217, 154, 138, .55) 0 4px, transparent 5px), linear-gradient(130deg, transparent 40%, rgba(95, 104, 70, .24) 41% 42%, transparent 43%);
  clip-path: inherit;
}

@keyframes thoughtTurn {
  from { transform: rotate(-1deg) translateY(0); }
  to { transform: rotate(1.7deg) translateY(9px); }
}

.honeycomb-lines {
  position: absolute;
  inset: 2vh -8vw auto auto;
  width: min(860px, 72vw);
  height: 70vh;
  z-index: 1;
  transform: translate3d(calc(var(--parallax, 0px) * -.05), calc(var(--parallax, 0px) * .18), 0) rotate(-3deg);
  opacity: .30;
  transition: opacity 1.6s ease, transform 1.6s ease;
}

.chamber.active .honeycomb-lines { opacity: .68; }

.honeycomb-lines i {
  position: absolute;
  display: block;
  width: 150px;
  height: 130px;
  border: 1px solid var(--olive-ash);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: rgba(246, 232, 207, .10);
}

.honeycomb-lines i:nth-child(1) { left: 8%; top: 4%; width: 210px; height: 182px; }
.honeycomb-lines i:nth-child(2) { left: 28%; top: 15%; }
.honeycomb-lines i:nth-child(3) { left: 47%; top: 2%; width: 192px; height: 166px; }
.honeycomb-lines i:nth-child(4) { left: 61%; top: 26%; }
.honeycomb-lines i:nth-child(5) { left: 18%; top: 39%; width: 178px; height: 154px; }
.honeycomb-lines i:nth-child(6) { left: 39%; top: 50%; }
.honeycomb-lines i:nth-child(7) { left: 70%; top: 52%; width: 238px; height: 206px; }
.honeycomb-lines i:nth-child(8) { left: 1%; top: 70%; }
.honeycomb-lines i:nth-child(9) { left: 49%; top: 78%; width: 120px; height: 104px; }
.honeycomb-lines i:nth-child(10) { left: 83%; top: 8%; }
.honeycomb-lines i:nth-child(11) { left: 30%; top: 82%; width: 96px; height: 83px; }

.offset { left: -8vw; right: auto; top: 18vh; transform: translate3d(calc(var(--parallax, 0px) * .06), calc(var(--parallax, 0px) * .16), 0) rotate(4deg); }
.dense { inset: 5vh 4vw auto auto; transform: translate3d(calc(var(--parallax, 0px) * -.04), calc(var(--parallax, 0px) * .20), 0) rotate(7deg); }
.broken { inset: 4vh auto auto -12vw; transform: translate3d(calc(var(--parallax, 0px) * .05), calc(var(--parallax, 0px) * .18), 0) rotate(-8deg); }
.quiet { inset: 16vh 4vw auto auto; opacity: .2; }

.botanical-foreground {
  position: absolute;
  right: -2vw;
  bottom: -8vh;
  width: clamp(260px, 38vw, 620px);
  z-index: 6;
  opacity: .33;
  transform: translate3d(0, calc(var(--parallax, 0px) * -.22), 0) rotate(2deg);
  pointer-events: none;
}

.botanical-foreground svg {
  width: 100%;
  fill: none;
  stroke: var(--olive-ash);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botanical-foreground path:nth-child(2), .botanical-foreground circle { fill: rgba(217, 154, 138, .18); }
.seedpods { left: 2vw; right: auto; bottom: -3vh; transform: translate3d(0, calc(var(--parallax, 0px) * -.25), 0) rotate(-7deg); }
.leaves { right: -8vw; opacity: .42; }
.roots { left: 5vw; right: auto; opacity: .28; }

.glass-card {
  position: absolute;
  z-index: 8;
  width: min(420px, 76vw);
  padding: 28px 28px 30px;
  background: var(--glass-honey);
  border: 1px solid rgba(95, 104, 70, .50);
  box-shadow: 0 28px 90px rgba(46, 34, 27, .12), inset 0 0 0 1px rgba(246, 232, 207, .24);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  transform: translate3d(0, calc(80px + var(--parallax, 0px) * -.14), 0) rotate(1.4deg);
  opacity: .35;
  transition: opacity 1.2s ease, transform 1.4s ease;
}

.chamber.active .glass-card {
  opacity: 1;
  transform: translate3d(0, calc(var(--parallax, 0px) * -.10), 0) rotate(-1.2deg);
}

.glass-card p {
  margin: 18px 0 0;
  font-size: clamp(1rem, 1.35vw, 1.24rem);
  line-height: 1.65;
  font-weight: 300;
}

.glass-card small {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--persimmon-ink);
}

.hero-card { right: 12vw; bottom: 14vh; transform: rotate(3deg); }
.trade-card { right: 11vw; top: 34vh; }
.signal-card { left: 9vw; bottom: 14vh; }
.rest-card { right: -50px; top: 30vh; }
.coda-card { left: 52vw; top: 30vh; }

.aperture {
  width: 92px;
  height: 80px;
  float: right;
  margin: -6px -2px 14px 18px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background:
    radial-gradient(circle at 50% 40%, rgba(185, 74, 46, .32) 0 8px, transparent 9px),
    linear-gradient(135deg, rgba(95, 104, 70, .35), rgba(242, 140, 82, .18));
  border: 1px solid var(--olive-ash);
}

.aperture-rose { background: radial-gradient(circle at 44% 44%, rgba(217, 154, 138, .65) 0 10px, transparent 11px), linear-gradient(135deg, rgba(185, 74, 46, .20), rgba(246, 232, 207, .35)); }
.aperture-olive { background: radial-gradient(circle at 45% 50%, rgba(95, 104, 70, .56) 0 11px, transparent 12px), linear-gradient(135deg, rgba(95, 104, 70, .26), rgba(242, 140, 82, .20)); }
.aperture-ember { background: radial-gradient(circle at 44% 40%, rgba(242, 140, 82, .62) 0 10px, transparent 11px), linear-gradient(135deg, rgba(185, 74, 46, .30), rgba(217, 154, 138, .20)); }
.aperture-night { background: radial-gradient(circle at 54% 42%, rgba(46, 34, 27, .54) 0 10px, transparent 11px), linear-gradient(135deg, rgba(95, 104, 70, .34), rgba(246, 232, 207, .20)); }

.stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--persimmon-ink);
  border: 1px solid currentColor;
  padding: 4px 8px;
  transform: rotate(-7deg) translateX(-4px);
}

.annotation {
  position: absolute;
  z-index: 12;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--persimmon-ink);
  text-transform: lowercase;
}

.early-note { left: 14vw; top: 18vh; transform: rotate(-7deg); }
.crooked { right: 28vw; top: 13vh; transform: rotate(-7deg); }
.number-note { right: 18vw; top: 12vh; font-family: var(--accent); font-size: clamp(7rem, 17vw, 18rem); color: rgba(185, 74, 46, .12); line-height: 1; }
.red-pencil { left: 56vw; top: 18vh; color: var(--persimmon-ink); border-bottom: 2px solid var(--persimmon-ink); transform: rotate(5deg); }
.coda-note { left: 10vw; top: 16vh; color: var(--dried-rose); }

.single-word {
  position: absolute;
  right: 7vw;
  top: 54vh;
  margin: 0;
  font-family: var(--accent);
  font-size: clamp(5rem, 14vw, 16rem);
  line-height: .8;
  color: rgba(185, 74, 46, .11);
  transform: rotate(6deg);
  z-index: 2;
}

.yield-word { left: 48vw; right: auto; top: 9vh; color: rgba(246, 232, 207, .42); }

.blossom-list {
  position: absolute;
  left: 12vw;
  bottom: 14vh;
  z-index: 7;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 2.2;
}

.blossom-list li::before {
  content: "✽";
  color: var(--persimmon-ink);
  margin-right: 10px;
}

.chamber-assumption h1 { text-shadow: 18px -11px 0 rgba(217, 154, 138, .12); }
.chamber-tradeoff { padding-top: 14vh; }
.chamber-signal { background: linear-gradient(112deg, rgba(95, 104, 70, .13), rgba(246, 232, 207, .88)), var(--tea-paper); padding-top: 12vh; }
.chamber-signal h2 { margin-left: 42vw; }
.chamber-rest { padding-top: 15vh; background: linear-gradient(112deg, rgba(185, 74, 46, .12), rgba(246, 232, 207, .88)), var(--tea-paper); }
.chamber-rest h2 { margin-left: 10vw; }
.chamber-coda { background: linear-gradient(112deg, rgba(46, 34, 27, .92), rgba(46, 34, 27, .76)); color: var(--tea-paper); }
.chamber-coda h2 { color: var(--tea-paper); margin-top: 26vh; }
.chamber-coda .glass-card { color: var(--tea-paper); border-color: rgba(246, 232, 207, .32); background: rgba(255, 218, 166, .12); }

.closing-line {
  position: absolute;
  left: 10vw;
  bottom: 14vh;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 7rem);
  letter-spacing: .04em;
  color: var(--dried-rose);
}

.is-drawn .botanical-foreground svg path,
.is-drawn .botanical-foreground svg circle {
  stroke-dasharray: 780;
  stroke-dashoffset: 780;
  animation: drawLine 2.8s ease forwards;
}

@keyframes drawLine { to { stroke-dashoffset: 0; } }

@media (max-width: 820px) {
  .edge-nav { right: 12px; transform: translateY(-50%) scale(.86); transform-origin: right center; }
  .chamber { padding: 8vh 7vw; }
  h1 { left: 7vw; bottom: 23vh; font-size: clamp(4rem, 18vw, 8rem); max-width: 86vw; }
  h2 { font-size: clamp(3.5rem, 16vw, 7rem); }
  .hero-card, .trade-card, .signal-card, .rest-card, .coda-card { left: 7vw; right: auto; top: auto; bottom: 8vh; width: 78vw; }
  .chamber-signal h2, .chamber-rest h2 { margin-left: 0; }
  .honeycomb-lines { width: 110vw; height: 60vh; right: -48vw; }
  .single-word { top: 16vh; right: 8vw; }
  .blossom-list { left: 8vw; bottom: 34vh; }
  .coda-card { left: 7vw; }
}