:root{
--ink:#15171B; --ink2:#3A3E45; --paper:#E4E2DC; --paper2:#D6D3CB;
--tape:#FF5A1F; --line:#B9B5AB; --white:#F5F4F1; --dim:#9B9890;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
font-family:Archivo,system-ui,sans-serif;font-size:16px;line-height:1.55;
-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}

/* ---------- slate bar ---------- */
.slate{position:sticky;top:0;z-index:60;background:var(--ink);color:var(--white);
display:flex;align-items:center;gap:1.1rem;padding:.55rem clamp(1rem,4vw,3rem);
font-family:"Space Mono",ui-monospace,monospace;font-size:11.5px;
letter-spacing:.09em;text-transform:uppercase}
.slate .brand{font-weight:700;text-decoration:none;white-space:nowrap}
.slate .sep{flex:1;border-bottom:1px dashed #4A4E56;height:1px;margin-top:2px;min-width:.5rem}
@media(max-width:480px){.slate{gap:.85rem;font-size:10.5px;padding-left:.9rem;padding-right:.9rem}
.slate .sep{min-width:0}}
.slate a{color:var(--white);text-decoration:none;border-bottom:1px solid transparent;
padding-bottom:1px;white-space:nowrap;line-height:1.45}
.slate a:hover,.slate a:focus-visible{border-color:var(--tape);outline:none}
.navtoggle{font:inherit;letter-spacing:.09em;text-transform:uppercase;
background:none;border:0;color:var(--white);cursor:pointer;padding:0 0 1px;
border-bottom:1px solid transparent;white-space:nowrap;line-height:1.45;
align-self:center;-webkit-appearance:none;appearance:none}
.navtoggle:hover,.navtoggle:focus-visible{border-color:var(--tape);outline:none}
.navtoggle::after{content:"+";color:var(--tape);margin-left:.4em;
display:inline-block;width:.6em;text-align:center}
.navtoggle[aria-expanded="true"]::after{content:"\2212"}

/* ---------- drop panel ---------- */
.menu{position:sticky;top:36px;z-index:55;background:#1D2026;color:var(--white);
border-top:1px solid #333842;padding:clamp(1.2rem,3vw,2rem) clamp(1rem,4vw,3rem)}
.menu[hidden]{display:none}
.menu .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);
max-width:1100px}
@media(max-width:640px){.menu .cols{grid-template-columns:1fr;gap:1.6rem}}
.menu h3{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--tape);margin:0 0 .8rem;font-weight:400}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.42rem}
.menu ul a{font-family:"Archivo Black",sans-serif;font-size:clamp(1.05rem,2.1vw,1.4rem);
letter-spacing:-.015em;text-decoration:none;color:var(--white);
border-bottom:2px solid transparent;align-self:flex-start;line-height:1.25}
.menu ul a:hover,.menu ul a:focus-visible{border-color:var(--tape);outline:none}

/* ---------- hero ---------- */
.wrap{max-width:1500px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
header.hero{padding-top:clamp(2.5rem,7vw,5.5rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.eyebrow{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink2);margin:0 0 1.4rem}
h1{font-family:"Archivo Black",sans-serif;font-weight:400;
font-size:clamp(2.3rem,6.6vw,5.6rem);line-height:.95;letter-spacing:-.025em;
margin:0;max-width:19ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--tape)}
.sub{margin:1.6rem 0 0;max-width:54ch;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--ink2)}

/* ---------- credit block: set like the base of a one-sheet ---------- */
.credits{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
margin-top:clamp(2rem,4vw,3.2rem);padding:1rem 0 .9rem;
display:flex;flex-direction:column;gap:.55rem;
font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.08em;
text-transform:uppercase;line-height:1.55}
.crow{display:grid;grid-template-columns:6.5rem 1fr;gap:.2rem .9rem;align-items:baseline}
@media(max-width:560px){.crow{grid-template-columns:1fr;gap:.1rem}}
.clabel{color:var(--tape);font-size:9.5px;letter-spacing:.15em}
.centries{display:flex;flex-wrap:wrap;gap:.15rem 1.25rem;color:var(--ink)}
.cgrp b{font-weight:700;color:var(--ink2);margin-right:.4rem}
.cgrp i{font-style:normal;color:var(--line);margin:0 .1rem}
.creditlink{margin:.35rem 0 0;font-family:"Space Mono",monospace;font-size:10px;
letter-spacing:.14em;text-transform:uppercase;align-self:flex-start}
.creditlink a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.creditlink a:hover,.creditlink a:focus-visible{border-color:var(--tape);outline:none}
.creditlink a::after{content:" \2192"}

/* ---------- credits ticker ---------- */
.ticker{display:block;text-decoration:none;color:var(--ink);
border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
margin-top:clamp(2rem,4vw,3.2rem);overflow:hidden;position:relative;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker:focus-visible{outline:2px solid var(--tape);outline-offset:3px}
.ticker-track{display:flex;width:max-content;animation:marquee 95s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-visible .ticker-track{animation-play-state:paused}
.ticker-set{display:flex;align-items:center;padding:.8rem 0;
font-family:"Space Mono",ui-monospace,monospace;font-size:11.5px;
letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.ticker-set>span{padding-right:1.5rem;display:flex;align-items:center}
.ticker-set>span::after{content:"\25CF";color:var(--tape);font-size:7px;
margin-left:1.5rem;position:relative;top:-1px}
.ticker:hover .ticker-set>span::after{color:var(--ink2)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
.ticker{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.ticker-track{animation:none;width:auto}
.ticker-set[aria-hidden]{display:none}
}

/* ---------- wall: justified contact-sheet grid ---------- */
.wall{padding-top:clamp(1.6rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:14px}
.tile{margin:0;position:relative;background:var(--ink);overflow:hidden;line-height:0;
flex-grow:var(--ar);flex-basis:calc(var(--ar) * var(--base));min-width:0}
.tile img{width:100%;height:auto;display:block;
transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile:hover img,.tile:focus-within img{transform:scale(1.035)}
/* basis ladder - keeps the twelve tiles packing as a flush 4 x 3 block
   at every width, so the wall ends on a straight edge */
.wall{--base:360px}
@media(max-width:1799px){.wall{--base:300px}}
@media(max-width:1459px){.wall{--base:250px}}
@media(max-width:1219px){.wall{--base:200px}}
@media(max-width:979px){.wall{--base:156px}}
@media(max-width:799px){.wall{--base:126px}}
@media(max-width:640px){.wall{gap:12px}
.tile{flex-basis:100%;flex-grow:0}}
figcaption{position:absolute;inset:auto 0 0 0;line-height:1.35;
padding:2.6rem .95rem .95rem;color:var(--white);
background:linear-gradient(to top,rgba(10,11,13,.93) 25%,rgba(10,11,13,0));
opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
display:flex;flex-direction:column;gap:.28rem}
.tile:hover figcaption,.tile:focus-within figcaption{opacity:1;transform:none}
.tg{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--tape)}
.tt{font-family:"Archivo Black",sans-serif;font-size:1.12rem;letter-spacing:-.01em}
.tb{font-size:.855rem;color:#C9C6BE;max-width:34ch}

/* before / after pair */
.pair .ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ink);width:100%}
.pair .ba-half{position:relative;overflow:hidden;aspect-ratio:1/1}
.pair .ba-half img{width:100%;height:100%;object-fit:cover;display:block}
.ba-l{position:absolute;top:.55rem;left:.55rem;z-index:2;
font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--white);background:rgba(10,11,13,.72);
padding:.24rem .5rem}
.pair:hover .ba-half:last-child .ba-l{background:var(--tape)}

@media(hover:none){
figcaption{opacity:1;transform:none;position:static;
background:var(--ink);padding:.85rem .95rem 1rem}
.tile:hover img{transform:none}
}

/* ---------- two doors ---------- */
.doors{margin-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem);
display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.doors{grid-template-columns:1fr}}
.door{display:block;text-decoration:none;color:inherit;background:var(--paper2);
border:1.5px solid var(--ink);padding:clamp(1.4rem,3vw,2.4rem);
transition:background .25s,color .25s,transform .25s}
.door:hover,.door:focus-visible{background:var(--ink);color:var(--white);outline:none;
transform:translateY(-3px)}
.door:hover .dk,.door:focus-visible .dk{color:var(--tape)}
.dk{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.15em;
text-transform:uppercase;color:var(--ink2);display:block;margin-bottom:.7rem}
.dh{font-family:"Archivo Black",sans-serif;font-size:clamp(1.5rem,3.4vw,2.3rem);
line-height:1.02;letter-spacing:-.02em;margin:0 0 .7rem}
.dp{margin:0;font-size:.95rem;max-width:40ch;opacity:.85}
.dl{margin:1.3rem 0 0;font-family:"Space Mono",monospace;font-size:11px;
letter-spacing:.13em;text-transform:uppercase}
.dl::after{content:" \2192"}

/* ---------- interior pages ---------- */
.page{padding-top:clamp(3rem,8vw,6rem);padding-bottom:clamp(4rem,9vw,7rem);
min-height:52vh}
.kicker{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--tape);margin:0 0 1rem}
h2.ph em{font-style:normal;color:var(--tape)}
h2.ph{font-family:"Archivo Black",sans-serif;font-weight:400;
font-size:clamp(2.1rem,6vw,4.4rem);line-height:.98;letter-spacing:-.025em;
margin:0 0 1.5rem;max-width:16ch}
.lede{font-size:clamp(1rem,1.7vw,1.22rem);max-width:50ch;margin:0 0 2rem;color:var(--ink2)}
.status{border-left:3px solid var(--tape);padding:.2rem 0 .2rem 1.1rem;
margin:0 0 2.4rem;max-width:50ch}
.status p{margin:.3rem 0}
.status .st{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink2)}
.backlink{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line);
padding-bottom:2px}
.backlink:hover{border-color:var(--tape)}
.backlink::before{content:"\2190  "}
dl.info{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.4rem;
max-width:44ch;font-size:.95rem}
dl.info dt{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink2);padding-top:.25rem}
dl.info dd{margin:0}
dl.info a{text-decoration:none;border-bottom:1px solid var(--line)}
dl.info a:hover{border-color:var(--tape)}

.credlist{margin:0 0 2.6rem;display:grid;grid-template-columns:1fr 1fr;
gap:1.4rem 3rem;max-width:1000px}
@media(max-width:760px){.credlist{grid-template-columns:1fr;gap:1.15rem}}
.cg h3{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--tape);margin:0 0 .3rem;font-weight:400}
.cg p{margin:0;font-size:.97rem;line-height:1.5;max-width:44ch}

.credits--page{border:0;margin:0 0 2.4rem;padding:0}

/* ---------- section pages ---------- */
.grp{margin:0 0 clamp(2.6rem,6vw,4.5rem)}
.grp h3{font-family:"Archivo Black",sans-serif;font-weight:400;
font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.08;letter-spacing:-.02em;
margin:0 0 .7rem;max-width:24ch}
.gnote{margin:0 0 1.5rem;max-width:56ch;color:var(--ink2);font-size:1rem;line-height:1.55}
.gnote em{font-style:italic}
.sgrid{display:flex;flex-wrap:wrap;gap:14px}
.sfig{margin:0;position:relative;background:var(--ink);overflow:hidden;line-height:0;
flex-grow:var(--ar);flex-basis:calc(var(--ar) * 250px);max-width:calc(var(--ar) * 420px)}
.sfig img{width:100%;height:auto;display:block;
transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.sfig:hover img,.sfig:focus-within img{transform:scale(1.03)}
.sfig figcaption{position:absolute;inset:auto 0 0 0;line-height:1.4;
padding:2.4rem .9rem .9rem;color:var(--white);
background:linear-gradient(to top,rgba(10,11,13,.94) 28%,rgba(10,11,13,0));
opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
display:flex;flex-direction:column;gap:.25rem}
.sfig:hover figcaption,.sfig:focus-within figcaption{opacity:1;transform:none}
.sfl{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--tape)}
.sfc{font-size:.83rem;color:#C9C6BE;max-width:38ch}
@media(max-width:900px){.sfig{flex-basis:calc(var(--ar) * 190px);
max-width:calc(var(--ar) * 320px)}}
@media(max-width:640px){.sfig{flex-basis:100%;flex-grow:0;max-width:none}
.sfig figcaption{opacity:1;transform:none;position:static;
background:var(--ink);padding:.8rem .9rem .95rem}
.sfig:hover img{transform:none}}

footer{background:var(--ink);color:var(--dim);padding:2.4rem clamp(1rem,4vw,3rem);
font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.09em;
text-transform:uppercase;display:flex;flex-wrap:wrap;gap:1.5rem;
justify-content:space-between}
footer a{color:var(--white);text-decoration:none;border-bottom:1px solid #3A3E45}
footer a:hover{border-color:var(--tape)}

@media(prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
.tile img{transform:none!important}
html{scroll-behavior:auto}
}

/* motion */
.vgrid{align-items:flex-start}
.vfig{background:var(--ink)}
.vfig video{width:100%;height:auto;display:block;background:#000}
.vfig figcaption{position:static;opacity:1;transform:none;background:var(--ink);
padding:.85rem .9rem 1rem}
.vfig:hover figcaption,.vfig:focus-within figcaption{opacity:1;transform:none}
.vfl{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.vdur{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;color:var(--dim)}

/* about */
.abpair{display:grid;grid-template-columns:.85fr 1.55fr;gap:14px;align-items:start;
margin:2.6rem 0 0}
.abpair .sfig{max-width:none;flex-basis:auto}
@media(max-width:640px){.abpair{grid-template-columns:1fr}}

/* press */
.press{margin:2.8rem 0 0;border-top:1px solid var(--line);padding-top:1.4rem;max-width:62ch}
.press h3{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink2);margin:0 0 1rem;font-weight:400}
.pitem{margin:0 0 1.2rem}
.pitem .ph3{font-family:"Archivo Black",sans-serif;font-weight:400;font-size:1.05rem;
margin:0 0 .2rem;line-height:1.25}
.pitem .pmeta{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink2);margin:0 0 .45rem}
.pitem p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink2)}