:root {
  --snow: #F7F4EA;
  --shadow: #B9D3E6;
  --navy: #1C2A3A;
  --birch: #D9B982;
  --berry: #E84A5F;
  --moss: #6F8F72;
  --graphite: #4B5563;
  --glow: #FFD77A;
  --fraunces: Fraunces, Georgia, 'Times New Roman', serif;
  --nunito: 'Nunito Sans', Nunito, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', 'SFMono-Regular', Consolas, monospace;
  --hand: Gaegu, 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--navy);
  background: var(--snow);
  font-family: var(--nunito);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 18%, rgba(185, 211, 230, .5), transparent 28%),
    radial-gradient(circle at 84% 72%, rgba(255, 215, 122, .18), transparent 25%),
    linear-gradient(145deg, rgba(247,244,234,.95), rgba(185,211,230,.36));
  z-index: -3;
}

.snow-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(28,42,58,.08) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.3px);
  background-size: 31px 31px, 47px 47px;
  mix-blend-mode: multiply;
}

.trail-nav {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 10px;
}

.trail-nav a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--navy);
  text-decoration: none;
  font: 700 11px/1 var(--mono);
  border: 2px solid rgba(28,42,58,.25);
  background: rgba(247,244,234,.72);
  border-radius: 50% 48% 52% 44%;
  box-shadow: inset 0 -5px 0 rgba(185,211,230,.28), 0 8px 20px rgba(28,42,58,.08);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.trail-nav a:hover, .trail-nav a.active {
  transform: rotate(-8deg) scale(1.08);
  background: var(--glow);
  border-color: var(--berry);
}

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 90px);
  isolation: isolate;
}

.scene::after {
  content: attr(data-room);
  position: absolute;
  right: clamp(24px, 5vw, 80px);
  bottom: 24px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(75,85,99,.34);
}

.blue-hour-wash, .gust, .birch-shadow {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.blue-hour-wash {
  inset: -10%;
  background: radial-gradient(ellipse at 70% 25%, rgba(185,211,230,.78), transparent 43%);
  animation: breathe 8s ease-in-out infinite alternate;
}

.trail-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .48;
}

.trail-line path {
  fill: none;
  stroke: rgba(75,85,99,.22);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 3 25;
}

.pressed-title {
  position: absolute;
  left: clamp(64px, 10vw, 150px);
  bottom: 18vh;
  max-width: 720px;
  transform: rotate(-3deg);
}

.coordinate {
  margin: 0 0 12px;
  font: 700 11px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--graphite);
}

h1, h2 {
  font-family: var(--fraunces);
  letter-spacing: -.045em;
  margin: 0;
  color: var(--navy);
}

h1 {
  font-size: clamp(66px, 13vw, 190px);
  line-height: .78;
  text-shadow: 0 4px 0 rgba(185,211,230,.55), 0 -2px 0 rgba(255,255,255,.8);
  opacity: .82;
  filter: blur(.15px);
}

h2 { font-size: clamp(38px, 6vw, 82px); line-height: .9; }
p { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55; }

.half-pressed {
  display: inline-block;
  margin-top: 18px;
  color: var(--graphite);
  font: 800 13px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 2px dashed rgba(75,85,99,.22);
  padding: 10px 14px;
  border-radius: 14px;
}

.gaegu-note {
  font-family: var(--hand);
  color: var(--berry);
  transform: rotate(-4deg);
}

.invitation { position: absolute; left: 47vw; top: 32vh; max-width: 240px; }

.footprint-path { position: absolute; z-index: 5; }
.fresh-prints { left: 12vw; bottom: 9vh; width: 72vw; height: 72vh; }
.porch-prints { left: 42vw; top: 23vh; width: 48vw; height: 54vh; }
.birch-prints { left: 14vw; top: 42vh; width: 70vw; height: 40vh; }
.moon-prints { left: 10vw; top: 18vh; width: 82vw; height: 66vh; }

.print {
  position: absolute;
  width: 34px;
  height: 58px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: scale(.3) rotate(var(--r, -14deg));
  animation: stampIn .7s cubic-bezier(.2,1.3,.3,1) forwards;
  animation-delay: var(--d, .2s);
}

.print span, .print::before, .print::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(75,85,99,.42);
  box-shadow: inset 0 5px 10px rgba(28,42,58,.12), 0 2px 0 rgba(255,255,255,.55);
}

.print span { bottom: 0; width: 25px; height: 38px; border-radius: 46% 48% 58% 42%; }
.print::before { top: 7px; width: 11px; height: 11px; border-radius: 50%; }
.print::after { top: 0; width: 7px; height: 7px; border-radius: 50%; box-shadow: -9px 8px 0 rgba(75,85,99,.34), 9px 9px 0 rgba(75,85,99,.34); }
.print-right { --r: 16deg; }
.small { transform-origin: bottom; }
.turn { --r: 48deg; }
.icy span, .icy::before, .icy::after { background: rgba(28,42,58,.28); }

.fresh-prints .print:nth-child(1) { left: 0; bottom: 0; --d: .3s; }
.fresh-prints .print:nth-child(2) { left: 14%; bottom: 19%; --d: .75s; }
.fresh-prints .print:nth-child(3) { left: 27%; bottom: 33%; --d: 1.15s; }
.fresh-prints .print:nth-child(4) { left: 45%; bottom: 45%; --d: 1.55s; }
.fresh-prints .print:nth-child(5) { left: 64%; bottom: 61%; --d: 2s; }

.paw { width: 46px; height: 46px; }
.paw span { width: 18px; height: 18px; border-radius: 48% 52% 45% 55%; bottom: 4px; }
.paw::before { width: 10px; height: 10px; top: 3px; left: 34%; }
.paw::after { width: 10px; height: 10px; top: 6px; left: 67%; box-shadow: -17px 13px 0 rgba(75,85,99,.34), 0 13px 0 rgba(75,85,99,.34); }

.bootprint { width: 44px; height: 72px; }
.bootprint span { width: 34px; height: 58px; border-radius: 40% 40% 48% 48%; background: rgba(28,42,58,.36); }
.bootprint span::after { content:''; position:absolute; inset:8px 5px; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(247,244,234,.34) 7px 10px); border-radius: inherit; }
.heart span { width: 36px; height: 32px; background: var(--berry); transform: translateX(-50%) rotate(-45deg); bottom: 12px; border-radius: 8px; opacity: .55; }
.heart span::before, .heart span::after { content:''; position:absolute; width:36px; height:36px; background:inherit; border-radius:50%; }
.heart span::before { top:-18px; left:0; } .heart span::after { right:-18px; top:0; }
.heart::before, .heart::after { display:none; }

.artifact {
  position: absolute;
  max-width: 430px;
  padding: 28px;
  background: rgba(247,244,234,.78);
  border: 2px solid rgba(28,42,58,.16);
  box-shadow: 0 22px 50px rgba(28,42,58,.12), inset 0 -10px 0 rgba(185,211,230,.18);
  backdrop-filter: blur(3px);
}

.mitten-tag { left: 12vw; top: 17vh; border-radius: 48px 48px 52px 18px; transform: rotate(-4deg); }
.pin { position:absolute; top:18px; right:26px; width:16px; height:16px; background:var(--berry); border-radius:50%; box-shadow:0 0 0 5px rgba(232,74,95,.15); }
.porch-floor { position:absolute; left:0; right:0; bottom:0; height:36vh; background: linear-gradient(90deg, rgba(217,185,130,.65), rgba(217,185,130,.34)), repeating-linear-gradient(90deg, transparent 0 92px, rgba(28,42,58,.11) 92px 96px); transform: skewY(-4deg); transform-origin: bottom left; }
.shoe-row { position:absolute; right:13vw; bottom:20vh; display:flex; gap:24px; align-items:flex-end; transform: rotate(5deg); }
.boot { width:58px; height:88px; background:var(--navy); border-radius:28px 28px 12px 14px; position:relative; box-shadow: inset -10px 0 rgba(255,255,255,.08); }
.boot::after { content:''; position:absolute; left:-7px; bottom:-8px; width:78px; height:20px; background:var(--graphite); border-radius:12px 20px 10px 10px; }
.boot i { position:absolute; inset:12px; border:2px dashed var(--shadow); border-radius:20px; }
.boot-two { height:72px; background:var(--moss); }
.mitten { width:74px; height:82px; background:var(--berry); border-radius:42px 42px 34px 30px; position:relative; }
.mitten span { position:absolute; width:30px; height:40px; background:var(--berry); border-radius:22px; right:-16px; top:28px; transform:rotate(-28deg); }
.sled-grooves { position:absolute; left:5vw; right:4vw; bottom:13vh; height:70px; border-top:3px solid rgba(75,85,99,.16); border-bottom:3px solid rgba(75,85,99,.12); border-radius:50%; transform:rotate(-7deg); }

.porch-prints .print:nth-child(1){left:0;top:58%;--d:.2s}.porch-prints .print:nth-child(2){left:22%;top:43%;--d:.55s}.porch-prints .print:nth-child(3){left:48%;top:26%;--d:.9s}.porch-prints .print:nth-child(4){left:73%;top:4%;--d:1.25s}

.scene-birch { background: linear-gradient(180deg, rgba(185,211,230,.26), transparent 45%); }
.birch-shadow { left:-10%; top:15%; width:130%; height:18vh; background:rgba(28,42,58,.08); transform:rotate(-14deg); filter:blur(7px); animation: shadowPass 9s ease-in-out infinite alternate; }
.birch-post { position:absolute; width:46px; height:70vh; bottom:0; background:var(--birch); border-radius:24px 24px 0 0; box-shadow: inset 10px 0 rgba(255,255,255,.28); }
.birch-post span, .birch-post::before, .birch-post::after { content:''; position:absolute; width:22px; height:6px; background:var(--navy); border-radius:50%; transform:rotate(-18deg); opacity:.55; }
.birch-post span{top:18%;left:6px}.birch-post::before{top:38%;right:4px}.birch-post::after{top:58%;left:8px}.post-a{left:8vw}.post-b{right:19vw;height:82vh;opacity:.9}
.trail-marker { position:absolute; left:27vw; top:18vh; width:130px; height:130px; border:0; background:transparent; perspective:800px; cursor:pointer; }
.trail-marker span { position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; border:7px solid var(--snow); background:var(--berry); color:var(--snow); font:900 28px/1 var(--fraunces); box-shadow:0 15px 35px rgba(28,42,58,.16); backface-visibility:hidden; transition:transform .55s ease; }
.trail-marker em { font:700 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.marker-back { transform:rotateY(180deg); padding:20px; font:700 13px/1.25 var(--hand)!important; }
.trail-marker.flipped .marker-front { transform:rotateY(180deg); }
.trail-marker.flipped .marker-back { transform:rotateY(360deg); }
.map-square { right:10vw; top:28vh; border-radius: 8px; transform: rotate(3deg); background: rgba(247,244,234,.86); }
.map-folds { height:120px; margin-top:18px; background: linear-gradient(135deg, transparent 49%, rgba(75,85,99,.18) 50%, transparent 51%), linear-gradient(45deg, transparent 49%, rgba(185,211,230,.65) 50%, transparent 51%); border:1px solid rgba(28,42,58,.1); }
.rabbit-hop { position:absolute; left:38vw; bottom:18vh; display:flex; gap:16px; transform:rotate(-24deg); }
.rabbit-hop i { width:16px; height:28px; background:rgba(75,85,99,.28); border-radius:50%; transform:rotate(18deg); }
.birch-prints .print:nth-child(1){left:20%;top:40%;--d:.15s}.birch-prints .print:nth-child(2){left:45%;top:20%;--d:.55s}.birch-prints .print:nth-child(3){left:66%;top:8%;--d:.95s}

.scene-moonlit { background: radial-gradient(circle at 74% 16%, rgba(255,215,122,.24), transparent 18%), linear-gradient(180deg, rgba(28,42,58,.08), rgba(185,211,230,.25)); }
.moon { position:absolute; right:15vw; top:12vh; width:110px; height:110px; background:var(--glow); border-radius:50%; box-shadow:0 0 50px rgba(255,215,122,.58); }
.sled-plaque { left:14vw; top:22vh; border-radius:20px; transform:rotate(-2deg); border-color:rgba(28,42,58,.24); }
.frost-panel { position:absolute; right:12vw; bottom:18vh; width:330px; height:220px; border:2px solid rgba(185,211,230,.8); border-radius:28px; background:rgba(255,255,255,.16); box-shadow:inset 0 0 45px rgba(185,211,230,.45); }
.frost-panel span { position:absolute; width:46px; height:46px; color:var(--shadow); }
.frost-panel span::before { content:'✣'; font-size:42px; }
.frost-panel span:nth-child(1){left:20px;top:22px}.frost-panel span:nth-child(2){right:38px;top:50px}.frost-panel span:nth-child(3){left:130px;bottom:28px}.frost-panel span:nth-child(4){right:110px;bottom:82px}
.scarf-ribbon { position:absolute; left:58vw; top:42vh; width:120px; height:20px; background:var(--berry); border-radius:14px; transform:rotate(-25deg); box-shadow:18px 15px 0 -4px rgba(232,74,95,.75); }
.moon-prints .print:nth-child(1){left:8%;top:62%;--d:.2s}.moon-prints .print:nth-child(2){left:27%;top:49%;--d:.55s}.moon-prints .print:nth-child(3){left:52%;top:31%;--d:.9s}.moon-prints .print:nth-child(4){left:74%;top:19%;--d:1.25s}

.scene-window { background: radial-gradient(circle at 76% 41%, rgba(255,215,122,.55), transparent 22%), linear-gradient(180deg, rgba(185,211,230,.22), var(--snow)); }
.distant-house { position:absolute; right:11vw; top:20vh; width:250px; height:220px; filter:drop-shadow(0 26px 45px rgba(28,42,58,.14)); }
.roof { width:0; height:0; border-left:125px solid transparent; border-right:125px solid transparent; border-bottom:82px solid var(--navy); }
.wall { margin:0 auto; width:190px; height:130px; background:var(--birch); display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:32px; }
.wall span { background:var(--glow); box-shadow:0 0 35px var(--glow); border:4px solid rgba(28,42,58,.22); }
.field-notebook { position:absolute; left:12vw; bottom:13vh; max-width:520px; padding:34px; background:rgba(247,244,234,.9); border:2px solid rgba(28,42,58,.2); border-radius:26px 18px 30px 18px; box-shadow:0 24px 60px rgba(28,42,58,.14), inset 8px 0 0 rgba(217,185,130,.65); transform:rotate(-2deg); }
.stamp-button { margin-top:14px; border:2px solid var(--berry); background:transparent; color:var(--berry); border-radius:999px; padding:12px 18px; font:900 12px/1 var(--mono); text-transform:uppercase; letter-spacing:.12em; cursor:pointer; }
.stamp-result { margin-top:18px; display:inline-block; color:var(--berry); border:4px solid var(--berry); padding:12px 16px; font:900 18px/1 var(--fraunces); text-transform:lowercase; transform:rotate(-8deg) scale(.2); opacity:0; transition:.45s cubic-bezier(.2,1.3,.3,1); }
.field-notebook.stamped .stamp-result { opacity:.8; transform:rotate(-8deg) scale(1); }
.final-tracks { position:absolute; right:34vw; bottom:18vh; width:220px; height:260px; transform:rotate(28deg); }
.final-tracks span { position:absolute; width:28px; height:42px; background:rgba(75,85,99,.28); border-radius:45%; }
.final-tracks span:nth-child(1){left:20px;bottom:0}.final-tracks span:nth-child(2){left:78px;bottom:48px}.final-tracks span:nth-child(3){left:52px;bottom:104px}.final-tracks span:nth-child(4){left:112px;bottom:156px}.final-tracks span:nth-child(5){left:86px;bottom:212px}
.window-note { position:absolute; right:16vw; bottom:18vh; max-width:230px; }

.snow-crystal { position:absolute; color:rgba(185,211,230,.9); font-size:34px; transition:transform .6s ease; }
.c1{right:18vw;top:20vh}.c2{left:22vw;top:18vh}.c3{right:34vw;bottom:30vh}
.snow-crystal.drift { transform:translate(var(--dx, 18px), var(--dy, -12px)) rotate(35deg); }
.powder-puff { position:absolute; left:13vw; bottom:10vh; width:80px; height:36px; border-radius:50%; background:rgba(255,255,255,.75); filter:blur(7px); animation:puff 2.4s ease-in-out infinite; }
.cursor-powder { position:fixed; z-index:40; pointer-events:none; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.75); box-shadow:0 0 22px rgba(185,211,230,.7); opacity:0; transform:translate(-50%,-50%); transition:opacity .2s ease; }
.note-bubble { position:fixed; z-index:50; max-width:220px; padding:10px 13px; border:2px solid rgba(28,42,58,.18); border-radius:18px 18px 18px 4px; background:var(--glow); color:var(--navy); font:700 16px/1.25 var(--hand); box-shadow:0 14px 30px rgba(28,42,58,.14); opacity:0; transform:translate(12px, 12px) rotate(-3deg) scale(.9); pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.note-bubble.show { opacity:1; transform:translate(12px, 12px) rotate(-3deg) scale(1); }

@keyframes stampIn { 0%{opacity:0; transform:scale(1.8) rotate(var(--r, -14deg)); filter:blur(8px)} 65%{opacity:.82; transform:scale(.82) rotate(var(--r, -14deg)); filter:blur(0)} 100%{opacity:1; transform:scale(1) rotate(var(--r, -14deg));} }
@keyframes puff { 0%,100%{opacity:.15; transform:scale(.5)} 45%{opacity:.8; transform:scale(1.35) translate(28px,-14px)} }
@keyframes breathe { from{transform:translate3d(-1%,0,0)} to{transform:translate3d(2%,1%,0)} }
@keyframes shadowPass { from{transform:translateX(-3%) rotate(-14deg)} to{transform:translateX(4%) rotate(-14deg)} }

@media (max-width: 760px) {
  .trail-nav { left: 10px; gap: 6px; }
  .trail-nav a { width: 30px; height: 30px; font-size: 9px; }
  .scene { padding: 28px 24px 28px 54px; }
  .pressed-title { left: 58px; bottom: 20vh; }
  .artifact, .field-notebook { position: relative; left: auto; right: auto; top: auto; bottom: auto; max-width: none; margin-top: 12vh; }
  .shoe-row, .distant-house, .frost-panel { transform: scale(.72); right: -4vw; }
  .map-square { margin-left: 10vw; }
}