/* Hyde Park v2: what the films index, people, company, news and contact pages share.
   Tokens come from site.css; the fallbacks keep a page readable if it loads alone. */

[data-page="films"], [data-page="people"], [data-page="person"], [data-page="company"],
[data-page="news"], [data-page="contact"] {
  --i-fg: var(--fg, #efede8);
  --i-fg-2: var(--fg-2, rgb(239 237 232 / .66));
  --i-fg-3: var(--fg-3, rgb(239 237 232 / .42));
  --i-line: var(--line, rgb(239 237 232 / .14));
  --i-g: var(--g, clamp(16px, 2.4vw, 40px));
  --i-top: var(--top, clamp(68px, 7.2vw, 100px));
  --i-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
  --i-cut: var(--ease, cubic-bezier(.7, 0, .18, 1));
  --i-display: 600;
  --i-track: -.045em;
  position: relative;
  isolation: isolate;
}

/* The ground: near-black, taking the colour of whatever film you're on. Every layer that paints it changes by
   background-color alone, mixed in Oklab, on the motion core's one timing (--hp-ground), so they move in
   lockstep and only repaint; the soft shapes are masks, which don't change.
   It holds its glow inside its own box: while a page change moves main, main becomes the containing block of this
   fixed layer, and the glow's bleed widened the page by 143px (the stray sideways scrollbar). */
.ground {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-color: color-mix(in oklab, var(--ground-now, var(--tint, #070707)) 100%, transparent);
  transition: background-color var(--hp-ground, 1.6s ease);
}
.ground::after {
  /* A soft pool of the film's light from above, so the tint reads as light, not paint. */
  content: ""; position: absolute; inset: -20% -10% 40%;
  background-color: color-mix(in oklab, var(--glow-now, transparent) 100%, transparent);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(60% 60% at 50% 0%, #000, transparent 70%);
  opacity: .08; transition: background-color var(--hp-ground, 1.6s ease);
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One voice for every small label. */
.i-label, .fx-label, .fx-filter__n, .fx-year em, .i-kicker, .peek__cap {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.i-display {
  font-weight: var(--i-display); letter-spacing: var(--i-track); line-height: .96;
  text-wrap: balance;
}

.i-link {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size .7s var(--i-cut), color .3s;
}
.i-link:hover, .i-link:focus-visible { background-size: 100% 1px; }
.i-link .arr { display: inline-block; transition: transform .5s var(--i-ease); }
.i-link:hover .arr { transform: translateX(.25em); }

/* The rule: the house device. Draws on when it arrives. */
.i-rule { height: 1px; background: var(--i-line); transform-origin: 0 50%; }

/* Sections open with the site's section head (site/sec.html.j2). A group inside a section, a year or a decade,
   is quieter: no rule, a title-sized figure in the second ink, the same on News, Films and Company. */
.i-group {
  font-size: var(--t-title, clamp(19px, 1.6vw, 25px)); font-weight: 560; line-height: 1.2; letter-spacing: -.018em;
  color: var(--i-fg-2); font-variant-numeric: tabular-nums lining-nums;
}

/* The peek: a still that follows the pointer over a list. Fine pointers only. */
.peek {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  width: clamp(260px, 27vw, 500px);
  opacity: 0; visibility: hidden;
}
.peek__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; clip-path: inset(0 0 100% 0); }
.peek__frame picture, .peek__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.peek__cap { margin-top: 10px; color: var(--i-fg-2); white-space: nowrap; overflow: hidden; text-overflow: clip; }
@media (hover: none), (pointer: coarse) { .peek { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ground, .ground::after { transition-duration: .2s; }
}

/* Times and dates set in labels read as words, not table figures ("9:27 AM", "Aug 20, 2026"). */
[data-page] .label time, [data-page] time.label, [data-page] .label-run time { font-variant-numeric: normal; }
[data-page] .label { font-variant-numeric: normal; }
[data-page] .t-num { font-variant-numeric: tabular-nums lining-nums; }

/* A picture fills its frame, whatever the photograph's own proportions. */
.lead__pic > picture, .ps-hero__pic > picture, .ps-other__pic > picture, .co-person__pic > picture,
.ct-person__pic > picture, .wk__pic > picture, .nw-lead__media > picture, .ps-guest__still > picture { height: 100%; }