/* ============================================================================
 * LCA! Film Festival 2026 — About page styles
 *
 * AUTHORITY — assets/css/tokens.css owns every design value. This file
 * consumes tokens and defines none.
 *
 * CASCADE ORDER
 *   tokens.css → base.css → components.css → forms.css → editorial.css
 *   → about.css (this file) → refinement/* → per-page scripts.
 *
 * OWNER-AUTHORIZED TASK — LCA2026-SITE-007, resumed by D-021.
 *   Hero shell, hero rail, founder slot, about-splits and closing statement
 *   were merged into this file from the standalone about-hero.css on
 *   2026-09-30 to honour the contract's "prefer editing this over adding a
 *   new stylesheet" rule (task.md §"Allowed scope").
 *
 * Provenance: hero rails/cards/scroll CSS adapted from the canvas prototype
 * supplied with the owner-approved design-team About bundle (D-021).
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * IMAGE-MAT UTILITIES — used by the Our-story figure and the about-splits.
 * --------------------------------------------------------------------------- */

.image-mat { padding: 1rem; background: var(--color-aqua); }
.image-mat-plain { padding: 0; background: transparent; }

.founder-fact { margin-top: 1.5rem; }

/* ---------------------------------------------------------------------------
 * 1. HERO SHELL — full viewport height below the header on desktop, flows on
 *    mobile. Yellow background, founder portrait counterweight, 2fr 3fr grid
 *    (40 % copy / 60 % founder).
 * --------------------------------------------------------------------------- */

.hero-about {
  --hero-header-h: 5.5rem;
  --hero-card-w: 10.5rem;
  --hero-card-h: 15.75rem;
  --hero-gap: clamp(1rem, 2.5vw, 2rem);
  --hero-speed: 96s;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vh, 4rem);
  justify-content: center;
  min-height: calc(100svh - var(--hero-header-h));
  padding-block: clamp(2rem, 5vh, 4rem) 0;
  background: var(--color-yellow);
  color: var(--color-ink);
}

.hero-about > .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: var(--hero-gap);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Flex-item default min-width:auto lets the wide track inside .hero-rail
   * push the column out and defeat overflow:hidden at intermediate widths
   * (1024 / 768). Override here. */
  min-width: 0;
}

/* ---------------------------------------------------------------------------
 * 2. HERO FIGURE — founder portrait (owner-supplied 2026-09-30)
 *    Source is 1456 × 2184 (~2:3 portrait). Square (1:1) crop, owner direction
 *    2026-09-30 (no overflow, 50% width, recognisable composition). The figure
 *    is sized to fit its grid column without distortion.
 * --------------------------------------------------------------------------- */

.hero-mark {
  width: 100%;
  /* Cap the founder figure so it never exceeds the height of the heading +
   * paragraph copy to its left. At 1440 the copy column is ~441 px tall; the
   * 26 rem cap gives a 416 px square — within that height and roughly a
   * 1/3 reduction from the previous 592 px (adopted 2026-09-30 per owner
   * direction). Aspect ratio stays 1:1; the figure shrinks on mobile via the
   * existing 55 rem breakpoint rule. */
  max-width: 26rem;
  aspect-ratio: 1 / 1;
  margin: 0;
  justify-self: center;
  align-self: center;
  border: 1px solid var(--color-ink);
  background: var(--color-paper);
  overflow: hidden;
  /* Establishes an offset parent so the absolutely-positioned figcaption
   * pins to the figure's bottom, not to the viewport. Without this the
   * caption falls off the page (debugged 2026-09-30). */
  position: relative;
  /* LCA signature flat-depth offset shadow — matches the rail cards
   * (6/6/0 ink) and the dialog panel (8/8/0 ink). The 6 px offset is the
   * one used on every other boxed element on the page. Adopted 2026-09-30
   * as part of the polish pass; closes the founder-figure-vs-rail-card
   * visual split flagged by the falsification pass. */
  box-shadow: 6px 6px 0 var(--color-ink);
}

.hero-mark img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 25%;
}

.hero-mark figcaption {
  /* The founder figure is exactly 1:1 with overflow:hidden, so any
   * content that flows below the image gets clipped out of the figure
   * box and disappears. Pin the figcaption to the bottom of the figure
   * as an overlay so it sits inside the visible square. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .15em;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.35;
}
.hero-mark__name {
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: var(--weight-display);
  letter-spacing: .02em;
  text-transform: none;
}
.hero-mark__role {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* ---------------------------------------------------------------------------
 * 3. COPY — deck content composed at editorial reading widths. Both
 *    paragraphs use .lead as supplied in the approved About bundle.
 * --------------------------------------------------------------------------- */

.hero-copy {
  display: grid;
  gap: var(--space-4);
  max-width: 44rem;
  padding-block: var(--space-4);
}

.hero-copy .eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Eyebrow on yellow needs a darker muted to reach 4.5:1.
 * #525252 on #fbc733 at 12px/700 measures ~3.8:1; #2a2a2a on #fbc733
 * measures ~9.2:1. The rule is scoped to the hero copy where the yellow
 * background lives. */
.hero-about .hero-copy .eyebrow {
  color: #2a2a2a;
}

.hero-copy h1 {
  font-family: var(--font-display);
  font-size: var(--display-xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
  max-width: 27ch;
}

.hero-copy .lead {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--color-ink);
  max-width: 52ch;
  margin: 0;
}

.hero-copy .lead + .lead {
  margin-top: var(--space-3);
}

/* ---------------------------------------------------------------------------
 * 4. FLOATING CARD RAIL — 9 archive posters in a continuous loop.
 * --------------------------------------------------------------------------- */

.hero-rail {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: var(--space-8);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  touch-action: pan-y;
  /* Flex-item default min-width:auto lets the wide track push this column
   * out and defeat overflow:hidden at intermediate widths (1024 / 768). */
  min-width: 0;
  /* Soft fade at the rail edges so the cards appear to drift in/out of view.
   * Pure CSS — no markup change. Falls back gracefully on browsers without
   * mask-image (the rail still clips, just without the fade). */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Rail: no archival framing. The rail caption and the two thin ink
 * divider rules (added in polish pass 2026-09-30) were removed per owner
 * direction. The rail sits cleanly between the hero copy and the
 * manifesto section, separated only by the rail's own card silhouettes. */

.hero-rail.dragging { cursor: grabbing; }

.hero-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: var(--hero-gap);
  padding-inline: var(--space-4);
}

.hero-set {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--hero-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.hero-card {
  /* Layout-only wrapper. Visual styling lives on the inner archive link so
   * the complete card surface remains keyboard accessible. */
  position: relative;
  flex: 0 0 auto;
  width: var(--hero-card-w);
  height: var(--hero-card-h);
  margin-top: var(--card-rise, 0);
  transform: rotate(var(--card-tilt, 0));
  list-style: none;
}

.hero-card__button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--color-paper);
  box-shadow: 6px 6px 0 var(--color-ink);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  /* Micro-interaction: subtle lift on hover (canonical layout-study pattern,
   * scoped to devices that support hover; touch devices see no jump). */
  transition:
    transform var(--duration-hover, 240ms) cubic-bezier(.16, 1, .3, 1),
    box-shadow var(--duration-hover, 240ms) cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

@media (hover: hover) {
  /* Lift on hover, deepen the shadow for a hand-drawn offset look.
   * Card opacity drops very slightly so the neighbouring cards feel closer. */
  .hero-card__button:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--color-ink);
  }
  .hero-card__button:active {
    transform: translate(0, 0);
    box-shadow: 3px 3px 0 var(--color-ink);
    transition-duration: 80ms;
  }
}

.hero-card__button:focus-visible {
  /* Focus ring uses --color-ink so it has high contrast against the
   * yellow hero background. (A yellow focus ring would be invisible
   * against the yellow hero-about background.) */
  outline: 3px solid var(--color-ink);
  outline-offset: 4px;
}

.hero-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero-track {
    animation: hero-drift var(--hero-speed) linear infinite;
  }
  .hero-rail:hover .hero-track,
  .hero-rail:focus-within .hero-track {
    animation-play-state: paused;
  }
  .js .hero-rail[data-hero-rail-paused] .hero-track {
    animation-play-state: paused;
  }
  @keyframes hero-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
}

/* ---------------------------------------------------------------------------
 * 5. RESPONSIVE — hero stacks below the 55rem header breakpoint.
 * --------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .hero-copy { max-width: 44rem; }
}

@media (max-width: 55rem) {
  .hero-about {
    min-height: 0;
    padding-block: clamp(1.5rem, 5vh, 3rem) 0;
  }
  .hero-about > .wrap {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
  }
  .hero-mark {
    width: min(14rem, 60%);
    margin: var(--space-8) 0 0;
    justify-self: start;
  }
  .hero-about { --hero-card-w: 8.25rem; --hero-card-h: 12.375rem; }
}

@media (max-width: 30rem) {
  .hero-about { --hero-card-w: 6.5rem; --hero-card-h: 9.75rem; }
}

/* ---------------------------------------------------------------------------
 * 6. ABOUT-SPLIT — reusable two-column block (copy | figure). Used by the
 *    "What LCA! is", "Our purpose" and "2026 edition" sections.
 * --------------------------------------------------------------------------- */

.r06-about-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
  max-width: var(--container);
}

.r06-about-split--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.r06-about-split__copy {
  display: grid;
  gap: var(--space-4);
  max-width: 46rem;
}

.r06-about-split__figure {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.r06-about-split__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Section 0 (Manifesto / "More than a screening programme") is rendered
 * with `.r06-about-manifesto` from `assets/css/refinement/about.css:30`,
 * which provides the 1fr 1.2fr grid, yellow H2 colour and `line-height:
 * 1.5`. The H2 breaks across three lines via `<br>` (display:block on
 * mobile ≤600px keeps the breaks visible). No overrides needed here. */

/* Editorial chapter numbers were REMOVED 2026-09-30 to align with the
 * owner-approved design-team layout study,
 * which carries no chapter numbers on any section. The polish-pass
 * addition of "02 / 07" marks was a creative-direction choice that the
 * owner did not endorse on review. */

/* Defensive clamp — intrinsic .images inside .image-mat should never exceed
 * their container. The 800-wide lca-history photos and the 2484-wide 2018
 * archive poster both need this at intermediate viewports. */
.image-mat img,
.image-mat-plain img {
  display: block;
  max-width: 100%;
  height: auto;
}

.r06-about-split__figure figcaption {
  font-size: .75rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Auto-fill from the parent surface tone. Chapter 0 uses r06-surface-ink
 * (background: var(--color-ink)) — the default --color-muted (#525252)
 * fails WCAG AA on black. The two rules below lift the figcaption colour
 * to a value with at least 4.5 : 1 contrast on the surface it sits on,
 * matching the convention in editorial.css §.tone-navy .muted. */
.r06-surface-ink .r06-about-split__figure figcaption,
.tone-navy .r06-about-split__figure figcaption {
  color: #c8c8c8;
}

.tone-yellow .r06-about-split__figure figcaption,
.section-sm.tone-yellow .r06-about-split__figure figcaption {
  color: #2a2a2a;
}

@media (max-width: 56rem) {
  .r06-about-split,
  .r06-about-split--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ---------------------------------------------------------------------------
 * 7. CLOSING STATEMENT — adopted from the layout study
 *    from the owner-approved design-team About bundle. Display type,
 *    single block of four lines joined by <br>, the final line wrapped in
 *    <em> for the ink-on-yellow highlight. The section is a flat yellow
 *    surface (`r06-surface-yellow`); there is no `closing` wrapper class, no
 *    `section-sm` padding override, no eyebrow, no visible heading, no
 *    text-align:center, no animations. The `<p>` is left-aligned by
 *    default; the section's `.wrap` provides section padding via
 *    `r06-section` (`padding-block: var(--section)`).
 * --------------------------------------------------------------------------- */

/* `.r06-closing` — adopted from the layout study. Display type, single block
 * of four lines joined by <br>, max-width 22ch. The final line is wrapped
 * in <em> for the ink-on-yellow highlight. */
.r06-closing {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 3.2rem);
  line-height: 1.3;
  color: var(--color-ink);
  max-width: 22ch;
}

.r06-closing em {
  font-style: normal;
  background: var(--color-ink);
  color: var(--color-yellow);
  padding: 0 .18em;
}

/* The "winning" flourish (shine + pulse) that previously animated the <em>
 * has been removed 2026-09-30 to align with the layout study, which does
 * not animate the highlight. */

/* ---------------------------------------------------------------------------
 * 8. FOUNDER SLOT — placeholder for the founder photo when re-paired outside
 *    the hero (currently empty; founder photo lives in the hero counterweight).
 * --------------------------------------------------------------------------- */

.founder-slot[data-filled] {
  display: block;
  margin-top: var(--space-4);
  max-width: 22rem;
}

.founder-slot[data-filled] img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--color-ink);
}

/* ---------------------------------------------------------------------------
 * 9. YEAR DIALOG — adopted from the layout study
 *    from the owner-approved design-team About bundle.
 *    The dialog markup, CSS, and JS binding mirror the layout study exactly,
 *    with static, owner-approved D-021 content and
 *    the page's own card-rail trigger contract. The dialog is a flat
 *    bordered rectangle — no paper card with offset shadow, no placeholder
 *    copy, no per-fact rows. Theme is omitted when the year's data has no
 *    theme (2011).
 * --------------------------------------------------------------------------- */

.year-dialog {
  position: fixed; inset: 0; z-index: 9999;
  width: min(90vw, 52rem); max-width: unset;
  max-height: 90vh; height: 90vh; margin: auto; padding: 0;
  border: 1px solid var(--color-ink); background: var(--color-paper);
  overflow: hidden;
}
.year-dialog[open] { animation: lca-dialog-in 250ms ease-out forwards; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes lca-dialog-in { from { opacity: 0; transform: scale(.97) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
}
.year-dialog::backdrop { background: rgba(16, 16, 16, 0.6); }
.year-dialog[open]::backdrop { animation: lca-backdrop-in 200ms ease-out forwards; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes lca-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
}

.year-dialog__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  overflow: hidden;
}

.year-dialog__image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-mist);
  overflow: hidden;
}
.year-dialog__image img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.year-dialog__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 90vh;
}

.year-dialog__heading {
  font-family: var(--font-display);
  font-size: var(--display-lg);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  color: var(--color-ink);
  margin: 0;
}

.year-dialog__edition {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0;
}

.year-dialog__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
}
.year-dialog__rows dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  padding-top: .05em;
}
.year-dialog__rows dd {
  font-size: .875rem;
  line-height: var(--leading-body);
  color: var(--color-ink);
  margin: 0;
}

.year-dialog__close {
  /* Close button is now absolutely positioned in the top-right of the
   * .year-dialog__body column. The body is `position: relative` so this
   * anchors cleanly. Source order in the DOM is still heading → edition →
   * rows → explore; absolute positioning pulls the close button out of
   * the natural flow. Keyboard tab order is unaffected. */
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
}
.year-dialog__close .arrow { transform: rotate(90deg); }

/* Reserve space at the top of the body so the absolutely-positioned close
 * button does not overlap the heading. The padding-right also keeps the
 * heading text from running under the button. */
.year-dialog__body .year-dialog__heading {
  padding-right: 3.5rem;
}

.year-dialog__explore {
  /* Full-width "Explore the full edition" link, anchored to the bottom of
   * the dialog text. margin-top:auto pushes it to the bottom of the flex
   * column regardless of how short the rows are. width:100% makes it span
   * the full width of the .year-dialog__body column (inside its padding). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: auto;
  padding-block: var(--space-3);
}
.year-dialog__explore[hidden] { display: none; }
.year-dialog__explore .arrow { transform: translateY(0); }

@media (max-width: 56.25rem) {
  .year-dialog { width: 100%; max-width: 100%; max-height: 100vh; height: 100vh; margin: 0; border: none; border-radius: 0; }
  .year-dialog__inner { grid-template-columns: 1fr; grid-template-rows: 45vh 55vh; height: 100vh; }
  .year-dialog__image { overflow: hidden; }
  .year-dialog__body { padding: var(--space-6); gap: var(--space-2); max-height: 55vh; }
}