:root {
  --night: #14172F;
  --honey: #F2B84B;
  --bone: #F7E8C8;
  --clay: #B95C43;
  --reed: #667A55;
  --ember: #E56F3A;
  --ash: #8B8793;
  --title: 'Gowun Batang', serif;
  --declaration: 'Fraunces', serif;
  --korean: 'Noto Sans KR', sans-serif;
  --ui: 'Work Sans', sans-serif;
  --design-parser-token: 'Sans** small interface notes';
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--bone);
  font-family: var(--ui);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(242, 184, 75, .12), transparent 18rem),
    radial-gradient(circle at 84% 88%, rgba(229, 111, 58, .14), transparent 22rem),
    linear-gradient(145deg, #14172F 0%, #191b36 42%, #0d1023 100%);
  pointer-events: none;
  z-index: -3;
}

.grain {
  position: fixed;
  inset: 0;
  opacity: .22;
  z-index: 20;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(247,232,200,.12) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(20,23,47,.55) 0 1px, transparent 1.5px);
  background-size: 17px 19px, 23px 29px;
  mix-blend-mode: overlay;
}

.night-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bone);
  opacity: .35;
  box-shadow: 0 0 14px var(--honey);
}

.trail-toggle {
  position: fixed;
  right: 2rem;
  bottom: 1.6rem;
  z-index: 30;
  border: 1px solid rgba(247, 232, 200, .34);
  border-radius: 999px;
  padding: .85rem 1.15rem .85rem .75rem;
  background: rgba(20, 23, 47, .72);
  color: var(--bone);
  font: 600 .78rem/1 var(--ui);
  letter-spacing: .08em;
  text-transform: lowercase;
  backdrop-filter: blur(12px);
}

.lantern-dot {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-right: .55rem;
  border-radius: 50%;
  vertical-align: -.12rem;
  background: var(--honey);
  box-shadow: 0 0 22px 8px rgba(242, 184, 75, .38);
  animation: breathe 2.8s ease-in-out infinite;
}

.route-map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}

.route-line,
.route-shadow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-line {
  stroke: var(--honey);
  stroke-width: 4;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  filter: drop-shadow(0 0 12px rgba(242, 184, 75, .42));
}

.route-shadow {
  stroke: var(--ash);
  stroke-width: 1.6;
  stroke-dasharray: 16 18;
  opacity: .42;
}

body.trail-awake .route-line { animation: drawRoute 5.5s ease forwards; }

.pilgrimage {
  position: relative;
  z-index: 2;
  min-height: 700vh;
}

.waystation {
  position: relative;
  min-height: 100vh;
  padding: 7rem clamp(1rem, 5vw, 5rem);
  display: flex;
  align-items: center;
}

.opening { justify-content: center; }
.offset-left { justify-content: flex-start; }
.offset-right { justify-content: flex-end; }
.homeward-dawn { justify-content: center; min-height: 112vh; }

.folded-map,
.parchment,
.dawn-scroll {
  position: relative;
  border: 1px solid rgba(247, 232, 200, .38);
  background:
    linear-gradient(135deg, rgba(247,232,200,.17), rgba(247,232,200,.07)),
    radial-gradient(circle at 20% 10%, rgba(242,184,75,.18), transparent 12rem);
  box-shadow: 0 28px 70px rgba(0,0,0,.38), inset 0 0 55px rgba(20,23,47,.24);
  backdrop-filter: blur(9px);
}

.folded-map {
  width: min(760px, 92vw);
  min-height: 550px;
  padding: clamp(2rem, 6vw, 5rem);
  clip-path: polygon(4% 8%, 54% 2%, 97% 13%, 91% 88%, 43% 98%, 8% 83%);
  text-align: center;
}

.route-inscription {
  margin: 0 0 4rem;
  color: rgba(139, 135, 147, .68);
  font: 500 .85rem/1 var(--ui);
  letter-spacing: .42em;
}

.hand-trace {
  margin: 0 auto 1rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247, 232, 200, .35);
  font: 700 clamp(5rem, 16vw, 12rem)/.8 var(--korean);
  filter: drop-shadow(0 0 1px var(--honey));
}

body.trail-awake .hand-trace {
  color: var(--bone);
  text-shadow: 0 0 28px rgba(242, 184, 75, .45);
  transition: color 2.4s ease 1s, text-shadow 2.4s ease 1s;
}

h1, h2 {
  font-family: var(--title);
  font-weight: 700;
  margin: 0;
}

h1 { font-size: clamp(3.1rem, 9vw, 8rem); letter-spacing: -.06em; }
h2 { font-size: clamp(2.4rem, 6vw, 5.7rem); letter-spacing: -.05em; color: var(--bone); }

.quest-line,
.question {
  font-family: var(--declaration);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

.quest-line {
  max-width: 38rem;
  margin: 1.4rem auto 0;
  font-size: clamp(1.1rem, 2vw, 1.65rem);
  color: rgba(247, 232, 200, .82);
}

.first-step,
.final-vow {
  display: inline-block;
  margin-top: 2rem;
  color: var(--honey);
  border-top: 1px solid rgba(242,184,75,.42);
  border-bottom: 1px solid rgba(242,184,75,.42);
  padding: .7rem 1.2rem;
  font: 600 .76rem/1 var(--ui);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.station-marker {
  position: absolute;
  top: 16vh;
  left: clamp(1rem, 5vw, 5rem);
  color: var(--ash);
  font: 600 .72rem/1 var(--ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.offset-right .station-marker { left: auto; right: clamp(1rem, 5vw, 5rem); }

.parchment {
  width: min(580px, 88vw);
  padding: clamp(1.5rem, 4vw, 3.3rem);
  transform: rotate(var(--tilt, -2deg));
}

.offset-right .parchment { --tilt: 2.2deg; }
.borrowed-fire .parchment { --tilt: 1.2deg; }
.question-cairn .parchment { --tilt: -1deg; }

.kr-label {
  display: block;
  margin-bottom: .8rem;
  color: var(--honey);
  font: 600 .9rem/1.2 var(--korean);
  letter-spacing: .08em;
}

.question {
  margin: 1.2rem 0;
  color: var(--honey);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  line-height: 1.15;
}

.parchment p:not(.question),
.dawn-scroll p:not(.question) {
  color: rgba(247, 232, 200, .76);
  font-size: 1rem;
  line-height: 1.75;
}

.artifact,
.artifact-fire,
.thread-line,
.cairn,
.person-outline,
.footprints,
.reeds,
.moon-phase {
  position: absolute;
}

.branch {
  right: 14vw;
  top: 31vh;
  width: 190px;
  height: 160px;
  color: var(--clay);
  transform: rotate(10deg);
}

.branch::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 4px;
  background: var(--reed);
  transform: rotate(-24deg);
  box-shadow: 18px 19px 0 -1px var(--reed);
}

.branch i {
  position: absolute;
  left: 78px;
  top: 28px;
  width: 42px;
  height: 72px;
  background: rgba(247,232,200,.86);
  clip-path: polygon(8% 0, 100% 8%, 83% 100%, 0 86%);
}

.branch b { position: absolute; left: 45px; top: 110px; font-family: var(--title); font-size: 1.2rem; }

.footprints {
  left: 16vw;
  bottom: 12vh;
  width: 320px;
  height: 260px;
  transform: rotate(-18deg);
}

.footprints span {
  position: absolute;
  width: 32px;
  height: 54px;
  border-radius: 50% 50% 45% 45%;
  background: rgba(185, 92, 67, .56);
  opacity: 0;
  transform: translateY(18px) rotate(7deg);
}

.footprints span:nth-child(1) { left: 10px; top: 180px; }
.footprints span:nth-child(2) { left: 66px; top: 138px; transform: translateY(18px) rotate(-13deg); }
.footprints span:nth-child(3) { left: 105px; top: 96px; }
.footprints span:nth-child(4) { left: 164px; top: 70px; transform: translateY(18px) rotate(-13deg); }
.footprints span:nth-child(5) { left: 205px; top: 28px; }
.footprints span:nth-child(6) { left: 266px; top: 10px; transform: translateY(18px) rotate(-13deg); }

.waystation.seen .footprints span { animation: printIn .8s ease forwards; }
.waystation.seen .footprints span:nth-child(2) { animation-delay: .2s; }
.waystation.seen .footprints span:nth-child(3) { animation-delay: .4s; }
.waystation.seen .footprints span:nth-child(4) { animation-delay: .6s; }
.waystation.seen .footprints span:nth-child(5) { animation-delay: .8s; }
.waystation.seen .footprints span:nth-child(6) { animation-delay: 1s; }

.reeds { right: 3vw; bottom: 0; width: 280px; height: 380px; opacity: .55; }
.reeds i { position: absolute; bottom: 0; width: 3px; height: 260px; background: var(--reed); transform-origin: bottom; }
.reeds i:nth-child(1) { left: 20px; transform: rotate(-8deg); }
.reeds i:nth-child(2) { left: 80px; height: 340px; transform: rotate(4deg); }
.reeds i:nth-child(3) { left: 135px; height: 290px; transform: rotate(-14deg); }
.reeds i:nth-child(4) { left: 190px; height: 360px; transform: rotate(10deg); }
.reeds i:nth-child(5) { left: 242px; height: 310px; transform: rotate(-5deg); }

.artifact-fire {
  right: 15vw;
  bottom: 18vh;
  width: 220px;
  height: 220px;
}

.cupped-hands::before,
.cupped-hands::after {
  content: "";
  position: absolute;
  bottom: 48px;
  width: 92px;
  height: 58px;
  border: 12px solid var(--clay);
  border-top: 0;
  border-radius: 0 0 90px 90px;
  opacity: .82;
}

.cupped-hands::before { left: 18px; transform: rotate(18deg); }
.cupped-hands::after { right: 18px; transform: rotate(-18deg); }

.flame {
  position: absolute;
  left: 88px;
  top: 50px;
  width: 48px;
  height: 78px;
  background: radial-gradient(circle at 55% 68%, var(--honey), var(--ember) 55%, transparent 58%);
  border-radius: 70% 35% 70% 35%;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 24px rgba(229,111,58,.85));
  animation: flame 1.5s ease-in-out infinite alternate;
}

.bowl {
  position: absolute;
  left: 50px;
  bottom: 10px;
  width: 122px;
  height: 48px;
  border-radius: 0 0 90px 90px;
  background: var(--bone);
  box-shadow: inset 0 -16px 0 rgba(185,92,67,.3);
}

.thread-line {
  left: 8vw;
  top: 24vh;
  width: 40vw;
  height: 180px;
  border-top: 3px solid var(--clay);
  border-radius: 50%;
  transform: rotate(-13deg);
}

.thread-line span {
  position: absolute;
  top: -10px;
  width: 24px;
  height: 24px;
  border: 3px solid var(--honey);
  border-radius: 50%;
  background: var(--night);
}
.thread-line span:first-child { left: 8%; }
.thread-line span:last-child { right: 10%; }

.coat-note {
  position: absolute;
  left: 14vw;
  bottom: 18vh;
  color: var(--bone);
  background: rgba(102, 122, 85, .6);
  padding: 1rem 1.4rem;
  transform: rotate(7deg);
  font-family: var(--title);
}

.cairn {
  right: 14vw;
  bottom: 14vh;
  width: 260px;
  height: 220px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cairn span {
  position: absolute;
  display: grid;
  place-items: center;
  color: rgba(20,23,47,.72);
  background: var(--ash);
  font: 700 .75rem/1 var(--declaration);
  box-shadow: inset 0 0 18px rgba(20,23,47,.24);
}
.cairn span:nth-child(1) { left: 80px; top: 8px; width: 88px; height: 56px; border-radius: 42% 58% 48% 52%; }
.cairn span:nth-child(2) { left: 45px; top: 58px; width: 124px; height: 66px; border-radius: 55% 45% 50% 50%; }
.cairn span:nth-child(3) { left: 105px; top: 112px; width: 118px; height: 70px; border-radius: 50% 45% 55% 48%; }
.cairn span:nth-child(4) { left: 14px; top: 128px; width: 128px; height: 76px; border-radius: 48% 52% 45% 55%; }
.cairn.read span { background: var(--bone); color: var(--clay); }

.dawn-scroll {
  width: min(760px, 90vw);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(circle at 50% 100%, rgba(242,184,75,.3), transparent 19rem),
    linear-gradient(180deg, rgba(247,232,200,.13), rgba(185,92,67,.12));
}

.person-outline {
  width: min(520px, 70vw);
  height: 460px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -42%);
  opacity: .23;
  z-index: -1;
}
.person-outline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6%;
  width: 105px;
  height: 105px;
  border: 4px solid var(--honey);
  border-radius: 50%;
  transform: translateX(-50%);
}
.person-outline i { position: absolute; background: var(--honey); border-radius: 999px; }
.person-outline i:nth-child(1) { left: 50%; top: 130px; width: 5px; height: 210px; transform: translateX(-50%) rotate(3deg); }
.person-outline i:nth-child(2) { left: 140px; top: 185px; width: 230px; height: 5px; transform: rotate(-11deg); }
.person-outline i:nth-child(3) { left: 210px; top: 320px; width: 150px; height: 5px; transform: rotate(48deg); }
.person-outline i:nth-child(4) { left: 168px; top: 320px; width: 150px; height: 5px; transform: rotate(-48deg); }

.phases { right: 8vw; top: 12vh; display: flex; gap: .9rem; opacity: .65; }
.phases span { width: 22px; height: 22px; border: 1px solid var(--bone); border-radius: 50%; }
.phases span:nth-child(2) { background: linear-gradient(90deg, var(--bone) 50%, transparent 51%); }
.phases span:nth-child(3) { background: var(--bone); }
.phases span:nth-child(4) { background: linear-gradient(270deg, var(--bone) 50%, transparent 51%); }

.waystation .parchment,
.waystation .dawn-scroll,
.artifact,
.artifact-fire,
.thread-line,
.coat-note,
.cairn,
.person-outline {
  transition: transform 1.1s ease, opacity 1.1s ease;
}

.waystation:not(.seen) .parchment,
.waystation:not(.seen) .dawn-scroll {
  opacity: .15;
  transform: translateY(30px) rotate(0deg);
}

@keyframes breathe {
  0%, 100% { transform: scale(.82); box-shadow: 0 0 16px 5px rgba(242,184,75,.28); }
  50% { transform: scale(1.12); box-shadow: 0 0 34px 13px rgba(242,184,75,.54); }
}

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

@keyframes printIn {
  to { opacity: .88; transform: translateY(0) rotate(var(--r, 7deg)); }
}

@keyframes flame {
  from { transform: rotate(40deg) scale(.92); }
  to { transform: rotate(49deg) scale(1.08); }
}

@media (max-width: 760px) {
  .waystation { padding: 6rem 1rem; align-items: flex-start; }
  .offset-left, .offset-right, .homeward-dawn { justify-content: center; }
  .station-marker { writing-mode: horizontal-tb; top: 2rem; left: 1rem; right: auto; }
  .offset-right .station-marker { left: 1rem; right: auto; }
  .artifact, .artifact-fire, .thread-line, .cairn, .coat-note, .reeds { opacity: .42; transform: scale(.72); }
  .trail-toggle { right: 1rem; bottom: 1rem; }
}