:root{--bg:#EFEDE8;--ink:#141414;--mute:#6b6a66;--acc:#E8431F;--line:rgba(20,20,20,.16);--mono:ui-monospace,"SF Mono",Menlo,monospace;--sans:"Helvetica Neue",Helvetica,Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden}
a{color:inherit}
.mono{font:11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.top{position:fixed;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:20px 32px;z-index:5}
.by{display:block;font-size:10px;line-height:1.2;margin-top:4px;color:inherit;opacity:.75}
@media(max-width:760px){.by{display:none}}
.top .name{font:500 15px var(--sans);cursor:pointer;letter-spacing:0;text-transform:none}
.top nav{display:flex;gap:26px}
.top nav a{text-decoration:none;position:relative;cursor:pointer;padding:2px 0}
.top nav a::before,.top nav a::after{color:var(--acc);position:absolute;opacity:0;transition:all .2s}
.top nav a::before{content:"[";left:-10px}
.top nav a::after{content:"]";right:-10px}
.top nav a:hover::before,.top nav a.on::before{opacity:1;left:-12px}
.top nav a:hover::after,.top nav a.on::after{opacity:1;right:-12px}
.bar{position:fixed;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:16px 32px;color:var(--mute);z-index:5}
.bar b{color:var(--acc);font-weight:400}
.screen{position:absolute;inset:0;padding:84px 32px 60px;display:none}
.screen.on{display:block}
.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;height:100%}
.home h1{font:400 34px/1.18 var(--sans);letter-spacing:-.01em;margin-bottom:22px;max-width:15em}
.home p{font-size:15px;line-height:1.6;color:#2b2a28;max-width:34em;margin-bottom:14px}
.home .links{display:flex;gap:20px;margin-top:20px}
.home .links a{text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.ph{position:relative;height:100%;max-height:calc(100vh - 150px);justify-self:end;aspect-ratio:4/5;background:#cfcbc3;overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .fb{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:var(--mute)}
.ph.noimg .fb{display:flex}
.ph.noimg img{display:none}
#trk{position:absolute;left:0;top:0;border:1px solid var(--acc);pointer-events:none;will-change:transform}
#trk i{position:absolute;width:12px;height:12px;border:2px solid var(--acc)}
#trk i:nth-child(1){left:-3px;top:-3px;border-right:0;border-bottom:0}
#trk i:nth-child(2){right:-3px;top:-3px;border-left:0;border-bottom:0}
#trk i:nth-child(3){left:-3px;bottom:-3px;border-right:0;border-top:0}
#trk i:nth-child(4){right:-3px;bottom:-3px;border-left:0;border-top:0}
#tags{position:absolute;left:-1px;top:100%;margin-top:6px;background:var(--acc);color:#fff;padding:6px 8px;white-space:nowrap}
#tags div{display:flex;gap:10px}
#tags span:first-child{opacity:.7;min-width:48px}
.ph .hud{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference;pointer-events:none}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.tile{position:relative;aspect-ratio:16/10;background:#d9d5cd;display:flex;align-items:flex-end;padding:10px 12px;cursor:pointer;overflow:hidden}
.tile::after{content:"";position:absolute;inset:8px;border:1px solid var(--acc);opacity:0;transform:scale(1.04);transition:all .25s}
.tile:hover::after{opacity:1;transform:scale(1)}
.tile .go{position:absolute;right:12px;top:10px;color:var(--acc);opacity:0;transition:opacity .2s}
.tile:hover .go{opacity:1}
.tile span{position:relative;z-index:1}
.h{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px;border-bottom:1px solid var(--line);padding-bottom:8px}
.h2{font:400 26px var(--sans);letter-spacing:-.01em}
.list a{display:flex;justify-content:space-between;text-decoration:none;font:400 26px/1 var(--sans);padding:16px 0;border-bottom:1px solid var(--line);transition:padding .2s,color .2s}
.list a:hover{padding-left:12px;color:var(--acc)}
.list a span{font:11px var(--mono);color:var(--mute);align-self:center;text-transform:uppercase;letter-spacing:.06em}
.page{max-width:900px}
.page p{font-size:16px;line-height:1.6;margin-top:14px}
#cut{position:fixed;inset:0;background:var(--ink);color:var(--bg);z-index:20;transform:translateY(100%);display:flex;align-items:flex-end;justify-content:space-between;padding:32px;pointer-events:none}
#cut .big{font:400 64px/1 var(--sans);letter-spacing:-.02em}
.screen{overflow:auto}
/* Index password gate: friction only, the hash is in main.js for anyone who reads the source. */
.gate{max-width:420px;margin-top:12vh}
.gate form{display:flex;gap:10px}
.gate input{flex:1;min-width:0;font:15px var(--sans);padding:10px 12px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);outline:none}
.gate input:focus{border-color:var(--acc)}
.gate button{border:1px solid var(--ink);background:var(--ink);color:var(--bg);padding:0 18px;cursor:pointer}
.gate button:hover{background:var(--acc);border-color:var(--acc)}
/* Index: hairline list grouped by type, filter with counts, sticky preview that plays in place. */
.xf{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 8px}
.xf button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:4px 0;color:var(--mute);cursor:pointer;position:relative}
.xf button sup{font-size:9px;margin-left:4px;vertical-align:top}
.xf button:hover,.xf button.on{color:var(--ink)}
.xf button.on::before{content:"[";position:absolute;left:-9px;color:var(--acc)}
.xf button.on::after{content:"]";position:absolute;right:-9px;color:var(--acc)}
.xg{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:40px;align-items:start}
.xs{transition:opacity .3s}
.xs[hidden]{display:none}
.xs-h{display:flex;justify-content:space-between;color:var(--mute);padding:28px 0 8px;border-bottom:1px solid var(--line)}
.xs:first-child .xs-h{padding-top:12px}
.xr{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;font:400 17px/1.25 var(--sans);text-align:left;cursor:pointer;transition:padding .2s,color .2s}
.xr img{width:64px;height:36px;object-fit:cover;display:block;background:#d9d5cd}
.xr span{font:11px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em;text-align:right;white-space:nowrap}
.xr:hover,.xr.on{padding-left:10px;color:var(--acc)}
.xr:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
.xpv{position:sticky;top:0}
.xpv .st{position:relative;aspect-ratio:16/9;background:#d9d5cd;overflow:hidden}
.xpv .st img{width:100%;height:100%;object-fit:cover;display:block}
.xpv .st iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.xpv .st .pl{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.92);border:0;cursor:pointer}
.xpv .st .pl::before{content:"";position:absolute;left:50%;top:50%;margin:-9px 0 0 -5px;border-left:15px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.xpv h3{font:400 22px/1.2 var(--sans);margin:14px 0 6px}
.xpv .mt2{display:flex;justify-content:space-between;gap:12px;color:var(--mute)}
.xpv .mt2 a{color:var(--ink);border-bottom:1px solid currentColor;text-decoration:none}
.xpv .mt2 a:hover{color:var(--acc)}
.xv{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.xv button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;border-bottom:1px solid transparent;padding:2px 0;color:var(--mute);cursor:pointer}
.xv button.on,.xv button:hover{color:var(--ink);border-bottom-color:currentColor}
.xpv .hint{color:var(--mute);margin-top:14px}
.xin{padding:12px 0 16px;border-bottom:1px solid var(--line)}
@media(max-width:900px){.xg{grid-template-columns:1fr}.xpv{display:none}}
@media(max-width:760px){.xr{grid-template-columns:56px minmax(0,1fr);gap:4px 12px;font-size:15px}.xr img{width:56px;height:32px;grid-row:1/3}.xr span{text-align:left;font-size:10px;white-space:normal}.xf{gap:4px 18px}}
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}
.about p{font:400 17px/1.6 var(--sans);color:var(--ink);margin-top:16px;max-width:32em}
.about p.dim{color:var(--mute);margin-top:26px}
.about .h2{font:400 26px var(--sans)}
.tr b{display:none}
.tr{grid-template-columns:100px 1fr}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.stats b{display:block;font:400 44px/1 var(--sans);letter-spacing:-.02em}
.stats span{display:block;margin-top:8px;color:var(--mute)}
.skills{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.sk-h{color:var(--mute);margin-bottom:8px}
.sg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
.sg>div{border-top:1px solid var(--line);padding:14px 0 26px}
.sg em{font-style:normal;color:var(--acc)}
.sg h3{font:400 20px/1.25 var(--sans);margin:8px 0 8px}
.sg p{font-size:14px;line-height:1.55;color:var(--mute);margin:0;max-width:none}
@media(max-width:900px){.sg{grid-template-columns:1fr}}
.brands{margin-top:26px;border-top:1px solid var(--line);padding-top:12px}
.bl{font-size:17px;line-height:1.9}
.bl i{display:inline-block;width:5px;height:5px;background:var(--acc);margin:0 12px 2px;vertical-align:middle}
.tl{margin-top:34px;border-top:1px solid var(--line);padding-top:12px}
.ax{display:flex;justify-content:space-between;color:var(--mute);margin:0 0 6px 110px}
.tr{display:grid;grid-template-columns:100px 1fr;gap:10px;align-items:center;padding:7px 0}
.tr em{font-style:normal;color:var(--ink)}
.tr b{font-weight:400;color:var(--mute);min-width:150px;text-align:right}
.bw{position:relative;height:10px;background:rgba(20,20,20,.07)}
.bw u{position:absolute;top:0;bottom:0;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tr:last-child .bw u{background:var(--acc)}
#about.drawn .bw u{transform:scaleX(1)}
#about.drawn .tr:nth-child(3) .bw u{transition-delay:.1s}
#about.drawn .tr:nth-child(4) .bw u{transition-delay:.2s}
#about.drawn .tr:nth-child(5) .bw u{transition-delay:.3s}
#about.drawn .tr:nth-child(6) .bw u{transition-delay:.4s}
@media(max-width:900px){.about{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}

.ab2{padding:0 0 120px}
.ab-k{color:var(--mute);margin-bottom:22px}
.big{font:400 clamp(26px,3.6vw,54px)/1.14 var(--sans);letter-spacing:-.015em;max-width:22em;margin:60px 0 0}
.big .wd{opacity:.14;transition:opacity .4s}
.big .wd.on{opacity:1}
.mid{font:400 clamp(17px,1.5vw,22px)/1.5 var(--sans);max-width:36em;margin:56px 0 0 auto;margin-right:10%}
.dip{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;margin:90px 0 0 auto;width:54%;height:min(44vh,440px)}
.dip figure{margin:0;overflow:hidden;background:#d9d5cd}
.dip img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.dip.in img{transform:scale(1)}
.dip.rv{transform:none}
@media(max-width:900px){.dip{grid-template-columns:1fr;height:auto;width:100%}}
.mid3{margin:56px 0 0;margin-right:0}
.car{margin-top:140px}
.cr{position:relative;display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:baseline;padding:22px 0 26px;border-top:1px solid var(--line);cursor:default}
.cr b{font:400 clamp(34px,6.4vw,104px)/1;letter-spacing:-.03em;transition:color .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.cr:hover b{color:var(--acc);transform:translateX(14px)}
.cr span{color:var(--mute)}
.cr u{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:none}
.cr u::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) .2s}
.cr.in u::after{transform:scaleX(1)}
.cr.cur u::after{background:var(--acc)}
.mq.mobA,.mq.mobB{display:none}
.mqk{margin-top:140px;margin-bottom:10px}
.edu{margin-top:140px}
.mq{overflow:hidden;margin:0 -32px 0;white-space:nowrap}
.mq.r2{margin-top:10px}
.mt{display:inline-block;animation:mq 40s linear infinite;font:400 clamp(44px,8vw,128px)/1.1 var(--sans);letter-spacing:-.03em}
.mq.r2 .mt{animation-direction:reverse;color:transparent;-webkit-text-stroke:1.2px var(--ink)}
@keyframes mq{to{transform:translateX(-50%)}}
/* Worked with ticker: single-colour marks, sized so wide wordmarks don't overpower short ones. */
.mt .lg{display:inline-block;width:auto;vertical-align:middle;margin:0 .45em;filter:brightness(0);opacity:.92}
.mq.mobB .mt .lg{opacity:.35}
.mt span{display:inline-block}
.skl{margin-top:140px}
.sk{border-top:1px solid var(--line);cursor:pointer}
.sk:last-child{border-bottom:0}
.sh{display:grid;grid-template-columns:70px 1fr 28px;align-items:baseline;padding:22px 0}
.sh h3{font:400 clamp(26px,3.8vw,60px)/1.1;letter-spacing:-.02em;transition:color .2s,transform .3s}
.sk:hover h3{color:var(--acc);transform:translateX(10px)}
.sh i{position:relative;width:18px;height:18px;justify-self:end}
.sh i::before,.sh i::after{content:"";position:absolute;background:var(--ink);transition:transform .3s}
.sh i::before{left:0;right:0;top:8px;height:2px}
.sh i::after{top:0;bottom:0;left:8px;width:2px}
.sk.open .sh i::after{transform:scaleY(0)}
.sk p{max-height:0;overflow:hidden;margin:0 0 0 70px;max-width:34em;font-size:17px;line-height:1.55;color:var(--mute);transition:max-height .4s ease,padding .4s}
.sk.open p{max-height:140px;padding-bottom:26px}
.end{margin-top:140px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.dim2{font:400 17px/1.7 var(--sans);color:var(--mute);margin:0}
.say{font:400 clamp(40px,7vw,110px)/1;letter-spacing:-.03em;cursor:pointer;border-bottom:3px solid var(--ink);transition:color .25s,border-color .25s}
.say:hover{color:var(--acc);border-color:var(--acc)}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.cr.rv{transform:none}
@media(max-width:900px){.cr{grid-template-columns:1fr}.mid{margin-right:0}}

.wchips{flex-wrap:wrap}
.wr{position:relative;display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:baseline;padding:20px 0 24px;border-top:1px solid var(--line);cursor:pointer;transition:opacity .35s}
.wr:last-child{border-bottom:1px solid var(--line)}
.wr i{font-style:normal;color:var(--mute)}
.wr b{font:400 clamp(30px,5.6vw,92px)/1.02;letter-spacing:-.03em;transition:color .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.wr:hover b{color:var(--acc);transform:translateX(14px)}
.wr span{color:var(--mute);text-align:right}
.wr .th{display:none}
/* Desktop: Work rows match the Projects list (26px regular titles, hairline under each row, row shifts and turns accent on hover). */
@media(min-width:761px){
.wr{align-items:center;padding:16px 0;border-top:0;border-bottom:1px solid var(--line);transition:padding .2s,opacity .35s}
.wr b{font:400 26px/1 var(--sans);letter-spacing:normal;transition:color .2s}
.wr:hover{padding-left:12px}
.wr:hover b{transform:none}
}
.wmore{margin-top:34px;color:var(--mute)}
.wmore a{cursor:pointer;border-bottom:1px solid currentColor}
#wprev{position:fixed;left:0;top:0;width:340px;height:230px;pointer-events:none;z-index:8;opacity:0;transition:opacity .25s;overflow:hidden;background:#d9d5cd}
#wprev img{width:100%;height:100%;object-fit:cover;display:block}
#wprev.on{opacity:1}
.pv-top{display:flex;justify-content:space-between;color:var(--mute);margin-bottom:18px}
.pvl{display:flex;gap:22px}
.pv-top a{cursor:pointer;color:var(--ink)}
.pv-top a:hover{color:var(--acc)}
.pv-hero{height:min(58vh,560px);overflow:hidden;background:#d9d5cd}
.pv-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pv-head{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.pv-head h2{font:400 clamp(40px,8vw,128px)/.98;letter-spacing:-.035em}
.pv-head p{font:400 clamp(18px,2vw,28px)/1.3;max-width:28em;color:#2b2a28}
.pv-cols{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;margin-top:64px;align-items:start}
.slate div{padding:12px 0;border-top:1px solid var(--line)}
.slate dt{font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.slate dd{margin:0;font-size:16px;line-height:1.4}
.slate a{border-bottom:1px solid currentColor}
.pv-body p{font:400 clamp(17px,1.5vw,21px)/1.55;margin:0 0 20px;max-width:34em}
.pv-gal video{width:100%;display:block}
.pv-gal.uni .gi img,.pv-gal.uni .gi video{aspect-ratio:var(--ar,16/9);object-fit:cover;height:100%}
.pv-gal.cols3{grid-template-columns:repeat(3,1fr)}
.cap{position:absolute;left:14px;bottom:12px;right:14px;color:#fff;font:700 clamp(18px,2.4vw,34px)/1.05 var(--sans);letter-spacing:-.01em;text-shadow:0 1px 14px rgba(0,0,0,.5);pointer-events:none}
.cap small{display:block;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;opacity:.9}
.pv-gal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:72px}
.gi.wide,.strip{grid-column:1/-1}
/* Gallery images carry width/height attributes for layout; keep their real shape. Strip and uniform rules below and above override this. */
.pv-gal img{height:auto}
.cellstrip{display:flex;gap:12px;aspect-ratio:16/9;align-items:stretch}
.cellstrip>div{min-width:0;height:100%}
.cellstrip a,.cellstrip figure{height:100%}
.cellstrip img{height:100%;object-fit:cover}
.cellstrip a.play::after{width:44px;height:44px;margin:-22px 0 0 -22px}
.cellstrip a.play::before{margin:-7px 0 0 -4px;border-left-width:12px;border-top-width:7px;border-bottom-width:7px}
.strip{display:flex;gap:12px;align-items:flex-start;width:100%}
.strip>div{min-width:0}
.strip a.play::after{width:44px;height:44px;margin:-22px 0 0 -22px}
.strip a.play::before{margin:-7px 0 0 -4px;border-left-width:12px;border-top-width:7px;border-bottom-width:7px}
.igtag[data-out]{cursor:pointer}
.igtag{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.92);padding:3px 8px;color:var(--ink);z-index:2}
.pv-gal a,.pv-gal figure{position:relative;display:block;margin:0;break-inside:avoid;background:#d9d5cd;overflow:hidden}
.pv-gal img{width:100%;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pv-gal a:hover img{transform:scale(1.03)}
.pv-gal a.play::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.pv-gal a.play::before{content:"";position:absolute;left:50%;top:50%;margin:-9px 0 0 -5px;border-left:15px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;z-index:1}
.pv-cred{margin-top:32px;border-top:1px solid var(--line);padding-top:16px}
.pv-cred>a{cursor:pointer}
.pv-cred>a:hover{color:var(--acc)}
#credbox{display:none;margin-top:16px;columns:2;column-gap:32px}
#credbox.on{display:block}
#credbox div{break-inside:avoid;margin-bottom:12px;font-size:14px;line-height:1.4}
#credbox em{display:block;font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-style:normal}
.pv-next{display:block;margin-top:90px;padding:24px 0 8px;border-top:1px solid var(--ink);font:400 clamp(30px,6vw,96px)/1;letter-spacing:-.03em;cursor:pointer;transition:color .25s}
.pv-next:hover{color:var(--acc)}
.pv-next small{display:block;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
/* Desktop keeps the prototype's look: these display rules have no font family, so browsers skip them there. On mobile they apply, at regular weight. */
@media(max-width:760px){
.cr b{font:400 clamp(34px,6.4vw,104px)/1 var(--sans)}
.sh h3{font:400 clamp(26px,3.8vw,60px)/1.1 var(--sans)}
.say{font:400 clamp(40px,7vw,110px)/1 var(--sans)}
.wr b{font:400 clamp(30px,5.6vw,92px)/1.02 var(--sans)}
.pv-head h2{font:400 clamp(40px,8vw,128px)/.98 var(--sans)}
.pv-head p{font:400 clamp(18px,2vw,28px)/1.3 var(--sans)}
.pv-body p{font:400 clamp(17px,1.5vw,21px)/1.55 var(--sans)}
.pv-next{font:400 clamp(30px,6vw,96px)/1 var(--sans)}
.close h2{font:400 clamp(40px,7vw,110px)/1 var(--sans)}
.close p{font:400 clamp(20px,2vw,26px)/1.4 var(--sans)}
}
@media(max-width:760px){
.wr{grid-template-columns:64px 1fr;gap:4px 14px;align-items:center;padding:14px 0}
.wr i{display:none}
.wr .th{display:block;grid-row:1/3;width:64px;height:64px;object-fit:cover}
.wr b{font-size:26px;line-height:1.05}
.wr span{text-align:left;font-size:10px}
.wr:hover b{transform:none}
#wprev{display:none}
.wchips{flex-wrap:nowrap;overflow-x:auto}
.wchips span{white-space:nowrap}
.pv-cols{grid-template-columns:1fr;gap:28px;margin-top:36px}
.pv-gal,.pv-gal.cols3{grid-template-columns:1fr}
#credbox{columns:1}
.pv-hero{height:42vh}
}
.pv-gal a.ig{background:#fff;padding:0 0 10px}
.pv-gal a.ig .igo{display:block;text-align:center;margin-top:8px;color:var(--mute)}
.pv-gal a.ig .igo span{cursor:pointer;border-bottom:1px solid currentColor}
.close{margin-top:140px;border-top:1px solid var(--line);padding-top:24px}
.close h2{font:400 clamp(40px,7vw,110px)/1;letter-spacing:-.03em;margin:0 0 24px}
.close p{font:400 clamp(20px,2vw,26px)/1.4;max-width:30em;margin:0 0 28px}
.close.rv{transform:none}
.clinks{display:flex;flex-wrap:wrap;gap:10px 32px}
.clinks a{font:400 clamp(18px,1.6vw,22px)/1.2 var(--sans);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .2s}
.clinks a:hover{color:var(--acc)}
#home{padding:0}
#home .home{display:block;height:100%;position:relative;overflow:hidden}
#home .ph{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;background:#2a2927}
#home .txt{position:absolute;z-index:2;color:#fff}
#home .txt p{color:inherit}
#home .txt .links a{border-color:currentColor}
.l-a .txt{left:32px;bottom:64px;max-width:560px}
.l-a .txt h1{font-size:30px}
.l-a .txt p{font-size:14px}
.l-a .ph::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}
.l-b .txt{left:32px;right:32px;bottom:60px;max-width:none}
.l-b .txt h1{font-size:clamp(34px,6.2vw,92px);line-height:1.02;max-width:12em;margin-bottom:0}
.l-b .txt p{display:none}
.l-c .ph{left:38%;width:62%}
.l-c .txt{left:32px;top:50%;transform:translateY(-50%);width:31%;color:var(--ink)}
.l-c .txt h1{font-size:28px}
.l-c .txt p{font-size:14px}
body.on-home.nav-p .top .name,body.on-home.nav-p .top nav,body.on-home.nav-p .bar>span{padding:6px 14px;background:var(--bg);color:var(--ink);outline:1px solid var(--ink);outline-offset:-1px}
body.on-home.nav-p .top nav{gap:22px}
body.on-home .top,body.on-home .bar{color:rgba(255,255,255,.9)}
.bar .fl a{text-decoration:none;margin-right:22px}
.bar .fl a:hover{color:var(--acc)}
.bar>span:last-child b{margin-right:6px}
.lay{display:none}
body.on-home .lay{display:block}
.lay a{cursor:pointer;margin-left:10px;padding:0 4px}
.lay a.on{color:var(--acc)}
body.on-home.nav-p .lay a.on{color:var(--acc)}
#home .ph img{object-position:30% 20%}
#home .ph img{inset:auto;top:-30px;left:0;height:calc(100% + 30px)}
.l-b .txt .links{margin-top:22px}
@media(max-width:760px){.home{grid-template-columns:1fr;overflow:auto}.ph{justify-self:start;width:100%}.grid{grid-template-columns:1fr 1fr}.top nav{gap:12px}body{overflow:auto}}
@media(max-width:760px){
#home .ph img{object-position:74% 50%;touch-action:none}
.list a{flex-direction:row;align-items:baseline;gap:18px;font-size:21px;line-height:1.15;padding:16px 0}
.list a span{flex-shrink:0;font-size:10px}
.dip{grid-template-columns:1fr;width:100%;height:auto;margin-top:56px}
.dip figure:first-child{display:none}
.dip figure{aspect-ratio:4/3}
.big{margin-top:32px}
.car{margin-top:72px}
.cr{grid-template-columns:1fr auto;grid-template-areas:"n y" "r r";gap:2px 12px;padding:12px 0 16px;align-items:baseline}
.cr>span:first-child{grid-area:y;font-size:10px}
.cr>b{grid-area:n;font-size:30px;letter-spacing:-.02em}
.cr>span:last-child{grid-area:r;font-size:10px}
.cr:hover b{transform:none}
.mq.all{display:none}
.mq.mobA,.mq.mobB{display:block;margin-top:0;margin-bottom:-.12em}
.mq.mobA{margin-top:56px}
.mq.mobA .mt,.mq.mobB .mt{font-size:26vw;line-height:1;animation-duration:34s}
.mq.mobB .mt{animation-direction:reverse;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.mqk{margin-top:96px}
.mid{margin-top:36px}.mid3{margin-top:36px}
}

/* Links that used to be spans or click-only divs, now real links and buttons. */
.top .name,.wr,.pv-top a,.pv-next{text-decoration:none}
#credbtn{background:none;border:0;padding:0;color:inherit;cursor:pointer}
#credbtn:hover{color:var(--acc)}
.top nav a:focus-visible::before,.top nav a:focus-visible::after{opacity:1}

/* Keyboard focus: one accent outline everywhere. */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.gate input:focus-visible{outline:0}

/* Reduced motion: no marquee (logos wrap, shown once), no word reveal, no scroll fades or drawn bars. The cut is skipped in main.js. */
@media (prefers-reduced-motion: reduce){
.mq{white-space:normal}
.mt{animation:none!important;display:block}
.mt>span+span{display:none}
.big .wd{opacity:1}
.rv{opacity:1;transform:none;transition:none}
.cr u::after,.bw u,.dip img{transition:none}
.dip img{transform:none}
}

/* Phones: two-row header (name, then nav spread across), solid bars so content never runs under them,
   labels stacked under titles, and the cut label under the big word. Home keeps its clear bars over the photo. */
@media(max-width:760px){
.top{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px 10px;background:var(--bg);border-bottom:1px solid var(--line)}
.top nav{justify-content:space-between;gap:0}
.bar{padding:12px 16px;background:var(--bg);border-top:1px solid var(--line)}
body.on-home .top,body.on-home .bar{background:none;border-color:transparent}
.screen{padding:104px 16px 64px}
#home{padding:0}
.h{flex-direction:column;align-items:flex-start;gap:6px}
#cut{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:12px;padding:24px 16px 32px}
#cut .big{font-size:56px}
.l-b .txt{left:16px;right:16px}
.mq{margin-left:-16px;margin-right:-16px}
html,body,.screen{overflow-x:hidden}
.screen{touch-action:pan-y;overscroll-behavior-x:none}
.list a span{padding-right:1px}
}