/* denizors.design — staging v3 · Instrument Serif / Schibsted Grotesk / Geist Mono */
:root{--bg:#EEEFEC;--ink:#1F2428;--body:#454C52;--muted:#5C646B;--acc:#4F6B85;--rule:rgba(31,36,40,.18);--box:#E2E6E9;--ph:#DADDDA;
--serif:'Instrument Serif','Iowan Old Style',Georgia,serif;--sans:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;--mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg)}
.root{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;
background-color:var(--bg);background-image:radial-gradient(circle,rgba(31,36,40,.17) 1px,transparent 1.5px);background-size:30px 30px;background-position:15px 15px;overflow:hidden;overflow:clip;min-height:100vh}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--acc);--rgb:79 107 133}
a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
img{max-width:100%}
strong{font-weight:500;color:var(--ink)}
em{font-style:normal}
p,h1,h2,h3,ul,ol,figure,blockquote{margin:0}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.skip{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 12px;font-size:14px}
.skip:focus{left:12px;color:var(--bg)}

/* ---------- type tokens ---------- */
.t-stmt{font-family:var(--serif);font-weight:400;font-size:clamp(34px,calc(2.6vw + 14px),50px);line-height:1.08;letter-spacing:-.008em;max-width:22ch;text-wrap:balance}
.t-h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,calc(2.4vw + 12px),46px);line-height:1.08;letter-spacing:-.005em;max-width:20ch;text-wrap:balance}
.t-title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,calc(1.4vw + 16px),36px);line-height:1.1;letter-spacing:-.004em;max-width:24ch;text-wrap:balance}
.t-title a{color:inherit}
.t-h2{font-family:var(--sans);font-size:25px;line-height:1.25;font-weight:500;letter-spacing:-.015em;max-width:34ch;text-wrap:balance}
.t-h3{font-family:var(--sans);font-size:17px;line-height:1.3;font-weight:500;letter-spacing:-.012em;text-wrap:balance}
.t-lead{font-size:19px;line-height:1.45;letter-spacing:-.01em;color:var(--body);max-width:46ch;text-wrap:pretty}
.t-body{font-size:16px;line-height:1.6;letter-spacing:-.005em;color:var(--body);max-width:64ch;text-wrap:pretty}
.t-sm{font-size:14.5px;line-height:1.5;letter-spacing:-.003em;text-wrap:pretty}
.t-cap{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--muted);max-width:80ch}
.t-kick{font-family:var(--mono);font-size:11.5px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.t-lab{font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:4px}
.t-lab.pr,.tag{color:var(--acc)}
.t-big{font-family:var(--sans);font-size:64px;line-height:1;letter-spacing:-.04em;font-weight:450;font-variant-numeric:proportional-nums lining-nums;white-space:nowrap}
.t-big .u{font-size:.42em;letter-spacing:-.01em;font-weight:400;color:var(--muted)}
.t-big sup{font-size:.6em;line-height:0;vertical-align:.7em}
.t-bigword{font-family:var(--sans);font-size:40px;line-height:1.05;letter-spacing:-.03em;font-weight:450}
.t-title .d,.t-h1 .d,.t-stmt .d{font-family:var(--sans);font-size:.86em;letter-spacing:-.02em}
.lk{background:linear-gradient(var(--acc),var(--acc)) 0 100%/calc((1 - clamp(0,calc(var(--p,0)*3),1))*100%) 1px no-repeat;padding-bottom:.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lk:hover{background-size:100% 2px}

/* ---------- layout ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:28px clamp(16px,4vw,40px) 72px;display:flex;flex-direction:column;gap:64px}
main{display:flex;flex-direction:column;gap:96px}
.hdr{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14.5px;font-weight:500;letter-spacing:-.005em;position:relative;z-index:2}
.sig img{display:block;height:40px;width:auto}
.crumb{flex:1;padding-left:24px}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--acc)}
.hdr nav{display:flex;align-items:center;gap:22px}
.hdr nav a.on{color:var(--acc)}
.hdr .pdf{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;font-weight:400;border:1px solid var(--rule);padding:5px 9px;border-radius:3px}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:56px;align-items:end;padding-top:32px}
.hero>:not(.field){position:relative}
.hero-l{display:flex;flex-direction:column;gap:22px}
.hero-r{display:flex;flex-direction:column;gap:14px}
.hero:has(.hero-l>.t-kick:first-child){align-items:start}
.hero:has(.hero-l>.t-kick:first-child) .hero-r{padding-top:38px}
.field{position:absolute;top:-40%;width:60%;height:180%;filter:blur(24px);pointer-events:none}
@keyframes fL{0%,100%{transform:translate(0,0)}50%{transform:translate(6%,4%)}}
@keyframes fR{0%,100%{transform:translate(0,0)}50%{transform:translate(-6%,-3%)}}
.fL{animation:fL 16s ease-in-out infinite}.fR{animation:fR 18s ease-in-out infinite}
.sec{display:flex;flex-direction:column;gap:28px}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sechead-l{display:flex;flex-direction:column;gap:10px}
.list{display:flex;flex-direction:column}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--min,260px),100%),1fr));align-items:start}

/* code boxes */
.codebox{position:relative;background:var(--box);color:#2B3238;border-radius:6px;padding:20px 22px;font-family:var(--mono);font-size:13px;line-height:1.65;font-variant-ligatures:none;overflow-wrap:anywhere}
.codebox .c{color:#5C646B}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:12px}
.kv .k{color:#48627A}

/* project block (home, also, instruments, further) */
.proj{padding-bottom:40px}
.proj-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:center;padding-top:32px}
.proj-text{display:flex;flex-direction:column;gap:14px}
.rows{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.rowgrid{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px}
.rowgrid .t-sm{color:var(--body)}
.cta{align-self:flex-start;font-size:15px;font-weight:500;margin-top:4px}
.refs{display:flex;flex-direction:column;margin-top:8px}
.refs .tag{padding-bottom:8px}
.ref{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 8px;border-top:1px solid var(--rule);font-size:16px;transition:background .3s}
.ref:last-child{border-bottom:1px solid var(--rule)}
.ref:hover{background:rgba(255,255,255,.55)}
.ref strong{font-weight:500}

/* figures */
.fig{display:flex;flex-direction:column;gap:10px;min-width:0}
.vid{position:relative;overflow:hidden;background:var(--ph)}
.vid video,.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.filmcard{display:flex;flex-direction:column;gap:10px;padding:28px;background:var(--box);border-radius:6px}

/* case pages */
.brief .cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:24px;padding-top:18px}
.cell{display:flex;flex-direction:column;gap:8px}
.cell .t-sm{color:var(--body)}
.cell.hl{box-shadow:inset 2px 0 var(--acc);padding-left:14px}
.cell.hl .t-sm{color:var(--ink)}
.out{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--ink);padding-top:16px}
blockquote.t-stmt{max-width:26ch;margin-top:8px}
.pager-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:20px;font-weight:500}
.next{display:flex;align-items:center;gap:18px;text-align:right}
.next img{width:156px;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--ph)}

/* home bits */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:28px}
.how-item{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--rule);padding-top:14px}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start;margin-top:12px}
.awards{list-style:none;padding:0;margin-top:10px}
.aw-n{min-width:0}.aw .t-kick{flex:none}
.aw{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.timeline{list-style:none;padding:0;display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:18px 0;border-top:1px solid var(--rule)}
.tl>div{display:flex;flex-direction:column;gap:6px}
.contact .split{align-items:end}

/* instruments */
.stagebar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.stage{position:relative;aspect-ratio:16/10;min-height:460px;background:#fff;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.good{padding-left:1.1em;display:flex;flex-direction:column;gap:4px;color:var(--body)}
.spec{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:18px 0;border-top:1px solid var(--rule);align-items:baseline}

/* footer */
.foot-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-top:18px}

/* ---------- fold system ---------- */
[data-fx]{--p:0}
.fxw{display:inline-block;white-space:nowrap}
.ch{display:inline-block;position:relative;--t:calc((var(--p) - var(--k)*.6)/.4);--on:clamp(0,calc(var(--t)*40),1);--off:clamp(0,calc((var(--t) - 1)*40),1);transform-origin:50% 45%;color:rgb(var(--rgb,31 36 40) / calc(1 - var(--on)))}
.t-lead .ch,.t-body .ch,.rowgrid .t-sm .ch,.cell .t-sm .ch,.good .ch,.how-item .t-sm .ch,.tl .t-sm .ch{--rgb:69 76 82}
.t-cap .ch,.t-kick .ch,.t-lab .ch,.c .ch,.t-big .u .ch{--rgb:92 100 107}
.kv .k .ch{--rgb:72 98 122}
.tag .ch,.t-lab.pr .ch,.hdr nav a.on .ch{--rgb:79 107 133}
.codebox .ch{--rgb:43 50 56}
.codebox .c .ch{--rgb:92 100 107}
.cell.hl .t-sm .ch,strong .ch{--rgb:31 36 40}
a:hover .ch{--rgb:79 107 133}
.ch::before,.ch::after{position:absolute;left:-.2em;right:-.2em;top:.1em;text-align:center;font-family:var(--mono);font-size:.8em;font-style:normal;font-weight:400;letter-spacing:0;text-transform:none;line-height:inherit;color:rgb(79 107 133 / calc(var(--on) * (1 - var(--off))));pointer-events:none}
.ch::before{content:attr(data-g);content:attr(data-g) / ""}
.ch::after{content:attr(data-h);content:attr(data-h) / "";opacity:0}
@keyframes fa{0%{opacity:1}50%{opacity:0}}@keyframes fb{0%{opacity:0}50%{opacity:1}}
/* no 3D flip: letters fade out while a full-height mono glyph takes their place (rotating squashed the glyphs) */
/* glyphs only flicker while the page is actually scrolling (fold.js removes data-on ~150 ms after the last scroll) */
[data-on] .ch::before{animation:fa .14s steps(1) infinite}[data-on] .ch::after{animation:fb .14s steps(1) infinite}
.fx-line{height:1px;background:var(--ink);transform-origin:left center;transform:scaleX(clamp(0,calc(1 - var(--p)*1.4),1))}
.fxi{display:block;position:relative;overflow:hidden;container-type:inline-size;background:var(--ph);--e:calc(var(--p)*100%)}
/* the conversion line snaps to whole ASCII rows: no half-faded photo, no squeezed rows */
@supports (width:round(down,10px,3px)){.fxi{--e:round(down,calc(var(--p)*100%),calc(100% / var(--rows,40)))}}
/* the part of the image above the fold band (top ~10% of the screen) turns into ASCII drawn in the image's own colours */
.fxi img,.fxi video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.fxi[data-past] img,.fxi[data-past] video{-webkit-mask-image:linear-gradient(to bottom,transparent var(--e),#000 var(--e));mask-image:linear-gradient(to bottom,transparent var(--e),#000 var(--e))}
a.fxi:hover img,a.fxi:hover video{transform:scale(1.03)}
.fxi pre{position:absolute;inset:0;margin:0;padding:0;font-family:var(--mono);font-weight:600;font-variant-ligatures:none;font-feature-settings:"calt" 0;letter-spacing:0;white-space:pre;overflow:hidden;pointer-events:none;color:transparent;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;filter:saturate(1.45) contrast(1.1)}
.fxi .asc{-webkit-mask-image:linear-gradient(to bottom,#000 var(--e),transparent var(--e));mask-image:linear-gradient(to bottom,#000 var(--e),transparent var(--e))}
.fxi:not([data-past]) .asc,.fxi:not([data-past]) .noi{display:none}
.fxi[data-past]{background:var(--bg)}
.fxi .noi{opacity:0;-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--e) - 2 * 100% / var(--rows,40)),#000 calc(var(--e) - 2 * 100% / var(--rows,40)),#000 var(--e),transparent var(--e));mask-image:linear-gradient(to bottom,transparent calc(var(--e) - 2 * 100% / var(--rows,40)),#000 calc(var(--e) - 2 * 100% / var(--rows,40)),#000 var(--e),transparent var(--e))}
.fxi[data-on] .noi.n1{animation:fa .14s steps(1) infinite}.fxi[data-on] .noi.n2{animation:fb .14s steps(1) infinite}

/* ---------- rail + tab bar ---------- */
.rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;z-index:20}
.rail a{display:flex;align-items:center;gap:6px;height:24px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--muted)}
.rail a i{display:block;width:8px;height:1px;background:var(--muted);transition:width .25s cubic-bezier(.2,.7,.1,1),background .25s}
.rail a b{font-weight:400;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;white-space:nowrap;background:rgba(238,239,236,.92);padding:1px 4px}
.rail a:hover i,.rail a.on i{width:18px;background:var(--acc)}
.rail a.on,.rail a:hover{color:var(--acc)}
.rail a:hover b,.rail a:focus-visible b{opacity:1;transform:none}
.tabbar{display:none}

@media (max-width:1100px){.rail{display:none}.crumb{display:none}}
@media (max-width:900px){
 .hero:has(.hero-l>.t-kick:first-child) .hero-r{padding-top:0}
 .hero{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:16px}
 .proj-grid{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:24px}
 .split{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:760px){
 .hide-sm{display:none!important}
 .wrap{padding-top:18px;padding-bottom:104px;gap:48px}
 main{gap:72px}
 .sig img{height:34px}
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(238,239,236,.98);border-top:1px solid var(--rule)}
 .tabbar a{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500}.tabbar a.on{color:var(--acc)}
 .t-lead{font-size:17px}.t-body{font-size:15.5px}.t-h2{font-size:20px}
 .tabbar a{font-size:13.5px}
 .t-big{font-size:48px}.t-bigword{font-size:32px}
 .codebox{font-size:12.5px;padding:16px 18px}
 .rowgrid{grid-template-columns:84px minmax(0,1fr);gap:12px}
 .tl{grid-template-columns:minmax(0,1fr);gap:6px}
 .spec{grid-template-columns:minmax(0,1fr);gap:6px}
 .stage{aspect-ratio:3/4;min-height:0}
 .pager-row{flex-direction:column;align-items:flex-start}
 .next{text-align:left}
 .next img{width:120px}
 .ref{flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion: reduce){
 html{scroll-behavior:auto}
 .fL,.fR{animation:none}
 [data-fx]{--p:0!important}
 [data-on] .ch::before,[data-on] .ch::after,.fxi[data-on] .noi{animation:none}
}
/* fx links: underline per letter (inline-block letters don't inherit the parent's decoration, and the
   parent's background lands below the line box with this serif's tall metrics) */
.lk:has(.ch){background:none;padding-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:var(--acc)}
.lk .ch{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:rgb(79 107 133 / calc(1 - var(--on)))}
.lk:hover .ch{text-decoration-thickness:2px}
.lk .fxw+.fxw{margin-left:0}
.nb{display:inline-block;width:.26em}.nb.th{width:.16em}
.t-kick .nb,.t-lab .nb,.t-cap .nb,.codebox .nb{width:.6em}.t-kick .nb.th,.t-cap .nb.th{width:.3em}
/* awards & clients */
.marks{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-end;padding:8px 0 4px}
.mark{margin:0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mark img{display:block;height:68px;width:auto}
.mark img.mk-if{height:60px}.mark img.mk-gdc{height:40px;margin-bottom:14px}
.awards{list-style:none;padding:0;margin:0}
.aw{display:grid;grid-template-columns:64px minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px}
.aw .aw-p{font-size:14.5px;color:var(--body)}
.clients{display:flex;flex-direction:column;gap:20px;margin-top:24px}
.clients .wall{display:block;width:100%;max-width:980px;height:auto;margin:8px 0}
@media (max-width:760px){.aw{grid-template-columns:48px minmax(0,1fr);gap:4px 12px}.aw .aw-p{grid-column:2}.mark img{height:44px}.mark img.mk-if{height:38px}.mark img.mk-gdc{height:28px;margin-bottom:8px}}
/* colour wash behind the ASCII: a soft, blurred version of the image so the characters sit in its own colours */
.fxi pre{filter:saturate(1.7) brightness(.82) contrast(1.15)}
/* compact spatial work grid */
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:28px 24px}
.mini{display:flex;flex-direction:column;gap:12px;min-width:0}
.mini-t{display:flex;flex-direction:column;gap:6px}
.mini .t-h3 a{color:inherit}
/* perf: glyph pseudo-elements only exist while a block is mid-fold (was ~10k idle boxes on the home page) */
.ch::before,.ch::after{content:none}
/* perf: hard cut with clip-path instead of gradient masks (no mask layer re-rasterised per frame) */
.fxi[data-past] img,.fxi[data-past] video{-webkit-mask-image:none;mask-image:none;clip-path:inset(var(--e) 0 0 0)}
.fxi .asc{-webkit-mask-image:none;mask-image:none;clip-path:inset(0 0 calc(100% - var(--e)) 0)}
.fxi .noi{-webkit-mask-image:none;mask-image:none;clip-path:inset(calc(var(--e) - 2 * 100% / var(--rows,40)) 0 calc(100% - var(--e)) 0)}
/* perf v2: letter state is set by fold.js as a class (s1 glyph, s2 gone) instead of per-letter calc() on an inherited --p */
.ch{--on:0;color:rgb(var(--rgb,31 36 40))}
.ch.s1,.ch.s2{color:transparent}
.ch.s1{--on:1}
.ch.s1::before{content:attr(data-g);content:attr(data-g) / "";color:rgb(79 107 133)}
.ch.s1::after{content:attr(data-h);content:attr(data-h) / "";color:rgb(79 107 133)}
.lk .ch.s1,.lk .ch.s2{text-decoration-color:transparent}