/* ============================================================
   WORKFLOW — running order
   Tokens
   ============================================================ */
:root{
  --blackout:#08090C;
  --riser:#0E1116;
  --rule:#1C212A;
  --bone:#E8E6E1;
  --dim:#757B85;
  --tungsten:#F0A63C;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --maxw:1560px;
  --gut:max(clamp(1.25rem,5vw,5.5rem),calc((100vw - var(--maxw)) / 2));

  /* ---- type scale: one ratio, one fluid shape, so relationships hold at every width ---- */
  --t-2xs : clamp(.625rem  , .595rem + .15vw , .6875rem);
  --t-xs  : clamp(.6875rem , .645rem + .21vw , .8125rem);
  --t-sm  : clamp(.875rem  , .82rem  + .27vw , 1rem);
  --t-base: clamp(1.0625rem, .99rem  + .36vw , 1.2rem);
  --t-md  : clamp(1.2rem   , 1.06rem + .7vw  , 1.55rem);
  --t-lg  : clamp(1.5rem   , 1.24rem + 1.3vw , 2.25rem);
  --t-xl  : clamp(2rem     , 1.52rem + 2.4vw , 3.4rem);
  --t-2xl : clamp(2.6rem   , 1.66rem + 4.7vw , 5.4rem);

  /* ---- tracking: four roles, not sixteen ---- */
  --tr-label  : .16em;
  --tr-mono   : .04em;
  --tr-lede   : -.008em;
  --tr-display: -.018em;

  /* ---- leading: four roles, not sixteen ---- */
  --lh-display: .95;
  --lh-tight  : 1.14;
  --lh-snug   : 1.4;
  --lh-body   : 1.58;

  /* ---- space scale: one ratio ---- */
  --s1: clamp(.5rem  , .44rem + .28vw, .75rem);
  --s2: clamp(.875rem, .74rem + .5vw , 1.25rem);
  --s3: clamp(1.25rem, .99rem + .85vw, 2rem);
  --s4: clamp(2rem   , 1.5rem + 1.6vw, 3.25rem);
  --s5: clamp(3rem   , 2.05rem + 3vw , 5.5rem);
  --s6: clamp(4.25rem, 2.6rem + 5.2vw, 8.5rem);

  --measure: 66ch;

  /* ---- five type voices, not nine. same role always renders identically ---- */
  --ax-hero: "wdth" 116,"wght" 700;   /* hero + contact only */
  --ax-head: "wdth" 110,"wght" 600;   /* section, row + box headings */
  --ax-ui  : "wdth" 100,"wght" 500;   /* small sans */
  --ax-lede: "opsz" 36;               /* large serif statements */
  --ax-body: "opsz" 16;               /* prose */

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--blackout);
  color:var(--bone);
  font-family:var(--body);
  font-variation-settings:var(--ax-body);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--tungsten);
  outline-offset:3px;
}

/* ---------- shared type roles ---------- */
.kicker{
  font-family:var(--mono);
  font-size:var(--t-xs);
  font-weight:400;
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--dim);
  margin:0;
}
.display{
  font-family:var(--display);
  font-variation-settings:var(--ax-hero);
  text-transform:uppercase;
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  margin:0;
}
.lede{
  font-family:var(--body);
  font-variation-settings:var(--ax-lede);
  font-weight:300;
  line-height:var(--lh-snug);
  letter-spacing:var(--tr-lede);
  margin:0;
}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Top bar
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);
  padding:1.1rem var(--gut);
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  background:linear-gradient(to bottom,rgba(8,9,12,.82),rgba(8,9,12,0));
  backdrop-filter:blur(3px);
}
.topbar-name{color:var(--bone)}
.topbar-right{display:flex;align-items:center;gap:var(--s3);color:var(--dim)}
.topbar-right a:hover{color:var(--bone)}
.status{display:inline-flex;align-items:center;gap:var(--s1)}
.status::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--tungsten);
  box-shadow:0 0 0 0 rgba(240,166,60,.6);
  animation:ping 2.8s var(--ease) infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(240,166,60,.55)}
  70%{box-shadow:0 0 0 7px rgba(240,166,60,0)}
  100%{box-shadow:0 0 0 0 rgba(240,166,60,0)}
}
@media(max-width:640px){ .topbar-hide{display:none} }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gut) var(--s5);
  overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.72) saturate(1.15) contrast(1.06) brightness(.68);
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.5s var(--ease);
}
/* One statement, four rooms. The headline never moves; the room behind it does.
   Without JS the first frame simply stands: .js is only ever set by the script. */
.hero-media img:first-child{opacity:1}
.hero-media.js img:first-child{opacity:0}
.hero-media.js img.on{
  opacity:1;
  animation:drift 8.5s var(--ease) forwards;
}
@keyframes drift{to{transform:scale(1)}}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--blackout) 1%,rgba(8,9,12,.62) 38%,rgba(8,9,12,.15) 100%),
    radial-gradient(125% 95% at 50% -10%,rgba(8,9,12,0) 45%,rgba(8,9,12,.9) 100%);
}
.hero-inner{position:relative;z-index:1;width:100%}
.hero-title{
  font-size:var(--t-2xl);
  margin:1.1rem 0 0;
  max-width:16.4em;
}
.hero-title .quiet{
  display:block;
  margin-top:.34em;
  font-size:.34em;
  font-variation-settings:var(--ax-ui);
  letter-spacing:var(--tr-mono);
  line-height:var(--lh-tight);
  color:var(--dim);
}
.hero-scroll{
  position:absolute;right:var(--gut);bottom:var(--s5);z-index:1;
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}
@media(max-width:860px){ .hero-scroll{display:none} }

/* ============================================================
   Work band. Breadth in one glance, before any reading starts.
   ============================================================ */
.band{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(96px,1fr);
  border-bottom:1px solid var(--rule);
  background:var(--riser);
}
.band figure{margin:0;aspect-ratio:3/4;overflow:hidden;position:relative}
.band img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.8) saturate(1.1) contrast(1.04) brightness(.82);
  transition:filter .5s var(--ease),transform 1s var(--ease);
}
.band figure:hover img{filter:none;transform:scale(1.06)}
@media(max-width:900px){
  .band{grid-auto-columns:minmax(84px,1fr)}
  .band figure:nth-child(n+9){display:none}
}
@media(max-width:560px){
  .band figure:nth-child(n+7){display:none}
}

/* ============================================================
   Thesis band
   ============================================================ */
.thesis{
  padding:var(--s6) var(--gut);
  border-bottom:1px solid var(--rule);
}
.thesis-grid{
  display:grid;
  grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:var(--s4);
  align-items:start;
}
.thesis-lead{
  margin:0;
  font-size:var(--t-xl);
  font-variation-settings:var(--ax-lede);
  font-weight:300;
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-display);
  color:var(--bone);
  max-width:15em;
}
.thesis-sub{
  margin:1.4rem 0 0;
  color:var(--dim);
  max-width:40ch;
  font-size:var(--t-base);
  line-height:var(--lh-body);
}
@media(max-width:760px){
  .thesis-grid{grid-template-columns:1fr;gap:var(--s3)}
}

/* ============================================================
   Running order  — the signature
   ============================================================ */
.order{padding:var(--s5) 0 0}
.order-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  padding:0 var(--gut) 1.5rem;
}
.rows{border-top:1px solid var(--rule)}

.row{
  position:relative;
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) 9rem 15rem 2.5rem;
  align-items:center;
  min-height:clamp(7rem,13vw,11.9rem);
  gap:var(--s3);
  padding:var(--s4) var(--gut);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
  isolation:isolate;
  transition:background-color .5s var(--ease);
}
.row-bg{
  position:absolute;inset:0;z-index:-1;
  background-size:cover;
  background-position:var(--pos,center 32%);
  filter:grayscale(1) contrast(1.05) brightness(.62);
  opacity:0;
  transform:scale(1.05);
  transition:opacity .6s var(--ease),transform 1.1s var(--ease);
}
.row::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,9,12,.94) 26%,rgba(8,9,12,.55) 62%,rgba(8,9,12,.3));
  opacity:0;
  transition:opacity .55s var(--ease);
}
a.row:hover .row-bg,a.row:focus-visible .row-bg{opacity:.6;transform:scale(1)}
a.row:hover::after,a.row:focus-visible::after{opacity:1}
a.row:hover,a.row:focus-visible{background-color:var(--riser)}

.row-no{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--tr-label);
  color:var(--dim);
  transition:color .35s var(--ease);
}
a.row:hover .row-no{color:var(--tungsten)}

.row-title{
  font-family:var(--display);
  font-variation-settings:var(--ax-head);
  text-transform:uppercase;
  font-size:var(--t-lg);
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  display:block;
}
.row-client{
  display:block;margin-top:.4rem;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}
.row-sector{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}
.row-role{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--tr-mono);
  color:var(--dim);
  line-height:var(--lh-body);
}
.row-go{
  font-family:var(--mono);font-size:var(--t-sm);color:var(--dim);
  justify-self:end;
  transition:transform .4s var(--ease),color .4s var(--ease);
}
a.row:hover .row-go{color:var(--tungsten);transform:translateX(5px)}

@media(max-width:1180px){
  .row{grid-template-columns:4rem minmax(0,1fr) 8rem 2rem}
  .row-role{display:none}
}
@media(max-width:700px){
  .row{grid-template-columns:3rem minmax(0,1fr) 1.5rem;gap:var(--s2);align-items:start}
  .row-sector{
    display:block;grid-column:2;
    margin-top:.55rem;
  }
  .row::after{background:rgba(8,9,12,.78)}
}

/* ============================================================
   About — replaces the old capabilities block. The person and
   what they're for hire to do, in one band instead of two.
   ============================================================ */
.about{
  padding:var(--s6) var(--gut);
  border-bottom:1px solid var(--rule);
}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,7rem) minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s4);
  align-items:start;
}
.about-lead{
  margin:0;
  font-family:var(--display);
  font-variation-settings:var(--ax-head);
  text-transform:uppercase;
  font-size:var(--t-lg);
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  max-width:14em;
}
.about-lead span{color:var(--tungsten)}
.about-body p{
  margin:0 0 1.15em;
  color:var(--dim);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  max-width:44ch;
}
.about-body p:last-child{margin-bottom:0}
.about-body strong{color:var(--bone);font-weight:400}

/* Portrait sits beside the copy, under the lead — the reader meets the
   person while they read the claim. Drop-in replacement: assets/img/portrait.jpg */
.about-portrait{
  margin:clamp(2rem,4vw,3rem) 0 0;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--riser);
}
.about-portrait img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  filter:contrast(1.04) saturate(.9);
}

.about-hire{
  margin:2.5rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.about-hire dt{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}
.about-hire dd{
  margin:.75rem 0 0;
  font-family:var(--display);
  font-variation-settings:var(--ax-head);
  text-transform:uppercase;
  font-size:var(--t-sm);
  line-height:var(--lh-snug);
}
.about-hire dd em{
  font-style:normal;color:var(--tungsten);
}
@media(max-width:1000px){
  .about-grid{grid-template-columns:minmax(0,7rem) minmax(0,1fr)}
  .about-body{grid-column:2}
}
@media(max-width:760px){
  .about-grid{grid-template-columns:1fr;gap:var(--s3)}
  .about-body{grid-column:auto}
}

/* ============================================================
   Archive — the back of the file. Text only, deliberately.
   ============================================================ */
.arc{padding:var(--s5) var(--gut) var(--s6)}
.arc-head{margin-bottom:clamp(2rem,5vw,3.5rem);max-width:52ch}
.arc-head p{margin:1rem 0 0;color:var(--dim);line-height:var(--lh-body)}
.arc-group{margin-top:var(--s4)}
.arc-list{list-style:none;margin:1.25rem 0 0;padding:0;border-top:1px solid var(--rule)}
.arc-list li{border-bottom:1px solid var(--rule)}
.arc-row{
  display:grid;
  grid-template-columns:7.5rem minmax(0,1fr) minmax(0,1fr) 5rem;
  gap:1rem var(--s3);
  align-items:center;
  padding:var(--s2) 0;
  transition:color .3s var(--ease);
}
.arc-thumb{
  width:7.5rem;aspect-ratio:3/2;
  overflow:hidden;background:var(--riser);
}
.arc-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.05) brightness(.8);
  transition:filter .45s var(--ease),transform .8s var(--ease);
}
a.arc-row:hover .arc-thumb img{filter:none;transform:scale(1.05)}
.arc-thumb--none{background:transparent}
a.arc-row:hover{color:var(--tungsten)}
.arc-client{
  font-family:var(--display);
  font-variation-settings:var(--ax-head);
  text-transform:uppercase;
  font-size:var(--t-base);
  line-height:var(--lh-tight);
}
.arc-what{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--tr-mono);color:var(--dim);line-height:var(--lh-body)}
.arc-year{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--tr-label);color:var(--dim);justify-self:end}
a.arc-row:hover .arc-what,a.arc-row:hover .arc-year{color:var(--bone)}
@media(max-width:700px){
  .arc-row{grid-template-columns:4.5rem minmax(0,1fr) 3.5rem}
  .arc-thumb{width:4.5rem}
  .arc-what{grid-column:2/-1;order:3}
}

/* ============================================================
   When to bring me in. Three registers per box: the situation,
   what I make happen, and the proof it has happened before.
   ============================================================ */
.help{
  padding:var(--s6) var(--gut);
  border-bottom:1px solid var(--rule);
}
.helps{
  list-style:none;margin:var(--s4) 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);
}
.helps li{background:var(--blackout)}
.help-row{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  min-height:clamp(15rem,21vw,20rem);
  padding:var(--s4);
  transition:background-color .45s var(--ease);
}
a.help-row:hover{background:var(--riser)}

.help-when{
  display:block;
  font-family:var(--display);
  font-variation-settings:var(--ax-head);
  text-transform:uppercase;
  font-size:var(--t-lg);
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  max-width:17ch;
  text-wrap:balance;
}
.help-do{
  display:block;
  margin:var(--s3) 0 0;
  font-family:var(--body);
  font-variation-settings:var(--ax-body);
  font-weight:300;
  font-size:var(--t-base);
  line-height:var(--lh-snug);
  color:var(--dim);
  max-width:34ch;
}
.help-proof{
  display:block;
  margin-top:auto;padding-top:var(--s4);
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);line-height:1.9;
}
.help-proof b{display:block;font-weight:400;color:var(--bone)}
.help-proof em{display:block;font-style:normal;color:var(--dim)}
.help-proof i{font-style:normal;transition:color .35s var(--ease)}
@media(max-width:1040px){
  .help-when{font-size:var(--t-md);max-width:21ch}
  .help-row{min-height:clamp(13rem,26vw,17rem)}
}
@media(max-width:640px){
  .helps{grid-template-columns:1fr}
  .help-row{min-height:0;padding:var(--s4) var(--s3)}
  .help-when{max-width:24ch}
}
a.help-row:hover .help-proof i{color:var(--tungsten)}

/* ============================================================
   Contact
   ============================================================ */
.contact{padding:var(--s6) var(--gut) var(--s5)}
.contact-title{
  font-size:var(--t-2xl);
  max-width:11em;
}
.contact-link{
  display:inline-block;margin-top:2.5rem;
  font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--tungsten);
  border-bottom:1px solid rgba(240,166,60,.35);
  padding-bottom:.4rem;
  transition:border-color .35s var(--ease)
}
.contact-link:hover{border-bottom-color:var(--tungsten)}
.colophon{
  display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
  margin-top:var(--s6);
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}

/* ============================================================
   PROJECT PAGE
   ============================================================ */
.p-hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gut) var(--s5);
  overflow:hidden;
}
.p-hero-media{position:absolute;inset:0;z-index:0}
.p-hero-media img,
.p-hero-video{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  filter:contrast(1.05) brightness(.85);
  transform:scale(1.05);
  animation:drift 24s var(--ease) forwards;
}
.p-hero-video{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.4s var(--ease);
}
.p-hero-video.ready{opacity:1}

/* Lighter treatment for heroes that are already delicate — dusk, pale skies.
   Declared after the base rule: same specificity, source order decides. */
.p-hero-media--light img{filter:contrast(1.04) brightness(1)}
.p-hero-media--light::after{
  background:
    linear-gradient(to top,var(--blackout) 3%,rgba(8,9,12,.6) 29%,rgba(8,9,12,.04) 66%,rgba(8,9,12,.28) 100%),
    linear-gradient(90deg,rgba(8,9,12,.32),rgba(8,9,12,0) 52%);
}

/* Broadcast source: crop in so the channel bugs in the top corners fall
   outside the frame. Applies to poster and video together so they match. */
@keyframes driftCrop{from{transform:scale(1.3)}to{transform:scale(1.22)}}
.p-hero-media--broadcast img,
.p-hero-media--broadcast .p-hero-video{
  transform:scale(1.22);
  animation:driftCrop 24s var(--ease) forwards;
}
.p-hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--blackout) 10%,rgba(8,9,12,.78) 34%,rgba(8,9,12,.1) 72%,rgba(8,9,12,.4) 100%),
    linear-gradient(90deg,rgba(8,9,12,.5),rgba(8,9,12,0) 55%);
}
.p-hero-inner{position:relative;z-index:1}
.p-meta{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:center;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}
.p-meta .sep{color:var(--rule)}
.p-title{
  font-size:var(--t-2xl);
  margin:1.1rem 0 0;
  max-width:16.4em;
}

/* three lines */
.three{
  padding:var(--s6) var(--gut);
  border-bottom:1px solid var(--rule);
}
.three-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-top:2.5rem;
}
.three-cell{background:var(--blackout);padding:var(--s4) var(--s3)}
.three-cell .kicker{color:var(--tungsten)}
.three-cell p:not(.kicker){
  margin:1.1rem 0 0;
  font-size:var(--t-base);
  font-variation-settings:var(--ax-body);
  font-weight:300;
  line-height:var(--lh-snug);
}
@media(max-width:820px){
  .three-grid{grid-template-columns:1fr}
}

/* gallery */
.gallery{padding:var(--s5) 0 var(--s6)}
.gal-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s1);
  padding:0 var(--gut);
}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--riser)}
.gal img{width:100%;height:100%;object-fit:cover}
.gal-w12{grid-column:span 12;aspect-ratio:16/9}
.gal-w8{grid-column:span 8;aspect-ratio:3/2}
.gal-w6{grid-column:span 6;aspect-ratio:3/2}
.gal-w4{grid-column:span 4;aspect-ratio:3/4}
/* dense text sheets: natural aspect ratio, never cropped */
.gal figure.gal-doc{aspect-ratio:auto;background:var(--riser)}
.gal figure.gal-doc img{height:auto;object-fit:contain}
@media(max-width:820px){
  .gal-w8,.gal-w6,.gal-w4{grid-column:span 12;aspect-ratio:3/2}
  .gal-w12{aspect-ratio:4/3}
}

/* contribution */
.role{
  padding:var(--s6) var(--gut);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.role-grid{
  display:grid;
  grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:var(--s4);
}
.role-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  column-gap:var(--s3);row-gap:var(--s1);
  max-width:30em;
}
.role-list li{
  white-space:nowrap;
  font-family:var(--display);
  font-variation-settings:var(--ax-head);
  text-transform:uppercase;
  font-size:var(--t-md);
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-display);
}
/* One film per project. Click to play, with sound, never autoplay:
   this is evidence, not atmosphere. */
.film{padding:0 var(--gut) var(--s5)}
.films{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:var(--s3);
  margin-top:1.25rem;
  max-width:1100px;
}
.films{align-items:start}
.films figure{margin:0}
/* Vertical source (9:16). Capped so it reads as the format it is
   rather than blowing out the row next to a landscape film. */
.film-frame--v{
  aspect-ratio:9/16;
  max-width:min(100%,300px);
  margin-inline:auto;
}
.films .film-frame{margin:0}
.films figcaption{
  margin-top:.8rem;
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}
.film-frame iframe{display:block;width:100%;height:100%;border:0}
.film-frame{
  margin:1.25rem 0 0;
  max-width:1100px;
  aspect-ratio:16/9;
  background:var(--riser);
  border:1px solid var(--rule);
}
.film-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.film-note{
  margin:.9rem 0 0;
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}

.roster{
  margin:2rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  max-width:52ch;
}
.roster dt{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}
.roster dd{
  margin:.7rem 0 1.4rem;
  font-family:var(--display);
  font-variation-settings:var(--ax-head);
  text-transform:uppercase;
  font-size:var(--t-sm);
  line-height:var(--lh-body);
}
.roster dd:last-child{margin-bottom:0}
.roster dd em{font-style:normal;color:var(--tungsten)}

.credit{
  margin:1.6rem 0 0;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}
.role-list li:not(:last-child)::after{
  content:"/";
  color:var(--tungsten);
  margin-left:1.4rem;
  font-variation-settings:var(--ax-ui);
}
@media(max-width:760px){
  .role-grid{grid-template-columns:1fr;gap:var(--s3)}
}

/* pager */
.pager{padding:0}
.pager .kicker{padding:var(--s4) var(--gut) 1.25rem}

/* ============================================================
   Reveal
   ============================================================ */
.rise{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}


/* ============================================================
   Archive: selected credits, showreel, portfolio download
   main.arc supplies the gutter, so nothing here sets one.
   ============================================================ */
.creds{margin-top:var(--s3);border-top:1px solid var(--rule)}
.cred{
  padding:var(--s5) 0;
  border-bottom:1px solid var(--rule);
}
.cred-head{
  display:flex;flex-direction:column;gap:var(--s1);
  margin-bottom:var(--s3);
  max-width:70ch;
}
.cred-name{
  font-family:var(--display);
  font-variation-settings:var(--ax-head);
  text-transform:uppercase;
  font-size:var(--t-md);
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-display);
}
.cred-name a{transition:color .35s var(--ease)}
.cred-name a:hover{color:var(--tungsten)}
.cred-what{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-mono);
  line-height:var(--lh-snug);
  color:var(--dim);
}
.cred-shots{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:var(--s1);
}
.cred-shots figure{margin:0;overflow:hidden;background:var(--riser)}
.cred-shots img{
  width:100%;height:100%;
  aspect-ratio:3/2;object-fit:cover;
  filter:grayscale(.15);
  transition:filter .5s var(--ease),transform 1s var(--ease);
}
.cred-shots figure:hover img{filter:grayscale(0);transform:scale(1.03)}
.cred-shots--sq img{aspect-ratio:1/1}
.cred-shots figure.uncropped img{object-fit:contain;background:var(--blackout)}
.cred-film{
  margin-top:var(--s2);
  max-width:900px;
  aspect-ratio:16/9;
  background:var(--riser);
  border:1px solid var(--rule);
}
.cred-film iframe{display:block;width:100%;height:100%;border:0}
.cred-credit{
  margin:var(--s2) 0 0;
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}
.cred-credit a{transition:color .35s var(--ease)}
.cred-credit a:hover{color:var(--tungsten)}

.reel{
  margin-top:var(--s3);
  max-width:1100px;
  aspect-ratio:16/9;
  background:var(--riser);
  border:1px solid var(--rule);
}
.reel iframe{display:block;width:100%;height:100%;border:0}
.reel-note{
  margin:var(--s2) 0 0;
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}

.dl-row{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--s2) var(--s3);
  margin-top:var(--s6);
  padding:var(--s4) 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.dl-row a{
  font-family:var(--display);
  font-variation-settings:var(--ax-head);
  text-transform:uppercase;
  font-size:var(--t-md);
  letter-spacing:var(--tr-display);
  transition:color .35s var(--ease);
}
.dl-row a:hover{color:var(--tungsten)}
.dl-meta{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--dim);
}
@media(max-width:640px){
  .cred{padding:var(--s4) 0}
  .cred-shots{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
}


@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rise{opacity:1;transform:none}
  .hero-media img,.p-hero-media img{transform:none}
  .hero-media img:first-child{opacity:1}
}