: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}
}