@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --sc-canvas:#ece7d6;      /* map paper */
  --sc-surface:#f6f2e6;
  --sc-ink:#1f2b22;         /* forest ink */
  --sc-ink-soft:#4b5649;
  --sc-accent:#b8352a;      /* route red */
  --sc-accent-ink:#fbf7ec;
  --sc-font-display:"Fraunces",Georgia,serif;
  --sc-font-text:"Geist",system-ui,sans-serif;
  --sc-shadow-color:40 25% 25%;
  --paper:#ece7d6;
  --route:#b8352a;
  --trail:#7d8a6b;
  --water:#5f8fa8;
}
html[data-lang=en] [data-l=de],html[data-lang=de] [data-l=en]{display:none!important}
body{background:var(--paper);color:var(--sc-ink)}
.skip{position:fixed;left:-999px;top:8px;z-index:100;background:var(--sc-ink);color:var(--paper);padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}
[data-sc-progress]{background:var(--route)}

/* header */
.bar{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:14px var(--sc-gutter);background:color-mix(in oklab,var(--paper) 82%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid color-mix(in oklab,var(--sc-ink) 10%,transparent)}
.mark{font:500 1.15rem/1 var(--sc-font-display);text-decoration:none;color:var(--sc-ink);letter-spacing:-.01em}
.bar-r{display:flex;gap:.4rem;align-items:center}
.bar-link{color:var(--sc-ink-soft);text-decoration:none;font-size:.92rem;padding:.6rem .7rem;border-radius:8px;transition:color 160ms var(--sc-ease-out),background-color 160ms var(--sc-ease-out)}
.bar-link:hover{color:var(--sc-ink);background:color-mix(in oklab,var(--sc-ink) 6%,transparent)}
.lang{background:transparent;border:0;cursor:pointer;font-size:.85rem;color:color-mix(in oklab,var(--sc-ink) 50%,transparent);min-height:44px;padding:0 .5rem}
html[data-lang=en] .lang .on-en,html[data-lang=de] .lang .on-de{color:var(--sc-ink);text-decoration:underline;text-decoration-color:var(--route);text-underline-offset:.3em;text-decoration-thickness:2px}
.pill{display:inline-flex;align-items:center;min-height:40px;padding:0 1.05rem;border-radius:999px;background:var(--sc-ink);color:var(--paper);text-decoration:none;font-size:.92rem;transition:background-color 160ms var(--sc-ease-out),transform 120ms var(--sc-ease-out)}
.pill:hover{background:var(--route)}
.pill:active{transform:scale(.97)}
@media (max-width:640px){.bar-link{display:none}}

/* terrain: tileable contour lines, moving slower than the page */
.terrain{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.terrain::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 1400px);background:url(/assets/terrain.svg) 0 0/1400px 1400px repeat;transform:translate3d(0,var(--ty,0px),0);will-change:transform}
.terrain::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,transparent 40%,color-mix(in oklab,#c9bf9f 35%,transparent) 100%)}

/* the page as a map */
.map{position:relative;z-index:1;padding-top:64px;overflow-x:clip}
.route{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:1;overflow:visible}
.route-trail{fill:none;stroke:var(--trail);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round;opacity:.75}
.route-ink{fill:none;stroke:var(--route);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.rider-dot{fill:var(--route);stroke:var(--paper);stroke-width:2.5}
.rider-halo{fill:var(--route);opacity:.16;transform-box:fill-box;transform-origin:center;transform:scale(var(--halo,1))}

.leg{position:relative;width:min(1320px,100%);margin:0 auto;padding:clamp(4rem,11vh,8rem) var(--sc-gutter);display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(3rem,8vw,8rem);align-items:center}
.leg--r{grid-template-columns:.9fr 1.2fr}
.leg>*{position:relative;z-index:2}
.leg--r>:first-child{order:2}
.leg--l .leg-media,.leg--l>.leg-photo{order:0}
/* text sits on the paper like a map label: a soft paper halo hides the route underneath */
.leg-text,.korea-card,.finish-copy,.hero-copy{background:var(--paper);box-shadow:0 0 16px 12px var(--paper);border-radius:18px}
.place{font:500 .78rem/1 var(--sc-font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--trail);margin:0 0 1rem}
.leg-title{font:400 clamp(2.3rem,1.5rem + 3vw,4.2rem)/1 var(--sc-font-display);letter-spacing:-.03em;margin:0 0 1.2rem;text-wrap:balance}
.leg-text p:not(.place):not(.links),.korea-card p:not(.place),.finish-copy p{color:var(--sc-ink-soft);max-width:52ch;margin:0 0 1rem;text-wrap:pretty}
.links{display:flex;gap:1.3rem;flex-wrap:wrap;margin:1.4rem 0 0}
.links a,.foot a,.legal a{color:var(--sc-ink);text-decoration:underline;text-decoration-color:var(--route);text-decoration-thickness:2px;text-underline-offset:.28em;padding:.3rem 0;transition:color 140ms var(--sc-ease-out)}
.links a:hover,.foot a:hover{color:var(--route)}

/* prints: photos taped onto the map */
.print{margin:0;background:#fbf8ef;padding:10px 10px 12px;box-shadow:0 1px 2px hsl(var(--sc-shadow-color)/.25),0 14px 34px -14px hsl(var(--sc-shadow-color)/.55);transform:rotate(var(--r,-1.6deg));transition:transform 500ms var(--sc-ease-out)}
.print img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.print figcaption{font:italic 400 .95rem/1.2 var(--sc-font-display);color:var(--sc-ink-soft);padding:10px 4px 0}
.print::before,.print::after{content:"";position:absolute;width:92px;height:26px;background:color-mix(in oklab,#efe6c4 78%,transparent);box-shadow:0 1px 2px hsl(var(--sc-shadow-color)/.15);z-index:2}
.print::before{top:-11px;left:18%;transform:rotate(-4deg)}
.print::after{bottom:-10px;right:14%;transform:rotate(3deg)}
.leg--r .print{--r:1.8deg}
@media (hover:hover) and (pointer:fine){.print:hover{transform:rotate(0) scale(1.015)}}
.leg-media{position:relative}
.screen{position:absolute;margin:0;width:62%;right:-8%;bottom:-16%;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px hsl(var(--sc-shadow-color)/.25),0 26px 50px -18px hsl(var(--sc-shadow-color)/.7);background:#fff;z-index:3}
.leg--r .screen{right:auto;left:-8%}
.screen img{width:100%;height:auto}

/* stamps (waypoints) */
.wp{position:absolute;z-index:6;width:clamp(140px,13vw,188px);left:50%;top:clamp(1.5rem,6vh,4rem);margin-left:calc(clamp(140px,13vw,188px) / -2);cursor:pointer;opacity:0;transform:rotate(var(--rot)) scale(1.7);filter:drop-shadow(0 0 0 transparent)}
.wp .stamp-svg{width:100%;height:auto;display:block;mix-blend-mode:multiply}
@media (hover:hover) and (pointer:fine){.wp.stamped:hover{transform:rotate(var(--rot)) scale(1.06);transition:transform 200ms var(--sc-ease-out)}}
.st-small{font:600 1px var(--sc-font-text);font-size:inherit}
.stamp-svg text{font-family:var(--sc-font-text);font-weight:700}
.stamp-svg .st-big{font-family:var(--sc-font-display);font-weight:600}
.wp.stamped{animation:thunk 520ms cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes thunk{0%{opacity:0;transform:rotate(calc(var(--rot) - 14deg)) scale(1.7)}55%{opacity:1;transform:rotate(var(--rot)) scale(.93)}100%{opacity:1;transform:rotate(var(--rot)) scale(1)}}
.wp.stamped::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:2px solid var(--ink);opacity:0;animation:ring 600ms 120ms var(--sc-ease-out)}
@keyframes ring{0%{opacity:.4;transform:scale(.7)}100%{opacity:0;transform:scale(1.35)}}
.leg--hero .wp{left:auto;right:4%;top:auto;bottom:-6%;margin:0}
.leg--korea .wp{left:auto;right:6%;top:6%;margin:0}
.leg--finish .wp{left:auto;right:max(4%,calc(50% - 520px));top:clamp(3rem,10vh,6rem);bottom:auto;margin:0}

/* hero */
.leg--hero{min-height:calc(100svh - 64px);padding-top:clamp(2rem,6vh,5rem);padding-bottom:clamp(4rem,10vh,7rem);grid-template-columns:.95fr 1.15fr}
.coords{font:500 .78rem/1 var(--sc-font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--trail);margin:0 0 1.4rem}
.hero-name{font:400 clamp(3.4rem,1.2rem + 6.6vw,8rem)/.92 var(--sc-font-display);letter-spacing:-.045em;margin:0 0 1.6rem;font-variation-settings:"SOFT" 60,"opsz" 144}
.hero-name .w{display:block;white-space:nowrap}
.js .hero-name .ch{display:inline-block;opacity:0;transform:translateY(.4em) rotate(4deg);animation:rise 700ms var(--sc-ease-out) forwards;animation-delay:calc(var(--i) * 45ms + 120ms)}
@keyframes rise{to{opacity:1;transform:none}}
.hero-lede{font:350 clamp(1.25rem,1rem + 1vw,1.85rem)/1.3 var(--sc-font-display);max-width:28ch;margin:0 0 1.4rem;color:var(--sc-ink)}
.hero-hint{display:inline-flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--sc-ink-soft);margin:0}
.hero-hint::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--route)}
.js .hero-copy>*:not(h1){opacity:0;animation:rise 800ms var(--sc-ease-out) forwards;animation-delay:700ms}
.hero-photos{position:relative;height:min(68vh,600px)}
.hero-photos .print{position:absolute;will-change:transform}
.p-big{width:96%;right:-2%;top:2%;--r:2.2deg}
.p-small{width:46%;left:-8%;bottom:-2%;--r:-5deg}
.js .hero-photos .print{opacity:0;animation:drop 900ms var(--sc-ease-out) forwards}
.js .hero-photos .p-small{animation-delay:260ms}
@keyframes drop{from{opacity:0;translate:0 -30px;scale:1.06}to{opacity:1;translate:0 0;scale:1}}

/* korea */
.leg--korea{grid-template-columns:1fr;padding-top:clamp(6rem,16vh,11rem)}
.leg--korea .wide{width:78%;--r:-1.2deg}
.korea-card{width:min(36rem,92%);margin:-14% 0 0 auto;padding:1.4rem 0 0}
.profile{width:100%;height:110px;display:block;margin:1.4rem 0 .4rem;overflow:visible}
.profile .pf-fill{fill:color-mix(in oklab,var(--trail) 22%,transparent)}
.profile .pf-line{fill:none;stroke:var(--water);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.profile-axis{display:flex;justify-content:space-between;font-size:.78rem;color:var(--trail);letter-spacing:.06em}
.passport-link{display:flex;gap:1.1rem;align-items:center;margin-top:1.8rem;padding:.9rem 1.1rem .9rem .9rem;border-radius:14px;text-decoration:none;color:var(--sc-ink);background:#f7f3e7;box-shadow:0 1px 2px hsl(var(--sc-shadow-color)/.2),0 12px 28px -16px hsl(var(--sc-shadow-color)/.6);transition:transform 220ms var(--sc-ease-out),box-shadow 220ms var(--sc-ease-out)}
.passport-link:hover{transform:translateY(-3px) rotate(-.6deg)}
.mini-passport{flex:none;width:64px;height:88px;border-radius:5px 8px 8px 5px;background:#1d3366;color:#e9e3cf;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:6px 4px;box-shadow:inset 3px 0 0 #142650,0 6px 14px -6px rgba(10,20,50,.6);transition:transform 300ms var(--sc-ease-out);transform-origin:left center}
.passport-link:hover .mini-passport{transform:perspective(300px) rotateY(-22deg)}
.mini-passport svg{width:34px}
.mp-ko{font-size:9px;letter-spacing:.06em}.mp-en{font-size:7px;letter-spacing:.2em}
.pl-text{display:flex;flex-direction:column;gap:.15rem}
.pl-text b{font:500 1.2rem/1.2 var(--sc-font-display)}
.pl-text span{font-size:.88rem;color:var(--sc-ink-soft)}

/* work list */
.path{list-style:none;padding:0;margin:0 0 .5rem}
.path li{display:flex;flex-direction:column;gap:.15rem;padding:.75rem 0;border-top:1px dashed color-mix(in oklab,var(--sc-ink) 25%,transparent)}
.path li:last-child{border-bottom:1px dashed color-mix(in oklab,var(--sc-ink) 25%,transparent)}
.path b{font-weight:500}
.path span{color:var(--sc-ink-soft);font-size:.92rem}

/* finish */
.leg--finish{grid-template-columns:1fr;justify-items:center;text-align:center;padding-bottom:clamp(8rem,18vh,12rem)}
.finish-photo{width:min(760px,90%);--r:1deg}
.finish-copy{margin-top:-6rem;padding:2rem 2.4rem 1rem}
.finish-title{font:400 clamp(2.4rem,1.4rem + 3.6vw,4.6rem)/1 var(--sc-font-display);letter-spacing:-.03em;margin:0 0 1.2rem}
.finish-copy .links{justify-content:center}
.mail a{font:400 clamp(1.5rem,1.1rem + 1.8vw,2.6rem)/1.2 var(--sc-font-display);color:var(--sc-ink);text-decoration:underline;text-decoration-color:var(--route);text-decoration-thickness:3px;text-underline-offset:.18em}
.mail a:hover{color:var(--route)}

.foot{position:relative;z-index:2;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.6rem var(--sc-gutter) 2.2rem;font-size:.88rem;color:var(--sc-ink-soft);border-top:1px solid color-mix(in oklab,var(--sc-ink) 12%,transparent);background:var(--paper)}
.foot span:last-child{display:flex;gap:1.2rem}

@media (max-width:860px){
  .leg,.leg--hero{grid-template-columns:1fr;gap:2.4rem;padding-left:calc(var(--sc-gutter) + 22px)}
  .leg--r>:first-child{order:0}
  .hero-photos{height:auto;aspect-ratio:1/0.95}
  .p-big{width:92%}.p-small{width:50%;left:-2%}
  .wp,.leg--hero .wp,.leg--korea .wp,.leg--finish .wp{width:108px;left:auto;right:2%;top:1.5rem;bottom:auto;margin:0}
  .leg--hero .wp{top:auto;bottom:0}
  .screen{width:58%;right:-3%;bottom:-12%}
  .leg--r .screen{left:auto;right:-3%}
  .leg--korea .wide{width:100%}
  .korea-card{width:100%;margin:-2rem 0 0}
  .finish-copy{margin-top:-3rem;padding:1.4rem .6rem .6rem}
  .route-ink{stroke-width:3}
}
@media (prefers-reduced-motion:reduce){
  .js .hero-name .ch,.js .hero-copy>*,.js .hero-photos .print{animation:none;opacity:1;transform:none}
  .wp{opacity:1;transform:rotate(var(--rot))}
  .wp.stamped{animation:none}
  .terrain::before{transform:none}
}

/* legal pages: wide on desktop, body + sticky "on this page" sidebar (Crossroutes structure) */
main.legal{position:relative;z-index:1;padding:clamp(6rem,13vh,8rem) var(--sc-gutter) 4rem;max-width:1320px;margin:0 auto}
.legal__grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(2rem,5vw,5rem);align-items:start}
.legal__grid>*{min-width:0}
.legal__header,.legal__lang-note,.legal__body{background:var(--paper);box-shadow:0 0 16px 12px var(--paper);border-radius:18px}
main.legal .meta{font-size:.85rem;color:var(--trail);letter-spacing:.06em;margin:0}
main.legal h1{font:400 clamp(2.6rem,1.6rem + 3.4vw,4.6rem)/1 var(--sc-font-display);letter-spacing:-.03em;margin:.5rem 0 1rem}
.legal__meta{color:var(--sc-ink-soft);max-width:70ch;margin:0 0 1.2rem}
.legal__lang-note{font-size:.9rem;color:var(--sc-ink-soft);border-left:3px solid var(--route);padding:.2rem 0 .2rem 1rem;margin:0 0 2rem;border-radius:0;max-width:80ch}
.legal__body{max-width:none}
.legal__body h2{font:500 clamp(1.35rem,1.1rem + .8vw,1.75rem)/1.25 var(--sc-font-display);margin:2.8rem 0 .8rem;scroll-margin-top:90px;display:flex;gap:.6rem;align-items:baseline}
.legal__num{color:var(--route);font-variant-numeric:tabular-nums;min-width:1.6em}
.legal__body h3{font:600 1rem/1.3 var(--sc-font-text);margin:1.6rem 0 .4rem}
.legal__body p,.legal__body li{color:var(--sc-ink-soft);max-width:78ch;text-wrap:pretty}
.legal__body li{margin:.45rem 0}
.legal__body strong{color:var(--sc-ink);font-weight:600}
.legal__body a,main.legal a{color:var(--sc-ink);text-decoration:underline;text-decoration-color:var(--route);text-decoration-thickness:2px;text-underline-offset:.22em}
.legal__body code{font-size:.88em;background:color-mix(in oklab,var(--sc-ink) 7%,transparent);padding:.05em .35em;border-radius:5px}
.legal__callout{background:#f7f3e7;border-left:4px solid var(--trail);border-radius:0 14px 14px 0;padding:1rem 1.3rem;margin:1.2rem 0;max-width:86ch}
.legal__callout p{margin:0}
.table-scroll{overflow-x:auto;margin:1rem 0 1.2rem}
.legal-table{width:100%;border-collapse:collapse;font-size:.95rem;background:#f7f3e7;border-radius:14px;overflow:hidden}
.legal-table caption{text-align:left;font:600 .78rem/1 var(--sc-font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--trail);padding:0 0 .7rem}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:.8rem 1rem;border-bottom:1px dashed color-mix(in oklab,var(--sc-ink) 18%,transparent)}
.legal-table th{font-weight:600;color:var(--sc-ink);background:color-mix(in oklab,var(--trail) 16%,#f7f3e7)}
.legal-table td{color:var(--sc-ink-soft)}
.legal-table td:first-child{color:var(--sc-ink);font-weight:500;min-width:10ch}
.legal-table tr:last-child td{border-bottom:0}
.legal__toc{position:sticky;top:96px;background:#f7f3e7;border-radius:16px;padding:1.1rem 1.2rem;box-shadow:0 1px 2px hsl(var(--sc-shadow-color)/.2),0 12px 28px -18px hsl(var(--sc-shadow-color)/.6)}
.legal__toc-label{font:600 .78rem/1 var(--sc-font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--trail);cursor:pointer;list-style:none}
.legal__toc-label::-webkit-details-marker{display:none}
.legal__toc ol{margin:.9rem 0 0;padding:0 0 0 1.4rem;display:flex;flex-direction:column;gap:.15rem}
.legal__toc li{color:var(--trail);font-size:.82rem}
.legal__toc a{display:block;padding:.28rem 0;font-size:.92rem;color:var(--sc-ink-soft)!important;text-decoration:none!important;border-radius:6px;transition:color 140ms var(--sc-ease-out)}
.legal__toc a:hover,.legal__toc a.on{color:var(--route)!important}
/* Impressum: short sections laid out in columns */
.legal__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem 1.6rem;margin-top:1rem}
.legal__card{background:#f7f3e7;border-radius:16px;padding:1.2rem 1.4rem;box-shadow:0 1px 2px hsl(var(--sc-shadow-color)/.15)}
.legal__card h2{margin:0 0 .6rem;font:500 1.2rem/1.25 var(--sc-font-display);color:var(--sc-ink)}
.legal__card p{margin:0 0 .6rem;color:var(--sc-ink-soft)}
.legal__card p:last-child{margin-bottom:0}
.legal__card--wide{grid-column:1/-1}
.legal__card--key p{color:var(--sc-ink);font-size:1.15rem;line-height:1.5}
.legal__card a{color:var(--sc-ink);text-decoration:underline;text-decoration-color:var(--route);text-decoration-thickness:2px;text-underline-offset:.22em}
main.legal>.legal__header,main.legal>.legal__lang-note{max-width:none}
.legal-foot{position:relative;z-index:1;display:flex;gap:1.4rem;justify-content:center;padding:2rem var(--sc-gutter) 2.6rem;font-size:.9rem}
.legal-foot a{color:var(--sc-ink-soft)}
@media (max-width:1000px){
  .legal__grid{grid-template-columns:1fr}
  .legal__toc{position:static;order:-1}
  .legal__toc ol{columns:2;display:block}
}
@media (max-width:640px){
  .legal__toc ol{columns:1}
  .legal-table,.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:100%}
  .legal-table{background:none}
  .legal-table thead{display:none}
  .legal-table tr{background:#f7f3e7;border-radius:14px;padding:.4rem 0;margin:0 0 .8rem}
  .legal-table td{border:0;padding:.35rem 1rem}
  .legal-table td::before{content:attr(data-label);display:block;font:600 .7rem/1.4 var(--sc-font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--trail)}
  .legal-table td:first-child{font-size:1.05rem}
}

/* prints settle onto the map as they arrive */
.js .reveal-print{opacity:0;translate:0 60px;rotate:-6deg;transition:opacity 700ms var(--sc-ease-out),translate 900ms cubic-bezier(.2,1.25,.4,1),rotate 900ms cubic-bezier(.2,1.25,.4,1)}
.js .leg--r .reveal-print{rotate:6deg}
.js .reveal-print.in{opacity:1;translate:0 0;rotate:0deg}
.js .screen.reveal-print{translate:40px 40px;transition-delay:180ms}
.js .screen.reveal-print.in{translate:0 0}
@media (prefers-reduced-motion:reduce){.js .reveal-print{opacity:1;translate:none;rotate:none}}