:root {
  --sky: #748895;
  --sky-deep: #425965;
  --mist: #f2f5ef;
  --paper: #e7ece7;
  --ink: #102a34;
  --muted: #4d626a;
  --crimson: #c6263f;
  --crimson-dark: #771425;
  --gold: #f0bf4f;
  --gold-deep: #a77817;
  --line: rgba(16, 42, 52, .2);
  --display: 'Shippori Mincho', serif;
  --body: 'Zen Kaku Gothic New', sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-cloth: cubic-bezier(.22, .82, .22, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: clip; scrollbar-color: var(--crimson) #d6dfda; scrollbar-width: thin; }
body { margin: 0; max-width: 100%; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--body); font-optical-sizing: auto; font-kerning: normal; text-rendering: optimizeLegibility; }
::selection { color: var(--mist); background: var(--crimson-dark); text-shadow: none; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #d6dfda; }
::-webkit-scrollbar-thumb { border: 2px solid #d6dfda; border-radius: 10px; background: linear-gradient(var(--crimson), var(--crimson-dark)); }
body::before { content: ''; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.1) 50%, transparent calc(50% + 1px)); }
.grain { position: fixed; inset: 0; z-index: 80; opacity: .17; pointer-events: none; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); }
a { color: inherit; }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); padding: 12px 18px; background: var(--mist); color: var(--ink); font-weight: 700; }
.skip-link:focus { transform: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 70; height: 72px; padding: 0 3vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--mist); border-bottom: 1px solid rgba(242,245,239,.26); transition: background .35s, color .35s, border-color .35s; animation: header-in .7s var(--ease-out) both; }
.site-header.scrolled { color: var(--ink); background: rgba(239,244,239,.91); border-color: var(--line); backdrop-filter: blur(18px) saturate(.8); }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 11px; justify-self: start; text-decoration: none; font-weight: 900; font-size: .85rem; letter-spacing: .16em; }
.brand svg { width: 33px; fill: var(--crimson); overflow: visible; }
.brand svg { transition: transform .5s var(--ease-cloth); }
.brand:hover svg, .brand:focus-visible svg { transform: translate(3px, -2px) rotate(-7deg); }
.brand svg path:last-child { fill: none; stroke: #fff1ec; stroke-width: 3; }
.site-header nav { display: flex; gap: clamp(20px, 3vw, 44px); }
.site-header nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; text-decoration: none; font-size: .7rem; font-weight: 700; letter-spacing: .13em; }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 7px; height: 2px; background: var(--crimson); transition: right .35s var(--ease-out); }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right: 0; }
.live-leg { justify-self: end; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.live-leg span, .live-leg small { font-size: .53rem; font-weight: 700; letter-spacing: .18em; }
.live-leg strong { font-family: var(--display); font-size: 1.35rem; font-weight: 600; }
.live-leg i { width: 32px; height: 1px; background: currentColor; opacity: .55; }
.live-leg b { min-width: 41px; font-size: .67rem; }

main { position: relative; isolation: isolate; overflow: clip; }
.page-tasuki { position: absolute; inset: 0; z-index: 14; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.page-tasuki path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thread-shadow { stroke: rgba(35, 23, 27, .22); stroke-width: 29; filter: blur(2px); }
.thread-base { stroke: #8da0a4; stroke-width: 18; opacity: .6; }
.thread-live { stroke: var(--crimson); stroke-width: 18; filter: drop-shadow(0 5px 4px rgba(75,12,27,.28)); }
.tassel-halo { fill: rgba(240,191,79,.18); stroke: var(--gold); stroke-width: 1; }
.tassel { fill: var(--gold); stroke: var(--crimson-dark); stroke-width: 4; filter: drop-shadow(0 3px 6px rgba(16,42,52,.48)); }
.page-anchor { position: absolute; width: 10px; height: 10px; pointer-events: none; }

.hero { position: relative; height: 100svh; min-height: 720px; overflow: hidden; isolation: isolate; color: var(--mist); background: linear-gradient(180deg, #607683 0%, #899ba2 41%, #bdc7c2 71.8%, #405762 72%); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 69% 30%, rgba(244,208,110,.25), transparent 24%), linear-gradient(105deg, rgba(18,40,50,.61), rgba(18,40,50,.06) 57%, rgba(246,236,207,.08)); }
.hero::after { content: ''; position: absolute; inset: auto -8% 17% 40%; height: 19%; z-index: 0; transform: rotate(-7deg); background: linear-gradient(90deg, transparent, rgba(242,245,239,.35), transparent); filter: blur(24px); opacity: .55; animation: mist-drift 12s ease-in-out infinite alternate; }
.hero-grid { position: absolute; inset: 0; z-index: 0; opacity: .14; background: repeating-linear-gradient(90deg, transparent 0 calc(10vw - 1px), rgba(255,255,255,.55) calc(10vw - 1px) 10vw); }
.hero-kanji { position: absolute; right: -1vw; top: 4%; z-index: 0; font-family: var(--display); font-size: min(39vw, 560px); line-height: 1; color: rgba(242,245,239,.035); }
.sun { position: absolute; left: 59%; top: 13%; z-index: 0; width: min(24vw, 330px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #ffe18a, #efbd4c 63%, #cf9426); box-shadow: 0 0 80px rgba(242,193,76,.25), 0 0 180px rgba(244,209,121,.14); animation: sun-in 1.25s .1s var(--ease-out) both; }
.mountains { position: absolute; inset: auto 0 0; z-index: 0; height: 69%; }
.mountains svg { width: 100%; height: 100%; }
.ridge.far { fill: #748994; opacity: .72; }
.ridge.near { fill: #2e4a57; }
.road { fill: #75868a; }
.road-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 16 19; animation: road-run 3.2s linear infinite; }
.hero-copy { position: absolute; left: 8vw; top: 19%; z-index: 4; width: min(54vw, 760px); }
.kicker, .section-mark { margin: 0 0 22px; font-size: .63rem; text-transform: uppercase; letter-spacing: .25em; font-weight: 700; }
.kicker span { margin-right: 18px; font-family: var(--display); font-size: .9rem; }
.hero h1 { margin: 0; font-family: var(--display); font-size: clamp(5rem, 10.2vw, 9.7rem); font-weight: 500; letter-spacing: -.077em; line-height: .78; text-wrap: balance; }
.hero h1 em { color: var(--gold); font-weight: 400; }
.hero-copy > p:not(.kicker) { max-width: 500px; margin: 40px 0 34px; font-family: var(--display); font-size: clamp(1rem, 1.35vw, 1.26rem); line-height: 1.85; }
.course-entry { min-height: 46px; display: inline-flex; align-items: center; gap: 34px; border-bottom: 1px solid rgba(242,245,239,.7); text-decoration: none; font-size: .69rem; font-weight: 700; letter-spacing: .13em; }
.course-entry svg { width: 45px; fill: none; stroke: currentColor; transition: transform .35s var(--ease-out); }
.course-entry:hover svg, .course-entry:focus-visible svg { transform: translateX(10px); }
.hero-copy > * { animation: copy-in .8s var(--ease-out) both; }
.hero-copy > *:nth-child(1) { animation-delay: .14s; }
.hero-copy > *:nth-child(2) { animation-delay: .24s; }
.hero-copy > *:nth-child(3) { animation-delay: .38s; }
.hero-copy > *:nth-child(4) { animation-delay: .5s; }
.hero-runner { position: absolute; right: 9vw; bottom: 3vh; z-index: 5; width: 350px; height: 530px; transform: rotate(-5deg); filter: drop-shadow(0 30px 28px rgba(11,33,42,.35)); animation: runner-in 1s .35s var(--ease-out) both; }
.runner-head, .runner-body, .runner-arm, .runner-leg { position: absolute; background: #102d38; }
.runner-head { left: 147px; top: 0; width: 75px; height: 82px; border-radius: 48% 52% 45% 55%; }
.runner-body { left: 115px; top: 73px; width: 122px; height: 215px; border-radius: 42% 45% 22% 28%; transform: rotate(-9deg); }
.runner-arm { height: 43px; border-radius: 30px; transform-origin: 20px center; }
.runner-arm.a { left: 148px; top: 112px; width: 210px; transform: rotate(27deg); }
.runner-arm.b { left: 19px; top: 142px; width: 183px; transform: rotate(-20deg); }
.runner-leg { top: 265px; height: 58px; border-radius: 30px; transform-origin: 30px center; }
.runner-leg.a { left: 130px; width: 290px; transform: rotate(-51deg); }
.runner-leg.b { left: -83px; width: 270px; transform: rotate(57deg); }
.hero-sash { position: absolute; left: 157px; top: 71px; z-index: 3; width: 29px; height: 280px; transform: rotate(-31deg); background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), linear-gradient(90deg, #aa1d32, #df344d 50%, #9f172d); box-shadow: inset 4px 0 rgba(255,255,255,.18), 7px 8px 12px rgba(44,10,17,.18); }
.hero-sash::after { content: '青陵'; margin: 28px 3px; color: #ffebe7; font-family: var(--display); font-size: .83rem; letter-spacing: .22em; writing-mode: vertical-rl; }
.hero-sash-anchor { left: 250px; top: 255px; }
.start-data { position: absolute; right: 3vw; bottom: 3vh; z-index: 6; display: grid; grid-template-columns: repeat(3, auto); gap: 18px; align-items: center; font-size: .59rem; text-transform: uppercase; letter-spacing: .2em; }
.start-data strong { font-family: var(--display); font-size: 1.5rem; }
.breath { position: absolute; z-index: 4; width: 160px; height: 70px; border-radius: 50%; border-top: 2px solid rgba(242,245,239,.4); filter: blur(3px); animation: breathe 4.4s ease-out infinite; }
.breath-one { right: 27vw; top: 31%; }
.breath-two { right: 24vw; top: 26%; animation-delay: 1.2s; }

.course-intro { position: relative; min-height: 680px; padding: 150px 8vw 120px; display: grid; grid-template-columns: 70px minmax(320px, 1.35fr) minmax(260px, .65fr); gap: 6vw; align-items: center; background: var(--mist); }
.vertical-jp { align-self: start; margin-top: 24px; color: var(--muted); font-family: var(--display); font-size: .8rem; letter-spacing: .35em; writing-mode: vertical-rl; }
.course-intro h2, .pace-heading h2, .lore h2, .finish h2 { margin: 0; font-family: var(--display); font-size: clamp(3.5rem, 6.4vw, 6.9rem); font-weight: 500; letter-spacing: -.065em; line-height: 1.01; }
.course-intro > p:not(.vertical-jp) { max-width: 440px; align-self: end; margin: 0 0 50px; font-family: var(--display); font-size: 1.25rem; line-height: 1.9; }
.route-key { position: absolute; left: calc(8vw + 70px + 6vw); right: 8vw; bottom: 70px; display: flex; gap: 32px; padding-top: 17px; border-top: 1px solid var(--line); font-size: .59rem; text-transform: uppercase; letter-spacing: .17em; }
.route-key span { display: flex; align-items: center; gap: 8px; }
.route-key i { width: 30px; height: 3px; background: var(--crimson); }
.route-key span:nth-child(2) i { background: var(--sky); }
.route-key b { margin-left: auto; }
.route-stamp { position: absolute; right: 6vw; top: 85px; display: grid; grid-template-columns: auto auto; transform: rotate(4deg); border: 1px solid rgba(198,38,63,.28); color: var(--crimson); opacity: .8; }
.route-stamp span, .route-stamp i { padding: 7px 9px; border: 1px solid rgba(198,38,63,.16); font-size: .54rem; font-style: normal; letter-spacing: .14em; }

.course { position: relative; padding: 60px 0 90px; background: linear-gradient(90deg, #d8e1dd, #f2f4ef 48%, #d7e0dc); }
.course::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(16,42,52,.11); }
.legs { list-style: none; margin: 0; padding: 0; }
.leg { --runner-x: 64%; --pose: 0deg; position: relative; height: 730px; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 8vw; }
.leg:nth-child(even) { --runner-x: 36%; --pose: 2deg; }
.leg::before { content: attr(data-place); position: absolute; left: 5vw; right: 5vw; top: 54px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: .56rem; font-weight: 700; letter-spacing: .19em; }
.leg::after { content: attr(data-weather); position: absolute; right: 5vw; top: 68px; color: var(--muted); font-size: .5rem; letter-spacing: .17em; }
.leg:nth-child(odd) .checkpoint-copy { grid-column: 1; padding-right: 7vw; }
.leg:nth-child(even) .checkpoint-copy { grid-column: 2; padding-left: 7vw; }
.checkpoint-copy { position: relative; z-index: 10; display: grid; grid-template-columns: 94px 1fr; align-items: start; }
.leg-index { color: rgba(16,42,52,.11); font-family: var(--display); font-size: clamp(4rem, 7vw, 8rem); line-height: .8; letter-spacing: -.08em; }
.checkpoint-copy h3 { margin: 6px 0 20px; font-family: var(--display); font-size: clamp(2.5rem, 4.2vw, 4.8rem); font-weight: 500; letter-spacing: -.058em; line-height: .98; text-wrap: balance; }
.checkpoint-copy p { max-width: 430px; margin: 0; font-family: var(--display); font-size: 1.03rem; line-height: 1.82; }
.checkpoint-copy dl { display: flex; gap: 42px; margin: 32px 0 0; padding-top: 15px; border-top: 1px solid var(--line); }
.checkpoint-copy dl div { display: flex; align-items: baseline; gap: 12px; }
.checkpoint-copy dt { font-size: .56rem; text-transform: uppercase; letter-spacing: .17em; }
.checkpoint-copy dd { margin: 0; font-family: var(--display); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.runner-figure { position: absolute; left: calc(var(--runner-x) - 90px); top: 215px; z-index: 16; width: 180px; height: 270px; filter: drop-shadow(0 20px 15px rgba(26,47,54,.2)); transform: rotate(var(--pose)); transform-origin: 50% 65%; transition: transform .7s var(--ease-out), filter .7s; }
.leg.is-current .runner-figure { transform: translateY(-10px) rotate(calc(var(--pose) - 4deg)) scale(1.04); filter: drop-shadow(0 28px 19px rgba(26,47,54,.3)); }
.runner-figure .head { position: absolute; left: 74px; top: 4px; width: 42px; height: 46px; border-radius: 49% 51% 46% 54%; background: var(--ink); }
.runner-figure .torso { position: absolute; left: 58px; top: 46px; width: 69px; height: 120px; border-radius: 35% 38% 18% 22%; background: var(--ink); transform: rotate(-7deg); }
.runner-figure .arm, .runner-figure .leg-shape { position: absolute; height: 25px; border-radius: 20px; background: var(--ink); transform-origin: 13px center; }
.runner-figure .arm.front { left: 87px; top: 69px; width: 105px; transform: rotate(25deg); }
.runner-figure .arm.back { left: 6px; top: 80px; width: 100px; transform: rotate(-25deg); }
.runner-figure .leg-shape { top: 153px; height: 31px; }
.runner-figure .leg-shape.front { left: 77px; width: 145px; transform: rotate(-52deg); }
.runner-figure .leg-shape.back { left: -37px; width: 137px; transform: rotate(55deg); }
.runner-figure .bib { position: absolute; left: 74px; top: 74px; z-index: 3; padding: 5px 8px; color: var(--ink); background: #f1f2e9; font-family: var(--display); font-size: .58rem; font-style: normal; line-height: 1.1; text-align: center; }
.runner-figure::after { content: ''; position: absolute; left: 91px; top: 39px; z-index: 2; width: 13px; height: 126px; transform: rotate(-29deg); transform-origin: center; background: #8fa1a4; box-shadow: inset 2px 0 rgba(255,255,255,.25); transition: background .42s var(--ease-cloth), box-shadow .42s var(--ease-cloth); }
.leg.active .runner-figure::after { background: linear-gradient(90deg, #9f192d, var(--crimson) 55%, #861427); box-shadow: inset 2px 0 rgba(255,255,255,.2), 4px 4px 8px rgba(67,11,23,.18); }
.handoff-dot { position: absolute; left: 178px; top: 103px; width: 12px; height: 12px; border-radius: 50%; background: transparent; }
.leg.is-current .handoff-dot::before, .leg.is-current .handoff-dot::after { content: ''; position: absolute; inset: -7px; border: 1px solid var(--gold); border-radius: 50%; animation: handoff-ring 1.5s ease-out infinite; }
.leg.is-current .handoff-dot::after { animation-delay: .65s; }
.runner-card { position: absolute; left: calc(var(--runner-x) + 112px); top: 350px; z-index: 17; width: 230px; display: flex; flex-direction: column; gap: 5px; }
.leg:nth-child(even) .runner-card { left: auto; right: calc(64% + 112px); text-align: right; }
.runner-card strong { font-family: var(--display); font-size: 1.03rem; }
.runner-card span { color: var(--muted); font-size: .56rem; text-transform: uppercase; letter-spacing: .13em; }
.leg:nth-child(2) { --pose: -3deg; }
.leg:nth-child(2) .runner-figure .arm.front { transform: rotate(10deg); }
.leg:nth-child(3) { --pose: 4deg; }
.leg:nth-child(3) .runner-figure .leg-shape.front { transform: rotate(-63deg); }
.leg:nth-child(4) { --pose: -4deg; }
.leg:nth-child(4) .runner-figure .arm.back { transform: rotate(-42deg); }
.leg:nth-child(6) { --pose: 7deg; }
.leg:nth-child(6) .runner-figure .leg-shape.back { transform: rotate(68deg); }
.leg:nth-child(7) { --pose: -7deg; }
.leg:nth-child(7) .runner-figure .arm.front { width: 132px; transform: rotate(8deg); }
.leg:nth-child(8) { --pose: 3deg; }
.leg:nth-child(8) .runner-figure .arm.back { width: 121px; transform: rotate(-10deg); }
.leg:nth-child(9) { --pose: -2deg; }

.mountain-leg { height: 1000px; color: var(--mist); background: linear-gradient(152deg, #c9d5d1 2%, #70858e 54%, #344f5b 100%); }
.mountain-leg::before, .mountain-leg::after { color: #e1e8e4; border-color: rgba(242,245,239,.25); }
.mountain-leg .checkpoint-copy { transform: rotate(-5deg) translateY(-62px); transform-origin: left center; }
.mountain-leg .checkpoint-copy h3 { font-size: clamp(3rem, 5.3vw, 6.1rem); }
.mountain-leg .leg-index { color: rgba(242,245,239,.12); }
.mountain-leg .checkpoint-copy dl { border-color: rgba(242,245,239,.28); }
.mountain-leg .runner-card span { color: #dbe5e0; }
.elevation { position: absolute; inset: auto 1vw 0; z-index: -1; height: 72%; }
.elevation svg { width: 100%; height: 100%; overflow: visible; }
.elevation path { fill: none; stroke: rgba(242,245,239,.65); stroke-width: 2; }
.elevation .fill { fill: rgba(23,50,61,.36); stroke: none; }
.elevation span { position: absolute; right: 5vw; top: -1%; color: var(--gold); font-family: var(--display); font-size: 2rem; }
.mountain-leg .runner-figure { top: 405px; transform: rotate(-13deg) scale(1.08); }
.mountain-leg.is-current .runner-figure { transform: translateY(-12px) rotate(-17deg) scale(1.13); }

.lake-leg { height: 900px; }
.lake { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(#cddbd7 0 39%, #748f98 40%, #aebfbc 100%); }
.lake::before, .lake::after { content: ''; position: absolute; inset: 25% -12% auto; height: 35%; transform: rotate(-3deg); background: rgba(242,245,239,.6); filter: blur(30px); animation: lake-mist 10s ease-in-out infinite alternate; }
.lake::after { top: 44%; transform: rotate(2deg); opacity: .45; animation-direction: alternate-reverse; }
.lake-sun { position: absolute; left: 15%; top: 16%; width: 140px; height: 140px; border-radius: 50%; background: rgba(240,191,79,.72); box-shadow: 0 0 60px rgba(240,191,79,.2); }
.lake i { position: absolute; left: 0; right: 0; bottom: 24%; height: 1px; background: rgba(242,245,239,.5); }
.lake i:nth-of-type(2) { left: 28%; bottom: 19%; }
.lake i:nth-of-type(3) { right: 38%; bottom: 14%; }
.mist-reveal { position: absolute; left: 7vw; bottom: 70px; z-index: 20; width: min(510px, 42vw); min-height: 112px; display: flex; align-items: center; }
.mist-control { position: relative; z-index: 2; min-width: 206px; min-height: 64px; padding: 8px 14px 8px 8px; display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(16,42,52,.28); border-radius: 50px; color: var(--ink); background: rgba(242,245,239,.65); box-shadow: 0 12px 34px rgba(16,42,52,.14); backdrop-filter: blur(11px); cursor: pointer; text-align: left; transition: color .45s var(--ease-cloth), background .45s var(--ease-cloth), transform .45s var(--ease-cloth), box-shadow .45s var(--ease-cloth); }
.mist-control:hover, .mist-control[aria-expanded="true"] { color: var(--mist); background: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 42px rgba(16,42,52,.24); }
.mist-control-mark { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(16,42,52,.28); border-radius: 50%; transition: border-color .45s, transform .65s var(--ease-cloth); }
.mist-control-mark::before, .mist-control-mark::after, .mist-control-mark i { content: ''; grid-area: 1/1; width: 21px; height: 1px; background: currentColor; }
.mist-control-mark::before { transform: translateY(-5px); }
.mist-control-mark::after { transform: translateY(5px); }
.mist-control:hover .mist-control-mark, .mist-control[aria-expanded="true"] .mist-control-mark { border-color: rgba(242,245,239,.4); transform: rotate(180deg); }
.mist-control strong { display: block; font-family: var(--display); font-size: .94rem; font-weight: 600; letter-spacing: -.012em; }
.mist-control small { display: block; margin-top: 2px; font-size: .48rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.mist-memory { position: absolute; left: 38px; right: 0; min-height: 112px; padding: 19px 20px 18px 195px; display: grid; grid-template-columns: auto 52px auto; align-content: center; align-items: center; gap: 6px 10px; color: var(--mist); background: linear-gradient(105deg, rgba(31,65,76,.96), rgba(83,113,122,.93)); clip-path: inset(0 100% 0 0 round 58px); box-shadow: 0 20px 50px rgba(16,42,52,.22); opacity: 0; transform: translateX(-16px); transition: clip-path .85s var(--ease-cloth), opacity .35s ease, transform .85s var(--ease-cloth); pointer-events: none; }
.mist-reveal.is-open .mist-memory { clip-path: inset(0 0 0 0 round 58px); opacity: 1; transform: none; }
.mist-memory p { margin: 0; display: flex; flex-direction: column; }
.mist-memory p span { font-family: var(--display); font-size: 1.13rem; font-variant-numeric: tabular-nums lining-nums; }
.mist-memory p i { color: #d0dedb; font-size: .43rem; font-style: normal; letter-spacing: .13em; }
.mist-memory svg { width: 52px; fill: none; stroke: var(--gold); stroke-width: 1.3; }
.mist-memory > strong { grid-column: 1/-1; font-family: var(--display); font-size: .77rem; font-weight: 500; letter-spacing: .01em; line-height: 1.35; }

.cutoff-leg { height: 1180px; color: var(--mist); background: radial-gradient(circle at 72% 28%, rgba(240,191,79,.11), transparent 23%), linear-gradient(105deg, #526671, #263f4a); }
.cutoff-leg::before, .cutoff-leg::after { color: #d7e2df; border-color: rgba(242,245,239,.22); }
.cutoff-leg .leg-index { color: rgba(242,245,239,.09); }
.cutoff-leg .checkpoint-copy { transform: translateY(-90px); }
.cutoff-leg .checkpoint-copy dl { border-color: rgba(242,245,239,.25); }
.cutoff-leg .runner-card span { color: #ccd9d6; }
.cutoff-leg .runner-figure { top: 455px; transform: rotate(-10deg) scale(1.3); }
.cutoff-leg.is-current .runner-figure { transform: translateY(-8px) rotate(-12deg) scale(1.35); }
.cutoff-leg .runner-card { top: 580px; }
.cutoff-clock { position: absolute; right: 7vw; top: 145px; z-index: 15; width: 240px; height: 240px; }
.cutoff-clock svg { width: 100%; transform: rotate(-90deg); fill: none; stroke: rgba(242,245,239,.16); stroke-width: 2; }
.cutoff-clock .clock-progress { stroke: var(--gold); stroke-width: 5; stroke-dasharray: 421; stroke-dashoffset: 60; transition: stroke-dashoffset .12s linear; }
.cutoff-clock > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cutoff-clock strong { font-family: var(--display); font-size: 2.7rem; font-variant-numeric: tabular-nums; }
.cutoff-clock small { font-size: .56rem; text-transform: uppercase; letter-spacing: .18em; }
.cutoff-gates { position: absolute; inset: 0; overflow: hidden; opacity: .12; }
.cutoff-gates i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--mist); }
.cutoff-gates i:nth-child(1) { left: 12%; }
.cutoff-gates i:nth-child(2) { left: 38%; }
.cutoff-gates i:nth-child(3) { left: 64%; }
.cutoff-gates i:nth-child(4) { left: 90%; }
.tension-word { position: absolute; right: -2vw; bottom: 65px; margin: 0; color: rgba(242,245,239,.055); font-family: var(--display); font-size: clamp(6rem, 16vw, 15rem); letter-spacing: .06em; white-space: nowrap; }
.cutoff-leg.is-current .tension-word { animation: tension-pulse .85s ease-in-out infinite alternate; }

.release-leg { background: linear-gradient(110deg, #f4f1e8, #dce7e2); }
.release-leg::before { border-top-color: var(--crimson); }
.city-return { background: repeating-linear-gradient(102deg, #dce4df 0 14vw, #cbd7d3 14vw 14.2vw); }
.anchor-leg { height: 1030px; overflow: hidden; background: var(--gold); }
.anchor-leg::before { border-color: rgba(16,42,52,.28); }
.anchor-leg .runner-figure { top: 435px; transform: scale(1.22) rotate(-3deg); }
.anchor-leg.is-current .runner-figure { transform: translateY(-12px) scale(1.29) rotate(-6deg); }
.anchor-leg .runner-card { top: 575px; }
.anchor-leg .runner-card span { color: #38505a; }
.crowd-type { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-around; transform: rotate(-8deg) scale(1.18); color: rgba(16,42,52,.075); font-size: clamp(4.5rem, 12vw, 11rem); font-weight: 900; line-height: .7; white-space: nowrap; }
.crowd-type span { transition: transform 1s var(--ease-out), letter-spacing 1s var(--ease-out); }
.anchor-leg.is-current .crowd-type span:nth-child(odd) { transform: translateX(-7%); letter-spacing: .07em; }
.anchor-leg.is-current .crowd-type span:nth-child(even) { transform: translateX(6%); letter-spacing: .12em; }

.pace-lab { position: relative; min-height: 900px; padding: 145px 8vw; display: grid; grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr); gap: 9vw; align-items: center; color: var(--mist); background: radial-gradient(circle at 84% 24%, rgba(240,191,79,.12), transparent 24%), #102a34; }
.pace-lab::before { content: '2:58'; position: absolute; left: -2vw; bottom: -5%; color: rgba(242,245,239,.025); font-family: var(--display); font-size: 30vw; line-height: 1; }
.pace-sash-anchor { right: 1.5vw; top: 11%; }
.pace-exit-anchor { right: 1.5vw; bottom: 9%; }
.pace-heading, .pace-machine { position: relative; z-index: 10; }
.pace-heading > p:last-child { max-width: 430px; font-family: var(--display); font-size: 1rem; line-height: 1.85; }
.pace-machine { padding: 32px 0; border-top: 1px solid rgba(242,245,239,.25); border-bottom: 1px solid rgba(242,245,239,.25); }
.pace-control { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.pace-control label { font-size: .64rem; text-transform: uppercase; letter-spacing: .17em; }
.pace-control output { color: var(--gold); font-family: var(--display); font-size: 1.4rem; }
.pace-control input { grid-column: 1/-1; width: 100%; min-height: 44px; accent-color: var(--crimson); }
.pace-control input[type="range"] { appearance: none; height: 44px; margin: 0; background: transparent; cursor: ew-resize; }
.pace-control input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--crimson), var(--gold)); }
.pace-control input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 5px solid var(--mist); border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 1px var(--crimson), 0 5px 15px rgba(0,0,0,.28); }
.pace-control input[type="range"]::-moz-range-track { height: 3px; background: linear-gradient(90deg, var(--crimson), var(--gold)); }
.pace-control input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 5px solid var(--mist); border-radius: 50%; background: var(--crimson); }
.pace-control small { grid-column: 1/-1; color: #b7c4c2; font-size: .7rem; }
.pace-total { display: grid; grid-template-columns: 1fr auto; align-items: end; margin: 30px 0; }
.pace-total span, .pace-total small { color: #b7c4c2; font-size: .6rem; text-transform: uppercase; letter-spacing: .15em; }
.pace-total strong { grid-row: 1/3; grid-column: 2; font-family: var(--display); font-size: clamp(2.7rem, 5vw, 5.2rem); font-variant-numeric: tabular-nums; }
.pace-bars { height: 190px; margin: 0; padding: 0; display: flex; align-items: end; gap: 7px; border-bottom: 1px solid rgba(242,245,239,.22); list-style: none; }
.pace-bars li { position: relative; flex: 1; min-width: 0; background: linear-gradient(#91a5ab, #526b76); transition: height .45s var(--ease-out); }
.pace-bars li:nth-child(5) { background: linear-gradient(#dc3a50, #8e172b); }
.pace-bars li span { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); font-size: .55rem; }
.pace-bars li small { position: absolute; top: -23px; left: 50%; transform: translateX(-50%); color: #c0ccca; font-size: .5rem; white-space: nowrap; }
.pace-bars li em { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); font-size: .48rem; font-style: normal; letter-spacing: .08em; opacity: .78; writing-mode: vertical-rl; }
.pace-footnote { margin: 24px 0 0; color: #b7c4c2; font-size: .68rem; line-height: 1.7; }
.pace-footnote b { color: var(--gold); }

.lore { position: relative; min-height: 980px; padding: 145px 8vw; overflow: hidden; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; background: #dce6e1; }
.lore::before { content: ''; position: absolute; left: -14vw; top: 48%; width: 63vw; height: 63vw; transform: translateY(-50%); border: 1px solid rgba(16,42,52,.1); border-radius: 50%; box-shadow: 0 0 0 7vw rgba(255,255,255,.06), 0 0 0 14vw rgba(255,255,255,.04); }
.lore-sash-anchor { left: 22vw; top: 57%; }
.bowl { position: relative; z-index: 10; width: min(40vw, 560px); height: 300px; transform: perspective(700px) rotateX(-7deg); border-top: 18px solid #f8f7ef; border-radius: 12px 12px 50% 50%; background: linear-gradient(#f1f4ed, #b5c6c0); box-shadow: 0 45px 60px rgba(48,68,74,.22), inset 0 -20px 25px rgba(74,96,100,.16); }
.bowl::before { content: ''; position: absolute; left: 7%; right: 7%; top: -54px; height: 105px; border-radius: 50%; background: #f8f5e5; box-shadow: inset 0 0 30px rgba(136,139,121,.22); }
.bowl > span { position: absolute; left: 50%; top: 43%; transform: translateX(-50%); color: var(--sky-deep); font-family: var(--display); font-size: 2rem; }
.rice i { position: absolute; z-index: 2; left: 38%; top: -38px; width: 33px; height: 13px; border-radius: 50%; background: #fffef5; }
.rice i:nth-child(2) { left: 45%; top: -61px; }
.rice i:nth-child(3) { left: 52%; top: -34px; }
.rice i:nth-child(4) { left: 58%; top: -57px; }
.rice i:nth-child(5) { left: 32%; top: -61px; }
.steam { position: absolute; left: 18vw; top: 110px; z-index: 9; width: 240px; height: 240px; }
.steam i { position: absolute; width: 70px; height: 210px; border-left: 4px solid rgba(255,255,255,.68); border-radius: 50%; filter: blur(4px); animation: steam 5s ease-in-out infinite; }
.steam i:nth-child(2) { left: 75px; animation-delay: 1.3s; }
.steam i:nth-child(3) { left: 150px; animation-delay: 2.5s; }
.lore-copy { position: relative; z-index: 10; }
.lore-copy > p:not(.section-mark) { max-width: 520px; font-family: var(--display); font-size: 1.03rem; line-height: 1.85; }
.lore blockquote { max-width: 510px; margin: 43px 0 0; padding-left: 25px; border-left: 5px solid var(--crimson); font-family: var(--display); font-size: 1.35rem; line-height: 1.65; }
.lore cite { display: block; margin-top: 16px; font-family: var(--body); font-size: .6rem; font-style: normal; text-transform: uppercase; letter-spacing: .14em; }
.menu-ledger { position: absolute; left: 8vw; bottom: 66px; z-index: 10; width: 38%; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.menu-ledger div { padding: 14px 9px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.menu-ledger span { color: var(--crimson); font-family: var(--display); font-size: 1rem; }
.menu-ledger b { margin-top: 6px; font-size: .53rem; text-transform: uppercase; letter-spacing: .11em; }

.finish { position: relative; height: 100svh; min-height: 760px; padding: 80px 7vw; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--mist); text-align: center; background: radial-gradient(circle at 50% 36%, rgba(240,191,79,.13), transparent 23%), linear-gradient(170deg, #5c7480, #183742); }
.finish-lines { position: absolute; inset: 0; transform: scale(1.4) rotate(-5deg); background: repeating-linear-gradient(95deg, transparent 0 9vw, rgba(242,245,239,.038) 9vw 9.15vw); }
.finish-echo { position: absolute; left: -2vw; top: 7%; color: rgba(242,245,239,.035); font-family: var(--display); font-size: 28vw; line-height: 1; }
.finish-sash-anchor { left: calc(50% - 5px); top: 41%; }
.finish > p:first-of-type, .finish h2, .result, .finish-note, .replay-link { position: relative; z-index: 16; }
.finish > p:first-of-type { font-size: .59rem; text-transform: uppercase; letter-spacing: .24em; }
.finish h2 { font-size: clamp(4.3rem, 9.4vw, 9.8rem); line-height: .88; }
.finish h2 em { color: var(--gold); font-weight: 400; }
.result { width: min(780px, 84vw); margin: 47px 0 24px; padding: 20px 0; display: grid; grid-template-columns: 1fr auto auto; gap: 34px; align-items: center; border-top: 1px solid rgba(242,245,239,.32); border-bottom: 1px solid rgba(242,245,239,.32); text-align: left; }
.result span { font-size: .63rem; letter-spacing: .17em; }
.result strong { font-family: var(--display); font-size: 2.2rem; }
.result b { color: var(--gold); }
.finish-note { max-width: 530px; font-family: var(--display); font-size: 1rem; line-height: 1.75; }
.replay-link { position: absolute; bottom: 35px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-size: .61rem; text-transform: uppercase; letter-spacing: .16em; }
.replay-link span { width: 42px; height: 42px; margin-left: 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(242,245,239,.45); border-radius: 50%; transition: transform .35s var(--ease-out); }
.replay-link:hover span, .replay-link:focus-visible span { transform: translateY(-7px); }

footer { min-height: 138px; padding: 40px 5vw; display: flex; align-items: center; justify-content: space-between; color: #d4dfdc; background: #102f3a; font-size: .61rem; letter-spacing: .08em; }
footer nav { display: flex; gap: 20px; }
footer a { min-height: 44px; padding: 0 4px; display: inline-flex; align-items: center; text-underline-offset: 6px; }
footer a { text-decoration-color: rgba(242,245,239,.5); text-decoration-thickness: 1px; transition: color .3s, text-decoration-color .3s, transform .3s var(--ease-out); }
footer a:hover, footer a:focus-visible { color: var(--gold); text-decoration-color: var(--gold); transform: translateY(-2px); }

@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes sun-in { from { transform: scale(.72); filter: blur(20px); opacity: .18; } to { transform: none; filter: blur(0); opacity: 1; } }
@keyframes copy-in { from { transform: translateY(34px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes runner-in { from { translate: 100px 60px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes road-run { to { stroke-dashoffset: -70; } }
@keyframes mist-drift { to { transform: translateX(8%) rotate(-4deg); opacity: .75; } }
@keyframes breathe { 0% { transform: translate(0, 30px) scale(.4); opacity: 0; } 34% { opacity: .72; } 100% { transform: translate(95px, -23px) scale(1.55); opacity: 0; } }
@keyframes handoff-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
@keyframes lake-mist { to { transform: translateX(7%) rotate(1deg); } }
@keyframes tension-pulse { to { color: rgba(242,245,239,.1); transform: scale(1.015); } }
@keyframes steam { 0% { transform: translateY(60px) scale(.5); opacity: 0; } 30% { opacity: .75; } 100% { transform: translateY(-60px) scale(1.2) rotate(15deg); opacity: 0; } }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; padding: 0 20px; }
  .site-header nav { display: none; }
  .hero-copy { left: 7vw; top: 21%; width: 72vw; }
  .hero h1 { font-size: clamp(4.7rem, 14vw, 7.3rem); }
  .hero-runner { right: -45px; transform: scale(.79) rotate(-5deg); transform-origin: bottom; opacity: .84; }
  .course-intro { grid-template-columns: 40px 1fr; padding: 125px 7vw 135px; }
  .course-intro > p:not(.vertical-jp) { grid-column: 2; max-width: 590px; margin: 0; }
  .route-key { left: calc(7vw + 40px + 6vw); }
  .leg { padding: 0 5vw; }
  .checkpoint-copy { grid-template-columns: 72px 1fr; }
  .leg:nth-child(odd) .checkpoint-copy { padding-right: 12vw; }
  .leg:nth-child(even) .checkpoint-copy { padding-left: 12vw; }
  .checkpoint-copy h3 { font-size: 2.65rem; }
  .leg-index { font-size: 4rem; }
  .runner-card { width: 190px; }
  .leg:nth-child(odd) .runner-card { left: calc(var(--runner-x) + 92px); }
  .leg:nth-child(even) .runner-card { right: calc(64% + 92px); }
  .pace-lab { grid-template-columns: 1fr; padding: 115px 7vw; }
  .pace-sash-anchor { top: 8%; }
  .lore { grid-template-columns: 1fr; padding: 110px 7vw 420px; }
  .lore-copy { grid-row: 1; }
  .bowl { position: absolute; left: 9vw; bottom: 100px; width: 61vw; }
  .steam { left: 20vw; top: auto; bottom: 300px; }
  .menu-ledger { left: auto; right: 7vw; bottom: 130px; width: 33%; grid-template-columns: 1fr 1fr; }
  .lore-sash-anchor { left: 36vw; top: 72%; }
}

@media (max-width: 600px) {
  body::before { display: none; }
  .grain { opacity: .13; }
  .site-header { height: 64px; }
  .brand span { font-size: .76rem; }
  .brand svg { width: 29px; }
  .live-leg { gap: 5px; }
  .live-leg i { width: 9px; }
  .live-leg span, .live-leg small { font-size: .45rem; }
  .live-leg strong { font-size: 1.18rem; }
  .live-leg b { min-width: 34px; font-size: .57rem; }
  .thread-shadow { stroke-width: 22; }
  .thread-base, .thread-live { stroke-width: 13; }
  .tassel-halo { r: 14; }
  .hero { min-height: 760px; }
  .hero::after { display: none; }
  .hero-copy { left: 24px; right: 24px; top: 17%; width: auto; }
  .hero h1 { font-size: clamp(4.2rem, 20.5vw, 5.35rem); line-height: .85; }
  .hero-copy > p:not(.kicker) { max-width: 285px; margin: 26px 0 20px; font-size: .98rem; line-height: 1.72; }
  .kicker { margin-bottom: 18px; font-size: .56rem; }
  .kicker span { font-size: .8rem; }
  .hero-runner { right: -136px; bottom: -4px; transform: scale(.63) rotate(-5deg); opacity: .8; }
  .hero-sash-anchor { left: 240px; }
  .sun { left: 54%; top: 14%; width: 185px; }
  .start-data { left: 24px; right: auto; bottom: 22px; gap: 13px; }
  .breath { display: none; }
  .course-intro { min-height: 730px; padding: 110px 24px 130px; display: block; }
  .vertical-jp { position: absolute; right: 16px; top: 82px; }
  .course-intro h2, .pace-heading h2, .lore h2 { font-size: 3.25rem; }
  .course-intro > p:not(.vertical-jp) { max-width: 305px; margin-top: 42px; font-size: 1.02rem; }
  .route-key { left: 24px; right: 24px; bottom: 45px; gap: 17px; }
  .route-key b, .route-stamp { display: none; }
  .course { padding: 25px 0 55px; }
  .course::before { left: 75%; }
  .leg, .leg:nth-child(even) { --runner-x: 72%; height: 700px; padding: 0 24px; display: block; }
  .leg:nth-child(even) { --runner-x: 69%; }
  .leg::before { left: 24px; right: 24px; top: 38px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .leg::after { right: 24px; top: 60px; font-size: .44rem; }
  .leg:nth-child(n) .checkpoint-copy { position: absolute; left: 24px; right: 24px; top: 105px; display: block; padding: 0 25vw 0 0; }
  .leg-index { font-size: 3.5rem; }
  .checkpoint-copy h3 { margin: 5px 0 12px; font-size: 2.18rem; }
  .checkpoint-copy p { font-size: .91rem; line-height: 1.68; }
  .checkpoint-copy dl { gap: 17px; margin-top: 20px; }
  .checkpoint-copy dl div { display: block; }
  .checkpoint-copy dt { display: block; margin-bottom: 3px; }
  .checkpoint-copy dd { font-size: 1.02rem; }
  .runner-figure { left: calc(var(--runner-x) - 72px); top: 350px; transform: scale(.8) rotate(var(--pose)); }
  .leg.is-current .runner-figure { transform: translateY(-7px) scale(.83) rotate(calc(var(--pose) - 3deg)); }
  .runner-card, .leg:nth-child(even) .runner-card, .leg:nth-child(odd) .runner-card { left: auto; right: 10px; top: 575px; width: 175px; text-align: center; }
  .runner-card strong { font-size: .88rem; }
  .runner-card span { font-size: .48rem; }
  .mountain-leg { height: 850px; }
  .mountain-leg .checkpoint-copy { transform: rotate(-3deg); }
  .mountain-leg .checkpoint-copy h3 { font-size: 2.75rem; }
  .mountain-leg .runner-figure { top: 445px; transform: rotate(-12deg) scale(.87); }
  .mountain-leg.is-current .runner-figure { transform: translateY(-8px) rotate(-15deg) scale(.9); }
  .mountain-leg .runner-card { top: 700px; }
  .lake-leg { height: 780px; }
  .lake-leg .runner-card { top: 640px; }
  .mist-reveal { left: 24px; top: 500px; bottom: auto; width: calc(100% - 48px); min-height: 126px; align-items: end; }
  .mist-control { min-width: 188px; min-height: 58px; }
  .mist-memory { left: 0; min-height: 126px; padding: 18px 18px 66px; grid-template-columns: auto 42px auto; border-radius: 22px; clip-path: inset(100% 0 0 0 round 22px); transform: translateY(12px); }
  .mist-reveal.is-open .mist-memory { clip-path: inset(0 0 0 0 round 22px); }
  .mist-memory > strong { position: absolute; right: 18px; bottom: 15px; text-align: right; }
  .mist-control { margin-bottom: 3px; }
  .cutoff-leg { height: 1030px; }
  .cutoff-leg .checkpoint-copy { top: 190px; transform: none; }
  .cutoff-clock { right: 16px; top: 76px; width: 116px; height: 116px; }
  .cutoff-clock strong { font-size: 1.35rem; }
  .cutoff-leg .runner-figure { top: 545px; transform: rotate(-9deg) scale(.98); }
  .cutoff-leg.is-current .runner-figure { transform: translateY(-7px) rotate(-12deg) scale(1.01); }
  .cutoff-leg .runner-card { top: 810px; }
  .tension-word { bottom: 56px; font-size: 5.3rem; }
  .anchor-leg { height: 880px; }
  .anchor-leg .checkpoint-copy { top: 135px; }
  .anchor-leg .runner-figure { top: 460px; transform: scale(.92) rotate(-3deg); }
  .anchor-leg.is-current .runner-figure { transform: translateY(-8px) scale(.96) rotate(-6deg); }
  .anchor-leg .runner-card { top: 720px; }
  .pace-lab { min-height: 940px; padding: 105px 24px 90px; gap: 65px; }
  .pace-machine { min-width: 0; }
  .pace-control output { font-size: 1.05rem; }
  .pace-total { display: block; }
  .pace-total strong { display: block; margin: 8px 0; font-size: 2.9rem; }
  .pace-bars { height: 155px; gap: 4px; }
  .pace-bars li small { display: none; }
  .pace-bars li em { font-size: .42rem; }
  .pace-sash-anchor { right: 5px; top: 6%; }
  .pace-exit-anchor { right: 5px; bottom: 5%; }
  .lore { min-height: 1100px; padding: 105px 24px 500px; }
  .lore-copy > p:not(.section-mark) { font-size: .94rem; }
  .lore blockquote { margin-top: 28px; font-size: 1.1rem; }
  .bowl { left: 9vw; bottom: 150px; width: 82vw; height: 230px; }
  .steam { left: 19vw; bottom: 335px; }
  .menu-ledger { left: 24px; right: 24px; bottom: 34px; width: auto; grid-template-columns: repeat(4, 1fr); }
  .menu-ledger div { padding: 10px 4px; }
  .menu-ledger b { font-size: .45rem; }
  .lore-sash-anchor { left: 38%; top: 78%; }
  .finish { min-height: 800px; padding: 55px 24px; }
  .finish h2 { font-size: 3.75rem; }
  .result { margin: 36px 0 20px; grid-template-columns: 1fr auto; gap: 10px; }
  .result b { grid-column: 2; }
  .finish-note { font-size: .91rem; }
  .finish-sash-anchor { left: 52%; top: 37%; }
  footer { min-height: 280px; padding: 38px 24px; display: block; text-align: center; }
  footer nav { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
  footer a { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .tassel, .tassel-halo { display: none; }
}