/* The films section. It wears the YouTube channel's own brand ("The Marker": brick plate, river night, fall-line cream,
   brass, Rokkitt and Barlow Semi Condensed) rather than the Stoop look of the rest of the site, so it feels like walking
   into the screening room. Loaded only on /films pages, after site.css. */

@font-face{font-family:"Rokkitt";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/rokkitt-latin-wght.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-semi-condensed-latin-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-semi-condensed-latin-600.woff2) format("woff2")}

.is-films{
  --fx-brick:#c0533a; --fx-brick-deep:#a9452f; --fx-brick-dark:#8f3a28; --fx-night:#0e1c23; --fx-night-2:#16303a; --fx-night-3:#1d3c48;
  --fx-cream:#efe4cc; --fx-paper:#f7f2e7; --fx-brass:#c9a24a; --fx-brass-hi:#e0bd6a;
  --fx-ink:#1d1a16; --fx-ink-2:#4a443b; --fx-rule:rgba(239,228,204,.16);
  --fx-read-bg:var(--fx-paper); --fx-read-ink:var(--fx-ink); --fx-read-ink-2:var(--fx-ink-2); --fx-read-link:var(--fx-brick-deep); --fx-read-rule:rgba(29,26,22,.14);
  --f-fx-display:"Rokkitt",Rockwell,"Roboto Slab",Georgia,serif;
  --f-fx-label:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
}
:root[data-scheme="dark"] .is-films{--fx-read-bg:var(--fx-night-2); --fx-read-ink:#efe4cc; --fx-read-ink-2:#c9bfa8; --fx-read-link:var(--fx-brass-hi); --fx-read-rule:rgba(239,228,204,.16)}
@media (prefers-color-scheme:dark){
  :root:not([data-scheme="light"]) .is-films{--fx-read-bg:var(--fx-night-2); --fx-read-ink:#efe4cc; --fx-read-ink-2:#c9bfa8; --fx-read-link:var(--fx-brass-hi); --fx-read-rule:rgba(239,228,204,.16)}
}

/* The screening room keeps its lights down in both themes: the header and the footer take the river night too, so the change of
   brand reads as a room you walked into, not a seam. Only the write-up follows light and dark. Cream text sits on the deeper
   brick wherever it is small, which keeps it above 4.5:1. */
.is-films .top{--paper:var(--fx-night);--ink:var(--fx-cream);--ink-2:rgba(239,228,204,.78);--muted:rgba(239,228,204,.6);--line:rgba(239,228,204,.12);--line-2:rgba(239,228,204,.26);
  --accent:var(--fx-brick-deep);--accent-hi:var(--fx-brass);--accent-text:var(--fx-brass-hi);--on-accent:var(--fx-cream);--shadow:rgba(0,0,0,.55);color-scheme:dark}
.is-films .brand-rib{color:var(--fx-cream)}
.is-films .nav-a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--fx-brass)}
.is-films .foot{--paper:#0a161c;--card:#10232b;--ink:var(--fx-cream);--ink-2:rgba(239,228,204,.76);--muted:rgba(239,228,204,.55);--line:rgba(239,228,204,.12);--accent-hi:var(--fx-brass-hi);--accent-text:var(--fx-brass-hi)}
.fx{background:var(--fx-night);color:var(--fx-cream);position:relative}
.fx a{color:inherit}
.fx-sec{padding:clamp(40px,6vw,72px) 0 0}
.fx-sec:last-child{padding-bottom:clamp(56px,8vw,96px)}

/* Labels: the channel's tagline face, brass, tracked out. */
.fx-label{font-family:var(--f-fx-label);font-weight:600;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fx-brass);margin:0 0 18px;display:flex;align-items:center;gap:14px}
.fx-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--fx-brass),transparent 85%);opacity:.55}
.fx-label-ink{color:var(--fx-read-link)}
.fx-label-ink::after{background:linear-gradient(90deg,var(--fx-read-link),transparent 85%)}

/* The plate: brick, a cream inner border, concave "cartouche" corners cut with masks. */
.fx-plate,.fx-mark{--r:10px;position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:var(--fx-brick-deep);color:var(--fx-cream);
  -webkit-mask:radial-gradient(circle var(--r) at 0 0,#0000 97%,#000) 0 0/51% 51% no-repeat,radial-gradient(circle var(--r) at 100% 0,#0000 97%,#000) 100% 0/51% 51% no-repeat,radial-gradient(circle var(--r) at 0 100%,#0000 97%,#000) 0 100%/51% 51% no-repeat,radial-gradient(circle var(--r) at 100% 100%,#0000 97%,#000) 100% 100%/51% 51% no-repeat;
  mask:radial-gradient(circle var(--r) at 0 0,#0000 97%,#000) 0 0/51% 51% no-repeat,radial-gradient(circle var(--r) at 100% 0,#0000 97%,#000) 100% 0/51% 51% no-repeat,radial-gradient(circle var(--r) at 0 100%,#0000 97%,#000) 0 100%/51% 51% no-repeat,radial-gradient(circle var(--r) at 100% 100%,#0000 97%,#000) 100% 100%/51% 51% no-repeat}
.fx-plate::before,.fx-mark::before{content:"";position:absolute;inset:5px;border:2px solid var(--fx-cream);border-radius:3px;opacity:.9;pointer-events:none;
  -webkit-mask:radial-gradient(circle calc(var(--r) - 3px) at 0 0,#0000 97%,#000) 0 0/51% 51% no-repeat,radial-gradient(circle calc(var(--r) - 3px) at 100% 0,#0000 97%,#000) 100% 0/51% 51% no-repeat,radial-gradient(circle calc(var(--r) - 3px) at 0 100%,#0000 97%,#000) 0 100%/51% 51% no-repeat,radial-gradient(circle calc(var(--r) - 3px) at 100% 100%,#0000 97%,#000) 100% 100%/51% 51% no-repeat;
  mask:radial-gradient(circle calc(var(--r) - 3px) at 0 0,#0000 97%,#000) 0 0/51% 51% no-repeat,radial-gradient(circle calc(var(--r) - 3px) at 100% 0,#0000 97%,#000) 100% 0/51% 51% no-repeat,radial-gradient(circle calc(var(--r) - 3px) at 0 100%,#0000 97%,#000) 0 100%/51% 51% no-repeat,radial-gradient(circle calc(var(--r) - 3px) at 100% 100%,#0000 97%,#000) 100% 100%/51% 51% no-repeat}
.fx-plate{padding:14px 20px 12px;min-width:7.5rem}
.fx-plate-n{font-family:var(--f-fx-label);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.fx-plate-y{font-family:var(--f-fx-display);font-weight:800;font-size:2.4rem;line-height:.95;letter-spacing:-.01em}
.fx-plate-lg{--r:14px;padding:22px 28px 18px;min-width:10rem}
.fx-plate-lg .fx-plate-y{font-size:clamp(2.6rem,6vw,3.6rem)}
.fx-plate-lg .fx-plate-n{font-size:.82rem}

/* Hero */
.fx-hero{padding:clamp(48px,8vw,104px) 0 clamp(36px,5vw,56px);border-bottom:1px solid var(--fx-rule);
  background:radial-gradient(120% 90% at 85% -10%,rgba(192,83,58,.28),transparent 55%),radial-gradient(90% 70% at -10% 110%,rgba(201,162,74,.13),transparent 60%),var(--fx-night);overflow:hidden}
.fx-hero-in{position:relative}
.fx-lockup{display:flex;align-items:center;gap:12px;margin:0 0 clamp(26px,4vw,40px)}
.fx-mark{--r:7px;padding:9px 14px 7px}
.fx-mark span{font-family:var(--f-fx-display);font-weight:800;font-size:1.25rem;letter-spacing:.04em;line-height:1}
.fx-word{font-family:var(--f-fx-display);font-weight:800;font-size:1.45rem;letter-spacing:.06em;text-transform:uppercase}
.fx-h1{font-family:var(--f-fx-display);font-weight:800;font-size:clamp(2.6rem,7.4vw,6rem);line-height:.92;letter-spacing:-.015em;margin:0;max-width:15ch;text-wrap:balance}
.fx-h1-s{display:block;font-family:var(--f-fx-label);font-weight:600;font-size:clamp(.95rem,1.6vw,1.1rem);letter-spacing:.24em;text-transform:uppercase;color:var(--fx-brass);margin-bottom:18px}
.fx-lede{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;color:rgba(239,228,204,.82);max-width:58ch;margin:clamp(22px,3vw,32px) 0 0}
.fx-stats{display:flex;flex-wrap:wrap;gap:12px 44px;margin:clamp(30px,4vw,44px) 0 0;padding:20px 0 0;border-top:1px solid var(--fx-rule)}
.fx-stats div{display:flex;flex-direction:column-reverse}
.fx-stats dt{font-family:var(--f-fx-label);font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,228,204,.6)}
.fx-stats dd{margin:0;font-family:var(--f-fx-display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1;color:var(--fx-cream)}
.fx-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:clamp(28px,4vw,40px) 0 0}
.fx-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--fx-brick-deep);color:var(--fx-cream)!important;font-family:var(--f-fx-label);font-weight:600;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .2s}
.fx-btn:hover{background:var(--fx-brick-dark);transform:translateY(-1px)}
.fx-btn-ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(239,228,204,.4)}
.fx-btn-ghost:hover{background:rgba(239,228,204,.08)}
.fx-handle{font-family:var(--f-fx-label);font-weight:500;letter-spacing:.06em;color:rgba(239,228,204,.6)}
/* The newest posters, fanned out beside the headline on wide screens. */
.fx-reel{display:none}
@media (min-width:64em){
  .fx-hero-in{padding-right:min(38vw,520px)}
  .fx-reel{display:block;position:absolute;right:0;top:50%;width:min(36vw,500px);aspect-ratio:16/12;transform:translateY(-50%)}
  .fx-reel img{position:absolute;width:78%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;box-shadow:0 24px 60px -20px rgba(0,0,0,.85),0 0 0 1px var(--fx-rule)}
  .fx-reel picture:nth-child(1) img{right:0;top:4%;transform:rotate(3deg);z-index:3}
  .fx-reel picture:nth-child(2) img{left:0;top:34%;transform:rotate(-4deg);z-index:2}
  .fx-reel picture:nth-child(3) img{right:8%;bottom:0;transform:rotate(1.5deg);z-index:1;opacity:.9}
}
.fx-empty{font-family:var(--f-fx-display);font-size:1.6rem;margin:0}

/* Pictures: always 16:9, the plate drawn large when there is no poster. The picture element only picks the file; the img lays out. */
.fx picture{display:contents}
.fx-shot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:var(--fx-night-2);box-shadow:0 0 0 1px var(--fx-rule)}
.fx-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fx-noposter{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(80% 80% at 50% 40%,var(--fx-night-3),var(--fx-night-2))}
.fx-time{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:5px;background:rgba(14,28,35,.86);color:var(--fx-cream);font-family:var(--f-fx-label);font-weight:600;font-size:.84rem;letter-spacing:.04em}

/* The newest film */
.fx-feature{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center;text-decoration:none}
.fx-feature-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fx-feature .fx-plate{margin-bottom:6px}
.fx-place{font-family:var(--f-fx-label);font-weight:500;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-brass);display:block}
.fx-feature-t{font-family:var(--f-fx-display);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.fx-dek{font-size:1.06rem;line-height:1.55;color:rgba(239,228,204,.8);display:block}
.fx-go{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-family:var(--f-fx-label);font-weight:600;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-cream);border-bottom:2px solid var(--fx-brick);padding-bottom:4px}
.fx-go .fx-time{position:static;background:var(--fx-night-2)}
.fx-feature:hover .fx-shot img,.fx-card:hover .fx-shot img{transform:scale(1.035)}
.fx-feature:hover .fx-go{border-color:var(--fx-brass)}

/* Every film */
.fx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px)}
.fx-card{display:flex;flex-direction:column;gap:9px;text-decoration:none}
.fx-card-meta{display:flex;align-items:center;gap:10px;margin-top:6px}
.fx-chip{font-family:var(--f-fx-label);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px 2px;border-radius:4px;background:var(--fx-brick-deep);color:var(--fx-cream)}
.fx-card-y{font-family:var(--f-fx-display);font-weight:800;font-size:1.2rem;color:var(--fx-brass)}
.fx-card-t{font-family:var(--f-fx-display);font-weight:700;font-size:1.36rem;line-height:1.08;text-wrap:balance}
.fx-card:hover .fx-card-t{text-decoration:underline;text-decoration-color:var(--fx-brick);text-decoration-thickness:2px;text-underline-offset:4px}
.fx-card .fx-place{font-size:.8rem;color:rgba(239,228,204,.6)}
/* Three across, the last row shares out the width so a short row never leaves an empty cell: two films take half each, one
   sits in the middle. */
@media (min-width:64em){
  .fx-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fx-grid > li{grid-column:span 2}
  .fx-grid > li:nth-child(3n+1):nth-last-child(2),.fx-grid > li:nth-child(3n+1):nth-last-child(2) + li{grid-column:span 3}
  .fx-grid > li:nth-child(3n+1):last-child{grid-column:3 / span 2}
}

/* Through time: a brass rule with a plate for every year, beside a line saying what the list is. */
.fx-line-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:24px clamp(32px,5vw,80px);align-items:start}
.fx-line-p{margin:0;font-family:var(--f-fx-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;text-wrap:balance}
.fx-line-p span{display:block;margin-top:12px;font-family:var(--f-display);font-weight:400;font-size:1rem;line-height:1.55;color:rgba(239,228,204,.7)}
.fx-line{list-style:none;margin:0;padding:0 0 0 2px;position:relative;display:grid;gap:4px}
.fx-line::before{content:"";position:absolute;left:5.6rem;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--fx-brass),rgba(201,162,74,.2))}
.fx-line a{display:grid;grid-template-columns:5rem 1fr;gap:2.2rem;align-items:baseline;padding:10px 0;text-decoration:none;position:relative}
.fx-line a::before{content:"";position:absolute;left:calc(5.6rem - 5px);top:calc(10px + .7rem);width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--fx-night);box-shadow:inset 0 0 0 2px var(--fx-brass);transition:background .2s}
.fx-line a:hover::before{background:var(--fx-brick)}
.fx-line-y{font-family:var(--f-fx-display);font-weight:800;font-size:1.5rem;text-align:right;color:var(--fx-brass)}
.fx-line-t{font-family:var(--f-fx-display);font-weight:600;font-size:1.15rem;line-height:1.2;text-wrap:balance}
.fx-line a:hover .fx-line-t{color:var(--fx-brass-hi)}

/* A film's page */
.fx-film{padding:clamp(22px,3vw,34px) 0 clamp(36px,5vw,56px);background:radial-gradient(110% 70% at 90% -20%,rgba(192,83,58,.22),transparent 55%),var(--fx-night)}
.fx-back{display:inline-flex;gap:8px;font-family:var(--f-fx-label);font-weight:600;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:rgba(239,228,204,.7)}
.fx-back:hover{color:var(--fx-brass)}
.fx-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,44px);align-items:center;margin:clamp(22px,3vw,36px) 0 clamp(26px,3.6vw,40px)}
.fx-head-copy{min-width:0}
.fx-head .fx-place{margin:0 0 10px}
.fx-title{font-family:var(--f-fx-display);font-weight:800;font-size:clamp(2.1rem,5.2vw,4rem);line-height:.98;letter-spacing:-.012em;margin:0;text-wrap:balance}
.fx-head .fx-dek{font-size:clamp(1.05rem,1.5vw,1.2rem);margin:16px 0 0;max-width:62ch}
.fx-meta{display:flex;flex-wrap:wrap;gap:6px 0;margin:16px 0 0;font-family:var(--f-fx-label);font-weight:500;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,228,204,.62)}
.fx-meta span+span::before{content:"·";margin:0 .7em;color:var(--fx-brick)}

.fx-stage{display:grid;gap:clamp(18px,2.4vw,28px)}
.fx-stage.has-chapters{grid-template-columns:minmax(0,1fr) minmax(220px,300px);align-items:start}
.fx-player{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px var(--fx-rule)}
.fx-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fx-poster{position:absolute;inset:0;display:block}
.fx-poster img,.fx-poster .fx-noposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-poster::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 100% 100%,rgba(14,28,35,.55),transparent 70%)}
/* Bottom right: the posters carry their own title bottom left. */
.fx-play{position:absolute;right:clamp(12px,2.4vw,26px);bottom:clamp(12px,2.4vw,24px);z-index:1;display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 12px;border-radius:999px;background:var(--fx-brick-deep);color:var(--fx-cream);font-family:var(--f-fx-label);font-weight:600;font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 30px -8px rgba(0,0,0,.6);transition:transform .2s,background .2s}
.fx-play-i{width:34px;height:34px;border-radius:50%;background:var(--fx-cream);position:relative;flex:none}
.fx-play-i::after{content:"";position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--fx-brick-deep)}
.fx-play-t{opacity:.75;font-weight:500}
.fx-poster:hover .fx-play{background:var(--fx-brick-dark);transform:translateY(-2px)}
.fx-poster:focus-visible{outline:3px solid var(--fx-brass);outline-offset:-3px}

.fx-chapters .fx-label{margin-bottom:10px}
.fx-chapters ol{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--fx-rule)}
.fx-chapters a{display:grid;grid-template-columns:3.4rem 1fr;gap:10px;padding:10px 4px;border-bottom:1px solid var(--fx-rule);text-decoration:none;line-height:1.3}
.fx-chapters time{font-family:var(--f-fx-label);font-weight:600;color:var(--fx-brass);letter-spacing:.04em}
.fx-chapters a:hover{background:rgba(239,228,204,.05)}
.fx-chapters a:hover span{color:var(--fx-brass-hi)}
.fx-note{margin:14px 0 0;font-size:.86rem;color:rgba(239,228,204,.55)}
.fx-note a{color:rgba(239,228,204,.8)}

/* The write-up: set on paper, or deeper river at night, in the reading face the site already loads. */
.fx-read{background:var(--fx-read-bg);color:var(--fx-read-ink);padding:clamp(44px,6vw,80px) 0 clamp(52px,7vw,96px)}
.fx-read-in{max-width:44rem}
.fx-prose{font-family:"Literata",Georgia,serif;font-size:clamp(1.06rem,1.25vw,1.16rem);line-height:1.75}
.fx-prose>*{margin:0 0 1.15em}
.fx-prose p,.fx-dek,.fx-lede,.fx-by,.fx-line-p span{text-wrap:pretty}
.fx-prose .dropcap{font-family:var(--f-fx-display);font-weight:800;font-size:4.3em;line-height:.8;margin:.07em .07em 0 -.02em;padding:0;color:var(--fx-brick)}
.fx-prose .dropcap::before,.fx-prose .dropcap svg{display:none}
/* Where the browser can size a drop cap to whole lines, it sits exactly three lines deep with no hole beneath it. */
@supports (initial-letter:3) or (-webkit-initial-letter:3){
  .fx-prose .dropcap{float:none;font:inherit;line-height:inherit;color:inherit;margin:0}
  .fx-prose p:has(> .dropcap)::first-letter{-webkit-initial-letter:3;initial-letter:3;font-family:var(--f-fx-display);font-weight:800;color:var(--fx-brick);margin-right:.1em}
}
.fx-prose h2{font-family:var(--f-fx-display);font-weight:800;font-size:clamp(1.6rem,2.6vw,2rem);line-height:1.1;letter-spacing:-.005em;margin:2em 0 .6em;color:var(--fx-read-ink)}
.fx-prose h3{font-family:var(--f-fx-label);font-weight:600;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;margin:1.8em 0 .5em;color:var(--fx-read-ink-2)}
.fx-prose a{color:var(--fx-read-link);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.fx-prose a:hover{text-decoration-thickness:2px}
.fx-prose ul,.fx-prose ol{padding-left:1.3em}
.fx-prose li{margin:.35em 0}
.fx-prose li::marker{color:var(--fx-brick)}
.fx-prose blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.2em;border-left:3px solid var(--fx-brick);font-style:italic;color:var(--fx-read-ink-2)}
.fx-prose hr{border:0;height:1px;background:var(--fx-read-rule);margin:2.4em 0}
.fx-prose strong{font-weight:700}
.fx-prose h2:is([id="sources"],[id="credits"]),.fx-prose h2:is([id="sources"],[id="credits"])~*{font-family:var(--f-fx-label);font-size:.98rem;line-height:1.55}
/* Sources as a numbered list with a hanging indent, so each one reads as its own entry. */
.fx-prose h2[id="sources"] + ul{list-style:none;padding-left:0;counter-reset:src}
.fx-prose h2[id="sources"] + ul > li{counter-increment:src;position:relative;padding-left:2.4em;margin:.6em 0}
.fx-prose h2[id="sources"] + ul > li::before{content:counter(src);position:absolute;left:0;width:1.7em;text-align:right;font-weight:600;color:var(--fx-read-link)}
.fx-prose h2:is([id="sources"],[id="credits"]){font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fx-read-link);border-top:1px solid var(--fx-read-rule);padding-top:1.6em}

/* Back to the film: a brick pill that waits in the corner while you read. */
.fx-to-film{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--fx-brick-deep);color:var(--fx-cream);font-family:var(--f-fx-label);font-weight:600;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:0 12px 28px -10px rgba(0,0,0,.6);animation:fx-rise .25s ease-out}
.fx-to-film .fx-play-i{width:28px;height:28px}
.fx-to-film .fx-play-i::after{left:11px;top:8px;border-width:6px 0 6px 9px}
.fx-to-film:hover{background:var(--fx-brick-dark)}
@keyframes fx-rise{from{opacity:0;transform:translateY(10px)}}

/* More films */
.fx-more{padding:clamp(40px,6vw,72px) 0}
.fx-more-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(20px,3vw,36px);align-items:center}
.fx-card-row{flex-direction:row;align-items:center;gap:16px}
.fx-card-row .fx-shot{width:44%;flex:none}
.fx-card-row .fx-label{margin-bottom:6px;font-size:.76rem}
.fx-card-row .fx-label::after{display:none}
.fx-card-row .fx-card-t{font-size:1.14rem;display:block}
.fx-sub-t{font-family:var(--f-fx-display);font-weight:700;font-size:1.3rem;line-height:1.2;margin:0}
.fx-sub .fx-hero-cta{margin-top:16px}
.fx-by{margin:12px 0 0;font-size:.98rem;line-height:1.5;color:rgba(239,228,204,.72)}
.fx-by a{color:var(--fx-brass-hi);text-underline-offset:3px}

@media (max-width:56em){
  .fx-feature,.fx-line-wrap{grid-template-columns:minmax(0,1fr)}
  .fx-stage.has-chapters{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:40em){
  .fx-head{grid-template-columns:minmax(0,1fr)}
  .fx-plate-lg{justify-self:start}
  .fx-line::before{left:4.1rem}
  .fx-line a{grid-template-columns:3.6rem 1fr;gap:1.6rem}
  .fx-line a::before{left:calc(4.1rem - 5px)}
  .fx-line-y{font-size:1.2rem}
  .fx-line-t{font-size:1.02rem}
  .fx-play-l{display:none}
  .fx-play{padding:8px 14px 8px 8px;gap:8px;font-size:.92rem}
  .fx-play-i{width:28px;height:28px}
  .fx-play-i::after{left:11px;top:8px;border-width:6px 0 6px 9px}
  .fx-card-row{gap:14px;align-items:flex-start}
  .fx-card-row .fx-shot{width:120px}
  .fx-card-row .fx-card-t{font-size:1.02rem;text-wrap:balance}
}
:root[data-motion="off"] .fx *{transition:none!important}
/* Pressing play (films.js): the poster stays, the button turns into a spinner, and the player fades in once it has loaded. */
.fx-player iframe{opacity:0;transition:opacity .35s}
.fx-player.is-playing iframe{opacity:1}
.fx-player.is-loading .fx-poster{cursor:progress}
.fx-player.is-loading .fx-play-i::after{left:50%;top:50%;width:16px;height:16px;margin:-11px 0 0 -11px;border-width:3px;border-style:solid;border-color:var(--fx-brick-deep);border-right-color:transparent;border-radius:50%;animation:fx-spin .8s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}