:root {
  /* design typography vocabulary: Interface labels sitting inside oversized Surround with smaller panes: Slab** 3** weights wide tracking. */
  --frosted-lichen: #DDE8D7;
  --misted-sage: #AFC8B6;
  --tide-glass: #7FAFB2;
  --deep-fjord: #2D6468;
  --blue-spruce: #163F46;
  --birch-cream: #F4F0E7;
  --pale-moss-gold: #C8B982;
  --glass: rgba(244, 240, 231, 0.38);
  --border: rgba(127, 175, 178, 0.46);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--deep-fjord);
  background:
    radial-gradient(circle at 18% 8%, rgba(244, 240, 231, 0.82), transparent 31%),
    radial-gradient(circle at 82% 18%, rgba(127, 175, 178, 0.28), transparent 28%),
    linear-gradient(135deg, var(--frosted-lichen), #cfdfd1 45%, var(--misted-sage));
  font-family: "Source Sans 3", Inter, Roboto, system-ui, sans-serif;
  overflow-x: hidden;
}

.design-lexicon {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

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

.pond-light {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(244, 240, 231, 0.55), transparent 38%),
    radial-gradient(ellipse at 34% 72%, rgba(127, 175, 178, 0.22), transparent 34%),
    repeating-linear-gradient(102deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 88px);
  animation: pondDrift 28s ease-in-out infinite alternate;
}

.grain-lines {
  position: absolute;
  inset: 0;
  opacity: .21;
  background:
    repeating-linear-gradient(88deg, transparent 0 42px, rgba(45, 100, 104, .08) 43px, transparent 45px),
    repeating-linear-gradient(178deg, transparent 0 76px, rgba(200, 185, 130, .12) 77px, transparent 79px);
  mix-blend-mode: soft-light;
}

.ambient-bubbles span, .falling-petals span {
  position: absolute;
  display: block;
  opacity: var(--o, .56);
}

.ambient-bubbles span {
  left: var(--x);
  bottom: -12vh;
  width: var(--s);
  height: calc(var(--s) * var(--r, 1));
  border: 1px solid rgba(244, 240, 231, .72);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(244,240,231,.86), rgba(127,175,178,.18) 35%, rgba(127,175,178,.05) 70%);
  box-shadow: inset -7px -10px 18px rgba(45,100,104,.12), 0 0 24px rgba(127,175,178,.24);
  animation: ambientRise var(--d) linear infinite;
  animation-delay: var(--delay);
}

.falling-petals span {
  top: -9vh;
  left: var(--x);
  width: var(--w);
  height: calc(var(--w) * 2.15);
  border-radius: 55% 45% 60% 40%;
  background: linear-gradient(165deg, rgba(244,240,231,.72), rgba(200,185,130,.25));
  box-shadow: 0 9px 18px rgba(45,100,104,.1);
  transform-origin: 50% 8%;
  animation: petalDescend var(--d) linear infinite;
  animation-delay: var(--delay);
}

.specimen-nav {
  position: fixed;
  z-index: 5;
  top: 22px;
  left: 24px;
  display: flex;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(127, 175, 178, .38);
  border-radius: 999px;
  background: rgba(244, 240, 231, .42);
  backdrop-filter: blur(18px);
}

.nav-mark {
  color: rgba(45, 100, 104, .68);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: lowercase;
  padding: 8px 11px;
  border-radius: 999px;
  transition: color .8s ease, background .8s ease, transform .8s ease;
}

.nav-mark span {
  margin-right: 6px;
  color: var(--pale-moss-gold);
}

.nav-mark.active {
  color: var(--blue-spruce);
  background: rgba(221, 232, 215, .76);
  transform: translateY(1px);
}

.narrative {
  position: relative;
  z-index: 1;
}

.movement {
  min-height: 100vh;
  padding: clamp(76px, 8vw, 110px) clamp(18px, 4vw, 64px) clamp(26px, 4vw, 54px);
  display: grid;
  place-items: center;
}

.bento-grid {
  width: min(1180px, 100%);
  min-height: min(760px, calc(100vh - 126px));
  display: grid;
  gap: clamp(12px, 1.45vw, 20px);
  perspective: 1200px;
}

.pane {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: clamp(24px, 2.3vw, 38px);
  background:
    linear-gradient(135deg, rgba(244, 240, 231, .37), rgba(221, 232, 215, .22)),
    rgba(175, 200, 182, .34);
  box-shadow: 0 28px 70px rgba(22,63,70,.12), inset 0 1px 0 rgba(255,255,255,.62);
  backdrop-filter: blur(18px) saturate(1.05);
  transition: transform 1.4s cubic-bezier(.19,1,.22,1), background-position 1.4s ease;
}

.pane::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.42), transparent 30%, rgba(127,175,178,.1) 72%, rgba(255,255,255,.22));
  opacity: .66;
  pointer-events: none;
}

.pane::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  height: 1px;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(127,175,178,.58), transparent);
  opacity: .44;
  animation: counterWipe 10s ease-in-out infinite alternate;
}

.tiny-label {
  position: relative;
  z-index: 2;
  font-family: "Source Sans 3", Inter, system-ui, sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: lowercase;
  color: rgba(45,100,104,.72);
}

.tiny-label.vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

h1, h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Roboto Slab", "Zilla Slab", Georgia, serif;
  font-weight: 300;
  color: var(--blue-spruce);
  letter-spacing: .035em;
  line-height: .95;
}

h2 { font-size: clamp(42px, 7vw, 92px); max-width: 780px; }

p {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "Zilla Slab", Georgia, serif;
  font-weight: 300;
  color: rgba(22,63,70,.78);
  font-size: clamp(18px, 2.1vw, 28px);
  line-height: 1.35;
}

.bento-still {
  grid-template-columns: 1.35fr .32fr .8fr;
  grid-template-rows: 1.04fr .62fr .52fr;
}

.title-basin {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  padding: clamp(24px, 4.8vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 20% 12%, rgba(244,240,231,.7), transparent 32%),
    radial-gradient(circle at 72% 70%, rgba(127,175,178,.22), transparent 34%),
    linear-gradient(145deg, rgba(221,232,215,.66), rgba(175,200,182,.38));
}

.wordmark {
  font-size: clamp(58px, 12vw, 168px);
  letter-spacing: .025em;
  transform: translateX(var(--wordShift, 0px));
  transition: transform .18s linear;
}

.poem-line { max-width: 660px; }

.wordmark-reflection {
  position: absolute;
  z-index: 1;
  left: clamp(24px, 4.8vw, 62px);
  right: 10%;
  bottom: 18px;
  font-family: "Roboto Slab", Georgia, serif;
  font-size: clamp(50px, 11vw, 150px);
  letter-spacing: .025em;
  color: rgba(127,175,178,.19);
  transform: scaleY(-1) translateX(var(--reflectShift, 0px));
  filter: blur(.6px);
  mask-image: linear-gradient(to bottom, transparent, black 55%, transparent);
  transition: transform .18s linear;
}

.waterline {
  position: absolute;
  left: 0;
  right: 0;
  top: 57%;
  height: 62px;
  background: linear-gradient(180deg, transparent, rgba(127,175,178,.16), transparent);
  transform: translateX(var(--waterShift, 0px));
}

.bubble-column {
  grid-column: 3;
  grid-row: 1 / 3;
  padding: 26px 18px;
  background: linear-gradient(180deg, rgba(127,175,178,.42), rgba(221,232,215,.3));
}

.column-bubble {
  position: absolute;
  left: 50%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: 1px solid rgba(244,240,231,.68);
  background: radial-gradient(circle at 32% 25%, rgba(244,240,231,.9), rgba(127,175,178,.14) 45%, transparent 70%);
  box-shadow: inset -6px -9px 14px rgba(45,100,104,.14), 0 0 22px rgba(244,240,231,.25);
  animation: columnRise var(--d) ease-in-out infinite;
}
.b1{--s:50px;--d:9s;bottom:4%;margin-left:-23px}.b2{--s:24px;--d:7s;bottom:22%;margin-left:10px}.b3{--s:78px;--d:12s;bottom:38%;margin-left:-36px}.b4{--s:34px;--d:8.5s;bottom:60%;margin-left:8px}.b5{--s:18px;--d:6.5s;bottom:78%;margin-left:-18px}

.specimen-tile {
  grid-column: 1;
  grid-row: 3;
  padding: 22px;
  background: rgba(244,240,231,.48);
}

.reflection-tile {
  grid-column: 2;
  grid-row: 3;
  padding: 22px;
  background: linear-gradient(160deg, rgba(22,63,70,.88), rgba(45,100,104,.64));
}
.reflection-tile .tiny-label { color: rgba(244,240,231,.72); }

.empty-birch {
  grid-column: 3;
  grid-row: 3;
  padding: 22px;
  background: var(--birch-cream);
}

.birch-seams {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(96deg, transparent 0 22px, rgba(200,185,130,.16) 23px, transparent 26px);
}

.botanical {
  position: absolute;
  inset: 18% 8% 5%;
  width: 84%;
  height: 76%;
  fill: none;
  stroke: rgba(45,100,104,.72);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(var(--lineShift, 0px));
  transition: transform .18s linear;
}
.botanical circle { fill: rgba(200,185,130,.48); stroke: var(--pale-moss-gold); }

.pollen-row { position:absolute; right: 24px; bottom: 22px; display:flex; gap:9px; }
.pollen-row i, .seed-map i { width: 7px; height: 7px; border-radius: 50%; background: var(--pale-moss-gold); box-shadow: 0 0 12px rgba(200,185,130,.45); }

.mirror-text { color: rgba(244,240,231,.82); font-size: clamp(24px, 3vw, 38px); margin-top: 22px; }
.mirror-text span { color: rgba(221,232,215,.5); }
.mirror-text.reflected { transform: scaleY(-1); opacity: .23; margin-top: 10px; filter: blur(.4px); }

.bento-bloom { grid-template-columns: .72fr 1.08fr .52fr; grid-template-rows: .7fr .55fr; }
.bloom-stage { grid-column: 1 / 3; grid-row: 1 / 3; padding: clamp(26px, 5vw, 64px); background: linear-gradient(145deg, rgba(175,200,182,.52), rgba(221,232,215,.44)); }
.linen-note { grid-column: 3; grid-row: 1; padding: 24px; background: var(--birch-cream); }
.fern-panel { grid-column: 3; grid-row: 2; padding: 20px; background: rgba(127,175,178,.22); }
.small-watermark { grid-column: 1; grid-row: 2; display: none; }

.contradiction-flower {
  position: absolute;
  z-index: 2;
  right: 12%;
  bottom: 10%;
  width: min(35vw, 310px);
  aspect-ratio: 1;
  animation: flowerTurn 24s linear infinite;
}
.contradiction-flower span {
  position: absolute;
  left: 50%; top: 50%;
  width: 32%; height: 58%;
  border-radius: 50% 50% 44% 44%;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(244,240,231,.7), rgba(127,175,178,.26));
  border: 1px solid rgba(244,240,231,.55);
  box-shadow: inset 0 0 20px rgba(127,175,178,.16);
}
.contradiction-flower span:nth-child(1){ transform: translate(-50%,-100%) rotate(0deg); }
.contradiction-flower span:nth-child(2){ transform: translate(-50%,-100%) rotate(58deg); }
.contradiction-flower span:nth-child(3){ transform: translate(-50%,-100%) rotate(122deg); }
.contradiction-flower span:nth-child(4){ transform: translate(-50%,-100%) rotate(181deg) scaleY(-1); }
.contradiction-flower span:nth-child(5){ transform: translate(-50%,-100%) rotate(242deg) scaleY(-1); }
.contradiction-flower span:nth-child(6){ transform: translate(-50%,-100%) rotate(302deg); }
.contradiction-flower em { position:absolute; left:45%; top:45%; width:10%; height:10%; border-radius:50%; background: var(--pale-moss-gold); }

.descending-shadow {
  position: absolute;
  left: 12%; right: 10%; top: -10%; bottom: -10%;
  background: radial-gradient(ellipse at 65% 20%, rgba(45,100,104,.13), transparent 28%);
  animation: shadowFall 13s ease-in-out infinite alternate;
}
.fern { inset: 10% 6%; height: 86%; stroke: rgba(22,63,70,.62); animation: lineCounter 12s ease-in-out infinite alternate; }

.bento-air { grid-template-columns: 1fr .52fr; grid-template-rows: .58fr .42fr; }
.air-chamber { grid-column: 1; grid-row: 1 / 3; padding: clamp(28px, 5vw, 70px); background: linear-gradient(160deg, rgba(127,175,178,.38), rgba(221,232,215,.45)); }
.seed-diagram { grid-column: 2; grid-row: 1; padding: 24px; background: rgba(244,240,231,.52); }
.ceramic-pebbles { grid-column: 2; grid-row: 2; background: rgba(175,200,182,.42); }

.bubble-field span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(244,240,231,.7);
  background: radial-gradient(circle at 35% 28%, rgba(244,240,231,.9), rgba(127,175,178,.12) 46%, transparent 74%);
  animation: chamberRise 8s ease-in-out infinite;
}
.bubble-field span:nth-child(1){width:84px;height:84px;left:14%;bottom:10%;animation-delay:-1s}.bubble-field span:nth-child(2){width:42px;height:48px;left:30%;bottom:22%;animation-delay:-5s}.bubble-field span:nth-child(3){width:112px;height:101px;left:52%;bottom:8%;animation-delay:-3s}.bubble-field span:nth-child(4){width:28px;height:28px;left:76%;bottom:32%;animation-delay:-6s}.bubble-field span:nth-child(5){width:62px;height:70px;left:64%;bottom:52%;animation-delay:-2s}.bubble-field span:nth-child(6){width:22px;height:22px;left:42%;bottom:70%;animation-delay:-4s}.bubble-field span:nth-child(7){width:36px;height:36px;left:20%;bottom:66%;animation-delay:-7s}

.seed-map { position: absolute; inset: 25%; border: 1px solid rgba(127,175,178,.38); border-radius: 50%; animation: seedCounter 16s linear infinite reverse; }
.seed-map::before, .seed-map::after { content:""; position:absolute; inset:18%; border: 1px solid rgba(127,175,178,.28); border-radius:50%; }
.seed-map::after { inset: 38%; background: rgba(200,185,130,.18); }
.seed-map i { position:absolute; display:block; }
.seed-map i:nth-child(1){left:48%;top:-3px}.seed-map i:nth-child(2){right:8%;top:22%}.seed-map i:nth-child(3){right:20%;bottom:8%}.seed-map i:nth-child(4){left:16%;bottom:14%}.seed-map i:nth-child(5){left:5%;top:30%}
.ceramic-pebbles span { position:absolute; background: rgba(244,240,231,.58); border: 1px solid rgba(127,175,178,.34); border-radius: 48% 52% 43% 57%; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.ceramic-pebbles span:nth-child(1){width:42%;height:30%;left:16%;top:24%;transform:rotate(-8deg)}.ceramic-pebbles span:nth-child(2){width:34%;height:25%;right:15%;top:44%;transform:rotate(12deg)}.ceramic-pebbles span:nth-child(3){width:28%;height:18%;left:36%;bottom:16%;transform:rotate(-4deg)}

.bento-mirror { grid-template-columns: 1.12fr .58fr; grid-template-rows: .68fr .32fr; }
.dusk-panel { grid-column: 1; grid-row: 1 / 3; padding: clamp(28px, 5vw, 70px); background: linear-gradient(145deg, rgba(22,63,70,.94), rgba(45,100,104,.78)); }
.dusk-panel h2, .dusk-panel p, .dusk-panel .tiny-label { color: rgba(244,240,231,.84); }
.moon-basin { grid-column: 2; grid-row: 1; background: linear-gradient(180deg, rgba(22,63,70,.72), rgba(127,175,178,.34)); }
.closing-label { grid-column: 2; grid-row: 2; padding: 24px; background: var(--birch-cream); }
.final-reflection { position:absolute; left:8%; bottom:4%; font-family:"Roboto Slab", Georgia, serif; font-size: clamp(50px, 9vw, 120px); color: rgba(127,175,178,.18); transform: scaleY(-1); }
.orb { position:absolute; width:38%; aspect-ratio:1; border-radius:50%; left:31%; top:18%; background: radial-gradient(circle at 35% 28%, var(--birch-cream), rgba(221,232,215,.55) 45%, rgba(127,175,178,.16)); box-shadow: 0 0 56px rgba(244,240,231,.24); }
.water-slit { position:absolute; left:12%; right:12%; bottom:28%; height:2px; background: linear-gradient(90deg, transparent, var(--pale-moss-gold), transparent); animation: slitCounter 7s ease-in-out infinite alternate; }

@keyframes pondDrift { from { transform: translate3d(-2%, -1%, 0) rotate(-1deg); } to { transform: translate3d(2%, 1%, 0) rotate(1deg); } }
@keyframes ambientRise { from { transform: translateY(0) translateX(0); } to { transform: translateY(-126vh) translateX(var(--sx)); } }
@keyframes petalDescend { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(120vh) rotate(var(--rot)); } }
@keyframes columnRise { 0% { transform: translateY(24px) scale(.92); opacity:.25; } 50% { opacity:.8; } 100% { transform: translateY(-92px) scale(1.04); opacity:.3; } }
@keyframes counterWipe { from { transform: translateX(18%); } to { transform: translateX(-18%); } }
@keyframes flowerTurn { to { transform: rotate(360deg); } }
@keyframes shadowFall { from { transform: translateY(-18%); } to { transform: translateY(24%); } }
@keyframes lineCounter { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
@keyframes chamberRise { 0%,100% { transform: translateY(22px) scale(.96); opacity:.42; } 50% { transform: translateY(-52px) scale(1.04); opacity:.82; } }
@keyframes seedCounter { to { transform: rotate(360deg); } }
@keyframes slitCounter { from { transform: translateX(-18%); } to { transform: translateX(18%); } }

@media (max-width: 820px) {
  .specimen-nav { left: 50%; transform: translateX(-50%); top: 12px; max-width: calc(100vw - 24px); }
  .nav-mark { font-size: 10px; padding: 7px 8px; }
  .nav-mark span { display: none; }
  .movement { padding: 74px 14px 20px; }
  .bento-grid { min-height: auto; grid-template-columns: 1fr; grid-auto-rows: minmax(180px, auto); }
  .bento-still, .bento-bloom, .bento-air, .bento-mirror { grid-template-columns: 1fr; grid-template-rows: none; }
  .title-basin, .bubble-column, .specimen-tile, .reflection-tile, .empty-birch, .bloom-stage, .linen-note, .fern-panel, .air-chamber, .seed-diagram, .ceramic-pebbles, .dusk-panel, .moon-basin, .closing-label { grid-column: 1; grid-row: auto; min-height: 220px; }
  .title-basin, .bloom-stage, .air-chamber, .dusk-panel { min-height: 460px; }
  .bubble-column { min-height: 360px; }
  .contradiction-flower { width: 230px; right: 8%; bottom: 8%; }
}