:root{
  --paper:#F4F4F2; --ink:#1D1F22; --muted:#5C6065; --rule:#D3D3CF; --tile:#E8E8E4;
  --accent:#2A44D4; 
  --sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --gutter:clamp(1.25rem,4vw,3rem);
}
@media (prefers-color-scheme:dark){
  :root{--paper:#111214; --ink:#ECEBE8; --muted:#A0A4A9; --rule:#2C2E32; --tile:#1A1B1E; --accent:#8EA2FF}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.62 var(--serif);text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;font:600 .9rem var(--sans);z-index:10}
.skip:focus{left:0}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}

h1,h2,h3{font-family:var(--sans);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:-.025em;line-height:1.06}
h2{font-size:clamp(1.55rem,2.8vw,2.1rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.sans{font-family:var(--sans)}

/* header */
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;padding-block:1.4rem}
.brand{font:600 1.05rem var(--sans);text-decoration:none;letter-spacing:-.01em}
.nav{display:flex;gap:1.6rem;flex-wrap:wrap;font:500 .95rem var(--sans)}
.nav a{text-decoration:none;padding-block:.2rem;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--accent)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(2rem,6vw,5rem);align-items:end;padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem)}
.hero h1{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.12;max-width:20em}
.hero .lead{font-size:clamp(1.15rem,1.7vw,1.35rem);max-width:34rem;margin:1.6rem 0 0}
.actions{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:2rem}
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:.8rem 1.35rem;font:600 .95rem var(--sans);text-decoration:none;border-radius:2px}
.btn:hover{background:var(--accent);color:var(--paper)}
.link{font:600 .95rem var(--sans)}
.note{font:400 .95rem var(--sans);color:var(--muted);margin:1.6rem 0 0;max-width:30rem}
.hero-img{margin:0;max-width:26rem;justify-self:end;width:100%}
.hero-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%;background:var(--tile);animation:reveal 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero-img figcaption{font:400 .8rem/1.4 var(--sans);color:var(--muted);margin-top:.7rem}
@keyframes reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* sections */
.section{padding-block:clamp(3rem,7vw,5.5rem);border-top:1px solid var(--rule)}
.section>.wrap>h2{margin-bottom:.6rem}
.section-intro{max-width:36rem;color:var(--muted);margin-bottom:2.5rem}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem clamp(1.5rem,3vw,3rem);margin-top:2.2rem}
.trio>div{border-top:2px solid var(--ink);padding-top:1rem}
.trio h3{margin-bottom:.6rem}
.trio p{margin:0}

/* work */
.group{margin-top:clamp(3rem,6vw,4.5rem)}
.group:first-of-type{margin-top:2rem}
.group>h3{font-size:1.45rem;margin-bottom:.4rem}
.group>p{max-width:36rem;color:var(--muted);margin-bottom:1.8rem}
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.25rem) clamp(1.5rem,3vw,2.5rem)}
.proj{display:block;text-decoration:none;color:inherit}
.thumb{aspect-ratio:4/3;background:var(--tile);overflow:hidden;margin-bottom:1rem}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.top img{object-position:50% 0}
.thumb.mid img{object-position:50% 68%}
.thumb.contain img{object-fit:contain;padding:7%}
.proj h4{font:600 1.2rem/1.2 var(--sans);letter-spacing:-.01em;margin:0 0 .35rem}
.proj:hover h4{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em}
.proj p{margin:0 0 .5rem;font-size:1.02rem}
.tools{font:400 .85rem/1.4 var(--sans);color:var(--muted)}
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.25rem)}
.feature .thumb{aspect-ratio:auto;margin:0}
.feature .thumb img{height:auto}
.feature h4{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.feature p{font-size:1.1rem}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,6vw,5rem)}
.about p{max-width:36rem}
.facts{margin:0;display:grid;gap:1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.facts dt{font:500 .85rem var(--sans);color:var(--muted)}
.facts dd{margin:.1rem 0 0}
.about .facts{grid-template-columns:1fr;align-content:start;border-top:2px solid var(--ink);padding-top:1rem}
.xp-list{margin-top:3rem}
.xp-list>h3{font-size:1.45rem;margin-bottom:1.2rem}
.xp{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.4rem 2rem;padding-block:1.2rem;border-top:1px solid var(--rule)}
.xp .when{font:500 .9rem var(--sans);color:var(--muted);padding-top:.25rem}
.xp h4{font:600 1.1rem var(--sans);margin:0}
.xp .where{font:400 .95rem var(--sans);color:var(--muted);margin:.1rem 0 .5rem}
.xp p{margin:0;max-width:40rem;font-size:1.02rem}

/* journal */
.posts{display:grid;gap:0;margin-top:1.5rem}
.post{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.3rem 2rem;padding-block:1.4rem;border-top:1px solid var(--rule);text-decoration:none;color:inherit}
.post:last-child{border-bottom:1px solid var(--rule)}
.post .date{font:500 .9rem var(--sans);color:var(--muted);padding-top:.2rem}
.post h3{margin-bottom:.35rem}
.post:hover h3{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em}
.post p{margin:0;max-width:40rem;font-size:1.02rem}
.more{margin-top:1.5rem;display:inline-block}

/* contact */
.contact-mail{font:600 clamp(1.1rem,2vw,1.4rem)/1.2 var(--sans);letter-spacing:-.02em;word-break:break-word}
.contact-row{display:flex;flex-wrap:wrap;gap:.6rem 2.5rem;margin-top:1.6rem;font:400 1rem var(--sans)}
.contact-row span{color:var(--muted)}

/* article pages */
.crumb{font:500 .95rem var(--sans);display:inline-block;margin:1.5rem 0 2rem}
.ph{padding-bottom:2.5rem}
.ph h1{max-width:16em}
.ph .lead{max-width:40rem;font-size:1.25rem;margin:1.4rem 0 2rem}
.prose{max-width:41rem}
.prose h2{margin:3rem 0 1rem}
.prose ol,.prose ul{padding-left:1.3rem;margin:0 0 1em}
.prose li{margin-bottom:.7em;padding-left:.2em}
.article-body{padding-bottom:3rem}
.fig{margin:2.2rem 0 2.6rem}
.fig img{width:100%;background:var(--tile)}
.fig figcaption{font:400 .85rem var(--sans);color:var(--muted);margin-top:.6rem;max-width:41rem}
.fig.svg img{padding:clamp(.5rem,3vw,2rem)}
.next{border-top:1px solid var(--rule);padding-block:2rem 3rem;font:500 1rem var(--sans)}
.next .muted{display:block;font-size:.85rem;margin-bottom:.3rem}
.next a{font-size:1.25rem;font-weight:600}

/* footer */
.site-footer{border-top:1px solid var(--rule);padding-block:2rem 2.5rem;font:400 .9rem var(--sans);color:var(--muted)}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 2rem}

@media (max-width:820px){
  .hero,.feature,.about{grid-template-columns:1fr}
  .hero-img{justify-self:start;max-width:22rem}
  .trio{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr}
  .xp,.post{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.hero-img img{animation:none}}

/* galleries, certificates, team */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem;margin:2.2rem 0 2.6rem}
.gallery .fig{margin:0}
.gallery .fig img{aspect-ratio:4/3;object-fit:cover}
.sub{font-size:1.45rem;margin:3rem 0 .6rem}
.section-intro+.sub{margin-top:0}
.sub+p{max-width:36rem;color:var(--muted)}
.certs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:2rem}
.cert{margin:0}
.cert a{display:block}
.cert img{width:100%;border:1px solid var(--rule);background:#fff}
.cert figcaption{font:400 .85rem/1.4 var(--sans);color:var(--muted);margin-top:.6rem}
.learning-ai{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;margin-top:1.2rem}
.learning-ai p{max-width:34rem}
.team-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem;margin-top:2rem}
.team-grid img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tile)}
.team-grid .w3{grid-column:span 3}
.team-grid .w2{grid-column:span 2}
.team-grid .office img{object-position:50% 58%}
@media (max-width:820px){
  .certs{grid-template-columns:1fr}
  .learning-ai{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-grid .w3,.team-grid .w2{grid-column:span 1}
  .team-grid .w3:first-child{grid-column:span 2}
}