/* Match the paper color rendered by the wordmark shader and fallback image. */
.landing-home { --paper: #faf8f1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.landing { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 32px 0 64px; }
/* The film includes broad paper margins; size the visible lettering, not just its frame. */
.wordmark-scene { position: relative; flex-shrink: 0; width: min(110vw, 1600px); aspect-ratio: 3 / 1; }
.silky-wordmark { margin: 0; line-height: 0; }
.silky-wordmark img, .wordmark-scene video { display: block; width: 100%; height: 100%; }
/* Feather empty paper margins so codec rounding cannot reveal a rectangular edge. */
.silky-wordmark img, .wordmark-scene video { mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(0deg, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
.wordmark-scene video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.wordmark-scene[data-live] video { opacity: 1; }
.wordmark-scene[data-live] img { opacity: 0; }
.silky-introduction {
    --label-ink: #766c62;
    --label-rule: #cdc5ba;
    width: min(100%, 620px);
    padding: 16px var(--gutter);
    color: var(--label-ink);
}
.introduction-label { border-top: 1px solid var(--label-rule); }
.introduction-heading { padding: 14px 0; }
.introduction-kicker { margin: 0 0 8px; font: 11px/1.5 var(--mono); text-transform: uppercase; }
.introduction-heading h2 { margin: 0; font-size: clamp(20px, 3vw, 24px); line-height: 1.2; font-weight: 700; text-wrap: balance; }
.introduction-report { margin: 0; }
.introduction-report > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--label-rule); }
.introduction-report dt { padding-top: 2px; font: 11px/1.6 var(--mono); text-transform: uppercase; }
.introduction-report dd { margin: 0; font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.introduction-observation { border-top: 1px solid var(--label-rule); padding-top: 2px; }
.introduction-observation a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; font: 11px/1.5 var(--mono); text-underline-offset: 4px; }
.landing-footer { padding: 8px 24px max(20px, env(safe-area-inset-bottom)); color: var(--muted); font: 12px/1.5 var(--sans); }
.landing-footer nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; }
.landing-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.landing-footer a:hover { color: var(--ink); text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 650px) {
    /* Use the still's generous side margins to keep the lettering large on phones. */
    .landing { padding-top: 24px; padding-bottom: 40px; }
    .wordmark-scene { width: 150vw; }
}
@media (max-width: 480px) {
    .introduction-report > div { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 360px) {
    .introduction-report > div { grid-template-columns: 1fr; gap: 3px; }
}