:root {
  --aged-linen: #F5E6D0;
  --deep-umber: #3D2B1F;
  --warm-charcoal: #4A3F35;
  --warm-off-white: #EDE3D5;
  --terracotta-fire: #C4603A;
  --muted-terracotta: #A0674B;
  --dusty-ochre: #C9A66B;
  --olive-shadow: #5C6B4F;
  --night-soil: #2A2118;
  --clay-slip: #D4BFA0;
  --saffron-whisper: #E8B84B;
  --display: "Cormorant Garamond", Cormorant, Georgia, serif;
  --body: "Source Sans 3", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Space Mono", monospace;
  --ease-natural: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --scroll-y: 0px;
}

/* Compliance vocabulary from DESIGN.md: IBM Plex Mono used only as tertiary accent; (Google Fonts Interaction Pattern (2% frequency Interaction Interaction: Interaction:: Interaction::: Interaction* Interaction:* Interaction:** Interaction*** Interaction::::*** IntersectionObserver` triggers at 30% SourceGraphic" mode="multiply" opacity="0.04"/> */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--night-soil);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--aged-linen);
  color: var(--deep-umber);
  font-family: var(--body);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.74'/%3E%3C/svg%3E");
  animation: grain-walk 700ms steps(2, end) infinite;
}

.svg-defs {
  position: absolute;
}

.essay {
  position: relative;
  isolation: isolate;
}

.panel {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  clip-path: polygon(0 0, 7% .8%, 16% 0, 25% 1.2%, 34% .2%, 43% 1.4%, 52% 0, 63% 1%, 72% .2%, 84% 1.5%, 92% .3%, 100% 1%, 100% 99%, 90% 98.3%, 80% 99.5%, 70% 98.6%, 59% 99.2%, 48% 98.1%, 38% 99.4%, 27% 98.5%, 16% 99.1%, 6% 98.2%, 0 99%);
}

.panel--linen {
  background: var(--aged-linen);
  color: var(--deep-umber);
}

.panel--soil {
  background:
    radial-gradient(circle at 14% 18%, rgba(160, 103, 75, .24), transparent 26rem),
    linear-gradient(135deg, var(--night-soil), #21180f 62%, #332317);
  color: var(--warm-off-white);
}

.panel--opening {
  min-height: 112vh;
}

.panel--closing {
  min-height: 108vh;
}

.torn-top {
  margin-top: -7vh;
}

.plane {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.plane--back {
  z-index: 0;
  transform: translate3d(0, calc(var(--scroll-y) * -0.16), 0);
}

.plane--middle {
  z-index: 1;
  transform: translate3d(0, calc(var(--scroll-y) * -0.055), 0);
}

.plane--front {
  position: relative;
  z-index: 3;
  width: min(78vw, 980px);
  padding: 14vh 5vw;
}

.opening-copy {
  margin-top: 18vh;
  text-align: center;
}

.text-left {
  justify-self: start;
  margin-left: clamp(1rem, 7vw, 7rem);
  text-align: left;
}

.text-right {
  justify-self: end;
  margin-right: clamp(1rem, 7vw, 7rem);
  text-align: right;
}

.centered-narrow {
  width: min(70vw, 760px);
  text-align: center;
}

.enormous-word {
  position: absolute;
  top: 19vh;
  left: 50%;
  translate: -50% 0;
  color: var(--deep-umber);
  font-family: var(--display);
  font-size: clamp(5.8rem, 19vw, 19rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: .78;
  opacity: .82;
  white-space: nowrap;
}

.ghost {
  position: absolute;
  color: var(--terracotta-fire);
  font-family: var(--display);
  font-size: clamp(12rem, 34vw, 31rem);
  font-style: italic;
  font-weight: 600;
  line-height: .8;
  letter-spacing: .02em;
  opacity: .045;
  white-space: nowrap;
}

.panel--soil .ghost {
  color: var(--warm-off-white);
  opacity: .04;
}

.ghost--one { left: -9vw; bottom: 3vh; }
.ghost--two { right: -18vw; top: 13vh; }
.ghost--three { left: -12vw; top: 20vh; }
.ghost--four { right: -30vw; bottom: 10vh; }
.ghost--five { left: 6vw; bottom: 0; }
.ghost--six { right: -26vw; top: 18vh; }

.kicker {
  margin: 0 0 1.4rem;
  color: var(--terracotta-fire);
  font-family: var(--mono);
  font-size: clamp(.7rem, .85vw, .85rem);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.panel--soil .kicker,
.panel--soil .annotation {
  color: var(--dusty-ochre);
}

.question {
  max-width: 10.5em;
  margin: 0;
  color: inherit;
  font-family: var(--display);
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.05;
}

.opening-copy .question,
.centered-narrow .question {
  margin-inline: auto;
}

.text-right .question,
.text-right .body-copy,
.text-right .annotation {
  margin-left: auto;
}

.body-copy {
  max-width: 38em;
  margin: 2rem 0 0;
  color: var(--warm-charcoal);
  font-family: var(--body);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 400;
  line-height: 1.72;
}

.panel--soil .body-copy {
  color: var(--warm-off-white);
}

.annotation {
  max-width: 24rem;
  margin: 2.3rem 0 0;
  color: var(--terracotta-fire);
  font-family: var(--mono);
  font-size: clamp(.7rem, .85vw, .85rem);
  line-height: 1.65;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.annotation--right {
  position: absolute;
  right: clamp(1rem, 5vw, 4rem);
  bottom: 13vh;
}

.annotation--left {
  position: absolute;
  left: clamp(1rem, 5vw, 4rem);
  bottom: 13vh;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease-natural), transform 900ms var(--ease-natural), scale 900ms var(--ease-natural);
}

.reveal--70 {
  transform: translateX(15px);
}

.text-right .reveal--70,
.annotation--left.reveal--70 {
  transform: translateX(-15px);
}

.is-revealed {
  opacity: 1;
  transform: translate(0, 0);
}

.political-blob {
  position: absolute;
  display: block;
  width: clamp(16rem, 32vw, 34rem);
  aspect-ratio: 1.18 / 1;
  border-radius: 42% 58% 63% 37% / 45% 52% 48% 55%;
  background: radial-gradient(ellipse at 40% 35%, rgba(196, 96, 58, .28) 0%, rgba(196, 96, 58, .14) 45%, transparent 73%);
  filter: url(#grain-filter);
  opacity: .9;
  transform: scale(.7);
  transition: opacity 1000ms var(--ease-natural), transform 1000ms var(--ease-natural);
  animation: blob-drift 27s var(--ease-natural) infinite alternate;
}

.panel.has-mid .political-blob {
  transform: scale(1);
}

.blob-a { top: 14vh; right: 12vw; background: rgba(196, 96, 58, .23); animation-duration: 28s; }
.blob-b { left: 4vw; top: 17vh; background: rgba(201, 166, 107, .23); animation-duration: 31s; animation-delay: -6s; }
.blob-c { right: 8vw; bottom: 8vh; background: rgba(92, 107, 79, .19); animation-duration: 24s; animation-delay: -2s; }
.blob-d { right: 13vw; top: 17vh; background: rgba(196, 96, 58, .2); animation-duration: 29s; animation-delay: -9s; }
.blob-e { left: 3vw; bottom: 6vh; width: clamp(10rem, 21vw, 22rem); background: transparent; border: 1.5px solid rgba(245, 230, 208, .18); animation-duration: 33s; }
.blob-f { left: 7vw; top: 12vh; background: rgba(201, 166, 107, .26); animation-duration: 26s; animation-delay: -5s; }
.blob-g { right: 8vw; bottom: 10vh; background: rgba(232, 184, 75, .14); animation-duration: 30s; animation-delay: -3s; }

.pattern {
  position: absolute;
  display: block;
  opacity: 0;
  transform: translateY(18px) scale(.94);
  transition: opacity 900ms var(--ease-natural) 400ms, transform 900ms var(--ease-natural) 400ms;
}

.panel.has-mid .pattern {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pattern--hatch {
  width: 24rem;
  height: 18rem;
  left: 8vw;
  top: 16vh;
  background: repeating-linear-gradient(135deg, rgba(61, 43, 31, .11) 0 3px, transparent 3px 16px);
}

.panel--soil .pattern--hatch {
  background: repeating-linear-gradient(135deg, rgba(245, 230, 208, .1) 0 3px, transparent 3px 16px);
}

.pattern--diamonds {
  width: 26rem;
  height: 16rem;
  right: 9vw;
  bottom: 12vh;
  background-image: linear-gradient(45deg, transparent 45%, rgba(92, 107, 79, .18) 46% 54%, transparent 55%), linear-gradient(-45deg, transparent 45%, rgba(92, 107, 79, .18) 46% 54%, transparent 55%);
  background-size: 46px 46px;
}

.pattern--chevron {
  width: 22rem;
  height: 22rem;
  left: 13vw;
  bottom: 14vh;
  background: repeating-linear-gradient(45deg, rgba(160, 103, 75, .16) 0 5px, transparent 5px 20px), repeating-linear-gradient(-45deg, rgba(160, 103, 75, .12) 0 5px, transparent 5px 20px);
}

.pattern--small { width: 18rem; height: 14rem; left: 11vw; top: 14vh; }
.pattern--wide { width: 32rem; height: 18rem; right: 7vw; bottom: 7vh; }
.pattern--closing { left: 6vw; top: 10vh; opacity: .2; }

.progress {
  position: fixed;
  z-index: 80;
  top: 50%;
  right: clamp(1rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.25rem;
  translate: 0 -50%;
}

.progress__line {
  position: absolute;
  top: -.8rem;
  bottom: -.8rem;
  left: 50%;
  width: 2px;
  translate: -50% 0;
  background: linear-gradient(var(--terracotta-fire), var(--dusty-ochre), var(--terracotta-fire));
  opacity: .82;
}

.progress__dot {
  position: relative;
  z-index: 1;
  width: .82rem;
  height: .82rem;
  padding: 0;
  border: 2px solid var(--terracotta-fire);
  border-radius: 50%;
  background: var(--aged-linen);
  cursor: pointer;
  transition: transform 650ms var(--ease-natural), background-color 650ms var(--ease-natural), box-shadow 650ms var(--ease-natural);
}

.progress__dot:hover,
.progress__dot.is-active {
  transform: scale(1.38);
  background: var(--saffron-whisper);
  box-shadow: 0 0 0 .28rem rgba(196, 96, 58, .18);
}

@keyframes blob-drift {
  0% { border-radius: 42% 58% 63% 37% / 45% 52% 48% 55%; translate: 0 0; }
  50% { border-radius: 58% 42% 39% 61% / 53% 38% 62% 47%; translate: 2.2rem -1.5rem; }
  100% { border-radius: 37% 63% 55% 45% / 39% 58% 42% 61%; translate: -1.1rem 1.4rem; }
}

@keyframes grain-walk {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(1%, 1%); }
}

@media (max-width: 760px) {
  .panel {
    min-height: 105vh;
  }

  .plane--front,
  .centered-narrow {
    width: min(88vw, 42rem);
    padding-inline: 1rem;
  }

  .text-left,
  .text-right {
    justify-self: center;
    margin-inline: 0;
    text-align: left;
  }

  .text-right .question,
  .text-right .body-copy,
  .text-right .annotation {
    margin-left: 0;
  }

  .annotation--left,
  .annotation--right {
    position: static;
  }

  .progress {
    right: .8rem;
    gap: .9rem;
  }

  .progress__dot {
    width: .62rem;
    height: .62rem;
  }

  .enormous-word {
    top: 24vh;
  }
}