/* ==========================================================================
   FILM & MEDIA: "Take One"  (round 3)
   Object world: the clapperboard slate, the screenplay page (Courier,
   sluglines, scene numbers, CUT TO:), 35 mm film strips with sprocket holes
   and edge codes, our own drawn festival laurels, the projector beam,
   letterbox bars, the call sheet, the production stripboard, end credits.
   Loads after shell.css. Adds the object world only; never restyles shared
   components (cards, .ev, chips, header, footer, search).
   Every class is prefixed f-.
   ========================================================================== */

.sec-film {
  --f-black: #0C0E10;      /* projection black (= --sec-deep) */
  --f-raised: #171B1F;
  --f-cyan: #67D8E6;       /* lamp cyan: ON DARK ONLY */
  --f-teal: #0B6E7C;       /* teal: on light (= --sec-ink) */
  --f-tint: #DDF0F2;
  --f-paper: #F4F5F4;      /* script page white */
  --f-white: #FFFFFF;
  --f-amber: #F0A93B;      /* safety amber: tally lights + art only, never text on light */
  --f-mist: #B9C2C6;
  --f-base: #121314;       /* film base */
  --f-script: "Courier Prime", "Courier New", monospace;
  --f-slate: "Archivo", "Arial Narrow", sans-serif;
  /* sprocket rows (holes punched in the film base) */
  --f-holes-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Crect x='6' y='2' width='12' height='10' rx='2.2' fill='%23F4F5F4'/%3E%3C/svg%3E");
  --f-holes-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Crect x='6' y='2' width='12' height='10' rx='2.2' fill='%23303840'/%3E%3C/svg%3E");
  --f-holes-light-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24'%3E%3Crect x='2' y='6' width='10' height='12' rx='2.2' fill='%23F4F5F4'/%3E%3C/svg%3E");
  --f-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='130' height='130' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* headings: Courier, with a scene number hanging in the left margin */
.sec-film .block-title { font-size: clamp(1.75rem, 3.1vw, 2.6rem); letter-spacing: -.01em; }
.sec-film .block-title em { font-style: normal; color: var(--f-teal); }
.sec-film .block--deep .block-title em { color: var(--f-cyan); }
.sec-film .list-cta .block-title em { color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .14em; }
.f-sc { position: relative; }
.f-sc::before {
  content: attr(data-sc); position: absolute; right: calc(100% + 22px); top: .12em;
  font: 700 .62em/1 var(--f-script); color: var(--muted); letter-spacing: 0;
}
.block--deep .f-sc::before { color: var(--sec-mist); }
.f-trans {                                    /* CUT TO: between scenes */
  margin-top: clamp(32px, 4vw, 48px); text-align: right;
  font: 700 15px/1 var(--f-script); letter-spacing: .04em; color: var(--muted); text-transform: uppercase;
}
.block--deep .f-trans { color: var(--sec-mist); }

/* ==========================================================================
   [1] HERO: letterboxed screen. A title card in the projector beam, then
   the script's opening lines (slugline, action, the visitor's cue = the
   search, CUT TO:). The production slate right.
   ========================================================================== */
.f-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 70% 80% at 70% 40%, #14262B 0, transparent 70%), var(--f-black);
  color: var(--f-paper);
}
.f-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--f-grain); opacity: .9; pointer-events: none; }
.f-beam {                                      /* projector beam from the booth, top right */
  position: absolute; z-index: -1; right: -6%; top: -10%; width: 92%; height: 135%; pointer-events: none;
  background:
    radial-gradient(circle at 92% 6%, rgba(220,250,255,.55) 0 1.2%, rgba(103,216,230,.25) 3%, transparent 9%),
    linear-gradient(225deg, rgba(103,216,230,.30), rgba(103,216,230,.10) 45%, rgba(103,216,230,0) 80%);
  clip-path: polygon(96% 0, 100% 9%, 18% 100%, 0 70%);
  animation: f-flicker .2s steps(2) infinite;
}
.f-beam::after {                               /* dust in the light */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.6px) 0 0 / 53px 47px,
    radial-gradient(circle, rgba(255,255,255,.35) 0 .8px, transparent 1.4px) 21px 13px / 37px 41px;
  -webkit-mask-image: linear-gradient(225deg, #000, transparent 75%); mask-image: linear-gradient(225deg, #000, transparent 75%);
}
@keyframes f-flicker { 50% { opacity: .92; } }
.f-bar {                                       /* letterbox bars */
  position: relative; z-index: 1; background: #000; height: 34px; display: flex; align-items: center;
  font: 500 11px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--f-mist);
}
.f-bar .wrap { display: flex; justify-content: space-between; gap: 16px; }
.f-rec::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--f-amber); margin-right: 8px; box-shadow: 0 0 8px var(--f-amber); vertical-align: 0; }
.f-hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 72px); align-items: center;
  padding-block: clamp(36px, 4.2vw, 60px);
}

/* the copy, projected: a title card, then the opening lines of the script */
.f-copy { position: relative; }
.f-copy::before {                              /* where the beam lands */
  content: ""; position: absolute; z-index: -1; inset: -12% -8% -10% -14%; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 40% 38%, rgba(103,216,230,.10), transparent 72%);
}
.f-hero .eyebrow { color: var(--f-cyan); }
.f-hero .hero-title {
  font: 900 clamp(3rem, 5.9vw, 5.4rem)/.9 var(--f-slate); font-stretch: 62%;
  letter-spacing: .005em; text-transform: uppercase; color: var(--f-white);
  margin: 14px 0 0; text-wrap: balance;
  text-shadow: 0 0 34px rgba(103,216,230,.18);
}
.f-hero .hero-title .f-l { display: block; }
.f-hero .hero-title mark { background: none; color: var(--f-cyan); padding: 0; }

.f-script { margin-top: clamp(20px, 2.2vw, 28px); padding-top: 16px; border-top: 1px solid rgba(185,194,198,.28); max-width: 640px; font-family: var(--f-script); }
.f-hslug {                                     /* scene heading, number hung in the margin */
  position: relative; margin: 0 0 8px;
  font: 700 clamp(14.5px, 1.15vw, 16px)/1.3 var(--f-script); letter-spacing: .04em; text-transform: uppercase; color: var(--f-white);
}
.f-hsn { position: absolute; right: calc(100% + 14px); top: 0; font-weight: 400; color: var(--f-mist); }
.f-action { margin: 0; font: 400 clamp(15px, 1.15vw, 16.5px)/1.55 var(--f-script); color: #D3DADD; max-width: 38em; }
.f-cue {                                       /* character cue: indented, as on the page */
  margin: 14px 0 8px; padding-left: 22%;
  font: 700 15px/1.2 var(--f-script); letter-spacing: .06em; color: var(--f-white);
}
.f-cue span { font-weight: 400; letter-spacing: 0; color: var(--f-mist); margin-left: .5em; }
.f-hero .search { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; max-width: none; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.55); }
.f-hero .search-field label { font-family: var(--f-script); font-weight: 700; letter-spacing: .1em; color: #4A4F55; }
.f-hero .search-field input { font-family: var(--f-script); font-size: 16px; }
.f-hero .search-go {
  background: var(--f-cyan); color: var(--f-black);
  font: 700 16px/1 var(--f-script); text-transform: uppercase; letter-spacing: .05em; padding-inline: 22px;
}
.f-hero .search-go:hover { filter: none; background: #8FE6F0; }
.f-cut { display: flex; justify-content: flex-end; margin-top: 12px; }
.f-cut .search-alt { margin: 0; font: 700 15px/1 var(--f-script); text-transform: uppercase; letter-spacing: .05em; }
.f-cut .search-alt a { display: inline-block; padding: 6px 0; color: var(--f-cyan); text-underline-offset: .25em; }

/* the slate */
.f-slate-wrap { position: relative; justify-self: end; width: min(100%, 450px); }
.f-slate { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); rotate: 2deg; }
.f-slate .clap { transform-box: fill-box; transform-origin: 2% 100%; rotate: -15deg; animation: f-clap 6s ease-in infinite; }
@keyframes f-clap {
  0%, 84% { rotate: -15deg; }
  88% { rotate: 0deg; }
  91% { rotate: -2deg; }
  93% { rotate: 0deg; }
  100% { rotate: -15deg; }
}
.f-slate-tag { margin-top: 18px; text-align: center; font: 500 11px/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--f-mist); }

/* ==========================================================================
   [2] KINDS: two 35 mm strips; each frame is a kind with a subtitle.
   Phones: one vertical strip, like film running through a projector.
   ========================================================================== */
.f-kinds { overflow: hidden; }
.f-reels { display: grid; gap: 34px; padding: 6px 0 10px; }
.f-strip {
  --band: 36px;
  position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--f-base); padding: var(--band) 0; margin-inline: -14px;
  box-shadow: 0 16px 30px rgba(12,14,16,.28);
}
.f-strip:nth-child(1) { rotate: -1.1deg; }
.f-strip:nth-child(2) { rotate: .8deg; }
.f-strip {                                       /* sprocket rows punched top and bottom */
  background:
    var(--f-holes-light) 0 6px / 24px 14px repeat-x,
    var(--f-holes-light) 0 calc(100% - 6px) / 24px 14px repeat-x,
    var(--f-base);
}
.f-strip::before, .f-strip::after {             /* edge codes printed on the film base */
  position: absolute; left: 30px; right: 30px; pointer-events: none;
  text-align: justify; text-align-last: justify; white-space: nowrap;
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .14em; color: var(--f-amber); opacity: .9;
}
.f-strip::before { content: attr(data-et); top: 23px; }
.f-strip::after { content: attr(data-eb); bottom: 23px; }
.f-frame { position: relative; padding: 0 5px; border-right: 4px solid #050505; }
.f-frame:last-child { border-right: 0; }
.f-frame a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; text-decoration: none; color: #fff; background: #0B1316; }
.f-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .4s ease, filter .4s; }
.f-frame a:hover svg, .f-frame a:focus-visible svg { transform: scale(1.04); filter: brightness(1.18); }
.f-sub {                                          /* subtitles on a dark scrim band (AA without the halo) */
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 8px 9px; background: rgba(5,6,7,.8);
  text-shadow: 0 0 2px #000, 0 0 3px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.f-sub b { font: 700 clamp(15px, 1.35vw, 19px)/1.15 var(--font-ui); color: #fff; }
.f-sub i { font: italic 500 clamp(11.5px, .95vw, 13px)/1.3 var(--font-ui); color: #F2F6F7; }
.f-frame a:hover .f-sub b { text-decoration: underline; text-underline-offset: 3px; }
.f-fno { position: absolute; left: 12px; top: 8px; font: 700 11px/1 var(--f-slate); font-stretch: 125%; color: rgba(255,255,255,.75); letter-spacing: .08em; text-shadow: 0 0 3px #000; }
.f-leader text { font-family: var(--f-slate); }
.f-leader-sweep { transform-origin: 160px 112px; animation: f-sweep 1s steps(12) infinite; }
@keyframes f-sweep { to { rotate: 360deg; } }

/* ==========================================================================
   [3] EVENTS: featured = a one-sheet poster with our own drawn laurels
   ========================================================================== */
.f-events-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.f-sheet {
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  aspect-ratio: 27 / 40; padding: 22px 24px 18px; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #0C0E10 0 30%, #0D2A30 70%, #0C0E10);
  box-shadow: 0 0 0 1px #000, 0 24px 44px rgba(12,14,16,.35); transition: transform .25s, box-shadow .25s;
}
.f-sheet:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #000, 0 30px 54px rgba(12,14,16,.4); }
.f-sheet::before {                                /* key art: a beam over a crowd */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 30% at 50% 45%, rgba(103,216,230,.18), transparent 70%),
    radial-gradient(ellipse 60% 18% at 50% 100%, rgba(240,169,59,.3), transparent 70%);
}
.f-sheet::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--f-grain); }
.f-sheet-tag { text-align: center; font: 500 11px/1.3 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--f-mist); }
.f-laurels { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.f-laurel { width: 150px; height: auto; }
.f-laurel text { font-family: var(--f-slate); }
.f-sheet-art { position: absolute; left: 0; right: 0; top: 24%; width: 100%; height: 50%; z-index: -1; }
.f-sheet-title { margin-top: auto; text-align: center; font: 900 clamp(46px, 5.3vw, 76px)/.86 var(--f-slate); font-stretch: 62%; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.f-sheet-sub { text-align: center; font: 700 clamp(15px, 1.4vw, 19px)/1.15 var(--f-slate); font-stretch: 100%; letter-spacing: .14em; text-transform: uppercase; color: var(--f-cyan); margin-top: 8px; }
.f-sheet-date { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; text-align: center; font: 800 clamp(14px, 1.3vw, 18px)/1.2 var(--f-slate); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--f-amber); }
.f-sheet-billing {                                  /* the billing block */
  margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(185,194,198,.35); text-align: center;
  font: 500 12.5px/1.15 var(--f-slate); font-stretch: 62%; letter-spacing: .08em; text-transform: uppercase; color: #CFD6D9;
}
.f-sheet-billing b { font-weight: 800; color: #fff; }
.f-sheet-note { margin-top: 8px; text-align: center; font: 500 11px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--f-mist); }

/* ==========================================================================
   [4] PLACES: card art = a strip of film: EST. frame + a lit screen frame
   ========================================================================== */
.f-art {
  display: flex; gap: 5px; padding: 17px 10px; background: var(--f-base);
}
.f-art::before, .f-art::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--f-holes-dark) 0 0 / 18px 10px repeat-x; }
.f-art::before { top: 3px; } .f-art::after { bottom: 3px; }
.f-art-fr {
  position: relative; flex: 1; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #1A2A30, #0E171A);
  display: flex; flex-direction: column; justify-content: center; padding: 0 12px;
}
.f-art-fr small { font: 500 9.5px/1 var(--font-mono); letter-spacing: .2em; color: var(--f-mist); text-transform: uppercase; }
.f-art-fr b { font: 800 26px/1 var(--f-slate); font-stretch: 125%; color: #fff; letter-spacing: .02em; margin-top: 3px; }
.f-art-scr { background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(103,216,230,.9), rgba(103,216,230,.25) 60%, #0E171A 100%); }
.f-art-scr::after {                                  /* seat-backs against the screen */
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -6px; height: 22px;
  background: radial-gradient(ellipse 9px 11px at 50% 100%, #0C0E10 98%, transparent 100%) 0 0 / 18px 22px repeat-x;
}
.f-art-dim { flex: .55; opacity: .55; }
.card:hover .f-art-scr { filter: brightness(1.2); }

/* compact card: a tiny slate */
.f-mono { display: grid; place-items: center; background: var(--f-black); }
.f-mono::before {                                    /* clapper stripes */
  content: ""; position: absolute; left: 10px; right: 10px; top: 18px; height: 12px; border-radius: 2px;
  background: repeating-linear-gradient(120deg, #fff 0 7px, #0C0E10 7px 14px);
  rotate: -8deg; transform-origin: 0 100%;
}
.f-mono::after { content: ""; position: absolute; left: 10px; right: 10px; top: 32px; bottom: 16px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 2px; }
.f-mono b { position: relative; margin-top: 18px; font: 800 15px/1 var(--f-slate); font-stretch: 125%; color: #fff; letter-spacing: .04em; }

/* ==========================================================================
   [5] PEOPLE: end credits
   ========================================================================== */
.f-people { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.f-credits {
  position: relative; background: var(--f-black); color: #fff; padding: 34px 26px 30px; text-align: center;
  box-shadow: 0 0 0 1px #000, 0 20px 40px rgba(12,14,16,.25); overflow: hidden;
}
.f-credits::after { content: ""; position: absolute; inset: 0; background: var(--f-grain); pointer-events: none; }
.f-credits h3 { font: 700 13px/1 var(--f-script); letter-spacing: .3em; text-transform: uppercase; color: var(--f-cyan); margin: 0 0 14px; }
.f-credits h3 + ul { margin-bottom: 26px; }
.f-credits ul { list-style: none; display: grid; gap: 9px; }
.f-credits li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; align-items: baseline; }
.f-credits li span { text-align: right; font: 400 13px/1.3 var(--f-script); color: var(--f-mist); text-transform: uppercase; letter-spacing: .06em; }
.f-credits li a { text-align: left; font: 700 15.5px/1.3 var(--font-ui); color: #fff; text-decoration: none; }
.f-credits li a:hover { color: var(--f-cyan); text-decoration: underline; }
.f-credits-end { margin-top: 6px; font: 400 13px/1.4 var(--f-script); color: var(--f-mist); }
.f-credits-end a { color: var(--f-cyan); }

/* ==========================================================================
   [6] TOWNS: a call sheet of locations, clipped to the board
   ========================================================================== */
.f-towns { background: radial-gradient(ellipse 70% 60% at 50% 0, #11262B, transparent 70%), var(--f-black); }
.f-callsheet {
  position: relative; background: var(--f-white); color: #141414; padding: 40px clamp(18px, 3vw, 40px) 28px;
  box-shadow: 0 30px 60px rgba(0,0,0,.5); font-family: var(--f-script);
}
.f-clip {                                             /* bulldog clip */
  position: absolute; left: 50%; top: -18px; translate: -50% 0; width: 132px; height: 38px;
  background: linear-gradient(180deg, #2A2F33, #0C0E10); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.4));
}
.f-clip-wrap { position: absolute; left: 50%; top: -30px; translate: -50% 0; width: 132px; height: 48px; z-index: 1; }
.f-clip-wrap .f-clip { left: 0; top: 12px; translate: none; }
.f-clip-wrap::before, .f-clip-wrap::after { content: ""; position: absolute; top: -6px; width: 40px; height: 26px; border: 3px solid #AEB7BB; border-bottom: 0; border-radius: 6px 6px 0 0; }
.f-clip-wrap::before { left: 22px; rotate: -8deg; } .f-clip-wrap::after { right: 22px; rotate: 8deg; }
.f-cs-head { display: grid; grid-template-columns: 1.1fr 1.6fr 1fr; border: 2px solid #141414; margin-bottom: 18px; }
.f-cs-head > div { padding: 10px 14px; }
.f-cs-head > div + div { border-left: 2px solid #141414; }
.f-cs-head b { display: block; font: 700 26px/1 var(--f-script); letter-spacing: .02em; }
.f-cs-head small { display: block; font: 400 12.5px/1.35 var(--f-script); text-transform: uppercase; letter-spacing: .06em; color: #444; }
.f-cs-head span { display: block; font: 700 15px/1.3 var(--f-script); }
.f-cs { width: 100%; border-collapse: collapse; font-size: 15px; }
.f-cs caption { text-align: left; font: 700 14px/1 var(--f-script); letter-spacing: .14em; padding: 0 0 8px; text-transform: uppercase; }
.f-cs th { text-align: left; font: 700 12px/1 var(--f-script); letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px; background: #141414; color: #fff; }
.f-cs td { padding: 11px 10px; border-bottom: 1px solid #C9CDCD; vertical-align: top; }
.f-cs tr:nth-child(even) td { background: #F1F4F4; }
.f-cs td:first-child { font: 700 15px/1.2 var(--f-script); width: 44px; color: var(--f-teal); }
.f-cs td.set a { font: 700 15.5px/1.3 var(--f-script); text-transform: uppercase; color: #141414; text-decoration: none; letter-spacing: .01em; }
.f-cs td.set a:hover { color: var(--f-teal); text-decoration: underline; }
.f-cs td.what { font: 400 14.5px/1.45 var(--font-ui); color: #333; }
.f-cs td.reg { font: 400 13px/1.2 var(--f-script); text-transform: uppercase; color: #444; white-space: nowrap; }
.f-cs-foot { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; font: 400 13px/1.3 var(--f-script); color: #444; text-transform: uppercase; }

/* ==========================================================================
   [7] PRACTICE: the production stripboard
   ========================================================================== */
.f-board { background: #1C2125; border-radius: 10px; padding: 14px; box-shadow: 0 20px 40px rgba(12,14,16,.25), inset 0 0 0 1px rgba(255,255,255,.06); }
.f-board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 6px 12px; font: 700 13px/1 var(--f-script); letter-spacing: .2em; text-transform: uppercase; color: var(--f-mist); }
.f-board-head b { color: #fff; letter-spacing: .14em; }
.f-strips { list-style: none; display: grid; gap: 4px; }
.f-st {
  display: grid; grid-template-columns: 56px 92px minmax(0, 1.25fr) minmax(0, 2fr); align-items: center; gap: 0;
  background: var(--st, #fff); color: #141414; border-radius: 3px; min-height: 76px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}
.f-st > * { padding: 12px 14px; }
.f-st-no { font: 700 22px/1 var(--f-slate); font-stretch: 125%; text-align: center; border-right: 1px dashed rgba(0,0,0,.25); align-self: stretch; display: grid; place-items: center; }
.f-st-code { font: 700 12.5px/1.25 var(--f-script); text-transform: uppercase; letter-spacing: .06em; border-right: 1px dashed rgba(0,0,0,.25); align-self: stretch; display: grid; place-items: center; text-align: center; }
.f-st h3 { font: 700 18px/1.2 var(--f-script); text-transform: uppercase; letter-spacing: .01em; }
.f-st h3 + p { font: 400 14px/1.4 var(--font-ui); color: #333; margin-top: 3px; }
.f-st ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.f-st li { font: 600 15px/1.3 var(--font-ui); }
.f-st li a { color: #141414; text-decoration-color: rgba(0,0,0,.35); }
.f-st li a:hover { color: var(--f-teal); }
.f-st li small { font: 400 12.5px/1 var(--font-mono); color: #3E4347; margin-left: 4px; }
.f-st--break {                                      /* black "day break" strip */
  display: flex; justify-content: center; align-items: center; min-height: 30px; background: #050607; color: var(--f-mist);
  font: 700 12px/1 var(--f-script); letter-spacing: .3em; text-transform: uppercase; border-radius: 3px;
}

/* ==========================================================================
   [8] HERITAGE: a scene from the script + a 1960s television
   ========================================================================== */
.f-heritage-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.f-scene {
  position: relative; background: var(--f-white); color: #141414; font-family: var(--f-script);
  padding: 34px clamp(22px, 4vw, 60px) 30px clamp(30px, 5vw, 76px);
  box-shadow: 0 2px 0 #E1E4E4, 0 4px 0 #FAFAFA, 0 24px 44px rgba(12,14,16,.2);
}
.f-scene .f-slug { margin-top: 0; }
.f-scene .block-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 10px 0 14px; color: #0C0E10; }
.f-scene p.f-act { font: 400 17px/1.6 var(--f-script); margin-bottom: 14px; max-width: 40em; }
.f-scene .f-super { font: 700 16px/1.4 var(--f-script); text-transform: uppercase; margin-bottom: 14px; }
.f-inserts { list-style: none; margin: 4px 0 16px; border-top: 1px solid #C9CDCD; }
.f-inserts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #C9CDCD; font: 400 15px/1.35 var(--f-script); }
.f-inserts li b { font-weight: 700; text-transform: uppercase; margin-right: 6px; }
.f-inserts a { color: #141414; }
.f-inserts li > span:last-child { color: #444; white-space: nowrap; }
.f-scene .f-out { text-align: right; font: 700 15px/1 var(--f-script); letter-spacing: .04em; }
.f-scene .f-src { font: 500 11px/1.45 var(--font-mono); color: var(--muted); margin-top: 14px; }
.f-tv { width: min(100%, 440px); justify-self: center; height: auto; filter: drop-shadow(0 26px 30px rgba(12,14,16,.35)); }
.f-tv-scan { animation: f-roll 7s linear infinite; }
@keyframes f-roll { from { transform: translateY(-40px); } to { transform: translateY(200px); } }

/* ==========================================================================
   [9] LIST YOUR PLACE: FADE IN on a title card, "and introducing"
   ========================================================================== */
.f-cta { position: relative; overflow: hidden; }
.f-cta::before { content: ""; position: absolute; inset: 0; background: var(--f-grain); pointer-events: none; }
.f-cta .wrap { position: relative; }
.f-cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.f-fadein { font: 700 16px/1 var(--f-script); letter-spacing: .06em; color: #fff; margin-bottom: 14px; }
.f-card {
  position: relative; aspect-ratio: 16 / 9; width: min(100%, 470px); justify-self: center;
  background: radial-gradient(ellipse at 50% 40%, #1A2226, #050607 75%); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
  box-shadow: 0 0 0 10px #050607, 0 0 0 11px rgba(255,255,255,.12), 14px 18px 0 11px rgba(5,6,7,.45);
  font-family: var(--f-script);
}
.f-card::after { content: ""; position: absolute; inset: 0; background: var(--f-grain); }
.f-card small { font: 400 italic 16px/1 var(--f-script); color: var(--f-mist); }
.f-card b { font: 800 clamp(24px, 2.7vw, 37px)/1 var(--f-slate); font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase; }
.f-card i { font: 400 15px/1 var(--f-script); color: var(--f-cyan); font-style: normal; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .f-people { grid-template-columns: minmax(0, 1fr); }
  .f-credits { max-width: 600px; }
  .f-st { grid-template-columns: 48px 84px minmax(0, 1fr); }
  .f-st ul { grid-column: 3; padding-top: 0; }
}
@media (max-width: 900px) {
  .f-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .f-slate-wrap { justify-self: center; order: -1; width: min(64%, 300px); }
  .f-slate-tag { display: none; }
  .f-hero .hero-title { font-size: clamp(3.1rem, 13.5vw, 5rem); }
  .f-hsn { position: static; margin-right: 1.2em; }
  .f-events-grid, .f-heritage-grid, .f-cta-grid { grid-template-columns: minmax(0, 1fr); }
  .f-sheet { max-width: 460px; aspect-ratio: auto; min-height: 640px; }
  .f-cs-head { grid-template-columns: 1fr 1fr; }
  .f-cs-head > div:last-child { grid-column: 1 / -1; border-left: 0; border-top: 2px solid #141414; }
}
@media (max-width: 760px) {
  .f-sc::before { display: none; }
  .f-bar { height: 28px; font-size: 9.5px; letter-spacing: .14em; }
  .f-bar .hide-sm { display: none; }
  .f-hero-grid { gap: 20px; padding-block: 28px 36px; }
  .f-hero .search { grid-template-columns: minmax(0, 1fr); }
  .f-cue { padding-left: 18%; }
  .f-hero .search-go { min-height: 52px; }
  .f-slug { font-size: 13.5px; }
  .f-slug span:first-child, .f-slug span:last-child { display: none; }
  /* film runs vertically through the projector on phones */
  .f-reels { gap: 0; }
  .f-strip { --band: 0px; grid-template-columns: minmax(0, 1fr); padding: 0 34px; margin-inline: 0; rotate: 0deg !important; }
  .f-strip + .f-strip { margin-top: -1px; }
  .f-strip { background: var(--f-holes-light-v) 10px 0 / 14px 24px repeat-y, var(--f-holes-light-v) calc(100% - 10px) 0 / 14px 24px repeat-y, var(--f-base); }
  .f-strip::before, .f-strip::after { display: none; }
  .f-frame { padding: 5px 0; border-right: 0; border-bottom: 4px solid #050505; }
  .f-strip:last-child .f-frame:last-child { border-bottom: 0; }
  .f-frame.f-leader-fr { display: none; }
  .f-sub b { font-size: 18px; }
  .f-sub i { font-size: 12.5px; }
  .f-sheet { padding: 18px 16px 16px; min-height: 600px; }
  .f-laurel { width: 116px; }
  .f-credits { padding: 28px 16px 24px; }
  .f-credits li { grid-template-columns: minmax(0, 1fr); gap: 0; text-align: center; padding-bottom: 6px; }
  .f-credits li span, .f-credits li a { text-align: center; }
  .f-credits li span { order: 2; font-size: 12px; }
  .f-callsheet { padding: 36px 14px 20px; }
  .f-cs-head { grid-template-columns: minmax(0, 1fr); }
  .f-cs-head > div + div { border-left: 0; border-top: 2px solid #141414; }
  .f-cs thead { display: none; }
  .f-cs, .f-cs tbody, .f-cs tr, .f-cs td { display: block; width: auto; }
  .f-cs tr { position: relative; padding: 10px 0 10px 40px; border-bottom: 1px solid #C9CDCD; }
  .f-cs tr:nth-child(even) td { background: none; }
  .f-cs td { padding: 0; border: 0; }
  .f-cs td:first-child { position: absolute; left: 0; top: 12px; }
  .f-cs td.what { margin-top: 4px; }
  .f-cs td.reg { margin-top: 4px; font-size: 11.5px; }
  .f-cs-foot { flex-direction: column; }
  .f-board { padding: 10px; }
  .f-st { grid-template-columns: 44px minmax(0, 1fr); }
  .f-st-code { display: none; }
  .f-st-no { grid-row: span 2; font-size: 18px; }
  .f-st > * { padding: 10px 12px; }
  .f-st ul { grid-column: 2; }
  .f-scene { padding: 26px 18px 24px 22px; }
  .f-scene p.f-act { font-size: 16px; }
  .f-inserts li { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .f-beam { animation: none; }
  .f-slate .clap { animation: none; rotate: -15deg; }
  .f-leader-sweep { animation: none; rotate: 120deg; }
  .f-tv-scan { animation: none; transform: translateY(60px); }
}

/* ==========================================================================
   HERO MOTION (shared vocabulary across all section heroes)
   - hover / :focus-within moves are one-shot and short: 0.6-1.2 s, eased,
     always ending on the resting pose (the resting pose is unchanged);
   - all of it lives inside prefers-reduced-motion: no-preference AND behind
     .motion-toggle:not(:checked), so reduced motion or the Pause chip means
     no hover motion at all (ambient loops are paused by shell.css);
   - art is aria-hidden and only moves with transform/rotate/translate/opacity:
     no layout shift; nothing moves over a link or input.
   ========================================================================== */
@keyframes f-hclap { 0% { rotate: -15deg; } 35% { rotate: 0deg; } 50% { rotate: -2deg; } 62% { rotate: 0deg; } 100% { rotate: -15deg; } }
@media (prefers-reduced-motion: no-preference) {
  /* hover the slate (or focus the search): it claps on cue, then opens again */
  .motion-toggle:not(:checked) ~ * .f-slate-wrap:hover .f-slate .clap,
  .motion-toggle:not(:checked) ~ * .f-hero:focus-within .f-slate .clap { animation: f-hclap .9s ease-in-out; }
}

/* hero search: the WHERE field always shows the whole "Town or region" placeholder
   (>= 190px column); on mid widths the button drops to its own row so neither field is squeezed */
@media (min-width: 1201px) { .f-hero .search { grid-template-columns: minmax(0, 1.4fr) minmax(190px, 1fr) auto; } }
@media (min-width: 761px) and (max-width: 1200px) {
  .f-hero .search { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .f-hero .search-go { grid-column: 1 / -1; min-height: 52px; }
}