/* Layout concept: giant left-aligned grotesk name on cream, quiet 12-column grid, one horizontal row of work, grainy moodboard shapes as backgrounds. */
:root{
  --paper:#f4f2ec; --ink:#252523; --mute:#6a6963; --line:#d8d5cb; --grey:#bfbdb6;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
    --gutter:clamp(16px,2.4vw,36px);
  --ease:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.5 -.25'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
@keyframes fadeout{to{opacity:0}}
@keyframes fadein{from{opacity:0}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(16px,1.05vw,18px)/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.g{padding-left:max(16px,var(--gutter),env(safe-area-inset-left,0px));padding-right:max(16px,var(--gutter),env(safe-area-inset-right,0px))}
.skip{position:absolute;left:16px;top:-80px;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:20}
.skip:focus{top:8px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;height:64px;background:var(--paper);display:flex;justify-content:space-between;align-items:center;font-weight:500}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--paper);z-index:11}
section[id],div[id]{scroll-margin-top:72px}
.top a.roll{display:block;position:relative;height:44px;overflow:hidden;min-width:9.5em}
.roll-in{display:flex;flex-direction:column;transition:transform .85s var(--ease)}
.roll-in span{height:44px;display:flex;align-items:center;white-space:nowrap}
.top a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.top nav{display:flex;gap:clamp(16px,3vw,40px)}
.top nav a{position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.top nav a:hover::after,.top nav a[aria-current="page"]::after{transform:scaleX(1)}

/* giant type */
.mega{font-weight:500;font-size:clamp(4.2rem,19vw,22rem);line-height:.82;letter-spacing:-.065em;margin-left:-.04em}
.mega .l{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.mega .l>span{display:block;transform:translateY(108%);animation:up 1.3s var(--ease) forwards}
.mega .l:nth-child(2)>span{animation-delay:.12s}
@keyframes up{to{transform:none}}

.hero{padding-top:clamp(40px,10vh,120px)}
.intro{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding-block:clamp(32px,6vw,80px) clamp(64px,12vw,160px)}
.intro p{grid-column:7/13;font-size:clamp(1.25rem,2.2vw,2.1rem);line-height:1.2;letter-spacing:-.02em;max-width:26em}
.intro small{grid-column:1/5;align-self:end;color:var(--mute);font-size:.9rem}

/* work row */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:20px;border-top:1px solid var(--line);padding-top:16px}
.work-head h2{font-weight:500;font-size:clamp(1.5rem,3vw,2.6rem);letter-spacing:-.04em;line-height:1}
.arrows{display:flex;gap:8px}
.arrows button{width:44px;height:44px;border:0;background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.arrows button:hover{opacity:.55}
.arrows button[data-dir="-1"]:hover{transform:translateX(-4px)}
.arrows button[data-dir="1"]:hover{transform:translateX(4px)}
.arrows svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.row{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:12px;scrollbar-width:none;margin-inline:calc(-1*max(16px,var(--gutter)));padding-inline:max(16px,var(--gutter))}
.row::-webkit-scrollbar{display:none}
.card{flex:0 0 clamp(270px,36vw,560px);scroll-snap-align:start;min-width:0}
.art{position:relative;aspect-ratio:4/5;overflow:hidden;isolation:isolate}
.art::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.35;mix-blend-mode:multiply;pointer-events:none;z-index:5}
.art>*{transition:transform 1.4s var(--ease)}
.card:hover .art>*,.card.is-hover .art>*{transform:scale(1.04)}
.art.photo img{transition:transform 1.6s var(--ease)}
.card:hover .art.photo img,.card.is-hover .art.photo img{transform:scale(1.12)}
.cap{display:flex;justify-content:space-between;gap:16px;padding-top:14px;font-weight:500}
.cap span:last-child{color:var(--mute);font-weight:400}
.a-bars{background:#0c0c0b;display:flex;gap:2.5%;padding:5% 4%}
.a-bars i{flex:1;background:linear-gradient(#0c0c0b,#e8e7e2);transform-origin:top}
.a-bars i:nth-child(3n){background:linear-gradient(#e8e7e2,#0c0c0b 85%)}
.a-bars i:nth-child(4n){background:linear-gradient(#0c0c0b 20%,#d9d8d3)}
.a-shapes{background:#f1f0ec}
.a-shapes i{position:absolute}
.a-shapes .t1{left:50%;top:9%;width:46%;height:32%;background:linear-gradient(160deg,#cfcec9,#1a1a19 70%);clip-path:polygon(50% 0,100% 100%,0 100%)}
.a-shapes .t2{left:8%;top:44%;width:38%;height:26%;background:linear-gradient(120deg,#1a1a19,#ecebe7);}
.a-shapes .t3{left:52%;top:50%;width:14%;height:34%;background:linear-gradient(90deg,#1a1a19,#ecebe7)}
.a-shapes .t4{left:8%;top:74%;width:30%;height:18%;background:linear-gradient(#ecebe7,#1a1a19 90%)}
.a-shapes .t5{left:70%;top:72%;width:22%;height:14%;background:linear-gradient(200deg,#ecebe7,#1a1a19)}
.a-round{background:#efeee9}
.a-round i{position:absolute}
.a-round .r1{left:8%;top:6%;width:84%;height:100%;background:var(--grey);border-radius:60px 60px 0 0}
.a-round .r2{left:28%;top:56%;width:34%;height:60%;background:#efeee9;border-radius:999px 999px 0 0}
.a-round .r3{left:34%;top:20%;width:40%;height:38%;background:#1d1d1b}
.a-round .r4{left:44%;top:12%;width:16%;aspect-ratio:1;background:#1d1d1b;border-radius:50%}
.a-round .r5{left:42%;top:40%;width:20%;height:14%;background:#efeee9;border-radius:0 0 40px 40px}

.lnk{display:block;text-decoration:none}
/* hero: photo shrinks on scroll */
.hero-wrap{position:relative;height:150vh}
.hero-stage{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));height:calc(100svh - 64px - env(safe-area-inset-top,0px));overflow:hidden;background:var(--paper)}
.mega.hero-name{position:absolute;top:2%;left:0;right:0;margin:0;text-align:center;font-size:clamp(3rem,13.4vw,17rem);line-height:.9;white-space:nowrap;color:#fff;mix-blend-mode:difference;z-index:2}
.hero-photo{position:absolute;left:50%;top:52%;height:72%;max-width:84vw;aspect-ratio:1128/1514;margin:0;z-index:1;transform:translate(-50%,-50%) translateY(var(--y,0px)) scale(var(--s,.44)) rotate(var(--r,-7deg));will-change:transform}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-copy{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);width:min(30em,88%);text-align:center;opacity:var(--c,1);z-index:3}
.role{font-weight:500;font-size:clamp(1rem,1.6vw,1.4rem);letter-spacing:-.01em}
.blurb{color:var(--mute);margin-top:.5em}
.hero-name .l{display:inline-block;vertical-align:top}
@media (max-width:820px) and (max-aspect-ratio:1/1){
  .mega.hero-name{font-size:19vw;line-height:.86;top:2%;white-space:normal}
  .hero-name .l{display:block}
  .hero-photo{width:86vw;height:66%;aspect-ratio:auto;max-width:none;top:49%}
  .hero-copy{bottom:8%}
}
@media (max-height:520px){.hero-copy .blurb{display:none}.hero-copy{bottom:2%}}
/* round cursor on clickable things */
.cur{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:200;mix-blend-mode:difference}
.cur-dot{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;transform:scale(0);display:grid;place-items:center;transition:transform .45s var(--ease),width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease)}
.cur.on .cur-dot{transform:scale(1)}
.cur.big .cur-dot{width:52px;height:52px;margin:-26px 0 0 -26px}
.cur-label{font-size:.7rem;font-weight:500;color:#000;opacity:0;transition:opacity .3s}
.cur.big .cur-label{opacity:1}
html.has-cur,html.has-cur *{cursor:none!important}
@media (prefers-reduced-motion:reduce){.cur-dot{transition:none}}
/* work row: constant slow drift */
.track{display:flex;gap:var(--g);width:max-content;padding-right:var(--g)}
.row{--g:clamp(12px,1.6vw,24px)}
.row.is-marquee{scroll-snap-type:none}
.arrows .pause{display:none;width:auto;height:44px;border-radius:999px;padding:0 20px;font:inherit}
.is-marquee .arrows .pause{display:inline-flex;align-items:center}
/* hobbies */
.hobby{padding-top:clamp(56px,9vw,130px)}
.hobby .work-head{align-items:flex-end}
.hobby-note{color:var(--mute);max-width:24em;text-align:right}
.hobby-screen{position:relative;overflow:hidden;aspect-ratio:16/10;min-height:min(78svh,640px);background:transparent;touch-action:pan-y;cursor:crosshair;isolation:isolate}
.hobby-hint{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:clamp(1.4rem,3vw,2.6rem);letter-spacing:-.04em;font-weight:500;color:var(--mute);transition:opacity .8s var(--ease);pointer-events:none}
.hobby-screen.touched .hobby-hint{opacity:0}
.hobby-cap{position:absolute;left:16px;bottom:12px;font-size:.9rem;color:var(--mute);z-index:50;pointer-events:none}
.pop{position:absolute;width:clamp(200px,27vw,400px);height:auto;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.82) rotate(var(--rot,0deg));transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.pop.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--rot,0deg))}
.hobby-next{margin-top:14px}
@media (max-width:820px){.hobby-screen{aspect-ratio:auto;height:min(78svh,640px);min-height:0;width:100%}.pop{width:54vw}.hobby-note{text-align:left}}
@media (prefers-reduced-motion:reduce){.pop{transition:none}}
.art.photo::after{display:none}
.art.photo img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
/* footer */
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 32px;padding-block:28px 32px;margin-top:clamp(48px,8vw,120px);border-top:1px solid var(--line);font-size:.95rem}
.foot a,.foot button{min-height:44px;display:inline-flex;align-items:center}
.copy{background:none;border:0;border-bottom:1px solid var(--ink);padding:0;font:inherit;color:inherit;cursor:pointer;border-radius:0}
.status{min-height:1.5em;color:var(--mute);font-size:.9rem}

/* about */
.about-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding-block:clamp(32px,6vw,80px) clamp(48px,8vw,120px);align-items:start}
.portrait{grid-column:1/6;aspect-ratio:4/5;overflow:hidden;background:var(--grey)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.lead{grid-column:7/13;font-size:clamp(1.3rem,2.4vw,2.2rem);line-height:1.22;letter-spacing:-.02em;max-width:26em;align-self:end}
.band{position:relative;height:clamp(180px,34vh,380px);background:#0c0c0b;display:flex;gap:6px;padding:0 var(--gutter);overflow:hidden;isolation:isolate}
.band::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.4;mix-blend-mode:overlay}
.band i{flex:1;background:linear-gradient(#0c0c0b,#e8e7e2);transform-origin:top;transform:scaleY(.2);transition:transform 1.6s var(--ease)}
.band.in i{transform:none}
.band i:nth-child(even){margin-top:14%;background:linear-gradient(#e8e7e2,#0c0c0b)}
.band i:nth-child(3n){margin-top:0;height:60%}
.info{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding-block:clamp(40px,6vw,90px);border-bottom:1px solid var(--line)}
.info h2,.sec-head h2{grid-column:1/5;font-weight:500;font-size:clamp(1.5rem,3vw,2.6rem);letter-spacing:-.04em;line-height:1}
.rows{grid-column:5/13}
.rows li{display:grid;grid-template-columns:minmax(120px,14rem) 1fr;gap:16px;padding-block:14px;border-top:1px solid var(--line)}
.rows li:first-child{border-top:0;padding-top:0}
.rows .w{color:var(--mute)}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding-block:clamp(56px,9vw,130px) clamp(24px,4vw,56px)}
.sec-head p{grid-column:7/13;max-width:34em}
.draw{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:end}
.draw figure{overflow:hidden;background:#e9e7e1}
.draw img{width:100%;transition:transform 1.6s var(--ease)}
.draw figure:hover img,.collage figure:hover img{transform:scale(1.03)}
.draw .d1{grid-column:1/6}.draw .d2{grid-column:6/13}.draw .d3{grid-column:1/8}.draw .d4{grid-column:8/13}
.collage{columns:3;column-gap:var(--gutter)}
.collage figure{break-inside:avoid;margin-bottom:var(--gutter);overflow:hidden;background:var(--line)}
.collage img{width:100%;transition:transform 1.6s var(--ease)}

/* reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:820px){
  .intro p,.lead,.sec-head p{grid-column:1/13}
  .intro small{grid-column:1/13;grid-row:2}
  .portrait{grid-column:1/13;max-width:520px}
  .info h2,.sec-head h2,.rows{grid-column:1/13}
  .rows li{grid-template-columns:1fr;gap:2px}
  .draw .d1,.draw .d2,.draw .d3,.draw .d4{grid-column:span 12}
  .collage{columns:2}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mega .l>span{animation:none;transform:none}
  .hero-wrap{height:auto}
  .hero-stage{position:relative;top:0}
  .row.is-marquee .track{animation:none}
  .roll-in{transition:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .band i{transform:none;transition:none}
  .art>*,.draw img,.collage img{transition:none}
}

/* hobby piles: pictures slide up and stack on top of each other */
.pile{padding-top:clamp(8px,2vw,24px)}
.pc{position:sticky;top:calc(84px + var(--i,0)*10px);display:flex;justify-content:center;margin:0 0 clamp(20px,14vh,140px);transform-origin:50% 0;will-change:transform}
.pc:last-child{margin-bottom:0}
.pc img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100svh - 150px);border-radius:6px;box-shadow:0 30px 60px -40px rgba(20,20,18,.5)}
@media (max-width:820px){.pc{top:calc(72px + var(--i,0)*8px)}.pc img{max-height:calc(100svh - 130px)}}
@media (prefers-reduced-motion:reduce){.pc{position:static;transform:none!important}.portrait img{transform:none}}

/* about: experience, skills, portrait */
.job{display:flex;flex-direction:column;gap:2px}
.job strong{font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.job span{color:var(--mute)}
.chips{grid-column:5/13;display:flex;flex-wrap:wrap;gap:8px}
.chips li{border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:.95rem;line-height:1.4}
.portrait img{will-change:transform;transform:scale(1.12)}

/* mobile: calmer rhythm, one clear type scale (h1 mega / h2 1.5rem / lead 1.125rem / body 1rem / small .9rem) */
@media (max-width:820px){
  .about-hero{gap:32px;padding-block:40px 24px}
  .portrait{max-width:none}
  .lead{font-size:1.05rem;line-height:1.5;letter-spacing:-.01em;max-width:none}
  .info{padding-block:64px;gap:24px}
  .info h2,.sec-head h2{font-size:1.5rem}
  .rows li{padding-block:18px;gap:4px}
  .rows li:first-child{padding-top:0}
  .job strong{font-size:1.05rem}
  .chips{grid-column:1/13;gap:8px}
  .chips li{padding:6px 14px;font-size:.9rem}
  .sec-head{padding-block:96px 36px;gap:16px}
  .sec-head p{font-size:1rem;line-height:1.55}
  .pc{margin-bottom:22vh}
  .foot{margin-top:96px}
}

/* soft cream fade-in on every page load, then the hero elements arrive one by one */
.top{animation:fadein 1.2s var(--ease) .25s both}
.hero-photo img{animation:photoin 1.8s var(--ease) .35s both}
@keyframes photoin{from{clip-path:inset(100% 0 0 0);transform:scale(1.18)}to{clip-path:inset(0);transform:none}}
.hero-copy>*{animation:fadeup 1.3s var(--ease) 1s both}
.hero-copy>.blurb{animation-delay:1.15s}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.work-head{animation:fadein 1.2s var(--ease) .4s both}
@media (prefers-reduced-motion:reduce){body::after,.top,.hero-photo img,.hero-copy>*,.work-head{animation:none}body::after{display:none}}

/* compact rhythm: less whitespace, no divider lines */
.work-head{border-top:0;padding-top:0;padding-bottom:12px}
.hobby{padding-top:clamp(24px,3.5vw,48px)}
.hero-wrap{height:135vh}
.hero{padding-top:clamp(16px,3vh,40px)}
.about-hero{padding-block:clamp(24px,4vw,48px) clamp(16px,3vw,32px)}
.info{padding-block:clamp(24px,3.5vw,48px);border-bottom:0}
.rows li{border-top:0;padding-block:8px}
.sec-head{padding-block:clamp(32px,5vw,64px) clamp(16px,2.5vw,32px)}
.pc{margin-bottom:clamp(16px,9vh,90px)}
.pc:last-child{margin-bottom:0}
.foot{border-top:0;margin-top:clamp(32px,5vw,64px)}
@media (max-width:820px){
  .about-hero{gap:20px;padding-block:24px 8px}
  .info{padding-block:32px;gap:12px}
  .rows li{padding-block:10px;gap:2px}
  .sec-head{padding-block:48px 20px;gap:12px}
  .pc{margin-bottom:10vh}
  .pc:last-child{margin-bottom:0}
  .foot{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){.hero-wrap{height:auto}}

/* pinned picture scenes: the picture sticks in the middle of the screen while the effect plays */
.pin-stage{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;padding-top:64px;display:grid;place-items:center;overflow:hidden}
.js .pinstack{height:calc(100svh + (var(--n,3) - 1)*55svh);padding:0;margin-top:0}
.pinstack .pin-stage>figure{grid-area:1/1;position:relative!important;top:auto!important;margin:0!important;display:block!important;will-change:transform;transform-origin:50% 50%}
.pinstack .pin-stage img{aspect-ratio:auto!important;width:auto!important;height:auto!important;max-width:min(92vw,1240px)!important;max-height:calc(100svh - 150px)!important;object-fit:contain;margin:0 auto!important;display:block;border-radius:6px;box-shadow:0 30px 60px -40px rgba(20,20,18,.5)}
.js .heropin{height:140svh}
.js .growpin{height:150svh}
.js .duo{height:175svh}
.heropin .pin-stage,.growpin .pin-stage{display:flex;align-items:center;justify-content:center}
.pin-stage .bleed{width:100%;height:min(76svh,62vw,820px)}
.pin-stage .bleed img{height:100%;margin:0;transform:scale(var(--z,1))}
.growpin .bleed{height:min(76svh,62vw,820px)}
.duo-stage{grid-template-columns:1fr 1fr;gap:var(--gutter);align-content:center}
.duo-stage figure{margin:0!important;aspect-ratio:auto;height:auto;background:none;will-change:transform}
.duo-stage img{display:block;width:auto!important;max-width:100%!important;max-height:calc(100svh - 150px)!important;height:auto!important;margin:0 auto!important;border-radius:6px;box-shadow:0 30px 60px -40px rgba(20,20,18,.5)}
.portrait img{transform:none}
@media (max-width:820px){
  .pin-stage .bleed,.growpin .bleed{height:min(62svh,100vw)}
}
@media (prefers-reduced-motion:reduce){
  .js .pinstack,.js .heropin,.js .growpin,.js .duo,.js .spinpin{height:auto}
  .pin-stage{position:static;height:auto;display:block;padding-top:0}
  .pinstack .pin-stage>figure{margin-bottom:24px!important}
  .pin-stage .bleed{height:min(70svh,60vw)}
  .duo-stage{display:grid}
}

/* tighter pinned scenes: pictures fill the screen, less hold time, no blank bands */
.js .pinstack{height:calc(100svh + (var(--n,3) - 1)*45svh);margin-block:-5svh}
.pinstack .pin-stage img{max-height:calc(100svh - 64px - 28px)!important}
.js .heropin{height:120svh}
.js .growpin{height:125svh}
.js .duo{height:150svh}
.duo-stage img{max-height:calc(100svh - 64px - 28px)!important}
.pin-stage .bleed,.growpin .bleed{height:min(84svh,64vw,860px)}
@media (max-width:820px){
  .pin-stage .bleed,.growpin .bleed{height:min(70svh,110vw)}
  .js .pinstack{margin-block:-3svh}
}

/* reading focus colour */
.fx-on .fx{color:color-mix(in srgb,var(--ink) calc(var(--fx,1)*100%),#c2c0b8)}

/* end-of-page takeover */
.outro{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:calc(var(--gutter) + 56px) var(--gutter) calc(var(--gutter) + 40px);
  background:rgba(244,242,236,.86);-webkit-backdrop-filter:blur(14px) saturate(.9);backdrop-filter:blur(14px) saturate(.9);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .9s var(--ease),visibility 0s linear .9s;overflow:hidden;cursor:auto}
.outro.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .9s var(--ease)}
.outro-open,.outro-open body{overflow:hidden;overscroll-behavior:none}
.o-x{position:absolute;top:max(14px,env(safe-area-inset-top));right:var(--gutter);width:44px;height:44px;border-radius:50%;border:0;background:rgba(37,37,35,.07);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .3s,transform .5s var(--ease);z-index:2}
.o-x:hover{background:rgba(37,37,35,.14);transform:rotate(90deg)}
.o-float{position:absolute;inset:-9%;pointer-events:none;transform:translate3d(calc(var(--px,0)*-14px),calc(var(--py,0)*-10px),0);transition:transform 1.2s var(--ease)}
.o-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;pointer-events:none;transition:opacity 2s var(--ease) .2s;will-change:transform;animation:o-drift 28s ease-in-out infinite alternate}
.outro.on .o-art{opacity:.16}
@keyframes o-drift{0%{transform:scale(1) translate3d(0,0,0) rotate(0deg)}50%{transform:scale(1.04) translate3d(-1.5%,1.2%,0) rotate(-1.2deg)}100%{transform:scale(1.08) translate3d(1%,-1.4%,0) rotate(1deg)}}
.outro{text-align:center}
.o-body{position:relative;z-index:1;width:100%;max-width:1000px;margin:0 auto}
.o-body>*{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.outro.on .o-body>*{opacity:1;transform:none}
.outro.on .o-body>:nth-child(1){transition-delay:.3s}.outro.on .o-body>:nth-child(2){transition-delay:.7s}.outro.on .o-body>:nth-child(3){transition-delay:.9s}
.o-h{position:relative;margin:0;font-weight:500;font-size:clamp(2.4rem,6.2vw,5rem);line-height:1.12;letter-spacing:-.03em}
.o-h .w{display:inline-block}

.o-h .w-caught{font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:.82em}


.o-h i{display:inline-block;font-style:inherit;opacity:0;transform:translateY(-1.2em) rotate(-12deg)}
.outro.on .o-h i{animation:o-drop .9s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.5s + var(--k,0)*.07s)}
.o-h .w-fish i:nth-child(1){--k:0}.o-h .w-fish i:nth-child(2){--k:1}.o-h .w-fish i:nth-child(3){--k:2}.o-h .w-fish i:nth-child(4){--k:3}
.o-h .w-caught i:nth-child(1){--k:5}.o-h .w-caught i:nth-child(2){--k:6}.o-h .w-caught i:nth-child(3){--k:7}.o-h .w-caught i:nth-child(4){--k:8}.o-h .w-caught i:nth-child(5){--k:9}.o-h .w-caught i:nth-child(6){--k:10}
@keyframes o-drop{to{opacity:1;transform:none}}
.outro.on .w-fish{animation:o-wob 3.4s ease-in-out 1.6s infinite}
@keyframes o-wob{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-.06em)}}
.o-fish{display:inline-block;width:.9em;height:auto;margin-left:.3em;vertical-align:-.05em;color:var(--ink);opacity:0}
.outro.on .o-fish{animation:o-swim 6s ease-in-out 1.5s infinite;opacity:1}
@keyframes o-swim{0%,100%{transform:translate(-.2em,0) rotate(-4deg)}50%{transform:translate(.25em,-.12em) rotate(5deg)}}
.o-p{margin:clamp(20px,3vw,32px) auto 0;max-width:30em;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.4;color:var(--mute)}
.o-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;margin-top:clamp(28px,4vw,44px);font-size:clamp(1rem,1.4vw,1.15rem)}
.o-links a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;min-height:28px}
.o-count{text-shadow:0 0 8px #f4f2ec,0 0 16px #f4f2ec;position:absolute;left:var(--gutter);bottom:calc(var(--gutter) + 14px);margin:0;font-size:.8rem;color:#9a9890;letter-spacing:.01em}
.o-bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);height:2px;background:rgba(37,37,35,.08);border-radius:2px;overflow:hidden}
.o-bar i{display:block;height:100%;background:#9a9890;transform-origin:left;transform:scaleX(1)}
@media (max-width:820px){.o-h{font-size:clamp(2.2rem,10.5vw,3.4rem)}}
@media (prefers-reduced-motion:reduce){.o-art,.o-h i,.o-h .w-fish,.o-fish{animation:none!important}.o-h i{opacity:1;transform:none}.o-art{transition:none}.outro,.o-body>*{transition:none!important}}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:7.5%;z-index:3;margin-left:-7px;color:var(--mute);pointer-events:none;opacity:0;transition:opacity .5s var(--ease);animation:cuein 1s var(--ease) 2.2s forwards}
.scroll-cue svg{display:block;animation:cuebob 1.8s ease-in-out 2.2s infinite}
.scroll-cue.gone{opacity:0!important;animation:none;transition:opacity .3s}
@keyframes cuein{to{opacity:.85}}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none;opacity:.85}.scroll-cue svg{animation:none}}

/* spinning can */
.js .spinpin{height:190svh}
.spinpin .pin-stage{perspective:1300px;perspective-origin:50% 45%}
.spin-can{display:block;height:min(calc(100svh - 64px - 40px),880px);width:auto;max-width:86vw;object-fit:contain;transform:rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) scale(var(--sc,1));filter:drop-shadow(0 40px 40px rgba(20,20,18,.28));will-change:transform}
.sw-pic{margin:0 auto;max-width:620px;padding-block:clamp(16px,3vw,40px)}
.sw-pic img{display:block;width:100%;height:auto;border-radius:6px}
@media (prefers-reduced-motion:reduce){.js .spinpin{height:auto}.spin-can{transform:none}}

/* selected work: bigger cards and room around the section */
#work{padding-block:clamp(72px,12vw,180px) clamp(80px,13vw,200px)}
#work .work-head{padding-bottom:clamp(24px,3.5vw,48px)}
#work .work-head h2{font-size:clamp(1.9rem,4vw,3.4rem)}
.row,.row.is-marquee{--g:clamp(24px,3.4vw,56px);gap:var(--g)}
.card{flex:0 0 clamp(300px,50vw,760px)}
.cap{padding-top:clamp(16px,1.8vw,24px);font-size:clamp(1rem,1.3vw,1.2rem)}
@media (max-width:820px){
  .card{flex-basis:84vw}
  .cap{flex-direction:column;gap:4px}
}

/* slot-machine menu name */
.roll-in.slot{flex-direction:row;align-items:flex-start;transition:none;transform:none;padding-top:9px}
.roll-in .cell{display:block;height:26px;overflow:hidden;flex:none}
.roll-in .col{display:flex;flex-direction:column}
.roll-in .col span{display:block;height:26px;line-height:26px;white-space:pre}
.roll-in .col .rc{font-weight:600}

/* about cta under the hero blurb */
.hero-copy .cta{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(14px,2vw,22px);min-height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:.9rem;font-weight:500;text-decoration:none;pointer-events:none;transition:transform .5s var(--ease),background .3s}
.hero-copy.live .cta{pointer-events:auto}
.hero-copy .cta svg{transition:transform .5s var(--ease)}
.hero-copy .cta:hover svg{transform:translateX(4px)}
.hero-copy .cta:hover{transform:translateY(-2px)}

/* selected work: full-screen vertical cases that stack as you scroll */
.work-count{margin:0;color:var(--mute);font-size:clamp(.9rem,1.1vw,1.05rem);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cases{--top:calc(64px + env(safe-area-inset-top,0px) + 8px);position:relative;margin-inline:calc(-1*var(--gutter) + 8px)}
.case{position:sticky;top:var(--top);height:calc(100svh - var(--top) - 12px);margin-bottom:12px;--e:1;--cv:0}
.case-in{position:relative;display:block;height:100%;border-radius:14px;overflow:hidden;color:#fff;text-decoration:none;background:#1c1b19;
  transform:scale(calc(1 - var(--cv)*.07)) translateY(calc(var(--cv)*-2%));transform-origin:50% 0;will-change:transform}
.case-in::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--cv)*.55);pointer-events:none;z-index:4}
.case-in img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;
  transform:translate3d(0,calc((1 - var(--e))*5%),0) scale(calc(1.14 - var(--e)*.12));will-change:transform}
.case-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,9,.62),rgba(10,10,9,0) 48%);z-index:1}
.case-txt{position:absolute;left:clamp(18px,3vw,48px);bottom:clamp(20px,3.4vw,52px);z-index:2;display:flex;flex-direction:column;gap:6px;
  opacity:calc(.2 + var(--e)*.8);transform:translateY(calc((1 - var(--e))*30px))}
.case-no{font-size:.9rem;letter-spacing:.04em;opacity:.8;font-variant-numeric:tabular-nums}
.case-t{font-size:clamp(2.4rem,7.4vw,7rem);line-height:.95;letter-spacing:-.045em;font-weight:500}
.case-s{font-size:clamp(.95rem,1.3vw,1.2rem);opacity:.85}
.case-go{position:absolute;right:clamp(18px,3vw,48px);bottom:clamp(24px,3.6vw,56px);z-index:2;display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;
  opacity:calc(.1 + var(--e)*.9);transition:gap .5s var(--ease)}
.case-in:hover .case-go{gap:14px}
.case-in img{transition:filter .6s var(--ease)}
.case-in:hover img{filter:brightness(1.06)}
@media (max-width:820px){.case-go{display:none}.cases{margin-inline:calc(-1*var(--gutter) + 8px)}}
@media (prefers-reduced-motion:reduce){.case{position:relative;top:0}.case-in img{transform:none}.case-txt{opacity:1;transform:none}}

/* view more + work index */
.work-more{display:flex;justify-content:center;padding-top:clamp(40px,6vw,88px)}
.cta-solid{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:.95rem;font-weight:500;text-decoration:none;transition:transform .5s var(--ease)}
.cta-solid svg{transition:transform .5s var(--ease)}
.cta-solid:hover{transform:translateY(-2px)}.cta-solid:hover svg{transform:translateX(4px)}
.wk-list{list-style:none;margin:0;padding:0}
.wk-row{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;grid-template-areas:"no t img" "no s img";align-items:center;column-gap:clamp(12px,2vw,32px);row-gap:4px;padding-block:clamp(20px,3vw,40px);color:inherit;text-decoration:none}
.wk-no{grid-area:no;color:var(--mute);font-variant-numeric:tabular-nums}
.wk-t{grid-area:t;min-width:0;overflow-wrap:break-word;font-size:clamp(2rem,6vw,5.5rem);line-height:1;letter-spacing:-.045em;font-weight:500;transition:transform .6s var(--ease)}
.wk-s{grid-area:s;color:var(--mute)}
.wk-img{grid-area:img;flex:none;width:clamp(96px,14vw,220px);aspect-ratio:4/5;overflow:hidden;border-radius:8px}
.wk-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.wk-row:hover .wk-t{transform:translateX(10px)}.wk-row:hover .wk-img img{transform:scale(1.08)}
.wk-more{color:var(--mute);padding-block:clamp(32px,5vw,64px) 0}

/* about on phones: horizontal rows (date left, details right) to shorten the scroll */
@media (max-width:820px){
  .info{padding-block:26px;gap:12px}
  .info h2{font-size:1.45rem}
  .rows li{grid-template-columns:6.6rem 1fr;gap:12px;align-items:baseline;padding-block:9px}
  .rows .w{font-size:.85rem;line-height:1.35}
  .rows li>span:last-child{font-size:.98rem;line-height:1.3}
  .job strong{font-size:1rem}
  .job span{font-size:.9rem}
  .xp li{padding-block:8px}
}

/* page transitions: cream veil fades out on arrival and in on departure; every page content rises in like the landing page */
@keyframes veilout{from{opacity:0;visibility:visible}to{opacity:1;visibility:visible}}
.leaving body::after{animation:veilout .32s cubic-bezier(.4,0,.2,1) both}
@keyframes pagein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
body:not(:has(.hero-wrap)) main{animation:pagein 1.1s var(--ease) .1s both}
@media (prefers-reduced-motion:reduce){body:not(:has(.hero-wrap)) main{animation:none}.leaving body::after{animation:none}}

/* pinned pictures get a fixed size from their own proportions (no jump when they load) and appear sooner */
.pinstack .pin-stage img{width:min(92vw,1240px,calc((100svh - 92px)*var(--r,1.333)))!important;height:auto!important;aspect-ratio:var(--r,1.333)!important;max-width:none!important;max-height:none!important}
.js .pinstack{height:calc(100svh + (var(--n,3) - 1)*36svh)}
.duo-stage img{width:min(100%,calc((100svh - 92px)*var(--r,.78)))!important;height:auto!important;aspect-ratio:var(--r,.78)!important;max-width:none!important;max-height:none!important}
.js .duo{height:130svh}
@media (max-width:820px){.duo-stage img{width:min(88vw,520px,calc((100svh - 92px)*var(--r,.78)))!important}}
@media (prefers-reduced-motion:reduce){.js .pinstack,.js .duo{height:auto}}

/* bigger, easier-to-read project titles on the selected work cards */
.case-t{font-size:clamp(3.4rem,10vw,9.5rem);line-height:.9;letter-spacing:-.05em}
.case-s{font-size:clamp(1.05rem,1.6vw,1.4rem)}
.case-no{font-size:1rem}
.case-txt{gap:10px;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.case-shade{background:linear-gradient(to top,rgba(10,10,9,.7),rgba(10,10,9,0) 58%)}
@media (max-width:820px){.case-t{font-size:clamp(3rem,15vw,4.6rem)}.case-txt{right:18px}}

/* stonewall can: still picture, smaller */
.sw-can{margin:0 auto;padding-block:clamp(16px,3vw,40px);display:flex;justify-content:center}
.sw-can img{display:block;height:min(56svh,560px);width:auto;max-width:70vw;filter:drop-shadow(0 30px 30px rgba(20,20,18,.22))}
@media (max-width:820px){.sw-can img{height:min(46svh,420px)}}

/* calmer pace: more breathing room between sections */
.info{padding-block:clamp(48px,6vw,96px)}
.sec-head{padding-block:clamp(64px,8vw,120px) clamp(28px,3.5vw,48px)}
.hobby{padding-top:clamp(56px,7vw,112px)}
.foot{margin-top:clamp(64px,8vw,120px)}
.case{margin-bottom:clamp(16px,2vw,28px)}
/* pinned picture scenes hold longer, so nothing flies past */
.js .pinstack{height:calc(100svh + (var(--n,3) - 1)*42svh)}
.js .heropin{height:130svh}
.js .growpin{height:135svh}
.js .duo{height:145svh}
@media (max-width:820px){
  .info{padding-block:44px;gap:14px}
  .sec-head{padding-block:64px 28px}
  .foot{margin-top:72px}
}
@media (prefers-reduced-motion:reduce){.js .pinstack,.js .heropin,.js .growpin,.js .duo{height:auto}}

/* footer: dark, warm glow, links to everything, big name cropped at the bottom */
.site-foot{position:relative;overflow:hidden;background:#161514;color:#efebe3;margin-top:clamp(48px,6vw,96px);isolation:isolate}
.site-foot::before{content:"";position:absolute;z-index:-1;left:50%;bottom:-38%;width:120%;height:90%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(226,108,86,.55),rgba(150,46,52,.28) 45%,rgba(22,21,20,0) 72%);filter:blur(10px);opacity:var(--glow,.85);transition:opacity 1.2s var(--ease)}
.site-foot a,.site-foot button{color:inherit}
.sf-top{display:grid;grid-template-columns:repeat(12,1fr);gap:28px var(--gutter);padding-block:clamp(36px,4vw,60px) clamp(16px,2vw,28px)}
.sf-cta{grid-column:1/6}
.sf-h{margin:0;font-weight:500;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.035em;line-height:1.05}
.sf-p{margin:8px 0 0;color:rgba(239,235,227,.6);font-size:.95rem}
.c-form{display:flex;align-items:center;margin-top:22px;border-bottom:1px solid rgba(239,235,227,.35);max-width:420px;transition:border-color .3s}
.c-form:focus-within{border-color:#efebe3}
.c-field{flex:1;min-width:0}
.c-field input{width:100%;height:46px;border:0;background:transparent;font:inherit;font-size:1rem;color:#efebe3;outline:none;padding:0}
.c-field input::placeholder{color:rgba(239,235,227,.45)}
.c-send{flex:none;width:46px;height:46px;display:grid;place-items:center;border:0;background:none;cursor:pointer;color:#efebe3;transition:transform .35s var(--ease)}
.c-send:hover{transform:translateX(4px)}
.c-send:focus-visible{outline:2px solid #efebe3;outline-offset:2px;border-radius:4px}
.c-send[disabled]{opacity:.5}
.c-status{margin:8px 0 0;font-size:.85rem;color:rgba(239,235,227,.6)}
.c-status:empty{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sf-cols{grid-column:8/13;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sf-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.sf-k{margin:0 0 6px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,235,227,.45)}
.sf-col a,.sf-col .copy{font-size:.98rem;text-decoration:none;border:0;padding:2px 0;background:none;font:inherit;cursor:pointer;position:relative}
.sf-col a::after,.sf-col .copy::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.sf-col a:hover::after,.sf-col .copy:hover::after,.sf-col a:focus-visible::after{transform:scaleX(1)}
.sf-col .status{font-size:.8rem;color:rgba(239,235,227,.55)}
.sf-col .status:empty{display:none}
.sf-mark{position:relative;height:calc(var(--fs)*.66);overflow:hidden;--fs:min(16.4vw,21rem);pointer-events:none;margin-top:-8px}
.sf-mark span{position:absolute;left:50%;top:0;transform:translate(-50%,calc((1 - var(--mk,1))*40%));display:block;white-space:nowrap;font-weight:500;font-size:var(--fs);line-height:.86;letter-spacing:-.065em;color:#efebe3;opacity:calc(.12 + var(--mk,1)*.82);transition:transform 1.4s var(--ease),opacity 1.4s var(--ease)}
.js .site-foot:not(.in) .sf-mark span{--mk:0}
.sf-bot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding-block:14px 18px;border-top:1px solid rgba(239,235,227,.14);font-size:.82rem;color:rgba(239,235,227,.7)}
.sf-up{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.sf-up:hover{color:#efebe3}
@media (max-width:900px){
  .sf-cta,.sf-cols{grid-column:1/-1}
  .sf-cols{grid-template-columns:1fr 1fr;gap:22px 16px}
  .c-form{max-width:none}
  .sf-loc{display:none}
}
@media (prefers-reduced-motion:reduce){.sf-mark span{transition:none}.js .site-foot:not(.in) .sf-mark span{--mk:1}}
/* project cards: title sits at the top, so it is readable before the next card slides over */
.case-txt{top:clamp(22px,3.4vw,52px);bottom:auto}
.case-shade{background:linear-gradient(to bottom,rgba(10,10,9,.62),rgba(10,10,9,0) 52%)}
.case-light .case-shade{background:linear-gradient(to bottom,rgba(255,255,255,.6),rgba(255,255,255,0) 40%)}
/* project card on a white image: dark text */
.case-light .case-txt,.case-light .case-go{color:var(--ink);text-shadow:none}
.case-light .case-in{box-shadow:inset 0 0 0 1px rgba(20,20,18,.08)}

/* skill and tool chips everywhere can be ticked on and off, just for fun: only the colour changes */
[role=button][aria-pressed]{cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease)}
.chips li[aria-pressed=true],.wdw-chips li[aria-pressed=true],.tool-list span[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wdw-chips.tools li[aria-pressed=true]{background:transparent;color:var(--ink);border-color:var(--ink)}
[role=button][aria-pressed]:active{transform:scale(.95)}
[role=button][aria-pressed]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.chips li[aria-pressed=false]:hover,.wdw-chips:not(.tools) li[aria-pressed=false]:hover,.tool-list span[aria-pressed=false]:hover{border-color:var(--ink)}}

/* night mode: same layout, warm near-black paper and soft off-white ink */
html[data-theme=dark]{--paper:#141413;--ink:#ece9e1;--mute:#9b9890;--line:#33322e;--grey:#55534d;color-scheme:dark;background:#141413!important}
html[data-theme=dark] body::after{background:#141413!important}
html[data-theme=dark] .site-foot{background:#0d0d0c}
html[data-theme=dark] .case-light .case-txt,html[data-theme=dark] .case-light .case-go{color:#252523}
html[data-theme=dark] .chips li,html[data-theme=dark] .wdw-chips:not(.tools) li{background:transparent}
html.theme-anim,html.theme-anim *{transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)!important}

/* night mode button (desktop: bottom left) and bottom menu bar on phones */
.mnav{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:250;display:flex;align-items:center;gap:6px}
.mnav-link{display:none}
.ui-btn{width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--ink);color:var(--paper);box-shadow:0 8px 20px -10px rgba(0,0,0,.5);transition:transform .3s var(--ease),background-color .5s var(--ease),color .5s var(--ease)}
.ui-btn:hover{transform:scale(1.07)}
.ui-btn:active{transform:scale(.94)}
.ui-btn svg{width:20px;height:20px}
.ui-btn .moon{display:none}
html[data-theme=dark] .ui-btn .sun{display:none}
html[data-theme=dark] .ui-btn .moon{display:block}
@media (max-width:820px){
  .top nav{display:none}
  .mnav{left:50%;transform:translateX(-50%) scale(var(--ms,1));transform-origin:50% 100%;gap:6px;padding:6px;border-radius:999px;background:var(--ink);box-shadow:0 14px 34px -14px rgba(0,0,0,.55);transition:transform .45s var(--ease),background-color .4s var(--ease),opacity .4s}
  .mnav.mini{--ms:.8;opacity:.94}
  .mnav-link,.mnav .ui-btn{transition:background-color .4s var(--ease),color .4s var(--ease)}
  .mnav.on-dark{background:#f4f2ec}
  .mnav.on-dark .mnav-link{color:#252523}
  .mnav.on-dark .mnav-link[aria-current=page]{background:rgba(37,37,35,.1)}
  .mnav.on-dark .ui-btn{background:#252523;color:#f4f2ec}
  .mnav-link{display:flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;color:var(--paper);text-decoration:none;font-weight:500;font-size:1rem;transition:background-color .3s var(--ease)}
  .mnav-link[aria-current=page]{background:color-mix(in srgb,var(--paper) 16%,transparent)}
  .mnav-link:active{background:color-mix(in srgb,var(--paper) 22%,transparent)}
  .mnav .ui-btn{background:var(--paper);color:var(--ink);box-shadow:none}
}
@media print{.mnav{display:none}}
html[data-theme=dark] .tk-slot{background:#000;box-shadow:inset 0 3px 6px #000,0 0 0 1px #45433e}

/* labels: like a type specimen, small caps sitting under a short rule */
html .meta-grid dt,html .rows .w,html .sf-k{font-size:.7rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--mute);line-height:1.35}
html .meta-grid dt,html .rows .w{display:block;padding-top:9px;position:relative;align-self:start}
html .meta-grid dt::before,html .rows .w::before{content:"";position:absolute;left:0;top:0;width:min(5.5em,100%);height:1px;background:currentColor;opacity:.7}
html .meta-grid dd{margin-top:6px}
html .rows li{align-items:start}
html .rows li>span:last-child{padding-top:4px}

/* big page titles and the footer word in capitals */
.mega,.sf-mark span{text-transform:uppercase}
.mega{letter-spacing:-.055em}
.sf-mark{--fs:min(13.2vw,17rem)}
.mega,.sf-mark span,.mq-item{font-weight:700}
.mega{letter-spacing:-.06em}
.sf-mark{--fs:min(12.4vw,16rem)}
/* phone menu: more compact by default, smaller still while scrolling down */
@media (max-width:820px){
  .mnav{padding:4px;gap:2px}
  .mnav-link{height:36px;padding:0 16px;font-size:.88rem}
  .mnav .ui-btn{width:36px;height:36px}
  .mnav .ui-btn svg{width:17px;height:17px}
  .mnav.mini{--ms:.72}
}

/* accessibility fixes from the final check */
.sf-k{color:rgba(239,235,227,.66)!important}
/* pastel cards and light browser chrome keep dark text in night mode */
html[data-theme=dark] .proc li{color:#252523}
html[data-theme=dark] .proc .tag{background:#252523;color:#f4f2ec}
html[data-theme=dark] .proc .mine{outline-color:#f4f2ec}
html[data-theme=dark] .b-bar{background:#2a2926;border-color:#3a3934}
html[data-theme=dark] .b-bar i{background:#55534d}
html[data-theme=dark] .b-url{background:#1c1b19;color:#b5b2aa}
.c-form:focus-within{border-color:#efebe3;box-shadow:0 1px 0 #efebe3}
.c-field input:focus-visible{outline:none}
html[data-theme=dark] .wdw-logo img{filter:invert(1)}

/* edge to edge on phones: content runs under the status bar and the browser bar; the header scrolls away with the page */
.top{padding-top:env(safe-area-inset-top,0px);height:calc(64px + env(safe-area-inset-top,0px))}
body::before{display:none}
.site-foot{padding-bottom:env(safe-area-inset-bottom,0px)}
@media (max-width:820px){
  .top{position:relative;top:auto}
  .hero-stage{top:env(safe-area-inset-top,0px);height:calc(100svh - env(safe-area-inset-top,0px))}
  .cases{--top:calc(env(safe-area-inset-top,0px) + 10px)}
}
@media (min-width:821px){.top{top:0}}

/* clean footer: a question, one big line, two links */
.sf-clean{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:clamp(120px,16vw,220px) clamp(72px,9vw,130px)}
.sf-still{margin:0;color:rgba(239,235,227,.66);font-size:clamp(1rem,1.4vw,1.25rem)}
.sf-big{margin:clamp(28px,4vw,56px) 0 0;font-weight:700;text-transform:uppercase;letter-spacing:-.06em;line-height:.9;font-size:clamp(3rem,11.6vw,15rem);color:#efebe3;white-space:nowrap;transform:translateY(calc((1 - var(--mk,1))*24px));opacity:calc(.2 + var(--mk,1)*.8);transition:transform 1.2s var(--ease),opacity 1.2s var(--ease)}
.js .site-foot:not(.in) .sf-big{--mk:0}
.sf-links{display:flex;gap:clamp(24px,3vw,44px);margin:clamp(28px,4vw,52px) 0 0;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.sf-links a{text-decoration:none;position:relative;padding:4px 0}
.sf-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.sf-links a:hover::after,.sf-links a:focus-visible::after{transform:scaleX(1)}
.site-foot::before{bottom:-30%;height:80%}
@media (max-width:820px){.sf-clean{padding-block:230px 72px}.sf-big{font-size:clamp(2.2rem,11.4vw,4rem)}}
@media (prefers-reduced-motion:reduce){.js .site-foot:not(.in) .sf-big{--mk:1}}

/* first picture on each project page scrolls with the page instead of sticking */
.js .heropin{height:auto!important;margin:0!important}
.heropin .pin-stage{position:relative!important;top:auto!important;height:auto!important;padding-top:0!important;display:block!important;overflow:visible}
.heropin .bleed{overflow:hidden}
.heropin .bleed img{transform-origin:50% 50%;will-change:transform;transition:none}


/* footer menu (phones): a stack of light buttons in the footer's top right corner */
.sf-nav{display:none}
@media (max-width:820px){
  .sf-nav{display:flex;flex-direction:column;gap:8px;position:absolute;top:28px;right:max(16px,env(safe-area-inset-right,0px));z-index:2}
  .sf-nav .mnav-link,.sf-nav .ui-btn{display:flex;align-items:center;justify-content:center;width:128px;height:44px;border-radius:10px;padding:0;background:#efebe3;color:#1b1a18;text-decoration:none;font-weight:500;font-size:.95rem;box-shadow:none}
  .sf-nav .mnav-link[aria-current=page]{background:#c9c5bc}
  .sf-nav .ui-btn svg{width:18px;height:18px}
  .sf-nav .mnav-link:active,.sf-nav .ui-btn:active{transform:scale(.96)}
  .mnav{transition:transform .45s var(--ease),background-color .4s var(--ease),opacity .35s ease}
  .mnav.hide{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(16px) scale(var(--ms,1))}
}

/* first project picture: unpinned, but it opens up from a rounded inset to full width as it comes in, with a soft zoom */
.heropin .bleed{clip-path:inset(0 var(--hi,0%) round var(--hr,0px));will-change:clip-path}
/* hand-off from the bottom bar to the footer stack: small, calm motion */
@media (max-width:820px){
  .mnav.hide{transform:translateX(-50%) translateY(6px) scale(.92)}
  .sf-nav>*{opacity:0;transform:translate3d(14px,0,0);transition:opacity .45s ease,transform .55s var(--ease)}
  .site-foot.nav-in .sf-nav>*{opacity:1;transform:none}
  .site-foot.nav-in .sf-nav>*:nth-child(2){transition-delay:.06s}
  .site-foot.nav-in .sf-nav>*:nth-child(3){transition-delay:.12s}
}
@media (prefers-reduced-motion:reduce){.sf-nav>*{opacity:1!important;transform:none!important;transition:none}}