/*
 * HFSV site stylesheet — assets/css/site.css
 * ---------------------------------------------------------------------------
 * Extracted from the frozen design mockups:
 *   .design-source/HFSV Homepage.dc.html
 *   .design-source/About Us.dc.html
 *   .design-source/Past Events.dc.html
 * Class vocabulary is FROZEN per BUILD-SPEC.md section 4. No inline style=
 * attributes are used anywhere in the site's output HTML; every rule below
 * exists so the templates never need one.
 *
 * EXTRACTED vs SYNTHESIZED
 * -------------------------------------------------------------------------
 * Most rules below are lifted byte-for-byte from an inline style= in one of
 * the three .dc.html mockups (see the comment above each block for which
 * page/element it came from). The frozen class list in BUILD-SPEC section 4
 * is a superset of what the three small mockups actually show (they don't
 * include a Past Events archive with many editions, a media/press page, or
 * a contact form) — for those, this file SYNTHESIZES a consistent style
 * from the section-3 design tokens, matching the mockups' spacing scale,
 * radii, and type rhythm. Every synthesized block is labelled SYNTHESIZED
 * below. The full list, for audit:
 *   .edition__poster .filmtable .filmtable__row  (Past Events archive rows/posters)
 *   .medialist .mediayear .mediaitem .mediaitem__source .mediaitem__title
 *     .mediaitem__date .mediaitem__link            (Media page — no mockup at all)
 *   .contact .contact__inner .form* .alert*        (Contact form — no mockup at all)
 *   .visually-hidden .skip-link                    (a11y utilities, not in mockups)
 *   .pagehead--red                                 (only green/blue pageheads exist
 *                                                    in the mockups; red is the
 *                                                    documented 3rd token variant)
 *   .wrap--wide / .section--tight                  (BUILD-SPEC names these as the
 *                                                    Layout modifier pair; the
 *                                                    mockups repeat the underlying
 *                                                    padding/max-width values
 *                                                    literally but never via a
 *                                                    class, since they have no
 *                                                    stylesheet of their own)
 *   .edition__year--*, .film__badge accent modifiers reused past the 5 lineup
 *     films (edition badges use the same --red/--green tokens the films use;
 *     BUILD-SPEC's closing rule in section 4 — "colour-variant modifiers use
 *     the token names ... and map to a class" — is applied here identically)
 *
 * STYLE-HOVER CONVERSIONS (BUILD-SPEC 5: "style-hover is not real HTML")
 * -------------------------------------------------------------------------
 * The four style-hover="…" attributes in the mockups become real :hover
 * rules. Search this file for "HOVER CONVERSION" to find each one:
 *   1. Nav CTA           (all 3 mockups, "Contact Us" pill)   -> .nav__cta:hover
 *   2. Hero solid button (Homepage, "See the line-up")        -> .btn--solid:hover
 *   3. Hero outline button (Homepage, "Tickets at Cinecenta") -> .btn--outline:hover
 *   4. Footer email link (all 3 mockups)                      -> .foot__mail:hover
 *
 * BOX-SIZING — deliberately NOT global.
 * -------------------------------------------------------------------------
 * The mockups apply box-sizing:border-box inline only on specific elements
 * (.wrap/.wrap--wide sections, .fig__img). The hero card, sponsor cards and
 * nav are content-box (the mockup default) and must stay that way for
 * pixel-faithful sizing — a blanket "*{box-sizing:border-box}" reset would
 * silently shrink the hero card from 952px to 840px. So box-sizing is set
 * only where the source sets it, plus on the handful of synthesized form
 * controls where border-box is simply correct practice.
 *
 * TEMPLATE HANDOFF NOTES (for whoever writes templates/*.php — read these):
 * -------------------------------------------------------------------------
 * - The CSS-only burger menu needs `<input type="checkbox" id="nav-t">`
 *   immediately followed by the burger <label for="nav-t" class="nav__burger">
 *   and then `.nav__links`, all inside `.nav`, in that DOM order — the CSS
 *   selector is `#nav-t:checked ~ .nav__links` (general sibling combinator).
 *   assets/js/site.js also queries #nav-t and .nav__burger by those exact
 *   names.
 * - Generic content sections compose two classes on ONE element, e.g.
 *   `<section class="section wrap">…</section>` — .section supplies
 *   vertical padding, .wrap/.wrap--wide supply max-width + centering. This
 *   mirrors the mockups, which always combined both concerns on one inline
 *   style=. Add `.section--tight` alongside `.section` for a section that
 *   opens with the "divider" rule-line treatment (Board, Sponsors, and any
 *   Past-Events edition after the first).
 * - The Music Night row (homepage) has NO dedicated title/meta/synopsis/
 *   badge classes in BUILD-SPEC's "Music night" group — by design, reuse
 *   `.film__media`, `.film__badge`, `.film__title`, `.film__meta` from the
 *   Film rows group, with `.film--ink` supplying the ink/yellow badge
 *   colours, e.g.:
 *   `<article class="music film--ink"><div class="film__media">
 *     <span class="film__badge">…</span>
 *     <div class="music__thumbs"><img class="music__thumb" …></div>
 *   </div><div class="film__body"><h3 class="film__title">…</h3>…</article>`
 * - Film accent colour: put ONE `.film--<token>` class on the `.film`
 *   article (token = red|blue|green|amber|ink, straight from the data —
 *   never a raw hex). `.film__badge`, `.callout` border and `.callout__title`
 *   all read the `--accent` custom property that sets, so no per-row inline
 *   colour is ever needed. Same pattern for `.edition__year--<token>`.
 * - Honeypot: this stylesheet makes `.form__hp` genuinely invisible
 *   (off-screen, not display:none — bots that skip display:none fields
 *   still fill it in, which is the point). The template MUST additionally
 *   add `aria-hidden="true" tabindex="-1" autocomplete="off"` to the input
 *   itself — those are HTML attributes, not something CSS can add.
 * - `#lineup` is a required in-page anchor (nav "Line-up" link target) — the
 *   line-up section's own <h2> is styled via `#lineup h2` below, not a
 *   class, since BUILD-SPEC's vocabulary has no class for it.
 * - `.ticker__track` must contain its item markup TWICE (the mockup does
 *   this literally — two identical <span class="ticker__item"> siblings).
 *   The `translateX(-50%)` keyframe only loops seamlessly with an exact 2x
 *   duplicate; one copy makes it jump/blank, three+ makes it stutter.
 * - `.nav__flag-bar` colour is positional, not classed: 1st = red, 2nd =
 *   cream, 3rd = green, 4th = blue (nth-child in site.css). Emit exactly
 *   four `<span class="nav__flag-bar">` in that order.
 * - `.edition__poster` is a floated image (float:left), so it must be the
 *   FIRST child inside `.edition`, before the badge/title/body text, for
 *   the float + text-wrap to come out right; `.edition` itself clears its
 *   float automatically (see `.edition::after`).
 */

/* =============================================================================
   FONTS — self-hosted, see assets/fonts/. Manifest + verification in the
   agent report. latin + latin-ext subsets only (covers á é í ó ú ñ ü, the
   WSÁNEĆ Ć = U+0106 and lək̓ʷəŋən ə = U+0259 / ŋ = U+014B in the footer
   acknowledgement — all inside the latin-ext unicode-range below, copied
   verbatim from Google's own CSS2 response). Both families were served by
   Google as **variable fonts** (single file per subset covering the whole
   weight axis) — Jost wght 100–900, Shantell Sans wght 300–800 — so five
   Jost weights and three Shantell Sans weights resolve to just 2 physical
   files per family. font-display:swap throughout.
   ============================================================================= */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/shantell-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/shantell-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Google Fonts fallback (do NOT enable unless assets/fonts/*.woff2 are missing —
   enabling this reintroduces a fonts.googleapis.com/fonts.gstatic.com request
   and requires adding both hosts to style-src/font-src in the CSP, per
   BUILD-SPEC section 3):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&family=Shantell+Sans:wght@400;500;700&display=swap" rel="stylesheet">
   Not needed here — all four font files downloaded and verified. See report. */

/* =============================================================================
   TOKENS — BUILD-SPEC section 3, verbatim.
   ============================================================================= */
:root {
  --ink: #171310;
  --cream: #faf6ee;
  --yellow: #F5C518;
  --red: #E63229;
  --blue: #2456A6;
  --green: #2E9E4F;
  --orange: #F2A33C;
  --amber: #c77d0a;
  --muted: #3c3630;
  --muted-2: #5a534b;
  --panel: #faf0d8;
}

/* =============================================================================
   BASE — from each mockup's shared <style> block:
     body{margin:0;background:#faf6ee;font-family:'Jost',sans-serif;color:#171310}
     a{color:#2456A6;text-decoration:none}
     a:hover{color:#E63229}
   Any link that doesn't get its own colour rule below (nav brand, nav links,
   footer nav links, ticker link) correctly falls through to this a:hover red
   on hover — that's the mockups' real behaviour too: only 4 elements ever had
   style-hover, everything else just inherits the base link hover colour.
   ============================================================================= */
html {
  box-sizing: content-box;
}
body {
  margin: 0;
  background: var(--cream);
  font-family: 'Jost', sans-serif;
  color: var(--ink);
}
a {
  color: var(--blue);
  text-decoration: none;
}
a:hover {
  color: var(--red);
}
h1, h2, h3 {
  margin: 0;
}
p {
  margin: 0;
}
img {
  max-width: 100%;
  /* REQUIRED, do not remove. Templates set width/height attributes on <img>
     so the browser can reserve the box and avoid layout shift. Those
     attributes are presentational hints that map to CSS width/height. Any
     rule below that sets only a width (e.g. .fig__img{width:100%}) would
     otherwise leave the *attribute* height in force — and an element with a
     definite width AND height ignores `aspect-ratio` completely, which
     stretches every photo into a tall column. `height:auto` neutralises the
     hint so aspect-ratio governs, while the attributes still do their job. */
  height: auto;
}
iframe {
  max-width: 100%;
}

/* =============================================================================
   UTILITY — .visually-hidden .skip-link (SYNTHESIZED: a11y utilities used by
   templates but not present in any mockup; BUILD-SPEC section 12 requires a
   skip link and real landmarks).
   ============================================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
  font-size: 17px;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  transition: top .15s ease;
}
.skip-link:hover {
  color: var(--cream);
}
.skip-link:focus {
  top: 0;
}

/* =============================================================================
   LAYOUT — .page .wrap .wrap--wide .section .section--tight
   Source: the repeated inline pattern on every content <section> in all
   three mockups, e.g. (Homepage intro / About intro, byte-identical):
     padding:80px 48px 24px;max-width:1000px;margin:0 auto;width:100%;box-sizing:border-box
   and (Homepage #lineup / all three footers):
     max-width:1160px;margin:0 auto ...;box-sizing:border-box  (-> .wrap--wide)
   and the homepage wrapper div:
     <div style="min-height:100vh;display:flex;flex-direction:column">
   .section--tight (SYNTHESIZED pairing) reproduces the recurring "divider"
   block used identically 3x across the mockups (About Board, About Sponsors,
   Past Events' 2nd edition):
     border-top:4px solid #171310;padding-top:48px
   ============================================================================= */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrap {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.wrap--wide {
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.section {
  padding: 72px 48px 48px;
}
.section--tight {
  padding-top: 48px;
  border-top: 4px solid var(--ink);
}

/* =============================================================================
   NAV — source: the <nav> block, identical across all three mockups except
   which link carries .nav__link--active. Mockup class names .nav-burger /
   .nav-links are renamed .nav__burger / .nav__links per BUILD-SPEC's frozen
   BEM vocabulary; #nav-t (the checkbox id) has no class equivalent in
   BUILD-SPEC and is kept as a literal id selector — see template handoff
   note at the top of this file.
   ============================================================================= */
#nav-t {
  display: none;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 48px;
  background: var(--yellow);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 4px solid var(--ink);
  flex-wrap: wrap;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
/* The Society's own wordmark, used in place of the mockup's CSS flag mark.
   Height is fixed and width follows the image's own ratio; the explicit
   `width:auto` is needed because the global img rule's height:auto would
   otherwise pair with the 275px width attribute and pin the wrong size. */
.nav__logo {
  height: 50px;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  .nav__logo { height: 42px; }
}
.nav__flag {
  display: flex;
  gap: 4px;
}
.nav__flag-bar {
  display: block;
  width: 14px;
  height: 28px;
  border-radius: 8px;
}
.nav__flag-bar:nth-child(1) { background: var(--red); }
.nav__flag-bar:nth-child(2) { background: var(--cream); }
.nav__flag-bar:nth-child(3) { background: var(--green); }
.nav__flag-bar:nth-child(4) { background: var(--blue); }
.nav__title {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.nav__sub {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .14em;
}
.nav__burger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav__burger span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
}
.nav__links {
  display: flex;
  align-items: center;
  /* Trimmed from the mockup's original 28px after the type-scale increase
     (16->18px here): at 28px, real glyph-width measurement against the
     shipped Jost font showed the one-line nav (brand + 5 links, above the
     768px burger breakpoint) needed ~873px of viewport before wrapping to
     a second line, vs. ~822px pre-increase. That wrap is graceful
     (flex-wrap, not clipping) and already existed pre-increase, so this
     is a modest trim, not a full reversal: 20px recovers most of the lost
     headroom (new threshold ~841px, close to the original ~822px) while
     keeping more of the mockup's nav rhythm than a deeper cut would. */
  gap: 20px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.nav__link {
  color: var(--ink);
}
.nav__link--active {
  color: var(--ink);
  border-bottom: 3px solid var(--red);
}
.nav__cta {
  background: var(--ink);
  color: var(--yellow);
  padding: 10px 22px;
  border-radius: 999px;
}
/* HOVER CONVERSION 1 of 4 — nav CTA, style-hover="background:#E63229;color:#fff"
   (present verbatim on the "Contact Us" pill in all three mockups). */
.nav__cta:hover {
  background: var(--red);
  color: #fff;
}

/* =============================================================================
   HERO — source: Homepage <header>. Note: .hero__card has NO box-sizing
   declared in the mockup (padding:60px 56px on a max-width:840px box ->
   content-box, renders 952px). Left as content-box deliberately.
   ============================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--red);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__inner {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 72px 24px 88px;
}
.hero__card {
  background: var(--orange);
  border-radius: 44px;
  max-width: 840px;
  width: 100%;
  padding: 60px 56px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  animation: floatSlow 9s ease-in-out infinite;
}
.hero__kicker {
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.hero__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(42px, 5.8vw, 64px);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.hero__title sup {
  font-size: .5em;
}
.hero__subtitle {
  margin: 24px auto 0;
  font-weight: 600;
  font-size: clamp(23px, 2.6vw, 28px);
  line-height: 1.4;
  max-width: 640px;
}
.hero__date {
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;
  font-size: 25px;
  margin-top: 26px;
}
.hero__venue {
  font-family: 'Shantell Sans', cursive;
  font-size: 21px;
  margin-top: 8px;
}
.hero__venue a {
  color: var(--ink);
}
.hero__venue a:last-of-type {
  text-decoration: underline;
}
.hero__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.hero__note {
  margin: 28px 0 0;
  font-family: 'Shantell Sans', cursive;
  font-size: 19px;
  font-weight: 500;
}

/* =============================================================================
   BUTTONS — source: the two hero <a> buttons plus the nav CTA's sibling
   pattern generalised as .btn--cta for reuse outside the nav (BUILD-SPEC
   lists .btn--cta under "Buttons" separately from .nav__cta under "Nav").
   ============================================================================= */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.btn--solid {
  background: var(--ink);
  color: var(--cream);
  padding: 16px 32px;
}
/* HOVER CONVERSION 2 of 4 — hero solid button ("See the line-up"),
   style-hover="background:#2456A6;color:#fff". */
.btn--solid:hover {
  background: var(--blue);
  color: #fff;
}
.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 13px 30px;
}
/* HOVER CONVERSION 3 of 4 — hero outline button ("Tickets at Cinecenta"),
   style-hover="background:#171310;color:#F2A33C". */
.btn--outline:hover {
  background: var(--ink);
  color: var(--orange);
}
.btn--cta {
  background: var(--ink);
  color: var(--yellow);
  padding: 10px 22px;
}
.btn--cta:hover {
  background: var(--red);
  color: #fff;
}

/* =============================================================================
   TICKER — source: Homepage ticker strip.
   ============================================================================= */
.ticker {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: 13px 0;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 28s linear infinite;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ticker__item {
  white-space: nowrap;
  padding-right: 48px;
}
.ticker__item a {
  color: var(--cream);
}
.dot--yellow { color: var(--yellow); }
.dot--red { color: var(--red); }
.dot--green { color: var(--green); }
.dot--blue { color: var(--blue); }

/* =============================================================================
   PAGE HEADER — source: About Us / Past Events <header> (green / blue).
   .pagehead--red is SYNTHESIZED (documented 3rd token variant; no red
   pagehead exists in the 3 mockups, but the pattern is identical).
   ============================================================================= */
.pagehead {
  position: relative;
  overflow: hidden;
}
.pagehead--green { background: var(--green); }
.pagehead--blue { background: var(--blue); }
.pagehead--red { background: var(--red); }
.pagehead__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.pagehead__inner {
  position: relative;
  padding: 88px 48px;
  text-align: center;
}
.pagehead__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 5.2vw, 60px);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}
.pagehead__tagline {
  margin: 14px 0 0;
  font-family: 'Shantell Sans', cursive;
  font-size: 23px;
  color: #fff;
}

/* =============================================================================
   PROSE — source: Homepage intro paragraphs (.lede, 22px/1.6) and About
   intro / Sponsors intro (.prose, 20px/1.65, text-wrap:pretty). Adjacent
   paragraphs get their natural mockup gap via a sibling selector so no
   extra "first/last" modifier class is needed.
   ============================================================================= */
.lede {
  margin: 0;
  font-size: 24px;
  line-height: 1.6;
  color: var(--ink);
}
.prose {
  margin: 0;
  font-size: 22px;
  line-height: 1.65;
  text-wrap: pretty;
}
.prose--sm {
  margin: 0;
  font-size: 21px;
  line-height: 1.6;
}
.lede + .lede,
.lede + .prose,
.lede + .prose--sm,
.prose + .prose,
.prose + .prose--sm,
.prose--sm + .prose--sm,
.prose--sm + .prose {
  margin-top: 20px;
}
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }

/* Generic section heading — every <h2> in About Us (all three identical:
   "The Hispanic Film Society of Victoria" / "Board of Directors" /
   "Sponsors") uses this exact inline style with no class of its own.
   #lineup's own <h2> overrides the differing size/margin below. */
h2 {
  margin: 0 0 24px;
  font-weight: 800;
  font-size: clamp(30px, 3.5vw, 42px);
  text-transform: uppercase;
  line-height: 1.12;
}
h2 sup {
  font-size: .55em;
}
#lineup h2 {
  margin: 0 0 44px;
  font-size: clamp(34px, 3.9vw, 48px);
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* =============================================================================
   FIGURES — source: Homepage's 3-photo intro grid (Mariachi / Pablo
   Cárdenas / Robin Layne).
   ============================================================================= */
.figrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fig__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 24px;
  border: 4px solid var(--ink);
  box-sizing: border-box;
  display: block;
}
.fig__img--red { border-color: var(--red); }
.fig__img--yellow { border-color: var(--yellow); }
.fig__img--green { border-color: var(--green); }
.fig__cap {
  font-family: 'Shantell Sans', cursive;
  font-size: 19px;
  text-align: center;
}

/* =============================================================================
   FILM ROWS — source: Homepage line-up loop (sc-for) + the extraTitle
   callout (sc-if). Accent colour comes from data as a token name and is
   applied as ONE .film--<token> class on the .film article; every
   descendant that needs the accent reads the --accent custom property this
   sets, so no per-row inline colour is ever needed.
   ============================================================================= */
.filmlist {
  display: block;
}
.film {
  border-top: 4px solid var(--ink);
  padding: 40px 0;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.film--red { --accent: var(--red); }
.film--blue { --accent: var(--blue); }
.film--green { --accent: var(--green); }
.film--amber { --accent: var(--amber); }
.film--ink { --accent: var(--ink); }

.film__media {
  flex: 1 1 380px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.film__badge {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;
  font-size: 19px;
  padding: 8px 20px;
  border-radius: 999px;
}
/* Music night reuses .film__badge with .film--ink: bg ink / text yellow,
   not the white text every other accent colour uses. */
.film--ink .film__badge {
  color: var(--yellow);
}
.film__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 20px;
  background: var(--ink);
  display: block;
}
.film__body {
  flex: 1 1 480px;
  min-width: 320px;
}
.film__title {
  margin: 0;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.15;
}
.film__meta {
  margin: 8px 0 0;
  font-size: 21px;
  color: var(--muted);
}
.film__synopsis {
  margin: 18px 0 0;
  font-size: 21px;
  line-height: 1.6;
  text-wrap: pretty;
}

.callout {
  margin-top: 20px;
  background: var(--panel);
  border: 3px solid var(--accent);
  border-radius: 20px;
  padding: 22px 26px;
  box-sizing: border-box;
}
.callout__title {
  font-weight: 800;
  font-size: 21px;
  text-transform: uppercase;
  color: var(--accent);
}
.callout__body {
  margin: 10px 0 0;
  font-size: 19.5px;
  line-height: 1.6;
  white-space: pre-line;
  text-wrap: pretty;
}

/* =============================================================================
   MUSIC NIGHT — source: Homepage's music-night <article>. Only the classes
   BUILD-SPEC actually names live here (.music .music__thumbs .music__thumb);
   the title/meta/badge reuse Film-row classes — see the handoff note at the
   top of this file.
   ============================================================================= */
.music {
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  padding: 40px 0;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
}
.music__thumbs {
  display: flex;
  gap: 10px;
  /* Without this the default `stretch` makes each thumb fill the flex line's
     cross size, which overrides the computed square height from aspect-ratio
     and pulls the photos into tall columns. */
  align-items: flex-start;
}
.music__thumb {
  width: 33%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* =============================================================================
   NOTE BAND — source: Homepage's $1-membership note.
   ============================================================================= */
.noteband {
  background: var(--yellow);
  padding: 64px 48px;
  margin-top: 40px;
}
.noteband__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 36px;
  align-items: center;
  flex-wrap: wrap;
}
.noteband__coin {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 36px;
}
.noteband__body {
  flex: 1;
  min-width: 280px;
}
.noteband__body h3 {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 30px;
  text-transform: uppercase;
}
.noteband__body p {
  margin: 0;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
}

/* =============================================================================
   ARCHIVE (Past Events) — source: the 2025 / 2022 recap blocks. .edition
   itself carries no border; a 2nd (or later) .edition sibling automatically
   gets the "divider" treatment via the adjacent-sibling rule below, matching
   the mockup exactly without a modifier class.
   .edition__poster / .filmtable / .filmtable__row are SYNTHESIZED — the
   mockup only demonstrates 2 of what the live archive is many editions of
   (assets/img/posters/ has one poster per edition back to 2010); a compact
   table is a reasonable, on-brand way to list a whole year's films without
   full prose synopses for every one.
   ============================================================================= */
.edition {
  display: block;
}
.edition + .edition {
  border-top: 4px solid var(--ink);
  padding-top: 48px;
  margin-top: 56px;
}
.edition__poster {
  width: 180px;
  max-width: 40%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 4px solid var(--ink);
  box-sizing: border-box;
  display: block;
  float: left;
  margin: 0 28px 20px 0;
}
.edition::after {
  content: "";
  display: table;
  clear: both;
}
.edition__year {
  display: inline-block;
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  padding: 6px 18px;
  border-radius: 999px;
}
.edition__year--red { background: var(--red); }
.edition__year--blue { background: var(--blue); }
.edition__year--green { background: var(--green); }
.edition__year--amber { background: var(--amber); }
.edition__year--ink { background: var(--ink); }
.edition__title {
  margin: 20px 0 18px;
  font-weight: 800;
  font-size: clamp(28px, 3.1vw, 38px);
  text-transform: uppercase;
  line-height: 1.15;
}
.edition__title sup {
  font-size: .55em;
}
.edition__body {
  margin: 0;
  font-size: 22px;
  line-height: 1.65;
  text-wrap: pretty;
}
.edition__body + .edition__body {
  margin-top: 18px;
}
.filmtable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 19px;
}
.filmtable__row td,
.filmtable__row th {
  padding: 4px 12px 4px 0;
  text-align: left;
  vertical-align: top;
}

/* Header rule sits under the column labels only. */
.filmtable thead th {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   ONE SCREENING = ONE <tbody class="filmtable__group">.
   The two rows inside a group (the 6-column line and its synopsis) stay tight
   together; the padding and the divider rule land BETWEEN groups, so each day
   reads as a single block instead of six evenly-spaced rows where a synopsis
   sits as far from its own title as from the next film's.
   --------------------------------------------------------------------------- */
.filmtable__group {
  border-bottom: 1px solid rgba(23, 19, 16, .15);
}
.filmtable__group > tr:first-child > td {
  padding-top: 26px;
}
.filmtable__group > tr:last-child > td {
  padding-bottom: 26px;
}
/* The film's own line: make the title the anchor your eye lands on.
   `white-space: nowrap` was removed here after the type-scale increase:
   at the larger size, the rare combined double-screening date (e.g. "...
   16 and Thursday September 17", 2021 edition) forced this column's
   min-content width past the .wrap container's 904px content cap on
   every viewport ≥ ~700px, overflowing the table horizontally. A normal
   wrap costs nothing for the common single-date case (still one line —
   "Wednesday September 16" is far short of needing to break) and lets
   only that rare combined string fold to a second line instead of
   blowing out the table. */
.filmtable__group > tr:first-child > td:nth-child(1) {
  font-weight: 600;
}
.filmtable__group > tr:first-child > td:nth-child(2) {
  font-weight: 700;
}
/* Synopsis sits directly under its own title, indented and quieter.
   80ch was tuned for the old 17px synopsis size (~816px, a comfortable
   reading measure). `ch` scales with font-size, so at the new 19px it
   would compute to ~912px — wider than the .wrap container's 904px content
   cap — silently defeating the line-length cap the container itself would
   then be the only limit. Trimmed to 72ch (~821px at 19px) to keep the
   original comfortable measure, which matters more, not less, at a larger
   type size for an older reader. */
.filmtable__detail > td {
  padding-top: 8px !important;
  color: var(--muted);
  line-height: 1.6;
  max-width: 72ch;
}

@media (max-width: 700px) {
  /* Six columns cannot survive a phone. Collapse the grid to stacked
     label/value pairs so nothing is cut off or horizontally scrolled. */
  .filmtable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .filmtable,
  .filmtable__group,
  .filmtable__row,
  .filmtable__row > td {
    display: block;
    width: 100%;
  }
  .filmtable__group > tr:first-child > td {
    padding: 2px 0;
  }
  .filmtable__group > tr:first-child > td:nth-child(1) {
    padding-top: 26px;
    font-size: 17px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
  .filmtable__group > tr:first-child > td:nth-child(2) {
    font-size: 23px;
    line-height: 1.2;
  }
  .filmtable__detail > td {
    padding-bottom: 26px !important;
  }
}

/* =============================================================================
   SPONSORS — source: About Us sponsor logo grid. Logo max-height varies
   60–95px per instance in the mockup (a per-image inline value); a single
   shared class can only carry one number, so .sponsor__img uses 80px, the
   most common value in the mockup — see agent report.
   ============================================================================= */
.sponsorgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 48px;
  align-items: center;
}
.sponsor {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
}
.sponsor__img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

/* =============================================================================
   BOARD — source: About Us board-of-directors grid.
   ============================================================================= */
.boardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 40px;
  font-size: 22px;
  line-height: 1.5;
}
.board__name {
  margin: 0;
}

/* =============================================================================
   MEDIA PAGE — fully SYNTHESIZED (no mockup at all; the frozen class names
   come straight from BUILD-SPEC section 4). Grouped by year like the
   archive, with a compact one-line-per-item press list underneath.
   ============================================================================= */
.medialist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mediayear {
  margin: 48px 0 20px;
  font-weight: 800;
  font-size: clamp(28px, 3.1vw, 38px);
  text-transform: uppercase;
  border-top: 4px solid var(--ink);
  padding-top: 32px;
}
.mediayear:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.mediaitem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(23, 19, 16, .12);
}
.mediaitem__source {
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--blue);
}
.mediaitem__title {
  font-size: 21px;
  line-height: 1.4;
  flex: 1 1 320px;
}
.mediaitem__date {
  font-size: 17px;
  color: var(--muted-2);
  white-space: nowrap;
}
.mediaitem__link {
  color: var(--ink);
}

/* =============================================================================
   CONTACT / FORM — fully SYNTHESIZED (no mockup; rendered above the footer
   on every page per BUILD-SPEC section 2). Kept inside the same visual
   language: ink borders, pill/rounded radii, cream background, generous
   Jost body type.
   ============================================================================= */
.contact {
  padding: 72px 48px;
}
.contact__inner {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 8px;
}
.form__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form__label {
  font-weight: 600;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
}
.form__input,
.form__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 19px;
}
.form__textarea {
  min-height: 160px;
  resize: vertical;
}
.form__input:focus,
.form__textarea:focus {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.form__error {
  color: var(--red);
  font-size: 16px;
  font-weight: 600;
}
/* Honeypot: genuinely invisible to sighted users, off-screen rather than
   display:none (a display:none field is trivial for a bot to detect and
   skip). See the template handoff note at the top of this file for the
   required aria-hidden/tabindex/autocomplete attributes. */
.form__hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.alert {
  padding: 18px 22px;
  border-radius: 16px;
  font-size: 18px;
  line-height: 1.5;
  border: 3px solid var(--ink);
}
.alert--ok {
  background: var(--panel);
  border-color: var(--green);
}
.alert--err {
  background: #fff;
  border-color: var(--red);
}

/* =============================================================================
   FOOTER — source: the <footer id="contact"> block, identical across all
   three mockups (Homepage lacks margin-top:auto since its footer directly
   follows the note band; About/Past Events set it explicitly to pin a
   short page's footer to the bottom — applied universally here, which is
   visually identical when the footer isn't already at the bottom).
   ============================================================================= */
.foot {
  background: var(--ink);
  color: var(--cream);
  padding: 72px 48px 40px;
  position: relative;
  overflow: hidden;
  margin-top: auto;
}
.foot__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .14;
}
.foot__inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.foot__brand {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.foot__brand > span {
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.foot__addr {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(250, 246, 238, .8);
}
.foot__mail {
  color: var(--yellow);
  font-weight: 600;
  font-size: 20px;
}
/* HOVER CONVERSION 4 of 4 — footer email link, style-hover="color:#E63229". */
.foot__mail:hover {
  color: var(--red);
}
.foot__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 600;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.foot__link {
  color: var(--cream);
}
.foot__ack {
  position: relative;
  max-width: 1160px;
  margin: 56px auto 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(250, 246, 238, .6);
}

/* =============================================================================
   MOTION — floatSlow (hero card) + ticker (ticker track), kept verbatim
   from the mockups, with a prefers-reduced-motion override per BUILD-SPEC
   section 12.
   ============================================================================= */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__card {
    animation: none;
  }
  .ticker__track {
    animation: none;
  }
  .skip-link {
    transition: none;
  }
}

/* =============================================================================
   RESPONSIVE — the CSS-only burger menu, verbatim from every mockup's
   @media(max-width:768px) block, renamed to the frozen .nav__burger /
   .nav__links classes. No !important needed: this block is later in
   source order than the base .nav__links rule above, so equal-specificity
   cascade already wins.
   ============================================================================= */
@media (max-width: 768px) {
  .nav__burger {
    display: flex;
  }
  .nav__links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 16px 0 8px;
  }
  #nav-t:checked ~ .nav__links {
    display: flex;
  }
  .nav {
    padding: 14px 20px;
  }
}

/* =============================================================================
   YEAR FILTER (Past Events) — ADDED after the frozen vocabulary, at the
   owner's request: 15 editions in one scroll is a wall, so the archive now
   shows one edition at a time with a timeline strip along the top.

   Implemented as plain links driving a ?year= query param, NOT as a
   scripted widget: it works with JavaScript disabled, each year is a real
   shareable URL, it needs no CSP exception, and the browser's own
   back button behaves correctly.
   ============================================================================= */
.yearbar {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.yearnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 44px;
  padding: 0;
  list-style: none;
}
.yearnav__link {
  display: block;
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  padding: 9px 17px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.yearnav__link:hover,
.yearnav__link:focus-visible {
  background: var(--ink);
  color: var(--cream);
}
.yearnav__link--active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.yearnav__link--active:hover,
.yearnav__link--active:focus-visible {
  background: var(--red);
  color: #fff;
}
.archive-empty {
  font-size: 21px;
  line-height: 1.6;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .yearnav__link { transition: none; }
}

/* =============================================================================
   PHOTO GALLERY (/media) — ADDED after the frozen vocabulary.
   Photos recovered from the old site's Duplicator migration archive; they were
   never in the old page's HTML, only in wp-content/uploads.

   Thumbnails are a fixed 3:2 crop so the grid stays even regardless of the
   source photo's shape. Clicking one opens the full image in a native
   <dialog>, which gives us modal semantics, focus trapping and Esc-to-close
   for free. Without JS each thumbnail is still a plain link to the full-size
   image, so the gallery degrades to something completely usable.
   ============================================================================= */
.gallery {
  margin-top: 28px;
}
.gallery__group + .gallery__group {
  margin-top: 52px;
}
.gallery__dates {
  margin: 2px 0 18px;
  font-family: 'Shantell Sans', cursive;
  font-size: 18px;
  color: var(--muted);
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__item {
  margin: 0;
}
.gallery__link {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 4px solid var(--ink);
  box-sizing: border-box;
  background: var(--ink);
  line-height: 0;
}
.gallery__link:hover,
.gallery__link:focus-visible {
  border-color: var(--red);
}
.gallery__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.gallery__link:hover .gallery__img,
.gallery__link:focus-visible .gallery__img {
  transform: scale(1.04);
}
.gallery__cap {
  margin: 9px 2px 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(96vw, 1400px);
  max-height: 94vh;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(10, 8, 7, .88);
}
.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  background: var(--ink);
}
.lightbox__cap {
  color: var(--cream);
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
  max-width: 70ch;
  margin: 0 auto;
}
.lightbox__count {
  display: block;
  font-family: 'Shantell Sans', cursive;
  font-size: 15px;
  color: rgba(250, 246, 238, .7);
  margin-top: 4px;
}
.lightbox__bar {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.lightbox__btn {
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--cream);
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
}
.lightbox__btn:hover,
.lightbox__btn:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
}
.lightbox__btn[disabled] {
  opacity: .4;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__img { transition: none; }
  .gallery__link:hover .gallery__img,
  .gallery__link:focus-visible .gallery__img { transform: none; }
}