/* Vytoky — "Upstream". Tokens:
   basalt #0b0c0d (ground) · foam #ecebe6 (text) · silt #9a9d99 (secondary) · glacial #8fd4c9 (water: the only accent)
   Type: Geologica (display/body) · Martian Mono (labels, data) · Piazzolla italic (chapter words, the second voice)
   Every size is fluid from a 390px phone to a 2560px (5K) display. */
:root{
  --basalt:#0b0c0d; --basalt-2:#121415; --foam:#ecebe6; --silt:#a3a6a2; --glacial:#8fd4c9; --soft:#d3d2cc;
  --hair:rgba(236,235,230,.14);
  --gut:clamp(16px,4.4vw,112px);
  --f-d:'Geologica',system-ui,sans-serif; --f-m:'Martian Mono',ui-monospace,monospace; --f-u:'Piazzolla',Georgia,serif;
  --t-mono:clamp(10.5px,calc(.5vw + 4px),18px);
  --t-body:clamp(15.5px,calc(.55vw + 10px),26px);
  --t-hero:clamp(44px,6.6vw,170px);
  --t-h2:clamp(32px,4.2vw,96px);
  --t-stage:clamp(24px,2.7vw,66px);
  --t-word:clamp(22px,1.9vw,46px);
}
*{box-sizing:border-box}
html{background:var(--basalt);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--basalt);color:var(--foam);font:300 var(--t-body)/1.6 var(--f-d);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video,canvas,svg{display:block}
.eyebrow{margin:0 0 1.9em;font:400 var(--t-mono)/1.4 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--silt)}
.display{margin:0;font:200 var(--t-hero)/.96 var(--f-d);letter-spacing:-.045em;text-wrap:balance}
.display--m{font-size:var(--t-h2);line-height:1.02;letter-spacing:-.035em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px solid var(--glacial);outline-offset:4px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,1.6vw,34px) var(--gut) clamp(28px,2.4vw,52px);pointer-events:none;
  background:linear-gradient(rgba(8,9,10,.72),rgba(8,9,10,0));transition:transform .6s cubic-bezier(.7,0,.2,1)}
.nav:focus-within{transform:none}
.nav a{pointer-events:auto;text-decoration:none;padding:16px 10px;margin:-16px -10px}
.mark{display:flex;align-items:center;gap:clamp(10px,.8vw,16px)}
.mark-river{width:auto;height:clamp(22px,1.9vw,36px);overflow:visible}
.mark-river path{fill:none;stroke:var(--glacial);stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.6,0,.2,1) .3s forwards}
.mark:hover .mark-river path{animation:redraw 1.2s cubic-bezier(.6,0,.2,1)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes redraw{0%{stroke-dashoffset:0}45%{stroke-dashoffset:-1}46%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
.mark-word{font:300 clamp(17px,1.25vw,28px)/1 var(--f-d);letter-spacing:.42em;margin-right:-.42em;color:var(--foam)}
.nav-links{display:flex;gap:clamp(16px,2.2vw,52px);font:400 var(--t-mono)/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase}
.nav-links a{color:var(--silt);transition:color .3s}
.nav-links a:hover{color:var(--foam)}

/* ---------- 1. film ---------- */
.film{position:relative;height:100vh;height:100svh}
.film-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#050606}
.film-poster{position:absolute;inset:0;background:url(../assets/film/S/stop0.webp?v=1790124804) 55% 50%/cover no-repeat;filter:brightness(.8)}
@media (max-aspect-ratio:4/5){.film-poster{background-image:url(../assets/film/P/stop0.webp?v=1790124804);background-position:50% 50%}}
.film-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s}
.film.ready .film-canvas{opacity:1}
/* legibility: captions always sit on a darkened lower half; the confluence caption sits on a darkened top */
.film-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(6,9,11,.74) 0,rgba(6,9,11,.3) 34%,rgba(6,9,11,0) 55%);transition:opacity .8s}
.film-scrim--top{background:linear-gradient(to bottom,rgba(6,9,11,.72) 0,rgba(6,9,11,0) 45%);opacity:0}
.film[data-stop="4"] .film-scrim--top{opacity:1}
.film[data-stop="3"] .film-scrim{background:linear-gradient(to top,rgba(6,9,11,.86) 0,rgba(6,9,11,.55) 38%,rgba(6,9,11,0) 66%)}
.film[data-stop="4"] .film-scrim--top{background:linear-gradient(to bottom,rgba(6,9,11,.82) 0,rgba(6,9,11,.4) 32%,rgba(6,9,11,0) 55%)}
.film[data-stop="5"] .film-scrim{opacity:1}
.chapter--source::before{content:"";position:absolute;inset:-18% -14%;z-index:-1;background:radial-gradient(closest-side,rgba(6,9,11,.62),rgba(6,9,11,0));pointer-events:none}

.chapter{position:absolute;left:var(--gut);bottom:clamp(44px,11vh,160px);max-width:min(clamp(560px,46vw,1200px),calc(100vw - 2*var(--gut)));opacity:0;pointer-events:none;transition:opacity .4s ease}
.chapter.on{opacity:1;pointer-events:auto;transition:opacity 1s cubic-bezier(.2,.7,.2,1) .1s}
.chapter.on>*{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.film:not(.left-hero) .chapter--hero.on>*{animation:none}
.chapter.on>:nth-child(2){animation-delay:.12s}.chapter.on>:nth-child(3){animation-delay:.24s}.chapter.on>:nth-child(4){animation-delay:.36s}
@keyframes rise{from{transform:translateY(26px);opacity:0}}
.chapter--right{left:auto;right:calc(var(--gut) + clamp(150px,11vw,260px));max-width:min(clamp(460px,34vw,900px),calc(100vw - 2*var(--gut)))}
.chapter--hero{max-width:calc(100vw - 2*var(--gut) - clamp(150px,11vw,260px))}
.chapter--hero .display{text-shadow:0 1px 30px rgba(0,0,0,.35)}
.lede{max-width:32em;margin:1.7em 0 0;color:var(--soft)}
.cue{margin:2.2em 0 0;padding:15px 0;border:0;background:none;cursor:pointer;font:400 var(--t-mono)/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--silt);animation:breathe 2.8s ease-in-out infinite}
.cue:hover{color:var(--foam)}
@keyframes breathe{50%{opacity:.45}}
.film.moving .cue{opacity:0}
.stage-n{display:flex;align-items:baseline;gap:.9em;margin:0 0 1.2em;font:400 var(--t-mono)/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:rgba(236,235,230,.9);text-shadow:0 0 14px rgba(0,0,0,.85)}
.stage-n b{font-weight:400}
.stage-w{font:italic 400 var(--t-word)/1 var(--f-u);font-variation-settings:'opsz' 30;letter-spacing:0;text-transform:none;color:var(--glacial)}
.stage-t{margin:0;font:200 var(--t-stage)/1.14 var(--f-d);letter-spacing:-.025em;text-wrap:balance;text-shadow:0 1px 24px rgba(0,0,0,.45)}
.chapter--confluence{top:clamp(90px,15vh,220px);bottom:auto}

.pins{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.pins li{position:absolute;display:flex;align-items:center;font:400 var(--t-mono)/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transform:translate(-6px,-50%);opacity:0;transition:opacity .35s ease}
.pins.on li{opacity:1;transition:opacity .9s ease}
.pins.on li:nth-child(1){transition-delay:.5s}.pins.on li:nth-child(2){transition-delay:.62s}.pins.on li:nth-child(3){transition-delay:.74s}.pins.on li:nth-child(4){transition-delay:.86s}.pins.on li:nth-child(5){transition-delay:.98s}
.pins li::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;border:1px solid var(--foam);box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),inset 0 0 0 6px var(--foam)}
.pins li::after{content:"";width:22px;height:1px;background:rgba(236,235,230,.7)}
.pins li span{order:1;background:rgba(5,6,6,.62);padding:.55em .75em}
.pins li.pin--l{flex-direction:row-reverse;transform:translate(calc(-100% + 6px),-50%)}
.pins-list{display:none;margin:1.4em 0 0;padding:0;list-style:none;flex-wrap:wrap;gap:8px 16px;font:400 10.5px/1.4 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

.chapter--source{bottom:auto;top:50%;left:50%;translate:-50% -50%;text-align:center;max-width:min(clamp(560px,44vw,1100px),calc(100vw - 2*var(--gut)))}
.chapter--source .stage-n{justify-content:center}
.source-word{margin:0;font:italic 300 clamp(72px,12vw,300px)/1.05 var(--f-u);font-variation-settings:'opsz' 30;color:var(--foam);letter-spacing:-.02em}
.chapter--source .stage-t{margin:.7em auto 0;font-size:clamp(18px,1.7vw,40px);line-height:1.35;max-width:24em}

.rail{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);display:flex;gap:16px;height:min(50vh,640px);width:clamp(150px,11vw,260px);transition:opacity .5s}
.rail::before{content:"";position:absolute;top:-30vh;bottom:-30vh;right:calc(-1*var(--gut));width:calc(100% + var(--gut) + 90px);z-index:-1;pointer-events:none;background:linear-gradient(to left,rgba(6,9,11,.58),rgba(6,9,11,0))}
.rail-track{position:relative;width:1px;background:var(--hair)}
.rail-fill{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--glacial);transform-origin:top;transform:scaleY(0)}
.rail-stops{position:relative;display:flex;flex-direction:column;justify-content:space-between;margin:-14px 0 -14px -22px;padding:0;list-style:none}
.rail-stops button{display:flex;align-items:center;gap:10px;min-height:28px;padding:0 6px 0 0;border:0;background:none;cursor:pointer;
  font:400 var(--t-mono)/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:rgba(236,235,230,.74);white-space:nowrap;text-shadow:0 0 12px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.8);transition:color .3s}
.rail-stops button i{flex:none;width:7px;height:7px;margin:0 4px 0 1px;border-radius:50%;border:1px solid rgba(236,235,230,.6);background:#0b0c0d;transition:transform .3s,background .3s,border-color .3s}
.rail-stops button b{font-weight:400;opacity:.75}
.rail-stops button.lit i{background:rgba(236,235,230,.6)}
.rail-stops button[aria-current=step]{color:var(--foam)}
.rail-stops button[aria-current=step] i{background:var(--glacial);border-color:var(--glacial);transform:scale(1.5)}
.rail-stops button:hover{color:var(--glacial)}
.rail-stops button:focus-visible{color:var(--glacial);outline:2px solid var(--glacial);outline-offset:3px}
.rail-stops button:hover i,.rail-stops button:focus-visible i{border-color:var(--glacial);transform:scale(1.5)}
.film-ticks{display:none;position:absolute;left:var(--gut);right:var(--gut);top:clamp(58px,8vh,90px);margin:0;padding:0;list-style:none;gap:6px}
.film-ticks li{flex:1;height:2px;background:rgba(236,235,230,.28);transition:background .5s}
.film-ticks li.lit{background:var(--glacial)}
.film-skip{position:absolute;right:var(--gut);bottom:clamp(44px,11vh,160px);padding:16px 0;font:400 var(--t-mono)/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:rgba(236,235,230,.75);text-shadow:0 0 12px rgba(0,0,0,.9);border-bottom:1px solid transparent;transition:color .3s}
.film-skip:hover{color:var(--glacial)}
.film[data-stop="5"] .film-skip{color:var(--foam);border-bottom-color:var(--glacial);animation:breathe 2.8s ease-in-out infinite}
.skip-link{position:fixed;left:16px;top:-60px;z-index:50;padding:10px 14px;background:var(--foam);color:var(--basalt);font:400 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:16px}

@media (max-width:760px){
  :root{--t-mono:12px}
  .rail{display:none}
  .film-skip{bottom:auto;top:clamp(64px,9vh,100px);right:var(--gut);padding:16px 0;font-size:12px}
  .film-ticks{display:flex}
  .chapter,.chapter--right{left:var(--gut);right:auto;max-width:calc(100vw - 2*var(--gut))}
  .chapter--hero{max-width:calc(100vw - 2*var(--gut))}
  .chapter--source{left:50%;max-width:calc(100vw - 2*var(--gut))}
  .film-scrim{background:linear-gradient(to top,rgba(6,9,11,.82) 0,rgba(6,9,11,.45) 42%,rgba(6,9,11,0) 66%)}
  .pins{display:none}
  .pins-list{display:grid;grid-template-columns:1fr;gap:9px}
  .chapter--confluence{top:auto;bottom:clamp(44px,11vh,160px)}
  .film[data-stop="4"] .film-scrim--top{opacity:0}
  .chapter--hero .display{font-size:clamp(40px,12.6vw,54px)}
  .lede{font-size:15.5px}
  .source-word{font-size:clamp(72px,22vw,120px)}
}

/* ---------- 2. the holding ---------- */
.about{position:relative;padding:clamp(110px,18vh,240px) var(--gut) clamp(40px,6vh,100px)}
.about-body{max-width:min(62em,78vw)}
.about-lede{margin:0;font:200 clamp(24px,2.4vw,56px)/1.28 var(--f-d);letter-spacing:-.015em;color:var(--foam);text-wrap:pretty}
.facts{margin:0;border-top:1px solid var(--hair)}
.facts div{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1.6fr);gap:16px;padding:clamp(16px,1.6vw,30px) 0;border-bottom:1px solid var(--hair)}
.facts dt{font:400 var(--t-mono)/1.6 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--silt)}
.facts dd{margin:0;color:var(--soft)}
@media (max-width:760px){.about-body{grid-template-columns:1fr}.facts div{grid-template-columns:1fr;gap:4px}}
.hero-kicker{display:block;margin:0 0 1.6em;font-weight:400;color:rgba(236,235,230,.78);text-shadow:0 0 14px rgba(0,0,0,.8)}

/* ---------- 3. springs ---------- */
.springs{position:relative;padding:clamp(80px,12vh,180px) var(--gut) clamp(40px,8vh,120px)}
.sec-head{max-width:min(80vw,1700px);text-wrap:balance;margin:0 0 clamp(48px,8vh,120px)}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.spring-row{display:flex;gap:clamp(8px,1vw,20px);margin:0;padding:0;list-style:none}
.spring{flex:1 1 0;min-width:0;transition:flex-grow 1s cubic-bezier(.7,0,.2,1)}
.spring.is-open{flex-grow:2.6}
.spring figure{position:relative;margin:0;height:clamp(360px,min(64vh,900px),900px);overflow:hidden;background:var(--basalt-2);clip-path:inset(100% 0 0 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
.spring:nth-child(2) figure{transition-delay:.08s}.spring:nth-child(3) figure{transition-delay:.16s}.spring:nth-child(4) figure{transition-delay:.24s}.spring:nth-child(5) figure{transition-delay:.32s}
.spring-row.in figure{clip-path:inset(0 0 0 0)}
.spring img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.spring img{transform:scale(1.12)}
.spring-row.in img{transform:scale(1)}
.spring-row.in .spring.is-open img,.spring-row.in .spring.play img{transform:scale(1.06);transition:transform 9s cubic-bezier(.2,.6,.3,1)}
.spring figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(40px,5vh,90px) clamp(14px,1.4vw,28px) clamp(16px,1.6vw,30px);background:linear-gradient(to top,rgba(6,9,11,.86) 0,rgba(6,9,11,.55) 45%,rgba(6,9,11,0))}
.spring-en{display:block;font:300 clamp(19px,1.45vw,34px)/1.12 var(--f-d);letter-spacing:-.01em;color:var(--foam);text-wrap:balance;text-shadow:0 1px 14px rgba(0,0,0,.6)}
@media (max-width:760px){
  .sec-head{max-width:none}
  .spring{flex:0 0 72vw}.spring.is-open{flex-grow:0}
  .spring figure{height:auto;aspect-ratio:3/4}
  .spring-row{overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gut));padding:0 var(--gut);scrollbar-width:none}
  .spring-row::-webkit-scrollbar{display:none}
  .spring{scroll-snap-align:center}
}

/* ---------- 3. principles: everything hinges on "before" ---------- */
.principles{position:relative;overflow-x:clip;padding:clamp(60px,10vh,160px) var(--gut) clamp(60px,9vh,140px);text-align:center}
.axis{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--glacial);transform-origin:top;transform:scaleY(var(--axis,0))}
.intro,.outro{position:relative;text-wrap:balance;max-width:30em;margin:0 auto;font:300 clamp(16px,calc(.5vw + 11px),24px)/1.5 var(--f-d);color:var(--soft)}
.hinge{position:relative;margin:clamp(60px,10vh,160px) 0}
.hinge .axis{top:-1.2em;bottom:calc(-1 * clamp(60px,10vh,160px) + 32px);opacity:.35}
.hinge-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:baseline;gap:clamp(14px,2vw,48px);margin:0;font:200 clamp(26px,7vw,180px)/1.08 var(--f-d);letter-spacing:-.045em}
.h-l{text-align:right;transform:translateX(calc(var(--k,1) * -18vw));opacity:calc(1 - var(--k,1))}
.h-r{text-align:left;transform:translateX(calc(var(--k,1) * 18vw));opacity:calc(1 - var(--k,1))}
.h-b{position:relative;padding:.1em .3em;background:var(--basalt);transform:translateY(-.08em);font:400 clamp(16px,3.3vw,84px)/1 var(--f-u);font-variation-settings:'opsz' 30;letter-spacing:0;color:var(--glacial)}
@media (max-width:640px){.hinge-row{gap:6px;font-size:clamp(26px,8.6vw,38px)}.h-b{font-size:.5em;padding:.1em .2em}}

/* ---------- 4. channels ---------- */
.channels{position:relative;padding:0 var(--gut) calc(clamp(48px,7vh,96px) + 200px)}
.channel-list{position:relative;max-width:1640px;margin:0 auto;border-top:1px solid var(--hair)}
.channel-list .axis{-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent)}
.channel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(80px,7vw,160px) minmax(0,1fr);gap:0 clamp(20px,3vw,72px);align-items:start;padding:clamp(40px,5.5vh,96px) 0}
.channel+.channel{border-top:1px solid var(--hair)}
.ch-n{position:relative;z-index:1;grid-column:2;grid-row:1;margin:0;background:var(--basalt);text-align:center;font:400 var(--t-mono)/2.4 var(--f-m);letter-spacing:.16em;color:var(--glacial)}
.ch-t{grid-column:1;grid-row:1;margin:0;text-align:right;font:200 clamp(26px,3vw,72px)/1.06 var(--f-d);letter-spacing:-.03em;text-wrap:balance}
.ch-d{grid-column:3;grid-row:1;margin:.3em 0 0;max-width:min(28em,34vw);color:var(--soft);font-size:calc(var(--t-body) * 1.08)}
.ch-d p{margin:0}
.ch-d .ch-more{margin-top:.8em;font-size:.86em;color:var(--silt)}
@media (max-width:760px){
  .channel{grid-template-columns:1fr;padding:40px 0}
  .ch-n,.ch-t,.ch-d{grid-column:1;grid-row:auto;text-align:left}
  .ch-n{line-height:1;margin-bottom:14px;background:none}
  .ch-d{margin-top:14px;max-width:none}
  .channel-list .axis{display:none}
}

/* ---------- 5. the sea ---------- */
.sea{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#07090a center/cover}
.sea.near{background-image:url(../assets/sea-top.webp)}
.sea-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sea::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(11,12,13,.55),rgba(4,6,7,.5) 70%,rgba(4,6,7,.85))}
.sea-inner{position:relative;z-index:2;text-shadow:0 0 16px rgba(0,0,0,.75);text-align:center;padding:14vh var(--gut) 18vh}
.write{display:inline-flex;flex-direction:column;align-items:center;gap:.9em;margin:2.4em 0 40px;text-decoration:none;font:400 var(--t-mono)/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase}
.write span{font:200 clamp(22px,2.2vw,52px)/1.2 var(--f-d);letter-spacing:-.01em;text-transform:none;border-bottom:1px solid var(--glacial);padding-bottom:.2em;transition:color .3s}
.write:hover span{color:var(--glacial)}
.legal{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(24px,4vh,48px);margin:0;text-align:center;font:400 clamp(11px,calc(.3vw + 6px),14px)/1.8 var(--f-m);letter-spacing:.1em;color:rgba(236,235,230,.72)}
.legal{text-shadow:0 0 12px rgba(0,0,0,.8)}
.legal > span{display:block}
.legal > span:nth-child(-n+2){display:inline}
.legal > span:nth-child(2)::before{content:", "}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- still plates: reduced motion, very short screens (≈400% zoom) or no film data ---------- */
.static .film{height:auto}
.static .film-stage{position:relative;height:auto;background:none}
.static .film-poster,.static .film-canvas,.static .film-scrim,.static .rail,.static .cue,.static .film-ticks,.static .film-skip,.static .film .motion-toggle,.static .pins{display:none}
.static .chapter{position:relative;inset:auto;translate:none;max-width:none;opacity:1;pointer-events:auto;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px var(--gut) 80px;background:var(--bg) center/cover;box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.4)}
.static .chapter.on>*{animation:none}
.static .chapter--source{text-align:left;justify-content:center}
.static .chapter--source .stage-n{justify-content:flex-start}
.static .chapter--source::before{display:none}
.static .pins-list{display:flex;flex-wrap:wrap;gap:8px 16px}
@media (max-height:340px){.static .chapter{min-height:0;padding:72px var(--gut) 40px}}
@media (prefers-reduced-motion:reduce){
  .spring figure{clip-path:none}.h-l,.h-r{transform:none;opacity:1}.axis{transform:none}
  .rv{opacity:1;transform:none}
  .mark-river path{animation:none;stroke-dashoffset:0}
  .spring img{transition:none!important;transform:none!important}
}

/* landscape phones: no room for the rail */
@media (max-height:500px) and (orientation:landscape){
  .rail{display:none}
  .film-ticks{display:flex}
  .chapter{bottom:28px}
  .chapter--confluence{top:64px}
  .display{font-size:clamp(34px,6vw,60px)}
}

@media (max-width:760px){
  .legal{font-size:10.5px;letter-spacing:.02em}
  .legal > span:nth-child(-n+2){display:block}
  .legal > span:nth-child(2)::before{content:none}
  .sea-inner{padding-bottom:28vh}
}

/* hero kicker + break: long on desktop, short on phones */
.k-short,.m-br{display:none}
@media (max-width:480px){
  .k-long{display:none}.k-short{display:inline}.m-br{display:inline}
  .hero-kicker{font-size:11px;letter-spacing:.12em}
}
/* headlines never leave a single word behind */
.sec-head .display{max-width:30ch;text-wrap:balance}
/* collapsed jurisdiction panels keep their name on one line on wide screens */
@media (min-width:1200px){.spring{min-width:clamp(200px,13vw,300px)}}
/* the sea rises out of the page instead of starting at an edge */
.sea{margin-top:-240px;padding-top:240px;-webkit-mask-image:linear-gradient(transparent,#000 240px);mask-image:linear-gradient(transparent,#000 240px)}

/* UX panel: legibility of the small controls over bright water, landscape phones, no-film fallback */
.stage-w{text-shadow:0 0 18px rgba(0,0,0,.9)}
.chapter--source::before{background:radial-gradient(closest-side,rgba(6,9,11,.75),rgba(6,9,11,0))}
@media (max-width:760px){.film-skip{background:rgba(5,6,6,.6);padding:14px 12px;margin-right:-12px}}
@media (max-height:500px) and (orientation:landscape){
  .k-long{display:none}.k-short{display:inline}
  .chapter--hero .display{font-size:clamp(30px,5vw,44px)}
  .hero-kicker{margin-bottom:.8em}
  .chapter--hero{bottom:20px}
}
.nofilm .rail,.nofilm .film-ticks,.nofilm .cue,.nofilm .film-skip{display:none}

/* design panel r2 */
.legal{font-size:clamp(12px,calc(.3vw + 6px),14px)}
.legal > span:nth-child(3),.legal > span:nth-child(4){display:inline}
.legal > span:nth-child(2)::after{content:"\A";white-space:pre}
@media (max-width:760px){
  .legal{font-size:11px}
  .legal > span:nth-child(3),.legal > span:nth-child(4){display:block}
  .legal > span:nth-child(2)::after{content:none}
  .chapter,.chapter--right{bottom:calc(28px + 44px + 20px)}
  .chapter--confluence{bottom:calc(28px + 44px + 20px)}
  .chapter--source{bottom:auto}
  .film-skip{top:auto;bottom:24px;right:var(--gut);margin:0;padding:16px 0;background:none;border-bottom:1px solid rgba(143,212,201,.6);text-shadow:0 0 12px rgba(0,0,0,.95)}
}

/* tap targets ≥ 44 px */
.skip-link{padding:16px 18px}
.cue{min-height:44px}
@media (max-height:500px) and (orientation:landscape){.nav a{padding:17px 10px;margin:-17px -10px}}

/* motion toggle (WCAG 2.2.2) + phone menu */
.motion-toggle{position:absolute;right:var(--gut);bottom:calc(clamp(44px,11vh,160px) + 48px);min-height:44px;padding:0;border:0;background:none;cursor:pointer;font:400 var(--t-mono)/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:rgba(236,235,230,.62);text-shadow:0 0 12px rgba(0,0,0,.9)}
.motion-toggle:hover{color:var(--glacial)}
.hero-kicker{text-shadow:0 0 16px rgba(0,0,0,.95),0 1px 4px rgba(0,0,0,.9)}
.menu-btn{display:none;pointer-events:auto;min-height:44px;padding:0 0 0 12px;border:0;background:none;cursor:pointer;font:400 var(--t-mono)/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--foam)}
@media (max-width:640px){
  .menu-btn{display:block}
  .nav-links{position:fixed;inset:0;z-index:-1;display:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;padding:0 var(--gut);background:rgba(8,9,10,.96)}
  .nav-links a:not(:last-child){display:block}
  .nav-links a{font-size:15px;color:var(--foam)}
  .nav.open .nav-links{display:flex}
  .nav.open{transform:none;background:none}
}
@media (max-width:760px){.motion-toggle{right:auto;left:var(--gut);bottom:28px}}

/* waiting for media on a slow connection: the next stop pulses */
@keyframes wait{50%{opacity:.25}}
.film.waiting .rail-fill{animation:wait 1s ease-in-out infinite}
.film.waiting .film-ticks li:not(.lit){animation:wait 1s ease-in-out infinite}

/* UX panel r3 */
.film-ctrl{position:absolute;right:var(--gut);bottom:clamp(44px,11vh,160px);display:flex;align-items:center;gap:clamp(20px,2vw,40px)}
.film-ctrl .film-skip,.film-ctrl .motion-toggle{position:static;inset:auto;margin:0}
.motion-toggle--sea{position:absolute;z-index:3;right:var(--gut);bottom:clamp(20px,4vh,44px);left:auto}
.k-tiny{display:none}
@media (max-width:359px){.k-short{display:none!important}.k-tiny{display:inline}}
@media (max-width:760px){
  .film-ctrl{left:var(--gut);right:var(--gut);bottom:24px;justify-content:space-between}
  .film-ctrl .film-skip{padding:16px 0}
  .motion-toggle--sea{right:auto;left:var(--gut);bottom:auto;top:clamp(90px,14vh,140px)}
}
/* portrait tablets: the pinned labels would fall off the frame, list them instead */
@media (max-aspect-ratio:4/5){.pins{display:none}.pins-list{display:grid;grid-template-columns:1fr;gap:9px}}
/* the source: both labels in foam over a wider scrim */
.chapter--source .stage-n,.chapter--source .stage-w{color:var(--foam)}
.chapter--source::before{inset:-26% -20%;background:radial-gradient(closest-side,rgba(6,9,11,.8),rgba(6,9,11,0))}
/* landscape phones: the nav folds into Menu, the hero fits between ticks and controls */
@media (max-height:500px) and (orientation:landscape){
  .menu-btn{display:block}
  .nav-links{position:fixed;inset:0;z-index:-1;display:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:22px;padding:0 var(--gut);background:rgba(8,9,10,.96)}
  .nav-links a{display:block}
  .nav.open .nav-links{display:flex}
  html:not(.static) .chapter:not(.chapter--source){max-height:calc(100svh - 64px - 72px);overflow:hidden}
  .film-ctrl{bottom:12px}
}
@media (max-height:400px){html:not(.static) .lede{font-size:13px;line-height:1.45;margin-top:.9em;max-width:40em}}
/* the menu is modal */
.nav.open .nav-links{pointer-events:auto}
.nav.open .nav-links a{pointer-events:auto}
/* pause motion stops CSS motion too */
.motion-off .cue,.motion-off .film-skip,.motion-off .rail-fill,.motion-off .film-ticks li,.motion-off .mark-river path{animation:none!important}
.motion-off .mark-river path{stroke-dashoffset:0}
.motion-off .spring img{transition:none!important}
/* the page behind an open menu does not scroll */
html.menu-open,html.menu-open body{overflow:hidden}
.nav-links{gap:clamp(24px,2.4vw,56px)}
/* landscape phones: confluence reads like the other stops (bottom, list instead of pins), clear of the controls */
@media (max-height:500px) and (orientation:landscape){
  .pins{display:none}
  .pins-list{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:.8em}
  html:not(.static) .chapter:not(.chapter--source){top:auto;bottom:72px;left:var(--gut);right:auto;max-width:calc(100vw - 2*var(--gut) - 280px)}
  html:not(.static) .chapter--source{bottom:auto;top:50%;left:50%;max-width:calc(100vw - 2*var(--gut));max-height:none}
  html:not(.static) .source-word{font-size:clamp(56px,16vh,96px)}
  html:not(.static) .chapter--source .stage-t{font-size:15px}
  .film[data-stop="4"] .film-scrim--top{opacity:0}
  .stage-t{font-size:clamp(18px,3.4vw,28px)}
}
/* design r4: the right-hand caption clears the control row; the footer toggle joins the centred column */
@media (min-width:761px){.chapter--right{bottom:calc(clamp(44px,11vh,160px) + 76px)}}
@media (max-width:760px){.motion-toggle--sea{left:50%;right:auto;top:auto;bottom:150px;transform:translateX(-50%)}}

/* pressed state of the motion toggle (label stays "Pause motion") */
.motion-toggle[aria-pressed=true]{color:var(--glacial);text-decoration:underline;text-underline-offset:.4em}
/* still plates never clip */
.static .chapter{max-height:none;overflow:visible}
/* the source block is centred from 50%: give it an explicit width so it never shrinks to half the screen */
.chapter--source{width:min(clamp(560px,44vw,1100px),calc(100vw - 2*var(--gut)))}
@media (max-height:420px) and (orientation:landscape){
  html:not(.static) .chapter--hero .cue{display:none}
  html:not(.static) .chapter--hero .display{font-size:clamp(28px,4.4vw,40px)}
  html:not(.static) .chapter:not(.chapter--source){max-height:calc(100svh - 64px - 60px)}
}

@media (max-width:760px){.about-body{max-width:none}}
/* 404 */
.nf{min-height:100vh;display:flex;align-items:center;background:#050606 url(../assets/film/L/stop5.webp) center/cover}
.nf-main{padding:0 var(--gut);max-width:40em;text-shadow:0 0 24px rgba(0,0,0,.8)}
.nf .write{margin-top:1.6em}

/* design r5: the firm's identity in the body face, only the number in mono; one mono label fewer on phones */
.legal{font-family:var(--f-d);font-weight:300;letter-spacing:.01em;font-size:clamp(12.5px,calc(.3vw + 8px),16px)}
.legal .reg{font-family:var(--f-m);font-size:.88em;letter-spacing:.06em}
@media (max-width:760px){html:not(.static) .chapter--hero .cue{display:none}.legal{font-size:12.5px;letter-spacing:0}}
/* footer toggle on short screens: top-right corner of the sea, clear of the email and the legal line */
@media (max-height:500px){.motion-toggle--sea{top:16px;bottom:auto;left:auto;right:var(--gut);transform:none}}
/* How we work */
.how{position:relative;padding:clamp(60px,10vh,160px) var(--gut) clamp(60px,9vh,140px)}

/* the header stays; below the film it sits on a quiet dark band */
.nav{transition:background-color .4s ease}
.nav.solid{background:rgba(11,12,13,.92);padding-bottom:clamp(18px,1.6vw,34px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
section[id],footer[id]{scroll-margin-top:clamp(64px,7vw,110px)}
.springs{padding-bottom:calc(clamp(40px,8vh,120px) + 240px)}

/* office panels: city first, country under it */
.spring-c{display:block;margin-top:.45em;font:400 var(--t-mono)/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:rgba(236,235,230,.72)}

/* office loops fade in over the still of the open panel */
.spring video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.spring.live video{opacity:1}
/* privacy page + footer link */
.legal-links{display:block;margin-top:.6em}
.legal-links a{color:inherit;text-underline-offset:.3em}
.doc{background:var(--basalt)}
.doc-head{padding:clamp(18px,1.6vw,34px) var(--gut)}
.doc-main{max-width:44em;padding:clamp(40px,8vh,100px) var(--gut) 120px}
.doc-main h1{margin-bottom:.8em}
.doc-main h2{margin:2em 0 .6em;font:300 clamp(22px,1.8vw,34px)/1.2 var(--f-d)}
.doc-main p{color:var(--soft);margin:0 0 1em}
.doc-main a{color:var(--glacial)}
.doc-date{margin-top:3em!important;font:400 var(--t-mono)/1 var(--f-m);letter-spacing:.12em;color:var(--silt)!important}
/* press */
.press .boiler{font:300 clamp(19px,1.5vw,26px)/1.5 var(--f-d);color:var(--foam)}
.logos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 1.2em}
.logos figure{margin:0;padding:clamp(28px,4vw,56px) 24px 16px;display:flex;flex-direction:column;align-items:center;gap:22px}
.logos img{width:min(100%,330px);height:auto}
.logo-dark{background:#121415;border:1px solid var(--hair)}
.logo-light{background:#ecebe6}
.logo-light figcaption{color:#3b3e44}.logo-light a{color:#1f5f58}
.logos figcaption{font-size:14px;color:var(--silt);text-align:center}
.press-zip{display:inline-block;padding:12px 0;border-bottom:1px solid var(--glacial);text-decoration:none}
.legal-links a+a{margin-left:1.2em}
@media (max-width:640px){.logos{grid-template-columns:1fr}}
/* analytics consent: a slim bar under the header */
.consent{position:fixed;z-index:30;left:50%;top:calc(clamp(18px,1.6vw,34px) + 44px);transform:translateX(-50%);display:flex;align-items:center;gap:16px;max-width:calc(100vw - 2*var(--gut));padding:10px 14px 10px 18px;background:rgba(11,12,13,.94);border:1px solid var(--hair);font:300 14px/1.4 var(--f-d);color:var(--soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.consent p{margin:0}.consent a{color:var(--glacial)}
.consent button{min-height:40px;padding:0 14px;border:1px solid var(--hair);background:none;color:var(--foam);font:400 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.consent button[data-c=granted]{border-color:var(--glacial);color:var(--glacial)}
@media (max-width:640px){.consent{flex-wrap:wrap;top:100px;left:var(--gut);right:var(--gut);transform:none}.consent p{flex:1 1 100%}}
/* tablets: captions sit above the control row; nav legible over bright footage */
@media (min-width:761px) and (max-width:1100px){
  html:not(.static) .chapter:not(.chapter--source):not(.chapter--confluence){bottom:calc(clamp(44px,11vh,160px) + 76px)}
}
.nav-links a,.mark-word{text-shadow:0 0 12px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.8)}
.nav:not(.solid){background:linear-gradient(rgba(8,9,10,.82),rgba(8,9,10,0))}

/* ---------- design r6 ---------- */
:root{--t-ui:clamp(13px,calc(.3vw + 9px),19px)}
/* UI labels in the body face, sentence case; mono only for the stop numerals */
.nav-links,.menu-btn,.rail-stops button,.motion-toggle,.film-skip,.cue{font:400 var(--t-ui)/1 var(--f-d);letter-spacing:.01em;text-transform:none}
.rail-stops button b{font:400 calc(var(--t-ui) * .82)/1 var(--f-m);letter-spacing:.06em}
.write{font:inherit;letter-spacing:0;text-transform:none;margin:1.6em 0 0}
/* the rail sizes to its labels; right-hand captions keep clear of it */
.rail{width:auto}
.chapter--right{right:calc(var(--gut) + clamp(200px,14vw,360px))}
/* 761–1180 px: pins would collide with the rail, list the offices instead */
@media (max-width:1180px){.pins{display:none}.pins-list{display:grid;grid-template-columns:1fr;gap:9px}}
/* office captions: city names align whether or not the country wraps */
.spring-c{min-height:2.6em}
@media (min-width:761px) and (max-width:1100px){
  .spring{flex:0 0 40vw}.spring.is-open{flex-grow:0}
  .spring figure{height:auto;aspect-ratio:3/4}
  .spring-row{overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gut));padding:0 var(--gut);scrollbar-width:none}
  .spring-row::-webkit-scrollbar{display:none}
  .spring{scroll-snap-align:start}
}
/* footer: one column in normal flow, nothing absolutely placed, so nothing can overlap */
.springs{padding-bottom:calc(clamp(40px,8vh,120px) + 120px)}
.sea{margin-top:-120px;padding-top:120px;-webkit-mask-image:linear-gradient(transparent,#000 120px);mask-image:linear-gradient(transparent,#000 120px);flex-direction:column;align-items:stretch;justify-content:space-between}
.sea-video{object-position:center 75%}
.sea-inner{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8vh var(--gut)}
.sea-foot{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 var(--gut) clamp(20px,4vh,44px)}
.sea-foot .legal{position:static;margin:0}
.sea-foot .motion-toggle--sea{position:static;inset:auto;transform:none;margin:0}
.legal .reg{font-family:inherit;font-size:1em;letter-spacing:0;font-variant-numeric:tabular-nums}
/* consent: top right, never over a heading */
.consent{left:auto;right:var(--gut);transform:none;max-width:min(560px,calc(100vw - 2*var(--gut)))}
@media (max-width:640px){.consent{left:var(--gut);right:var(--gut)}}
/* sub-pages */
.doc-head .mark,.nf .mark{text-decoration:none}
.doc-foot{padding:0 var(--gut) clamp(28px,5vh,56px)}
.doc-foot .legal{position:static;text-align:left;border-top:1px solid var(--hair);padding-top:22px;max-width:44em}
.nf{flex-direction:column;align-items:stretch;justify-content:flex-start}
.nf .doc-head{position:relative;z-index:1}
.nf-main{flex:1;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;color:var(--foam)}
.nf{position:relative}
.nf::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,9,11,.78),rgba(6,9,11,.35) 60%,rgba(6,9,11,.1))}
/* the mark reads as heavy as the wordmark */
.mark-river path{stroke-width:1.8}
@media (min-width:1920px){.mark-river path{stroke-width:2.2}}
/* a fine grain over the film hides upscaling texture */
.film-scrim:not(.film-scrim--top)::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Offices / Skip film land with the heading just under the header, not after the section's top padding */
#springs{scroll-margin-top:calc(var(--nav-h,90px) + clamp(16px,2.5vh,40px) - clamp(80px,12vh,180px))}

/* ---------- UX r1 ---------- */
/* the right-hand caption offset is a desktop rule; phones keep the full-width reset */
.chapter--right{right:auto}
@media (min-width:761px){.chapter--right{right:calc(var(--gut) + clamp(200px,14vw,360px))}}
/* the tablet pin list is for tall screens; landscape phones keep their one-line list */
@media (max-width:1180px) and (max-height:500px){.pins-list{display:flex}}
/* chapter labels are headings now: keep their old spacing */
h2.stage-n{margin:0 0 1.2em}
h2.source-word{margin:0}
/* "Continue" breathes with its underline, never with the text */
@keyframes breatheLine{50%{border-bottom-color:rgba(143,212,201,.2)}}
.film[data-stop="5"] .film-skip{animation:breatheLine 2.8s ease-in-out infinite}
/* offices at 761–1100 px: a 3 + 2 grid instead of a hidden-scrollbar strip */
@media (min-width:761px) and (max-width:1100px){
  .spring-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:clamp(8px,1vw,16px)}
  .spring{grid-column:span 2;flex:none}
  .spring:nth-child(4){grid-column:2 / span 2}.spring:nth-child(5){grid-column:4 / span 2}
  .spring figure{height:auto;aspect-ratio:4/5}
}
/* consent on small screens: one compact row under the header */
.c-short{display:none}
@media (max-width:640px),(max-height:500px){
  .consent{top:calc(var(--nav-h,64px) + 2px);left:var(--gut);right:var(--gut);transform:none;flex-wrap:nowrap;gap:10px;padding:6px 8px 6px 14px;font-size:13px}
  .consent p{flex:1 1 auto}
  .c-long{display:none}.c-short{display:inline}
  .consent button{min-height:40px;padding:0 10px;font-size:12.5px}
}
/* reduced motion: the sea never plays, so its toggle has nothing to pause */
@media (prefers-reduced-motion:reduce){.motion-toggle--sea{display:none}}
/* footer links: comfortable tap targets */
.legal-links a{display:inline-block;padding:12px 0}
.legal-links{margin-top:0}

/* very tall render viewports read the plates as normal-height blocks */
@media (min-height:2000px){.static .chapter{min-height:0}}

/* ---------- design r2 ---------- */
/* captions keep clear of the rail at every width (the rail sizes to its labels now) */
:root{--rail-zone:clamp(240px,calc(11vw + 80px),330px)}
@media (min-width:761px){
  html:not(.static) .chapter:not(.chapter--source){max-width:min(clamp(560px,46vw,1200px),calc(100vw - 2*var(--gut) - var(--rail-zone)))}
  html:not(.static) .chapter--hero{max-width:calc(100vw - 2*var(--gut) - var(--rail-zone))}
  html:not(.static) .chapter--right{right:calc(var(--gut) + var(--rail-zone))}
}
@media (min-width:761px) and (max-width:1100px){html:not(.static) .chapter--source{left:calc((100vw - var(--rail-zone)) / 2);max-width:calc(100vw - 2*var(--gut) - var(--rail-zone))}}
/* the rail's backing darkens where its labels land on snow (stop 05) */
.film[data-stop="4"] .rail::before{background:linear-gradient(to left,rgba(6,9,11,.82),rgba(6,9,11,.35) 70%,rgba(6,9,11,0))}
/* no mono caps left outside the numerals and the desktop map pins */
.consent button,.spring-c,.doc-date{font:400 var(--t-ui)/1.4 var(--f-d);letter-spacing:.01em;text-transform:none}
.consent button{font-size:14px}
.spring-c{color:rgba(236,235,230,.72)}
.pins-list{font:400 var(--t-ui)/1.4 var(--f-d);letter-spacing:.01em;text-transform:none;color:var(--foam);text-shadow:0 0 12px rgba(0,0,0,.9)}
@media (max-width:1180px) and (min-height:501px){.pins-list{display:flex;flex-wrap:wrap;gap:.2em 1.1em}}
/* footer text never sits on the surf */
.sea-foot{padding-top:48px;background:linear-gradient(rgba(4,6,7,0),rgba(4,6,7,.8) 45%)}
/* landscape phones: the stop-05 headline in the same scale as the other stops */
@media (max-height:500px) and (orientation:landscape){.chapter--confluence .display--m{font:200 clamp(18px,3.4vw,28px)/1.14 var(--f-d);letter-spacing:-.025em}}
/* sub-pages: same header row as the home page; footer rule as wide as the text */
.doc-head{display:flex;align-items:center;justify-content:space-between}
.doc-head .mark{min-height:44px}
.doc-links{display:flex;gap:clamp(18px,2.4vw,56px);font:400 var(--t-ui)/1 var(--f-d)}
.doc-links a{color:var(--silt);text-decoration:none;padding:14px 0}
.doc-links a:hover{color:var(--foam)}
.doc-foot{max-width:calc(44 * var(--t-body))}
.doc-foot .legal{max-width:none}
.nf .write{align-self:flex-start;align-items:flex-start}

/* ---------- UX r2 ---------- */
/* landscape phones: the consent card sits in the free column beside the captions, never over them */
@media (max-height:500px) and (orientation:landscape){
  .consent{top:auto;bottom:64px;left:auto;right:var(--gut);width:260px;flex-wrap:wrap}
  .consent p{flex:1 1 100%}
}
html.menu-open .consent{display:none}
/* offices 761–1100 px: 3 + 2 only on portrait tablets; landscape tablets keep one row so all five fit */
@media (min-width:761px) and (max-width:1100px) and (orientation:landscape){
  .spring-row{grid-template-columns:repeat(5,minmax(0,1fr))}
  .spring,.spring:nth-child(4),.spring:nth-child(5){grid-column:auto}
  .spring figure{aspect-ratio:auto;height:min(58vh,520px)}
}