/* Tokens measured from the reference at 1440x900 (2026-09-18). Accent is ours. */
:root{
  --ink:#0A0A0A; --text:#404040; --mute:#686868; --paper:#fff; --line:#E8E8E8;
  --signal:#E8461C;
  --lava-hot:#FF6A33; --lava-ember:#FFB067; --lava-cool:#2F6FBF;
  --gut:clamp(24px,4vw,56px); --sec:clamp(64px,8vw,120px);
  --hx:0px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6,p{margin:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:20px;top:20px;z-index:99;background:var(--ink);color:#fff;padding:10px 14px}

.label{font:600 13px/1.4 var(--sans);letter-spacing:.012em;text-transform:uppercase;color:var(--mute)}
.h2{font:600 36px/1.05 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.body{color:var(--text);max-width:38ch}
.giant{font:900 14.5vw/.8 var(--sans);letter-spacing:-.04em;text-transform:uppercase;color:var(--signal);white-space:nowrap;margin:0}
.giant>span{display:inline-block}

::selection{background:#e89b6e;color:#100d0b}
html{scrollbar-color:#76675d #100d0b}
body:has(.hero){background:#080809;--paper:#eeeae4;--line:#d4cfc7}
.nav{position:fixed;z-index:30;inset:0 0 auto;pointer-events:none;color:#f4f1ea}
.nav-top{height:88px;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.nav-home{pointer-events:auto;font-size:13px;font-weight:600;letter-spacing:-.01em;background:#111111;padding:10px 14px;border-radius:30px}
.nav-btn{pointer-events:auto;appearance:none;border:1px solid #77716b;border-radius:30px;background:#111;color:#f4f1ea;display:flex;align-items:center;gap:20px;padding:12px 18px;min-height:46px;font:500 14px/1 var(--sans);cursor:pointer}
.nav-btn svg{transition:transform .35s var(--ease)}
.nav-btn:hover{background:#29231f}
.nav.open .nav-btn svg{transform:rotate(45deg)}
.nav-panel{pointer-events:auto;position:fixed;inset:0;background:#11100f;color:#f4f1ea;padding:clamp(112px,17svh,180px) var(--gut) 40px;overflow:auto;height:100dvh;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.nav-panel[hidden]{display:none}
.nav.open .nav-panel{animation:menu-in .35s var(--ease) both}
@keyframes menu-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.nav-links{list-style:none;margin:0;padding:0}
.nav-links a{display:block;width:fit-content;font:500 clamp(54px,min(9vw,14svh),132px)/1.08 var(--sans);letter-spacing:-.04em;transition:color .2s,transform .35s var(--ease)}
.nav-links a:hover,.nav-links a:focus-visible{color:#e6a77e;transform:translateX(10px)}
.nav-links a[aria-current="page"]{color:#e6a77e}
.nav-where{display:flex;justify-content:space-between;align-items:end;gap:24px;border-top:1px solid #49413a;padding-top:24px;font-size:14px;color:#c8bfb7}
.nav-where time{display:block;font-variant-numeric:tabular-nums}
.nav-where a{color:#f4f1ea;text-decoration:underline;text-underline-offset:5px}
body.menu-open{overflow:hidden}
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 18% 35%,#382014 0%,transparent 52%),radial-gradient(ellipse at 87% 62%,#17202c 0%,transparent 44%),#080809}
.lava{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
.lava.off{visibility:hidden}
.hero-media{position:absolute;inset:0 0 auto;height:70svh;z-index:3;pointer-events:none;overflow:hidden;mask-image:linear-gradient(#000 0 82%,transparent 100%)}
#slot{position:absolute;height:77svh;aspect-ratio:2/3;top:-3svh;left:50%;transform:translateX(-50%)}
#slot img{width:100%;height:100%;object-fit:contain}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(transparent 45%,rgba(8,8,9,.38) 70%,#080809 100%)}
.hero .drop{position:absolute;z-index:4;left:var(--gut);right:var(--gut);top:69svh;overflow:hidden;padding-bottom:4px}
.hero .giant{width:100%;text-align:center;padding-top:.05em;line-height:.88}
.hero-name{position:relative;display:block}
.hero-name .nm-base{display:inline-block;white-space:nowrap;color:#f4f1ea;-webkit-text-fill-color:#f4f1ea}
.hero-name .nm-molten{display:block;position:absolute;inset:0;padding-top:inherit;text-align:center;color:transparent;-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text;background-image:radial-gradient(ellipse at 20% 30%,#ffc98d 0%,#c36939 20%,transparent 48%),radial-gradient(ellipse at 75% 70%,#88b4d3 0%,#325f88 25%,transparent 50%),linear-gradient(115deg,#cf8851,#6e351f 35%,#e4b381 55%,#345e7a 80%,#d79a60);background-size:160% 200%,180% 220%,160% 100%;background-position:var(--tx,20%) 30%,var(--ty,80%) 70%,50% 50%;mask-image:radial-gradient(ellipse var(--mr,140px) 100px at var(--mx,50%) var(--my,50%),#000 10%,#0009 55%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse var(--mr,140px) 100px at var(--mx,50%) var(--my,50%),#000 10%,#0009 55%,transparent 100%);opacity:var(--mop,0);pointer-events:none}
.hero-lead{position:absolute;z-index:4;bottom:max(24px,3svh);left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;align-items:center;gap:24px;color:#f4f1ea}
.hero-copy{font:400 13px/1.5 var(--sans);color:#c6bcb4}
.hero-copy b{display:block;font-weight:500;font-size:16px;color:#f4f1ea}
.hero-actions{display:flex;gap:32px;align-items:center}
.hero-work,.hero-cta{font-size:14px;display:inline-flex;gap:22px;align-items:center;min-height:44px}
.hero-work{color:#d4c9c1}
.hero-cta{border-bottom:1px solid #a2978c}
.hero-cta:hover,.hero-work:hover{color:#e6a77e}
body:has(.hero) .nav{display:none}
.nav-ready body:has(.hero) .nav{display:block}
.nav-ready body:has(.hero) .nav-fallback{display:none}
body:has(.hero) .nav-home,body:has(.hero) .nav-btn{border-radius:2px}
body:has(.hero) .nav:not(.open):not(.past-hero) .nav-home{background:transparent;padding-left:0}
body:has(.hero) .nav:not(.open):not(.past-hero) .nav-btn{background:transparent;border-color:#8f857b;border-radius:2px}
body:has(.hero) .hero-lead{padding-bottom:env(safe-area-inset-bottom,0px)}
.sec,.foot,.page{position:relative;z-index:4;background:var(--paper)}
.sec{padding:var(--sec) var(--gut)}
.stage{position:relative;z-index:5;background:var(--paper);border-radius:20px 20px 0 0;overflow:hidden}
body:has(.hero) .stage{border-radius:0}
.stage-pin{position:relative}
.sheet{padding:clamp(40px,5vw,72px) var(--gut) 56px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.work-intro{margin-top:16px;color:var(--text);font-size:16px}
.work-credit{font-size:13px;color:var(--text);margin-top:24px;max-width:70ch}
.work-credit a{text-decoration:underline;text-underline-offset:3px}
/* underline link with letter roll */
.roll{display:inline-flex;gap:8px;align-items:center;font:600 13px/1.4 var(--sans);letter-spacing:.012em;text-transform:uppercase;
  padding-bottom:8px;border-bottom:1px solid rgba(10,10,10,.35);white-space:pre}
.roll .w{display:inline-block;overflow:hidden;height:1.4em}
.roll .l{display:inline-block;text-shadow:0 1.4em 0 currentColor;transition:transform .5s var(--ease);transition-delay:calc(var(--i) * 14ms)}
.roll:hover .l,.roll:focus-visible .l{transform:translateY(-1.4em)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px var(--gut)}
.card{display:block}
.card figure{margin:0;aspect-ratio:690/561;overflow:hidden;background:#111}
.card img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.1s var(--ease)}
.card:hover img{transform:scale(1.035)}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:24px}
.card h2{font:600 22px/1.2 var(--sans);letter-spacing:-.01em;text-transform:uppercase;color:#000}
.card .kind{font:600 13px/1.4 var(--sans);letter-spacing:.012em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.card .kind::after{content:" \2197";color:var(--ink)}
.card p{margin-top:8px;color:var(--text);max-width:34ch}
.card.hide{display:none}

.elastic{display:flex;gap:12px;width:100%;height:clamp(500px,65svh,720px)}
.panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:12px;background:#171717;color:#f4f1ea;transition:flex-grow .55s var(--ease)}
.panel.is-active{flex-grow:5}
.panel img{position:absolute;top:0;left:0;width:100%;height:calc(100% - 224px);object-fit:cover;object-position:top left;filter:grayscale(1) brightness(.3);transition:filter .4s,transform .55s var(--ease)}
.panel.is-active img{filter:none;object-fit:cover;background:#171717}
.panel-open{position:absolute;inset:calc(100% - 224px) 0 0;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#171717;opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none}
.panel.is-active .panel-open{opacity:1;visibility:visible;transition-delay:.15s}
.panel-kind{font:400 12px/1.2 var(--sans);color:#c6bcb4}
.panel-title{font:600 clamp(26px,2.7vw,44px)/1 var(--sans);letter-spacing:-.03em;white-space:nowrap}
.panel-desc{font-size:14px;line-height:1.4;color:#c8c3bf;max-width:45ch}
.panel-cta{font-size:13px;margin-top:auto;color:#edb28b}
.panel-shut{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;writing-mode:vertical-rl;font-size:16px;font-weight:500;white-space:nowrap}
.panel-n{display:none}
.panel-index-kind{position:absolute;top:18px;left:16px;z-index:1;background:#171717;color:#f4f1ea;padding:4px 7px;font-size:12px;line-height:1.3;pointer-events:none}
.panel.is-active .panel-index-kind{visibility:hidden}
body:has(.hero) .panel{border-radius:3px}
body:has(.hero) .panel:not(.is-active) img{filter:grayscale(.5) brightness(.6)}
.panel.is-active .panel-shut{visibility:hidden}
.panel:focus-visible{outline-offset:-3px;outline-color:#edb28b}
.project-notes{padding-top:40px}
.project-notes .sec-head>p{font-size:14px;color:var(--text)}
.project-note{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:40px 0;border-top:1px solid var(--line)}
.project-note h3{font:500 clamp(24px,3vw,40px)/1.15 var(--sans);letter-spacing:-.03em}
.project-note h3>span{display:block;font:400 13px/1.5 var(--sans);letter-spacing:0;color:var(--text);margin-top:12px}
.project-note h3 a>span{font-size:.6em;color:#75706b}
.project-note p{max-width:60ch;color:var(--text);font-size:16px}
.project-note .note-problem{font-size:20px;color:var(--ink);margin-bottom:12px;line-height:1.4}
.project-note .note-detail{margin-top:18px;font-size:14px;color:#635b55}
.credit{margin-top:72px;color:var(--mute);font-size:14px;max-width:70ch}
.credit a{color:var(--ink);border-bottom:1px solid var(--line)}

/* about */
.about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px var(--gut)}
.about .h2{margin:8px 0 40px}
.about .body+.body{margin-top:26px}
.about .roll{margin-top:40px}
.blob{aspect-ratio:1/1;width:min(100%,520px);margin:0 auto 56px;clip-path:url(#blob)}
.blob img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.5) brightness(.86)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.stats div{padding:22px 24px 24px;border-left:1px solid var(--line)}
.stats div:first-child{border-left:0}
.stats b{display:block;font:600 28px/1.2 var(--sans);letter-spacing:-.02em}
.stats span{display:block;margin-top:6px;font-size:14px;line-height:1.6;letter-spacing:.005em;color:var(--text)}

.services{position:relative;z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:var(--sec) var(--gut);background:#141210;color:#f4f1ea}
.services .h2{color:inherit;font-weight:500;font-size:clamp(32px,4vw,56px)}
.services dl{margin:0}
.services dl>div{padding:24px 0;border-top:1px solid #49413a}
.services dt{font-size:20px;margin-bottom:10px}
.services dd{margin:0;color:#c8bfb7;font-size:16px;max-width:50ch}
/* footer */
.foot{background:var(--ink);color:#fff;padding:64px 40px 40px;overflow:hidden;scroll-margin-top:20px}
.foot-label{margin-bottom:20px;color:#b2a89e}
.foot .giant{display:block;text-align:center;transition:opacity .3s}
.foot .giant:hover{opacity:.85}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:96px;font:600 13px/1.4 var(--sans);letter-spacing:.012em;text-transform:uppercase}
.foot-row{padding-right:0}
.foot-row nav{display:flex;gap:16px;flex-wrap:wrap}
.foot-row a:hover{color:var(--signal)}
.foot-row span{color:#b2a89e}

/* about page */
.about-h1{font:600 48px/1.02 var(--sans);letter-spacing:-.03em;color:var(--ink);margin:10px 0 40px;text-transform:none}
.about-acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px}
.about-acts .roll{margin-top:0}
.foot .giant{text-transform:uppercase;color:var(--signal)}
.foot .giant>span{display:inline-block}
body:has(.hero) .foot .giant{color:#f4f1ea}
body:has(.hero) .foot .giant:hover{color:#e6a77e}
body:has(.hero) .foot{background:#141210;border-top:1px solid #49413a;padding-top:48px}

/* floating chip */
.chip{position:fixed;z-index:19;right:20px;bottom:20px;transition:opacity .35s var(--ease),transform .35s var(--ease);background:var(--ink);color:var(--signal);border-radius:3px;padding:10px 14px;
  font:600 13px/1.4 var(--sans);letter-spacing:.012em;text-transform:uppercase}
.chip::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:1px}

/* inner pages */
.page{padding:180px var(--gut) var(--sec);min-height:100svh}
.page h1{font:600 52px/1 var(--sans);letter-spacing:-.03em;text-transform:uppercase}
.filters{display:flex;flex-wrap:wrap;gap:4px;margin:40px 0 64px}
.filters button{all:unset;cursor:pointer;padding:9px 14px;border-radius:3px;font:600 12px/1.4 var(--sans);letter-spacing:.012em;text-transform:uppercase;color:var(--mute);transition:color .2s,background .2s}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed=true]{background:#EFEFEF;color:var(--ink)}
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:48px var(--gut)}
.contact .body{margin-top:40px}
.contact .roll{margin-top:40px}
.cols{display:flex;gap:64px}
.cols .label{margin-bottom:16px}
.cols a{display:block;font:600 13px/26px var(--sans);letter-spacing:.012em;text-transform:uppercase}
.cols a:hover{color:var(--signal)}
.contact figure{margin:0;aspect-ratio:2/3;overflow:hidden;background:#ddd}
.contact figure img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:grayscale(1)}

/* entrance */
[data-rise]{opacity:1;transform:none}
[data-rise].in{opacity:1;transform:none}

@media (max-width:809px){
  .grid{grid-template-columns:1fr;gap:56px}
  .about,.contact{grid-template-columns:1fr}
  .blob{margin-bottom:32px}
  .services li{font-size:36px}
  .foot{padding:48px 20px 96px}
  .foot-row{margin-top:56px;padding-right:0}
  .page{padding-top:140px}
  .page h1{font-size:40px}
  .about-h1{font-size:34px}
  .chip{display:none}
  .sec-head{flex-direction:column;align-items:flex-start}
  .stats div{padding:16px}
  .stats b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .hero-media{opacity:1}
  .hero-lead{opacity:1}
  .hero-name,.hero-copy,.hero-cta{opacity:1!important;visibility:visible!important}
  .hero-name .nm-molten{display:none}
  [data-rise]{opacity:1;transform:none}
  .panel,.panel img,.panel-open,.panel-shut{transition:none!important}
}

.chip.hide{opacity:0;transform:translateY(12px);pointer-events:none}

@media (max-width:1000px){
 .sheet{padding-top:92px}
 .nav-top{height:76px}.nav-btn{gap:12px;padding:11px 15px}.nav-where{align-items:start;flex-wrap:wrap}.nav-where>span{flex-basis:100%}
 .hero-media{height:68svh}#slot{height:72svh;top:0}
 .hero .drop{top:69svh}
 .hero-lead{top:80svh;bottom:auto;flex-direction:column;align-items:stretch;gap:16px}
 .hero-copy{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px}.hero-copy b{font-size:14px}
 .hero-actions{justify-content:space-between;gap:16px}.hero-work,.hero-cta{font-size:13px;gap:12px}
 .panel-index-kind{display:none}
 .elastic{display:grid;grid-template-columns:1fr;height:auto;gap:28px}
 .panel,.panel.is-active{display:block;min-height:0;overflow:hidden;background:#171717}
 .panel img,.panel.is-active img{position:relative;width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;object-position:top;filter:none}
 .panel-open,.panel.is-active .panel-open{position:relative;inset:auto;padding:22px;opacity:1;visibility:visible;gap:12px;pointer-events:auto;transition:none}
 .panel-title{font-size:30px;white-space:normal}.panel-desc{font-size:15px}.panel-cta{margin-top:12px}.panel-shut{display:none}
 .project-note,.services{grid-template-columns:1fr;gap:24px}.project-note{padding:32px 0}.project-notes{padding-top:32px}
 .foot{padding-bottom:40px}.sec-head{align-items:flex-start}.work-intro{max-width:26ch}
}
@media (max-height:600px){
 .hero{height:600px;min-height:600px}.hero-media{height:370px}#slot{height:420px;top:0}.hero .drop{top:380px}.hero-lead{top:auto;bottom:24px}
}
@media (prefers-reduced-motion:reduce){.hero-actions{opacity:1!important;visibility:visible!important}}

.hero-name .nm-molten{animation:molten-drift 9s ease-in-out infinite alternate;animation-play-state:paused}
.hero-name.is-scrubbing .nm-molten{animation-play-state:running}
@keyframes molten-drift{from{background-position:var(--tx,20%) 30%,var(--ty,80%) 70%,50% 50%}to{background-position:calc(var(--tx,20%) + 30%) 70%,calc(var(--ty,80%) - 25%) 20%,80% 50%}}

.nav-fallback{position:absolute;z-index:30;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:12px;background:#111;color:#f4f1ea;padding:20px var(--gut);font-size:13px}

.cinema{position:relative;background:#080809;color:#f4f1ea}
.cinema-scene{position:relative;isolation:isolate}
.cinema-backdrop{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 18% 35%,#382014 0%,transparent 52%),radial-gradient(ellipse at 87% 62%,#17202c 0%,transparent 44%),#080809}
.cinema .hero,.cinema .stage,.cinema .work{background:transparent}
.cinema .hero{z-index:1}
.cinema .stage{color:#f4f1ea}
.cinema .h2{color:inherit;font-weight:500}
.cinema .work-intro,.cinema .work-credit{color:#d4c9c1}
.cinema .roll{border-color:#a2978c}
body:has(.hero) .project-notes{background:#100e0d;color:#f4f1ea;--ink:#f4f1ea;--text:#c8bfb7;--line:#49413a}
body:has(.hero) .project-note .note-detail{color:#c8bfb7}
body:has(.hero) .nav-top{width:fit-content;height:54px;margin:20px auto 0;padding:5px 7px 5px 18px;gap:24px;background:#171513;border:1px solid #49413a;border-radius:999px;pointer-events:auto}
body:has(.hero) .nav-home{padding:0 20px 0 0!important;background:transparent!important;border-right:1px solid #49413a;border-radius:0;font-size:13px}
.nav-quick{display:flex;gap:2px;align-items:center}
.nav-quick a{padding:9px 15px;border-radius:999px;color:#d4c9c1;font-size:13px;line-height:1.5;transition:background .2s,color .2s}
.nav-quick a:hover,.nav-quick a:focus-visible{background:#39312a;color:#fff}
body:has(.hero) .nav-btn{display:none}
body:has(.hero) .nav-panel{inset:84px var(--gut) auto auto;width:min(420px,calc(100% - 2 * var(--gut)));height:auto;max-height:calc(100dvh - 112px);padding:28px;border-radius:16px;border:1px solid #49413a;gap:32px}
body:has(.hero) .nav-links a{font-size:40px;line-height:1.35;letter-spacing:-.03em}
body:has(.hero) .nav-where{font-size:12px;gap:16px;flex-wrap:wrap;padding-top:16px}
body:has(.hero) .nav-where>span{flex-basis:100%}
.cinema-pending .hero-media,.cinema-pending .hero-name,.cinema-pending .hero-copy,.cinema-pending .hero-actions,.cinema-pending .nav,.cinema-pending .nav-fallback{opacity:0;visibility:hidden}
.cinema-ready .cinema-scene{height:100svh;min-height:0;overflow:hidden}
.cinema-ready .cinema-backdrop{position:absolute;inset:0;margin:0;height:100%;width:100%}
.cinema-ready .hero{position:absolute;inset:0;height:100%;min-height:0}
.cinema-ready .stage{position:absolute;inset:0;overflow:visible;border-radius:0}
.cinema-ready .stage-pin,.cinema-ready .work{height:100%}
.cinema-ready .work{padding:100px var(--gut) max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
.cinema-ready .sec-head{flex-direction:row;align-items:center;flex-shrink:0;margin-bottom:20px;gap:20px}
.cinema-ready .work-intro{font-size:13px;margin-top:8px}
.cinema-ready .h2{font-size:clamp(24px,2.5vw,36px)}
.cinema-ready .elastic{display:block;position:relative;flex:1;min-height:0;height:auto;perspective:1200px;perspective-origin:50% 45%;transform-style:preserve-3d}
.cinema-ready .panel,.cinema-ready .panel.is-active{display:block;position:absolute;inset:0 8%;overflow:hidden;border-radius:4px;background:#171513;box-shadow:0 28px 64px #0006;transition:none;backface-visibility:hidden;will-change:transform,opacity}
.cinema-ready .panel img,.cinema-ready .panel.is-active img,.cinema-ready .panel:not(.is-active) img{position:absolute;inset:0;width:100%;height:calc(100% - 124px);aspect-ratio:auto;object-fit:cover;object-position:top;filter:none;transition:none}
.cinema-ready .panel-open,.cinema-ready .panel.is-active .panel-open{position:absolute;inset:auto 0 0;height:124px;padding:18px 24px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:4px 28px;background:#171513;opacity:1;visibility:visible;pointer-events:auto;transition:none;align-content:center}
.cinema-ready .panel-title{grid-column:1;grid-row:1;font-size:clamp(24px,2.5vw,36px);line-height:1.05;white-space:normal}
.cinema-ready .panel-kind{grid-column:2;grid-row:1;font-size:12px;align-self:center}
.cinema-ready .panel-desc{grid-column:1;grid-row:2 / 4;font-size:13px;line-height:1.4;max-width:65ch;margin-top:5px}
.cinema-ready .panel-cta{grid-column:2;grid-row:3;font-size:12px;margin:0;align-self:end}
.cinema-ready .panel-shut,.cinema-ready .panel-index-kind{display:none}
.work-controls{display:flex;align-items:center;justify-content:center;gap:22px;padding-top:16px;flex-shrink:0}
.work-controls[hidden]{display:none}
.work-controls button{width:44px;height:38px;appearance:none;border:1px solid #84786e;border-radius:50%;color:#f4f1ea;background:#171513;font-size:20px;cursor:pointer;transition:background .2s}
.work-controls button:hover{background:#39312a}
.work-controls button:disabled{opacity:.35;cursor:default}
.work-count{font-size:12px;font-variant-numeric:tabular-nums;min-width:3ch;color:#d4c9c1}
.cinema-ready .work-credit{font-size:11px;text-align:center;max-width:none;margin-top:10px}
@media(max-width:700px){
 body:has(.hero) .nav-top{height:48px;margin-top:max(16px,env(safe-area-inset-top));padding:4px 5px 4px 16px;gap:12px}
 body:has(.hero) .nav-quick{display:none}
 body:has(.hero) .nav-home{padding-right:16px!important}
 body:has(.hero) .nav-btn{display:flex!important;gap:12px;padding:8px 12px;min-height:38px;border:0!important;background:transparent!important}
 .cinema-ready .work{padding-top:90px}
 .cinema-ready .sec-head{align-items:start;margin-bottom:24px}
 .cinema-ready .work-intro{max-width:24ch;font-size:12px}
 .cinema-ready .sec-head .roll{font-size:10px;margin-top:4px;white-space:nowrap}
 .cinema-ready .panel,.cinema-ready .panel.is-active{inset:0 0 6px}
 .cinema-ready .panel img,.cinema-ready .panel.is-active img{height:calc(100% - 178px);object-fit:contain;object-position:center;background:#100e0d}
 .cinema-ready .panel-open,.cinema-ready .panel.is-active .panel-open{height:178px;padding:20px;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:8px}
 .cinema-ready .panel-kind{grid-column:1;grid-row:1;font-size:11px}
 .cinema-ready .panel-title{grid-row:2;font-size:28px}
 .cinema-ready .panel-desc{grid-row:3;max-width:38ch;font-size:12px;margin:0}
 .cinema-ready .panel-cta{grid-column:1;grid-row:4;margin:0}
 .cinema-ready .work-credit{font-size:10px;line-height:1.4;margin-top:12px}
 .work-controls{padding-top:10px}
}

/* paint room (2026-09-30): off-white ground, white and colour thrown on it, ink type */
body:has(.hero){background:#e9e6e0;--paper:#f4f2ee;--line:#d4cfc7}
html:has(.hero){scrollbar-color:#8a847c #e9e6e0}
.hero,.cinema-backdrop{background:#e9e6e0}
.cinema{background:#e9e6e0;color:var(--ink)}
.hero-media{height:80svh;mask-image:linear-gradient(#000 0 90%,transparent 100%)}
#slot{height:73svh;top:6svh}
.hero .drop{top:65svh;overflow:visible;padding:0;z-index:4}
.hero .giant{padding:.06em .12em .2em;line-height:.8}
.hero-name .nm-base{color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:.012em .02em 0 var(--ink),.024em .04em 0 var(--ink),.036em .06em 0 var(--ink),.048em .08em 0 var(--ink),.06em .1em 0 var(--ink)}
.name-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.name-cv-on .name-cv{display:block}
.name-cv-on .hero-name .nm-base{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;text-shadow:none}
.hero-lead{color:var(--ink);z-index:6}
.hero-copy{color:var(--text)}.hero-copy b{color:var(--ink)}
.hero-work{color:var(--text)}.hero-cta{border-bottom-color:var(--ink)}
.hero-cta:hover,.hero-work:hover{color:var(--signal)}
.cinema .stage{color:var(--ink)}
.cinema .work-intro,.cinema .work-credit{color:var(--text)}
.cinema .roll{border-color:rgba(10,10,10,.45)}
.cinema .work-count{color:var(--text)}
.cinema-ready .panel,.cinema-ready .panel.is-active{inset:0 15%;box-shadow:0 30px 70px #0003}
.cinema-pending .name-cv,.cinema-pending .pic-gl{opacity:0;visibility:hidden}
@media (max-width:1000px){
 .hero-media{height:70svh}#slot{height:57svh;top:10svh}
 .hero .drop{top:61svh}
 .cinema-ready .panel,.cinema-ready .panel.is-active{inset:0 4%}
}
@media(max-width:700px){.cinema-ready .panel,.cinema-ready .panel.is-active{inset:0 0 6px}}
@media (max-height:600px){#slot{height:400px;top:10px}.hero-media{height:420px}.hero .drop{top:370px}}
@media (prefers-reduced-motion:reduce){.name-cv,.pic-gl{display:none!important}}

/* wet paint (2026-10-01): hero hands over to About, bubble headline, second portrait */
.intro-about{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:0 clamp(24px,4vw,72px);padding:0 var(--gut) 0 0;min-height:100svh;color:var(--ink)}
.ia-photo{margin:0;align-self:end;height:min(92svh,1100px);container-type:size;display:flex;align-items:flex-end;pointer-events:none}
.ia-photo img{height:min(100cqh,150cqw);width:auto;max-width:none;aspect-ratio:2/3;mask-image:linear-gradient(#000 0 80%,transparent 100%),linear-gradient(90deg,#000 0 80%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
.ia-text{padding:96px 0 48px;max-width:760px}
.ia-title{margin:14px 0 26px;position:relative}
.ia-words{display:block;font:400 clamp(40px,6.2vw,104px)/1 "Bagel Fat One",var(--sans);color:#ff9a1f;-webkit-text-stroke:.07em var(--ink);paint-order:stroke fill;text-shadow:.05em .07em 0 var(--ink),.1em .14em 0 var(--ink)}
.ia-words span{display:block}
.ia-bubble{display:none;width:100%;margin-left:-1.2%}
.ia-title.is-drawn .ia-words{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ia-title.is-drawn .ia-bubble{display:block}
.ia-body{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--ink);max-width:36ch}
.ia-body+.ia-body{margin-top:14px;color:var(--text)}
.ia-acts{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:32px}
.cinema-ready .intro-about{position:absolute;inset:0;min-height:0}
@media (max-width:1000px){
 .intro-about{grid-template-columns:1fr;grid-template-rows:minmax(0,46svh) auto;padding:0;align-content:start}
 .ia-photo{height:100%;align-self:stretch;justify-content:center;padding-top:64px}
 .ia-photo img{mask-image:linear-gradient(#000 0 78%,transparent 100%),linear-gradient(90deg,transparent 0,#000 16% 84%,transparent 100%)}
 .ia-text{padding:8px var(--gut) max(24px,env(safe-area-inset-bottom));max-width:none}
 .ia-title{margin:8px 0 14px}
 .ia-body{font-size:16px}
 .ia-acts{margin-top:20px}
}
@media (max-width:1000px) and (max-height:760px){.ia-more{display:none}}

/* studio melt (2026-10-01): the portrait stands off the wall with its own shadow and takes the
   fluid colour reveal; the name sits on its own line below, behind the figure's fade */
.hero-fig{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-media{position:absolute;inset:0 0 auto;height:71svh;z-index:auto;mask-image:linear-gradient(#000 0 86%,transparent 100%)}
#slot{height:67svh;top:3svh}
#slot img{position:absolute;inset:0}
.hero-shadow{filter:brightness(0) blur(18px);opacity:.3;transform:translate(22px,16px) scale(1.015);transform-origin:50% 100%}
.pic-gl{position:absolute;top:0;left:0;opacity:0;mask-image:linear-gradient(#000 0 61svh,transparent 71svh)}
.pic-gl-on .pic-gl{opacity:1}
.load-count{position:absolute;z-index:6;left:var(--gut);bottom:calc(max(24px,3svh) + env(safe-area-inset-bottom,0px));font:500 12px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--ink);opacity:.62;pointer-events:none}
.pic-gl-on #slot .hero-img{opacity:0}
.hero .drop{top:68.5svh;z-index:2}
@media (max-width:1000px){
 .hero-media{height:66svh}#slot{height:56svh;top:9svh}
 .pic-gl{mask-image:linear-gradient(#000 0 57svh,transparent 66svh)}
 .hero .drop{top:64svh}
 .hero-shadow{filter:brightness(0) blur(12px);transform:translate(12px,10px) scale(1.01)}
}
@media (max-height:600px){#slot{height:380px;top:8px}.hero-media{height:400px}.hero .drop{top:392px}.pic-gl{display:none!important}}

/* Studio home (2026-10-03, London: hold it to the pamidordesign.co standard). Warm canvas, one display
   name, the press shot full-bleed, a scroll-filled statement, hairline project rows with facts, numbered
   skillset on night. Scoped under .home; studio.html and the inner pages are untouched. */
:root{--canvas:#EFEEEB;--night:#0A0A0A;--rule:#D3D0C9;--dim:#8A877F;--dim2:#B9B6AE}
.home{background:var(--canvas);color:var(--night);overflow-x:clip}
body:has(.home){background:var(--canvas)}
.home .hm-small{font:500 12px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.hm-h2{font:500 clamp(56px,7vw,100px)/.9 var(--sans);letter-spacing:-.03em;padding-bottom:28px;border-bottom:1px solid var(--rule)}
/* hero */
.hm-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 var(--gut);min-height:100svh;padding:0 var(--gut)}
.hm-hero__copy{align-self:end;padding:140px 0 clamp(40px,7svh,72px)}
.hm-name{font:500 clamp(64px,7vw,100px)/.88 var(--sans);letter-spacing:-.03em;margin:0 0 20px}
.hm-tag{font:400 18px/1.5 var(--sans);max-width:34ch}
.hm-tags{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:360px}
.hm-tags li{border:1px solid var(--rule);padding:9px 14px;font:500 13px/1.2 var(--sans);letter-spacing:.01em;color:#2a2a2a;background:rgba(255,255,255,.35)}
.hm-hero__fig{position:relative;margin:76px 0 0;height:calc(100svh - 76px);min-height:484px;display:block;overflow:hidden;background:#d9d6cf;will-change:transform,opacity,filter}
.hm-pic{position:absolute;top:0;left:50%;translate:-50% 0;width:max(100%,calc((100svh - 76px)*2/3));aspect-ratio:2/3}
.hm-pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
/* statement */
.hm-intro{position:relative;padding:var(--sec) var(--gut) 0;min-height:100svh;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:48px var(--gut);align-content:center}
.hm-statement{font:500 clamp(28px,3.4vw,48px)/1.2 var(--sans);letter-spacing:-.02em;color:var(--dim2);max-width:26ch}
.hm-statement .wd{color:var(--dim2);transition:color .25s}
.hm-statement .wd.on{color:var(--night)}
.hm-polaroid{margin:0;justify-self:end;align-self:start;width:min(100%,230px);aspect-ratio:1;rotate:4deg;box-shadow:0 18px 40px -20px rgba(0,0,0,.4);overflow:hidden}
.hm-polaroid img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15)}
.hm-live{grid-column:1/-1;border-top:1px solid var(--rule);padding:28px 0 var(--sec);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:16px var(--gut)}
.hm-live__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 40px}
.hm-live__list a{font:500 15px/1.4 var(--sans);letter-spacing:-.005em;color:#2a2a2a;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.hm-live__list a:hover{border-color:var(--night);color:var(--night)}
/* project rows */
.hm-work{padding:var(--sec) var(--gut) 0;scroll-margin-top:20px}
.hm-rows{list-style:none;margin:0;padding:0}
.hm-row{border-bottom:1px solid var(--rule);padding:30px 0}
.hm-row__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px var(--gut);align-items:start}
.hm-row__name{font:500 clamp(36px,4.2vw,60px)/1 var(--sans);letter-spacing:-.03em;color:var(--dim);transition:color .3s var(--ease)}
.hm-btn{justify-self:start;display:inline-flex;gap:14px;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--rule);font:500 15px/1 var(--sans);color:var(--dim);background:transparent;transition:color .25s,border-color .25s,background .25s}
.hm-btn:hover{background:var(--night);border-color:var(--night);color:#fff}
.hm-row__more{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px var(--gut);align-items:end;opacity:0;transform:scaleY(0);transform-origin:top;overflow:hidden;transition:opacity .4s var(--ease),transform .6s var(--ease)}
.hm-row.on .hm-row__more{opacity:1;transform:scaleY(1)}
.hm-row.on .hm-row__name{color:var(--signal)}
.hm-row.on .hm-btn{color:var(--night);border-color:var(--night)}
.hm-meta{margin:0;display:grid;grid-template-columns:auto auto auto minmax(0,1fr);gap:16px 40px;padding-top:56px}
.hm-meta dt{font:500 12px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.hm-meta dd{margin:0;font:400 16px/1.5 var(--sans);color:var(--night);max-width:36ch}
.hm-row__shot{margin:24px 0 0;aspect-ratio:1380/1122;overflow:hidden;background:#dcd9d2}
.hm-row__shot img{width:100%;height:100%;object-fit:cover;object-position:top left;transform:scale(1.03);transition:transform .9s var(--ease)}
.hm-row.on .hm-row__shot img{transform:none}
.hm-work__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:40px 0 var(--sec);flex-wrap:wrap}
.hm-work__foot .hm-small{text-transform:none;letter-spacing:0;font:400 14px/1.6 var(--sans);max-width:52ch}
.hm-work__foot .hm-small a{text-decoration:underline;text-underline-offset:3px;color:var(--night)}
/* skillset, on night */
.hm-skills{background:var(--night);color:#F2F1EE;padding:var(--sec) var(--gut)}
.hm-skills .hm-h2{border-color:#2C2C2C}
.hm-skill{list-style:none;margin:0;padding:0}
.hm-skill li{display:grid;grid-template-columns:70px minmax(0,6fr) minmax(0,5fr);gap:16px var(--gut);align-items:start;padding:44px 0;border-bottom:1px solid #2C2C2C}
.hm-skill__n{font:400 15px/1 var(--sans);color:#8A877F;padding-top:12px}
.hm-skill h3{font:500 clamp(28px,3.2vw,44px)/1.05 var(--sans);letter-spacing:-.025em;margin:0}
.hm-skill p{margin:0;padding-top:10px;font:400 16px/1.6 var(--sans);color:#B9B6AE;max-width:42ch}
/* closing line */
.hm-line{min-height:46svh;display:grid;place-items:center;padding:var(--sec) var(--gut);text-align:center}
.hm-line p{font:500 clamp(28px,3.6vw,52px)/1.15 var(--sans);letter-spacing:-.025em;max-width:22ch;color:var(--dim2)}
.hm-line .wd.on{color:var(--night)}
/* entrance for rows and footers */
.home [data-rise],.home .hm-row{opacity:0;translate:0 20px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.home [data-rise].in,.home .hm-row.in{opacity:1;translate:none}
.no-js .home [data-rise],.no-js .home .hm-row,.home.still [data-rise],.home.still .hm-row{opacity:1;translate:none}
.home.still .hm-statement .wd,.home.still .hm-line .wd{color:var(--night)}
.home+.foot{background:var(--night);padding-left:var(--gut);padding-right:var(--gut)}
@media(max-width:1000px){
  .hm-hero{grid-template-columns:1fr;min-height:0}
  .hm-hero__copy{order:2;padding:32px 0 48px}
  .hm-hero__fig{order:1;min-height:0;margin-top:96px;height:78svh}
  .hm-pic{width:max(100%,calc(78svh*2/3))}
  .hm-intro{grid-template-columns:1fr;min-height:0}
  .hm-polaroid{display:none}
  .hm-live{grid-template-columns:1fr}
  .hm-row__top,.hm-row__more{grid-template-columns:1fr}
  .hm-row__more{max-height:none;opacity:1}
  .hm-row__name{color:var(--night)}
  .hm-meta{grid-template-columns:1fr 1fr;gap:16px 24px;padding-top:24px}
  .hm-row__shot{margin-top:8px;max-width:100%}
  .hm-row__shot img{transform:none}
  .hm-skill li{grid-template-columns:48px 1fr}
  .hm-skill p{grid-column:2}
}

/* Depth scroll (2026-10-02, depth.js). Sheets stack; the dark ground only shows around a sheet as it falls back. */
.depth-on .home{background:none}
.sc{position:relative;overflow-x:clip;pointer-events:none;margin-top:calc(-1*(var(--dp,0px) + 100lvh))}
.sc:first-child{margin-top:0}
.sc-run{position:sticky;top:0;overflow:clip}
.sc-run>:first-child{position:sticky;top:min(0px,calc(100dvh - var(--h,100lvh)));min-height:100lvh;pointer-events:auto;will-change:transform,opacity}
.sc-run>section{background:none}
.depth-on .home-work,.depth-on .home-svc{background:var(--paper)} /* they travel as cards and as a curtain */
.sc-twin{position:absolute;left:0;top:0;width:100%;min-height:100lvh;pointer-events:none;will-change:transform}
.sc-pad{height:var(--d,0px)}
.sc-pad--in{height:var(--dp,0px)}
.depth-on .home-work{padding-bottom:var(--sec)}
.depth-on .home-svc{align-content:center}
.depth-on .foot{display:flex;flex-direction:column;justify-content:space-between;padding-top:104px}

/* ===== Camera v2 (2026-10-03). One room, one camera: the portrait is frame one, scroll is the dolly,
   every section is a plane that arrives from depth and leaves toward the lens, every route is the
   camera turning (cross-document view transitions), never a cut. */
.home{--vt-ease:cubic-bezier(.6,0,.2,1)}
.hm-hero{grid-template-rows:auto 1fr;position:relative;z-index:1}
.hm-hero__fig{grid-column:2;grid-row:1/-1;transform-origin:100% 0}
.hm-hero__copy{grid-column:1;grid-row:2}
.hm-slate{grid-column:1;grid-row:1;align-self:start;padding-top:124px;display:grid;gap:10px;align-content:start}
.hm-slate .hm-small{display:flex;gap:10px;align-items:center}
.hm-slate time{font-variant-numeric:tabular-nums;color:var(--night)}
.hm-dot{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 rgba(232,70,28,.5)}
@keyframes hm-pulse{0%{box-shadow:0 0 0 0 rgba(232,70,28,.45)}70%{box-shadow:0 0 0 10px rgba(232,70,28,0)}100%{box-shadow:0 0 0 0 rgba(232,70,28,0)}}
.hm-cap{position:absolute;left:0;bottom:0;margin:0;padding:12px 14px;font:500 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#f2f1ee;background:rgba(10,10,10,.55);opacity:0;transition:opacity .6s .6s}
.home.fx-on .hm-cap{opacity:1}
.hm-fx{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s}
.hm-fx.on{opacity:1}
/* the statement slides over the receding portrait inside the pinned distance (no added page length) */
.hm-intro{position:relative;z-index:4;background:none}
.home.camera .hm-intro{margin-top:-100svh}
.hm-statement{max-width:28ch}
.hm-live{padding-bottom:calc(var(--sec)*.55);background:var(--canvas)}
.hm-live__list a{color:var(--night)}
.hm-work{padding-top:calc(var(--sec)*.75)}
/* planes */
.hm-plane{will-change:transform,opacity;transform-origin:50% 100%}
.home+.foot{position:relative;z-index:2}
/* rows rest in ink; the pointed-at row goes to signal and the shot lifts toward the lens */
.hm-row__name{color:var(--night)}
.hm-btn{color:var(--night);border-color:#C9C6BF}
.hm-row__line{grid-column:1/-1;margin:0;padding-top:14px;font:400 17px/1.5 var(--sans);color:#2a2a2a;max-width:58ch}
.hm-row__shot{transition:translate .9s var(--ease),box-shadow .9s var(--ease)}
.hm-row.on .hm-row__more{max-height:1100px}
.hm-row.on .hm-row__shot{translate:0 -6px;box-shadow:0 34px 60px -34px rgba(0,0,0,.5)}
.home .hm-row{opacity:0;translate:0 36px;scale:.975;filter:blur(5px);transition:opacity .9s var(--ease),translate .9s var(--ease),scale .9s var(--ease),filter .9s var(--ease)}
.home .hm-row.in{opacity:1;translate:none;scale:1;filter:none}
.home.still .hm-row,.no-js .home .hm-row{opacity:1;translate:none;scale:1;filter:none}
/* footer reconciled with the type system */
.home+.foot .giant,.home .giant{font-weight:500;text-transform:none;letter-spacing:-.04em}
.home+.foot .foot-row,.home .foot-row{text-transform:none;letter-spacing:0;font-weight:500;font-size:14px}
/* focus that belongs to the system */
.nav-links a:focus-visible{outline:none;color:#e6a77e;text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:2px}
.nav-where a:focus-visible,.nav-btn:focus-visible,.nav-home:focus-visible{outline:2px solid #e6a77e;outline-offset:4px}
/* inner pages on the home canvas */
.hm-pg{padding:140px var(--gut) 0}
.hm-pg__head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:16px var(--gut);align-items:end;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.hm-pg__head .hm-h2{border:0;padding:0}
.hm-pg__head .hm-small{padding-bottom:14px}
.hm-filter{display:flex;flex-wrap:wrap;gap:8px;padding:24px 0 8px;border-bottom:1px solid var(--rule)}
.hm-filter button{appearance:none;cursor:pointer;border:1px solid var(--rule);background:rgba(255,255,255,.35);padding:9px 14px;font:500 13px/1.2 var(--sans);color:#2a2a2a;transition:background .2s,color .2s,border-color .2s}
.hm-filter button:hover{border-color:var(--night)}
.hm-filter button[aria-pressed="true"]{background:var(--night);border-color:var(--night);color:#fff}
.hm-row.hide{display:none}
.hm-pg .hm-work{padding-top:0}
.hm-pg .hm-row.on .hm-row__name{color:var(--night)}
.hm-pg .hm-row:hover .hm-row__name,.hm-pg .hm-row:focus-within .hm-row__name{color:var(--signal)}
.hm-about{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px var(--gut);padding:140px var(--gut) 0;min-height:100svh;align-items:end}
.hm-about__copy{padding-bottom:clamp(40px,7svh,72px)}
.hm-about__copy .hm-h2{border:0;padding:0 0 28px}
.hm-about__copy .hm-body{font:400 18px/1.55 var(--sans);color:#2a2a2a;max-width:44ch;margin-top:18px}
.hm-about__copy .hm-statement{margin-top:12px}
.hm-about__fig{position:relative;overflow:hidden;width:100%;max-width:560px;justify-self:end;aspect-ratio:2/3;max-height:calc(100svh - 160px);background:#d9d6cf}
.hm-about__fig .hm-pic{width:100%;top:0;left:50%;translate:-50% 0}
.hm-about__fig .hm-pic img{filter:none}
.hm-facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gut);border-top:1px solid var(--rule);margin-top:48px;padding-bottom:var(--sec)}
.hm-facts div{padding:28px 0 0;border-top:1px solid transparent}
.hm-facts b{display:block;font:500 clamp(40px,5vw,72px)/1 var(--sans);letter-spacing:-.03em}
.hm-facts span{display:block;margin-top:10px;font:400 15px/1.5 var(--sans);color:var(--dim)}
.hm-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hm-contact{padding:140px var(--gut) var(--sec);min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;gap:40px}
.hm-contact .giant{display:block;color:var(--signal);align-self:center;text-align:left}
.hm-contact .giant:hover{color:var(--night)}
.hm-contact__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px var(--gut);border-top:1px solid var(--rule);padding-top:28px}
.hm-contact__cols .hm-small{margin-bottom:12px}
.hm-contact__cols a{display:block;width:fit-content;font:400 17px/1.7 var(--sans);color:var(--night);border-bottom:1px solid transparent}
.hm-contact__cols a:hover{border-color:var(--night)}
.hm-contact__cols p{font:400 17px/1.6 var(--sans);color:#2a2a2a;max-width:34ch}
.hm-404{padding:180px var(--gut) var(--sec);min-height:100svh;display:grid;align-content:center;gap:24px}
/* cross-document view transitions: the camera turns to the next wall */
@view-transition{navigation:auto}
::view-transition-old(root){animation:hm-vt-out .4s var(--vt-ease,cubic-bezier(.6,0,.2,1)) both}
::view-transition-new(root){animation:hm-vt-in .55s cubic-bezier(.16,1,.3,1) both}
@keyframes hm-vt-out{to{opacity:0;transform:scale(1.04);filter:blur(8px)}}
@keyframes hm-vt-in{from{opacity:0;transform:scale(.97);filter:blur(8px)}}
.nav{view-transition-name:nav}
::view-transition-group(nav){animation-duration:0s}
::view-transition-old(nav){display:none}
.hm-pic{view-transition-name:portrait}
::view-transition-group(portrait){animation-duration:.7s;animation-timing-function:cubic-bezier(.6,0,.2,1)}
::view-transition-old(portrait),::view-transition-new(portrait){height:100%;object-fit:cover;overflow:hidden}
.giant{view-transition-name:cta}
::view-transition-group(cta){animation-duration:.7s;animation-timing-function:cubic-bezier(.6,0,.2,1)}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media(max-width:1000px){
  .hm-hero{grid-template-rows:auto auto auto}
  .hm-hero__fig{grid-column:1;grid-row:2;transform-origin:50% 0}
  .hm-slate{grid-row:1;padding-top:104px;padding-bottom:12px}
  .hm-hero__copy{grid-row:3}
  .hm-cap,.hm-fx{display:none}
  .hm-about{grid-template-columns:1fr;min-height:0;padding-top:120px;align-items:start}
  .hm-about__fig{justify-self:stretch;max-width:none;max-height:72svh}
  .hm-facts{grid-template-columns:1fr 1fr}
  .hm-contact{min-height:0;padding-top:120px}
  .hm-contact__cols{grid-template-columns:1fr 1fr}
  .hm-pg__head{grid-template-columns:1fr}
  .home .hm-row{filter:none;scale:1}
}
/* projects page: every row is open, so the detail sits under the name instead of hanging at the shot's foot */
.hm-pg .hm-row__more{align-items:start}
.hm-pg .hm-meta{padding-top:12px}
.hm-pg .hm-row__line{grid-column:1;padding-top:20px}
.hm-pg .hm-row__shot{margin-top:0}
/* ===== Camera v4, the axis (2026-10-03). The home page is a 3D room built around one fixed thing: the
   cut-out portrait. .cam is the lens (perspective), .world is the room, every .scene is a plane at its
   own x/y/z, and .hm-axis (the portrait) sits above the room in the centre of the lens for the whole
   trip. Planes are split in two around him: a word or a column on his left, another on his right.
   Planes ahead are small and hidden behind him, so the work comes out from behind his shoulders.
   Without .dolly (reduced motion, no JS, short viewport) the same markup is a plain stacked document. */
.cam{position:relative;--ax-h:min(128svh,82vw);--ax-top:4svh;--ax-w:calc(var(--ax-h)*2/3);--u:calc(var(--ax-h)/112);--tot-s:.54;--tot-y:3}
/* the still document */
.hm-axis{margin:0;height:72svh;display:flex;justify-content:center;overflow:hidden;pointer-events:none;padding-top:88px}
.hm-axis .hm-pic{position:relative;top:auto;left:auto;translate:none;height:100%;width:auto;aspect-ratio:2/3}
.hm-axis .hm-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none}
.hm-axis .hm-pic__c{opacity:0}
.cam .hm-hero{display:block;min-height:0;padding:0}
.hm-split{display:block;margin:0;padding:20px var(--gut) 0;border:0;text-align:center;font:500 clamp(52px,9vw,20svh)/.9 var(--sans);letter-spacing:-.04em;color:var(--night);text-decoration:none}
.hm-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px var(--gut);padding:36px var(--gut);align-items:start}
.cam .hm-intro{display:block;min-height:0;padding:var(--sec) 0 0}
.cam .hm-statement{font:500 clamp(24px,2.5vw,40px)/1.18 var(--sans);max-width:20ch}
.hm-aside{margin:0;font:400 clamp(16px,1.25vw,19px)/1.55 var(--sans);color:var(--text);max-width:32ch}
.cam .hm-skills{background:none;color:var(--night);padding:var(--sec) var(--gut)}
.hm-skills__h{margin:0 0 20px}
.cam .hm-skill li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-color:var(--rule);padding:28px 0;align-items:center}
.cam .hm-skill p{color:var(--text);padding:0;grid-column:auto}
.cam .hm-skill h3{grid-column:auto}
.cam .hm-work__foot{display:block;padding:0 0 var(--sec)}
.cam .hm-work__foot .roll{font:500 clamp(22px,2.2vw,32px)/1.1 var(--sans);letter-spacing:-.02em}
.hm-end{padding:var(--sec) 0 36px;border-top:1px solid var(--rule);background:var(--canvas);color:var(--night)}
.hm-end__row{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;padding:48px var(--gut) 0;font:500 13px/1.4 var(--sans);letter-spacing:.02em;color:var(--dim)}
.hm-end__row nav{display:flex;gap:10px 24px;flex-wrap:wrap}
.hm-end__row a{color:var(--night);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.hm-end__row a:hover,.hm-end__row a:focus-visible{border-color:var(--night)}
.home.still .hm-row__more,.no-js .home .hm-row__more{max-height:none;opacity:1}
.home.still .hm-row__name{color:var(--night)}
.home.still .hm-statement,.home.still .hm-statement .wd{color:var(--night)}

/* the room */
.cam.dolly{height:100svh;overflow:hidden;perspective:1000px;perspective-origin:50% var(--vp-y,50%);background:var(--canvas)}
/* the room behind the planes: frames, rails, fog and the light behind his head, drawn by home.js with the same projection */
.hm-bg{display:none}
.cam.dolly .hm-bg{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cam.dolly .world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cam.dolly .home{position:absolute;inset:0;transform-style:preserve-3d;overflow:visible;background:none} /* preserve-3d makes main the containing block in Chrome, so it must be the full frame or every plane collapses to 0 height */
.cam.dolly .hm-work,.cam.dolly .hm-rows{display:contents}
.cam.dolly .scene{position:absolute;inset:0;margin:0;padding:0;border:0;z-index:auto;backface-visibility:hidden;will-change:transform,opacity,filter;transform-origin:50% 50%;visibility:hidden;background:none}
.cam.dolly [data-rise],.cam.dolly .hm-row{opacity:1;translate:none;scale:1;filter:none;transition:none}
/* the axis: the portrait, in the centre of the lens. Its origin is his face, so a pose change scales around it. */
.cam.dolly .hm-axis{position:absolute;z-index:2;top:var(--ax-top);left:calc(50% - var(--ax-w)*.452);width:var(--ax-w);height:var(--ax-h);padding:0;display:block;overflow:visible;transform-origin:45.2% 21%;will-change:transform;
  -webkit-mask-image:linear-gradient(#000 52%,transparent 73%);mask-image:linear-gradient(#000 52%,transparent 73%)}
.cam.dolly .hm-axis .hm-pic{position:absolute;inset:0;width:auto;height:auto}
.cam.fx-on .hm-axis .hm-pic img{opacity:0!important}
.cam.dolly .hm-fx{z-index:3;transition:opacity .8s}
/* a plane split in two around him: one word hugging each side of his head */
.cam.dolly .hm-split{position:absolute;inset:0;padding:0;font-size:clamp(48px,9vw,20svh);--fy:calc(var(--ax-top) + var(--tot-y)*1svh + var(--u)*23.5);--fr:calc(var(--u)*11*var(--tot-s) + .6vw)}
.cam.dolly .hm-split span{position:absolute;top:var(--fy);translate:0 -50%;white-space:nowrap}
.cam.dolly .hm-split__a{right:calc(50% + var(--fr))}
.cam.dolly .hm-split__b{left:calc(50% + var(--fr))}
.cam.dolly .hm-hero .hm-split,.cam.dolly .hm-end .hm-split{font-size:clamp(56px,11vw,23svh);--fy:calc(var(--ax-top) + var(--u)*23.5);--fr:calc(var(--u)*10.4)}
.cam.dolly .hm-split--link span{transition:opacity .25s}
.cam.dolly .hm-split--link:hover span,.cam.dolly .hm-split--link:focus-visible span{opacity:.55}
/* two columns, one each side of him */
.cam.dolly .hm-duo{position:absolute;inset:0;padding:0 var(--gut);align-items:center;column-gap:calc(var(--u)*74*var(--tot-s) + 4vw);row-gap:0}
.cam.dolly .hm-duo>:first-child{justify-self:end}
.cam.dolly .hm-duo>:last-child{justify-self:start}
.cam.dolly .hm-duo--low{align-items:end;padding-bottom:12svh;column-gap:calc(var(--u)*70)}
.cam.dolly .hm-tag{font-size:clamp(16px,1.3vw,19px);max-width:30ch;margin:0}
.hm-duo .hm-slate{grid-column:auto;grid-row:auto;align-self:auto;padding:0;gap:6px}
.cam.dolly .hm-work__foot .hm-small{max-width:36ch}
.cam.dolly .hm-work__foot .roll{text-transform:none;letter-spacing:-.02em;font-size:clamp(20px,2vw,30px);white-space:nowrap;max-width:100%}
/* the corridor: each project stands to one side of him */
.cam.dolly .hm-row{display:grid;align-content:center;justify-content:center;grid-template-columns:min(34vw,56svh,100%);gap:0;overflow:visible}
.cam.dolly .hm-side--l{padding:0 calc(50% + var(--u)*34*var(--tot-s)) 0 var(--gut)}
.cam.dolly .hm-side--r{padding:0 var(--gut) 0 calc(50% + var(--u)*38*var(--tot-s))}
.cam.dolly .hm-row__top{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 16px;padding:14px 0 10px}
.cam.dolly .hm-row__name{color:var(--night);font-size:clamp(24px,2.3vw,38px);letter-spacing:-.025em}
.cam.dolly .hm-btn{min-height:40px;padding:0 14px;font-size:14px;color:var(--night);border-color:var(--night)}
.cam.dolly .hm-row{grid-template-areas:"shot" "top" "line"}
.cam.dolly .hm-row__top{grid-area:top}
.cam.dolly .hm-row__more{display:contents}
.cam.dolly .hm-meta{display:none}
.cam.dolly .hm-row__shot{grid-area:shot;margin:0;width:100%;aspect-ratio:1380/1122;box-shadow:0 34px 70px -42px rgba(0,0,0,.5);translate:none;transition:box-shadow .5s}
.cam.dolly .hm-row__shot img{transform:none}
.cam.dolly .hm-row:hover .hm-row__shot{box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
.cam.dolly .hm-row__line{grid-area:line;padding:0;margin:0;max-width:44ch;font-size:15px;line-height:1.5;color:var(--text)}
/* skillset: the name on his left, what it means on his right */
.cam.dolly .hm-skills{display:grid;align-content:center;padding:0 var(--gut);--g:calc(var(--u)*76*var(--tot-s) + 2vw)}
.cam.dolly .hm-skills__h{width:calc(50% - var(--g)/2);text-align:right;margin:0 0 clamp(14px,3svh,28px)}
.cam.dolly .hm-skill{display:grid;gap:clamp(20px,5svh,44px)}
.cam.dolly .hm-skill li{column-gap:var(--g);padding:0;border:0}
.cam.dolly .hm-skill h3{justify-self:end;text-align:right;font-size:clamp(24px,2.8vw,44px)}
.cam.dolly .hm-skill p{max-width:30ch;font-size:clamp(14px,1.1vw,17px);line-height:1.5}
/* contact: the opening frame again, in colour */
.cam.dolly .hm-end__row{position:absolute;right:var(--gut);bottom:22px;left:auto;padding:0;justify-content:flex-end}
/* the counter: where the camera is */
.hm-hud{position:fixed;left:var(--gut);bottom:26px;z-index:6;display:none;align-items:center;gap:14px;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--night);pointer-events:none}
.cam.dolly .hm-hud{display:flex}
.hm-hud__n{font-variant-numeric:tabular-nums}
.hm-hud__of{opacity:.55}
.hm-hud__l{margin-left:4px}
.hm-hud__bar{display:block;width:120px;height:1px;background:rgba(10,10,10,.22);overflow:hidden}
.hm-hud__bar b{display:block;height:100%;background:var(--night);transform-origin:0 50%;transform:scaleX(0)}
@media(max-width:1000px){
  /* phones: he is a bust at the top of the frame, the planes pass underneath him */
  .cam{--ax-h:min(92svh,190vw);--ax-top:12svh;--tot-s:.42;--tot-y:-18}
  .cam .hm-duo{grid-template-columns:1fr}
  .cam .hm-skill li{grid-template-columns:1fr;gap:6px}
  .cam.dolly .hm-split{font-size:clamp(44px,15vw,13svh);text-align:center;display:grid;align-content:center;justify-items:center;padding:34svh 0 8svh;line-height:.92}
  .cam.dolly .hm-split span{position:static;translate:none}
  .cam.dolly .hm-hero .hm-split,.cam.dolly .hm-end .hm-split{display:block;font-size:clamp(40px,14.5vw,11svh);padding-top:calc(var(--ax-top) + .5svh);white-space:nowrap;align-content:start}
  .cam.dolly .hm-end .hm-split{font-size:clamp(36px,13vw,10svh)}
  .cam.dolly .hm-duo{align-content:center;align-items:start;padding-top:34svh;padding-bottom:8svh;row-gap:16px}
  .cam.dolly .hm-duo>:first-child,.cam.dolly .hm-duo>:last-child{justify-self:start}
  .cam.dolly .hm-duo--low{align-content:end;padding-top:0;padding-bottom:calc(52px + env(safe-area-inset-bottom));row-gap:10px}
  .cam.dolly .hm-tag{font-size:16px}
  .cam.dolly .hm-statement{font-size:clamp(22px,6.2vw,30px);max-width:none}
  .cam.dolly .hm-aside{font-size:15px;max-width:none}
  .cam.dolly .hm-row{align-content:center;padding:35svh var(--gut) 7svh;grid-template-columns:min(100%,36svh)}
  .cam.dolly .hm-row__top{padding:10px 0 6px;gap:8px 12px}
  .cam.dolly .hm-row__name{font-size:clamp(20px,5.6vw,26px)}
  .cam.dolly .hm-btn{min-height:44px;font-size:13px;padding:0 12px}
  .cam.dolly .hm-row__line{font-size:13.5px;line-height:1.45}
  .cam.dolly .hm-skills{align-content:center;padding-top:34svh;padding-bottom:8svh}
  .cam.dolly .hm-skill li{grid-template-columns:1fr;column-gap:0;row-gap:4px}
  .cam.dolly .hm-work__foot .roll{white-space:normal}
  .cam.dolly .hm-skills__h{width:auto;text-align:left;margin-bottom:12px}
  .cam.dolly .hm-skill{gap:14px}
  .cam.dolly .hm-skill h3{justify-self:start;text-align:left;font-size:22px}
  .cam.dolly .hm-skill p{max-width:none;font-size:14px}
  .cam.dolly .hm-end__row{left:var(--gut);right:var(--gut);bottom:calc(48px + env(safe-area-inset-bottom));justify-content:space-between;font-size:12px}
  .hm-hud{left:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .hm-hud__bar{width:72px}
}