*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#F2F1EC; --ink:#17170F; --mute:#82817A; --line:#DBDAD2; --hi:#B4462A;
  --pad:clamp(1.1rem,3.4vw,3rem); --max:1580px;
  --mgap:clamp(.3rem,.7vw,.75rem);
  --mu:calc((min(100vw,1580px) - 2*var(--pad) - 11*var(--mgap)) / 12);
  --mu-sm:calc((min(100vw,1580px) - 2*var(--pad) - 5*var(--mgap)) / 6);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter Tight",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.tight{letter-spacing:-.032em;font-weight:500;line-height:1.02}
.display{font-size:clamp(2rem,5.6vw,4.4rem)}
.body-t{font-size:.98rem;line-height:1.72;color:#3A3A33;letter-spacing:-.006em}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--line);
  padding:.95rem var(--pad);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500}
.nav{display:flex;gap:1.7rem}
.nav a{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.burger{display:none;background:none;border:0;font-family:"IBM Plex Mono",monospace;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:0;color:inherit}
@media(max-width:760px){
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;
    align-items:center;gap:1.8rem;transform:translateY(-101%);
    transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:99}
  .nav a{font-size:1.4rem;letter-spacing:-.02em;text-transform:none;color:var(--ink);
    font-family:inherit;font-weight:500}
  body.menu-on .nav{transform:none}
}

/* ---------- intro ---------- */
.intro{padding:clamp(2.6rem,7vw,6rem) 0 clamp(2rem,4vw,3.4rem);
  display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.6rem,5vw,5rem);align-items:end}
@media(max-width:860px){.intro{grid-template-columns:1fr;gap:1.6rem;align-items:start}}
.intro h1{max-width:15ch}
.intro .side{display:grid;gap:1rem;max-width:52ch}

/* ---------- controls ---------- */
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.7rem 0;
  position:sticky;top:47px;background:var(--bg);z-index:60}
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chips button,.views button{font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;background:none;border:1px solid transparent;
  color:var(--mute);padding:.34rem .6rem;cursor:pointer;transition:.2s}
.chips button:hover,.views button:hover{color:var(--ink)}
.chips button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
.views{display:flex;gap:.2rem}
.views button[aria-pressed=true]{color:var(--bg);background:var(--ink)}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;margin-bottom:clamp(3rem,8vw,7rem)}
.tbl th{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);font-weight:500;text-align:left;
  padding:1rem .8rem;border-bottom:1px solid var(--line)}
.tbl td{padding:.92rem .8rem;border-bottom:1px solid var(--line);vertical-align:baseline;
  font-size:.9rem}
.tbl tr{transition:background .18s}
.tbl tbody tr:hover{background:#E9E8E1}
.tbl a{display:block}
.tbl .nm{font-size:clamp(1rem,1.5vw,1.22rem);letter-spacing:-.024em;font-weight:500;
  transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.tbl tbody tr:hover .nm{transform:translateX(7px)}
.tbl .num,.tbl .yr,.tbl .ar,.tbl .st{font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.03em;color:var(--mute)}
.tbl .st{text-transform:uppercase;font-size:.62rem;letter-spacing:.09em}
.tbl .st.live{color:var(--hi)}
.col-num{width:52px}.col-yr{width:104px}.col-ar{width:96px}.col-st{width:190px}
@media(max-width:1000px){.col-ar,.tbl td.ar,.tbl th.ar{display:none}}
@media(max-width:820px){.col-st,.tbl td.st,.tbl th.st{display:none}}
@media(max-width:620px){
  .col-yr,.tbl td.yr,.tbl th.yr{display:none}
  .tbl td,.tbl th{padding:.8rem .4rem}
}
tr[hidden]{display:none}

/* ---------- cursor preview ---------- */
.peek{position:fixed;top:0;left:0;width:300px;pointer-events:none;z-index:80;opacity:0;
  transition:opacity .25s;will-change:transform;mix-blend-mode:normal;
  box-shadow:0 18px 50px rgba(0,0,0,.18)}
.peek.on{opacity:1}
.peek img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#E4E3DC}
@media(max-width:900px),(pointer:coarse){.peek{display:none}}

/* ---------- grid view ---------- */
.grid{display:none;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(1.6rem,2.6vw,2.6rem) clamp(1rem,1.8vw,1.6rem);
  padding:2.4rem 0 clamp(3rem,8vw,7rem)}
body.view-grid .grid{display:grid}
body.view-grid .tbl{display:none}
.tile .shot{aspect-ratio:4/3;overflow:hidden;background:#E4E3DC}
.tile .shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile:hover .shot img{transform:scale(1.04)}
.tile h3{font-size:1rem;letter-spacing:-.024em;font-weight:500;margin:.7rem 0 .18rem}
.tile[hidden]{display:none}

/* ---------- project page ---------- */
.p-top{padding:clamp(2rem,5vw,3.6rem) 0 clamp(1.4rem,3vw,2.4rem)}
.crumb{display:flex;gap:.5rem;align-items:center;margin-bottom:1.6rem}
.p-top h1{max-width:18ch;margin-bottom:1.4rem}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:clamp(2rem,4vw,3.4rem)}
.spec div{background:var(--bg);padding:.95rem 1rem;display:grid;gap:.32rem}
.spec dt{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute)}
.spec dd{margin:0;font-size:.9rem;letter-spacing:-.01em}
.p-body{max-width:70ch;display:grid;gap:1.2rem;padding-bottom:clamp(2.6rem,6vw,5rem)}
.plates{display:grid;gap:clamp(1rem,2.2vw,2.2rem);padding-bottom:clamp(3rem,7vw,6rem)}
.plates figure{margin:0;background:#E4E3DC;position:relative}
.plates figcaption{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.08em;
  color:var(--mute);padding-top:.5rem}
.plates .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.2vw,2.2rem)}
@media(max-width:700px){.plates .duo{grid-template-columns:1fr}}
.plates img{width:100%}
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:clamp(3rem,6vw,5rem)}
.pn a{padding:1.6rem 0;display:grid;gap:.4rem;transition:opacity .2s}
.pn a:hover{opacity:.6}
.pn a+a{text-align:right;border-left:1px solid var(--line);padding-left:1.4rem}
.pn a:first-child{padding-right:1.4rem}
.pn strong{font-weight:500;letter-spacing:-.026em;font-size:clamp(.98rem,1.5vw,1.2rem)}

/* ---------- about / contact ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,5vw,5rem);
  padding-bottom:clamp(2.6rem,6vw,5rem)}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:1.6rem}}
.people{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);
  margin-bottom:clamp(3rem,7vw,6rem)}
.person{background:var(--bg);display:grid;grid-template-columns:200px 1fr;gap:clamp(1.2rem,3vw,3rem);
  padding:clamp(1.4rem,3vw,2.4rem) 0}
.person .shot{aspect-ratio:4/5;overflow:hidden;background:#E4E3DC}
.person .shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s}
.person:hover .shot img{filter:none}
.person h3{font-size:1.24rem;letter-spacing:-.028em;font-weight:500;margin-bottom:.25rem}
@media(max-width:760px){.person{grid-template-columns:1fr;gap:1rem}
  .person .shot{aspect-ratio:3/2;max-width:280px}}
.kv{display:grid;gap:1.5rem}
.kv a.big{font-size:clamp(1.15rem,2.4vw,1.9rem);letter-spacing:-.03em;font-weight:500;
  border-bottom:1px solid var(--line);padding-bottom:.2rem;display:inline-block;
  transition:border-color .3s}
.kv a.big:hover{border-color:var(--ink)}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);padding:2.2rem 0 1.8rem}
.ft-grid{display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
.ft-grid a{color:var(--mute);transition:color .2s}
.ft-grid a:hover{color:var(--ink)}

.rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.mos figure{background:#E4E3DC}

/* ---------- contact band + fixed rail ---------- */
:root{--cb-line:var(--line)}
.cband{background:var(--bg)}
.cband-h{font-size:clamp(1.7rem,3.8vw,3rem);letter-spacing:-.032em;font-weight:500;line-height:1.04}
.cband-v{font-weight:500}
.crail a{background:rgba(242,241,236,.92);color:var(--ink);border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.crail a:first-child{border-top:1px solid var(--line)}
.crail a:hover{background:var(--ink);color:var(--bg)}
.crail .lbl{background:var(--ink);color:var(--bg);font-family:"IBM Plex Mono",monospace}
@media(max-width:640px){
  .crail a{border-left:0;border-right:1px solid var(--line);border-top:1px solid var(--line)}
  .crail a:last-child{border-right:0}
}

.mos{display:flex;flex-direction:column;gap:var(--mgap);
  padding-bottom:clamp(3rem,7vw,6rem)}
.mos .mrow{display:flex;gap:var(--mgap)}
.mos figure{margin:0;overflow:hidden;position:relative;min-width:0;
  flex-grow:var(--ar);flex-shrink:1;flex-basis:0;aspect-ratio:var(--ar)}
.mos img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.mos figure:hover img{transform:scale(1.04)}
@media(max-width:640px){
  .mos .mrow{flex-wrap:wrap}
  .mos figure{flex-basis:100%;aspect-ratio:auto}
  .mos img{height:auto}
}

.cband{border-top:1px solid var(--cb-line);padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,7vw,6rem)}
.cband-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
@media(max-width:860px){.cband-in{grid-template-columns:1fr;gap:2rem}}
.cband-eye{margin-bottom:1rem}
.cband-blurb{max-width:44ch;margin-top:1.2rem}
.cband-r{display:flex;flex-direction:column}
.cband-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1rem 0;border-bottom:1px solid var(--cb-line);transition:padding-left .3s}
.cband-row:first-child{border-top:1px solid var(--cb-line)}
a.cband-row:hover{padding-left:.6rem}
.cband-v{font-size:clamp(1rem,1.7vw,1.35rem);letter-spacing:-.02em;text-align:right}

.pcontact{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  padding-top:.9rem;margin-top:.9rem;border-top:1px solid var(--cb-line)}
.pcontact a{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;
  letter-spacing:.01em;border-bottom:1px solid transparent;transition:border-color .25s}
.pcontact a:hover{border-bottom-color:currentColor}
.pcontact svg{width:14px;height:14px;flex:none}
.pfocus{margin-top:.9rem}
.pfocus .k{display:block;margin-bottom:.25rem}

.crail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:1px;transition:opacity .3s}
.crail a{position:relative;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;transition:background .25s,color .25s}
.crail svg{width:19px;height:19px;display:block}
.crail .lbl{position:absolute;right:calc(100% + 8px);white-space:nowrap;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .6rem;
  opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;
  pointer-events:none}
.crail a:hover .lbl,.crail a:focus-visible .lbl{opacity:1;transform:none}
/* the lightbox owns the left/right edges, so get out of its way */
body.lb-open .crail,body.menu-on .crail{opacity:0;pointer-events:none}
@media(max-width:640px){
  .crail{top:auto;bottom:0;right:0;left:0;transform:none;flex-direction:row;
    justify-content:center;gap:0;padding-bottom:env(safe-area-inset-bottom)}
  .crail a{flex:1;height:52px}
  .crail .lbl{display:none}
}
@media print{.crail{display:none}}

body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,10,9,.94);display:none;
  align-items:center;justify-content:center;padding:4vmin}
.lb.on{display:flex}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:.9rem}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain;display:block}
.lb figcaption{color:rgba(255,255,255,.55);font-size:.72rem;letter-spacing:.14em}
.lb button{position:absolute;background:none;border:0;color:rgba(255,255,255,.75);
  cursor:pointer;font-size:2.2rem;line-height:1;padding:.6rem .9rem;transition:color .2s}
.lb button:hover{color:#fff}
.lb-x{top:1.2rem;right:1.4rem;font-size:2.6rem}
.lb-p{left:.6rem;top:50%;transform:translateY(-50%)}
.lb-n{right:.6rem;top:50%;transform:translateY(-50%)}
@media(max-width:640px){.lb-p,.lb-n{display:none}}