@font-face{font-family:"Familjen";src:url("fonts/familjen-grotesk-400-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Familjen";src:url("fonts/familjen-grotesk-400-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF}
@font-face{font-family:"Schibsted";src:url("fonts/schibsted-grotesk-400-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Schibsted";src:url("fonts/schibsted-grotesk-400-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF}
@font-face{font-family:"GeistMono";src:url("fonts/geist-mono-400-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"GeistMono";src:url("fonts/geist-mono-400-latin-ext.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF}
/* Shared by all presets: reset, tile media, project page skeleton, text pages. Values come from preset variables. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--ground);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--ground);color:var(--ink);padding:8px 12px}
.skip:focus{left:8px}

/* home tiles: poster first, loop fades in once it plays */
.tile{overflow:hidden}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile video{opacity:0;transition:opacity .35s}
.tile.live video{opacity:1}

/* project page: text sheet on the left, films with frames on the right, one film per screen */
html.work{scroll-snap-type:y proximity}
.case{display:grid;grid-template-columns:minmax(0,1fr) var(--video);gap:64px;padding:0 var(--pad);max-width:1440px;margin:0 auto}
.info{position:sticky;top:var(--bar);align-self:start;height:calc(100svh - var(--bar));display:flex;flex-direction:column;justify-content:safe center;max-width:440px}
.info dl{display:grid;grid-template-columns:96px 1fr;gap:8px 16px;margin-top:40px;font-size:15px}
.info dt{color:var(--muted)}
.desc{margin-top:32px;font-size:16px;line-height:1.55}
.desc p+p{margin-top:.8em}
.is-draft{color:var(--muted)}
.index{margin-top:40px;list-style:none;display:grid;gap:6px}
.index a{display:flex;gap:14px;color:var(--muted);transition:color .3s}
.index a.on,.index a:hover{color:var(--ink)}
/* campaigns with many films: the list goes to two columns so the text sheet still fits one screen */
.index.long{grid-template-columns:1fr 1fr;column-gap:24px}
.films{display:grid;min-width:0}
.film{min-height:calc(100svh - var(--bar));display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-margin-top:var(--bar)}
.film header{display:flex;justify-content:space-between;gap:16px;margin-bottom:10px;color:var(--muted)}
.film video{width:100%;height:auto;aspect-ratio:var(--ar);background:#111}
.frames{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fgap);margin-top:var(--fgap)}
.frames img{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;background:#111}
/* vertical film: tall video with a 2 x 4 block of frames beside it, still one screen */
.film.vertical .media{display:flex;gap:var(--fgap);--H:min(calc(100svh - var(--bar) - 110px),calc((var(--video) - 6px) / .844))}
.film.vertical video{width:auto;height:var(--H);flex:none}
.film.vertical .frames{margin-top:0;grid-template-columns:repeat(2,auto);align-content:start;justify-content:start}
.film.vertical .frames img{width:auto;height:calc((var(--H) - 3 * var(--fgap)) / 4)}

/* text pages: bio, contact, 404 */
.side{min-height:calc(100svh - var(--bar));display:flex;flex-direction:column;justify-content:center;padding:48px 0}
.prose p{font-size:clamp(17px,1.4vw,21px);line-height:1.5;max-width:36em}
.prose p+p{margin-top:1em}
.note{color:var(--muted);font-size:13px;margin-bottom:1.6em}
.mail{display:inline-block;font-weight:700;font-size:clamp(26px,3.4vw,54px);letter-spacing:-.04em;line-height:1.05;overflow-wrap:anywhere}
.links{list-style:none;margin-top:32px;display:grid;gap:8px;font-size:18px}
.links a,.more a{border-bottom:1px solid currentColor;padding-bottom:1px}
.more{margin-top:36px;font-size:16px}

@media (prefers-reduced-motion:reduce){.tile video{display:none}*{scroll-behavior:auto!important}}

/* Preset C: monitor wall. Black, 16 x 9 grid per screen, programme monitor in full colour, hover click sound. */
:root{--ground:#050505;--ink:#f2f2ee;--muted:#9a9a94;--frame:#fff;--seam:3px;--row:calc((100svh - 9 * var(--seam)) / 9);--bar:64px;--pad:20px;--fgap:4px;--font:"Familjen",system-ui,sans-serif;--video:min(820px,calc((100svh - 170px) / .844),58vw)}
.mono{font-family:"GeistMono",ui-monospace,monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
/* fixed bar floating over the wall */
.bar{position:fixed;inset:0 0 auto 0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:16px 20px 40px;background:linear-gradient(rgba(5,5,5,.55),rgba(5,5,5,0));pointer-events:none}
.bar>*{pointer-events:auto}
.sig{line-height:1.45;color:var(--ink);justify-self:start}
.sig span{color:var(--muted)}
.pgm{color:var(--ink);text-align:center;white-space:nowrap}
.pgm b{font-weight:400;color:var(--muted);margin-right:10px}
.bar nav{justify-self:end;display:flex;gap:26px;font-size:17px;font-weight:500}
.bar nav a{opacity:.72;transition:opacity .25s}
.bar nav a:hover,.bar nav a[aria-current]{opacity:1}
html:not(.home) .bar{padding-bottom:30px;background:linear-gradient(rgba(5,5,5,.9),rgba(5,5,5,0))}

/* the wall: 9 rows + 9 seams = exactly one window, so every screen of the wall lines up with the window */
.wall{display:grid;gap:var(--seam);padding:var(--seam);grid-template-columns:repeat(16,1fr);grid-auto-rows:var(--row)}
.tile{position:relative;display:block;background:#151515;grid-area:var(--d)}
.tile.only-m{display:none}
.tile img,.tile video{filter:brightness(.58) saturate(.55);transition:filter .5s,opacity .35s}
.tile::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--frame);transition:box-shadow .3s;pointer-events:none;z-index:2}
.tile.pgm-on img,.tile.pgm-on video{filter:none}
.tile.pgm-on::after{box-shadow:inset 0 0 0 2px var(--frame)}
/* the name: always at the bottom of the screen, across the full width */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.snd{background:none;border:0;color:inherit;font:inherit;opacity:.72;cursor:pointer;padding:0;transition:opacity .25s}
.snd:hover{opacity:1}.snd[aria-pressed=false]{text-decoration:line-through}
@media (hover:none){.snd{display:none}}
main{position:relative}

/* project and text pages */
.case{padding-top:var(--bar)}
.info h1{font-weight:700;font-size:clamp(44px,4.4vw,72px);line-height:.9;letter-spacing:-0.04em}
.kind{font-size:20px;color:var(--muted);margin-top:12px;letter-spacing:-0.01em}
.info dl{gap:10px 16px;font-size:16px}
.info dt{padding-top:2px}
.desc{color:#d6d6d0}
.index{gap:8px}
.index a{color:inherit;opacity:.45;transition:opacity .3s}
.index a.on,.index a:hover{opacity:1}
.film header{margin-bottom:12px}
.prose p{color:#e4e4de}

@media (max-width:1000px){
 html.work{scroll-snap-type:none}
 .case{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:96px}
 .info{position:static;height:auto}
 .film{min-height:0;padding:20px 0}
 .side{min-height:0;padding:0 0 64px}
 .film.vertical .media{display:block}
 .film.vertical video{width:min(100%,calc(78svh * .5625));height:auto}
 .film.vertical .frames{margin-top:var(--fgap);grid-template-columns:repeat(4,1fr)}
 .film.vertical .frames img{width:100%;height:auto}
}
@media (max-width:760px){
 :root{--row:22vw}
 .wall{grid-template-columns:repeat(4,1fr)}
 .tile{grid-area:var(--m)}
 .tile.only-m{display:block}
 .tile.only-d{display:none}
 .bar{grid-template-columns:1fr auto;padding:12px 14px 30px}
 .pgm,.bar>span{display:none}
 .bar nav{gap:16px;font-size:15px}
 .snd{display:none}
 .frames{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.tile img,.tile video{transition:none}}