:root {
  /* Compliance tokens from DESIGN.md parser: Sans* Sans** from tiny navigation labels */
  --terracotta-clay: #B85F42;
  --sun-baked-rose: #D99A7A;
  --lupine-violet: #7E72C7;
  --mist-lavender: #DCD6F7;
  --cream-linen: #FFF1DC;
  --olive-stem: #68794A;
  --deep-plum-soil: #2B1A24;
  --design-parser-sans-token: "Sans**";
  --design-parser-sans-star-token: "Sans*";
  --display: "Abril Fatface", Georgia, serif;
  --lyric: "Fraunces", Georgia, serif;
  --sans: "Work Sans", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--cream-linen);
}

body {
  margin: 0;
  color: var(--deep-plum-soil);
  font-family: var(--sans);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 14%, rgba(220, 214, 247, .74), transparent 28rem),
    radial-gradient(circle at 14% 86%, rgba(217, 154, 122, .46), transparent 34rem),
    var(--cream-linen);
}

#particle-field {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.field-stakes {
  position: fixed;
  z-index: 20;
  left: clamp(18px, 3.6vw, 54px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: clamp(24px, 6vh, 58px);
}

.stake {
  position: relative;
  width: 76px;
  padding: 18px 0 0 14px;
  color: var(--deep-plum-soil);
  font: 600 10px/1 var(--sans);
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: .62;
  transform-origin: 0 100%;
  transition: opacity .35s ease, color .35s ease, transform .25s ease;
}

.stake span {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--olive-stem), var(--terracotta-clay));
  transform: rotate(7deg);
  box-shadow: 7px 18px 0 -3px rgba(184, 95, 66, .34);
}

.stake:hover,
.stake.is-near,
.stake.is-active {
  opacity: 1;
  color: var(--terracotta-clay);
}

.panorama {
  position: relative;
  min-height: 400vh;
}

.scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding-left: 18vw;
}

.scene::after {
  content: "";
  position: absolute;
  inset: auto -10vw 0 -10vw;
  height: 28vh;
  z-index: -2;
  background: linear-gradient(9deg, rgba(184, 95, 66, .24), rgba(217, 154, 122, .08) 54%, transparent 55%);
}

.scene-dawn {
  background:
    radial-gradient(circle at 68% 18%, rgba(220, 214, 247, .78), transparent 30vw),
    radial-gradient(circle at 31% 36%, rgba(255, 241, 220, .9), transparent 34vw),
    linear-gradient(180deg, var(--cream-linen), #fee8c9 82%, #efbd9e);
}

.sun-wash {
  position: absolute;
  width: 42vw;
  height: 42vw;
  right: 7vw;
  top: 7vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 220, .98), rgba(217, 154, 122, .32) 42%, transparent 70%);
  filter: blur(2px);
}

.horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35vh;
  background:
    radial-gradient(ellipse at 22% 10%, rgba(104, 121, 74, .22), transparent 24%),
    linear-gradient(175deg, transparent 0 21%, var(--terracotta-clay) 22% 62%, #8d493b 100%);
  opacity: .86;
}

.wordmark {
  position: absolute;
  z-index: 2;
  left: 27vw;
  bottom: 17vh;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(86px, 17vw, 260px);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.045em;
  color: var(--deep-plum-soil);
  text-shadow: 0 18px 38px rgba(184, 95, 66, .22);
}

.opening-line {
  position: absolute;
  left: 30vw;
  bottom: 8vh;
  max-width: 460px;
  margin: 0;
  font-family: var(--lyric);
  font-size: clamp(19px, 2.1vw, 34px);
  line-height: 1.16;
  color: rgba(43, 26, 36, .78);
}

.seed-label {
  position: absolute;
  top: 17vh;
  left: 30vw;
  padding: 9px 14px;
  color: var(--terracotta-clay);
  border: 1px solid rgba(184, 95, 66, .36);
  border-radius: 2px 18px 2px 18px;
  font: 600 10px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.terracotta-arch {
  position: absolute;
  border: 28px solid rgba(184, 95, 66, .35);
  border-bottom: 0;
  border-radius: 48vw 48vw 0 0;
  pointer-events: none;
}

.arch-left {
  width: 32vw;
  height: 45vh;
  left: -6vw;
  bottom: 8vh;
  opacity: .42;
}

.arch-right {
  width: 42vw;
  height: 58vh;
  right: -8vw;
  bottom: 5vh;
  opacity: .34;
}

.cluster {
  position: absolute;
  z-index: 4;
  overflow: visible;
  filter: drop-shadow(0 18px 14px rgba(43, 26, 36, .16));
  transform-origin: 50% 100%;
}

.hero-cluster {
  width: min(34vw, 430px);
  right: 11vw;
  bottom: -2vh;
}

.meadow-cluster {
  width: min(39vw, 520px);
  left: 45vw;
  bottom: -2vh;
}

.stem {
  fill: none;
  stroke: var(--olive-stem);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: .96;
}

.stem-two { stroke: var(--terracotta-clay); stroke-width: 4; opacity: .72; }
.stem-three { stroke-width: 4.5; opacity: .86; }

.petal-spire ellipse {
  fill: rgba(126, 114, 199, .82);
  stroke: rgba(43, 26, 36, .28);
  stroke-width: 1.5;
  transform-origin: center;
  transition: transform .28s ease;
}

.spire-two ellipse { fill: rgba(220, 214, 247, .9); }
.spire-three ellipse { fill: rgba(126, 114, 199, .62); }

.leaf {
  fill: rgba(104, 121, 74, .65);
  stroke: rgba(43, 26, 36, .22);
  stroke-width: 2;
}

.lupine { animation: fieldSway 7s ease-in-out infinite; }
.lupine.is-near .petal-spire ellipse { transform: translateX(var(--lean-x, 0px)) rotate(var(--lean-r, 0deg)); }

@keyframes fieldSway {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(2.2deg); }
}

.scene-meadow {
  background:
    radial-gradient(circle at 12% 70%, rgba(104, 121, 74, .28), transparent 28vw),
    radial-gradient(circle at 74% 35%, rgba(126, 114, 199, .22), transparent 32vw),
    linear-gradient(180deg, #fee7cc, var(--cream-linen) 34%, #f6cfaa 100%);
}

.path-line {
  position: absolute;
  left: 18vw;
  top: -12vh;
  bottom: -12vh;
  width: 10vw;
  background: linear-gradient(96deg, transparent, rgba(184, 95, 66, .16), transparent);
  transform: skewX(-10deg);
}

.copy-block {
  position: absolute;
  z-index: 5;
  max-width: 580px;
}

.meadow-copy {
  left: 29vw;
  top: 19vh;
}

.kicker {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--terracotta-clay);
  font: 600 11px/1 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.copy-block h2 {
  margin: 0;
  font-family: var(--lyric);
  font-size: clamp(44px, 6vw, 96px);
  line-height: .92;
  letter-spacing: -.045em;
  color: var(--deep-plum-soil);
}

.copy-block p {
  width: min(100%, 430px);
  margin: 26px 0 0;
  font-family: var(--lyric);
  font-size: clamp(18px, 1.55vw, 25px);
  line-height: 1.34;
  color: rgba(43, 26, 36, .72);
}

.contours {
  position: absolute;
  left: 20vw;
  right: 4vw;
  bottom: 11vh;
  height: 35vh;
  background:
    repeating-radial-gradient(ellipse at 15% 100%, transparent 0 20px, rgba(104, 121, 74, .24) 22px 24px, transparent 26px 48px);
  transform: rotate(-4deg);
  opacity: .5;
}

.scene-letter {
  background:
    radial-gradient(circle at 70% 44%, rgba(217, 154, 122, .42), transparent 28vw),
    linear-gradient(180deg, #ffdcb9, var(--cream-linen) 58%, #e7ad8d);
}

.letter-copy {
  left: 51vw;
  top: 16vh;
  max-width: 510px;
}

.letter-wrap {
  position: absolute;
  left: 24vw;
  top: 27vh;
  width: min(38vw, 520px);
  height: 380px;
  transform: rotate(-7deg);
  transition: transform .45s ease;
}

.letter-wrap.is-near { transform: rotate(-3deg) translateY(-10px); }

.letter-paper {
  position: absolute;
  inset: 42px 44px 24px 18px;
  display: grid;
  place-items: center;
  padding: 42px;
  background: linear-gradient(135deg, #fff8ea, var(--cream-linen));
  border: 1px solid rgba(184, 95, 66, .32);
  box-shadow: 0 28px 54px rgba(43, 26, 36, .18);
}

.letter-paper p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--terracotta-clay);
  font-family: var(--lyric);
  font-size: clamp(21px, 2.5vw, 36px);
  line-height: 1.05;
  text-align: center;
}

.fold {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, transparent 49.6%, rgba(184, 95, 66, .18) 50%, transparent 50.8%);
}

.fold-b { transform: scaleX(-1); opacity: .62; }

.seal {
  position: absolute;
  right: 17%;
  top: 24%;
  width: 54px;
  height: 46px;
  background: var(--lupine-violet);
  border-radius: 60% 40% 55% 45%;
  opacity: .86;
  box-shadow: inset -8px -6px 0 rgba(43, 26, 36, .16);
}

.ribbon {
  position: absolute;
  left: -34px;
  bottom: -3px;
  width: 116%;
  height: 138px;
  overflow: visible;
}

.ribbon path {
  fill: none;
  stroke: var(--sun-baked-rose);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 84;
  transition: stroke-dashoffset .55s ease, stroke .35s ease;
}

.letter-wrap.is-near .ribbon path {
  stroke-dashoffset: 10;
  stroke: var(--terracotta-clay);
}

.scene-dusk {
  background:
    radial-gradient(circle at 74% 22%, rgba(126, 114, 199, .44), transparent 30vw),
    radial-gradient(circle at 28% 78%, rgba(184, 95, 66, .38), transparent 26vw),
    linear-gradient(180deg, #e7ad8d, #8c6da6 48%, var(--deep-plum-soil) 100%);
  color: var(--cream-linen);
}

.scene-dusk::after { background: linear-gradient(8deg, rgba(43, 26, 36, .92), rgba(43, 26, 36, .2)); }

.dusk-copy {
  left: 30vw;
  top: 16vh;
}

.dusk-copy h2,
.dusk-copy p { color: var(--cream-linen); }
.dusk-copy .kicker { color: var(--mist-lavender); }

.dusk-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 55% 12%, rgba(255, 241, 220, .28), transparent 26vw);
}

.roofline {
  position: absolute;
  left: 13vw;
  right: 0;
  bottom: 0;
  height: 31vh;
  background: linear-gradient(153deg, transparent 0 24%, rgba(43, 26, 36, .82) 24.4% 100%);
}

.final-mark {
  position: absolute;
  right: 8vw;
  bottom: 7vh;
  z-index: 4;
  color: rgba(255, 241, 220, .22);
  font-family: var(--display);
  font-size: clamp(62px, 9vw, 170px);
  line-height: .8;
}

@media (max-width: 760px) {
  .scene { padding-left: 0; }
  .field-stakes { left: 14px; gap: 18px; }
  .stake { width: 54px; font-size: 8px; letter-spacing: .12em; }
  .wordmark { left: 13vw; bottom: 22vh; font-size: 24vw; }
  .opening-line, .seed-label { left: 16vw; }
  .hero-cluster { width: 64vw; right: -6vw; }
  .meadow-copy, .letter-copy, .dusk-copy { left: 18vw; right: 8vw; top: 12vh; }
  .letter-copy { top: 8vh; }
  .letter-wrap { left: 15vw; top: 48vh; width: 78vw; }
  .meadow-cluster { width: 74vw; left: 24vw; }
}