:root {
  --ember: #F2A541;
  --peat: #17130E;
  --rain: #6BA6A9;
  --moss: #6E8B4E;
  --linen: #E8D8B5;
  --copper: #B66A3C;
  --moon: #F6F0DF;
  --violet: #2B253A;
  --wick-progress: 0%;
}

/* IBM Plex Mono is used sparingly for tiny inventory marks and station codes. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--moon);
  background:
    radial-gradient(circle at 18% 8%, rgba(43, 37, 58, .85), transparent 30rem),
    linear-gradient(180deg, #17130E 0%, #17130E 38%, #2B253A 72%, #17130E 100%);
  font-family: "Alegreya Sans", "inter", sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .19;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(246, 240, 223, .18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, rgba(232, 216, 181, .12) 0 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0 48%, rgba(246, 240, 223, .06) 49% 51%, transparent 52% 100%);
  background-size: 37px 41px, 53px 47px, 140px 140px;
  mix-blend-mode: soft-light;
}

.station {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5vw, 78px) clamp(24px, 8vw, 128px);
  display: grid;
  align-items: center;
}

.station::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 50%), rgba(242, 165, 65, .2), transparent 26rem);
  opacity: .25;
  transition: opacity 900ms ease;
}

.station.is-lit::before { opacity: 1; }

.station::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 28%, rgba(23, 19, 14, .68) 82%);
}

.wick-map {
  position: fixed;
  left: clamp(14px, 2.3vw, 34px);
  top: 10vh;
  bottom: 10vh;
  z-index: 70;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.wick-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(232,216,181,.2), rgba(182,106,60,.25));
  box-shadow: 0 0 18px rgba(242, 165, 65, .16);
}

.wick-line span {
  display: block;
  width: 100%;
  height: var(--wick-progress);
  background: var(--ember);
  box-shadow: 0 0 18px var(--ember), 0 0 38px rgba(242, 165, 65, .45);
  border-radius: 999px;
}

.wick-bead {
  position: relative;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(232,216,181,.46);
  border-radius: 50%;
  background: #17130E;
  cursor: pointer;
  padding: 0;
  transition: transform 400ms ease, background 400ms ease, box-shadow 400ms ease;
}

.wick-bead span {
  position: absolute;
  left: 26px;
  top: -2px;
  color: rgba(246,240,223,.54);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .13em;
  white-space: nowrap;
}

.wick-bead.is-active {
  transform: scale(1.45);
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: 0 0 20px var(--ember), 0 0 44px rgba(242,165,65,.44);
}

.wick-bead.is-active span { color: var(--moon); }

.inscription {
  max-width: 520px;
  color: var(--moon);
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

.inscription h1,
.inscription h2,
.domain {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 80, "WONK" 1;
}

.inscription h1,
.inscription h2 {
  margin: .18em 0 .25em;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: .84;
  letter-spacing: -.055em;
  color: var(--moon);
}

.inscription p:not(.station-code) {
  font-size: clamp(1.22rem, 2vw, 1.72rem);
  line-height: 1.25;
  color: rgba(246,240,223,.84);
}

.station-code,
.object-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ember);
}

.object-label { color: rgba(232,216,181,.62); }
.caveat { font-family: "Caveat", cursive; text-transform: none; letter-spacing: .02em; font-size: 1.35rem; color: var(--linen); }

.first-ember {
  --light-x: 53%;
  --light-y: 62%;
  grid-template-columns: 1fr 1fr;
  background: radial-gradient(circle at 52% 62%, rgba(242,165,65,.18) 0%, rgba(182,106,60,.09) 18%, #17130E 58%);
}

.smoke-wordmark {
  position: absolute;
  top: 9vh;
  left: 14vw;
  display: grid;
  gap: .5rem;
  opacity: .88;
  filter: blur(.12px);
  animation: smokeDrift 9s ease-in-out infinite alternate;
}

.domain { font-size: clamp(2.4rem, 6vw, 6.8rem); color: rgba(246,240,223,.88); letter-spacing: -.06em; }
.subtitle { font-family: "IBM Plex Mono", monospace; color: rgba(232,216,181,.5); letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; }

.lantern-scene { justify-self: center; align-self: end; display: grid; justify-items: center; gap: 2rem; margin-bottom: 10vh; }
.ceramic-lantern { position: relative; width: 210px; height: 260px; border-radius: 47% 47% 34% 34%; background: linear-gradient(145deg, #E8D8B5, #B66A3C 64%, #17130E); box-shadow: inset 20px -24px 45px rgba(23,19,14,.48), 0 34px 90px rgba(0,0,0,.72); }
.ceramic-lantern::before { content:""; position:absolute; left:50%; top:-42px; width:84px; height:62px; transform:translateX(-50%); border: 7px solid #B66A3C; border-bottom:0; border-radius: 80px 80px 0 0; }
.lantern-window { position:absolute; inset: 74px 58px 48px; border-radius: 48% 48% 36% 36%; background: radial-gradient(circle at 40% 55%, #F2A541 0%, #B66A3C 18%, #17130E 62%); display:grid; place-items:center; box-shadow: inset 0 0 28px rgba(23,19,14,.74), 0 0 56px rgba(242,165,65,.34); overflow:hidden; }
.flame, .sun-ember { width: 36px; height: 58px; border-radius: 54% 46% 48% 52% / 68% 64% 36% 32%; background: radial-gradient(circle at 50% 68%, #F6F0DF 0 12%, #F2A541 28%, #B66A3C 64%, transparent 70%); filter: drop-shadow(0 0 20px #F2A541); animation: flameBreathe 2.8s ease-in-out infinite; }
.lantern-crack { position:absolute; width:2px; background:#17130E; opacity:.55; transform-origin:top; }
.c1 { height:72px; left:44px; top:105px; transform:rotate(-18deg); box-shadow: 12px 27px 0 -1px #17130E; }
.c2 { height:62px; right:46px; top:48px; transform:rotate(22deg); box-shadow: -12px 33px 0 -1px #17130E; }
.ritual-button { border:1px solid rgba(242,165,65,.54); border-radius:999px; color:var(--moon); background:rgba(23,19,14,.72); padding: .9rem 1.35rem; font-family:"IBM Plex Mono", monospace; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; box-shadow: 0 0 26px rgba(242,165,65,.16); transition: transform 300ms ease, background 300ms ease, box-shadow 300ms ease; }
.ritual-button:hover, .ritual-button.is-shielded { transform: translateY(-2px); background: rgba(182,106,60,.34); box-shadow: 0 0 38px rgba(242,165,65,.34); }
.opening-note { align-self:end; padding-bottom: 11vh; }

.rain-kept { --light-x: 66%; --light-y: 30%; background: radial-gradient(circle at 72% 24%, rgba(107,166,169,.28), transparent 28rem), linear-gradient(160deg, #17130E 0%, #2B253A 55%, #17130E 100%); }
.hanging-cords span { position:absolute; top:0; width:1px; height:54vh; background: linear-gradient(#E8D8B5, transparent); opacity:.35; }
.hanging-cords span:nth-child(1){ left:55%; } .hanging-cords span:nth-child(2){ left:72%; height:44vh; } .hanging-cords span:nth-child(3){ left:84%; height:62vh; }
.rain-bowls { position:absolute; inset:0; }
.bowl { position:absolute; border: 2px solid rgba(232,216,181,.42); border-top:0; border-radius: 0 0 120px 120px; background: radial-gradient(ellipse at 50% 0%, rgba(107,166,169,.7), rgba(107,166,169,.18) 48%, transparent 52%); box-shadow: inset 0 -22px 36px rgba(107,166,169,.2), 0 0 50px rgba(107,166,169,.18); }
.bowl-one { width:260px; height:118px; right:24%; top:32%; transform:rotate(-8deg); }
.bowl-two { width:180px; height:84px; right:9%; top:50%; transform:rotate(12deg); }
.bowl-three { width:230px; height:100px; right:39%; top:62%; transform:rotate(5deg); }
.bowl i { position:absolute; top:-90px; width:8px; height:22px; border-radius: 99px; background:#6BA6A9; box-shadow:0 0 17px #6BA6A9; animation: droplet 3.7s linear infinite; opacity:.85; }
.bowl i:nth-child(1){ left:22%; animation-delay:.2s; } .bowl i:nth-child(2){ left:52%; animation-delay:1.3s; } .bowl i:nth-child(3){ left:74%; animation-delay:2.2s; } .bowl i:nth-child(4){ left:38%; animation-delay:3s; }
.rain-tag { margin-left: 13vw; padding: 1.6rem; background: rgba(232,216,181,.08); border-left: 1px solid rgba(232,216,181,.34); transform: rotate(-2deg); }

.seed-archive { --light-x: 35%; --light-y: 36%; background: radial-gradient(circle at 35% 34%, rgba(110,139,78,.25), transparent 25rem), #17130E; }
.greenhouse-frame { position:absolute; width:min(72vw, 980px); height:62vh; right:2vw; top:16vh; transform: rotate(-8deg); border: 1px solid rgba(246,240,223,.28); background: linear-gradient(135deg, rgba(246,240,223,.08), rgba(107,166,169,.08)); box-shadow: 0 0 80px rgba(107,166,169,.12); }
.glass-pane { position:absolute; inset:8%; border:1px solid rgba(246,240,223,.18); background: linear-gradient(115deg, rgba(246,240,223,.12), transparent 36%, rgba(107,166,169,.1)); }
.pane-b { inset: 8% 38% 8% 36%; } .pane-c { inset:8% 8% 8% 68%; }
.seed-envelope { position:absolute; width:180px; height:118px; padding:1rem; background:#E8D8B5; color:#17130E; box-shadow: 0 14px 42px rgba(0,0,0,.32); font-family:"IBM Plex Mono", monospace; text-transform:uppercase; font-size:.72rem; }
.seed-envelope::before { content:""; position:absolute; inset:0; clip-path: polygon(0 0,50% 45%,100% 0,100% 100%,0 100%); border:1px solid rgba(182,106,60,.42); }
.seed-envelope b { display:block; font-family:"Fraunces", serif; font-size:1.3rem; text-transform:none; color:#2B253A; } .seed-envelope small { position:relative; top:26px; color:#B66A3C; }
.e1 { left:15%; top:14%; transform:rotate(11deg); } .e2 { right:18%; bottom:13%; transform:rotate(-6deg); }
.root-drawing { position:absolute; left:22%; top:18%; width:56%; height:64%; fill:none; stroke:#6E8B4E; stroke-width:4; stroke-linecap:round; opacity:.85; }
.root-drawing path { stroke-dasharray: 520; stroke-dashoffset: calc(520 - (520 * var(--draw, 0))); transition: stroke-dashoffset 1600ms ease; }
.seed-note { margin-left: 8vw; align-self:end; padding-bottom:8vh; }

.mending-table { --light-x: 58%; --light-y: 54%; background: radial-gradient(circle at 55% 50%, rgba(182,106,60,.25), transparent 32rem), linear-gradient(180deg, #17130E, #2B253A); }
.sailcloth { position:absolute; left:14vw; top:18vh; width:70vw; height:55vh; background: linear-gradient(135deg, rgba(232,216,181,.66), rgba(232,216,181,.2)); border-radius: 48% 42% 50% 36% / 20% 34% 28% 44%; transform: rotate(3deg); box-shadow: inset 0 0 55px rgba(23,19,14,.35); }
.stitch-path { position:absolute; inset:12% 7%; fill:none; stroke:#F2A541; stroke-width:5; stroke-linecap:round; stroke-dasharray: 18 18; filter: drop-shadow(0 0 9px #F2A541); stroke-dashoffset: calc(900 - (900 * var(--draw, 0))); transition: stroke-dashoffset 1700ms ease; }
.patch { position:absolute; background:#B66A3C; border:1px solid rgba(246,240,223,.34); color:#F6F0DF; font-family:"Caveat", cursive; font-size:1.5rem; display:grid; place-items:center; text-align:center; box-shadow:0 12px 36px rgba(0,0,0,.28); }
.patch-one { left:18%; top:35%; width:180px; height:110px; transform:rotate(-11deg); } .patch-two { right:21%; top:18%; width:130px; height:150px; transform:rotate(16deg); background:#6E8B4E; }
.tool { position:absolute; background:#17130E; box-shadow: 0 0 0 3px rgba(182,106,60,.4); }
.awl { right:17%; bottom:20%; width:190px; height:13px; transform:rotate(-28deg); border-radius:99px; } .awl::after { content:""; position:absolute; right:-55px; top:4px; border-left:70px solid #B66A3C; border-top:3px solid transparent; border-bottom:3px solid transparent; }
.spoon { left:46%; top:16%; width:140px; height:16px; transform:rotate(42deg); border-radius:99px; } .spoon::before { content:""; position:absolute; left:-34px; top:-15px; width:46px; height:46px; border-radius:50%; background:#6BA6A9; }
.mend-vow { align-self:end; justify-self:end; max-width:590px; padding-bottom:7vh; }

.orchard-relay { --light-x: 50%; --light-y: 50%; background: radial-gradient(circle at 40% 25%, rgba(43,37,58,.9), transparent 36rem), linear-gradient(180deg, #17130E, #2B253A 50%, #17130E); }
.orchard { position:absolute; inset:0; }
.tree { position:absolute; bottom:8vh; width:18px; height:42vh; background: linear-gradient(#6E8B4E, #17130E); border-radius: 99px 99px 0 0; opacity:.86; }
.tree span { position:absolute; left:50%; top:-90px; width:180px; height:160px; transform:translateX(-50%); border-radius:48% 52% 44% 56%; background: radial-gradient(circle, rgba(110,139,78,.44), rgba(110,139,78,.08) 65%, transparent 66%); }
.t1{ left:16%; height:37vh; } .t2{ left:38%; height:51vh; } .t3{ left:65%; height:44vh; } .t4{ left:84%; height:35vh; }
.firefly { position:absolute; width:9px; height:9px; border-radius:50%; background:#F2A541; box-shadow:0 0 16px #F2A541, 0 0 38px rgba(242,165,65,.5); animation: relay 8s ease-in-out infinite alternate; }
.f1{ left:18%; top:44%; animation-delay:0s; } .f2{ left:31%; top:34%; animation-delay:.8s; } .f3{ left:49%; top:48%; animation-delay:1.6s; } .f4{ left:66%; top:35%; animation-delay:2.4s; } .f5{ left:80%; top:50%; animation-delay:3.2s; }
.relay-note { margin-left:auto; margin-right:10vw; padding:1.5rem; border-bottom:1px solid rgba(242,165,65,.36); }

.dawn-loop { --light-x: 50%; --light-y: 62%; background: linear-gradient(180deg, #17130E 0%, #2B253A 46%, rgba(182,106,60,.42) 74%, #F2A541 140%); }
.horizon-wick { position:absolute; left:0; right:0; top:58%; height:2px; background: linear-gradient(90deg, transparent, #F2A541, #E8D8B5, #F2A541, transparent); box-shadow:0 0 24px #F2A541; }
.sun-ember { position:absolute; left:48%; top:-31px; }
.leaf-boat { position:absolute; left:18%; top:63%; width:180px; height:52px; border-radius: 8% 92% 7% 93%; background:#6E8B4E; transform:rotate(-8deg); box-shadow: inset -20px -10px 20px rgba(23,19,14,.35); }
.leaf-boat span { position:absolute; left:78px; top:-78px; width:1px; height:88px; background:#E8D8B5; } .leaf-boat span::after { content:""; position:absolute; left:0; top:0; width:66px; height:72px; background:rgba(232,216,181,.42); clip-path:polygon(0 0, 100% 50%, 0 100%); }
.dawn-note { margin-left:18vw; max-width:670px; }
.small { margin-top:1rem; font-size:.72rem; }
.loop-script { position:absolute; right:10vw; bottom:10vh; font-family:"Caveat", cursive; font-size:3rem; color:rgba(232,216,181,.48); transform:rotate(-9deg); }

@keyframes flameBreathe { 0%,100% { transform: scale(1) rotate(-2deg); opacity:.9; } 50% { transform: scale(1.15,.92) rotate(3deg); opacity:1; } }
@keyframes smokeDrift { from { transform: translateY(0) skewX(-2deg); opacity:.72; } to { transform: translateY(-18px) skewX(3deg); opacity:.95; } }
@keyframes droplet { 0% { transform: translateY(-40px) scaleY(.4); opacity:0; } 20% { opacity:1; } 86% { opacity:1; } 100% { transform: translateY(132px) scaleY(1); opacity:0; } }
@keyframes relay { from { transform: translate(-10px, 14px) scale(.72); opacity:.35; } 45% { opacity:1; } to { transform: translate(52px, -26px) scale(1.25); opacity:.8; } }

@media (max-width: 820px) {
  .station { padding-left: 72px; }
  .first-ember { grid-template-columns: 1fr; }
  .smoke-wordmark { left: 72px; }
  .greenhouse-frame, .sailcloth { width: 88vw; left: 8vw; right:auto; opacity:.7; }
  .inscription h1, .inscription h2 { font-size: clamp(2.7rem, 15vw, 5rem); }
  .wick-bead span { display:none; }
}