/* Cinema page theme — deep glossy green + aged copper, Megrim/Lobster Two
   title lockup, Literata (Light for running text, Semibold for UI/structure —
   swapped from Newsreader 2026-08-16, see NOTES.md Fonts section).
   Loaded after assets/style.css on this page only; overrides the shared theme. */

:root {
  --bg: #14231b;
  --bg-raised: #1c3126;
  --bg-card: #1a2c22;
  --border: #33503d;
  --cream: #f1e8d4;
  --cream-dim: #b7c2b3;
  --copper: #b3714a;
  --copper-dim: #8f5a3a;
  --copper-bright: #c98a5f;
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: "Literata", Georgia, serif;
  font-weight: 300;
  font-optical-sizing: auto;
}

a { color: var(--copper-bright); font-weight: 600; }
a:hover { text-decoration: underline; }

.top-nav {
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding: 10px 20px 8px;
}

.top-nav a.home { color: var(--copper-bright); }

/* This page's own back link — deliberately quieter than the bold
   "← citywhat" / "← Seattle Cinema" text links used one level up
   the hierarchy elsewhere on the site. Cinema is functionally the landing
   page right now (only one city, and Cinema is the only live section under
   it), so a loud "back to Seattle" read as insisting on a hierarchy nobody
   is navigating day to day. Icon only, dim by default, no border — a nod
   that going back is possible without making a fuss about it. */
.back-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--cream-dim);
  padding: 4px;
  margin: -4px;
  border-radius: 6px;
}
.back-chevron:hover { color: var(--copper-bright); background: rgba(179,113,74,0.08); }

/* Cross-section nav — "Schedule · Venues · Community" — added 2026-09-05
   when Community became a sibling section next to Schedule and Venues.
   Sits on the top utility line, right-aligned opposite whatever back link
   that page already has (.back-chevron on Schedule/Community, .home text
   link on Venues) via .top-nav's existing space-between. Deliberately
   plain text, not pills or vertical bars — a quiet way to jump between
   the three sibling sections, not a primary nav. */
.section-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.section-nav a { color: var(--cream-dim); }
.section-nav a:hover { color: var(--copper-bright); text-decoration: none; }
.section-nav .current { color: var(--copper-bright); }
.section-nav .dot { color: var(--cream-dim); opacity: 0.55; }

/* Community hub's card grid — scoped override of the shared .app-grid/
   .app-card from style.css (added 2026-09-05). The plain .app-grid used on
   /seattle/ auto-fills into 3 narrower columns; Community only has 4 cards,
   so a fixed 2-column grid reads as a balanced 2×2 instead. Wider columns
   mean the card text wraps onto fewer lines, and the padding is nudged
   wider/shorter to match — content, typography, and icons are untouched.
   Falls back to the normal single-column mobile layout at the existing
   680px breakpoint, same as it did before this override existed. */
.community-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.community-grid .app-card {
  padding: 20px 28px 18px;
}

/* Shared header pattern for the Community CHILD pages — Organizations,
   Festivals, Filmmaker Resources, Classes & Workshops, and any future ones
   — added 2026-09-05. Diagnosis: these pages were reusing the site's big
   two-word hero h1 (104px, built for "SeattleCinema"/"Film Community"),
   not a per-page CSS/markup inconsistency — all four had byte-identical
   header markup already. At 104px, "Filmmaker Resources" happened to
   cross the ~940px content width while "Classes & Workshops" (nearly the
   same length) coincidentally didn't, in the real Lobster Two font —
   that's what read as "inconsistent," not an actual bug in any one page.
   Fix: give these subpages their own correctly-sized title instead of the
   hero size. Reuses the "real page title" treatment venue detail pages
   already use (.venue-header h1: 40px Arima, copper, bold) so titles
   across every Cinema subpage read as one system. Also lifts the
   hub-level .subtitle's 640px max-width (sized for short one-line
   subtitles) — these subtitles are longer and were wrapping well before
   running out of the ~940px .wrap actually available.
   Scope everything through one class, `.community-subpage`, added to the
   page's `.wrap` div — every child page picks up identical header
   behavior automatically, so adding a fifth one later doesn't mean
   rediscovering sizing/width by eye. */
.community-subpage h1 {
  font-family: "Arima", cursive;
  font-weight: 700;
  color: var(--copper-bright);
  font-size: 40px;
  letter-spacing: 0.005em;
  line-height: 1.2;
  margin: 0 0 4px;
}
.community-subpage .subtitle {
  max-width: none;
  margin: 0 0 14px;
}

/* Vertical-spacing tightening pass, 2026-09-05 — the header block above
   (h1 + subtitle + .top-rule) had noticeably more air in it than the rest
   of the site once these subpages were compared side by side: 10px under
   the h1, 26px under the subtitle, then another 26px below the divider
   before any content started. Typography, sizes, colors, and the
   divider's own border style are untouched here — this only tightens the
   margins/padding around them. `.community-subpage-nav` scopes the
   back-link line's own bottom padding so this doesn't touch `.top-nav` on
   Schedule/Venues/the Community hub, which share the same class but
   aren't part of this pass. Note the `.wrap.community-subpage` compound
   selector on the padding-top override below — a bare `.community-subpage`
   rule has the same specificity as the generic `.wrap { padding-top: 14px; }`
   a few lines down, and since that one comes later in the file it was
   silently winning the cascade, so the first pass of this fix never
   actually took effect despite looking correct in the source. Compounding
   the two classes together raises specificity so this rule always wins,
   regardless of source order. */
.wrap.community-subpage { padding-top: 10px; }
.community-subpage-nav { padding-bottom: 6px; }
.community-subpage .top-rule { margin: 0 0 16px; }

.wrap { padding-top: 14px; }

h1 {
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 104px;
  line-height: 0.95;
  margin: 6px 0 0;
}

h1 .accent {
  font-style: normal;
}

/* "Seattle" in Megrim, "Cinema" in Lobster Two — no space between the two words */
h1 .city,
h1 {
  font-family: "Megrim", cursive;
}

h1 .accent {
  font-family: "Lobster Two", cursive;
  font-weight: 700;
  color: var(--copper-bright);
  font-size: 1.05em;
}

.subtitle {
  color: var(--cream-dim);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  margin: -6px 0 14px;
}

/* divider under the subtitle, before "Pick a day" begins */
.top-rule {
  border-top: 1px solid var(--border);
  margin: 0 0 26px;
}

.notice {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--copper);
  color: var(--cream-dim);
  font-weight: 300;
}

.notice strong { color: var(--cream); font-weight: 600; }
.notice a { color: var(--copper-bright); }

/* ---- Pick a day / Pick a cinema reels ---- */

.reel-heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
  font-weight: 600;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.reel-heading-sub {
  text-transform: none;
  letter-spacing: normal;
  color: var(--copper-bright);
  font-weight: 300;
  font-family: "Literata", Georgia, serif;
  font-size: 12.5px;
}

.filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  background: rgba(179,113,74,0.16);
  border: 1px solid var(--copper-dim);
  color: var(--copper-bright);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  font-size: 11.5px;
  padding: 3px 8px 3px 10px;
  border-radius: 100px;
  cursor: pointer;
}
.filter-badge .x { font-size: 13px; line-height: 1; }

.day-reel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 22px;
  scrollbar-width: thin;
}
.day-card {
  flex: 0 0 auto;
  min-width: 112px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px 13px;
  cursor: pointer;
}
.day-card.active { background: var(--copper); border-color: var(--copper); }
.day-card .day-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
  font-weight: 600;
}
.day-card.active .day-label { color: rgba(20,35,27,0.72); }
.day-card .day-number {
  font-size: 26px;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
  margin: 2px 0 4px;
}
.day-card.active .day-number { color: #14231b; }
.day-card .day-stat { font-size: 11.5px; color: var(--cream-dim); font-weight: 600; }
.day-card .day-stat .count { color: var(--copper-bright); }
.day-card.active .day-stat { color: rgba(20,35,27,0.65); }
.day-card.active .day-stat .count { color: #14231b; }

.cinema-reel { margin-top: 4px; }
.cinema-reel .day-card { min-width: 148px; position: relative; }
.cinema-reel .cinema-name { font-size: 14px; font-weight: 600; color: var(--cream); line-height: 1.25; margin: 2px 0 6px; }
.cinema-reel .day-card.active .cinema-name { color: #14231b; }
.cinema-reel .day-card.empty { opacity: 0.5; cursor: default; }
.cinema-reel .day-card.empty .day-stat { color: var(--cream-dim); }
.cinema-reel .day-card.selected .deselect-x {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
  line-height: 1;
  color: rgba(20,35,27,0.6);
}

/* ---- search + dropdown filters + pills ---- */

.search-row { margin-bottom: 14px; }
.search-row input[type="text"] {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  border-radius: 8px;
}

/* "Expand filters" button — square, same height as the search input, sits
   to its right. Collapses the day-of-week/theater/time/neighborhood
   dropdowns + the pill row behind a click at every width (not just mobile):
   search stays visible and functional either way, since it isn't part of
   the collapsible group. */
.search-row { display: flex; align-items: stretch; gap: 8px; }
.search-row input[type="text"] { flex: 1 1 auto; }
.filters-toggle {
  display: inline-flex;
  width: 48px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--cream-dim);
  cursor: pointer;
  padding: 0;
}
.filters-toggle:hover { border-color: var(--copper-dim); color: var(--copper-bright); }
.filters-toggle[aria-expanded="true"] { border-color: var(--copper); color: var(--copper-bright); background: rgba(179,113,74,0.1); }

.filters-expandable { display: none; }
.filters-expandable.expanded { display: block; }

.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.filter-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cream-dim);
  font-weight: 600;
  margin-bottom: 6px;
}
.filter-field select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 13.5px;
  border-radius: 6px;
}

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px; }
.pill {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--copper-dim);
  color: var(--copper-bright);
  background: rgba(179,113,74,0.1);
  cursor: pointer;
}
.pill.active { background: var(--copper); border-color: var(--copper); color: #14231b; }
.pill.clear { border: 1px dashed var(--border); background: transparent; color: var(--cream-dim); }

.rule { border-top: 1px solid var(--border); margin-bottom: 22px; }

.controls { font-weight: 600; }

select, input[type="text"] {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: "Literata", Georgia, serif;
  font-weight: 600;
}

select:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--copper);
}

input[type="text"]::placeholder { color: var(--cream-dim); font-weight: 300; }

.day-heading {
  color: var(--copper);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: 0.09em;
}

/* Every day after the first renders collapsed by default — click to open.
   Keeps a full "today through end of data" listing from being one huge
   scroll while still surfacing every date + how much is on that day. */
.day-heading-collapsible {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-transform: none;
  letter-spacing: normal;
  font-family: "Literata", Georgia, serif;
  font-size: 15px;
}
.day-heading-collapsible:hover { color: var(--copper-bright); }
.day-heading-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  color: var(--copper-dim);
  transform: rotate(0deg);
  transition: transform 0.15s ease, color 0.15s ease;
}
.day-heading-collapsible:hover .day-heading-toggle { color: var(--copper-bright); }
.day-heading-collapsible.expanded .day-heading-toggle { transform: rotate(90deg); color: var(--copper-bright); }
.day-heading-count {
  margin-left: auto;
  color: var(--cream-dim);
  font-weight: 300;
  font-size: 12.5px;
  font-style: italic;
  white-space: nowrap;
}

/* Month-grouped sections (2026-08-16) — beyond today + the next few
   individually-listed days, everything else collapses into one heading
   per calendar month, itself collapsed by default; expanding it reveals
   that month's remaining days as normal collapsed day headings (nested
   inside .month-days-group, which just indents them so the two-level
   hierarchy — month, then day — reads clearly). Keeps a listing that
   runs from today through next month from being an unbroken wall of
   collapsed-but-still-visible day rows. September currently behaves
   exactly like August here — collapsed, no special treatment — an
   auto-expand-as-it-gets-closer behavior is a later refinement, not
   implemented yet. */
.month-heading {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 40px 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-family: "Literata", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--copper-bright);
}
.month-heading:first-of-type { margin-top: 32px; }
.month-heading:hover { color: var(--copper); }
.month-heading-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  color: var(--copper-dim);
  transform: rotate(0deg);
  transition: transform 0.15s ease, color 0.15s ease;
}
.month-heading:hover .month-heading-toggle { color: var(--copper); }
.month-heading.expanded .month-heading-toggle { transform: rotate(90deg); }
.month-heading-count {
  margin-left: auto;
  color: var(--cream-dim);
  font-weight: 300;
  font-size: 12.5px;
  font-style: italic;
  white-space: nowrap;
}

.month-days-group {
  margin-left: 16px;
  padding-left: 14px;
}
/* style.css has a shared `.day-heading:first-of-type { margin-top: 4px }`
   meant only for "today" at the very top of the whole list. :first-of-type
   resets per parent, so nesting days inside .month-days-group made the
   first day in EVERY expanded month (e.g. Aug 20) match that rule too,
   landing it 4px below the month heading instead of the normal 32px every
   other day gets — cramped/misaligned compared to its own siblings.
   Confirmed via computed styles in a headless browser, not guessed. */
.month-days-group .day-heading:first-of-type { margin-top: 32px; }

/* ---- screening rows ---- */

.screening-row {
  display: grid;
  grid-template-columns: 72px 1fr 190px 152px;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.screening-row:hover { background: rgba(179, 113, 74, 0.05); }

.screening-time { color: var(--cream-dim); font-weight: 600; line-height: 1.3; padding-top: 5px; }

/* Shared style.css sets .screening-main to `display: flex; flex-direction:
   column` for the old simple-listing theme — that blockifies every direct
   child (including .film-title and .film-year, which are meant to sit on
   the same line), forcing the year onto its own line below the title.
   Override back to block so title+year stay inline; .film-director keeps
   its own explicit `display: block` below to land on its own line. */
.screening-main { display: block; line-height: 1.3; }
.screening-cinema, .screening-actions { align-self: center; }

.film-title { font-family: "Arima", cursive; font-weight: 700; color: var(--copper-bright); font-size: 1.15em; }
.film-year { font-family: "Literata", Georgia, serif; font-weight: 300; color: var(--cream-dim); font-size: 0.85em; margin-left: 6px; }
.film-director { display: block; color: var(--cream); font-weight: 300; margin-top: 3px; }

.screening-cinema a.cinema-link { display: block; font-family: "Literata", Georgia, serif; color: var(--cream); font-size: 15px; font-weight: 500; text-decoration: none; }
.screening-cinema a.cinema-link:hover { color: var(--copper-bright); text-decoration: underline; }
.screening-hosted { display: block; color: var(--copper); font-weight: 300; font-size: 12px; margin-top: 3px; }
/* The @ glyph reads visually heavier/larger than the letters around it at
   the same font-size — sized down a touch, 2026-08-17, so "@ Venue Name"
   doesn't look front-loaded. */
.screening-hosted .at-symbol, .venue-upcoming-location .at-symbol { font-size: 0.8em; }

.screening-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-right: 6px; }

/* Letterboxd — icon-only, same pill height as ticket-button, colorized to
   the real brand mark (orange/green/blue), blended with screen mode so
   the overlaps light up on our dark background the way they do in
   Letterboxd's own dark UI. */
.screening-actions a.lb-icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: transparent;
  padding: 6px 12px;
  border-radius: 100px;
  text-decoration: none;
  flex: 0 0 auto;
}
.screening-actions a.lb-icon-pill:hover { border-color: var(--copper-dim); background: rgba(179,113,74,0.08); }
.screening-actions a.lb-icon-pill .lb-logo circle { mix-blend-mode: screen; }

.screening-actions a.ticket-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--copper-bright);
  border: 1px solid var(--copper-dim);
  background: rgba(179,113,74,0.1);
  padding: 6px 11px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
}
.screening-actions a.ticket-button:hover { background: rgba(179,113,74,0.2); }
.screening-actions a.ticket-button.free {
  color: #d4af37;
  border: 1px solid #a8862c;
  background: rgba(212,175,55,0.12);
}
.screening-actions a.ticket-button.free:hover { background: rgba(212,175,55,0.22); }

.empty-state { color: var(--cream-dim); font-weight: 300; }
.empty-state-clear {
  display: inline-block;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px dashed var(--border);
  color: var(--cream-dim);
  background: transparent;
  cursor: pointer;
}
.empty-state-clear:hover { border-color: var(--copper-dim); color: var(--copper-bright); }

footer.page-footer {
  border-top: 1px solid var(--border);
  color: var(--cream-dim);
  font-weight: 300;
}

/* ---- site footer link chips (cinema hub, venue pages, venues hub) —
   2026-08-16. Same pill treatment as .venue-meta-row's meta-link in
   venue.css, but defined here in cinema.css instead, since the cinema hub
   page loads cinema.css but not venue.css and this footer needs to appear
   on all three page types. .footer-credit is the plain "Part of Seattle
   Cinema — citywhat." line that already lived in each page's footer;
   these link chips sit above it, not replacing it. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cream);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 9px 14px;
  border-radius: 100px;
  text-decoration: none;
}
.footer-link:hover { border-color: var(--copper); color: var(--copper-bright); text-decoration: none; }
.footer-link svg { flex: 0 0 auto; opacity: 0.85; }
.footer-link:hover svg { opacity: 1; }
/* Letterboxd's real brand-color circles, screen-blended so overlaps light
   up on our dark background — same trick as .lb-icon-pill above. */
.footer-link.lb-footer-link .lb-logo circle { mix-blend-mode: screen; }
.footer-credit { margin: 0; }

/* ---- Organizations directory — alphabetical accordion (2026-09-05,
   collapsed-row styling refined 2026-09-05) ----
   Collapsed rows now follow the schedule's collapsed date/month rows as
   the primary reference (same disclosure glyph and behavior as
   .day-heading-collapsible/.day-heading-toggle above: same › glyph,
   leading the label rather than trailing it, same rotate-90-on-expand,
   same copper-dim -> copper-bright transition on the glyph itself) and
   .venue-list/.venue-row (Venues hub) as the secondary reference for row
   density/divider treatment. Organization names are copper/gold by
   default (matching the schedule's use of copper for emphasis text) and
   shift to the site's cream/white on hover/focus, rather than the reverse
   — deliberately the opposite direction from a plain link, since this is
   a disclosure control, not a navigation link. The wrapping <h2> has its
   default browser margin zeroed out — that default margin, not the
   button's own padding, was most of what made the first version feel far
   too loose. Expanded panels are a small .org-card wrapper — styled
   identically to .siff-location's bordered-card treatment in venue.css —
   containing .venue-blurb / .venue-meta-row / .venue-socials reused
   directly, unrenamed, from venue.css (this page loads venue.css for that
   reason, same as venue detail pages do). Multiple entries can be open at
   once; there's no "close others" behavior — simplicity over cleverness
   for an 11-item list, per instruction. */
.org-list {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  list-style: none;
  padding: 0;
}
.org-item { border-bottom: 1px solid var(--border); }
.org-item h2 { margin: 0; font-size: inherit; font-weight: inherit; }

.org-toggle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 17px 6px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.org-name {
  font-family: "Arima", cursive;
  font-weight: 700;
  color: var(--copper-bright);
  font-size: 18px;
  letter-spacing: 0.005em;
  transition: color 0.15s ease;
}
.org-toggle:hover .org-name,
.org-toggle:focus-visible .org-name { color: var(--cream); }

/* Same glyph, sizing, and color transition as .day-heading-toggle/
   .month-heading-toggle — deliberately duplicated rather than shared via
   one class, since those elements aren't buttons and sit in a different
   parent structure (this project prefers duplicating a few small,
   stable rules over coupling unrelated components through a shared
   class). Keep these three in sync if the disclosure treatment changes. */
.org-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--copper-dim);
  transform: rotate(0deg);
  transition: transform 0.15s ease, color 0.15s ease;
}
.org-toggle:hover .org-chevron,
.org-toggle:focus-visible .org-chevron { color: var(--copper-bright); }
.org-item.expanded .org-chevron { transform: rotate(90deg); color: var(--copper-bright); }

.org-panel { padding: 0 6px 26px; }
.org-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 26px 26px;
  background: var(--bg-card);
}
.org-card .venue-blurb { margin-top: 0; max-width: 100%; }
.org-follow-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
  font-weight: 600;
  margin: 20px 0 10px;
}
.org-see-venue {
  display: inline-block;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
}

/* ---- mobile ----
   Nothing on this page had a breakpoint before — h1, the 4-column filter
   grid, and the screening-row grid were all fixed-width for desktop, so
   below ~680px the screening rows overflowed sideways and sliced the
   Tickets button off-screen. This stacks everything to one column instead
   of shrinking it, since the row's columns (time/title/cinema/actions)
   don't have anywhere useful to shrink to at phone width. */
/* ---- Festivals page (seattle/cinema/community/festivals/) — 2026-09-05,
   visually redesigned same day per direct feedback: the first pass read
   as "a stack of text blocks," not the "compact annual calendar" it was
   meant to be. Content/data/month-grouping unchanged in this pass —
   this is a CSS-only redesign. Still deliberately NOT an accordion and
   NOT a directory-style list like Organizations — every festival's name,
   dates, and link are visible at once.

   What changed from the first pass:
   - `.fest-month-heading` is now a stronger wayfinding marker: uppercase,
     letter-spaced, with a heavier 2px rule (vs the Schedule page's 1px
     `.month-heading`, which this used to copy verbatim) — months need to
     read as section breaks at a glance, not just a slightly-bigger row.
   - `.fest-row` padding dropped 16px -> 10px and the grid's right two
     columns narrowed and right-aligned as a single block (dates stacked
     directly above the link, both right-justified) so every row's date
     and link sit in the same two visual columns regardless of content
     length — "align dates and links consistently across rows."
   - Confirmed dates (`.fest-dates` without `.tba`) are now bold and a
     touch larger — meant to be the first thing your eye catches per row.
     `.tba` (Dates TBA / Paused for 2026 / Next: 2028) is deliberately
     smaller and dimmer now, not just italic, so status text visually
     recedes behind real dates.
   - The link changed from spelled-out "Festival website →" text to a
     compact small-caps "Website ↗" label — same href, shorter/quieter
     footprint, consistent width so it doesn't fight the date above it
     for attention.
   Verified in-browser (headless Chromium, desktop + mobile) before
   shipping — see NOTES.md.

   Content sourced 2026-09-05, verified per-festival against each one's
   own official site — see `data-sources/festivals.md` for what was
   confirmed, what was left out and why (a few candidates couldn't be
   confirmed as still active, or had no real non-aggregator homepage,
   and were omitted rather than guessed at), and the Seattle Queer Film
   Festival wording specifically (paused for 2026, not permanently
   gone). */
.fest-month-heading {
  display: block;
  margin: 34px 0 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  font-family: "Literata", Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--copper-bright);
}
.fest-month-heading:first-of-type { margin-top: 0; }

.fest-list { margin: 0; padding: 0; }

.fest-row {
  display: grid;
  grid-template-columns: 1fr 160px;
  column-gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.fest-row:hover { background: rgba(179, 113, 74, 0.05); }
.fest-list .fest-row:last-child { border-bottom: none; }

.fest-main { line-height: 1.25; }
.fest-name { font-family: "Arima", cursive; font-weight: 700; color: var(--copper-bright); font-size: 1.05em; }
.fest-org { display: block; color: var(--cream-dim); font-weight: 300; font-size: 12.5px; margin-top: 1px; }

/* Right-hand block: date on top, website link directly underneath,
   both right-justified so every row's date+link sit in one consistent
   column regardless of content length. Per 2026-09-05 follow-up: the
   link moved out of a separate grid track into this same stack so it
   reads as one compact action/status block, not a floating third
   column. */
.fest-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 3px;
}

.fest-dates { color: var(--cream); font-weight: 700; font-size: 14px; line-height: 1.3; }
.fest-dates.tba { color: var(--cream-dim); font-weight: 300; font-style: italic; font-size: 12px; }

.fest-link {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--copper-dim);
  text-decoration: none;
  white-space: nowrap;
}
.fest-link:hover { color: var(--copper-bright); text-decoration: underline; }

@media (max-width: 680px) {
  h1 { font-size: 52px; }
  .subtitle { font-size: 16px; }

  /* Schedule · Venues · Community doesn't fit on the same line as the
     back link at phone width — wrap the utility line and let it drop to
     its own compact row instead of squeezing both onto one. */
  .top-nav { flex-wrap: wrap; row-gap: 8px; }
  .section-nav { flex-basis: 100%; gap: 8px; font-size: 13px; }

  /* Community's 2-column desktop grid falls back to the normal
     single-column .app-grid mobile layout — unchanged from before the
     2-column override was added. */
  .community-grid { grid-template-columns: 1fr; gap: 16px; }
  .community-grid .app-card { padding: 22px 22px 20px; }

  .filter-grid { grid-template-columns: 1fr; gap: 10px; }

  .screening-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 0;
  }
  .screening-time { padding-top: 0; }
  .screening-cinema, .screening-actions { align-self: stretch; }
  .screening-cinema { margin-top: 2px; }
  .screening-actions { justify-content: flex-start; padding-right: 0; margin-top: 6px; }

  /* Desktop keeps source order (Letterboxd left, Tickets right). Mobile
     flips it — Tickets left, Letterboxd right — per request 2026-08-16.
     `order` only, not a DOM change, so desktop is untouched. */
  .screening-actions a.lb-icon-pill { order: 2; }
  .screening-actions a.ticket-button { order: 1; }

  .day-heading-collapsible { flex-wrap: wrap; }
  .day-heading-count { margin-left: 0; }

  .month-heading { flex-wrap: wrap; }
  .month-heading-count { margin-left: 0; }
  .month-days-group { margin-left: 8px; padding-left: 10px; }

  .footer-links { gap: 8px; }
  .footer-link { font-size: 13px; padding: 8px 12px; }

  .org-toggle { padding: 16px 2px; }
  .org-name { font-size: 16.5px; }
  .org-panel { padding: 0 2px 22px; }
  .org-card { padding: 20px 18px 22px; }

  .fest-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }
  .fest-meta {
    align-items: flex-start;
    text-align: left;
  }
}