/* ============================================================
   A BALLAD OF CHAOS — Press & Media
   Loaded after css/style.css (tokens, nav, footer, cosmos layers) and
   css/page.css (.pg-hero, .pg-title, .pg-lede, .pg-more, .pg-soon).

   The page is a wall of NINE-BY-SIXTEEN posters. Every film here was cut for a
   phone, and pretending otherwise — letterboxing them into 16:9 cards — would
   throw away most of every frame. So the tile is the reel's own shape, and the
   grid is built around a tall card rather than a wide one.

   Beyond that it follows the Artwork page's rules, because the two pages do the
   same job: hairline chrome, no filled panels, art held at a partial desaturation
   until you point at it. That is what keeps twelve loud posters reading as an
   archive instead of a feed.
   ============================================================ */

.press{position:relative;z-index:3}

/* ---- solid header on this page only ----
   The section index parks directly under the nav and is opaque, so a
   half-transparent nav above it reads as a rendering fault. Same ground, same
   blur, one continuous bar. Scoped to body.press so no other page moves.
   It is on `.scrolled` ONLY — the bar starts transparent over the hero and takes
   the glass at y>40, like Characters and Essays. Painting the unscrolled state
   too made this page the odd one out, opaque from the first frame. The index sits
   far below the fold, so it can never stick while the nav is still clear. */
body.press .site-nav.scrolled{
  background:linear-gradient(180deg,rgba(10,8,9,.985),rgba(10,8,9,.955));
  backdrop-filter:blur(14px) saturate(.9)}

/* ============================================================ MASTHEAD */
/* page.css caps .pg-lede at 40ch for the author page's narrow column; this is a
   two-column hero with room, so the measure is reset here rather than there. */
.pr-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:center}
.pr-hero .pg-title{font-size:clamp(2.8rem,7vw,6rem)}
.pr-hero .pg-title em{font-size:.36em}
.pr-hero .pg-lede{max-width:56ch;font-size:clamp(1.12rem,1.55vw,1.4rem)}

.pr-hero__ward{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:1;
  pointer-events:none}
.pr-hero__ward img{width:100%;height:100%;object-fit:contain;opacity:.2;
  filter:drop-shadow(0 0 60px rgba(201,162,75,.28));
  animation:pr-ward-turn 240s linear infinite}
@keyframes pr-ward-turn{to{transform:rotate(-360deg)}}

.pr-tally{display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,3.2rem);margin-top:2.4rem}
.pr-tally div{display:flex;flex-direction:column;gap:.28rem}
.pr-tally b{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem);
  line-height:1;color:var(--accent)}
.pr-tally span{font-family:var(--label);font-size:.53rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ash-dim)}

/* ============================================================ SECTION INDEX */
/* The site nav is position:fixed, so this parks BELOW it rather than at 0 or it
   pins itself out of sight. 5.4rem is the scrolled nav (66px mark + .7rem
   padding either side); the 760px block matches the 44px mobile mark. */
/* top = .site-nav.scrolled's height: the 66px .logo__mark + 2 x its .7rem padding.
   Derived, not rounded -- a rem-only value drifts from the fixed-px mark. */
.pr-index{position:sticky;top:calc(66px + 1.4rem);z-index:20;backdrop-filter:blur(14px) saturate(.9);
  background:linear-gradient(180deg,rgba(10,8,9,.96),rgba(10,8,9,.8));
  border-top:1px solid rgba(201,162,75,.1);
  border-bottom:1px solid rgba(201,162,75,.14)}
.pr-index__in{max-width:1240px;margin:0 auto;padding:.8rem var(--gutter);
  display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none}
.pr-index__in::-webkit-scrollbar{display:none}
.pr-index a{flex:0 0 auto;display:flex;align-items:baseline;gap:.55em;padding:.5rem .9rem;
  font-family:var(--label);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash-dim);border:1px solid transparent;transition:color .3s,border-color .3s,background .3s}
.pr-index a em{font-style:normal;font-size:.85em;opacity:.55}
.pr-index a:hover{color:var(--bone)}
.pr-index a.is-on{color:var(--bone);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent)}

/* ============================================================ SECTIONS */
/* clear both the fixed nav and the sticky index when jumped to from the index */
.pr-sec{max-width:1240px;margin:0 auto;padding:clamp(4rem,8vw,7rem) var(--gutter) 0;
  scroll-margin-top:9rem}
/* NOTE: there is deliberately no `.pr-sec:last-of-type` rule here. The last <section>
   in <main> is .pr-close, which is not a .pr-sec, so such a selector matches nothing —
   that is why the Press Kit used to run straight into the closing rule. The gap belongs
   to .pr-close, and it is set in its own `padding` shorthand further down (putting a
   `padding-top` here instead was the bug: that shorthand comes later and reset it). */
.pr-sec__head{display:flex;align-items:flex-end;gap:clamp(1.2rem,3vw,2.4rem);
  padding-bottom:1.4rem;margin-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(201,162,75,.16)}
.pr-sec__num{font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(2.4rem,5vw,3.6rem);line-height:.8;color:var(--accent);opacity:.65;flex:0 0 auto}
.pr-sec__ttl{font-family:var(--display);font-weight:600;line-height:1.05;
  font-size:clamp(1.6rem,3.2vw,2.5rem);color:var(--bone)}
.pr-sec__ttl em{display:block;font-size:.4em;font-style:italic;font-weight:500;
  color:var(--ash-dim);margin-top:.35rem;letter-spacing:.02em}
.pr-sec__n{margin-left:auto;font-family:var(--label);font-size:.56rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ash);white-space:nowrap;padding-bottom:.4rem}
/* full bleed, not a column parked on the left under a full-width rule */
.pr-sec__lede{margin:-1rem 0 clamp(2.2rem,4vw,3rem);
  color:var(--ash);font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.7;text-wrap:pretty}
.pr-sec__lede em{color:var(--bone-dim);font-style:italic}

/* ============================================================ THE TOP LINE */
/* The featured films of a section share ONE line above the wall — Ankit, 18 Aug: the
   two store films sit together, the four teasers run beneath them. They are the SAME
   card as the grid, only wider. A vertical film cropped into a wide hero would be a
   lie about what it is, so billing comes from scale, never from a different shape.

   `--n` is the count, set inline by press.js, so two flagged films make a 2-up and
   three make a 3-up without the number being baked in here. The row is centred and
   capped at 300px a poster: left to fill the 1240 column, two 9:16 stills become
   550px wide and 980px tall, which is taller than the viewport. */
.pr-pair{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem);
  max-width:calc(var(--n,2) * 300px + (var(--n,2) - 1) * 2.2rem);margin-inline:auto;
  padding-bottom:clamp(2.4rem,4.5vw,3.4rem);margin-bottom:clamp(2.2rem,4.5vw,3.2rem);
  border-bottom:1px solid rgba(201,162,75,.12)}
/* the extra width buys slightly bigger type — that is what makes it read as the lead */
.pr-pair .film__kind{font-size:.53rem}
.pr-pair .film__ttl{font-size:clamp(1.22rem,1.8vw,1.55rem);margin-top:.44rem}
.pr-pair .film__note{font-size:.98rem}

/* ============================================================ THE WALL */
/* 9:16 tiles, FOUR to a row at desktop. The max of the clamp is the load-bearing
   number: at 258px, four tiles plus three gaps overflow the 1096px content column
   by 18px, auto-fill drops to three, and each poster becomes 347x617 — taller than
   half the viewport. 232px is the widest value that still fits four. */
.pr-grid{display:grid;gap:clamp(1rem,2vw,1.7rem);
  grid-template-columns:repeat(auto-fill,minmax(clamp(168px,17vw,232px),1fr))}

.film{display:flex;flex-direction:column;min-width:0}

/* ---- the poster ---- */
.film__shot{position:relative;display:block;width:100%;aspect-ratio:.5625;padding:0;border:0;
  background:#0d0a0b;overflow:hidden;cursor:pointer;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.95);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}
.film__shot img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.42) contrast(1.05) brightness(.9);
  transform:scale(1.001);
  transition:filter .6s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.film__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.14);transition:box-shadow .45s}
.film__shot:hover,.film__shot:focus-visible{transform:translateY(-5px);outline:0;
  box-shadow:0 28px 54px -24px rgba(0,0,0,.95),0 0 40px -16px var(--c,var(--accent))}
.film__shot:hover img,.film__shot:focus-visible img{filter:none;transform:scale(1.055)}
.film__shot:hover::after,.film__shot:focus-visible::after{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--accent)) 62%,transparent)}
/* a film with no link yet is not a button — say so with the cursor too */
.film__shot--dead{cursor:default}
.film__shot--dead:hover{transform:none}
.film__shot--dead:hover img{transform:scale(1.001);filter:grayscale(.42) contrast(1.05) brightness(.9)}

/* the play glyph: a ring that fills on hover. Not a rounded rectangle — the
   whole site's iconography is hairline circles and blades. */
.film__play{position:absolute;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
  border:1px solid rgba(239,234,223,.5);border-radius:50%;pointer-events:none;
  display:grid;place-items:center;background:rgba(10,8,9,.34);backdrop-filter:blur(3px);
  transition:background .4s,border-color .4s,transform .5s}
.film__play::before{content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid var(--bone);
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  transition:border-left-color .4s}
.film__shot:hover .film__play{transform:scale(1.1);border-color:var(--c,var(--accent));
  background:color-mix(in srgb,var(--c,var(--accent)) 82%,#000)}
.film__shot:hover .film__play::before{border-left-color:#100b09}
.film__shot--dead .film__play{display:none}

/* ---- the no-poster plate ----
   For a film whose link arrived before its file. Deliberately typographic rather than a
   grey placeholder: it reads as a designed plate on the wall instead of a failure. */
.film__plate{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.1rem;padding:12% 14%;text-align:center;
  background:radial-gradient(circle at 50% 42%,rgba(201,162,75,.09),transparent 68%),#0d0a0b}
.film__mark{width:46%;max-width:120px;height:auto;opacity:.5;
  animation:pr-ward-turn 200s linear infinite}
.film__plate-ttl{font-family:var(--display);font-weight:600;font-size:1.12rem;
  line-height:1.2;color:var(--bone-dim)}
.film__shot:hover .film__mark{opacity:.75}

/* a corner tag on the six films that have to open on Instagram, so the poster is honest
   about where the click goes before you click it */
.film__out{position:absolute;top:.55rem;left:.6rem;z-index:2;pointer-events:none;
  font-family:var(--label);font-size:.42rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);padding:.3em .5em;background:rgba(6,5,5,.6);backdrop-filter:blur(4px);
  border:1px solid rgba(201,162,75,.24);opacity:.8;transition:opacity .35s,background .35s}
.film__shot:hover .film__out{opacity:1;background:color-mix(in srgb,var(--c,var(--accent)) 72%,#000)}

.film__dur{position:absolute;bottom:.55rem;right:.6rem;z-index:2;pointer-events:none;
  font-family:var(--label);font-size:.46rem;letter-spacing:.14em;color:var(--bone);
  padding:.3em .55em;background:rgba(6,5,5,.66);backdrop-filter:blur(4px);
  border:1px solid rgba(201,162,75,.26)}

/* ---- the caption ---- */
.film__say{padding-top:.95rem;flex:1 1 auto;display:flex;flex-direction:column}
.film__kind{display:block;font-family:var(--label);font-size:.48rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c,var(--accent))}
.film__ttl{margin-top:.34rem;font-family:var(--display);font-weight:600;
  font-size:1.16rem;line-height:1.16;color:var(--bone)}
.film__note{margin-top:.42rem;font-size:.92rem;line-height:1.55;color:var(--ash)}
.film__note em{color:var(--bone-dim);font-style:italic}

/* ---- the two platforms ---- */
.film__go{margin-top:auto;padding-top:.9rem;display:flex;flex-wrap:wrap;gap:.45rem}
.pgo{display:inline-flex;align-items:center;gap:.5em;padding:.44rem .72rem;
  font-family:var(--label);font-size:.47rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);border:1px solid rgba(201,162,75,.2);background:rgba(255,255,255,.016);
  transition:color .32s,border-color .32s,background .32s,gap .32s}
.pgo svg{width:12px;height:12px;flex:0 0 auto;fill:currentColor}
.pgo:hover{color:var(--bone);border-color:var(--c,var(--accent));
  background:color-mix(in srgb,var(--c,var(--accent)) 13%,transparent);gap:.8em}
/* the honest state while a link is still missing — a label, not a dead button */
.film__soon{font-family:var(--label);font-size:.46rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-dim);opacity:.6;padding:.44rem 0;
  display:inline-flex;align-items:center;gap:.55em}
.film__soon::before{content:"";width:5px;height:5px;background:var(--ash-dim);
  transform:rotate(45deg);flex:0 0 auto}

/* ============================================================ THE RECORD
   Interviews and awards are the same object — an outside voice, dated, with a
   link — so they share one row component and differ only in what is emphasised. */
.pr-list{display:grid;gap:0;border-top:1px solid rgba(201,162,75,.14)}
.rec{position:relative;display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.4rem);align-items:baseline;
  padding:clamp(1.3rem,2.4vw,1.9rem) 0;border-bottom:1px solid rgba(201,162,75,.14);
  transition:background .35s}
.rec:hover{background:rgba(255,255,255,.017)}

/* ---- the whole row is the click target ----
   Done with a stretched pseudo-element on the title's own anchor, NOT by wrapping the
   row in an <a>. The award's note contains a link of its own, and a nested <a> is
   invalid HTML — the parser closes the outer one early and shatters the grid. This way
   there is one anchor per destination, the row is fully clickable, and any other link
   inside just needs to sit above the overlay. */
.rec__ttl a{color:inherit}
.rec__ttl a::after{content:"";position:absolute;inset:0;z-index:1}
.rec__sub a,.rec__go{position:relative;z-index:2}
.rec__who{min-width:0}
.rec__k{display:block;font-family:var(--label);font-size:.46rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.34rem}
.rec__outlet{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.2;
  color:var(--bone-dim)}
.rec__body{min-width:0}
.rec__ttl{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1.8vw,1.5rem);
  line-height:1.22;color:var(--bone);transition:color .3s}
.rec:hover .rec__ttl{color:var(--accent)}
/* the stamp must shrink-wrap; it is the only inline-block in a grid cell and a stray
   width:100% here is what made "WINNER" a full-width bar */
.rec__stamp{width:-moz-fit-content;width:fit-content}
/* standing + division on one line: the result is stamped, the division is plain, so the
   eye reads "Winner" first and the category as its qualifier */
.rec__badges{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.5rem}
.rec__badges .rec__stamp{margin-top:0}
.rec__cat{font-family:var(--label);font-size:.46rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash)}
.rec__sub a{color:var(--bone-dim);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);transition:color .3s}
.rec__sub a:hover{color:var(--accent)}
.rec__quote{margin-top:.5rem;font-style:italic;font-size:1rem;line-height:1.5;
  color:var(--ash);max-width:62ch}
.rec__quote::before{content:"\201C"}
.rec__quote::after{content:"\201D"}
.rec__sub{margin-top:.4rem;font-size:.92rem;color:var(--ash-dim);line-height:1.5}
.rec__when{font-family:var(--label);font-size:.52rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-dim);white-space:nowrap;text-align:right}
.rec__go{display:inline-flex;align-items:center;gap:.5em;margin-top:.6rem;
  font-family:var(--label);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash);transition:color .3s,gap .3s}
/* .rec__go is a <span> — the whole row is the anchor, so it lights from the row */
.rec:hover .rec__go{color:var(--accent);gap:.85em}
/* ---- the empty state ----
   page.css's .pg-soon__box is a 58ch panel, which was right for a stub page whose
   whole body was that panel. Here it sits under a full-width section rule, and a
   narrow box under a full-width rule reads as a layout fault (Ankit's note of
   17 Aug). So it keeps the panel's ground and runs the paragraphs as columns. */
.pr-soon{max-width:none;display:flex;flex-wrap:wrap;
  gap:clamp(1.4rem,3.5vw,3rem);align-items:flex-start}
.pr-soon .pg-soon__k{width:100%}
.pr-soon p{flex:1 1 24rem;max-width:54ch}
.pr-soon p + p{margin-top:0}
.pr-soon a{color:var(--bone-dim);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent);transition:color .3s}
.pr-soon a:hover{color:var(--accent)}

/* the standing on an award reads as a stamp, not as body copy */
.rec--award .rec__k{color:var(--copper)}
.rec__stamp{display:inline-block;margin-top:.5rem;padding:.3em .7em;
  font-family:var(--label);font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);border:1px solid color-mix(in srgb,var(--copper) 45%,transparent);
  background:color-mix(in srgb,var(--copper) 9%,transparent)}

/* ============================================================ WHAT READERS POSTED
   Links with no artwork and no quote behind them (see press-data.js for why), so the
   design leans into being an index: three columns of grouped links, dense and quiet,
   rather than ten empty cards. */
.pr-social{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(240px,26vw,320px),1fr));
  gap:clamp(1.4rem,3vw,2.6rem)}
.rgrp__top{display:flex;align-items:baseline;gap:.8rem;padding-bottom:.7rem;margin-bottom:.9rem;
  border-bottom:1px solid color-mix(in srgb,var(--c,var(--accent)) 30%,transparent)}
.rgrp__ttl{font-family:var(--display);font-weight:600;font-size:1.14rem;line-height:1.2;
  color:var(--bone)}
.rgrp__n{margin-left:auto;font-family:var(--label);font-size:.48rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c,var(--accent));white-space:nowrap}
/* Numbered, and laid out in a wrapping row rather than stacked. Five links that all
   said "READER POST" down a column read as one thing repeated; numbered chips read as
   a count you can scan. The book name lives in each link's aria-label, so the number
   is never the only thing a screen reader gets. */
.rgrp__row{display:flex;flex-wrap:wrap;gap:.4rem}
.rpost{display:inline-flex;align-items:center;gap:.45em;padding:.46rem .62rem;
  font-family:var(--label);font-size:.52rem;letter-spacing:.12em;
  color:var(--ash);border:1px solid rgba(201,162,75,.16);background:rgba(255,255,255,.014);
  transition:color .3s,border-color .3s,background .3s}
.rpost svg{width:12px;height:12px;flex:0 0 auto;fill:currentColor;opacity:.7}
.rpost:hover{color:var(--bone);border-color:var(--c,var(--accent));
  background:color-mix(in srgb,var(--c,var(--accent)) 14%,transparent)}
.rpost:hover svg{opacity:1}

/* not reviews — the music found rather than shown. Two up, because they are a pair:
   same café, same album, different track. */
.rwild{margin-top:clamp(2.4rem,5vw,3.6rem)}
.rwild__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(260px,30vw,420px),1fr));
  gap:clamp(.8rem,2vw,1.4rem)}
.rwild__item{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.3rem);
  padding:clamp(1rem,2.2vw,1.4rem);border:1px solid rgba(201,162,75,.16);
  background:rgba(255,255,255,.014);transition:border-color .35s,background .35s}
.rwild__item:hover{border-color:var(--accent);background:rgba(255,255,255,.035)}
.rwild__item > svg{width:20px;height:20px;flex:0 0 auto;fill:var(--accent);opacity:.8}
.rwild__say{min-width:0}
.rwild__say b{display:block;font-family:var(--display);font-weight:600;font-size:1.14rem;
  line-height:1.2;color:var(--bone)}
/* DIRECT child only — the note itself contains an <em> for the album title, and an
   unscoped `.rwild__say em` made that inner one display:block too, breaking one
   sentence onto three lines */
.rwild__say > em{display:block;margin-top:.28rem;font-size:.95rem;line-height:1.55;
  color:var(--ash);font-style:normal}
.rwild__say > em em{display:inline;color:var(--bone-dim);font-style:italic}
.rwild__arw{margin-left:auto;flex:0 0 auto;color:var(--ash-dim);transition:transform .3s,color .3s}
.rwild__item:hover .rwild__arw{color:var(--accent);transform:translateX(4px)}

/* ============================================================ THE PRESS KIT */
.kit{display:grid;gap:clamp(2.6rem,5vw,4rem)}
.kit__sub{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.4rem}
.kit__sub h3{font-family:var(--label);font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);flex:0 0 auto;font-weight:500}
.kit__sub span{font-size:.94rem;font-style:italic;color:var(--ash-dim);line-height:1.4}
.kit__sub::after{content:"";flex:1 1 auto;height:1px;background:rgba(201,162,75,.16)}

/* covers reuse the author page's .work rhythm, with a download affordance */
.kit-covers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.8rem,2vw,1.5rem)}
.kit-covers .work__cover::before{content:"";position:absolute;inset:0;z-index:2;
  background:rgba(6,5,5,.55);opacity:0;transition:opacity .4s}
.kit-covers .work:hover .work__cover::before{opacity:1}
.kit-covers .work__cover svg{position:absolute;z-index:3;top:50%;left:50%;
  width:26px;height:26px;margin:-13px 0 0 -13px;fill:none;stroke:var(--bone);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .4s,transform .4s}
.kit-covers .work:hover .work__cover svg{opacity:1;transform:translateY(2px)}

/* ============================================================ NO HOVER = NO AFFORDANCE
   Ankit, 21 Aug: *"no mouseover in mobile"*, applied across the site. Gated on `hover:none`, not on a
   width: this is a question about the INPUT. A tablet and a touch laptop lose a hover reveal exactly
   the way a phone does, and a narrow desktop window does not lose it at all.
   The line drawn here is **information vs decoration**. A caption, a title, the only sign that a
   thing is downloadable — those come back. Colour washes, scale nudges and opacity lifts on things
   that are already visible stay hover-only, because making every one of them permanent flattens the
   design rather than fixing anything. */
@media(hover:none){
  /* each cover is an `<a download>` and the icon is the ONLY thing that says so — the roman numeral
     and title below it do not. So the icon comes back, but the full-cover scrim behind it does NOT:
     that scrim exists to make the icon legible during a hover, and leaving it on would permanently
     darken all six covers. A drop-shadow does the same job for one 26px glyph. */
  .kit-covers .work__cover svg{opacity:.92;filter:drop-shadow(0 1px 3px rgba(0,0,0,.92))}
}

.kit-marks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.6rem,1.6vw,1.4rem)}
.mark{position:relative;display:block;aspect-ratio:1;padding:14%;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.035),transparent 70%);
  transition:background .5s}
.mark img{width:100%;height:100%;object-fit:contain;opacity:.78;
  transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.3,1)}
.mark::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.12);transition:box-shadow .45s}
.mark:hover{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%)}
.mark:hover img{opacity:1;transform:scale(1.06)}
.mark:hover::after{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.mark__cap{position:absolute;left:0;right:0;bottom:.45rem;text-align:center;pointer-events:none;
  font-family:var(--label);font-size:.45rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash-dim);transition:color .4s}
.mark:hover .mark__cap{color:var(--accent)}

/* ---- the portrait, beside the boilerplate ---- */
.kit-about{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3rem);align-items:start}
/* the boilerplate column is far taller than the photograph, so the photograph
   rides down with it rather than leaving 500px of nothing beside the text */
.kit-shot{position:sticky;top:8.5rem;display:block}
.kit-shot img{width:100%;height:auto;filter:grayscale(1) contrast(1.06) brightness(.92);
  transition:filter .8s ease;box-shadow:0 30px 60px -28px rgba(0,0,0,.95)}
.kit-shot:hover img{filter:grayscale(.3) contrast(1.02) brightness(1)}
.kit-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.22)}
.kit-shot figcaption{margin-top:.7rem;font-family:var(--label);font-size:.5rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim);text-align:center}

/* Multi-column, not a grid. The four blocks are wildly different heights (three
   lines against twenty), so a two-track grid leaves a hole under the short ones —
   columns pack them instead. It also stops each panel being 800px wide with a
   500px reading measure inside it and 300px of nothing to the right. */
.kit-text{columns:2;column-gap:1rem}
.boiler{break-inside:avoid;margin-bottom:1rem;
  border:1px solid rgba(201,162,75,.16);background:rgba(255,255,255,.014);
  padding:clamp(1.1rem,2.4vw,1.6rem);transition:border-color .4s}
.boiler:hover{border-color:rgba(201,162,75,.3)}
.boiler__top{display:flex;align-items:baseline;gap:.9rem;margin-bottom:.8rem}
.boiler__k{font-family:var(--label);font-size:.52rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent)}
.boiler__n{font-size:.88rem;font-style:italic;color:var(--ash-dim)}
.boiler__body{white-space:pre-line;color:var(--ash);font-size:1rem;line-height:1.68;max-width:66ch}
.boiler__copy{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:.5em;
  padding:.34rem .66rem;font-family:var(--label);font-size:.45rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);cursor:pointer;
  border:1px solid rgba(201,162,75,.2);background:transparent;
  transition:color .3s,border-color .3s,background .3s}
.boiler__copy svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.boiler__copy:hover{color:var(--bone);border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.boiler__copy.is-done{color:var(--accent);border-color:var(--accent)}

/* This sits INSIDE the third .kit child, so the parent's grid `gap` never applies to it
   and without a margin its rule butted straight up against the boilerplate panel above.
   It runs full width in two columns rather than as a 70ch column parked on the left:
   full width was Ankit's call, and columns are what keep the measure readable at 1096px. */
.kit-ask{margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(201,162,75,.14);
  padding-top:clamp(1.4rem,2.6vw,1.9rem);
  color:var(--ash-dim);font-size:.98rem;line-height:1.75;max-width:none}
.kit-ask a{color:var(--bone-dim);border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  transition:color .3s}
.kit-ask a:hover{color:var(--accent)}

/* ============================================================ THE PLAYER
   Click-to-load: no YouTube iframe exists until someone asks for one, so the
   page makes no third-party request on load. The <iframe> is created on open
   and destroyed on close — leaving it parked would keep the connection alive. */
.player{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(5,4,4,.94);backdrop-filter:blur(20px) saturate(.85)}
.player.is-open{display:grid;place-items:center}
body.playing{overflow:hidden}
/* 9:16, held inside the viewport on whichever axis runs out first. 80vh, not 86 —
   the caption rail below it needs the remaining strip. */
.player__box{position:relative;aspect-ratio:.5625;height:min(80vh,1000px);
  max-width:92vw;background:#000;box-shadow:0 40px 120px -40px rgba(0,0,0,1)}
.player__box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* There is deliberately no Instagram variant of this box any more. The embed was tried,
   cropped to hide its white comment area, and then dropped outright (Ankit, 18 Aug):
   six reels had no player in the embed at all, and the rest needed a second click inside
   Instagram's own chrome. Films without a YouTube id now open on Instagram instead. */
/* anchored to the overlay, so it cannot be pushed off-screen by a tall box */
.player__cap{position:absolute;left:0;right:0;bottom:clamp(1rem,2.5vh,1.9rem);
  padding:0 clamp(1rem,4vw,3rem);text-align:center;
  font-family:var(--label);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ash-dim)}
.player__cap b{color:var(--bone-dim);font-weight:500}
.player .vbtn{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border:1px solid rgba(201,162,75,.18);
  background:rgba(10,8,9,.55);color:var(--bone-dim);cursor:pointer;backdrop-filter:blur(8px);
  top:clamp(.8rem,2vw,1.4rem);right:clamp(.8rem,2vw,1.4rem);
  transition:color .3s,border-color .3s,background .3s}
.player .vbtn:hover{color:var(--bone);border-color:var(--accent);background:rgba(10,8,9,.85)}
.player .vbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================ CLOSING */
/* the top value is the gap under the Press Kit — it has to live in this shorthand, not
   in a separate padding-top higher up, or this rule resets it back to 0 */
.pr-close{max-width:1240px;margin:0 auto;
  padding:clamp(4rem,8vw,6rem) var(--gutter) clamp(6rem,11vw,9rem)}
.pr-close__box{border-top:1px solid rgba(201,162,75,.16);padding-top:clamp(2rem,4vw,3rem);
  display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,3.4rem);align-items:flex-start}
.pr-close__box p{flex:1 1 26rem;max-width:56ch;color:var(--ash);font-size:1.02rem;line-height:1.72}
.pr-close__box p em{color:var(--bone-dim);font-style:italic}

/* ============================================================ RESPONSIVE */
@media(max-width:1040px){
  .pr-hero{grid-template-columns:1fr}
  .pr-hero__ward{order:-1;width:min(46%,220px)}
  .pr-pair{max-width:none}
  .kit-covers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kit-about{grid-template-columns:1fr}
  .kit-shot{position:static;width:min(58%,240px)}
  .kit-text{columns:1}
  .rec{grid-template-columns:minmax(0,1fr) auto}
  .rec__who{grid-column:1/-1}
}
@media(max-width:760px){
  .pr-index{top:calc(44px + 1.4rem)}  /* 44px mark below 760px */
  .pr-sec,.pr-close{padding-left:1.25rem;padding-right:1.25rem}
  .pr-sec__head{flex-wrap:wrap;gap:.9rem}
  .pr-sec__n{margin-left:0;width:100%;padding-bottom:0}
  /* the pair and the wall become the same 2-up on a phone — a "featured" row of two
     is already as wide as the screen allows, so there is nothing left to promote */
  .pr-grid,.pr-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .kit-marks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kit-shot{width:100%}
  .rec{grid-template-columns:1fr;gap:.5rem}
  .rec__when{text-align:left}
  /* the caption is the only way to read a title on a touch device */
  .film__shot img{filter:grayscale(.22) brightness(.92)}
  .film__play{width:48px;height:48px;margin:-24px 0 0 -24px}
  .player__box{height:auto;width:92vw;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .pr-hero__ward img{animation:none}
  .film__shot,.film__shot img,.film__play,.mark img,.kit-shot img{transition:none}
  .film__shot:hover{transform:none}
  .film__shot:hover img{transform:none}
}