:root{
  --paper:#ECEFEA; --ink:#17222E; --muted:#56626C; --water:#3F6F99; --green:#5C8A55;
  --magenta:#B8336A; --tile:#DEE4DE; --line:rgba(23,34,46,.15); --shadow:rgba(23,34,46,.45);
  --blend:multiply;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#10191F; --ink:#E4EAE4; --muted:#95A2AA; --water:#80A9D0; --green:#8DB883;
    --magenta:#E26C9E; --tile:#19252C; --line:rgba(228,234,228,.14); --shadow:rgba(0,0,0,.7);
    --blend:screen;
  }
}
:root[data-theme="dark"]{
  --paper:#10191F; --ink:#E4EAE4; --muted:#95A2AA; --water:#80A9D0; --green:#8DB883;
  --magenta:#E26C9E; --tile:#19252C; --line:rgba(228,234,228,.14); --shadow:rgba(0,0,0,.7);
  --blend:screen;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--magenta)}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.serif{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:22px 0;gap:16px}
.mark{display:flex;gap:10px;align-items:center;font-weight:800;font-size:21px;letter-spacing:-.03em;text-decoration:none}
.mark svg{width:28px;height:28px}
.top nav{display:flex;gap:22px;font-size:15px}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink)}

/* hero */
.hero{padding:clamp(36px,8vw,100px) 0 0}
.hero h1{font-size:clamp(42px,7.6vw,108px);line-height:.93;letter-spacing:-.04em;font-weight:800;margin:0;max-width:10.5ch}
.hero p{max-width:44ch;color:var(--muted);font-size:clamp(17px,1.5vw,20px);margin:26px 0 0}
.hero{position:relative}
html,body{overflow-x:clip}
.hero h1,.hero p{position:relative;z-index:1;pointer-events:none}
.hero-globe{position:absolute;z-index:0;right:-1%;top:50%;width:clamp(280px,40vw,540px);height:auto;transform:translateY(-44%);color:var(--ink);overflow:visible;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-globe .g-hit{fill:transparent;stroke:none;pointer-events:all}
.hero-globe .g-grid{opacity:.1}
.hero-globe .g-land{opacity:.42}
.hero-globe .g-rim{opacity:.3}
.hero-globe .g-shape{fill:var(--magenta);stroke:none;transition:fill .4s ease;transform-box:fill-box;transform-origin:center}
.hero-globe .g-ring{fill:none;stroke:var(--magenta);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;animation:ping 2.6s ease-out infinite;transition:stroke .5s ease}
@keyframes ping{0%{transform:scale(.8);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@media (max-width:720px){.hero-globe{width:78vw;right:-30vw;top:0;transform:none;opacity:.8}}
@media (prefers-reduced-motion: reduce){.hero-globe .g-ring{animation:none}}

/* filters + field */
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px;margin:clamp(40px,6vw,72px) 0 6px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:14px;border:1px solid var(--line);background:transparent;color:var(--ink);
  padding:6px 13px;border-radius:999px;cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hint{font-size:14px;color:var(--muted);margin:0}
.field{position:relative;margin:18px 0 64px}
.tile{position:absolute;left:0;top:0;padding:0;border:0;background:none;color:inherit;font:inherit;
  text-align:left;cursor:pointer;will-change:transform;transition:opacity .45s ease,filter .45s ease}
.tile .cover{display:block;aspect-ratio:4/3;background:var(--tile);border-radius:3px;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.tile .cover svg{display:block;width:100%;height:100%}
.tile .cap{display:block;padding:10px 1px 0}
.tile .t{display:block;font-weight:700;font-size:16px;line-height:1.2;letter-spacing:-.01em}
.tile .m{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.tile.hot{z-index:3}
.tile.hot .cover{transform:scale(1.07);box-shadow:0 22px 44px -22px var(--shadow)}
.tile:focus-visible{outline:none}
.tile:focus-visible .cover{outline:2px solid var(--magenta);outline-offset:5px}
.tile.muted{filter:grayscale(1)}
.tile.muted .cover{box-shadow:0 10px 24px -14px var(--shadow)}
.tile.muted .cover::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:.5;transition:opacity .3s ease}
.tile.muted:hover .cover::after{opacity:.2}
.tile.muted .cap{visibility:hidden}
.stack-label{position:absolute;left:50%;transform:translateX(-50%);z-index:20;font:inherit;font-size:14px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;white-space:nowrap}
.stack-label:hover{color:var(--ink);border-color:var(--ink)}
.stack-label[hidden]{display:none}
.blend{mix-blend-mode:var(--blend)}

/* sections */
.block{border-top:1px solid var(--line);padding:clamp(40px,6vw,64px) 0;display:grid;
  grid-template-columns:minmax(150px,1fr) 3fr;gap:20px 32px}
.block h2{font-size:17px;margin:0;font-weight:700;letter-spacing:-.005em}
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px}
@media (max-width:720px){.services{grid-template-columns:1fr;gap:36px}}
.services h3{font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
.services p{margin:0;color:var(--muted);font-size:15.5px}
.fx{height:150px;max-width:230px;margin:0 0 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .3s ease}
.fx:hover{transform:translateY(-3px)}
.fx:active{transform:scale(.97)}
.fx svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.clients{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px 28px;font-size:18px}
.clients li{padding:7px 0;border-bottom:1px solid var(--line)}
.about p{max-width:62ch;margin:0 0 16px}
.about .lead{font-size:clamp(21px,2.2vw,27px);line-height:1.35;letter-spacing:-.015em;max-width:34ch}
.edu{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.edu li{display:grid;grid-template-columns:1fr;font-size:16px}
.edu .serif{color:var(--muted);font-size:16px}
.contact a.big{font-size:clamp(24px,3.4vw,40px);font-weight:700;letter-spacing:-.025em;text-decoration:none;border-bottom:2px solid var(--magenta);word-break:break-word}
.contact p{margin:0 0 18px}
footer{padding:28px 0 40px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:720px){.block{grid-template-columns:1fr}.top nav{gap:16px}}

/* dialog */
dialog{border:0;padding:0;width:min(940px,calc(100vw - 32px));max-width:none;max-height:calc(100% - 40px);
  background:var(--paper);color:var(--ink);border-radius:6px;overscroll-behavior:contain}
dialog::backdrop{background:rgba(12,18,24,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
dialog[open]{animation:rise .35s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.d-close{position:sticky;top:12px;float:right;margin:12px 12px -56px 0;z-index:2;width:44px;height:44px;border-radius:50%;
  border:0;background:var(--paper);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 4px 16px -6px var(--shadow)}
.d-cover{aspect-ratio:2/1;background:var(--tile);overflow:hidden}
.d-cover svg{display:block;width:100%;height:100%}
.d-body{padding:30px clamp(20px,5vw,56px) 48px}
.d-body h2{font-size:clamp(32px,5vw,56px);line-height:.98;letter-spacing:-.035em;margin:0;font-weight:800;max-width:16ch}
.d-body .sub{font-size:clamp(19px,2vw,23px);color:var(--muted);margin:10px 0 0;max-width:40ch;line-height:1.3}
.meta{display:grid;grid-template-columns:max-content 1fr;gap:6px 22px;font-size:15px;margin:28px 0 8px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta dt{color:var(--muted)}
.meta dd{margin:0}
.prose{max-width:66ch}
.prose h3{font-size:21px;letter-spacing:-.015em;margin:36px 0 8px}
.prose p{margin:0 0 14px}
.prose ul{padding-left:20px;margin:0 0 16px}
.prose li{margin:4px 0}
.prose blockquote{margin:22px 0;padding:2px 0 2px 18px;border-left:3px solid var(--magenta);font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:20px;line-height:1.45}
.timeline{list-style:none;padding:0 !important;margin:10px 0 18px;display:grid;gap:10px}
.timeline li{display:grid;grid-template-columns:62px 1fr;gap:12px;margin:0}
.timeline b{color:var(--green)}
.stats{display:flex;flex-wrap:wrap;gap:18px 40px;margin:20px 0 24px}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;line-height:1}
.stats span{font-size:14px;color:var(--muted);margin-top:4px;max-width:22ch}
.credits{font-size:14.5px;color:var(--muted);margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.credits p{margin:0 0 10px}
.credits strong{color:var(--ink);font-weight:500}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.links a{display:inline-block;padding:9px 16px;border:1px solid var(--ink);border-radius:999px;text-decoration:none;font-size:15px}
.links a:hover{background:var(--ink);color:var(--paper)}
@media (max-width:640px){
  dialog{width:100vw;max-height:100%;height:100%;margin:0;border-radius:0;
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .d-cover{aspect-ratio:4/3}
}
@media (prefers-reduced-motion: reduce){
  dialog[open]{animation:none}
  .tile .cover{transition:none}
}

/* real images (SVG cover stays underneath as fallback) */
.tile .cover,.d-cover{position:relative}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* images inside the project text */
.prose{max-width:none}
.prose>p,.prose>h3,.prose>ul,.prose>blockquote{max-width:66ch}
.prose h3{clear:both}
.prose::after{content:"";display:block;clear:both}
.media{margin:10px 0 26px}
.media.m-wide{clear:both;margin:30px 0 32px}
.media.m-r{float:right;width:46%;margin:6px 0 18px 28px}
.media.m-l{float:left;width:46%;margin:6px 28px 18px 0}
.media.m-s{float:right;width:28%;margin:6px 0 18px 28px}
.m-fig{margin:0}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:3px}
.m-fig img{display:block;width:100%;height:auto;background:var(--tile);border-radius:3px}
.m-fig figcaption{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.4}
.m-fig figcaption .cr{display:block;font-size:13px}
.img-link{display:inline-block;margin-top:4px;color:var(--ink);font-size:14px}
.m-row{display:flex;gap:18px;align-items:flex-start}
.m-row .m-fig{flex:1 1 0;min-width:0}
.m-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:14px}
.m-slides{position:relative}
.s-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:3px}
.s-track::-webkit-scrollbar{display:none}
.s-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.s-slide .zoom{aspect-ratio:var(--ar);max-height:75vh;background:var(--tile)}
.s-slide .m-fig img{height:100%;object-fit:contain;background:none}
.m-slides.tall .s-slide .zoom{aspect-ratio:auto;height:min(70vh,640px)}
.s-nav{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;color:var(--muted)}
.s-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:20px;line-height:1;cursor:pointer;padding:0 0 2px}
.s-nav button:hover{border-color:var(--ink)}
.s-count{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .media.m-r,.media.m-l,.media.m-s{float:none;width:auto;margin:18px 0 22px}
  .media.m-s{width:60%}
  .m-grid{grid-template-columns:repeat(2,1fr)}
  .m-row{flex-direction:column}
}

/* lightbox */
#lb{width:100vw;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#E4EAE4;overflow:hidden}
#lb::backdrop{background:rgba(12,18,24,.94)}
#lb[open]{animation:none}
.lb-stage{position:absolute;inset:0 0 64px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:56px 64px 0}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;display:block}
#lb.zoomed .lb-stage{display:block;padding:0}
#lb.zoomed .lb-img{max-width:none;max-height:none;cursor:zoom-out;margin:0 auto}
.lb-btn{position:absolute;width:44px;height:44px;border-radius:50%;border:0;background:rgba(228,234,228,.14);color:#E4EAE4;font-size:24px;line-height:1;cursor:pointer;z-index:2}
.lb-btn:hover{background:rgba(228,234,228,.26)}
.lb-close{top:max(12px,env(safe-area-inset-top,0px));right:12px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}
#lb.single .lb-prev,#lb.single .lb-next,#lb.single .lb-n{display:none}
.lb-cap{position:absolute;left:0;right:0;bottom:0;min-height:64px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:16px;font-size:14px;color:#95A2AA;line-height:1.4}
.lb-cap .cr{display:block;font-size:13px}
.lb-cap a{color:#E4EAE4}
.lb-n{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){.lb-stage{padding:56px 0 0}.lb-prev,.lb-next{top:auto;bottom:74px;transform:none}}

/* project rows */
.rows{margin:26px 0 clamp(40px,6vw,72px);display:grid;gap:clamp(48px,7vw,96px)}
.rows[hidden]{display:none}
.row{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,64px);align-items:center}
.row.featured{grid-template-columns:8fr 4fr}
.row.flip{grid-template-columns:5fr 7fr}
.row.flip .row-media{order:2}
.row[hidden]{display:none}
.row-media{display:flex;justify-content:center;padding:0;border:0;background:none;cursor:pointer;min-width:0}
.row-media .cover{display:block;position:relative;width:100%;max-width:calc(560px * var(--ar));background:var(--tile);border-radius:3px;overflow:hidden;
  box-shadow:0 18px 40px -30px var(--shadow);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.row.featured .row-media .cover{max-width:calc(640px * var(--ar))}
.row-media .cover svg{display:block;width:100%;height:100%}
.row:hover .row-media .cover,.row:focus-within .row-media .cover{transform:translateY(-6px) scale(1.015);box-shadow:0 28px 50px -28px var(--shadow)}
.row-meta{font-size:14px;color:var(--muted);margin:0 0 12px;display:flex;gap:12px;align-items:baseline}
.row h3{font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.03em;font-weight:800;margin:0}
.row.featured h3{font-size:clamp(32px,4.2vw,56px)}
.row-sub{color:var(--muted);font-size:clamp(17px,1.6vw,20px);line-height:1.3;margin:10px 0 0;max-width:32ch}
.row-sum{margin:16px 0 0;max-width:40ch;font-size:16px}
.row-open{margin-top:22px;font:inherit;font-size:15px;color:var(--ink);background:none;border:1px solid var(--ink);border-radius:999px;padding:9px 16px;cursor:pointer}
.row-open span{display:inline-block;transition:transform .3s ease}
.row-open:hover{background:var(--ink);color:var(--paper)}
.row:hover .row-open span{transform:translateX(4px)}
.row.show .row-media{animation:cardIn .55s cubic-bezier(.2,.7,.2,1) both}
.row.show .row-text{animation:cardIn .55s .06s cubic-bezier(.2,.7,.2,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tile.gone{display:none}

/* instagram carousel */
.insta[hidden]{display:none}
.insta>div{min-width:0}
.ig-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ig-track::-webkit-scrollbar{display:none}
.ig-card{flex:0 0 clamp(160px,21vw,250px);scroll-snap-align:start;position:relative;display:block;aspect-ratio:1;border-radius:3px;overflow:hidden;background:var(--tile)}
.ig-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ig-card:hover img,.ig-card:focus-visible img{transform:scale(1.05)}
.ig-card .ig-kind{position:absolute;top:8px;right:8px;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.ig-nav{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:15px}
.ig-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:20px;line-height:1;cursor:pointer;padding:0 0 2px}
.ig-nav button:hover{border-color:var(--ink)}
.ig-nav a{margin-left:8px}
@media (prefers-reduced-motion: reduce){.ig-card img{transition:none}}