:root{
  --paper:#EBEDF0; --surface:#F7F8FA; --sunk:#E1E5EA;
  --ink:#12161C; --graphite:#5C6570; --faint:#8B949E;
  --rule:#C6CCD4; --hair:#D8DDE3;
  --accent:#1B4F9C; --accent-soft:#5B8AC9;
  --shadow:0 1px 2px rgba(18,22,28,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1319; --surface:#121A22; --sunk:#0A0F14;
    --ink:#DFE6ED; --graphite:#8A98A7; --faint:#6B7885;
    --rule:#26323D; --hair:#1D272F;
    --accent:#7CADEE; --accent-soft:#4E7AB4;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#0D1319; --surface:#121A22; --sunk:#0A0F14;
  --ink:#DFE6ED; --graphite:#8A98A7; --faint:#6B7885;
  --rule:#26323D; --hair:#1D272F;
  --accent:#7CADEE; --accent-soft:#4E7AB4;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.62; font-weight:350;
  font-optical-sizing:auto;
}
img{max-width:100%; display:block}
a{color:inherit}
[hidden]{display:none!important}

.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.tech{font-family:"Archivo","Helvetica Neue",Arial,sans-serif}

/* ---------- sheet shell ---------- */
.sheet{
  max-width:1240px; margin:0 auto; background:var(--surface);
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
  min-height:100vh; position:relative;
}
.pad{padding-inline:clamp(1.15rem,4vw,3.5rem)}

/* corner registration ticks, drawing-sheet convention */
.sheet::before,.sheet::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:var(--accent); opacity:.55;
}
.sheet::before{top:10px; left:10px; border-top:1px solid; border-left:1px solid}
.sheet::after{top:10px; right:10px; border-top:1px solid; border-right:1px solid}

/* ---------- masthead ---------- */
.masthead{
  display:flex; flex-wrap:wrap; gap:1.25rem 2rem; align-items:baseline;
  justify-content:space-between;
  padding-block:2.35rem 1.15rem; border-bottom:1px solid var(--rule);
}
.wordmark{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(.94rem,2.1vw,1.06rem); font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; text-decoration:none;
  line-height:1; white-space:nowrap;
}
.wordmark span{display:block; font-size:.62em; letter-spacing:.22em; font-weight:400;
  color:var(--graphite); margin-top:.55em}
nav.primary{display:flex; flex-wrap:wrap; gap:.35rem 1.6rem; align-items:baseline}
nav.primary a{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:.72rem; letter-spacing:.17em; text-transform:uppercase;
  text-decoration:none; color:var(--graphite); padding-block:.3rem;
  border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
nav.primary a:hover{color:var(--ink); border-bottom-color:var(--accent)}
nav.primary a.on{color:var(--ink); border-bottom-color:var(--accent)}
nav.primary a.lead{
  font-size:.88rem; font-weight:600; color:var(--ink); letter-spacing:.13em;
}
nav.primary a.lead:hover{color:var(--accent)}
.themetog{
  background:none; border:1px solid transparent; padding:.3rem; margin-left:.2rem;
  color:var(--faint); cursor:pointer; line-height:0; border-radius:2px;
  transition:color .15s, border-color .15s;
}
.themetog:hover{color:var(--accent); border-color:var(--rule)}
.themetog svg{width:16px; height:16px; display:block}
.themetog .moon{display:none}
:root[data-theme="dark"] .themetog .moon{display:block}
:root[data-theme="dark"] .themetog .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .themetog .moon{display:block}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .themetog .sun{display:none}
}
nav.primary .ext{color:var(--faint)}
nav.primary .ext::after{content:" \2197"; font-size:.85em}
nav.primary .nav-lock{
  display:inline-flex; align-items:center; gap:.42rem; color:var(--accent);
}
nav.primary .nav-lock:hover{color:var(--accent); border-bottom-color:var(--accent)}
nav.primary .nav-lock svg{width:11px; height:11px; flex:none}

/* ---------- type ---------- */
h1,h2,h3{margin:0; text-wrap:balance; font-weight:400; letter-spacing:-.012em}
h1{font-size:clamp(2.1rem,5.4vw,3.4rem); line-height:1.06}
h2{font-size:clamp(1.35rem,2.6vw,1.7rem); line-height:1.2}
h3{font-size:1.05rem; line-height:1.3}
p{margin:0 0 1.1em}
em{font-style:italic}
.lede{font-size:clamp(1.15rem,2.1vw,1.4rem); line-height:1.45; color:var(--ink);
  font-weight:350; max-width:34ch}
.prose{max-width:63ch; color:var(--graphite)}
.prose p:last-child{margin-bottom:0}
.prose em{color:var(--ink)}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:1.15rem;
}
.rule{height:1px; background:var(--rule); border:0; margin:0}

/* ---------- landing transition ---------- */
.bigname .l1,.bigname .l2,.bigrole,.landing-foot{
  transition:transform .62s cubic-bezier(.72,0,.16,1), opacity .38s ease;
  will-change:transform;
}
.landing.go .bigname .l1{transform:translateY(-125%)}
.landing.go .bigname .l2{transform:translateY(125%)}
.landing.go .bigrole{opacity:0; transform:translateY(125%)}
.landing.go .landing-foot{opacity:0; transform:translateY(28px)}
.landing.go{cursor:default}
.landing-inner{cursor:pointer}
.sweep{
  position:fixed; left:0; right:0; top:50%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left center; z-index:60; pointer-events:none;
}
.sweep.go{transform:scaleX(1); transition:transform .44s cubic-bezier(.62,0,.2,1)}
.sweep.out{transform-origin:right center; transform:scaleX(0);
  transition:transform .34s cubic-bezier(.4,0,.7,1)}
@keyframes riseIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.arrive main > *{animation:riseIn .52s cubic-bezier(.2,.72,.2,1) both}
.arrive main > *:nth-child(2){animation-delay:.06s}
.arrive main > *:nth-child(3){animation-delay:.12s}
.arrive .masthead{animation:riseIn .4s ease both}

/* ---------- landing ---------- */
.landing{
  min-height:calc(100svh - 5.5rem); display:grid; grid-template-rows:1fr auto;
  align-items:center; padding-block:clamp(1.5rem,4vw,3rem) 0;
}
.landing-inner{width:100%}
.landing-foot{
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem; align-items:baseline;
  justify-content:space-between; padding-block:clamp(1.4rem,3vw,2.2rem);
  border-top:1px solid var(--rule);
}
.landing-note{
  margin:0; max-width:52ch; color:var(--graphite); font-size:1rem; line-height:1.55;
}
.enter{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-size:.74rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); text-decoration:none;
  border:1px solid var(--accent); padding:.68rem 1.25rem; white-space:nowrap;
  transition:background .15s,color .15s;
}
.enter:hover{background:var(--accent); color:#fff}

/* ---------- nameplate ---------- */
.sheet.home .masthead .wordmark{display:none}
.sheet.home .masthead{justify-content:flex-end; padding-block:2.1rem 1.1rem}
.sheet.home .landing{min-height:calc(100svh - 5.2rem)}


.bigname{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-weight:700;
  text-transform:uppercase; line-height:.83; letter-spacing:-.035em;
  display:flex; flex-direction:column; margin:0; text-wrap:nowrap;
}
.bigname .l1{font-size:clamp(4.1rem,19.4vw,15.6rem)}
.bigname .l2{font-size:clamp(3.1rem,14.6vw,11.7rem)}
.bigrole{
  margin:clamp(.9rem,2vw,1.35rem) 0 0;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-weight:500;
  font-size:clamp(.74rem,2.05vw,1.28rem); letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); line-height:1;
}

/* ---------- home ---------- */
.hero{
  padding-block:clamp(2.4rem,5.5vw,3.6rem) clamp(2.4rem,5vw,3.4rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(1.8rem,4.5vw,4rem) clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero-text{min-width:0}
.hero-text .lede + .lede{margin-top:1.1rem}
.hero h1{max-width:14ch}
.hero .lede{margin-top:0; max-width:44ch; color:var(--graphite); font-size:1.08rem;
  line-height:1.55}
.hero .lede em{color:var(--ink); font-style:italic}
.hero-fig{margin:0; min-width:0}
.hero-fig img{width:100%; border:1px solid var(--hair); box-shadow:var(--shadow);
  background:var(--sunk)}
.hero-fig figcaption{
  display:flex; gap:.9rem; align-items:baseline; margin-top:.7rem; padding-top:.55rem;
  border-top:1px solid var(--hair);
}
.hero-fig .no{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.64rem;
  letter-spacing:.1em; color:var(--accent); flex:none}
.hero-fig .cap{font-size:.83rem; color:var(--graphite)}
.hero-meta{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; gap:.5rem 2.2rem; margin-top:.6rem;
  padding-top:1.15rem; border-top:1px solid var(--hair);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}

/* ---------- title block ---------- */
.titleblock{
  border:1px solid var(--rule); background:var(--sunk);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-self:start;
}
.tb-cell{padding:.85rem 1rem; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.tb-cell:nth-child(2n){border-right:0}
.tb-cell dt{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--faint); margin-bottom:.3rem;
}
.tb-cell dd{
  margin:0; font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:.9rem; font-weight:500; letter-spacing:-.005em; line-height:1.25;
}

/* ---------- project head ---------- */
.project-head{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); padding-block:clamp(2.8rem,7vw,4.6rem) clamp(2rem,4vw,3rem);
  align-items:start;
}
.project-head .lede{margin:1.5rem 0 1.8rem; color:var(--ink)}

/* ---------- plates ---------- */
.plates{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.2rem) clamp(1.25rem,2.5vw,2rem);
  padding-block:clamp(1.5rem,4vw,2.5rem) clamp(3rem,7vw,5rem);
  border-top:1px solid var(--rule);
}
.plate{margin:0; grid-column:span 1; min-width:0}
.plate.wide{grid-column:span 2}
.plate figcaption{
  display:flex; gap:.9rem; align-items:baseline; margin-top:.8rem;
  padding-top:.6rem; border-top:1px solid var(--hair);
}
.plate .no{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.66rem;
  letter-spacing:.1em; color:var(--accent); flex:none; font-variant-numeric:tabular-nums;
  padding-top:.12em;
}
.plate .cap{font-size:.86rem; line-height:1.45; color:var(--graphite)}
.plate img{
  width:100%; height:auto; background:var(--sunk);
  border:1px solid var(--hair); box-shadow:var(--shadow);
}

/* ---------- work index ---------- */
.entries{border-top:1px solid var(--rule)}
.entry{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding-block:clamp(2.2rem,5vw,3.4rem); border-bottom:1px solid var(--hair);
  text-decoration:none; color:inherit;
}
.entry:hover .entry-title{color:var(--accent)}
.entry:hover img{filter:none; transform:translateY(-2px)}
.entry img{border:1px solid var(--hair); transition:transform .3s ease; box-shadow:var(--shadow)}
.entry-title{font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.1; transition:color .15s}
.entry-meta{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  margin-bottom:.8rem; display:flex; gap:1.2rem; flex-wrap:wrap;
}
.entry-lede{margin-top:.9rem; color:var(--graphite); font-size:.96rem; max-width:42ch}
.entry-go{
  margin-top:1.1rem; font-family:"Archivo",Arial,sans-serif; font-size:.7rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--accent);
}

/* ---------- featured strip (home) ---------- */
.featured{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(1.1rem,2.4vw,1.8rem); padding-block:0 clamp(3rem,7vw,5rem);
}
.fcard{text-decoration:none; color:inherit; display:block; min-width:0}
.fcard img{border:1px solid var(--hair); aspect-ratio:4/3; object-fit:cover;
  transition:opacity .2s; box-shadow:var(--shadow)}
.fcard:hover img{opacity:.87}
.fcard h3{margin-top:.75rem; font-size:1rem}
.fcard .m{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.63rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-top:.28rem;
}

/* ---------- poster wall ---------- */
.pd-posters{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,190px));
  gap:clamp(.9rem,2vw,1.4rem); margin-top:1.8rem;
}

.posterwall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
  gap:clamp(.75rem,1.6vw,1.15rem); margin-top:1.9rem;
}
.ptile{min-width:0}
.ptile img,.ptile .none{
  width:100%; aspect-ratio:2/3; object-fit:cover; display:block;
  border:1px solid var(--hair); background:var(--sunk); box-shadow:var(--shadow);
}
.ptile .none{
  display:grid; place-items:center; padding:.6rem; text-align:center;
  border-style:dashed; border-color:var(--rule);
}
.ptile .none span{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.54rem; font-weight:400;
  line-height:1.4; color:var(--faint); letter-spacing:.13em; text-transform:uppercase;
}
.ptile .none{background:transparent; border-color:var(--hair); box-shadow:none}
.ptile .meta{margin-top:.45rem}
.ptile .r{
  font-family:"Archivo",Arial,sans-serif; font-size:.68rem; font-weight:500;
  line-height:1.3; color:var(--ink); display:block;
}
.ptile .y{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6rem; letter-spacing:.11em;
  color:var(--faint); display:block; margin-top:.15rem; font-variant-numeric:tabular-nums;
}
.pd-list{list-style:none; margin:1.5rem 0 0; padding:0;
  columns:2; column-gap:clamp(1.5rem,4vw,3.5rem)}
.pd-list li{display:flex; gap:1rem; align-items:baseline; break-inside:avoid;
  padding-block:.45rem; border-bottom:1px solid var(--hair)}
.pd-list .y{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem;
  color:var(--faint); flex:none; width:3.6em; font-variant-numeric:tabular-nums}
.pd-list .t{font-size:.94rem; font-family:"Archivo",Arial,sans-serif; font-weight:450}
.pd-list .c{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-left:auto}
.cvlink{
  display:inline-block; margin-top:1.6rem; font-family:"Archivo",Arial,sans-serif;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  text-decoration:none; border:1px solid var(--accent); padding:.6rem 1.1rem;
  transition:background .15s,color .15s;
}
.cvlink:hover{background:var(--accent); color:#fff}

/* ---------- credits ---------- */
.credits{border-top:1px solid var(--rule); padding-block:clamp(2rem,4vw,3rem)}
.credit-list{list-style:none; margin:1.6rem 0 0; padding:0;
  column-count:2; column-gap:clamp(1.5rem,4vw,3.5rem)}
.credit-list li{
  display:flex; gap:1.1rem; align-items:baseline; break-inside:avoid;
  padding-block:.5rem; border-bottom:1px solid var(--hair);
}
.credit-list .y{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; color:var(--faint);
  flex:none; width:3.1em; font-variant-numeric:tabular-nums;
}
.credit-list .t{font-size:.95rem}

/* ---------- facts ---------- */
.facts{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair)}
.facts li{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1rem;
  padding-block:.7rem; border-bottom:1px solid var(--hair)}
.facts dt,.facts .k{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.63rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--faint); padding-top:.32em;
}
.facts .v{font-family:"Archivo",Arial,sans-serif; font-size:.9rem; font-weight:450}

/* ---------- two-col page ---------- */
.split{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); padding-block:clamp(2.8rem,7vw,4.6rem) clamp(2rem,4vw,3rem);
  align-items:start;
}

/* ---------- grid gallery (photography) ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.25rem,2.6vw,2rem);
  padding-block:clamp(1.5rem,4vw,2.5rem) clamp(3rem,7vw,5rem);
  border-top:1px solid var(--rule);
}
.gallery img{width:100%; border:1px solid var(--hair); box-shadow:var(--shadow)}
.gallery .wide{grid-column:span 2}

/* ---------- contact ---------- */
.contact{border-top:1px solid var(--rule); padding-block:clamp(2.2rem,5vw,3.4rem)}
.contact a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-soft)}
.contact a:hover{border-bottom-color:var(--accent)}
.big-mail{font-size:clamp(1.15rem,3vw,1.75rem); line-height:1.3; margin-top:.9rem;
  font-family:"Archivo",Arial,sans-serif; font-weight:450; letter-spacing:-.01em}

/* ---------- colophon ---------- */
.colophon{
  border-top:1px solid var(--rule); padding-block:1.5rem 2.4rem;
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
/* ---------- film ---------- */
.films{
  border-top:1px solid var(--rule); padding-block:clamp(1.8rem,4.5vw,2.8rem)
  clamp(2.4rem,6vw,3.6rem);
  display:grid; gap:clamp(2rem,5vw,3.2rem);
}
.films-head{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; align-items:baseline;
  justify-content:space-between; margin-bottom:.4rem;
}
.film{margin:0}
.film .frame{
  position:relative; padding-top:56.25%; background:var(--sunk);
  border:1px solid var(--hair); box-shadow:var(--shadow);
}
.film .frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
a.frame{
  display:block; text-decoration:none; color:var(--accent);
  transition:border-color .15s, background .15s;
}
a.frame:hover{border-color:var(--accent-soft); background:var(--surface)}
a.frame span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase;
}
.film figcaption{
  display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; align-items:baseline; margin-top:.75rem;
  border-top:1px solid var(--hair); padding-top:.55rem;
}
.film .t{font-family:"Archivo",Arial,sans-serif; font-weight:500; font-size:.98rem}
.film .m{font-size:.88rem; color:var(--graphite)}

/* ---------- storm: wind and rain, driven by scroll speed ---------- */
/* the sheet is shoved about at speed, so clip rather than grow a scrollbar */
html,body{overflow-x:clip}
.storm,.storm-grain,.storm-veil{
  position:fixed; inset:0; pointer-events:none; contain:strict;
}
.storm{z-index:45; filter:blur(.6px)}
.storm-grain{
  z-index:46; opacity:0; will-change:opacity,transform;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}
.storm-veil{
  z-index:44; opacity:0; will-change:opacity;
  background:radial-gradient(130% 96% at 50% 50%, transparent 44%, rgba(18,22,28,.55));
}
:root[data-theme="dark"] .storm-grain{mix-blend-mode:screen}
:root[data-theme="dark"] .storm-veil{
  background:radial-gradient(130% 96% at 50% 50%, transparent 40%, rgba(0,0,0,.7));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .storm-grain{mix-blend-mode:screen}
  :root:not([data-theme="light"]) .storm-veil{
    background:radial-gradient(130% 96% at 50% 50%, transparent 40%, rgba(0,0,0,.7));
  }
}
@media (prefers-reduced-motion: reduce){
  .storm,.storm-grain,.storm-veil{display:none}
}

/* ---------- the portal into unreleased.html ---------- */
.portal{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); border:1px solid var(--hair);
  padding:.62rem 1rem; transition:color .2s,border-color .2s,background .2s;
}
.portal:hover{color:var(--accent); border-color:var(--accent-soft); background:var(--sunk)}
.portal svg{width:12px; height:12px; flex:none}
.portal-row{
  border-top:1px solid var(--rule); padding-block:clamp(1.5rem,4vw,2.4rem)
  clamp(2.4rem,6vw,3.6rem); display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between;
}
.portal-note{margin:0; font-size:.9rem; color:var(--graphite); max-width:52ch}
.colophon .portal{border:0; padding:0; letter-spacing:.18em}
.colophon .portal:hover{background:none}

/* the transition itself */
#synapse{position:fixed; inset:0; z-index:72; pointer-events:none;
  transition:opacity .38s ease}
#synapse.out{opacity:0}
.warp{transition:filter .95s ease, transform .95s cubic-bezier(.5,0,.2,1), opacity .95s ease}
.warp.go{filter:grayscale(1) brightness(.3) blur(8px); transform:scale(.955); opacity:.2}
.blackout{
  position:fixed; inset:0; background:#05070b; z-index:71; opacity:0; pointer-events:none;
  transition:opacity .6s ease;
}
.blackout.on{opacity:1}
.seam{
  position:fixed; left:0; right:0; top:50%; height:1px; background:#5691e0; z-index:73;
  transform:scaleX(0); pointer-events:none; box-shadow:0 0 26px 3px rgba(86,145,224,.6);
}
.seam.on{transform:scaleX(1); transition:transform .46s cubic-bezier(.2,.8,.2,1)}
.seam.out{transform:scaleX(0); transition:transform .34s cubic-bezier(.6,0,.85,1)}

.colophon a{color:var(--faint); text-decoration:none}
.colophon a:hover{color:var(--accent)}

/* ---------- notice ---------- */
.notice{
  border:1px solid var(--accent-soft); border-left-width:3px; background:var(--sunk);
  padding:1rem 1.15rem; margin-top:1.8rem; font-size:.87rem; color:var(--graphite);
  max-width:63ch;
}
.notice b{font-family:"Archivo",Arial,sans-serif; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:.4rem;
  font-weight:600}

a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

@media (max-width:820px){
  .project-head,.split,.entry,.hero{grid-template-columns:minmax(0,1fr)}
  .hero-fig{order:-1}
  .plates,.gallery{grid-template-columns:minmax(0,1fr)}
  .plate.wide,.gallery .wide{grid-column:span 1}
  .credit-list,.pd-list{column-count:1; columns:1}
  .entry img{order:-1}
  .facts li{grid-template-columns:minmax(0,1fr); gap:.15rem}
  .sheet{border-left:0; border-right:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}

.ph-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.8rem,4.5vw,4rem); align-items:center;
  padding-block:clamp(2.6rem,7vw,4.6rem) clamp(1.8rem,4vw,2.8rem);
}
.ph-hero figure{margin:0}
.ph-hero img{width:100%; height:auto; border:1px solid var(--hair); box-shadow:var(--shadow)}
.ph-hero .lede{margin-top:1.4rem; max-width:40ch; color:var(--graphite); font-size:1.08rem;
  line-height:1.55}
.ph-stats{
  grid-column:1 / -1; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--hair); margin-top:.5rem;
}
.ph-stats div{padding:.9rem 1.05rem; border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}
.ph-stats dt{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--faint); margin-bottom:.35rem}
.ph-stats dd{margin:0; font-family:"Archivo",Arial,sans-serif; font-weight:500;
  font-size:.95rem; line-height:1.25; letter-spacing:-.005em}

.gallery-head{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:baseline;
  justify-content:space-between; padding-block:clamp(1.4rem,3.5vw,2.2rem) 1.1rem;
  border-top:1px solid var(--rule);
}
.frames{columns:4; column-gap:clamp(.9rem,2vw,1.5rem);
  padding-bottom:clamp(2.4rem,6vw,4rem)}
.frames figure{break-inside:avoid; margin:0 0 clamp(.9rem,2vw,1.5rem); min-width:0}
.frames img{width:100%; height:auto; display:block; border:1px solid var(--hair);
  background:var(--sunk); box-shadow:var(--shadow)}
.frames.zoomable img{cursor:zoom-in}
.frames.zoomable figure:hover img{outline:2px solid var(--accent); outline-offset:2px}

.ig{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:"Archivo",Arial,sans-serif; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--accent);
  padding:.62rem 1.1rem; transition:background .15s,color .15s;
}
.ig:hover{background:var(--accent); color:#fff}
.ig svg{width:14px; height:14px; flex:none}
.ig-row{padding-block:clamp(1.6rem,4vw,2.4rem) clamp(2.4rem,6vw,3.6rem);
  border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between}
.ig-note{font-size:.9rem; color:var(--graphite); max-width:46ch}

#lb{position:fixed; inset:0; background:rgba(8,11,15,.94); display:grid; place-items:center;
  z-index:50; padding:3vmin; cursor:zoom-out}
#lb img{max-width:min(94vw,1400px); max-height:94vh; width:auto; border:1px solid #333}
@media (max-width:1100px){ .frames{columns:3} }
@media (max-width:760px){ .frames{columns:2} }
@media (max-width:640px){
  .ph-hero{grid-template-columns:minmax(0,1fr)}
  .ph-hero figure{order:-1}
  .frames{columns:2; column-gap:.6rem}
  .frames figure{margin-bottom:.6rem}
}

.ded-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(1.8rem,4.5vw,4rem); align-items:center;
  padding-block:clamp(2.6rem,7vw,4.6rem) clamp(2rem,4vw,3rem);
}
.ded-hero .lede{margin-top:1.4rem; max-width:42ch; color:var(--graphite); font-size:1.08rem;
  line-height:1.55}
.ded-hero figure{margin:0}
.ded-hero img{width:100%; border:1px solid var(--hair); box-shadow:var(--shadow)}
.ded-stats{
  grid-column:1 / -1; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--hair); margin-top:.6rem;
}
.ded-stats div{padding:.95rem 1.05rem; border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}
.ded-stats dt{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--faint); margin-bottom:.35rem}
.ded-stats dd{margin:0; font-family:"Archivo",Arial,sans-serif; font-weight:500;
  font-size:1.5rem; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ded-stats dd small{font-size:.62rem; font-weight:450; letter-spacing:.11em; color:var(--graphite);
  text-transform:uppercase; display:block; margin-top:.4rem; font-family:"IBM Plex Mono",monospace}

.wall-head{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:baseline;
  justify-content:space-between; padding-block:clamp(1.6rem,4vw,2.4rem) 1.1rem;
  border-top:1px solid var(--rule);
}
.wall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  gap:5px; padding-bottom:clamp(2.4rem,6vw,4rem);
}
.wall img{
  width:100%; aspect-ratio:1; object-fit:cover; background:#fff;
  border:1px solid var(--hair); display:block;
}
.wall.zoomable img{cursor:zoom-in; transition:outline-color .12s}
.wall.zoomable img:hover{outline:2px solid var(--accent); outline-offset:1px}

.feat{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,3.5vw,2.6rem);
  padding-block:clamp(1.6rem,4vw,2.4rem) clamp(3rem,7vw,5rem);
  border-top:1px solid var(--rule);
}
.feat figure{margin:0; min-width:0}
.feat img{width:100%; border:1px solid var(--hair); box-shadow:var(--shadow); background:#fff}
.feat figcaption{
  display:flex; gap:.9rem; align-items:baseline; margin-top:.7rem; padding-top:.55rem;
  border-top:1px solid var(--hair);
}
.feat .no{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.64rem;
  letter-spacing:.1em; color:var(--accent); flex:none; font-variant-numeric:tabular-nums}
.feat .cap{font-size:.84rem; color:var(--graphite)}

.ig{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:"Archivo",Arial,sans-serif; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--accent);
  padding:.62rem 1.1rem; transition:background .15s,color .15s;
}
.ig:hover{background:var(--accent); color:#fff}
.ig svg{width:14px; height:14px; flex:none}
.ig-row{padding-block:clamp(1.6rem,4vw,2.4rem) clamp(2.4rem,6vw,3.6rem);
  border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between}
.ig-note{font-size:.9rem; color:var(--graphite); max-width:46ch}
#lb{position:fixed; inset:0; background:rgba(8,11,15,.93); display:grid; place-items:center;
  z-index:50; padding:3vmin; cursor:zoom-out}
#lb img{max-width:min(92vw,900px); max-height:92vh; width:auto; border:1px solid #333;
  background:#fff}
@media (max-width:820px){
  .ded-hero{grid-template-columns:minmax(0,1fr)}
  .ded-hero figure{order:-1}
  .feat{grid-template-columns:minmax(0,1fr)}
  .wall{grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:4px}
}

/* ---------- rolling banner ---------- */
:root{--reel-h:clamp(120px,17vw,232px)}
.reel{
  position:relative; height:var(--reel-h); overflow:hidden; background:var(--sunk);
  border-block:1px solid var(--rule);
}
.reel-track{
  display:flex; width:max-content; height:var(--reel-h);
  animation:reelroll 86s linear infinite;
}
.reel:hover .reel-track{animation-play-state:paused}
.reel-track a{display:block; flex:none; height:100%; text-decoration:none}
.reel-track i.rp{display:block; height:100%; background-size:cover; background-position:center;
  border-right:1px solid var(--rule); background-color:var(--surface)}
.reel-track img{
  height:100%; width:auto; display:block; border-right:1px solid var(--rule);
  background:var(--surface);
}
@keyframes reelroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.reel-tag{
  position:absolute; right:0; bottom:0; z-index:2;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; background:var(--accent);
  padding:.42rem .85rem; text-decoration:none;
}
.reel-tag:hover{background:var(--ink)}

/* The landing state. The wrapper clips a reel that is always full height, so the
   panels load before the click instead of sitting at zero size. Absolute, so it
   overlays the bottom of the landing rather than growing it past one screen. */
.landing{position:relative}
.landing-reel{
  position:fixed; left:0; right:0; bottom:0; z-index:40; pointer-events:none;
  height:0; overflow:hidden;
  transition:height .52s cubic-bezier(.2,.8,.2,1);
}
.landing-reel .reel{border-block:0; border-top:1px solid var(--rule)}
.landing-reel .reel-track{animation-duration:15s}
.landing-reel.roll{height:var(--reel-h)}

@media (prefers-reduced-motion: reduce){
  .reel-track{animation:none}
  .reel{overflow-x:auto}
  .landing-reel{display:none}
}

/* ---------- drawings page ---------- */
.dw-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3.5rem); align-items:end;
  padding-block:clamp(2.6rem,7vw,4.6rem) clamp(1.4rem,3.5vw,2.2rem);
}
.dw-head .lede{margin-top:1.2rem; max-width:40ch; color:var(--graphite); font-size:1.08rem;
  line-height:1.55}
.dw-stats{
  grid-column:1 / -1; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--hair); margin-top:1.6rem;
}
.dw-stats div{padding:.9rem 1.05rem; border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}
.dw-stats dt{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--faint); margin-bottom:.35rem}
.dw-stats dd{margin:0; font-family:"Archivo",Arial,sans-serif; font-weight:500;
  font-size:.95rem; line-height:1.25; letter-spacing:-.005em}

.sheets{padding-bottom:clamp(2.4rem,6vw,4rem)}
.sheets figure{margin:0 0 clamp(2rem,5vw,3.4rem)}
.sheets img{width:100%; height:auto; display:block; border:1px solid var(--hair);
  background:var(--surface); box-shadow:var(--shadow)}
.sheets .shx{width:100%; display:block; background-size:cover; background-position:center;
  border:1px solid var(--hair); background-color:var(--surface); box-shadow:var(--shadow)}
.sheets.zoomable img{cursor:zoom-in}
.sheets.zoomable figure:hover img{outline:2px solid var(--accent); outline-offset:2px}
.sheets figcaption{
  display:flex; gap:1.1rem; align-items:baseline; margin-top:.7rem;
  border-top:1px solid var(--hair); padding-top:.55rem;
}
.sheets figcaption .no{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.62rem; letter-spacing:.14em;
  color:var(--faint); flex:none;
}
.sheets figcaption .cap{font-size:.9rem; color:var(--graphite); line-height:1.45}
@media (max-width:640px){
  .dw-head{grid-template-columns:minmax(0,1fr)}
  .sheets figcaption{flex-direction:column; gap:.3rem}
}