@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --paper:#f0eeec; --ink:#2a2927; --ink-2:#77746f; --black:#0e0e0d; --white:#fff;
  --line:rgba(42,41,39,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1rem,2.2vw,2rem);
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.45 var(--font);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:var(--pad);top:-4rem;z-index:99;background:var(--black);color:#fff;padding:.6rem 1rem}
.skip:focus{top:1rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.caps,.paren,.bar,.pill,.feature-row,.story-meta,.story-count,.fine{font-size:.78rem;line-height:1.2;letter-spacing:.01em;text-transform:uppercase;font-weight:500}
.paren{margin:0}
.fine{color:var(--ink-2)}

/* pills, as on the references */
.pill{display:inline-flex;align-items:center;gap:.9rem;padding:.72rem 1.15rem;border-radius:999px;transition:background-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.pill i{width:.55rem;height:.55rem;border:1px solid currentColor;border-radius:50%;transition:background-color .3s}
.pill:hover i{background:currentColor}
.pill--dark{background:var(--black);color:#fff}
.pill--light{background:rgba(255,255,255,.88);color:var(--black);backdrop-filter:blur(6px)}
.pill--line{border:1px solid currentColor;cursor:pointer;list-style:none}
.pill--line::-webkit-details-marker{display:none}
.pill:hover{transform:translateY(-1px)}

/* bar: transparent over images, solid over paper */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1rem var(--pad);color:#fff;transition:color .4s,background-color .4s}
html.bar-solid .bar{color:var(--ink);background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px)}
.bar-nav{display:flex;gap:clamp(1.4rem,2.6vw,2.6rem)}
.bar-nav a:hover{text-decoration:underline;text-underline-offset:.3em}
.bar-brand{font-size:1.05rem;font-weight:800;font-stretch:72%;letter-spacing:.02em}
.bar-cta{justify-self:end;padding:.6rem 1rem}
html.bar-solid .bar-cta{background:var(--black);color:#fff}

/* intro: the opening film, built from stills */
/* the header film sits on a sticky stage; scrolling away pulls it into a framed cinemascope band */
.intro{position:relative;height:170svh;background:var(--paper);color:#fff}
.intro-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.intro-media{position:absolute;inset:0;background:var(--black);will-change:clip-path}
.intro-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
html.has-film .intro-film.is-ready{opacity:1}
.intro-media::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(.28 + var(--ip,0) * .16);pointer-events:none}
.intro-mark,.feature-row,.intro-skip{will-change:transform,opacity}
.film,.film-frame{position:absolute;inset:0;margin:0}
.film-frame{opacity:0;transition:opacity 2.4s cubic-bezier(.45,0,.25,1)}
.film.is-cut .film-frame{transition:none}
.film-frame.is-on{opacity:1}
.film-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.film-frame.is-on img{animation:drift 9s linear forwards}
@keyframes drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
.intro-mark{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.intro-mark h1{margin:0;display:flex;flex-direction:column;align-items:center;gap:.6rem}   /* flex: a too-wide mark overflows both sides evenly */
.wordmark{font-size:clamp(3.4rem,10vw,9.5rem);line-height:.86;font-weight:800;font-stretch:66%;letter-spacing:-.005em}
.intro-sub{font-size:clamp(.78rem,1.3vw,1.05rem);font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.feature-row{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(4.2rem,9vh,6rem);display:grid;grid-template-columns:1fr 1.2fr .6fr auto;gap:1rem;align-items:baseline}
.feature-title,.feature-meta{transition:opacity .5s}
.feature-link{display:inline-flex;align-items:center;gap:.6rem;border-bottom:1px solid currentColor;padding-bottom:.2rem}
.feature-link i{width:.5rem;height:.5rem;border:1px solid currentColor;border-radius:50%}
.intro-skip{position:absolute;z-index:3;right:var(--pad);bottom:1.2rem}

/* centred statements */
.statement{min-height:92svh;display:grid;place-items:center;padding:6rem var(--pad);background:var(--paper)}
.say{margin:0;max-width:22ch;text-align:center;font-size:clamp(1.9rem,4.6vw,4.4rem);line-height:.98;font-weight:700;text-transform:uppercase;letter-spacing:-.012em}
.say-small{margin:0 0 2.5rem;text-align:center;font-size:clamp(1.5rem,3vw,2.8rem);line-height:1;font-weight:700;text-transform:uppercase}
.say .w{display:inline-block;opacity:.12;transition:opacity .5s var(--ease)}
.say .w.is-in{opacity:1}

/* project stories: full screen, images change while the title stays */
.story{position:relative;height:calc(var(--n) * 100svh);background:var(--black);color:#fff}
.story-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.story-frames,.story-frame{position:absolute;inset:0;margin:0}
.story-frame{opacity:0}   /* hard cuts inside a project (Daniel, 01.11.) */
.story-frame.is-on{opacity:1}
.story-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 2.4s var(--ease);will-change:transform}
.story-frame.is-on img{transform:scale(1)}
.story-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.08) 40%,rgba(0,0,0,.34));pointer-events:none}
.story-text{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:1.1rem;text-align:center;padding:0 var(--pad)}
.story-text .caps{margin:0;opacity:.9}
.story-text h2,.story-text h1{margin:0;font-size:clamp(2.3rem,6.4vw,6.2rem);line-height:.9;font-weight:800;font-stretch:70%;text-transform:uppercase;letter-spacing:-.005em;max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.story-meta{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:1.4rem;display:flex;justify-content:space-between;margin:0}
.story-count{position:absolute;z-index:2;right:var(--pad);top:50%;margin:0;writing-mode:vertical-rl}

/* we do */
.categories{padding:clamp(5rem,14vh,9rem) var(--pad);text-align:center;background:var(--paper)}
.cat-list{list-style:none;margin:2.5rem 0 3rem;padding:0}
.cat-list a{display:block;font-size:clamp(2.6rem,8.4vw,8.4rem);line-height:.92;font-weight:800;font-stretch:68%;text-transform:uppercase;color:rgba(42,41,39,.14);transition:color .5s var(--ease)}
.cat-list a:hover,.cat-list a.is-in{color:var(--ink)}

/* practices: image and text side by side */
.practices{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;background:var(--paper)}
.practices-image{margin:0;position:relative;overflow:hidden}
.practices-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.practices-text{padding:clamp(5rem,12vh,8rem) clamp(1.5rem,5vw,5rem);display:grid;align-content:center;gap:2.6rem}
.practices-text article{max-width:34rem}
.practices-text h3{margin:0 0 .4rem;font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:1.05;font-weight:700;text-transform:uppercase}
.practices-text .caps{margin:0 0 1rem;color:var(--ink-2)}
.practices-text p{margin:0}

/* places */
.places{padding:clamp(5rem,14vh,9rem) var(--pad) 4rem;background:var(--paper)}
.map-wrap{position:relative;overflow:hidden;aspect-ratio:2.39/1;max-height:62svh;margin-inline:auto;cursor:ew-resize;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.map{position:absolute;left:0;top:0;display:block;width:150%;height:auto;max-width:none;will-change:transform}
.map-go{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.6rem}
.map-go .pill{background:none;font:inherit;font-size:.74rem;padding:.55rem 1rem;color:inherit}
.map-go .pill.is-on{background:var(--ink);color:var(--paper)}
@media (max-width:800px){.map-wrap{aspect-ratio:4/3}.map{width:330%}}
.land circle{fill:rgba(42,41,39,.22)}
.map-wrap:focus-visible{outline-offset:-2px}
.graticule line{stroke:var(--line)}
.pin circle{fill:var(--ink)}
.graticule line{stroke-width:.25}
.pin text{font:500 2.3px var(--font);text-transform:uppercase;fill:var(--ink-2)}
.pin--main text{font-size:3px;font-weight:700;fill:var(--ink)}
.map-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;list-style:none;margin:2rem 0 0;padding:0;font-size:.78rem;text-transform:uppercase;color:var(--ink-2)}
.map-list .main{color:var(--ink);font-weight:700}

/* prizes */
.prizes{padding:clamp(4rem,12vh,8rem) var(--pad);border-top:1px solid var(--line);background:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.prizes h2{margin:1rem 0 0;font-size:clamp(2rem,5vw,4.6rem);line-height:.92;font-weight:800;font-stretch:72%;text-transform:uppercase}
.big-num{font-size:1.9em;display:block;line-height:.8}
.prize-box summary{margin-top:1rem}
.prize-box[open] summary i{background:currentColor}
.prize-list{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--line)}
.prize-list li{display:grid;grid-template-columns:3.4rem 1fr 1fr;gap:.2rem 1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.prize-list li span:first-child{color:var(--ink-2)}
.prize-team{grid-column:2 / -1;color:var(--ink-2);font-size:.82rem}

/* contact */
.contact{padding:clamp(5rem,14vh,9rem) var(--pad) 2rem;background:var(--black);color:#fff}
.contact .say{margin:0 auto 4rem}
.clocks{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border-top:1px solid rgba(255,255,255,.18);padding-top:1.4rem;margin-bottom:4rem}
.clocks p{margin:0}
.clock{font-size:clamp(2rem,5vw,4.4rem);font-weight:700;font-stretch:72%;line-height:1;margin-top:.6rem !important;font-variant-numeric:tabular-nums}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.contact-grid h3{margin:0 0 .6rem;font-size:.9rem;font-weight:700;text-transform:uppercase}
.contact-grid p{margin:0;color:rgba(255,255,255,.7)}
.contact-grid a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.contact-grid a:hover{border-color:#fff}
.contact .fine{margin:5rem 0 0;color:rgba(255,255,255,.45)}

/* project pages */
.work-hero{position:relative;height:100svh;overflow:hidden;background:var(--black);color:#fff}
.work-hero-img{position:absolute;inset:0;margin:0}
.work-hero-img img{width:100%;height:100%;object-fit:cover;animation:drift 12s linear forwards}
.work-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.26)}
.work-intro{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding:clamp(4rem,12vh,8rem) var(--pad)}
.work-lead{margin:0 0 2.4rem;font-size:clamp(1.4rem,2.6vw,2.4rem);line-height:1.12;font-weight:600;max-width:30ch}
.facts{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:1.4rem 2rem;border-top:1px solid var(--line);padding-top:1.4rem}
.facts dt{font-size:.74rem;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.facts dd{margin:.3rem 0 0;font-size:1.05rem}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);padding:0 var(--pad) clamp(4rem,12vh,8rem)}
.shot{margin:0}
.shot--wide{grid-column:1 / -1}
.shot img{width:100%}
.shot figcaption{margin-top:.6rem;font-size:.74rem;text-transform:uppercase;color:var(--ink-2)}
.next{position:relative;display:block;height:80svh;overflow:hidden;background:var(--black);color:#fff}
.next figure{position:absolute;inset:0;margin:0}
.next img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:transform 1.4s var(--ease)}
.next:hover img{transform:scale(1.04)}
.next .next-title{font-size:clamp(2.2rem,6vw,5.6rem);line-height:.9;font-weight:800;font-stretch:70%;text-transform:uppercase}

@media (max-width:800px){
  .bar{grid-template-columns:auto 1fr auto}
  .bar-nav{display:none}
  .bar-brand{grid-column:1}
  .feature-row{grid-template-columns:1fr auto;bottom:4.6rem}
  .feature-row>span:first-child,.feature-meta{display:none}
  .practices,.prizes,.contact-grid,.work-intro{grid-template-columns:1fr}
  .practices-image{height:62svh}
  .clocks{grid-template-columns:1fr;gap:1.4rem}
  .story-count{display:none}
  .shots{grid-template-columns:1fr}
  .prize-list li{grid-template-columns:3rem 1fr}
  .prize-list li span:nth-child(3){grid-column:2;color:var(--ink-2)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .say .w{opacity:1}
}

/* ── typographic motion, repeated across the site ── */
/* 1 kinetic marquee: speed and width follow the scroll */
.marquee{overflow:hidden;background:var(--paper);padding:clamp(2.5rem,7vh,5rem) 0;border-block:1px solid var(--line)}
.mq-row{white-space:nowrap;font-size:clamp(3.6rem,12vw,11.5rem);line-height:.9;font-weight:800;text-transform:uppercase;font-stretch:68%;transform:scaleX(calc(1 + var(--vel,0) * .28));transform-origin:50% 50%}
.mq-track{display:inline-flex;gap:.3em;padding-right:.3em;will-change:transform}
.mq-track b{font-weight:200;opacity:.5}
/* 2 text mask: photographs inside the letters, drifting with the scroll */
.mq-row--fill .mq-track,.cat-list a.is-in,.say--fill{background-image:var(--fill);background-size:auto 160%;background-repeat:repeat-x;background-position:var(--fx,0%) var(--fy,50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq-row--fill .mq-track b{opacity:1}
.cat-list a{color:transparent;-webkit-text-stroke:1px rgba(42,41,39,.28)}
.cat-list a.is-in{-webkit-text-stroke:0;background-size:cover}
.cat-list a:hover{color:transparent;-webkit-text-stroke-color:var(--ink)}
.say--fill{font-size:clamp(4rem,16vw,15rem);max-width:none;font-stretch:66%;background-size:cover;line-height:.88}
/* 3 title cards: letters rise from a mask line, then breathe with the scroll */
.split-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split-c{display:inline-block;transform:translate3d(0,108%,0);transition:transform 1.25s var(--ease);transition-delay:calc(var(--i) * 30ms)}
.is-in>.split-w>.split-c,.is-in .split-w>.split-c{transform:none}
/* 4 letter reveal (calm successor of the scramble) and odometer */
.rv-w{display:inline-block;white-space:nowrap}
.rv-c{display:inline-block;opacity:0;transform:translate3d(0,.45em,0);filter:blur(6px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i) * 28ms)}
.is-rv .rv-c{opacity:1;transform:none;filter:blur(0)}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);padding:clamp(3rem,10vh,6rem) var(--pad);background:var(--paper);border-top:1px solid var(--line)}
.numbers .caps{margin:.9rem 0 0;color:var(--ink-2)}
.num{margin:0;font-size:clamp(2.6rem,6.4vw,6.4rem);line-height:.9;font-weight:800;font-stretch:66%;display:flex;align-items:baseline;gap:.12em;white-space:nowrap}
.num small{font-size:.32em;font-weight:600;font-stretch:100%}
.odo{display:inline-flex;font-variant-numeric:tabular-nums}
.odo-d{display:inline-block;height:1em;line-height:1;overflow:hidden}
.odo-s{display:flex;flex-direction:column;transition:transform 1.8s var(--ease);transition-delay:calc(var(--i) * 90ms)}
.odo-s span{height:1em;line-height:1}
.is-in .odo-s,.odo.is-in .odo-s{transform:translateY(calc(var(--d) * -1em))}
@media (max-width:800px){
  .numbers{grid-template-columns:1fr 1fr;row-gap:2.4rem}
}
@media (prefers-reduced-motion:reduce){
  .split-c,.rv-c{transform:none;opacity:1;filter:none}
}

/* films: cinemascope, one per practice */
.films{background:var(--black);color:#fff;display:grid;gap:2px}
.film-sec{position:relative;margin:0}
.film-sec video{display:block;width:100%;aspect-ratio:1920/804;object-fit:cover;background:#000}
.film-sec figcaption{position:absolute;left:var(--pad);right:var(--pad);bottom:1.2rem;display:grid;grid-template-columns:auto 1fr auto auto;gap:1rem;align-items:center;font-size:.78rem;text-transform:uppercase;font-weight:500}
.film-sec .pill{border:0;font:inherit;cursor:pointer}
@media (max-width:800px){.film-sec figcaption{grid-template-columns:1fr auto;bottom:.8rem}.film-sec .paren,.film-place{display:none}}

/* living frames: on large screens a short clip, cut into the motion, replaces the still (poster = its first frame) */
.live{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
html.can-live .live{display:block}
html.can-live .story-frame .live{transform:scale(1.06);transition:transform 2.4s var(--ease)}
html.can-live .story-frame.is-on .live{transform:scale(1)}

/* wordmark unfolds: each initial pulls its word out, the whole mark scales to fit (transform only) */
.wordmark[data-unfold]{display:inline-flex;align-items:baseline;justify-content:center;white-space:nowrap;transform-origin:50% 50%}
.wm-office{display:inline-flex;align-items:baseline}
.wm-t{display:inline-block;overflow:hidden;max-width:0;vertical-align:baseline;transition:max-width 1.4s cubic-bezier(.65,0,.2,1)}
.wm-t>span{display:inline-block;opacity:0;transform:translate3d(-.15em,0,0);transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.wordmark.is-open .wm-t{max-width:var(--w,8em)}
.wordmark.is-open .wm-t>span{opacity:1;transform:none;transition-delay:.25s}
.intro-sub{transition:opacity .6s var(--ease)}
.intro-mark.is-open .intro-sub{opacity:0}
@media (max-width:800px){
  .wordmark.is-open[data-unfold]{flex-direction:column;align-items:center}
  .wordmark.is-open .wm-plus{line-height:.9}
}