:root{--ease:cubic-bezier(.76,0,.16,1);--out:cubic-bezier(.2,.7,.2,1)}
html,body{margin:0;background:#000;color:#fff;font-family:'Azeret Mono',ui-monospace,monospace;font-weight:400}
*{box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
button{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:50px;min-height:100vh;align-content:start}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gal{grid-template-columns:minmax(0,1fr)}}
.tile{position:relative;display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;aspect-ratio:8 / 5;overflow:hidden;text-align:left;opacity:1;transform:none;transition:opacity .17s ease,transform .25s var(--out)}
.tile.hid{opacity:0;transform:scale(.96)}
.tile img,.tile video.tz{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--out)}
.tile video.tz{opacity:0;transition:transform 1s var(--out),opacity .4s ease}
.tile video.tz.on{opacity:1}
.tile:hover img,.tile:focus-visible img,.tile:hover video.tz{transform:scale(1.05)}
.tile .scrim,.hero .scrim{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 28%,rgba(0,0,0,0) 62%)}
.tile .scrim{opacity:0;transition:opacity .45s ease}
.tile:hover .scrim,.tile:focus-visible .scrim{opacity:1}
.tile .info,.hero .info{position:absolute;left:0;right:0;bottom:0;display:block;padding:20px 22px;pointer-events:none}
.tile .info > span{display:block;opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .55s var(--out)}
.ttl{font-size:clamp(11.2px,1.12vw,15.4px);letter-spacing:-.01em;text-transform:uppercase;margin-bottom:4px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.meta{font-size:9px;letter-spacing:.04em;text-transform:uppercase;line-height:1.6;color:#E8E8E8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tile:hover .info > span,.tile:focus-visible .info > span{opacity:1;transform:none}
.tile:hover .info > span:nth-child(2),.tile:focus-visible .info > span:nth-child(2){transition-delay:.05s}

/* ---------- header ---------- */
#hdr{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 32px;padding:9px 24px 8px 24px;--nfs:clamp(18.2px,2.31vw,33.6px);background:transparent;color:#fff;text-shadow:0 0 14px rgba(0,0,0,.55);transition:background-color .22s ease,color .22s ease,text-shadow .45s ease .85s}
html[data-about="1"] #hdr{background:#fff;color:#000;text-shadow:none;transition:background-color .85s var(--ease),color .85s var(--ease),text-shadow .15s ease}
#hdr a:hover{color:inherit}
#nameBlock{opacity:1;visibility:visible;transition:opacity .5s ease .5s,visibility 0s linear 0s}
html:not([data-pl="none"]) #nameBlock{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
#nameBlock h1{font-weight:400;font-size:var(--nfs);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
#role{margin-top:5px;padding-left:4px;font-size:clamp(9.1px,1.01vw,14px);letter-spacing:.04em;text-transform:uppercase;opacity:1;max-height:40px;transition:opacity .5s ease .6s,max-height .5s ease .45s,margin-top .5s ease .45s}
html[data-about="1"] #role{opacity:0;max-height:0;margin-top:0;overflow:hidden;transition:opacity .3s ease,max-height .5s ease .2s,margin-top .5s ease .2s}
.hgrid{display:grid;justify-items:end;align-items:start}
.hgrid > *{grid-area:1 / 1}
#tabs{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:clamp(11px,1.12vw,15.4px);letter-spacing:.02em;text-transform:uppercase;opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .55s,transform .45s ease .55s,visibility 0s linear 0s}
#tabs button{background:none;border:0;padding:6px 0;min-height:36px;cursor:pointer;font-size:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;text-underline-offset:7px;text-decoration-thickness:1px}
#tabs button[aria-pressed="true"]{text-decoration:underline}
#tabs i{font-style:normal;opacity:.5}
html[data-about="1"] #tabs,html:not([data-pl="none"]) #tabs{opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
.hinfo{display:flex;gap:56px;font-size:calc(var(--nfs) * .36);line-height:calc(var(--nfs) * .5);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
html[data-about="1"] .hinfo{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .55s,transform .5s ease .55s,visibility 0s linear 0s}

/* ---------- panel + bar ---------- */
#panel{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#000;height:50px;transition:height .85s var(--ease)}
html[data-about="1"] #panel{height:100vh}
#aboutContent{position:absolute;top:0;left:0;right:0;bottom:50px;overflow-y:auto;overscroll-behavior:contain;padding:100px 24px 60px 24px;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .3s}
html[data-about="1"] #aboutContent{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .45s,transform .8s var(--out) .45s,visibility 0s linear 0s}
#bar{position:absolute;left:0;right:0;bottom:0;height:50px;background:#000;display:grid;grid-template-columns:241px minmax(0,1fr) auto auto;border-top:1px solid transparent;transition:border-color .4s ease}
html[data-about="1"] #bar{border-top-color:rgba(255,255,255,.22)}
#btn{position:relative;height:100%;width:100%;background:none;border:0;cursor:pointer;font-size:15px;letter-spacing:.02em;text-transform:uppercase}
#btn .lab{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .4s ease}
#btn .l-about{opacity:1;transform:none;transition:opacity .4s ease .4s,transform .5s ease .4s}
html[data-about="1"] #btn .l-about,html:not([data-pl="none"]) #btn .l-about{opacity:0;transform:translateY(-12px);transition:opacity .3s ease,transform .4s ease}
html[data-about="1"] #btn .l-close{opacity:1;transform:none;transition:opacity .4s ease .4s,transform .5s ease .4s}
html[data-pl="full"] #btn .l-pclose{opacity:1;transform:none;transition:opacity .4s ease .4s,transform .5s ease .4s}
.dv{position:relative}
.dv::before{content:'';position:absolute;left:0;top:11px;bottom:11px;width:1px;background:rgba(255,255,255,.3)}
.dvr{position:relative}
.dvr::after{content:'';position:absolute;right:0;top:11px;bottom:11px;width:1px;background:rgba(255,255,255,.3)}

/* fade groups */
.fc{opacity:1;visibility:visible;transition:opacity .45s ease .55s,visibility 0s linear 0s}
html[data-about="1"] .fc,html:not([data-pl="none"]) .fc{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.al{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
html[data-about="1"] .al{opacity:1;visibility:visible;transition:opacity .5s ease .55s,visibility 0s linear 0s}
.pb{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
html[data-pl="full"] .pb{opacity:1;visibility:visible;transition:opacity .45s ease .55s,visibility 0s linear 0s}
html[data-pl="full"][data-pt="photo"] .pvid,html[data-pl="full"][data-pt="video"] .pph,html[data-pl="full"][data-pt="still"] .pvid,html[data-pl="full"][data-pt="still"] .pph{opacity:0;visibility:hidden}

.ticker{position:relative;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;grid-column:2/3;grid-row:1}
.ticker.drag{cursor:grabbing}
.ticker-track{display:flex;flex:none;white-space:nowrap;will-change:transform}
.ticker-track span{padding-right:120px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:300}
.fcontact{grid-column:3/4;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 0 0 28px;text-align:left;font-size:11.5px;line-height:1.45;letter-spacing:.07em;text-transform:uppercase}
.fcontact a{display:block;white-space:pre-line}
.fcontact a:hover{text-decoration:underline;text-underline-offset:4px}
.abt-links{grid-column:2/5;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:36px;padding-right:24px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.abt-links a{padding:6px 0}
.abt-links a:hover{text-decoration:underline;text-underline-offset:6px}
.linkmenu{grid-column:4/5;grid-row:1;position:relative;display:flex;align-items:center;justify-content:flex-end;padding:0 24px 0 28px}
.linkmenu > a{display:flex;align-items:center;justify-content:center;width:15px;height:50px}
.linkmenu > a svg{transition:transform .35s cubic-bezier(.34,1.4,.5,1)}
.linkmenu:hover > a svg{transform:rotate(-45deg)}
.pop{position:absolute;right:24px;bottom:100%;padding-bottom:12px;display:flex;flex-direction:column;align-items:stretch;gap:6px;visibility:hidden;transition:visibility 0s linear .35s}
.linkmenu:hover .pop,.linkmenu:focus-within .pop{visibility:visible;transition:visibility 0s linear 0s}
.pop a{display:block;background:#000;border:1px solid rgba(255,255,255,.4);padding:0 16px;line-height:34px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transform-origin:100% 100%;opacity:0;transform:translate(16px,40px) scale(.2);transition:opacity .2s ease,transform .25s ease,background-color .2s,color .2s}
.linkmenu:hover .pop a,.linkmenu:focus-within .pop a{opacity:1;transform:none;transition:opacity .25s ease,transform .5s cubic-bezier(.34,1.35,.5,1),background-color .2s,color .2s}
.linkmenu:hover .pop a:nth-last-child(1){transition-delay:0s}
.linkmenu:hover .pop a:nth-last-child(2){transition-delay:.06s}
.linkmenu:hover .pop a:nth-last-child(3){transition-delay:.12s}
.linkmenu:hover .pop a:nth-last-child(n+4){transition-delay:.16s}
.pop a:hover{background:#fff;color:#000}

/* player bar */
.pinfo{grid-column:2/3;grid-row:1;display:flex;align-items:center;gap:44px;padding:0 28px;white-space:nowrap;overflow:hidden;min-width:0}
.pinfo .pt{font-size:13px;letter-spacing:-.005em;text-transform:uppercase}
.pinfo .pf{display:flex;flex-direction:column;gap:3px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.pinfo .pf i{font-style:normal;font-size:8px;letter-spacing:.12em;color:#9A9A9A}
.pclose{grid-column:3/5;grid-row:1;justify-self:end;height:100%;background:none;border:0;cursor:pointer;font-size:12px;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:14px;white-space:nowrap;position:relative;width:216px;padding:0 24px}
.pclose:hover{background:#fff;color:#000}
.pclose .tm{color:#B8B8B8}
.pclose:hover .tm{color:#555}
.pph{grid-column:3/5;grid-row:1;justify-self:end;height:100%;display:flex;align-items:stretch;position:relative;padding:0 12px 0 28px;gap:6px}
.pph .cnt{display:flex;align-items:center;margin-right:14px;font-size:12px;letter-spacing:.04em;color:#B8B8B8;white-space:nowrap}
.pnav{width:36px;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.65;transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.4,.5,1)}
.pnav:hover{opacity:1}
.pnav.p:hover{transform:translateX(-3px)}
.pnav.n:hover{transform:translateX(3px)}
.scrub{position:absolute;left:0;right:0;top:-7px;height:14px;cursor:pointer;z-index:2;touch-action:none;opacity:0;pointer-events:none;transition:opacity .4s ease}
html[data-pl="full"][data-pt="video"] .scrub{opacity:1;pointer-events:auto}
.scrub .tr{position:absolute;left:0;right:0;top:7px;height:2px;background:rgba(255,255,255,.25)}
.scrub .fl{position:absolute;left:0;top:7px;height:2px;background:#fff;width:0}
.scrub .hd{position:absolute;top:2px;width:2px;height:12px;margin-left:-1px;background:#fff;opacity:0;transition:opacity .2s ease;left:0}
.scrub:hover .hd,.scrub.on .hd{opacity:1}

/* ---------- hero (tile -> fullscreen) ---------- */
.hero{position:fixed;z-index:25;overflow:hidden;background:#000;display:none;left:0;top:0;width:0;height:0;transition:left .85s var(--ease),top .85s var(--ease),width .85s var(--ease),height .85s var(--ease)}
.hero .kb{position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .85s var(--ease)}
.hero .bg,.hero .cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--out)}
.hero .cover{pointer-events:none;opacity:0;transition:opacity .6s ease .15s}
.hero .pv{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .4s ease}
.hero .pv.on{opacity:1}
.hero .strip{position:absolute;top:0;left:0;height:100%;display:flex;transition:transform .7s var(--ease)}
.hero .strip img{position:relative;flex:0 0 auto;height:100%;object-fit:cover;transition:transform 1s var(--out)}
.hero .scrim{transition:opacity .45s ease}
.hero .info{transition:opacity .35s ease}

/* ---------- about ---------- */
.narrow{display:none;margin-bottom:36px;font-size:9.8px;line-height:1.7;letter-spacing:.03em;text-transform:uppercase}
@media (max-width:1100px){.hinfo{display:none}.fcontact{display:none}.narrow{display:block}}
.ab-group{margin:96px 0 28px 0;font-size:clamp(26px,3.7vw,54px);font-weight:200;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.ab-group:first-of-type{margin-top:36px}
.ab-row{display:flex;flex-wrap:wrap;gap:14px 56px;padding:28px 0 34px 0;border-top:1px solid rgba(255,255,255,.22)}
.ab-meta{flex:0 0 260px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#B8B8B8;line-height:1.75;white-space:pre-line}
.ab-main{flex:1 1 480px;min-width:0}
.ab-h{margin:0 0 4px 0;font-size:clamp(14px,1.35vw,19px);font-weight:400;letter-spacing:-.005em;text-transform:uppercase;line-height:1.3}
.ab-sub{margin:0 0 16px 0;font-size:10px;color:#B8B8B8;line-height:1.7}
.ab-sub.solo{margin:0}
.ab-li{display:flex;gap:18px;padding:8px 0;font-size:10.5px;line-height:1.75;max-width:82ch;font-weight:300}
.ab-li i{font-style:normal;color:#B8B8B8;flex:0 0 22px}
.ab-li em{font-style:italic;color:#fff}
.ab-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,34%);gap:24px 64px;align-items:start}
@media (max-width:1100px){.ab-split{grid-template-columns:minmax(0,1fr)}}
.wl{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#B8B8B8;margin:0 0 10px 0}
.wl:not(:first-child){margin-top:26px}
.wg{display:flex;flex-wrap:wrap;gap:6px}
.wg span{padding:7px 11px;border:1px solid rgba(255,255,255,.3);font-size:10px;font-weight:300;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;white-space:nowrap;transition:background-color .25s ease,color .25s ease;cursor:default}
.wg span:hover{background:#fff;color:#000}

/* player / about controls overlay the right side without resizing the grid columns */
#bar .abt-links,#bar .pclose,#bar .pph{position:absolute;right:0;top:0;height:50px;grid-column:auto;grid-row:auto}
#bar .pinfo{padding-right:40px}