/* Working the Seasons. One backdrop, morning to evening, and the page turns to paper as it scrolls.
   World: the brand board. Warm paper, ink of deep moss, two colours (Cornflower for the mark, links and
   markers; Moss for actions and rules), the logo's serif caps for the wordmark and headings, a geometric
   sans for reading. Radius 2px everywhere. Photographs are the only pictures. */

/* The two typefaces, served from here (SIL Open Font License, see fonts/OFL.txt): variable files, the same
   latin and latin-ext subsets Google serves, so nothing is fetched from anyone else. latin-ext carries the
   Estonian š and ž. */
@font-face{font-family:"Cormorant Garamond"; font-style:normal; font-weight:500 600; font-display:swap; src:url(fonts/cormorant-garamond-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond"; font-style:normal; font-weight:500 600; font-display:swap; src:url(fonts/cormorant-garamond-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Jost"; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/jost-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Jost"; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/jost-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --paper:#F9F7F1; --paper-2:#F1EEE5; --line:#DAD5C9; --stone:#C1BDB2; --sand:#B6A492;
  --ink:#23271F; --muted:#676B5B; --moss:#5B5F4C; --moss-deep:#3D4234;
  --cornflower:#7F8BA3; --cornflower-deep:#5C6B8F;
  --photo-ink:#0B0F0D;                                     /* the dark under the photographs, for shadows and glass on them */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");   /* paper grain */
  --r:2px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --shell: clamp(1.25rem, 4vw, 4.5rem);
  --display:"Cormorant Garamond","Times New Roman",Georgia,serif;   /* the lettering of the logo */
  --text:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* app.js mirrors all of these for browsers without scroll timelines */
  /* the transition, in scroll distance. The morning holds for the first --lift-start; then the snow lifts
     (--lift-travel over the range, 1.3x the page; its nearest lumps --near-travel, 1.65x), the light above it changes
     over the dusk window, the snow thins to nothing over the melt window, and the hero copy fades over its own window.
     The routes heading enters at --routes-in, as the last of the snow clears. */
  --drift: 8dvh;                                            /* how far the morning and its snow rise together over the first --lift-start (the far plane, .27x the page) */
  --lift-start: 30dvh; --lift-over: 90dvh; --lift-travel: 78dvh; --near-travel: 99dvh;   /* lift-start must be a third of lift-over: the lift keyframes turn at 33.333% */
  --dusk-start: 40dvh; --dusk-end: 58dvh;
  --melt-start: 54dvh; --melt-end: 74dvh;
  --copy-start: 40dvh; --copy-out: 56dvh;
  --routes-in: 36dvh; --head-start: 52dvh; --head-end: 62dvh;   /* the heading is already mid-screen, hidden under the snow, and fades in as the snow thins */
  --backdrop-end: 300dvh;
  color-scheme: light;
  accent-color: var(--moss);
}
*,*::before,*::after{box-sizing:border-box}
html{ scroll-padding-top:5.5rem; -webkit-text-size-adjust:100%; scrollbar-color:var(--stone) var(--paper) }
body{
  margin:0; background:var(--paper); background-image:var(--grain); color:var(--ink);
  font-family:var(--text); font-size:1rem; line-height:1.6;
  overflow-x:clip; caret-color:var(--moss);
}
::selection{background:var(--cornflower); color:var(--paper)}
img{display:block;max-inline-size:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cornflower-deep); outline-offset:3px; border-radius:var(--r)}
.skip{position:absolute; inset-inline-start:var(--shell); inset-block-start:-3rem; z-index:60; padding:.6rem .9rem; background:var(--moss-deep); color:var(--paper); border-radius:var(--r); font-size:.9rem}
.skip:focus{inset-block-start:.6rem}

/* ---------- header: a frosted strip of paper over the photograph, ink on the pages ---------- */
.bar{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:50;
  block-size:72px; display:flex; align-items:center; gap:2rem;
  padding-inline:var(--shell);
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border-block-end:1px solid color-mix(in srgb, var(--stone) 55%, transparent);
}
.mark{display:flex; align-items:center; gap:.8rem; color:var(--ink)}
.mark img{inline-size:38px; block-size:38px}
.mark .wm{font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:.18em; text-transform:uppercase; line-height:1; padding-block-start:.1em}
.bar nav{margin-inline-start:auto;display:flex;align-items:center;gap:1.6rem;
  font-size:.9rem;color:var(--muted);white-space:nowrap}
.bar nav > a[aria-current]{color:var(--ink)}
.lang{display:flex;gap:.1rem;font-size:.72rem;letter-spacing:.08em}
.lang a,.lang .soon{padding:.3rem .45rem;color:var(--muted)}
.lang a{border-radius:var(--r)}
.lang a[aria-current]{background:var(--moss-deep);color:var(--paper)}
.lang .soon{opacity:.5;cursor:default}   /* ET and FI until those pages exist */

/* ---------- the backdrop ----------
   Fixed behind the first two sections. A 4:3 plate covers it, sized from --h so the bottom stays covered. */
.backdrop{position:fixed; inset:0; z-index:0; container-type:size; background:var(--photo-ink); overflow:clip}
.plate{
  /* --sky-crop: how much of the photo's height is cropped off the top. 0 = the sky starts at the top
     edge; .08 lifts the sun toward the header and takes the same amount off the yellow. The plate is
     made tall enough that the bottom stays covered. */
  --sky-crop: .08;
  --h: max(calc((100cqh + 4dvh) / (1 - var(--sky-crop))), calc(100cqw * 3 / 4));
  position:absolute; left:50%; translate:calc(-50% + var(--px, 0px)) var(--py, 0px);   /* --px/--py: the pointer parallax (app.js, desktops) */
  top:calc(-1 * var(--sky-crop) * var(--h));
  block-size:var(--h);
  inline-size:calc(var(--h) * 4 / 3);
}
/* phones in portrait: anchor the top, zoom a little and slide toward the chimney so the
   smoke stays in frame (the sun goes out of frame on the left) */
@media (max-width:820px) and (orientation:portrait){
  .plate{
    --sky-crop:0;                                   /* the sun is out of frame on phones anyway; keep the sky */
    --h:calc(115cqh + 4dvh);
    left:74%; translate:calc(-74% + var(--px, 0px)) var(--py, 0px);
  }
}
.vista{position:absolute; inset:0; scale:1.015}   /* 1.5 % over: the slack the pointer parallax moves in (the settle lands here) */
.morning{position:absolute; inset:0; will-change:translate}
.layer{position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; pointer-events:none}
.layer-still{transition:opacity 400ms ease}          /* the photograph, over everything until the video has its first frame (app.js adds .live) */
.vista.live .layer-still{opacity:0}
.layer-canvas{opacity:0}                              /* the video, redrawn here while the page settles (app.js adds .settling) */
.vista.settling .layer-canvas{opacity:1}
/* the evening: full frame inside the lifting clip; the lift is the plate plus the travel, so the picture, moved
   back down by the travel, is never clipped by the frame's own bottom. The clip line sits at .9 of the picture's
   height, under opaque snow everywhere (the snow's edge is at .62-.84). */
.lift{position:absolute; inset:0 0 auto; block-size:calc(100% + var(--drift) + var(--lift-travel)); pointer-events:none;
  clip-path:inset(calc(.9 * var(--h)) 0 0 0); will-change:translate}
.layer-night{inset-block-end:auto; block-size:var(--h); transform-origin:50% 0; transition:scale 1600ms var(--ease-out)}
.night-full{opacity:0}   /* the unclipped evening: nothing until the dusk window */
/* the snow: the same plate width, its own height (the photograph plus the foot), top-aligned. Under the pointer it
   moves .6 more than the plate (the plate's --px/--py, set by app.js on desktops), so the parallax has a near
   plane and a far plane instead of one sheet. */
.layer-fore{block-size:auto; object-fit:fill; inset-block-end:auto; will-change:translate;
  transform:translate(calc(var(--px, 0px) * .6), calc(var(--py, 0px) * .6))}
.fore-near{transform:translate(calc(var(--px, 0px) * 1.1), calc(var(--py, 0px) * 1.1))}   /* the nearest snow, nearer still under the pointer */
/* the routes answer a hover with a slow push into the evening */
body:has(.route:hover) .layer-night{scale:1.15}

/* ---------- the page scrolls over the backdrop ---------- */
main{position:relative; z-index:1}
.hero{position:relative; block-size:100dvh}
.copy{position:absolute; z-index:1; inset-inline-start:var(--shell); inset-block-end:12vh;
  max-inline-size:min(52rem, calc(100vw - 2 * var(--shell)))}
.display{
  font-family:var(--display); font-weight:600;
  font-size:clamp(3.4rem, 8.6vw, 7.6rem);
  line-height:.94; letter-spacing:-.01em; margin:0;
  text-wrap:balance;
}
.copy .display{max-inline-size:12ch; color:var(--paper); text-shadow:0 2px 28px rgb(11 15 13/.6)}
/* each headline line is its own clip box, so it can rise into view; the box is padded so
   descenders are not clipped */
.line{display:block; overflow:hidden; padding-block:.06em .18em; margin-block:-.06em -.18em}
.line > span{display:block}
.lede{
  margin:1.8rem 0 0; max-inline-size:38ch; color:var(--paper);
  font-size:clamp(1.1rem,1.55vw,1.4rem); line-height:1.5;
  text-shadow:0 1px 2px rgb(11 15 13/.55), 0 1px 18px rgb(11 15 13/.85);   /* a tight edge plus the glow: legible over the bright fog without a scrim */
}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:2.2rem}
@media (max-width:820px) and (orientation:portrait){
  .copy{inset-block-end:14dvh}
}
/* short screens: a 600 px laptop window or a phone held sideways. The headline shrinks with the height
   and the copy sits lower, so nothing runs under the header. */
@media (min-width:900px) and (max-height:660px){
  .display{font-size:clamp(3rem,13vh,7.6rem)}
}
@media (max-height:520px){
  .copy{inset-block-end:5vh}
  .copy .display{font-size:2.4rem; max-inline-size:none}
  .lede{margin-block-start:.9rem; max-inline-size:52ch; font-size:1rem}
  .actions{margin-block-start:1rem}
}

/* ---------- routes: the evening, on frosted paper ---------- */
.routes{
  position:relative; isolation:isolate;
  padding:var(--routes-in) var(--shell) clamp(3rem,8vh,6rem);   /* the heading and the two doors arrive together, as one block, as the snow clears */
}
.routes::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, transparent 55%, var(--paper) 100%)}   /* the page turns to paper; no darkening over the picture */
.routes .display{font-size:clamp(2rem,5.5vw,4.5rem); max-inline-size:14ch; color:var(--paper); text-shadow:0 1px 2px rgb(11 15 13/.55), 0 2px 28px rgb(11 15 13/.55)}
.routes-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(.75rem,2vw,1.5rem);   /* the sky shows between the two */
  margin-block-start:clamp(2rem,4vh,3rem);
}
.route{
  padding:clamp(2rem,5vw,4rem) clamp(1.5rem,3.5vw,3.5rem);
  background:color-mix(in srgb, var(--paper) 62%, transparent); color:var(--ink); display:flex; flex-direction:column;
  border:1px solid color-mix(in srgb, var(--paper) 55%, transparent); border-block-end:0;
  backdrop-filter:blur(22px) saturate(120%); -webkit-backdrop-filter:blur(22px) saturate(120%);
  transition:background-color 400ms ease, opacity 400ms ease;
}
.route h3{font-family:var(--display);font-weight:600;margin:0;
  font-size:clamp(1.75rem,3.6vw,3.2rem);line-height:1;letter-spacing:-.01em}
.route p{color:var(--muted);max-inline-size:32ch;margin:.9rem 0 1.4rem}
.route-facts{list-style:none; margin:0 0 1.8rem; padding:0; color:var(--ink); font-size:.95rem}
.route-facts li{text-wrap:pretty; padding-block:.6rem; border-block-start:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.route-facts li:last-child{border-block-end:1px solid color-mix(in srgb, var(--ink) 14%, transparent)}
.route .go{display:inline-flex;align-items:center;gap:.55rem;color:var(--cornflower-deep);font-size:.95rem;font-weight:500;margin-block-start:auto}
.route .go span{transition:translate 260ms var(--ease-out)}

/* ---------- buttons and press feedback ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;border-radius:var(--r);font:inherit;border:0;cursor:pointer;   /* the two submit <button>s share this with the <a>s */
  padding:.95rem 1.5rem;font-size:.95rem;font-weight:500;white-space:nowrap;
  transition:transform 160ms var(--ease-out), translate 260ms var(--ease-out), box-shadow 260ms ease, background-color 160ms ease;
}
.btn-a{background:var(--moss-deep);color:var(--paper)}
.btn-b{border:1px solid color-mix(in srgb, var(--moss) 55%, transparent);color:var(--ink);background:transparent}
/* on the photograph both buttons sit on frosted paper */
.hero .btn-b{border-color:color-mix(in srgb, var(--paper) 70%, transparent);color:var(--paper);
  background:color-mix(in srgb, var(--photo-ink) 40%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn:active{transform:scale(.97)}
.lang a,.menu summary,.route .go,.bar nav > a,footer nav a{
  transition:transform 140ms var(--ease-out), color 140ms ease, background-color 140ms ease}
.lang a:active,.menu summary:active,.route:active .go{transform:scale(.94)}
.bar nav > a:active,footer nav a:active{transform:scale(.96)}
.bar nav > a,footer nav a{position:relative}
.bar nav > a::after,footer nav a::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:-4px;block-size:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 200ms var(--ease-out)}
.bar nav > a[aria-current]::after{transform:scaleX(1);background:var(--cornflower)}
@media (hover:hover) and (pointer:fine){
  .bar nav > a:hover,.lang a:hover,footer nav a:hover{color:var(--ink)}
  .lang a[aria-current]:hover{color:var(--paper);background:var(--moss-deep)}
  .bar nav > a:hover::after,footer nav a:hover::after{transform:scaleX(1)}
  .lang a:hover{background:color-mix(in srgb, var(--stone) 40%, transparent)}
  .btn:hover{translate:0 -2px; box-shadow:0 12px 28px rgb(61 66 52/.22)}
  .btn-a:hover{background:var(--moss)}
  .btn-b:hover{border-color:var(--moss);background:color-mix(in srgb, var(--moss) 8%, transparent)}
  .hero .btn-b:hover{border-color:var(--paper);background:color-mix(in srgb, var(--photo-ink) 60%, transparent)}
  .route:hover{background-color:color-mix(in srgb, var(--paper) 78%, transparent)}
  .route:hover .go span{translate:6px 0}
  .routes-inner:hover .route{opacity:.7}
  .routes-inner:hover .route:hover{opacity:1}
}

/* ---------- below: paper ---------- */
.facts{
  list-style:none; margin:0; padding:2rem var(--shell);
  display:flex; flex-wrap:wrap; gap:.6rem clamp(2rem,5vw,5rem);
  font-size:.95rem; color:var(--muted); border-block:1px solid var(--line); background:var(--paper-2); background-image:var(--grain);
}
.facts b{color:var(--ink);font-weight:500}

.process{position:relative; isolation:isolate; overflow:clip; padding:clamp(4rem,10vh,7rem) var(--shell); background:var(--moss-deep); color:var(--paper)}
.process::after{content:""; position:absolute; z-index:-1; inset-block:0; inset-inline-end:calc(-1 * clamp(4rem,12vw,14rem)); inline-size:min(70vh, 56vw); pointer-events:none;
  background:url(img/mark.webp) no-repeat center / contain; opacity:.13}   /* the mark, large and quiet, on the side the text leaves free */
.process h2{font-family:var(--display);font-weight:600;margin:0 0 3rem;
  font-size:clamp(2rem,5vw,4rem);line-height:1;letter-spacing:-.01em;max-inline-size:14ch}
.steps{display:grid;gap:0;max-inline-size:78rem}
.step{
  display:grid;grid-template-columns:minmax(0,22ch) minmax(0,44ch);
  gap:clamp(1rem,3vw,3rem);align-items:start;
  padding-block:2.1rem;border-block-start:1px solid color-mix(in srgb, var(--paper) 22%, transparent);
}
.step:last-child{border-block-end:1px solid color-mix(in srgb, var(--paper) 22%, transparent)}
.step h3{margin:0;font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:500;letter-spacing:-.005em}
.step p{margin:0;color:color-mix(in srgb, var(--paper) 74%, var(--moss-deep))}
/* each step sits a little further in, so the list reads as a path not a table */
.step:nth-child(2){margin-inline-start:clamp(0rem,3vw,3.5rem)}
.step:nth-child(3){margin-inline-start:clamp(0rem,6vw,7rem)}

/* a photograph between sections: the paper fades into it top and bottom */
.band{position:relative; block-size:clamp(240px, 36dvh, 400px); overflow:clip; background:var(--paper); --band-top:var(--paper); --band-bottom:var(--paper)}
.band img{inline-size:100%; block-size:100%; object-fit:cover; object-position:50% 40%}
.band::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, var(--band-top), transparent 22%, transparent 78%, var(--band-bottom))}
.process + .band{--band-top:var(--moss-deep)}
.band:has(+ .closing){--band-bottom:var(--sand)}

/* the close: the one committed colour field on the page */
.closing{padding:clamp(4rem,11vh,8rem) var(--shell);background:var(--sand);background-image:var(--grain);color:var(--ink)}
.closing h2{font-family:var(--display);font-weight:600;margin:0;
  font-size:clamp(2.2rem,6.5vw,5.5rem);line-height:.98;letter-spacing:-.01em;max-inline-size:16ch}
.closing p{color:color-mix(in srgb, var(--ink) 88%, var(--sand));max-inline-size:44ch;margin:1.4rem 0 2.4rem}
.closing .btn-b{border-color:color-mix(in srgb, var(--ink) 45%, transparent);color:var(--ink)}
.closing .pair{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}

footer{position:relative;z-index:1;padding:3.5rem var(--shell) 4rem;background:var(--paper);background-image:var(--grain);
  border-block-start:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:2rem 4rem;align-items:flex-start}
footer .mark{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:.9rem}
footer .mark img{inline-size:56px;block-size:56px}
footer .mark .wm{font-size:1.15rem;line-height:1.15;letter-spacing:.16em}
footer .mark .wm b{display:block;font-weight:500;font-size:.72em;letter-spacing:.22em}
footer nav{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;font-size:.9rem;color:var(--muted)}
footer nav a{padding-block:.35rem}   /* a finger-sized target on phones */
footer .addr{color:var(--muted);font-size:.85rem;margin-inline-start:auto;max-inline-size:26ch}
footer .addr a{text-decoration:underline;text-underline-offset:.18em}
footer .motto{margin:1.1rem 0 0;font-size:.95rem;color:var(--ink);letter-spacing:.02em}
footer .fine{color:var(--muted);font-size:.8rem;margin:.6rem 0 0;max-inline-size:40ch}

/* ---------- mobile menu: native details, no JS ---------- */
.menu{margin-inline-start:auto;display:none}
.menu summary{list-style:none;cursor:pointer;padding:.55rem .8rem;border:1px solid var(--line);
  border-radius:var(--r);font-size:.85rem;color:var(--ink);background:var(--paper)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--moss-deep);color:var(--paper);border-color:var(--moss-deep)}
.menu .sheet{position:absolute;inset-inline:0;inset-block-start:100%;background:var(--paper);
  border-block-end:1px solid var(--line);display:grid;padding:.5rem var(--shell) 1.25rem}
.menu .sheet a{padding:.85rem 0;border-block-end:1px solid var(--line);font-size:1rem;color:var(--ink)}
.menu .sheet a:last-child{border-block-end:0}

/* ---------- inner pages ---------- */
.prose p a,.lede a,.faq p a,.fine a{color:var(--cornflower-deep); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px}
.page-head{position:relative; isolation:isolate; overflow:clip; padding:clamp(7.5rem,18vh,11rem) var(--shell) clamp(2.5rem,6vh,4rem); background:var(--paper); background-image:var(--grain)}
.page-head::after{content:""; position:absolute; z-index:-1; inset-block:0; inset-inline-end:calc(-1 * clamp(3rem,10vw,12rem)); inline-size:min(60vh, 50vw); pointer-events:none;
  background:url(img/mark.webp) no-repeat center / contain; opacity:.18}
.page-head .display{font-size:clamp(2.6rem,6vw,5.5rem); max-inline-size:15ch; color:var(--ink); text-shadow:none}
.page-head .lede{max-inline-size:52ch; text-shadow:none; color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.25rem)}
.page-head .lede + .lede{margin-block-start:.9rem}
.prose{padding:clamp(3rem,8vh,6rem) var(--shell); background:var(--paper); background-image:var(--grain)}
.prose h2{font-family:var(--display); font-weight:600; text-wrap:balance; margin:0 0 1.6rem; font-size:clamp(1.8rem,4vw,3.2rem); line-height:1; letter-spacing:-.01em; max-inline-size:16ch}
.prose p{max-inline-size:62ch; margin:0 0 1.1rem; color:var(--ink)}
.prose p.dim{color:var(--muted)}
.prose ul{max-inline-size:62ch; margin:0 0 1.1rem; padding-inline-start:1.2rem; color:var(--ink)}
.prose li{margin-block:.35rem}
.prose li::marker{color:var(--cornflower)}
.prose .two{columns:2; column-gap:clamp(2rem,5vw,5rem); max-inline-size:70rem}
.prose .two li,.prose .two p{break-inside:avoid}
.prose .two h2,.notice h2{break-after:avoid; max-inline-size:none; font-size:1.15rem; font-family:var(--text); font-weight:500; letter-spacing:-.005em; margin:1.6rem 0 .5rem}   /* sub-headings inside columns and in the privacy notice: small, like .cols h3 */
.prose .two h2:first-child,.notice h2:first-child{margin-block-start:0}
.prose + .prose{padding-block-start:0}   /* two text sections in a row share one gap */
.cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap:2rem clamp(2rem,5vw,5rem); max-inline-size:78rem}
.cols h3{margin:0 0 .6rem; font-size:1.15rem; font-weight:500; letter-spacing:-.005em}
.cols .btn{margin-block-start:.4rem}
.people{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap:2rem clamp(2rem,6vw,6rem); max-inline-size:60rem; margin-block-start:2.5rem}
.people h3{margin:0; font-family:var(--display); font-weight:600; font-size:1.6rem; letter-spacing:0}
.people .role{color:var(--cornflower-deep); font-size:.92rem; margin:.25rem 0 .8rem}

/* FAQ: native details on the second paper */
.faq{padding:clamp(3rem,8vh,6rem) var(--shell); background:var(--paper-2); background-image:var(--grain)}
.faq h2{font-family:var(--display); font-weight:600; margin:0 0 1.5rem; font-size:clamp(1.8rem,4vw,3.2rem); line-height:1; letter-spacing:-.01em}
.faq details{border-block-start:1px solid var(--line); max-inline-size:60rem}
.faq details:last-of-type{border-block-end:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline;
  padding:1.15rem 0; font-size:clamp(1.05rem,1.5vw,1.25rem); font-weight:500; letter-spacing:-.005em; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; color:var(--cornflower-deep); font-family:var(--display); font-size:1.5rem; line-height:1; transition:rotate 200ms var(--ease-out)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{margin:0 0 1.4rem; max-inline-size:60ch; color:var(--muted)}
.faq .group + .group{margin-block-start:3.5rem}

/* forms: one column, labels above, nothing required for now */
.ask{padding:clamp(3rem,8vh,6rem) var(--shell); background:var(--paper-2); background-image:var(--grain); border-block-start:1px solid var(--line)}
.ask h2{font-family:var(--display); font-weight:600; text-wrap:balance; margin:0 0 .8rem; font-size:clamp(1.8rem,4vw,3.2rem); line-height:1; letter-spacing:-.01em; max-inline-size:16ch}
.ask > p{color:var(--muted); max-inline-size:52ch; margin:0 0 2.4rem}
.form{display:grid; gap:1.4rem; max-inline-size:34rem}
.field{display:grid; gap:.4rem}
.field label{font-size:.92rem; color:var(--ink)}
.field input,.field textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--stone); border-radius:var(--r); padding:.8rem .95rem; min-block-size:3rem; inline-size:100%;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.field input:focus-visible,.field textarea:focus-visible{outline:none; border-color:var(--cornflower-deep); box-shadow:0 0 0 3px color-mix(in srgb, var(--cornflower) 30%, transparent)}
.field textarea{min-block-size:7.5rem; resize:vertical}
.field .hint{font-size:.85rem; color:var(--muted); margin:0}
.consent{display:flex; gap:.8rem; align-items:flex-start; font-size:.92rem; color:var(--ink); max-inline-size:52ch}
.consent input{inline-size:1.15rem; block-size:1.15rem; margin:.2rem 0 0; flex:none}
.form .btn{justify-self:start; margin-block-start:.4rem}
.form .fine{margin:0; color:var(--muted); font-size:.85rem; max-inline-size:44ch}

@media (max-width:1024px){   /* tablets in portrait cannot fit the inline nav next to the wordmark */
  .bar nav a:not(.lang a){display:none}
  .menu{display:block}
  .bar nav{gap:.75rem}
}
@media (max-width:820px){
  .page-head::after{opacity:.09}   /* on phones the mark sits behind the text, so it steps back */
  .routes-inner{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;row-gap:.5rem}
  .step:nth-child(2),.step:nth-child(3){margin-inline-start:0}
  footer .addr{margin-inline-start:0}
  .prose .two{columns:1}
}
@media (max-width:480px){
  .bar .mark .wm{font-size:.9rem;letter-spacing:.14em}
}
/* the narrowest phones (320-360 px): a tighter bar, the coming-soon languages hidden, a smaller headline so the
   hero copy clears the header on a 568 px tall screen */
@media (max-width:360px){
  .bar{gap:1rem; padding-inline:1rem}
  .bar .mark .wm{font-size:.8rem;letter-spacing:.1em}
  .lang .soon{display:none}
  .display{font-size:2.9rem}
  .lede{font-size:1rem}
  .copy{inset-block-end:10dvh}
}

/* =====================================================================
   MOTION
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* --- the picture settles as the page opens: a small zoom-out, over before the copy has finished arriving.
         Short on purpose; a long tail at sub-pixel speed shimmers on the video's fine detail. --- */
  @keyframes settle{from{scale:1.05} to{scale:1.015}}   /* comes to rest 1.5 % over: the slack the pointer parallax moves in */

  /* --- the copy arrives: lines rise, then the rest --- */
  @keyframes rise-in{from{translate:0 110%} to{translate:0 0}}
  @keyframes fade-up{from{opacity:0; translate:0 16px} to{opacity:1; translate:0 0}}
  .line > span{translate:0 110%; animation:rise-in 1100ms var(--ease-out) 120ms forwards}
  .line + .line > span{animation-delay:240ms}
  .lede,.actions{opacity:0; animation:fade-up 900ms var(--ease-out) forwards}
  .lede{animation-delay:520ms}
  .actions{animation-delay:640ms}

  /* --- the day, scrubbed by the page --- */
  /* the morning drifts up slowly with the first scroll; the snow drifts with it (the first third of the lift range),
     then lifts away, and the evening is seen below the snow line. The frame holding the evening follows the snow
     exactly, and the evening inside it is moved the opposite way, so it stays where it is. */
  @keyframes drift{to{translate:0 calc(-1 * var(--drift))}}
  @keyframes lift{33.333%{translate:0 calc(-1 * var(--drift))} to{translate:0 calc(-1 * (var(--drift) + var(--lift-travel)))}}
  @keyframes lift-near{33.333%{translate:0 calc(-1 * var(--drift))} to{translate:0 calc(-1 * (var(--drift) + var(--near-travel)))}}
  @keyframes unlift{33.333%{translate:0 var(--drift)} to{translate:0 calc(var(--drift) + var(--lift-travel))}}
  @keyframes night-in{to{opacity:1}}                                /* ... the light above the snow changes ... */
  @keyframes fore-out{to{opacity:0}}                                /* ... and the snow thins away as it rises */
  @keyframes copy-out{to{opacity:0; visibility:hidden}}                                /* the hero copy has left before the snow reaches it */
  @keyframes head-in{from{opacity:0} to{opacity:1}}                 /* the routes heading appears through the thinning snow, already in place */
  @keyframes backdrop-out{0%,88%{visibility:visible} 100%{visibility:hidden}}
  .vista{animation:settle 3200ms cubic-bezier(.33,1,.68,1) both}   /* the opening settle, time-based; app.js leaves it alone in the scrub path */
  @supports (animation-timeline:scroll()) and (animation-range:0 100px){
    .morning{animation:drift linear both; animation-timeline:scroll(root); animation-range:0 var(--lift-start)}
    .lift{animation:lift linear both; animation-timeline:scroll(root); animation-range:0 var(--lift-over)}
    .layer-fore{animation:lift linear both, fore-out linear both; animation-timeline:scroll(root), scroll(root); animation-range:0 var(--lift-over), var(--melt-start) var(--melt-end)}
    .fore-near{animation-name:lift-near, fore-out}
    .lift .layer-night{animation:unlift linear both; animation-timeline:scroll(root); animation-range:0 var(--lift-over)}
    .night-full{animation:night-in linear both; animation-timeline:scroll(root); animation-range:var(--dusk-start) var(--dusk-end)}
    .copy{animation:copy-out linear both; animation-timeline:scroll(root); animation-range:var(--copy-start) var(--copy-out)}
    .routes .display{animation:head-in linear both; animation-timeline:scroll(root); animation-range:var(--head-start) var(--head-end)}
    .backdrop{animation:backdrop-out linear both; animation-timeline:scroll(root); animation-range:0 var(--backdrop-end)}
  }
  html.scrub .morning{animation:drift 1s linear both paused}
  html.scrub .lift{animation:lift 1s linear both paused}
  html.scrub .layer-fore{animation:lift 1s linear both paused, fore-out 1s linear both paused}
  html.scrub .fore-near{animation-name:lift-near, fore-out}
  html.scrub .lift .layer-night{animation:unlift 1s linear both paused}
  html.scrub .night-full{animation:night-in 1s linear both paused}
  html.scrub .copy{animation:copy-out 1s linear both paused}
  html.scrub .routes .display{animation:head-in 1s linear both paused}
  html.scrub .backdrop{animation:backdrop-out 1s linear both paused}

  /* --- sections arrive: blur to sharp, rising (JS adds .in as they enter) --- */
  html.js .reveal{opacity:0; translate:0 18px; filter:blur(8px);
    transition:opacity 900ms var(--ease-out), translate 900ms var(--ease-out), filter 900ms var(--ease-out)}
  html.js .reveal.in{opacity:1; translate:0 0; filter:blur(0)}
  html.js .route.reveal{filter:none}                              /* a filter here would break the panel's backdrop blur */
  html.js .zoom img{scale:1.12; transition:scale 6s var(--ease-out)}
  html.js .zoom.in img{scale:1}
}

/* Reduced motion: the photograph as it is, content in place. */
@media (prefers-reduced-motion:reduce){
  .line > span{translate:0 0}
  html.js .reveal{opacity:0; transition:opacity 300ms ease}
  html.js .reveal.in{opacity:1}
  .btn:active{transform:scale(.98)}
  .route .go span{transition:none}
  .layer-night{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .bar{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero .btn-b{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--photo-ink)}
  .route{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
}

/* Print: no bar, no backdrop, everything revealed, dark text on the moss block. Closed FAQ answers do not print. */
@media print{
  .bar,.backdrop,.menu,.skip{display:none}
  html.js .reveal{opacity:1;translate:none;filter:none;transition:none}
  html.js .zoom img{scale:1;transition:none}
  .process{background:var(--paper)} .process,.process h2,.step p{color:var(--ink)}   /* ink on paper whether or not backgrounds print */
  .hero{block-size:auto}
  .copy{position:static;animation:none}
  .routes .display{animation:none;opacity:1}
  .copy .display,.copy .lede,.routes .display{color:var(--ink);text-shadow:none}
}