/* clubmedsucks.com — Sam Moody
   Art direction: grunge Americana. Near-black base, colour only where the
   picture brings it. One typeface everywhere — Helvetica, per Sam 11 Aug.
   No webfont is loaded: Helvetica Neue is native on macOS/iOS, Arial is the
   metric-compatible fallback elsewhere. Costs nothing, renders instantly, and
   means no flash of the wrong face on first paint.
   No fake film furniture anywhere: no sprockets, no edge codes, no faux dust. */

:root{
  --ink:#0a0a0b;
  --ink-2:#101013;
  --paper:#e9e5dc;
  --dim:#8d8981;
  --dimmer:#615e58;
  --hair:#1e1e22;
  /* Accent — interruption only, never decoration.
     Sam's call 12 Aug: the signage red is out. "Orange always reminds me of
     Coop or Sixt Rental car," which is fatal for it — once a colour reads as a
     Swiss supermarket it cannot read as anything else. Settled 13 Aug on
     lavender over neon yellow: it is the colour already drifting through the
     five texture loops he shot for the series pages, so the accent and the
     backgrounds are one family rather than two ideas.
     --onhot is the text colour that sits ON the accent — a light accent needs
     ink on it, so the pairing travels with the hue instead of being hardcoded. */
  --hot:#b6a6ff;
  --onhot:#0a0a0b;
  --hel:'Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif;
  --font-display:var(--hel);
  --font-body:var(--hel);
  --font-mono:var(--hel);
  --cols:6;
  --pad:clamp(18px,3.5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--font-body);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* ── the reel runs under the whole site ────────────────────────────────────
   Every page sits on the same loop rather than on flat black. It is held well
   down (opacity + a scrim) so it reads as movement in the room, not as a video
   you are being asked to watch — Helvetica at 11px has to stay legible over
   it. Fixed, so scrolling reveals content against a steady image instead of
   dragging the footage along. */
.bgv{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--ink)}
.bgv video,.bgv img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.17;filter:grayscale(.34) brightness(.62) contrast(1.04);
  transform:scale(1.04);  /* hides any edge wobble from the cover crop */
}
.bgv::after{  /* the scrim that buys back legibility */
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%,transparent,rgba(10,10,11,.55)),
    linear-gradient(rgba(10,10,11,.34),rgba(10,10,11,.34));
}
/* Text-dense pages lean on it harder than the home page does. */
body.dense .bgv video,body.dense .bgv img{opacity:.14}
@media(max-width:640px){
  .bgv video,.bgv img{opacity:.13}
  .bgv::after{background:linear-gradient(rgba(10,10,11,.5),rgba(10,10,11,.5))}
}

/* ── Sam's own base loops (.tex) ───────────────────────────────────────────
   One per series, sitting under the series page instead of the reel. They are
   not footage and must not be treated like it: each is near-black with sparse
   lavender specks drifting through, so the reel's 14% opacity and
   grayscale(.34) brightness(.62) would leave a black rectangle.

   Kept at 78% with colour intact and no grade. Legibility is not at risk the
   way it is under the reel — the specks are small and the field between them
   is already darker than the page's own ink — so the radial scrim comes off
   too, and only a light flat wash stays to seat the type. */
.bgv.tex video,.bgv.tex img,
body.dense .bgv.tex video,body.dense .bgv.tex img{
  opacity:.78;filter:none;transform:scale(1.02)}
.bgv.tex::after{background:linear-gradient(rgba(10,10,11,.28),rgba(10,10,11,.28))}
@media(max-width:640px){
  /* A phone holds the same texture over a much smaller area, so the specks
     land denser per screen. Slightly quieter, slightly more wash. */
  .bgv.tex video,.bgv.tex img{opacity:.66}
  .bgv.tex::after{background:linear-gradient(rgba(10,10,11,.4),rgba(10,10,11,.4))}
}
@media(prefers-reduced-motion:reduce){.bgv video{display:none}}
body::after{  /* faint grain over the whole surface — texture, not simulated film */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block}
a{color:inherit}

.wrap{max-width:1680px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--hel);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:900;
  background:rgba(10,10,11,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.nav .in{max-width:1680px;margin:0 auto;padding:13px var(--pad);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,38px)}
.nav .mark{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.nav .mark b{font-family:var(--hel);font-weight:700;font-size:15px;
  letter-spacing:-.02em;line-height:1}
/* The drawn wordmark rather than set type. It reads down to about 140px — the
   notches in the letters are the first thing to go, so it is not pushed below
   that. Height is pinned so the sticky bar cannot jump before the png lands. */
.nav .mark img{display:block;width:clamp(142px,15vw,178px);height:auto;
  opacity:.94;transition:opacity .25s}
.nav .mark:hover img{opacity:1}
.nav .sp{flex:1}
/* Read by assistive tech, drawn nowhere. For headings the layout states
   visually but never marks up as headings. Not display:none, which would take
   it out of the accessibility tree along with the pixels. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;margin:-1px;padding:0}

.nav a.lk{
  font-family:var(--hel);font-weight:500;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);text-decoration:none;
  /* 8px block padding, not 5px: at 10.5px uppercase the link box measured 22px
     tall, just under the 24px minimum pointer target. Padding rather than
     min-height so the underline on .on stays tight to the word. */
  padding:8px 0;position:relative;transition:color .25s;white-space:nowrap;
}
.nav a.lk:hover{color:var(--paper)}
.nav a.lk.on{color:var(--paper)}
.nav a.lk.on::after{content:'';position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--hot)}
/* Below ~640px five mono links plus the wordmark overflow the bar, which was
   clipping CONTACT. Wrap to a second row instead of shrinking the type. */
@media(max-width:640px){
  .nav .in{flex-wrap:wrap;row-gap:9px;padding-bottom:9px}
  .nav .mark{flex:1 0 100%}
  .nav .sp{display:none}
  .nav a.lk{flex:1 1 auto;font-size:9.5px;letter-spacing:.13em}
}

/* ── page head ───────────────────────────────────────────────────────── */
header.ph{padding:clamp(40px,8vh,96px) 0 clamp(26px,4.5vh,52px)}
h1.big{
  font-family:var(--hel);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,7.4vw,116px);line-height:.9;letter-spacing:-.035em;
}
h1.big.sm{font-size:clamp(32px,5.4vw,78px)}
.datum{
  display:flex;flex-wrap:wrap;gap:8px 34px;
  margin-top:clamp(20px,3.5vh,36px);padding-top:15px;
  border-top:1px solid var(--hair);
  font-family:var(--hel);font-weight:500;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
}
.lede{max-width:56ch;margin-top:clamp(24px,3.6vh,40px);
  font-size:clamp(15px,1.35vw,17.5px);line-height:1.62;color:#b4afa6}
.lede.big{max-width:34ch;font-family:var(--font-display);font-weight:500;
  text-transform:uppercase;font-size:clamp(26px,4vw,58px);line-height:.98;
  color:var(--paper)}
.back{display:inline-flex;gap:9px;align-items:center;margin-bottom:20px;min-height:26px;
  text-decoration:none;transition:color .25s}
.back:hover{color:var(--paper)}

/* ── section rule ────────────────────────────────────────────────────── */
.rule{display:flex;align-items:baseline;gap:16px;
  border-top:1px solid var(--hair);padding-top:14px;
  margin:clamp(56px,9vh,116px) 0 clamp(20px,3vh,32px)}
.rule h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,52px);line-height:.9;letter-spacing:-.005em}
/* Small uppercase text set the link box to 12px tall, well under a usable
   target on any pointer and badly under it on a phone. */
.rule .c{margin-left:auto;font-family:var(--hel);font-weight:500;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);
  white-space:nowrap;
  display:inline-flex;align-items:center;min-height:26px}

/* ── stills sheet ─────────────────────────────────────────────────────
   Column flow, not a fixed grid. A grid of uniform cells letterboxes every
   frame whose ratio doesn't match, which is the whitespace Sam flagged as
   "gaps". Columns let each frame keep its own shape and sit flush. */
.sheet{column-count:var(--cols);column-gap:clamp(5px,.55vw,9px);overflow:visible}
.cell{position:relative;cursor:pointer;break-inside:avoid;
  margin:0 0 clamp(5px,.55vw,9px)}
.cell img{width:100%;height:auto;
  filter:grayscale(.22) contrast(1.03) brightness(.93);opacity:0;
  transition:filter .45s ease,transform .5s cubic-bezier(.16,.7,.26,1)}
.cell.in img{opacity:1;
  transition:opacity .9s ease,filter .45s ease,transform .5s cubic-bezier(.16,.7,.26,1)}
.cell:hover{z-index:40}
.cell:hover img{filter:grayscale(0) contrast(1.06) brightness(1);
  transform:scale(1.72);box-shadow:0 26px 80px rgba(0,0,0,.9);
  position:relative;z-index:40}

/* ── film cards ──────────────────────────────────────────────────────── */
.films{display:grid;gap:clamp(14px,1.6vw,26px) clamp(12px,1.3vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,266px),1fr))}
.film{position:relative;text-align:left;background:none;border:0;padding:0;
  color:inherit;cursor:pointer;font:inherit;display:block}
.film .fr{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:#141417}
.film .fr img{width:100%;height:100%;object-fit:cover;opacity:0;
  filter:grayscale(.3) contrast(1.04) brightness(.86);
  transition:transform .7s cubic-bezier(.16,.7,.26,1),filter .45s,opacity .8s}
.film.in .fr img{opacity:1}
.film:hover .fr img{transform:scale(1.045);filter:grayscale(0) brightness(1)}
.film .fr::after{content:'';position:absolute;inset:0;
  border:1px solid rgba(233,229,220,.09);pointer-events:none;transition:border-color .3s}
.film:hover .fr::after{border-color:rgba(233,229,220,.3)}
.film h3{margin-top:11px;font-family:var(--font-body);font-weight:400;
  font-size:14px;line-height:1.34;letter-spacing:.002em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.68em}
.film .meta{margin-top:5px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);
  line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.film:hover .meta{color:var(--dim)}

/* ── film index ────────────────────────────────────────────────────────────
   Sam's reference is 1980s Soviet new wave, so this leans on that register:
   heavy rules against hairlines, sequence numerals in ruled boxes, a solid red
   field that snaps in on hover with knockout type, and a diagonal hatch band.
   No Cyrillic-faking — swapping Latin letters for Я/Ж is kitsch, and he has
   already told us he hates cheesy pastiche. The language here is structural:
   rule weight, numerals, red, and hard-edged state changes with no easing.
   The film art stays out of it — the thumbnails carry baked-in title cards. */
.idx{border-top:3px solid var(--paper);border-bottom:3px solid var(--paper)}
.idx a{display:flex;align-items:stretch;text-decoration:none;position:relative;
  border-bottom:1px solid var(--hair);overflow:hidden;
  transition:background .09s linear}
.idx a:last-child{border-bottom:0}
.idx a:hover{background:var(--hot);color:var(--onhot)}

/* diagonal hatch band, constructivist rather than decorative */
.idx a::after{content:'';position:absolute;inset:0 0 0 auto;width:52px;
  background-image:repeating-linear-gradient(45deg,var(--ink) 0 3px,transparent 3px 8px);
  opacity:0;transition:opacity .09s linear;pointer-events:none}
.idx a:hover::after{opacity:.55}

.idx .no{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:clamp(46px,5vw,78px);border-right:1px solid var(--hair);
  font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--dimmer);
  font-variant-numeric:tabular-nums;transition:color .09s linear,border-color .09s}
.idx a:hover .no{color:var(--ink);border-right-color:rgba(10,10,11,.35)}

.idx .nm{flex:1;min-width:0;display:flex;align-items:center;
  padding:clamp(15px,2.1vw,27px) clamp(14px,1.8vw,30px);
  font-family:var(--hel);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,3.1vw,52px);line-height:1;letter-spacing:-.03em;
  color:var(--paper);transition:color .09s linear}
.idx a:hover .nm{color:var(--ink)}

.idx .rt{flex:0 0 auto;width:clamp(168px,19vw,272px);
  display:flex;flex-direction:column;justify-content:center;
  align-items:flex-end;text-align:right;gap:4px;
  padding:clamp(12px,1.6vw,22px) 66px clamp(12px,1.6vw,22px) clamp(14px,1.8vw,26px);
  border-left:1px solid var(--hair);
  font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dimmer);line-height:1.4;
  transition:color .09s linear,border-color .09s}
.idx .rt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:100%;letter-spacing:.05em}
.idx a:hover .rt{color:rgba(10,10,11,.72);border-left-color:rgba(10,10,11,.35)}
.idx .rt b{display:block;white-space:nowrap;font-weight:700;
  font-size:clamp(14px,1.35vw,20px);letter-spacing:-.01em;
  text-transform:uppercase;color:var(--paper);font-variant-numeric:tabular-nums;
  transition:color .09s linear}
.idx a:hover .rt b{color:var(--ink)}

@media(max-width:720px){
  .idx a{flex-wrap:wrap}
  .idx .no{width:38px;align-items:flex-start;padding-top:15px}
  .idx .nm{padding:13px 12px 4px;font-size:22px}
  .idx .rt{flex:1 0 100%;width:auto;flex-direction:row;align-items:baseline;
    gap:12px;justify-content:flex-start;text-align:left;border-left:0;
    padding:0 30px 14px 50px}
  .idx .rt b{font-size:13px}
  .idx a::after{width:24px}
}

/* ── group / chapter tiles ───────────────────────────────────────────── */
.tiles{display:grid;gap:clamp(10px,1.2vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.tile{position:relative;display:block;text-decoration:none;overflow:hidden;
  background:#131316;aspect-ratio:4/3}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.42) contrast(1.05) brightness(.52);
  transform:scale(1.03);
  transition:transform 1.1s cubic-bezier(.16,.7,.26,1),filter .6s}
.tile:hover img{transform:scale(1.07);filter:grayscale(.05) brightness(.66)}
.tile .lay{position:absolute;inset:0;z-index:2;padding:clamp(16px,2vw,28px);
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(to top,rgba(6,6,8,.88),rgba(6,6,8,.12) 62%,transparent)}
.tile .t{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(25px,3vw,44px);line-height:.9}
.tile .s{margin-top:8px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(233,229,220,.62);
  display:flex;align-items:center;gap:8px}
.tile:hover .s{color:rgba(233,229,220,.94)}
.tile .s .ar{transition:transform .35s}
.tile:hover .s .ar{transform:translateX(5px)}
.tile.wide{grid-column:span 2;aspect-ratio:16/9}
@media(max-width:740px){.tile.wide{grid-column:span 1;aspect-ratio:4/3}}

/* ── why interstitial ────────────────────────────────────────────────── */
.why{position:relative;display:block;text-decoration:none;
  margin:clamp(56px,10vh,132px) 0;height:min(74vh,700px);overflow:hidden;background:#000}
.why img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.3) contrast(1.05) brightness(.58);transform:scale(1.07);
  transition:transform 1.8s cubic-bezier(.2,.7,.3,1),filter 1s}
.why.in img{transform:scale(1)}
.why:hover img{filter:grayscale(.16) contrast(1.06) brightness(.68)}
.why::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,6,8,.9),rgba(6,6,8,.3) 40%,transparent 70%)}
.why figcaption{position:absolute;z-index:3;left:var(--pad);
  bottom:clamp(24px,4vw,54px);max-width:40ch}
.why .q{font-family:var(--font-display);text-transform:uppercase;font-weight:900;
  font-size:clamp(28px,4.4vw,66px);line-height:.93;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
.why .a{margin-top:15px;font-family:var(--hel);font-weight:500;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6);
  display:flex;align-items:center;gap:9px}
.why:hover .a{color:rgba(255,255,255,.92)}
.why .a .ar{transition:transform .35s}
.why:hover .a .ar{transform:translateX(5px)}

/* ── lightbox (stills + film player) ─────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(6,6,7,.985);
  display:none;align-items:center;justify-content:center;padding:5vh 5vw}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:84vh;object-fit:contain}
.lb .vid{width:min(1400px,100%);aspect-ratio:16/9;background:#000}
.lb .vid iframe{width:100%;height:100%;border:0}
.lb .cap{position:absolute;left:var(--pad);bottom:clamp(16px,3vw,30px);
  max-width:60ch;font-family:var(--hel);font-weight:500;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.lb .cap b{color:var(--paper);font-weight:400}
.lb .x,.lb .nv{position:absolute;font-family:var(--font-mono);color:var(--dim);
  cursor:pointer;user-select:none;transition:color .2s}
.lb .x{top:clamp(14px,3vw,30px);right:var(--pad);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase}
.lb .nv{top:50%;transform:translateY(-50%);font-size:22px;padding:18px}
.lb .pv{left:2px}.lb .nx{right:2px}
.lb .x:hover,.lb .nv:hover{color:var(--paper)}

/* ── season jump row ──────────────────────────────────────────────────────
   Sits above the sections on any series with more than one. Sticks to the top
   so it stays reachable through a long series, and the current section is
   marked as you pass it. Text, a hairline and a count — no pills, no chrome. */
.jr{position:sticky;top:var(--navh,0px);z-index:6;
  display:flex;flex-wrap:wrap;gap:0;
  margin:0 0 34px;padding:12px 0;
  background:rgba(10,10,11,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair)}
.jr button{appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dimmer);
  padding:9px 20px 9px 0;transition:color .25s;
  display:inline-flex;align-items:baseline;gap:6px}
.jr button:hover,.jr button:focus-visible{color:var(--paper)}
.jr button i{font-style:normal;font-size:9px;color:var(--dimmer);
  transition:color .25s}
/* The accent marks where you are, not where you can go. */
.jr button.on{color:var(--paper)}
.jr button.on i{color:var(--hot)}
@media(hover:none){
  .jr button:hover{color:var(--dimmer)}
  .jr button.on:hover{color:var(--paper)}
}
@media(max-width:640px){
  /* The phone nav already wraps to two rows and eats 111px. Four labels would
     wrap to three more, so this becomes one line you swipe instead. */
  .jr{margin-bottom:24px;padding:0;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity}
  .jr::-webkit-scrollbar{display:none}
  .jr button{flex:0 0 auto;scroll-snap-align:start;
    font-size:11.5px;letter-spacing:.07em;
    min-height:46px;padding:0 17px 0 0}
  .jr button:last-child{padding-right:var(--pad)}
  .jr button i{font-size:10.5px}
}

/* ── notice (build-state, not decoration) ───────────────────────────── */
.note{border:1px solid var(--hair);border-left:2px solid var(--hot);
  padding:14px 18px;margin:26px 0;max-width:78ch;
  font-family:var(--hel);font-weight:500;font-size:10.5px;letter-spacing:.1em;
  line-height:1.85;text-transform:uppercase;color:var(--dim)}

/* ── prose (why / contact) ──────────────────────────────────────────── */
.prose{max-width:62ch}
.prose p{font-size:clamp(15px,1.35vw,17.5px);line-height:1.68;color:#b8b3aa;
  margin-bottom:1.15em}
.prose p.first{font-family:var(--font-display);font-weight:500;
  text-transform:uppercase;font-size:clamp(24px,3.4vw,46px);line-height:1.02;
  color:var(--paper);margin-bottom:.7em}
.prose strong{color:var(--paper);font-weight:400}

.rows{border-top:1px solid var(--hair);max-width:900px}
.row{display:flex;gap:clamp(12px,2.4vw,40px);padding:15px 0;
  border-bottom:1px solid var(--hair);align-items:baseline;flex-wrap:wrap}
.row .k{flex:0 0 clamp(120px,15vw,190px);font-family:var(--font-mono);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer)}
.row .v{flex:1 1 260px;font-size:15px;line-height:1.5}
.row .v a{text-decoration:none;border-bottom:1px solid var(--hair);
  padding-bottom:2px;transition:border-color .25s;
  display:inline-flex;align-items:flex-end;min-height:26px}
.row .v a:hover{border-color:var(--hot)}
.row .v small{display:block;margin-top:5px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer)}

footer{margin-top:clamp(72px,12vh,140px);padding:30px 0 60px;
  border-top:1px solid var(--hair);font-family:var(--hel);font-weight:500;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);
  display:flex;flex-wrap:wrap;gap:9px 32px}
/* 10px uppercase again — inline-flex to lift the box off 11px. */
footer a{text-decoration:none;transition:color .25s;
  display:inline-flex;align-items:center;min-height:26px}
footer a:hover{color:var(--paper)}

@media(max-width:900px){:root{--cols:4}}
@media(max-width:560px){:root{--cols:3}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .cell:hover img{transform:none}
}

/* ── touch ────────────────────────────────────────────────────────────────
   A finger has no hover, but a tap still fires :hover on most mobile
   browsers and then leaves it stuck there with no pointer to move away.
   Every hover state that changes layout, scale or fill is therefore switched
   off here rather than left to latch on after a tap. Colour-only shifts are
   harmless and stay. */
@media(hover:none){
  .cell:hover{z-index:auto}
  .cell:hover img{transform:none;box-shadow:none;position:static;z-index:auto;
    filter:grayscale(.22) contrast(1.03) brightness(.93)}
  .idx a:hover{background:none;color:inherit}
  .idx a:hover::after{opacity:0}
  .idx a:hover .no{color:var(--dimmer);border-right-color:var(--hair)}
  .idx a:hover .nm{color:var(--paper)}
  .idx a:hover .rt{color:var(--dimmer);border-left-color:var(--hair)}
  .idx a:hover .rt b{color:var(--paper)}
  .tile:hover img{transform:scale(1.03);filter:grayscale(.42) contrast(1.05) brightness(.52)}
  .tile:hover .s .ar{transform:none}
  .film:hover .fr img{transform:none;filter:grayscale(.3) contrast(1.04) brightness(.86)}
  .why:hover img{filter:grayscale(.3) contrast(1.05) brightness(.58)}
  .why:hover .a .ar{transform:none}
}

/* ── phone ────────────────────────────────────────────────────────────────
   Sam's brief: vertical, simplified. Two concrete jobs here — nothing under
   11.5px, and nothing tappable under 44px. The mono labels were set at 9.5
   to 10.5px, which is a desktop conceit that becomes unreadable held at
   arm's length, and the nav links were 21px tall against a 44px target. */
@media(max-width:640px){
  /* Legibility floor. The letter-spacing comes down as the size goes up so
     the labels don't grow wider than the screen. */
  .mono,.datum,.rule .c,.film .meta,.tile .s,.row .k,.row .v small,
  .lb .cap,.lb .x,.why .a,footer,.idx .rt,.note{
    font-size:11.5px;letter-spacing:.09em}
  .lede{font-size:16px;line-height:1.66}
  .prose p{font-size:16px;line-height:1.7}
  .row .v{font-size:16px}
  .film h3{font-size:15px}

  /* Tap targets. The nav sits on one row again now that the type is bigger,
     so the wrap-to-two-rows workaround is no longer needed. */
  .nav .in{flex-wrap:wrap;row-gap:2px;padding:10px var(--pad)}
  .nav .mark{flex:1 0 100%;min-height:44px;align-items:center}
  .nav .sp{display:none}
  .nav a.lk{flex:0 1 auto;font-size:11.5px;letter-spacing:.08em;
    min-height:44px;display:inline-flex;align-items:center;padding:0}
  footer{gap:2px 28px}
  footer a{display:inline-flex;align-items:center;min-height:40px}
  .back{min-height:44px;align-items:center;margin-bottom:12px}

  /* The contact rows are the one place on the site where a link is the point
     of the page rather than an aside, and they were 20px tall. The address,
     the phone number and the Instagram handle all become proper rows. */
  .row{padding:6px 0}
  .row .k{flex:1 0 100%}
  .row .v{flex:1 0 100%}
  .row .v a{display:inline-flex;align-items:center;min-height:44px}
  .row .v small{margin-top:0;margin-bottom:6px}

  /* The section rule stacks. "Two longer bodies of work" was set to never
     wrap and pushed the Stills page 46px past the screen edge, which made
     the browser zoom the whole page out to fit. */
  .rule{flex-direction:column;align-items:flex-start;gap:7px}
  .rule .c{margin-left:0;white-space:normal}

  /* Two frames across. One column reads better per frame but turns the
     74-frame Documentary chapter into roughly 19,000px of scrolling, which
     nobody reaches the end of. Enlarge-on-hover is meaningless on a phone,
     so the tap opens the lightbox full-screen instead. */
  :root{--cols:2}
  .sheet{column-gap:5px}
  .cell{margin-bottom:5px}

  /* One card across rather than two half-width ones. */
  .films{grid-template-columns:1fr;gap:26px}
  .tiles{grid-template-columns:1fr}
  .tile{aspect-ratio:3/2}
  .why{height:min(56vh,460px)}
  .lb{padding:0}
  .lb img{max-height:88vh}
  /* Close and the two arrows are spans, so they escaped the tap-target pass.
     Closing a frame is the single most-used gesture in the lightbox and it
     was a 44x12 sliver in the corner. */
  .lb .x{top:0;right:0;min-height:52px;padding:0 var(--pad);
    display:inline-flex;align-items:center}
  .lb .nv{font-size:26px;padding:26px 16px;min-width:56px;
    display:inline-flex;align-items:center;justify-content:center}
  .lb .cap{bottom:12px;font-size:11.5px;letter-spacing:.09em;
    left:var(--pad);right:var(--pad);max-width:none}
}

/* ── statement + credits ───────────────────────────────────────────────────
   Sam is moving from shooting to directing and wants that legible without
   claiming it in adjectives, so the credits do the arguing: three director
   credits, then the five Stab years last, in that order. Lives on Contact,
   below the details, because it is the evidence someone wants after they have
   already found the phone number. Shared here rather than in one page's
   <style> so the two pages using it cannot drift. */
/* statement block under the reel — one line, set large, then straight to work */
.stmt{padding:clamp(46px,9vh,110px) 0 clamp(30px,5vh,58px)}
.stmt p{font-size:clamp(21px,2.9vw,44px);line-height:1.14;letter-spacing:-.028em;
  max-width:23ch;font-weight:400}
.stmt p em{font-style:normal;color:var(--dim)}
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  border-top:2px solid var(--paper);margin-top:clamp(28px,5vh,54px)}
.creds div{padding:15px 0 17px;border-right:1px solid var(--hair);padding-right:18px}
.creds div:last-child{border-right:0}
.creds b{display:block;font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hot);margin-bottom:7px}
.creds span{font-size:12.5px;line-height:1.45;color:var(--dim)}