/* ==========================================================================
   SD MEDIA — REDESIGN LAYER
   Loaded after site.css. Everything here exists to do one of four jobs:

   1. REMOVE THE TELLS. The site read as template-built because of four
      habits: an italic-serif accent word inside every headline, an orange
      letterspaced eyebrow label above every section, rounded card containers
      around every photograph, and pill-shaped chip tags. All four go.

   2. MAKE IT VISUAL FIRST. Photographs stop being illustrations inside a
      layout and become the layout: full-bleed bands, natural-height galleries,
      asymmetric rows that let an image run to the edge of the page.

   3. NEVER CROP A STILL. Every image carries its true ratio as --ar (see
      tools/stamp_geometry.py). Containers adopt that ratio instead of imposing
      one, so object-fit has nothing left to cut away.

   4. KEEP EVERY FACT. Nothing is deleted from the page. The eyebrow labels,
      credits, formats, territory lists and episode data all survive — they
      change voice, from decorative orange caps to mono metadata, which is the
      register a production company actually writes in (call sheets, camera
      reports, delivery specs).

   This is a layer rather than a rewrite of site.css so that it can be removed
   in one line if a direction needs reversing.
   ========================================================================== */

/* ---------- 1. TYPE: one family, plus a mono voice for metadata ----------
   Instrument Serif is gone entirely — the italic-serif accent word is the
   single most recognisable generated-site signature. Inter is gone too:
   Archivo carries body copy perfectly well and one family reads as a
   deliberate choice rather than a picked-from-a-list pairing. */
:root{
  --f-display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-serif:"Archivo",-apple-system,sans-serif;         /* neutralised */
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:0;                                                /* no rounded corners */
}
body{font-family:var(--f-body);letter-spacing:-.006em}

/* The width axis is what gives headlines a broadcast title-card presence
   without introducing a second typeface. */
h1,h2,h3,h4,.d1,.d2,.d3,.d4{
  font-stretch:112%;
  font-variation-settings:"wdth" 112;
  letter-spacing:-.028em;
}

/* Kill the serif-italic accent word wherever it appears. Any <em> left in a
   headline now simply reads as part of the headline. */
h1 em,h2 em,h3 em,
.masthead h1 em,.phero h1 em,.sechead h2 em,.d1 em,.d2 em,.d3 em{
  font-family:inherit !important;
  font-style:normal !important;
  font-weight:inherit !important;
  color:inherit !important;
  letter-spacing:inherit !important;
  /* site.css forced text-transform:none on these so the serif word would sit
     in sentence case inside an uppercase headline. Without the serif that
     just looks like a casing mistake, so the word rejoins its headline. */
  text-transform:inherit !important;
}

/* IMPORTANT EXCEPTION: in body copy, <em> marks the TITLE OF A WORK —
   Maximum Foodie, Titan, Road Less Traveled, the Antonia Maersk. Italicising
   a title is correct typography, not decoration, and flattening it would
   destroy meaning. Those stay italic; only the display face changes. */
p em,li em,.lede em,.body-muted em,.standfirst em,blockquote em,figcaption em,td em{
  font-family:var(--f-body) !important;
  font-style:italic !important;
  color:inherit;
}

/* The standfirst was set in italic serif too. Same treatment, but kept
   visually distinct by weight and colour rather than by a second face. */
.standfirst,.serif-quote{
  font-family:var(--f-body) !important;
  font-style:normal !important;
  font-weight:300;
  letter-spacing:-.02em;
}

/* ---------- 2. EYEBROWS BECOME METADATA ----------
   The label keeps every word it had. What changes is that it stops shouting
   in brand orange with a decorative rule and starts behaving like the header
   line on a call sheet. */
.eyebrow{
  font-family:var(--f-mono) !important;
  font-size:.66rem !important;
  font-weight:400 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase;
  color:var(--muted-2) !important;
}
.sechead .eyebrow{font-size:.66rem !important;letter-spacing:.09em !important}
/* the 32px orange dash that preceded every single section heading */
.sechead .eyebrow::before{display:none !important}
/* one accent survives: the live/in-production dot, which carries real status */
.eyebrow--yt::before{display:inline-block !important}

/* ---------- 3. NO CARDS ----------
   Containers stop being objects. No fill, no border, no radius — the
   photograph sits on the page. */
*,*::before,*::after{border-radius:0 !important}
.titlecard,.fd__f,.bio__fig,.gal figure,.fcar__fig,.ttl__fig{
  background:transparent !important;
  border:0 !important;
}
.titlecard{border-bottom:1px solid var(--line) !important}
.titlecard:hover{border-bottom-color:var(--brass) !important}

/* Chip tags read as a generated component. Kept as text — the territory
   names are real information — but stripped of the pill. */
.fldc__chip,.chip,.tagpill{
  background:transparent !important;border:0 !important;padding:0 !important;
  font-family:var(--f-mono) !important;font-size:.6rem !important;
  letter-spacing:.1em !important;color:var(--muted-2) !important;
}
/* The highlighter bar over a sentence looked like a rendering fault. */
.mark{background:transparent !important;color:var(--text) !important;padding:0 !important}

/* ---------- 4. IMAGERY: THE BOX ADOPTS THE PICTURE ----------
   --ar is stamped onto every <img> from the file's real pixel dimensions.
   Applying it to the image means the container is, by construction, the same
   shape as the photograph — so object-fit:cover has nothing to discard.
   Fallback 16/9 only ever applies to a remote image we cannot measure. */
.gal img,.fd__f img,.fcar__fig img,.fldc__img img,.bio__fig img,
.titlecard__fig img,.ttl__fig img,.rail__item img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:var(--ar,16/9) !important;
  object-fit:cover;
  object-position:center;
}

/* Parents that used to impose a ratio or absolutely position the image must
   let go of both, or the child's new ratio has no effect. */
.gal figure,.fd__f,.fcar__fig,.bio__fig,.ttl__fig,.titlecard__fig,.fldc,.fldc__img{
  aspect-ratio:auto !important;
  position:relative !important;
  inset:auto !important;
  min-height:0 !important;
  overflow:hidden;
}
.fldc__img img,.ttl__fig img{position:static !important}
.gal .g-4,.gal .g-6,.gal .g-8,.gal .g-12{aspect-ratio:auto !important}

/* Galleries become masonry columns. Mixed portrait and landscape stills sit
   together at their own proportions instead of being forced into a grid that
   decapitates the verticals. */
.gal,.fd__grid,.libwall__grid{
  display:block !important;
  column-gap:clamp(10px,1.4vw,18px);
  columns:3;
}
.gal > *,.fd__grid > *,.libwall__grid > *{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  display:block;
  width:100%;
  margin:0 0 clamp(10px,1.4vw,18px);
  grid-column:auto !important;
}
@media(max-width:1100px){.gal,.fd__grid,.libwall__grid{columns:2}}
@media(max-width:560px){.gal,.fd__grid,.libwall__grid{columns:1}}

/* ---------- 5. FULL-BLEED MOMENTS ----------
   One image per page is allowed to own the whole viewport width. */
.bleed{width:100vw;margin-left:50%;transform:translateX(-50%);max-width:none}
.bleed img{width:100%;height:auto;display:block}

/* ---------- 6. THE FIELD CARD ----------
   These were 3:4 boxes holding 16:9 photographs and losing 58% of every
   frame. Now the picture sets the height and the caption sits beneath it,
   which is also how a contact sheet reads. */
.fldc{display:block !important;overflow:visible !important}
.fldc::after{display:none !important}
.fldc__img{display:block !important;overflow:hidden}
.fldc__txt{
  position:static !important;display:block;padding:.7rem 0 0;
  background:none !important;
}
.fldc__txt b{display:block;font-size:.95rem;letter-spacing:-.01em}
.fldc__meta,.fldc__n{
  display:block;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);
}
.fcar--fld{grid-auto-columns:minmax(210px,240px)}

/* ---------- 7. CREDIT LINES ----------
   Commissioner, partner, distributor, volume, format — the facts a buyer
   scans for. Set in mono so they read as specification, not decoration. */
.facts__row,.stat__l,.csblock__k,.route__k,.eplist b,.ftr__legal,
.crumb,.subnav,.titlestrip b{
  font-family:var(--f-mono) !important;
  letter-spacing:.07em !important;
}
.stat__l,.csblock__k{text-transform:uppercase;font-size:.62rem !important;color:var(--muted-2) !important}

/* ---------- 8. BUTTONS ----------
   Square, quiet, and secondary to the imagery. */
.btn{
  border-radius:0 !important;
  font-family:var(--f-mono) !important;
  font-size:.68rem !important;
  letter-spacing:.11em !important;
  text-transform:uppercase;
  padding:.85rem 1.3rem !important;
}
.btn--primary:hover{transform:none !important}

/* ---------- 9. NAVIGATION ---------- */
.hdr__nav a,.subnav a,.subnav__sib{
  font-family:var(--f-mono) !important;
  font-size:.68rem !important;
  letter-spacing:.09em !important;
}

/* ---------- 10. MOBILE ----------
   Two things break small screens on image-led layouts: a full-bleed element
   that introduces horizontal scroll, and type that was sized for a desktop
   headline. Both are handled here rather than per-component. */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:640px){
  h1,.d1{font-size:clamp(1.9rem,8.4vw,2.9rem) !important;line-height:1.02}
  h2,.d2{font-size:clamp(1.5rem,6.6vw,2.2rem) !important;line-height:1.06}
  .eyebrow{font-size:.6rem !important}
  .btn{width:100%;justify-content:center;min-height:46px}
  .sechead{grid-template-columns:1fr !important;gap:.9rem !important}
  .sechead__link{justify-self:start}
  /* every interactive target clears the 44px minimum */
  .hdr__nav a,.subnav a,.ftr__list a{display:inline-block;min-height:44px;line-height:44px}
}

/* ---------- 11. MOTION ----------
   Restrained, and switched off entirely for anyone who asks. */
@media(prefers-reduced-motion:no-preference){
  .gal img,.fd__f img,.titlecard__fig img,.fcar__fig img{
    transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .5s;
  }
  .gal figure:hover img,.fd__f:hover img,.titlecard:hover .titlecard__fig img{
    transform:scale(1.03);
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}


/* ---------- 12. LATE FIXES FOUND IN VERIFICATION ---------- */

/* The case-study subnav is a long single row. On narrow viewports it ran off
   the right edge with no way to reach the last item. It now scrolls, with the
   scrollbar hidden and momentum on touch. */
/* The scroll belongs on .subnav__sib (the sibling-page list), which already
   has it — NOT on .subnav__in, which is the flex row holding the breadcrumb
   AND that list. Putting it on the wrapper made the two interleave on a
   phone. On narrow screens they simply stack. */
.subnav__sib{flex:none;min-width:0;-webkit-overflow-scrolling:touch}
.subnav__sib a{flex:none;white-space:nowrap}
@media(max-width:760px){
  .subnav__in{flex-direction:column;align-items:stretch;gap:.5rem}
  .crumb{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .crumb::-webkit-scrollbar{display:none}
  .subnav__sib{width:100%}
}

/* Uppercase display headings set at width 112 need a fraction more leading
   than the 0.98 site.css gives them, or ascenders and descenders collide on
   the two- and three-line wraps. */
h1,h2,.d1,.d2{line-height:1.02}
.d1{letter-spacing:-.032em}

/* The reel is a VIDEO player, not a photograph, so 16:9 is the right shape and
   it keeps it. An earlier revision bent the container to the poster's ratio
   instead; because the iframe, the video layer and the sound toggle are all
   absolutely positioned inside .reel, removing its height left them with no
   box and the sound button escaped into the masthead.
   The poster is instead cut to 16:9 at source (rlt-ijen-hero-*.webp, offset
   0.42 so the figure on the crater rim is not clipped), so the frame matches
   the player exactly and nothing is cropped at render time. */
.reel{aspect-ratio:16/9 !important;overflow:hidden !important;position:relative !important}
.reel > img{position:absolute !important;inset:0 !important;width:100% !important;
  height:100% !important;aspect-ratio:auto !important;object-fit:cover}

/* ---------- 13. THE LAST CROPS ----------
   The crop audit took the site from 49 offending image instances down to 23.
   These close the remaining ones. */

/* The Instagram wall was a hard square grid (aspect-ratio:1) holding 16:9
   photographs — 44% of every frame discarded. Squares are a nod to Instagram
   itself, but not at that price. The wall keeps its grid; the tiles keep
   their own proportions. */
.fgrid img,.socstrip img,.soc img{
  width:100% !important;height:auto !important;
  aspect-ratio:var(--ar,16/9) !important;object-fit:cover;
}
.fgrid{align-items:start}

/* Full-bleed bands were locked to 21:9. A cinematic letterbox is a real
   design decision, but applied to a 1.6:1 photograph it was removing 31% —
   including, on the Antarctic frame, most of the sky the shot is about.
   Bands now take the picture's own shape, with a viewport cap so a tall
   image can still never swallow the whole screen. */
.bandfig img{
  height:auto !important;
  aspect-ratio:var(--ar,2/1) !important;
  /* The cap stops a tall image swallowing the screen. At 82vh it was still
     clipping 18% off the Antarctic band; 92vh brings that under 8% while
     keeping the guard. */
  max-height:92vh;
  object-fit:cover;
  object-position:center;
}
.bandfig{display:block}
@media(max-width:760px){
  .bandfig img{aspect-ratio:var(--ar,16/9) !important;max-height:none}
}

/* .fd__f--tall existed to force a 3:4 box onto selected frames. Now that every
   image carries its real ratio the modifier has nothing left to do, and
   leaving it in would reintroduce a crop on whichever stills still use it. */
.fd__f--tall img{aspect-ratio:var(--ar,3/4) !important}

/* ---------- 14. FINAL PASS ----------
   Three families of container were still imposing a ratio. */

/* The work-index cards and the homepage production cards. A 16:9 or 16:10 box
   is a fine default until the photograph is 4:3 or 3:2, at which point the
   sides or the top go. */
.wcard__fig,.prod__fig,.rail__item,.ttl__fig{aspect-ratio:auto !important}
.wcard__fig img,.prod__fig img{
  width:100% !important;height:auto !important;
  aspect-ratio:var(--ar,16/9) !important;object-fit:cover;
}
/* Cards sat in a fill with a border, which is the card look the redesign is
   removing anyway. The photograph now sits directly on the page. */
.wcard{background:transparent !important;border:0 !important}
.wcard:hover{border:0 !important}
.wcard__fig img{filter:none !important}

/* The studio crew strip: 9:16 phone verticals in a 3:4 box. They are portrait
   either way, so nothing is gained by forcing the difference. */
.crew__f{aspect-ratio:auto !important}
.crew__f img{
  width:100% !important;height:auto !important;
  aspect-ratio:var(--ar,3/4) !important;object-fit:cover;
}

/* The tag that floated on top of a card image needs a ground of its own now
   that the card fill is gone. */
.wcard__tag{background:rgba(11,11,12,.9) !important;font-family:var(--f-mono) !important;
  font-size:.6rem !important;letter-spacing:.1em !important}

/* ==========================================================================
   15. ACCESSIBILITY FLOOR
   The responsive sweep caught two regressions introduced by this redesign
   itself. Mono metadata at .6rem renders at 9.6px, which is below the point
   at which uppercase letterspaced text stays readable — and it was applied
   in 90+ places. And a set of standalone links sat at 35-38px tall, short of
   the 44px minimum touch target.

   Nothing here changes the look at desktop width. It sets a floor.
   ========================================================================== */

/* --- Type floor: no text on this site renders below 11px, ever. --- */
.eyebrow{font-size:max(11.5px,.7rem) !important}
.fldc__chip,.chip,.tagpill,.fldc__meta,.fldc__n,.wcard__tag{
  font-size:max(11px,.66rem) !important;
}
.stat__l,.csblock__k{font-size:max(11px,.66rem) !important}
.btn,.hdr__nav a,.hdr__cta,.subnav a,.subnav__sib{font-size:max(11.5px,.7rem) !important}
.facts__row,.eplist b,.ftr__legal,.crumb{font-size:max(11px,.68rem) !important}
@media(max-width:640px){
  /* the old mobile rule pushed eyebrows down to .6rem — 9.6px */
  .eyebrow{font-size:max(11.5px,.68rem) !important}
}

/* --- Touch targets ---
   Applied to standalone, navigational and list links only. Inline links
   inside a paragraph are deliberately excluded: padding them to 44px would
   break the line rhythm of body copy, and WCAG exempts links whose target is
   inline text in a sentence. */
@media(pointer:coarse),(max-width:640px){
  a.scr,a.eml,a.croute__go,a.titlecard__more,a.sechead__link,
  .hdr__nav a,.hdr__cta,.hdr__logo,.subnav__sib a,
  .ftr__list a,.ftr__soc a,.rail__item,.route,.btn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  a.scr,.ftr__list a,.subnav__sib a{padding-block:.5rem}
  .ftr__soc a{min-width:44px;justify-content:center}
  button:not(.hdr__burger){min-height:44px;min-width:44px}
}

/* The episode list on the screening room is the densest set of links on the
   site — 138 of them. Given it up-sizes on touch, it needs its own rhythm so
   the rows do not run together. */
@media(pointer:coarse),(max-width:640px){
  a.scr{width:100%;border-bottom:1px solid var(--line-soft)}
}

/* The section-heading eyebrow had its own size rule that undercut the floor. */
.sechead .eyebrow{font-size:max(11.5px,.7rem) !important}

/* Footer and inline standalone links that still sat under 44px on touch. */
@media(pointer:coarse),(max-width:640px){
  .ftr a,.ftr__h a,.field__all,.croute a,.sechead__link,.lede a{
    min-height:44px;display:inline-flex;align-items:center;
  }
}

/* ---------- 16. THE LAST PILLS ----------
   .destrip (territory strips on the case studies) was the one chip component
   my earlier selectors missed — it uses its own class, not .chip. Same
   treatment: the place names are real information and stay, the pill goes. */
.destrip{display:flex;flex-wrap:wrap;gap:1.1rem;border:0 !important;background:none !important}
.destrip span{
  background:transparent !important;border:0 !important;padding:0 !important;
  font-family:var(--f-mono) !important;font-size:max(11px,.66rem) !important;
  letter-spacing:.09em !important;text-transform:uppercase;
  color:var(--muted-2) !important;
}

/* ---------- 17. TYPE FLOOR, REMAINING CLASSES ----------
   The field-diary and footer labels carry their own sizes in site.css and sat
   between 9.6 and 10.9px. Same floor as everything else: nothing below 11px. */
.fd__genre,.fd__bts,.fd__badge,.fd__season,.fd__meta,.fcar__m,.fcar__d,
.ftr__h,.ftr__list a,.titlestrip b,.fstrip span,.eprow__c,.sgd__ec{
  font-size:max(11px,.68rem) !important;
}
.fd__genre,.fd__badge,.fd__season,.ftr__h{
  font-family:var(--f-mono) !important;letter-spacing:.08em !important;
}

/* Tablets report a coarse pointer and already get the 44px targets. This
   extends the same rule to anything under 900px regardless of pointer, so a
   small laptop window behaves too. */
@media(max-width:900px){
  a.scr,a.eml,a.croute__go,a.titlecard__more,a.sechead__link,.field__all,
  .hdr__nav a,.hdr__cta,.hdr__logo,.subnav__sib a,.ftr a,.ftr__list a,
  .ftr__soc a,.rail__item,.route,.btn{
    min-height:44px;display:inline-flex;align-items:center;
  }
}

/* ---------- 18. TYPE FLOOR, FINAL CLASSES ----------
   Last four labels sitting at 10.6–10.9px. Same rule as everything else:
   nothing on this site renders below 11px. */
.route__no,.prod__meta,.ts__tag,.titlecard__gen,.wcard__meta,.sgd__gen{
  font-size:max(11px,.7rem) !important;
  font-family:var(--f-mono) !important;
  letter-spacing:.07em !important;
}
.secbox__tab{font-size:max(11px,.7rem) !important;font-family:var(--f-mono) !important;letter-spacing:.07em !important}