/* Isekai to Midgard: page styles on top of the scrollcraft floor.
   Brand tokens v1.1: paper ground, river ink, ink text, gold only as light. */
@font-face { font-family: "Fraunces"; src: url("assets/fonts/Fraunces.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("assets/fonts/Nunito.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("assets/fonts/Caveat.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
[hidden] { display: none !important; }   /* data-driven blocks (devlog, Discord) stay out until data.js fills them */

:root {
  --paper: #F1EBD6; --deep: #E7DCC0; --river: #475F5A; --gold: #E8B860;
  --ink: #2D2C2E; --sage: #9BB0A3; --night: #22302D;
  --sc-canvas: var(--paper); --sc-surface: var(--deep);
  --sc-ink: var(--ink); --sc-ink-soft: #4B4A4C;
  --sc-accent: var(--river); --sc-accent-ink: var(--paper);
  --sc-font-display: "Fraunces", Georgia, serif;
  --sc-font-text: "Nunito", system-ui, sans-serif;
  --sc-shadow-color: 40 30% 20%;
  --rail: 76px;
  --dw: min(34vw, 560px);
}
@media (max-width: 899px) { :root { --rail: 0px; --dw: 84vw; } }

body { background: var(--paper); }
.sc-grain { opacity: .06; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--river); color: var(--paper); padding: .6rem 1rem; border-radius: 8px; }
.skip:focus { left: 1rem; top: 1rem; }

/* --- type ------------------------------------------------------------- */
.display { font-family: var(--sc-font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; color: var(--river); letter-spacing: -0.015em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1.display { font-size: clamp(3rem, 1.6rem + 4.6vw, 6.4rem); }
.display--xl { font-size: clamp(2.8rem, 1.5rem + 4.4vw, 6rem); }
.display--lg { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.9rem); }
.display--md { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); line-height: 1.12; }
.h3 { font-family: var(--sc-font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.6rem); color: var(--river); margin: 0 0 .5rem; line-height: 1.15; }
.lede { font-size: clamp(1.12rem, 1rem + .45vw, 1.42rem); line-height: 1.5; color: var(--ink); margin: 1.1rem 0 0; max-width: 34ch; text-wrap: pretty; }
.body { color: var(--sc-ink-soft); max-width: 60ch; margin: 1rem 0 0; text-wrap: pretty; }
.meta { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--river); margin: 0 0 .35rem; }
.note { font-family: "Caveat", cursive; font-weight: 600; font-size: clamp(1.6rem, 1.3rem + .8vw, 2.1rem); color: var(--river); line-height: 1.1; margin: 0; }
.wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: calc(var(--rail) + clamp(1.25rem, 4vw, 4rem)) clamp(1.25rem, 4vw, 4rem); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1.6rem; border-radius: 999px; background: var(--river); color: var(--paper); font-weight: 800; text-decoration: none; border: 0; cursor: pointer; letter-spacing: .01em; box-shadow: 0 2px 0 rgba(45,44,46,.18), 0 10px 22px -12px rgba(45,44,46,.45); transition: transform 180ms var(--sc-ease-out), background 180ms; }
.btn:hover { transform: translateY(-1px); background: #3d524e; }
.btn:active { transform: translateY(1px); }
/* secondary path: a dotted trail, same as the top bar link (one button per layout, identity system v1.1) */
.dotlink { font-weight: 800; color: var(--river); text-decoration: none; border-bottom: 2px dotted var(--river); padding: .2rem 0; white-space: nowrap; }
.dotlink:hover, .dotlink:focus-visible { border-bottom-style: solid; }
.book__alt { margin: .3rem 0 0; font-size: 1rem; color: var(--ink); }
.book__msg:empty { min-height: 0; margin: 0; }
.btn[aria-disabled="true"] { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px rgba(241,235,214,.5); cursor: default; transform: none; }

/* --- header ----------------------------------------------------------- */
.bar { position: absolute; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: clamp(1rem, 2.4vw, 1.8rem) clamp(1.25rem, 4vw, 4rem) 0 calc(var(--rail) + clamp(1.25rem, 4vw, 4rem)); }
.bar__mark img { height: clamp(38px, 3.4vw, 52px); width: auto; }
.bar__cta { font-weight: 800; color: var(--river); text-decoration: none; border-bottom: 2px dotted var(--river); padding: .4rem 0; }
.bar__nav { display: flex; gap: clamp(.9rem, 1.5vw, 1.5rem); margin-left: auto; margin-right: clamp(1.2rem, 2vw, 2rem); }
.bar__nav a { font-weight: 700; font-size: .95rem; color: var(--river); text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.bar__nav a:hover { border-bottom-color: rgba(71,95,90,.35); }
.bar__menu { display: none; position: relative; }
.bar__menu summary { list-style: none; cursor: pointer; font-weight: 800; color: var(--river); padding: .4rem .95rem; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--river); background: color-mix(in oklab, var(--paper) 85%, transparent); }
.bar__menu summary::-webkit-details-marker { display: none; }
.bar__panel { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 14rem; background: var(--paper); border-radius: 14px; padding: .6rem 1.2rem; display: grid; box-shadow: 0 2px 4px rgba(45,44,46,.12), 0 20px 34px -18px rgba(45,44,46,.55); }
.bar__panel a { font-family: var(--sc-font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 1.3rem; color: var(--river); text-decoration: none; padding: .45rem 0; border-bottom: 1px dashed rgba(71,95,90,.25); }
.bar__panel a:last-child { border-bottom: 0; }
@media (max-width: 1099px) { .bar__nav { display: none; } .bar__menu { display: block; margin-left: auto; } .bar__cta { display: none; } }

/* --- signature: the margin path --------------------------------------- */
.path { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: var(--rail); pointer-events: none; }
.path::before { content: ""; position: absolute; left: 50%; top: 14vh; bottom: 10vh; width: 4px; translate: -50% 0;
  background: radial-gradient(circle, var(--river) 1.6px, transparent 2px) 0 0 / 4px 12px repeat-y; opacity: .55; }
.path__stops { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 14vh; bottom: 10vh; display: flex; flex-direction: column; justify-content: space-between; }
.path__stops li { display: flex; justify-content: center; }
.path__stops a { pointer-events: auto; position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; text-decoration: none; }
.path__stops a::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--river); background: var(--paper); transition: background 300ms, border-color 300ms, box-shadow 300ms; }
.path__stops a.is-lit::before { background: var(--gold); border-color: var(--river); box-shadow: 0 0 0 5px rgba(232,184,96,.25), 0 0 18px 4px rgba(232,184,96,.45); }
.path__stops a span { position: absolute; left: 40px; white-space: nowrap; font-size: .82rem; font-weight: 800; letter-spacing: .02em; color: var(--river); background: var(--paper); padding: .2rem .55rem; border-radius: 6px; box-shadow: 0 1px 2px rgba(45,44,46,.15), 0 6px 14px -8px rgba(45,44,46,.35); opacity: 0; translate: -4px 0; transition: opacity 200ms, translate 200ms var(--sc-ease-out); pointer-events: none; }
.path__stops a:hover span, .path__stops a:focus-visible span { opacity: 1; translate: 0 0; }
.path__light { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle, #fff6e0 0 30%, var(--gold) 55%, rgba(232,184,96,0) 72%); box-shadow: 0 0 22px 10px rgba(232,184,96,.45); opacity: 0; transition: opacity 400ms; will-change: transform; }
body.is-lit .path__light { opacity: 1; }
.carried { position: fixed; z-index: 55; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff6e0 0 28%, var(--gold) 52%, rgba(232,184,96,0) 72%); box-shadow: 0 0 30px 14px rgba(232,184,96,.5); opacity: 0; will-change: transform, opacity; }

@media (max-width: 899px) {
  .path { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 44px; background: color-mix(in oklab, var(--paper) 92%, transparent); box-shadow: 0 -1px 0 rgba(71,95,90,.18); }
  .path::before { left: 22px; right: 22px; top: 50%; bottom: auto; width: auto; height: 4px; translate: 0 -50%; background: radial-gradient(circle, var(--river) 1.6px, transparent 2px) 0 0 / 12px 4px repeat-x; }
  .path__stops { top: 0; bottom: 0; left: 6px; right: 6px; flex-direction: row; align-items: center; }
  .path__stops a span { display: none; }
  body { padding-bottom: 44px; }
}

/* --- 1 · the door ----------------------------------------------------- */
.door-act__stage { background: var(--paper); overflow: hidden; --dp: max(0, (var(--sc-p, 0) - 0.12) / 0.88); }
.door { position: absolute; z-index: 2; right: 7vw; top: 11vh; width: var(--dw); height: 80vh; overflow: hidden;
  border-radius: calc(var(--dw) / 2) calc(var(--dw) / 2) 16px 16px / calc(var(--dw) / 2) calc(var(--dw) / 2) 16px 16px;
  transform-origin: 50% 60%;
  transform: translateX(calc(var(--dp) * (-50vw + 7vw + var(--dw) / 2))) scale(calc(1 + var(--dp) * 3.2));
  background: #f6eedb; box-shadow: 0 2px 0 rgba(45,44,46,.06), 0 24px 60px -30px rgba(45,44,46,.45); }
.door::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--river); border-radius: inherit; opacity: calc(1 - var(--dp) * 2.6); pointer-events: none; }
.door img { position: absolute; max-width: none; width: 100%; height: 100%; object-fit: cover; }
.door__sky { object-position: 64% 40%; transform-origin: 60% 50%; transform: scale(calc(1.06 - var(--sc-p, 0) * .12)) translateY(calc(var(--sc-p, 0) * 4%)); }
.door__town { object-position: 74% 62%; transform-origin: 66% 66%; transform: scale(calc(1 + var(--sc-p, 0) * .22)) translateY(calc(var(--sc-p, 0) * -3%)); }
.door__mist { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 28% at 30% 96%, rgba(246,240,224,.92), transparent 70%), radial-gradient(50% 22% at 80% 100%, rgba(246,240,224,.8), transparent 70%);
  transform: translateY(calc(var(--sc-p, 0) * -18%)); opacity: calc(.95 - var(--sc-p, 0) * .4); }
.door__motes i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 10px 4px rgba(232,184,96,.55); animation: mote 7s ease-in-out infinite; opacity: .0; }
.door__motes i:nth-child(1) { left: 58%; top: 52%; animation-delay: 0s; }
.door__motes i:nth-child(2) { left: 70%; top: 46%; animation-delay: 1.4s; }
.door__motes i:nth-child(3) { left: 46%; top: 60%; animation-delay: 2.8s; }
.door__motes i:nth-child(4) { left: 82%; top: 58%; animation-delay: 4.2s; }
.door__motes i:nth-child(5) { left: 64%; top: 66%; animation-delay: 5.6s; }
@keyframes mote { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-60px); } }
.door-act__kohaku { position: absolute; z-index: 3; max-width: none; height: 46vh; width: auto; bottom: 7vh; right: calc(7vw + var(--dw) - 3vw);
  transform: translateX(calc(var(--sc-p, 0) * -24vw)); opacity: calc(1 - var(--sc-p, 0) * 3.4); filter: drop-shadow(0 10px 14px rgba(45,44,46,.18)); }
.door-act__copy { position: absolute; z-index: 4; left: calc(var(--rail) + clamp(1.25rem, 4vw, 4rem)); top: 52%; translate: 0 -50%; max-width: min(36vw, 34rem); }
.door-act__copy .actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 2rem 0 0; }
.door-act__beat { position: absolute; z-index: 4; left: 50%; top: 46%; translate: -50% -50%; text-align: center; width: max-content; max-width: 86vw; padding: 1.4rem 2.4rem;
  background: rgba(246,240,224,.96); border-radius: 48px; box-shadow: 0 0 40px 34px rgba(246,240,224,.9); }
.door-act__beat .display { color: var(--ink); }
.door-act__fade { position: absolute; z-index: 5; inset: auto 0 0 0; height: 42vh; background: linear-gradient(rgba(241,235,214,0), var(--paper) 85%); opacity: calc((var(--sc-p, 0) - .9) * 10); pointer-events: none; }

@media (max-width: 899px) {
  .door { right: auto; left: 8vw; top: 11svh; height: 50svh; transform: scale(calc(1 + var(--dp) * 2.6)); }
  .door-act__kohaku { height: 21svh; right: auto; left: 4vw; bottom: auto; top: calc(11svh + 50svh - 19svh); transform: translateX(calc(var(--sc-p, 0) * -30vw)); }
  .door-act__copy { left: 8vw; right: 8vw; top: auto; bottom: 7svh; translate: none; max-width: none; }
  .door-act__copy .lede { max-width: none; font-size: 1.05rem; margin-top: .6rem; }
  .door-act__copy .actions { margin-top: 1rem; }
  .door-act__copy .note { font-size: 1.5rem; }
  h1.display { font-size: clamp(2.5rem, 10.5vw, 3.4rem); }
  .bar__cta { display: none; }
}

/* --- 2 · memory ------------------------------------------------------- */
.memory { padding: clamp(4rem, 10vh, 8rem) 0 38vh; }
.memory__lines { padding-inline: calc(var(--rail) + clamp(1.25rem, 6vw, 7rem)) clamp(1.25rem, 6vw, 7rem); max-width: 86rem; margin-inline: auto; }
.memory__line { font-family: var(--sc-font-display); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 48; font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3.2rem); line-height: 1.2; color: var(--ink); margin: 0; max-width: 22ch; }
.memory__line + .memory__line { margin-top: clamp(1.6rem, 4vh, 3rem); }
.memory__line--2 { margin-left: 8vw; }
.memory__line--3 { margin-left: 16vw; }
.memory__line--4 { margin-left: 24vw; color: var(--river); font-weight: 600; }
@media (max-width: 899px) { .memory__line--2, .memory__line--3, .memory__line--4 { margin-left: 0; } }

/* --- 3 · the light (peak) --------------------------------------------- */
.light-act__stage { background: var(--paper); overflow: hidden; }
.light-act__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 60% at 72% 42%, rgba(232,184,96,.42), rgba(232,184,96,0) 70%); opacity: calc(var(--sc-p, 0) * 1.6); }
.light-act__mist { position: absolute; right: 2vw; bottom: 0; width: 46vw; height: 86vh; pointer-events: none; background: radial-gradient(closest-side, rgba(246,240,224,.95), rgba(246,240,224,0)); }
.light-act__kohaku { position: absolute; max-width: none; height: 58vh; width: auto; right: 10vw; bottom: 11vh; filter: drop-shadow(0 12px 16px rgba(45,44,46,.16)); }
.light-act__note { position: absolute; right: calc(10vw + 2rem); bottom: calc(11vh + 58vh + .5rem); }
.light-act__copy { position: absolute; left: calc(var(--rail) + clamp(1.25rem, 5vw, 5.5rem)); top: 50%; translate: 0 -50%; width: min(48vw, 40rem); display: grid; }
.light-act__copy > * { grid-area: 1 / 1; align-self: center; }
.light-act__copy .display--lg { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.8rem); }
.light-act__laws { font-weight: 800; color: var(--river); }
@media (max-width: 899px) {
  .light-act__kohaku { height: 34svh; right: 4vw; bottom: auto; top: 9svh; }
  .light-act__mist { width: 90vw; height: 50svh; top: 0; bottom: auto; }
  .light-act__note { right: auto; left: 8vw; bottom: auto; top: 12svh; }
  .light-act__copy { left: 8vw; right: 8vw; width: auto; top: auto; bottom: 12svh; translate: none; }
}

/* --- 4 · your hands --------------------------------------------------- */
.hands { padding-top: clamp(3rem, 6vw, 6rem); }
.hands__head { max-width: 46rem; }
.legend { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .9rem; font-weight: 700; color: var(--river); }
.legend li { display: flex; align-items: center; gap: .5rem; }
.mark { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--river); flex: none; vertical-align: -1px; margin-right: .35rem; }
.legend .mark { margin-right: 0; }
.mark--built { background: var(--river); }
.mark--building { background: linear-gradient(90deg, var(--river) 50%, transparent 50%); }
.mark--road { background: transparent; border-style: dotted; }
.hands__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.group { border-top: 2px solid var(--river); padding-top: 1rem; }
.group ul { list-style: none; padding: 0; margin: .4rem 0 0; }
.group li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; padding: .55rem 0; border-bottom: 1px dashed rgba(71,95,90,.28); font-size: .98rem; line-height: 1.45; color: var(--ink); }
.group li .mark { margin-top: .32rem; margin-right: 0; }
.hands__proof { margin-top: clamp(3.5rem, 7vw, 6rem); max-width: 50rem; padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 3px solid var(--river); }
.hands__proof .display { color: var(--ink); }
.hands__log { margin-top: clamp(3rem, 6vw, 5rem); }
.log { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); }
.log__card { display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden; background: var(--deep); color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(45,44,46,.12), 0 12px 26px -18px rgba(45,44,46,.55); transition: transform 220ms var(--sc-ease-out), box-shadow 220ms; }
.log__card:hover, .log__card:focus-visible { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(45,44,46,.14), 0 18px 32px -16px rgba(45,44,46,.6), 0 0 0 3px rgba(232,184,96,.55); }
.log__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--night); }
.log__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--sc-ease-out), filter 400ms; }
.log__card:hover .log__thumb img { transform: scale(1.04); filter: saturate(1.08); }
.log__play { position: absolute; left: 50%; top: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; border-radius: 50%; background: var(--river); box-shadow: 0 0 0 3px rgba(241,235,214,.85), 0 8px 20px -6px rgba(0,0,0,.55); transition: background 220ms, box-shadow 220ms; }
.log__play::after { content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-left: 15px solid var(--paper); border-top: 9.5px solid transparent; border-bottom: 9.5px solid transparent; }
.log__card:hover .log__play { background: var(--gold); box-shadow: 0 0 0 3px rgba(241,235,214,.95), 0 0 26px 6px rgba(232,184,96,.55); }
.log__card:hover .log__play::after { border-left-color: var(--night); }
.log__text { display: block; padding: .8rem 1rem 1rem; }
.log__text .meta { display: block; margin-bottom: .25rem; }
.log__title { display: block; font-weight: 800; line-height: 1.3; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 1099px) { .hands__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hands__groups { grid-template-columns: 1fr; } }

/* --- 5 · the road so far (pan) ---------------------------------------- */
.sofar__stage { background: var(--deep); display: flex; align-items: center; overflow: hidden; }
.sofar__rail { display: flex; align-items: stretch; gap: clamp(1.2rem, 2.4vw, 2.2rem); padding-left: calc(var(--rail) + clamp(1.25rem, 4vw, 4rem)); padding-right: 8vw; position: relative; }
.sofar__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: radial-gradient(circle, var(--river) 1.6px, transparent 2px) 0 0 / 14px 4px repeat-x; opacity: .45; }
.sofar__lead { flex: none; width: min(30rem, 78vw); align-self: center; position: relative; background: var(--deep); padding-right: 1rem; }
.ver { flex: none; position: relative; width: clamp(16rem, 24vw, 21rem); background: var(--paper); border-radius: 16px; padding: 1.6rem 1.6rem 1.8rem; box-shadow: 0 1px 2px rgba(45,44,46,.12), 0 18px 32px -20px rgba(45,44,46,.4); display: flex; flex-direction: column; }
.ver__v { font-family: var(--sc-font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); color: var(--river); line-height: 1; }
.ver__when { margin: .6rem 0 .2rem; }
.ver ul { margin: .7rem 0 0; padding-left: 1.1rem; color: var(--sc-ink-soft); font-size: .96rem; }
.ver--next { background: transparent; box-shadow: inset 0 0 0 2px rgba(71,95,90,.45); }

/* --- 6 · still unmade ------------------------------------------------- */
.unmade { background: var(--paper); position: relative; }
.unmade__counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.count__n { font-family: var(--sc-font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96; font-size: clamp(3.4rem, 2rem + 4.4vw, 6.2rem); color: var(--river); line-height: .95; display: flex; align-items: baseline; gap: .4rem; }
.count__n small { font-size: .32em; font-family: var(--sc-font-text); font-weight: 800; letter-spacing: .02em; }
.count p { margin: .6rem 0 0; max-width: 22ch; color: var(--ink); font-weight: 600; }
.costs { margin: clamp(3rem, 6vw, 4.5rem) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; max-width: 60rem; }
.costs div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px dashed rgba(71,95,90,.3); }
.costs dt { font-weight: 800; color: var(--river); }
.costs dd { margin: 0; color: var(--ink); }
.unmade__note { margin-top: 2rem; }
@media (max-width: 899px) { .unmade__counts { grid-template-columns: 1fr; } .costs { grid-template-columns: 1fr; } .costs div { grid-template-columns: 8rem 1fr; } }

/* --- 7 · lantern oil (night) ------------------------------------------ */
.oil__stage { background: radial-gradient(70% 80% at 28% 55%, #2f423e, var(--night) 70%); color: var(--paper); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 4vw; padding: 0 clamp(1.25rem, 6vw, 6rem) 0 calc(var(--rail) + clamp(1.25rem, 4vw, 4rem)); }
.oil .display { color: var(--paper); }
.oil .lede { color: var(--paper); }
.oil .body { color: rgba(241,235,214,.82); }
.oil__rule b { color: var(--gold); }
.lamp { width: min(30vw, 22rem); height: auto; justify-self: center; overflow: visible; --oil: 0; --flame: 0; }
.lamp__halo { opacity: calc(.12 + var(--flame) * .8); transform-origin: 120px 200px; transform: scale(calc(.6 + var(--flame) * .5)); }
.lamp__oil { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--oil)); }
.lamp__flame, .lamp__core { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--flame)); }
.lamp__flame { animation: flicker 2.6s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: .86; } 70% { opacity: .95; } }
.oil__status { margin: 1.6rem 0 0; padding: 1.2rem 1.3rem; border-radius: 14px; background: rgba(241,235,214,.07); box-shadow: inset 0 0 0 1px rgba(241,235,214,.14); max-width: 36rem; }
.oil__status .state { font-family: "Caveat", cursive; font-weight: 600; font-size: 1.9rem; color: var(--gold); margin: 0 0 .3rem; line-height: 1.1; }
.oil__status p { margin: .3rem 0 0; color: rgba(241,235,214,.86); }
.oil__status .btn { margin-top: 1rem; }
.workshop { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .35rem; }
.workshop li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed rgba(241,235,214,.2); color: rgba(241,235,214,.86); }
.workshop b { color: var(--gold); white-space: nowrap; font-weight: 800; }
.oil__fine { font-size: .9rem; }
.oil__fine a { color: var(--gold); }
.oilbar { height: 12px; border-radius: 999px; background: rgba(241,235,214,.14); overflow: hidden; margin-top: .8rem; }
.oilbar i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
@media (max-width: 899px) {
  .oil__stage { grid-template-columns: 1fr; align-content: center; gap: 0; padding: 3svh 7vw 52px; }
  .lamp { position: absolute; right: 5vw; top: 4svh; width: 17vw; max-height: 15svh; }
  .oil__copy .display--lg { font-size: 2.1rem; }
  .oil__copy .lede { font-size: 1.02rem; max-width: 24ch; }
  .oil__copy .body, .oil__status p { font-size: .9rem; line-height: 1.5; }
  .oil__status .state { font-size: 1.5rem; }
  .oil__status .btn { margin-top: .6rem; min-height: 2.6rem; padding: .5rem 1.1rem; }
  .oil__copy .lede { margin-top: .5rem; }
  .oil__copy .body { font-size: .95rem; margin-top: .6rem; }
  .oil__status { padding: .9rem 1rem; margin-top: 1rem; }
}

/* --- 8 · waystones + wishing well ------------------------------------- */
.waystones { background: var(--paper); }
.waystones__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.stones { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; counter-reset: none; }
.stone { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1.2rem; padding: 1.4rem 0; border-top: 1px dashed rgba(71,95,90,.32); }
.stone__n { font-family: var(--sc-font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 2.2rem; color: var(--river); line-height: 1; text-align: center; padding-top: .2rem;
  width: 3.6rem; height: 4.2rem; border-radius: 1.8rem 1.8rem .5rem .5rem; background: var(--deep); display: grid; place-items: center; }
.stone .h3 { margin-bottom: .2rem; }
.stone p { margin: 0; color: var(--sc-ink-soft); }
.stone__bar { height: 10px; border-radius: 999px; background: var(--deep); margin-top: .9rem; overflow: hidden; }
.stone__bar i { display: block; height: 100%; width: 0; background: var(--gold); }
.stone__meta { margin-top: .5rem !important; font-size: .88rem; font-weight: 700; color: var(--river) !important; }
.well { position: sticky; top: 8vh; background: var(--deep); border-radius: 22px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.well__truth { color: var(--ink); font-weight: 600; }
.wishes { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.wishes li { padding: .7rem 0; border-top: 1px dashed rgba(71,95,90,.32); }
.wishes .empty { font-family: "Caveat", cursive; font-size: 1.6rem; color: var(--river); border: 0; }
.waystones .btn--light { margin-top: 1.4rem; }
@media (max-width: 899px) { .waystones__grid { grid-template-columns: 1fr; } .well { position: static; } }

/* --- 9 · the road ahead ----------------------------------------------- */
.ahead { background: var(--paper); padding-bottom: clamp(5rem, 10vw, 9rem); }
.road { position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.road__line { position: absolute; left: 0; right: 0; top: 10px; width: 100%; height: 40px; overflow: visible; }
.road__line path { fill: none; stroke: var(--river); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 14; vector-effect: non-scaling-stroke; }
.road__stops { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); position: relative; }
.road__dot { display: block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--river); background: var(--paper); margin: 19px 0 1.4rem; transition: background 400ms, box-shadow 400ms; }
.road__stop.is-here .road__dot { background: var(--gold); box-shadow: 0 0 0 7px rgba(232,184,96,.28), 0 0 24px 6px rgba(232,184,96,.5); }
.road__stop .body { margin-top: .5rem; }
@media (max-width: 899px) {
  .road__line { display: none; }
  .road__stops { grid-template-columns: 1fr; gap: 0; border-left: 4px dotted rgba(71,95,90,.5); margin-left: 9px; padding-left: 1.4rem; }
  .road__stop { position: relative; padding-bottom: 1.6rem; }
  .road__dot { position: absolute; left: calc(-1.4rem - 13px); top: 0; margin: 0; }
}

/* --- 10 · sign the book (close) --------------------------------------- */
.join__stage { background: radial-gradient(60% 70% at 78% 70%, rgba(232,184,96,.16), rgba(232,184,96,0) 70%), var(--paper); display: grid; grid-template-rows: 1fr auto; padding: 12vh clamp(1.25rem, 5vw, 5rem) 0 calc(var(--rail) + clamp(1.25rem, 4vw, 4rem)); }
.join__inner { position: relative; max-width: 44rem; align-self: center; }
.book { margin-top: 2rem; }
.book__label { display: block; font-weight: 800; color: var(--river); margin-bottom: .6rem; }
.book__line { display: flex; gap: .8rem; flex-wrap: wrap; align-items: stretch; }
.book input { flex: 1 1 16rem; min-height: 3rem; padding: .7rem 1rem; border: 0; border-bottom: 3px solid var(--river); background: rgba(231,220,192,.55); border-radius: 10px 10px 2px 2px; color: var(--ink); font-size: 1.1rem; }
.book input:focus { outline: 2px solid var(--river); outline-offset: 3px; }
.book__fine { font-size: .9rem; color: var(--sc-ink-soft); margin: .8rem 0 0; }
.book__msg { min-height: 1.6em; font-weight: 700; color: var(--river); margin: .6rem 0 0; }
.stamp { position: absolute; right: -2rem; top: -2.5rem; width: 9.5rem; height: 9.5rem; border-radius: 50%; border: 4px double var(--river); color: var(--river); display: grid; place-content: center; text-align: center; rotate: -12deg; scale: 1.6; opacity: 0; pointer-events: none;
  font-family: var(--sc-font-display); font-weight: 700; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 1.5rem; letter-spacing: .04em; text-transform: uppercase; background: radial-gradient(circle, rgba(232,184,96,.25), rgba(232,184,96,0) 70%); }
.stamp small { display: block; font-family: var(--sc-font-text); font-size: .72rem; letter-spacing: .12em; margin-top: .2rem; }
.stamp.is-down { opacity: .92; scale: 1; transition: scale 380ms cubic-bezier(.2, 1.6, .4, 1), opacity 200ms; }
.join__rest { position: absolute; right: clamp(1.25rem, 6vw, 7rem); bottom: 18vh; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.join__rest img { width: clamp(10rem, 16vw, 15rem); height: auto; max-width: none; }
.foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 0 1.8rem; border-top: 1px solid rgba(71,95,90,.2); font-size: .88rem; color: var(--sc-ink-soft); }
.foot p { margin: 0; }
.foot img { width: 28px; height: 28px; }
.foot__links { margin-left: auto !important; display: flex; gap: 1.2rem; }
.foot a { color: var(--river); font-weight: 700; }
@media (max-width: 899px) {
  .join__stage { padding: 9svh 7vw 44px; }
  .join__rest { right: 4vw; bottom: auto; top: 3svh; }
  .join__rest img { width: 6.5rem; }
  .join__rest .note { display: none; }
  .stamp { right: 0; top: auto; bottom: -1rem; width: 7.5rem; height: 7.5rem; font-size: 1.1rem; }
  .foot__links { margin-left: 0 !important; }
}

/* --- reduced motion: a complete static composition -------------------- */
@media (prefers-reduced-motion: reduce) {
  .door, .door img, .door__mist, .door-act__kohaku { transform: none !important; }
  .door-act__kohaku { opacity: 1 !important; }
  .door::after { opacity: 1 !important; }
  .door__motes, .lamp__flame { animation: none !important; }
  .door__motes { display: none; }
  .door-act__fade { opacity: 0 !important; }
  .carried { display: none; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.road__line { clip-path: inset(-20px calc((1 - var(--q, 1)) * 100%) -20px 0); }

/* the peak: a trail of light from Kohaku to the path, then the path wakes */
.trail { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 54; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 6px rgba(232,184,96,.85)); }
.trail circle { fill: #F6D99A; }
.path::after { content: ""; position: absolute; left: 50%; top: 14vh; width: 6px; height: 18vh; translate: -50% 0; border-radius: 6px; opacity: 0; pointer-events: none;
  background: linear-gradient(rgba(232,184,96,0), rgba(232,184,96,.95), rgba(232,184,96,0)); box-shadow: 0 0 18px 6px rgba(232,184,96,.35); }
body.just-lit .path::after { animation: wake 1.6s cubic-bezier(.3,.7,.2,1) 1; }
@keyframes wake { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(62vh); } }
@media (max-width: 899px) { .path::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .trail { display: none; } body.just-lit .path::after { animation: none; } }