/* Home composition extracted from the approved Gathering / Revision 02 profile and refined to
 * the accepted UX-001 review surface: the opening choreography and film slate, the Experience
 * band, the cinematic programme rail, the About facts register and the conversation band.
 *
 * The Home composition below keeps the production class names, so the accepted UX-001 review
 * surface — which loads this file — still renders it. Only the genuinely shared `.actions`
 * rules are scoped to `body.lca-home`, because Programme, About, Partners and Contact load this
 * stylesheet too.
 */

/* Shared editorial composition (Home, About, Partners, Contact). */
.hero-home, .experience, .experience-grid { display: grid; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: 1.75rem; }
.text-link { display: inline-flex; min-height: 44px; align-items: center; font-size: .875rem; font-weight: 650; text-underline-offset: 6px; }
.tone-dark { background: var(--color-ink); color: var(--color-paper); }
.tone-teal { background: var(--color-teal); color: var(--color-paper); }
.tone-yellow { background: var(--color-yellow); color: var(--color-ink); }
.tone-dark .btn-outline, .tone-teal .btn-outline { --action-fg: var(--color-paper); --action-edge: var(--color-paper); --action-hover-bg: var(--color-paper); --action-hover-fg: var(--color-ink); }
.venue-line { display: flex; align-items: center; gap: .65rem; margin: 1.5rem 0 1rem; font-size: .86rem; }

/* ---------------------------------------------------------------------------
   Opening composition.
   The header height is a measured constant; the check suite asserts it against the
   live header so it cannot drift silently. The opening is held to one viewport by a
   height floor (not by flex-grow, which stops working as soon as the page is taller
   than the screen).
   --------------------------------------------------------------------------- */
.lca-home {
  --home-strip-h: clamp(20px, 2.9vw, 56px);
  --home-site-header-h: 89px;
}

.gathering-campaign {
  display: flex;
  min-height: calc(100svh - var(--home-site-header-h) - var(--home-strip-h));
  overflow: hidden;
  background: var(--color-paper);
}

.hero-home--gathering {
  flex: 1 1 auto;
  min-height: 100%;
  align-items: center;
  grid-template-columns: 1.06fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(2.25rem, 5vh, 4.5rem) 0;
}

.hero-home--gathering .hero-copy { align-self: center; padding-block: 0 clamp(2rem, 4vh, 3.5rem); }
.hero-home--gathering h1 { max-width: 18ch; font-size: clamp(1.7rem, 3.9vw, 3.9rem); line-height: 1.3; text-wrap: initial; }
.hero-home--gathering .theme-second { display: block; }
/* The accepted eyebrow language for this page: coral text, no rule. */
.hero-home--gathering .eyebrow { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; color: var(--color-coral); }
.hero-home--gathering .eyebrow::before { display: none; }
.hero-copy .lead { max-width: 44ch; font-size: clamp(1.0625rem, 1.1vw, 1.125rem); line-height: 1.6; }
.free-note { margin-top: var(--space-4); color: var(--color-muted); font-size: .75rem; }
.lca-home .actions { gap: clamp(1.1rem, 2vw, 1.75rem); }
.hero-primary-action { min-width: 9.375rem; }

/* The second opening action: a protected 48px target with an underlined label and a glyph that
   steps forward on hover. */
.hero-secondary-action { display: inline-flex; min-height: 48px; align-items: center; gap: 1.25rem; color: var(--color-ink); font-size: .875rem; font-weight: 650; text-decoration: none; }
.hero-secondary-action > :first-child { border-bottom: 1px solid currentColor; line-height: 1.35; }
.hero-secondary-action > :last-child { flex: none; font-size: 1.25rem; line-height: 1; transition: transform var(--duration-hover) var(--easing-emphasis); }
.hero-secondary-action:hover > :last-child,
.hero-secondary-action:focus-visible > :last-child { transform: translateX(.25rem); }

/* The media stage keeps the crowd and the film slate in one footprint. */
.hero-media-stage { min-width: 0; }
.gathering-campaign-art { display: flex; min-width: 0; align-items: flex-end; }
.gathering-artwork { width: calc(100% + var(--gutter)); max-width: none; height: auto; flex-shrink: 0; overflow: visible; }

/* ---------------------------------------------------------------------------
   Film slate. Without JavaScript this is the static fallback: the crowd artwork first,
   then the first film slate with one working film link.
   --------------------------------------------------------------------------- */
.film-stage { position: relative; margin-top: var(--space-6); background: var(--color-navy); color: var(--color-paper); /* The control row adapts to the slate's own width, not the viewport's. */ container-type: inline-size; }
.film-slide { display: grid; grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr); min-height: 27rem; }
.film-slide[hidden] { display: none; }
.film-poster-frame { min-width: 0; overflow: hidden; background: var(--color-ink); }
.film-poster-frame img { width: 100%; height: 100%; object-fit: cover; }
.film-details { position: relative; display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(1.35rem, 2.5vw, 2.25rem); padding-bottom: 7.25rem; border-left: 7px solid var(--color-coral); }
.film-kicker { margin-bottom: .8rem; color: var(--color-yellow); font-size: .7rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.film-details h2 { max-width: 13ch; color: var(--color-paper); font-size: clamp(1.75rem, 2.5vw, 2.8rem); line-height: 1.05; }
.film-director,
.film-meta,
.film-summary,
.film-screening,
.film-venue { font-size: .82rem; line-height: 1.45; }
.film-director { margin-top: 1rem; font-weight: 650; }
.film-meta { margin-top: .35rem; color: #d9dddd; }
.film-meta span { margin-inline: .25rem; color: var(--color-aqua); }
.film-summary { display: -webkit-box; max-width: 42ch; margin-top: 1rem; overflow: hidden; color: #eef1f0; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.film-screening { margin-top: .8rem; }
.film-venue { display: none; }
.film-link { display: inline-flex; min-height: 44px; align-items: center; align-self: flex-start; gap: .75rem; margin-top: 1rem; color: var(--color-paper); font-size: .78rem; font-weight: 750; letter-spacing: .05em; text-underline-offset: 5px; text-transform: uppercase; }

.film-stage-controls { position: absolute; z-index: 5; right: 0; bottom: 0; display: flex; width: calc(100% - 16rem); min-height: 6.75rem; align-items: center; gap: clamp(.35rem, .5vw, .55rem); padding: .55rem clamp(.4rem, .8vw, .75rem); border-top: 1px solid rgba(255,255,255,.23); background: var(--color-ink); }
.film-stage-controls button { min-width: 44px; min-height: 44px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: var(--color-paper); cursor: pointer; }
.film-stage-controls button:hover { border-color: var(--color-yellow); color: var(--color-yellow); }
.film-stage-controls button:focus-visible { outline-color: var(--color-yellow); }
/* Every control in the row can shrink, so the row's own minimum stays below the width of its
   inset box and the last control can never be pushed past the slate's edge. */
.film-selector { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: .45rem; }
.film-selector .film-selector-button { position: relative; width: 3.15rem; min-width: 2.5rem; height: 4.7rem; min-height: 4.7rem; flex: 0 1 auto; padding: 0; overflow: hidden; border: 2px solid transparent; opacity: .58; transition: opacity 180ms ease, border-color 180ms ease, transform 180ms ease; }
.film-selector-button img { width: 100%; height: 100%; object-fit: cover; }
.film-selector-button::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--color-yellow); transform: scaleX(0); transform-origin: left; }
.film-selector-button:is(:hover, :focus-visible) { opacity: 1; }
.film-selector-button.is-active { border-color: var(--color-yellow); opacity: 1; transform: translateY(-2px); }
.film-selector-button.is-complete::after { transform: scaleX(1); }
.film-stage.is-playing .film-selector-button.is-active::after { animation: film-progress 9s linear forwards; }
.film-counter { min-width: 2.3rem; color: #d9dddd; font-size: .72rem; font-variant-numeric: tabular-nums; text-align: center; }
.film-play-toggle { min-width: 4rem !important; padding-inline: .65rem; font-size: .68rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }

@keyframes film-progress { to { transform: scaleX(1); } }

/* Below this slate width the desktop slate cannot hold its own controls: the inset bar leaves
   too little room for the row (at exactly 1280×720 the PLAY control used to land about 22px
   beyond the right viewport edge, clipped by the slate), and the details column is too narrow
   for the desktop type scale, so its copy no longer clears the control row. The slate therefore
   switches to the compact composition — the same one the accepted small-screen slate uses,
   full-width bar included — at every stage width where that is true, not only at the mobile
   viewport breakpoint. */
@container (max-width: 39.5rem) {
  .film-stage-controls { left: 0; width: 100%; min-height: 4.5rem; gap: .3rem; padding: .35rem .4rem; }
  .film-selector { min-width: 0; gap: .3rem; }
  .film-selector .film-selector-button { width: 2rem; min-width: 2rem; height: 3rem; min-height: 3rem; }
  .film-counter { display: none; }
  .film-play-toggle { min-width: 3.8rem !important; padding-inline: .45rem; }
  .film-slide { grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); }
  .film-details { padding: 1rem 1rem 5rem; border-left-width: 4px; }
  .film-details h2 { font-size: clamp(1.25rem, 5.5vw, 1.65rem); }
  .film-kicker { margin-bottom: .45rem; font-size: .6rem; }
  .film-director,
  .film-meta,
  .film-screening { font-size: .7rem; }
  .film-director { margin-top: .55rem; }
  .film-summary,
  .film-venue { display: none; }
  .film-screening { margin-top: .65rem; }
  .film-link { min-height: 38px; margin-top: .5rem; font-size: .67rem; }
}

/* Progressive enhancement turns the crowd and the slate into overlapping layers. */
.js .hero-media-stage { position: relative; min-height: clamp(31rem, 62vh, 40rem); align-self: stretch; overflow: visible; }
.js .gathering-campaign-art { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; margin: 0; }
.js .film-stage {
  position: absolute;
  z-index: 3;
  top: 46%;
  right: auto;
  bottom: auto;
  left: 0;
  width: calc(100% + var(--gutter));
  height: min(27rem, calc(100% - 2rem));
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 10px));
  transition: opacity 600ms var(--easing-emphasis), transform 600ms var(--easing-emphasis);
}
.js .film-stage.is-visible { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.js .film-slides { position: relative; height: 100%; }
.js .film-slide { position: absolute; inset: 0; min-height: 0; opacity: 0; pointer-events: none; transform: translateX(10px) scale(.992); transition: opacity 600ms var(--easing-emphasis), transform 600ms var(--easing-emphasis); }
.js .film-slide.is-active { z-index: 2; opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.js .film-slide.is-leaving { z-index: 1; opacity: 0; transform: translateX(-12px) scale(.985); }
.js .hero-media-stage.is-films-visible .gathering-campaign-art { visibility: hidden; pointer-events: none; }

/* Copy entrance is short and completes before the crowd begins. */
.js .hero-home--gathering.is-enhanced [data-copy-item] { opacity: 0; transform: translateY(8px); }
.js .hero-home--gathering.is-copy-entering [data-copy-item] { animation: copy-arrive 520ms var(--easing-emphasis) forwards; }
.js .hero-home--gathering.is-copy-entering [data-copy-item]:nth-child(1) { animation-delay: 0ms; }
.js .hero-home--gathering.is-copy-entering [data-copy-item]:nth-child(2) { animation-delay: 70ms; }
.js .hero-home--gathering.is-copy-entering [data-copy-item]:nth-child(3) { animation-delay: 140ms; }
.js .hero-home--gathering.is-copy-entering [data-copy-item]:nth-child(4) { animation-delay: 210ms; }
.js .hero-home--gathering.is-copy-entering [data-copy-item]:nth-child(5) { animation-delay: 280ms; }
.js .hero-home--gathering.is-copy-entering [data-copy-item]:nth-child(6) { animation-delay: 350ms; }

@keyframes copy-arrive { to { opacity: 1; transform: translateY(0); } }

/* Crowd entrance: every figure receives its own start time, row by row. */
.js .hero-home--gathering.is-enhanced .crowd-row > * { opacity: 0; }
.js .crowd-row--1 { --row-delay: 70ms; }
.js .crowd-row--2 { --row-delay: 476ms; }
.js .crowd-row--3 { --row-delay: 940ms; }
.js .crowd-row--4 { --row-delay: 1288ms; }
.js .is-crowd-entering .crowd-row > * { transform: translateY(14px) scale(.965); transform-box: fill-box; transform-origin: center bottom; animation: crowd-person-arrive 720ms var(--easing-emphasis) forwards; }
.js .is-crowd-entering .crowd-row > :nth-child(1) { animation-delay: calc(var(--row-delay) + 0ms); }
.js .is-crowd-entering .crowd-row > :nth-child(2) { animation-delay: calc(var(--row-delay) + 58ms); }
.js .is-crowd-entering .crowd-row > :nth-child(3) { animation-delay: calc(var(--row-delay) + 116ms); }
.js .is-crowd-entering .crowd-row > :nth-child(4) { animation-delay: calc(var(--row-delay) + 174ms); }
.js .is-crowd-entering .crowd-row > :nth-child(5) { animation-delay: calc(var(--row-delay) + 232ms); }
.js .is-crowd-entering .crowd-row > :nth-child(6) { animation-delay: calc(var(--row-delay) + 290ms); }
.js .is-crowd-entering .crowd-row > :nth-child(7) { animation-delay: calc(var(--row-delay) + 348ms); }
.js .is-crowd-entering .crowd-row > :nth-child(8) { animation-delay: calc(var(--row-delay) + 406ms); }
.js .is-crowd-entering .crowd-row > :nth-child(9) { animation-delay: calc(var(--row-delay) + 464ms); }
.js .is-crowd-entering .crowd-row > :nth-child(10) { animation-delay: calc(var(--row-delay) + 522ms); }
.js .is-crowd-entering .crowd-row > :nth-child(11) { animation-delay: calc(var(--row-delay) + 580ms); }
.js .is-crowd-exiting .crowd-row > * { animation: crowd-person-leave 520ms cubic-bezier(.4, 0, .6, 1) var(--exit-delay, 0ms) forwards !important; }

@keyframes crowd-person-arrive {
  0% { opacity: 0; transform: translateY(14px) scale(.965); }
  68% { opacity: 1; transform: translateY(-2px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes crowd-person-leave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(.975); }
}

/* Large-screen composition preserves the protected copy width. */
@media (min-width: 75rem) {
  .hero-home--gathering { grid-template-columns: minmax(32rem, .95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 4vw, 4rem); }
  .hero-home--gathering .hero-copy { position: relative; z-index: 1; }
  .hero-home--gathering .theme-second { white-space: nowrap; }
  .hero-media-stage { overflow: visible; }
  .gathering-artwork { width: clamp(48rem, 50vw, 54rem); }
  .js .film-stage { width: min(54rem, calc(100% + var(--gutter) + max(0px, (100vw - 90rem) / 2))); }
}

@media (min-width: 75rem) and (min-height: 50rem) {
  .hero-home--gathering .hero-copy { transform: translateY(clamp(-5rem, -8vh, -3.5rem)); }
}

/* ---------------------------------------------------------------------------
   Experience band: eyebrow, headline, copy and action beside a two-up item grid on
   hairline top rules, with the four Docs-owned 30px icons.
   --------------------------------------------------------------------------- */
.gathering-experience { padding-block: clamp(3.5rem, 7vw, 6.3rem); }
.experience { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 6vw, 6rem); }
.experience .intro h2 { max-width: 12ch; }
.experience .intro p { margin-top: 1.5rem; max-width: 43ch; font-size: .95rem; line-height: 1.65; color: #d9e4e2; }
.lca-home .experience .intro .actions { margin-top: 1.5rem; }
.experience-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
.experience-item { display: flex; flex-direction: column; border-top: 1px solid #4d5551; border-left: 0; padding: 1.3rem 0 0; }
/* Docs-owned icons carry their own colour, so no currentColor tint applies. */
.experience-icon { width: 30px; height: 30px; margin-bottom: 1.2rem; color: inherit; }
.experience-item h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.45; margin-bottom: .7rem; }
.experience-item p { margin-top: 0; font-size: .85rem; line-height: 1.65; color: #d9e4e2; }

/* The editorial block holds with the visitor where the band is tall enough to travel. */
@media (min-width: 71.875rem) {
  .experience--band .intro { position: sticky; top: calc(var(--home-site-header-h) + 2rem); align-self: start; }
}

@media (max-width: 65.625rem) { .experience { gap: 3rem; } }
@media (max-width: 47.5rem) {
  .experience { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .experience .intro h2 { max-width: 100%; }
  .experience-grid { gap: 2.5rem 1.5rem; }
}
@media (max-width: 22.5rem) { .experience-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   Featured programme rail: one cinematic card per programme entry. The artwork carries
   the entry with the information set into it over a restrained lower gradient, and a
   designation badge appears only where the film record genuinely carries one.
   --------------------------------------------------------------------------- */
.gathering-programme { padding-block: clamp(3rem, 5vw, 5rem); }
.programme-gallery { display: grid; grid-template-columns: minmax(260px, .37fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 4vw, 4rem); }
.programme-gallery > * { min-width: 0; }
/* The headline is held to two lines: "This Year's" / "Programme" at every width. */
.programme-heading-line { display: block; }
.programme-gallery-intro h2 { max-width: 15ch; overflow-wrap: normal; hyphens: none; }
.programme-gallery-intro .lead { max-width: 35ch; margin-block: 1.2rem 1rem; }
.programme-gallery-intro .text-link { margin-top: var(--space-2); }
.gathering-programme .eyebrow { color: var(--color-coral); }

.rail-controls { display: none; gap: var(--space-2); margin-top: 1.75rem; }
.js .rail-controls { display: flex; }
.rail-controls .btn-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: .7rem; gap: 0; border: 1px solid var(--action-edge); border-radius: 0; background: var(--action-bg); color: var(--action-fg); font-size: 1.0625rem; --action-chamfer: 8px; }
/* These buttons carry their own glyph, so the generated action arrow is suppressed. */
.rail-controls .btn::after { content: none; }
.rail-controls .btn-icon:is(:disabled, [aria-disabled='true']) { background: var(--action-disabled-bg); border-color: var(--action-disabled-border); color: var(--action-disabled-text); opacity: 1; cursor: not-allowed; }

.poster-rail { display: grid; overflow-x: auto; grid-auto-flow: column; grid-auto-columns: clamp(200px, 17.5vw, 252px); gap: clamp(1rem, 1.6vw, 1.5rem); padding-block: 4px 1.25rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.film-card { position: relative; display: block; overflow: hidden; scroll-snap-align: start; /* 2:3 is the native proportion of every approved still, so the card needs no crop. */ aspect-ratio: 2 / 3; border-radius: 8px; background: var(--color-ink); transition: transform var(--duration-hover) var(--easing-emphasis); }
.film-card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 480ms var(--easing-emphasis); }
.film-card::after { content: ''; position: absolute; inset: auto 0 0 0; height: 74%; background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, rgba(16, 16, 16, .5) 48%, rgba(16, 16, 16, .9) 100%); pointer-events: none; }
.film-card-body { position: absolute; z-index: 2; inset: auto 0 0 0; display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.15rem 1.15rem; color: var(--color-paper); }
.film-card-title { font-family: var(--font-display); font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: var(--weight-heading); line-height: 1.12; text-wrap: balance; }
.film-card-director { font-size: .8rem; line-height: 1.4; color: rgba(254, 254, 254, .86); }
.film-card-meta { font-size: .64rem; font-weight: 650; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; color: rgba(254, 254, 254, .66); }
.film-card-badge { position: absolute; z-index: 2; top: .85rem; left: .85rem; padding: .3rem .5rem; border-radius: 4px; background: var(--color-yellow); color: var(--color-ink); font-size: .6rem; font-weight: 750; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.film-card:is(:hover, :focus-visible) { transform: translateY(-3px); }
.film-card:is(:hover, :focus-visible) .film-card-art { transform: scale(1.03); }

@media (max-width: 71.875rem) { .programme-gallery { grid-template-columns: minmax(240px, .4fr) minmax(0, 1fr); } }
@media (max-width: 55rem) {
  .programme-gallery { grid-template-columns: 1fr; }
  .programme-gallery-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-8); }
  .programme-gallery-intro :is(.eyebrow, h2, .lead, .text-link) { grid-column: 1 / -1; }
  .programme-gallery-intro .rail-controls { margin-top: 0; }
}
@media (max-width: 32.5rem) {
  .programme-gallery-intro { display: block; }
  .programme-gallery-intro .rail-controls { margin-top: var(--space-4); }
}

/* ---------------------------------------------------------------------------
   About LCA and the festival facts register.
   The section eyebrow is coral on this light surface; the facts-panel eyebrow keeps its
   production yellow, because coral on the teal panel measures only 1.49:1 against the
   3.29:1 of yellow.
   --------------------------------------------------------------------------- */
.gathering-about { background: var(--color-mist); }
.gathering-about-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr) minmax(0, 1.25fr); align-items: stretch; }
.gathering-about-layout > * { min-width: 0; }
.gathering-about-copy { align-self: center; padding: 2.5rem 2.3rem 2.5rem 0; }
.gathering-about-copy .eyebrow { color: var(--color-coral); }
.gathering-about-copy h2 { max-width: 16ch; }
.gathering-about-copy p { max-width: 40ch; margin-block: 1.4rem 1rem; font-size: .95rem; }
.gathering-about-poster { display: block; align-self: center; background: var(--color-ink); }
.gathering-about-poster img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; }
.gathering-facts { display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; padding: 2.75rem clamp(1.5rem, 3vw, 3rem); }
.gathering-facts > .eyebrow { margin: 0; color: var(--color-yellow); }
.gathering-facts .btn { align-self: flex-start; margin-top: var(--space-2); }
/* This action carries its own arrow, so production's generated glyph is suppressed. */
.gathering-facts .btn-light::after { content: none; }

/* The register is always one row per fact — icon, number, label — on hairline rules. */
.gathering-fact-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.gathering-fact-list .fact { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .85rem; padding-block: .8rem; border-bottom: 1px solid rgba(254, 254, 254, .22); }
.gathering-fact-list .fact:first-child { border-top: 1px solid rgba(254, 254, 254, .22); }
/* A fixed numeral column, so every label starts on the same axis. */
.gathering-fact-list dd.number { order: 1; flex: 0 0 8.5rem; gap: .5rem; }
/* The label is the fact's name: body size, medium weight, in the panel's paper colour. */
.gathering-fact-list dt { order: 2; flex: 1 1 auto; max-width: 24ch; font-size: 1rem; font-weight: 500; line-height: 1.4; }
/* The number stays the hero but stops shouting: the display face at its own 400 weight. */
.gathering-fact-list .number { font-family: var(--font-display); font-size: clamp(2.25rem, 2.8vw, 2.75rem); font-weight: 400; line-height: 1; }
/* Sized to the archived icon pack's own ratio (about 0.84 of the number) with its 1px strokes. */
.fact-icon { display: inline-flex; flex: 0 0 auto; width: 34px; height: 34px; }
.fact-icon svg { width: 100%; height: 100%; stroke-linecap: round; stroke-linejoin: round; }

/* The design-system join: the teal panel runs flush with the section's top and bottom while the
   poster is inset inside it. The layout gains a small block padding and the panel takes exactly
   that amount back as a negative margin, so the join is deterministic at any width. */
@media (min-width: 71.9375rem) {
  .gathering-about-layout { padding-block: 12px; }
  .gathering-facts { margin-block: -12px; }
}

@media (max-width: 71.875rem) {
  .gathering-about-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gathering-about-poster { max-height: 460px; background: transparent; }
  .gathering-about-poster img { max-height: 460px; }
  .gathering-facts { grid-column: 1 / -1; padding: 2.2rem; }
}
@media (max-width: 47.5rem) {
  .gathering-about-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); }
  .gathering-about-copy { grid-column: 1 / -1; padding: 2.5rem 0 2rem; }
  .gathering-about-poster { grid-column: 1; align-self: start; position: sticky; top: var(--space-8); }
  .gathering-facts { grid-column: 2; padding: 1.4rem var(--space-4); }
}
@media (max-width: 32.5rem) {
  .gathering-about-layout { grid-template-columns: 1fr; }
  .gathering-about-poster { grid-column: 1; position: static; width: 100%; max-height: none; }
  .gathering-about-poster img { max-height: none; }
  .gathering-facts { grid-column: 1; padding: var(--space-8) var(--space-6); }
}

/* ---------------------------------------------------------------------------
   Conversation band. The owner-selected surface treatment is the "C" of the LCA
   wordmark used as a half-drop tile: tonal rather than loud (6% ink on the yellow),
   at a scale well below the smallest type, faded behind the copy column so the words
   always sit on the quieter field.
   --------------------------------------------------------------------------- */
.gathering-conversation-band { position: relative; isolation: isolate; overflow: hidden; }
.gathering-conversation { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: center; gap: var(--space-12); }
.gathering-conversation blockquote { max-width: 44ch; margin: var(--space-6) 0 0; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.6; }
.gathering-conversation-links { padding-left: 2.5rem; border-left: 1px solid rgba(16, 16, 16, .25); }
.band-textures { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.band-texture { display: none; }
[data-band-texture='cwall'] .band-texture--cwall {
  display: block;
  position: absolute;
  inset: 0;
  background-image: url('../images/tile-c-wall.png');
  background-repeat: repeat;
  background-position: 0 0;
  background-size: clamp(72px, 7vw, 96px) auto;
  filter: brightness(0);
  opacity: .06;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, .18) 36%, #000 64%, #000 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, .18) 36%, #000 64%, #000 100%);
}

@media (max-width: 55rem) {
  .gathering-conversation { grid-template-columns: 1fr; gap: var(--space-8); }
  .gathering-conversation-links { padding: var(--space-6) 0 0; border-top: 1px solid rgba(16, 16, 16, .25); border-left: 0; }
}

/* ---------------------------------------------------------------------------
   Small screens. Below 880px the opening stops trying to fill the viewport with
   flex-grow and uses its own measured floor. The slate's own compact composition is
   driven by its container width (see above), because the slate is narrower than its
   enclosing layout at every width from 880px down.
   --------------------------------------------------------------------------- */
@media (max-width: 55rem) {
  .lca-home { --home-site-header-h: 5.125rem; }
  .hero-home--gathering { min-height: calc(100svh - var(--home-site-header-h) - 20px); align-content: space-between; grid-template-columns: 1fr; gap: 1.8rem; padding-block: clamp(2rem, 5vh, 3rem) 0; }
  .hero-home--gathering .hero-copy { padding-block: 0; }
  .hero-home--gathering h1 { font-size: clamp(1.7rem, 6.7vw, 3.4rem); }
  .gathering-campaign-art { width: 100%; max-width: 640px; justify-self: end; }
  .gathering-artwork { width: calc(100% + var(--gutter)); }
  .js .hero-media-stage { width: 100%; min-height: clamp(18rem, 78vw, 21rem); align-self: end; }
  .js .gathering-campaign-art { align-self: end; }
  .js .film-stage { width: calc(100% + var(--gutter)); height: 100%; }

  /* The compact slate composition. The same declarations are repeated in the
     `@container (max-width: 39.5rem)` block above, because CSS cannot share one
     declaration block between a viewport condition and a container condition: at 880px and
     below the slate is the full width of a single-column opening (so it is wide, yet its box
     is short), while between 881px and about 1259px the slate is inset but narrow. Both
     conditions need the compact composition, and neither implies the other. */
  .film-slide { grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); }
  .film-details { padding: 1rem 1rem 5rem; border-left-width: 4px; }
  .film-details h2 { font-size: clamp(1.25rem, 5.5vw, 1.65rem); }
  .film-kicker { margin-bottom: .45rem; font-size: .6rem; }
  .film-director,
  .film-meta,
  .film-screening { font-size: .7rem; }
  .film-director { margin-top: .55rem; }
  .film-summary,
  .film-venue { display: none; }
  .film-screening { margin-top: .65rem; }
  .film-link { min-height: 38px; margin-top: .5rem; font-size: .67rem; }
  .film-stage-controls { left: 0; width: 100%; min-height: 4.5rem; gap: .3rem; padding: .35rem .4rem; }
  .film-selector { min-width: 0; gap: .3rem; }
  .film-selector .film-selector-button { width: 2rem; min-width: 2rem; height: 3rem; min-height: 3rem; }
  .film-counter { display: none; }
  .film-play-toggle { min-width: 3.8rem !important; padding-inline: .45rem; }
}

@media (max-width: 32.5rem) {
  .lca-home .actions { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .film-stage-controls .film-arrow { min-width: 40px; }
}

@media (max-width: 22.5rem) {
  .experience-item { padding: 1.2rem 0 !important; border-top: 1px solid #4d5551; border-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .film-card,
  .film-card-art { transition: none; }
  .film-card:is(:hover, :focus-visible) { transform: none; }
  .film-card:is(:hover, :focus-visible) .film-card-art { transform: none; }
  .js .hero-home--gathering.is-enhanced [data-copy-item],
  .js .hero-home--gathering.is-enhanced .crowd-row > * { opacity: 1; transform: none; animation: none !important; }
  .js .film-stage,
  .js .film-slide,
  .hero-secondary-action > :last-child { transition: none; }
  .film-selector-button::after { animation: none !important; }
}