/*
 * FilmSim theme for AirsoftOS. Copyright (c) 2026 Filmsim Ltd.
 * Runs on AirsoftOS Core, which is licensed separately. Keep the
 * "Powered by AirsoftOS" attribution; see LICENSE in this theme's folder.
 */

/*
 * Oswald: @fontsource-variable/oswald 5.2.8, files/oswald-latin-wght-normal.woff2,
 * sha256 bd73278ee0c50041b91b4c03d1229e35b501637f46b6409e7da2d3a758446ea5.
 * SIL Open Font Licence 1.1, in OFL.txt at this theme's root.
 */

/*
 * Linked after core-foundation.css and core's public/assets/theme.css, and
 * before /assets/appearance.css, which carries an operator's Settings › Theme
 * values and writes nothing at a default. So every `css_vars` token below is
 * set here to its theme.json default, and every tone derived from one is a
 * color-mix() of it, so a changed Paper or Ink moves its whole family.
 *
 * Ratios (WCAG 2.x) are computed from this block by
 * tests/checks/filmsim-theme.php, which resolves what a visitor sees from both
 * sheets; the numbers in comments are the defaults.
 */

:root {
    --fs-screen: #0d0c0b;
    --fs-surface: #191714;
    --fs-line: #2a2622;
    --fs-text: #f4efe6;
    --fs-muted: #bdb4a6;
    --fs-brand: #fd6500;
    --fs-on-brand: #120a02;
    --fs-paper: #f6f1e8;
    --fs-ink: #1b1814;
    --fs-paper-link: #a33f00;
    /* The pressed primary button on paper: paper text on it is 7.63:1. */
    --fs-paper-link-deep: color-mix(in srgb, var(--fs-paper-link) 75%, var(--fs-ink));
    --fs-display: "FilmSim Oswald", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    --fs-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-width: 1200px;
    --fs-gutter: clamp(16px, 4vw, 40px);

    /* Core's tokens, so core's pages follow the box office, not the screen.
       --paper, --ink, --signal and --signal-dark are Settings › Theme targets
       and so are literal defaults; the rest are mixed from paper and ink. */
    --paper: #f6f1e8;
    --paper-2: color-mix(in srgb, var(--fs-paper) 94%, var(--fs-ink));
    --paper-3: color-mix(in srgb, var(--fs-paper) 90%, var(--fs-ink));
    --ink: #1b1814;
    --ink-2: color-mix(in srgb, var(--fs-ink) 94%, var(--fs-paper));
    --ink-3: color-mix(in srgb, var(--fs-ink) 72%, var(--fs-paper));
    --muted: color-mix(in srgb, var(--fs-ink) 72%, var(--fs-paper));
    --line: color-mix(in srgb, var(--fs-ink) 18%, var(--fs-paper));
    --signal: #a33f00;
    --signal-dark: #a33f00;
    /* Ink, not the projector orange: core draws white text on --olive and
       --olive-light (flash messages, completed steps), and white on #fd6500 is
       2.98:1. */
    --olive: var(--fs-ink);
    --olive-light: color-mix(in srgb, var(--fs-ink) 72%, var(--fs-paper));
    --tan: color-mix(in srgb, var(--fs-paper) 94%, var(--fs-ink));
    --display: "FilmSim Oswald", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@font-face {
    font-family: "FilmSim Oswald";
    src: url("fonts/oswald-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}

body {
    background: var(--fs-screen);
    color: var(--fs-ink);
    font-family: var(--fs-body);
}

.fs-shell {
    width: min(100% - 2 * var(--fs-gutter), var(--fs-width));
    margin-inline: auto;
    min-width: 0;
}

/* -- Focus ------------------------------------------------------------------
 * The same selectors as core-foundation.css, so this rule outranks its
 * `var(--signal)` ring by order rather than losing to it on specificity: that
 * ring is 3.04:1 on the screen and 2.78:1 on a card. Brand is 6.55:1 and
 * 5.99:1. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--fs-brand);
    outline-offset: 3px;
}

/* -- The box office --------------------------------------------------------
 * main is the paper sheet unless its first child is a .fs-screen band. Every
 * page core renders (booking, account, tickets, sign-in, waivers, errors) has
 * none, so it lands here without the shell knowing which view it holds.
 * Browsers without :has() show FilmSim's pages inside the sheet, which still
 * reads. */
.fs-main {
    display: block;
    width: min(100% - 2 * var(--fs-gutter), var(--fs-width));
    margin: clamp(16px, 4vw, 40px) auto clamp(32px, 6vw, 64px);
    padding: clamp(20px, 4vw, 48px);
    background: var(--fs-paper);
    color: var(--fs-ink);
    position: relative;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fs-main::after {
    content: "";
    position: absolute;
    inset: auto 0 -10px 0;
    height: 10px;
    background: radial-gradient(circle at 7px 10px, var(--fs-screen) 6px, transparent 6.5px) 0 0 / 14px 10px repeat-x, var(--fs-paper);
}

/* On the sheet a plain link is the paper link colour, 2.2:1 against the ink
   round it, so colour alone can't mark it (WCAG 1.4.1): it is underlined.
   Core's pagination draws its links as bordered buttons and keeps none. */
.fs-main a:not([class]) {
    color: var(--fs-paper-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fs-main .pagination a:not([class]) {
    text-decoration: none;
}

/* Core's `.shell` is `var(--shell)`, sized from the viewport
   (min(1240px, 100vw - 48px)), so on the sheet it is wider than the sheet's
   content box from 821px to about 1440px and scrolled the page sideways.
   Inside the sheet it is held to the sheet; --shell itself is core's. */
.fs-main .shell {
    width: min(100%, var(--shell));
}

/* Core's booking, ticket, message and sign-in pages clear core's floating
   header with 140-190px of top padding (110px on a phone). FilmSim's header
   is in flow and the sheet has its own padding, so that is only a gap. The
   account shell's offset is set at up to (0,4,0) under the "Follow us" bar,
   so its rule matches that and comes later. */
.fs-main :is(.booking-shell, .ticket-section, .message-section, .ticket-page-shell, .player-login-shell, .player-login-confirmation, .self-check-in-shell) {
    padding-top: clamp(8px, 2vw, 24px);
}

.player-account-page .fs-main .player-account-shell,
.player-account-page.has-social-bar .fs-main .player-account-shell {
    padding-top: 0;
}

/* On paper the orange ring is 2.65:1, so it takes the paper link colour
   (5.71:1). A screen band inside main, and core's dark panels on the sheet,
   take the brand back below, with the same specificity and later. */
.fs-main :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: var(--fs-paper-link);
}

main:has(> .fs-screen:first-child) {
    width: auto;
    margin: 0;
    padding: 0;
    background: var(--fs-screen);
    color: var(--fs-text);
    overflow-wrap: normal;
}

main:has(> .fs-screen:first-child)::after {
    content: none;
}

.fs-screen {
    background: var(--fs-screen);
    color: var(--fs-text);
}

.fs-screen :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: var(--fs-brand);
}

/* `.fs-main a:not([class])` gives plain links the paper link colour, which is
   2.6:1 on the screen; a screen band inside main takes them back to its text.
   Core's filter error summary is a light panel on the band, so its links
   keep core's error ink. */
.fs-screen a:not([class]) {
    color: var(--fs-text);
}

/* On the band a plain link is the text colour and core's foundation takes
   every underline away, so the underline is what tells a link from the words
   round it (WCAG 1.4.1). A heading that is a link stands alone, as a poster
   title does, and keeps none. */
.fs-screen a:not([class]),
.fs-credits dd a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fs-screen :is(h1, h2, h3) a:not([class]) {
    text-decoration: none;
}

.fs-screen .event-filter-errors a {
    color: #6f2117;
}

/* Core's staff preview banner (#7c4a21) is drawn with white links, but its
   `.preview-banner a` (0,1,1) loses to the two plain-link rules above (0,2,1),
   and its ring to the sheet's and the screen's (0,3,0). Restated at (0,2,1)
   and later, and the hover and ring above them. White on #7c4a21 is 7.35:1. */
.fs-main .preview-banner a {
    color: #fff;
}

.fs-main .preview-banner a:hover {
    color: #7c4a21;
}

.fs-main .preview-banner a:focus-visible {
    outline-color: #fff;
}

/* Core's light error ink, on a dark band. 10.81:1 on a card. */
.fs-screen .field-error {
    color: #ffb8aa;
}

/* -- Core rules repaired for the box office --------------------------------
 * Core's public sheet was written for a palette where --signal reads on both
 * light and dark grounds. FilmSim's --signal is the paper link colour, which
 * only reads on paper, so each place core draws text on --signal, or --signal
 * text on one of its dark panels, is restated here. The suite check resolves
 * each pair from both sheets. */

/* Core: var(--ink) on var(--signal), 2.75:1. Paper on it is 5.71:1. The hover
   was var(--signal-dark), the same colour, so it changed nothing; the deeper
   mix is 7.63:1 and visibly presses. */
.button-primary,
.event-code {
    color: var(--fs-paper);
}

.button-primary:hover {
    background: var(--fs-paper-link-deep);
}

/* Core: var(--signal) on var(--ink), 2.75:1, under the 3:1 an icon needs.
   Brand is 5.93:1. */
.staff-return-tab-icon {
    color: var(--fs-brand);
}

/* Core: var(--signal) labels on its dark booking, payment, ticket, account,
   balance and waiver panels: 2.75:1 on var(--ink) or var(--olive), 2.29:1 on
   the team uniform panel's #242a22 and 2.37:1 on var(--ink-2), and the
   wallet panel's var(--muted) label is 2.05:1 on var(--ink-2). Brand is
   5.93:1, 4.92:1 and 5.11:1.
   `.local-payment-card > .eyebrow` is the card's own label only: the gift-card
   order page nests light panels in that card, where brand would be 2.98:1. */
.summary-pay-now,
.team-camo-rule > b,
.ticket-operation > span,
.ticket-stub > strong,
.ticket-next-steps > header .section-index,
.ticket-next-step-number,
.ticket-next-steps li small,
.ticket-wallet-actions .section-index,
.refund-incentive strong,
.retrieval-note .eyebrow,
.local-payment-card > .eyebrow,
.player-account-masthead .section-index,
.report-metrics .report-net > span,
.waiver-document-heading span,
.waiver-pdf-panel > header span {
    color: var(--fs-brand);
}

.booking-summary :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.ticket :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.ticket-next-steps :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.ticket-wallet-actions :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.refund-incentive :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.retrieval-note :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.player-account-masthead :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.waiver-pdf-panel > header :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: var(--fs-brand);
}

/* -- Type ----------------------------------------------------------------- */
.fs-display,
.fs-screen :is(h1, h2, h3) {
    font-family: var(--fs-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.95;
    overflow-wrap: anywhere;
}

.fs-kicker {
    margin: 0 0 8px;
    color: var(--fs-brand);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.fs-lead {
    color: var(--fs-muted);
    max-width: 62ch;
}

/* -- Buttons -------------------------------------------------------------- */
.fs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.fs-button-primary {
    background: var(--fs-brand);
    color: var(--fs-on-brand);
}

.fs-button-ghost {
    border: 2px solid var(--fs-text);
    color: var(--fs-text);
}

/* -- Film strip and grain ------------------------------------------------- */
.fs-strip {
    height: 22px;
    background: repeating-linear-gradient(90deg, var(--fs-screen) 0 10px, var(--fs-line) 10px 22px);
    border-block: 4px solid var(--fs-surface);
}

.fs-grain {
    background-image: url("grain.svg");
}

/* -- Stills: one rule per file. Every view's `% 6` must match. ------------ */
.fs-still {
    background-color: var(--fs-surface);
    background-size: cover;
    background-position: center;
}

.fs-still-0 {
    background-image: url("stills/great-war.jpg");
}

.fs-still-1 {
    background-image: url("stills/vietnam-patrol.jpg");
}

.fs-still-2 {
    background-image: url("stills/cold-war.jpg");
}

.fs-still-3 {
    background-image: url("stills/derelict-barn.jpg");
}

.fs-still-4 {
    background-image: url("stills/overgrown-hall.jpg");
}

.fs-still-5 {
    background-image: url("stills/player.jpg");
}

.fs-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fs-photo-focus-top .fs-photo {
    object-position: center top;
}

.fs-photo-focus-bottom .fs-photo {
    object-position: center bottom;
}

.fs-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(13 12 11 / 0.94) 0%, rgb(13 12 11 / 0.55) 50%, rgb(13 12 11 / 0.1) 100%);
}

@media (max-width: 720px) {
    .fs-scrim {
        background: linear-gradient(0deg, rgb(13 12 11 / 0.95) 0%, rgb(13 12 11 / 0.6) 55%, rgb(13 12 11 / 0.2) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* -- Header ----------------------------------------------------------------
 * Not core's `.site-header`, which is position: absolute over a photo. The
 * menu keeps core's hooks, `.nav-toggle` and `.site-nav`, and core's sheet
 * styles both, so each rule below restates what core's sets at the same
 * specificity and wins by coming later. site.js toggles `is-open` on
 * `.site-nav`. */
/* z-index 50: above core's `.flash` (45) and `.read-only-banner` (46), the
   next siblings, so the phone menu opens over them. */
.fs-header {
    position: relative;
    z-index: 50;
    background-color: var(--fs-screen);
    border-bottom: 1px solid var(--fs-line);
}

.fs-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 76px;
}

.fs-brand {
    display: block;
    min-width: 0;
}

.fs-brand img {
    display: block;
    width: clamp(140px, 22vw, 200px);
    height: auto;
}

.fs-nav {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
}

.fs-nav a {
    opacity: 1;
}

.fs-nav a:not(.fs-button) {
    color: var(--fs-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding-block: 14px;
}

/* Core draws a sliding underline here in var(--signal), the paper link
   colour, which doesn't read on the screen. The colour change marks hover. */
.fs-nav a::after {
    content: none;
}

.fs-nav a:not(.fs-button):hover,
.fs-nav a[aria-current="page"] {
    color: var(--fs-text);
}

.fs-nav-toggle {
    display: none;
    width: 52px;
    height: 52px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--fs-line);
    color: var(--fs-text);
    cursor: pointer;
}

/* 2px bars 5px apart: core's open-state transform moves each 3.5px, which
   meets them in the middle as an X. */
.fs-nav-toggle > span:not(.sr-only) {
    display: block;
    width: 22px;
    height: 2px;
    margin: 5px auto;
    background: currentColor;
}

.fs-social-bar {
    border-bottom: 1px solid var(--fs-line);
}

/* Sized from core's `body.has-social-bar` variables, so the operator's
   small, medium or large choice still reaches this bar. */
.fs-social-bar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--social-bar-height, 34px);
}

.fs-social-bar-inner > span {
    color: var(--fs-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* 820px is core's menu band: a second breakpoint would leave widths where
   core has hidden the menu and this sheet hasn't shown the button. Core's
   panel is a full-height sheet hidden with visibility and opacity, so those
   are restated too. */
@media (max-width: 820px) {
    .fs-nav-toggle {
        display: block;
    }

    .fs-nav {
        display: none;
        position: absolute;
        inset: 100% 0 auto 0;
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px var(--fs-gutter) 20px;
        background: var(--fs-screen);
        border-bottom: 1px solid var(--fs-line);
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
        /* The header row is 76px and a 1px rule, and the "Follow us" bar
           its height and a 1px rule: 78px leaves the panel short of the
           viewport's foot, and it scrolls inside itself when longer. */
        max-height: calc(100dvh - 78px - var(--social-bar-height, 0px));
        overflow-y: auto;
    }

    .fs-nav.is-open {
        display: flex;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .fs-nav a:not(.fs-button) {
        min-height: 52px;
        display: flex;
        align-items: center;
        padding-block: 0;
        font-size: 0.9rem;
        border-bottom: 1px solid var(--fs-line);
    }

    .fs-nav-book {
        margin-top: 16px;
    }
}

/* -- Footer: end credits -------------------------------------------------- */
.fs-footer {
    background-color: var(--fs-screen);
    color: var(--fs-muted);
    border-top: 1px solid var(--fs-line);
    padding-block: 48px 32px;
    text-align: center;
}

.fs-footer-inner {
    display: grid;
    justify-items: center;
    gap: 24px;
}

.fs-footer-logo {
    display: block;
    width: 180px;
    height: auto;
}

.fs-credits {
    display: grid;
    gap: 8px;
    margin: 0;
}

.fs-credits > div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 10px;
}

.fs-credits dt {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fs-muted);
}

.fs-credits dd {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    min-width: 0;
    text-align: left;
    color: var(--fs-text);
    overflow-wrap: anywhere;
}

.fs-credits > div::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    width: 24px;
    border-bottom: 1px dotted var(--fs-muted);
}

.fs-credits dd a,
.fs-footer-links a,
.fs-footer-cookie {
    color: var(--fs-text);
}

.fs-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
    max-width: 760px;
}

.fs-footer-links a,
.fs-footer-cookie {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.fs-footer-base {
    margin: 0;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.fs-footer .powered-by {
    color: var(--fs-muted);
}

@media (max-width: 480px) {
    .fs-credits > div {
        grid-template-columns: 1fr;
        gap: 2px;
        text-align: center;
    }

    .fs-credits dt,
    .fs-credits dd {
        grid-column: 1;
        grid-row: auto;
        text-align: center;
    }

    .fs-credits > div::before {
        display: none;
    }
}

/* -- Poster card ---------------------------------------------------------- */
.fs-posters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: clamp(12px, 2vw, 24px);
}

.fs-poster {
    position: relative;
    display: grid;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
    min-width: 0;
}

.fs-poster-art {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

/* Mixed from the screen so a changed Screen colour moves it. Dense from
   halfway down, where the caption starts on a 240px-wide poster, so the
   words never sit on a bare photo. */
.fs-poster-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 25%,
        color-mix(in srgb, var(--fs-screen) 88%, transparent) 55%,
        color-mix(in srgb, var(--fs-screen) 97%, transparent) 100%);
}

/* The art and the caption share one grid cell, the caption at its foot, so
   the poster, not the caption, is the box the title link stretches over. On
   the teaser the art takes the first cell and the body the next one. */
.fs-poster-art,
.fs-poster-caption {
    grid-area: 1 / 1;
}

.fs-poster-caption {
    position: static;
    align-self: end;
    padding: 16px;
    z-index: 2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fs-tag {
    display: inline-block;
    margin: 0 0 8px;
    padding: 3px 7px;
    border: 1px solid var(--fs-brand);
    color: var(--fs-brand);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.fs-poster-title {
    margin: 0 0 6px;
    font-family: var(--fs-display);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 600;
    line-height: 0.95;
    text-transform: uppercase;
}

.fs-poster-title a {
    color: var(--fs-text);
    text-decoration: none;
}

/* The title link covers the whole poster, so the poster is one link. */
.fs-poster-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* The ring goes round the poster, not round the title it stretches from, and
   only for keyboard focus, as the title's own ring would be. */
.fs-poster:has(:focus-visible) {
    outline: 3px solid var(--fs-brand);
    outline-offset: 3px;
}

.fs-poster-title a:focus-visible {
    outline: none;
}

.fs-poster-meta,
.fs-poster-status {
    margin: 0;
    color: var(--fs-muted);
    font-size: 0.85rem;
}

.fs-poster-status {
    margin-top: 6px;
    color: var(--fs-text);
    font-weight: 600;
}

.fs-poster--soon .fs-poster-art {
    filter: grayscale(1) contrast(0.9);
}

/* Classified: three blacked-out lines standing in for the details. Purely
   decorative, and aria-hidden in the template. */
.fs-redacted {
    display: grid;
    gap: 8px;
    margin: 16px 0;
}

.fs-redacted span {
    display: block;
    height: 14px;
    background: var(--fs-text);
}

.fs-redacted span:nth-child(2) {
    width: 72%;
}

.fs-redacted span:nth-child(3) {
    width: 48%;
}

/* -- Coming-soon teaser page ---------------------------------------------- */
/* The padding is on the inner shell so the staff preview banner, first in
   the band, runs flush across the top. */
.fs-teaser-inner {
    padding-block: clamp(24px, 5vw, 64px) clamp(48px, 8vw, 96px);
}

.fs-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 16px;
    color: var(--fs-muted);
    font-size: 0.85rem;
    text-decoration: none;
}

.fs-back:hover {
    color: var(--fs-text);
}

.fs-teaser-poster {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
}

/* The teaser poster holds a form, so the card's whole-poster ring would
   circle it for every field. Its controls keep their own rings. */
.fs-teaser-poster:has(:focus-visible) {
    outline: none;
}

.fs-teaser-body {
    min-width: 0;
    padding: clamp(20px, 4vw, 48px);
    overflow-wrap: anywhere;
}

.fs-teaser-title {
    margin: 0 0 16px;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
}

.fs-teaser-body .fs-lead {
    margin: 0;
}

.fs-teaser-credits {
    justify-items: start;
    margin-block: 24px;
}

.fs-teaser-credits > div {
    grid-template-columns: minmax(0, 9rem) auto minmax(0, 1fr);
}

.fs-teaser-credits dt {
    text-align: left;
}

.fs-teaser-credits dd a {
    color: var(--fs-text);
}

.fs-teaser-note {
    margin: 0;
    color: var(--fs-muted);
}

.fs-teaser-notify {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--fs-line);
}

.fs-teaser-notify-title {
    margin: 0 0 8px;
    font-size: 1.6rem;
}

.fs-teaser-notify > p {
    margin: 0;
    color: var(--fs-muted);
}

/* Core's Notify me, on the screen. Its buttons are core's, drawn for paper:
   the primary takes the projector orange, and the outline the screen's text. */
.fs-screen .notify-me .button-primary {
    color: var(--fs-on-brand);
    background: var(--fs-brand);
}

.fs-screen .notify-me .button-outline {
    color: var(--fs-text);
    border-color: var(--fs-muted);
}

.fs-screen .notify-me-field label {
    color: var(--fs-muted);
}

.fs-screen .notify-me-hint {
    color: var(--fs-muted);
}

.fs-screen .notify-me-hint a {
    color: var(--fs-text);
}

@media (max-width: 720px) {
    .fs-teaser-poster {
        grid-template-columns: minmax(0, 1fr);
    }

    .fs-teaser-poster .fs-poster-art {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 480px) {
    .fs-teaser-credits dt,
    .fs-teaser-credits dd {
        text-align: left;
    }

    .fs-teaser-credits > div {
        grid-template-columns: minmax(0, 1fr);
        text-align: left;
    }
}

/* -- Social links: round outline buttons ---------------------------------- */
.fs-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.fs-social-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--fs-muted);
    border-radius: 50%;
    color: var(--fs-text);
}

.fs-social-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Instagram is drawn as outlines, as Gunman's and core's are: filled, its
   rounded square and lens merge into one block. The dot stays filled. */
.fs-social-icon svg rect,
.fs-social-icon svg circle:first-of-type {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.fs-social-icon:hover {
    border-color: var(--fs-text);
    color: var(--fs-screen);
    background: var(--fs-text);
}

/* In the "Follow us" bar, sized from core's bar variables. */
.fs-social-link--bar {
    width: var(--social-bar-icon-size, 25px);
    height: var(--social-bar-icon-size, 25px);
}

.fs-social-link--bar svg {
    width: 60%;
    height: 60%;
}

/* -- Home ------------------------------------------------------------------
 * The letterbox is a minimum height, not an aspect-ratio box: a long title
 * and summary grow the hero rather than being clipped by it. 2.39:1 on a wide
 * screen, 4:5 on a phone. */
.fs-hero {
    position: relative;
    display: grid;
    align-items: end;
    overflow: hidden;
}

.fs-hero--letterbox {
    min-height: max(420px, 100vw / 2.39);
}

.fs-hero--tall {
    min-height: min(88vh, 900px);
}

.fs-hero-art {
    position: absolute;
    inset: 0;
}

/* Denser than the shared scrim through the middle, where the hero's words
   end on a wide screen, so they never sit on a half-shaded photo. Mixed from
   the screen so a changed Screen colour moves it. */
.fs-hero .fs-scrim {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--fs-screen) 95%, transparent) 0%,
        color-mix(in srgb, var(--fs-screen) 90%, transparent) 55%,
        color-mix(in srgb, var(--fs-screen) 55%, transparent) 75%,
        color-mix(in srgb, var(--fs-screen) 15%, transparent) 100%);
}

.fs-hero-copy {
    position: relative;
    z-index: 2;
    padding-block: clamp(32px, 6vw, 72px);
}

.fs-hero-copy > * {
    max-width: 640px;
}

.fs-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2.6rem, 7vw, 5.6rem);
}

.fs-hero-meta,
.fs-hero-tagline {
    color: var(--fs-muted);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

/* Core's effect Pause button sits 12px from the top of the area on a phone
   (760px and under), 44px tall with a 3px ring 3px out: 62px. The words of a
   hero with an effect start below it at 68px rather than under the button. */
@media (max-width: 760px) {
    .fs-hero.has-theme-effect .fs-hero-copy {
        padding-top: 68px;
    }
}

/* On a phone the words can fill the hero from top to bottom, so the shade
   is dense all the way up: a kicker at the top sits on 88% screen. */
@media (max-width: 720px) {
    .fs-hero--letterbox {
        min-height: 125vw;
    }

    .fs-hero .fs-scrim {
        background: linear-gradient(0deg,
            color-mix(in srgb, var(--fs-screen) 95%, transparent) 0%,
            color-mix(in srgb, var(--fs-screen) 88%, transparent) 100%);
    }
}

.fs-band {
    padding-block: clamp(40px, 7vw, 88px);
}

.fs-band h2,
.fs-trailer h2 {
    margin: 0 0 24px;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
}

.fs-trailer {
    padding-block: clamp(32px, 5vw, 64px);
    border-bottom: 1px solid var(--fs-line);
}

.fs-trailer-inner,
.fs-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
}

.fs-trailer-inner > *,
.fs-split > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fs-trailer-photo,
.fs-split-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.fs-intro p:not(.fs-kicker) {
    color: var(--fs-muted);
    max-width: 60ch;
    line-height: 1.6;
}

.fs-expect-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-expect-list li {
    padding: 20px;
    background: var(--fs-surface);
    border-left: 3px solid var(--fs-brand);
    color: var(--fs-muted);
    line-height: 1.55;
}

.fs-expect-list strong {
    display: block;
    margin-bottom: 6px;
    color: var(--fs-text);
    font-family: var(--fs-display);
    font-size: 1.3rem;
    text-transform: uppercase;
}

/* The reel scrolls sideways inside its own box, never the page: the list is
   no wider than the band, and is centred when its frames fit. Frames stop at
   340 pixels because player.jpg is a 360-pixel source. */
.fs-reel {
    padding-block: 14px;
    background: #000;
    border-block: 8px dashed var(--fs-line);
}

.fs-reel-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 340px);
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 8px;
    overflow-x: auto;
    list-style: none;
}

.fs-reel-list img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.fs-archive-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 20px;
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-archive-list li {
    padding: 10px;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
}

.fs-archive-list img {
    display: block;
    width: 100%;
    height: auto;
}

.fs-venue-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fs-venue-list a {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--fs-line);
    color: var(--fs-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.fs-venue-list a:hover {
    border-color: var(--fs-brand);
}

/* -- Events board ----------------------------------------------------------
 * The filter bar is core's `.event-filter-bar`, drawn for core's palette: a
 * var(--ink-2) panel whose current month fills with var(--olive) and
 * underlines in var(--signal), and whose fields are paper. Under FilmSim's
 * tokens --signal is the paper-only orange, so the bar becomes a card on the
 * screen and each colour core sets for it is restated at (0,2,x), which
 * outranks core's (0,1,x) and (0,2,0) rules. Core's grid places its own
 * `.button`; the board's buttons are `.fs-button`, so they are placed here. */
.fs-board h1 {
    margin: 0 0 14px;
    font-size: clamp(2.6rem, 7vw, 5rem);
}

.fs-board .fs-lead {
    margin: 0 0 28px;
}

/* Genre chips: links, so they work without JavaScript. The current one is
   marked by an underline bar as well as colour. */
.fs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.fs-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--fs-line);
    color: var(--fs-text);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.fs-chips a:hover {
    border-color: var(--fs-text);
}

.fs-chips a[aria-current="true"] {
    border-color: var(--fs-brand);
    box-shadow: inset 0 -3px 0 var(--fs-brand);
    color: var(--fs-brand);
}

/* Core draws the summary's link ring in ink; the screen's brand ring would
   be 2.4:1 on its pink. */
.fs-screen .event-filter-errors a:focus-visible {
    outline-color: var(--fs-ink);
}

.fs-board .event-filter-errors h2 {
    margin: 0;
    font-size: 1.4rem;
}

.fs-filter-bar.event-filter-bar {
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
    color: var(--fs-text);
}

.fs-filter-bar.event-filter-bar > h2 {
    margin: 0 0 18px;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.fs-filter-bar .quick-filter {
    border-color: var(--fs-line);
    color: var(--fs-text);
    background: var(--fs-screen);
}

.fs-filter-bar .quick-filter:hover {
    border-color: var(--fs-text);
    background: var(--fs-screen);
}

.fs-filter-bar .quick-filter[aria-current="true"] {
    border-color: var(--fs-brand);
    box-shadow: inset 0 -4px 0 var(--fs-brand);
    background: var(--fs-screen);
}

.fs-filter-bar .event-filter-fields > label,
.fs-filter-bar .event-filter-custom label {
    color: var(--fs-muted);
}

.fs-filter-bar .event-filter-fields select,
.fs-filter-bar .event-filter-custom input {
    border: 1px solid var(--fs-muted);
    color: var(--fs-text);
    background: var(--fs-screen);
    color-scheme: dark;
}

.fs-filter-bar .event-filter-fields [aria-invalid="true"],
.fs-filter-bar .event-filter-custom [aria-invalid="true"] {
    border: 2px solid #ffb8aa;
    background: var(--fs-screen);
    box-shadow: inset 4px 0 0 #ffb8aa;
}

.fs-filter-bar .event-filter-fields .fs-button,
.fs-filter-bar .event-filter-custom .fs-button {
    grid-column: 3;
    grid-row: 2;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.fs-filter-bar .event-filter-custom {
    border-top-color: var(--fs-line);
}

.fs-filter-bar .event-filter-custom > summary {
    color: var(--fs-text);
}

.fs-text-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 52px;
    margin: 16px 0 -10px auto;
    color: var(--fs-text);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fs-board-count {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
    justify-content: space-between;
    margin: 28px 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fs-line);
}

.fs-board-count strong {
    font-family: var(--fs-display);
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
}

.fs-board-count span {
    min-width: 0;
    color: var(--fs-muted);
    overflow-wrap: anywhere;
}

.fs-empty {
    display: grid;
    gap: 16px;
    justify-items: start;
    padding: clamp(20px, 4vw, 36px);
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
}

.fs-empty p {
    margin: 0;
}

.fs-board .pagination {
    font-size: 0.75rem;
}

.fs-board .pagination a,
.fs-board .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 52px;
    color: var(--fs-text);
}

@media (max-width: 760px) {
    .fs-filter-bar .event-filter-fields .fs-button {
        grid-column: 1;
        grid-row: 7;
        width: 100%;
        margin-top: 9px;
    }

    .fs-filter-bar .event-filter-custom .fs-button {
        grid-column: 1;
        grid-row: 8;
        width: 100%;
        margin-top: 9px;
    }

    .fs-text-link {
        margin-left: 0;
    }
}

/* -- Event -----------------------------------------------------------------
 * The header is the home hero's letterbox. Under it the facts are end
 * credits, left-aligned with a dotted leader, beside the certificate roundel.
 * The roles panel, team rows, places and Wardrobe cards are Gunman's markup
 * on FilmSim's grounds: core's sheet draws some of them for paper (a paused
 * team and a reopen time in #712d24, team names in their team colour), so
 * each is restated here for the dark band. Every colour is text, muted, brand
 * or the light error red on a card, and the team swatches are 3:1 or better
 * on a card; tests/checks/filmsim-theme.php measures each. */
.fs-event-facts {
    padding-block: clamp(28px, 4vw, 48px);
    border-bottom: 1px solid var(--fs-line);
}

.fs-event-facts-inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.fs-credits--left > div {
    grid-template-columns: auto minmax(24px, 1fr) minmax(0, auto);
}

.fs-credits--left dt {
    text-align: left;
}

.fs-credits--left > div::before {
    width: auto;
}

.fs-credits--left dd {
    text-align: right;
}

.fs-credits dd small {
    display: block;
    color: var(--fs-muted);
    font-size: 0.8rem;
}

.fs-site-map-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: 8px;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fs-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--fs-muted);
}

.fs-rating-badge {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 3px solid var(--fs-text);
    border-radius: 50%;
    color: var(--fs-text);
    font-family: var(--fs-display);
    font-size: 1.4rem;
    font-weight: 700;
}

.fs-event-still {
    padding-top: clamp(24px, 4vw, 40px);
}

.fs-event-still img {
    display: block;
    width: 100%;
    height: clamp(180px, 26vw, 330px);
    object-fit: cover;
}

.fs-event-body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}

.fs-story,
.fs-booking {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fs-story p {
    color: var(--fs-muted);
    line-height: 1.65;
}

.fs-story .fs-kicker {
    color: var(--fs-brand);
    line-height: normal;
}

.fs-story .rich-text {
    max-width: 70ch;
}

.fs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

/* The call sheet: each game day's Arrive from, Game on and End of play, three
   values in a row that stack on a phone, or one list in time order once the
   event has itinerary entries. */
.fs-day-times {
    max-width: 70ch;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--fs-line);
}

.fs-day-times h3 {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.fs-day-times h4 {
    margin: 20px 0 8px;
    color: var(--fs-text);
    font-family: var(--fs-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fs-day-times dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.fs-day-times dl div {
    display: grid;
    align-content: start;
    gap: 2px;
}

.fs-day-times dt {
    color: var(--fs-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.fs-day-times dd {
    margin: 0;
    color: var(--fs-text);
    font-family: var(--fs-display);
    font-size: 1.15rem;
    font-weight: 600;
}

.fs-day-times dl.fs-day-times-timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.fs-day-times .fs-day-times-timeline div {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 2px 16px;
    padding: 8px 0;
    border-top: 1px solid var(--fs-line);
}

.fs-day-times .fs-day-times-timeline div:last-child {
    border-bottom: 1px solid var(--fs-line);
}

.fs-day-times .fs-day-times-timeline dt {
    grid-column: 2;
    grid-row: 1;
    color: var(--fs-text);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.fs-day-times .fs-day-times-timeline dd {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
}

.fs-day-times .fs-day-times-timeline .fs-day-times-note {
    grid-column: 2;
    grid-row: 2;
    color: var(--fs-muted);
    font-family: var(--fs-body);
    font-size: 0.85rem;
    font-weight: 400;
    white-space: normal;
}

.fs-day-times > p {
    margin: 16px 0 0;
    font-size: 0.9rem;
}

/* -- Choose your role: the booking panel, a card on the band --------------- */
.fs-booking {
    padding: clamp(20px, 3vw, 28px);
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
    border-top: 3px solid var(--fs-brand);
    color: var(--fs-text);
}

.fs-booking h2 {
    margin: 0 0 18px;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

.fs-booking-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin: 0 0 18px;
}

.fs-booking-price strong {
    font-family: var(--fs-display);
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 600;
    line-height: 1;
}

.fs-booking-price span,
.fs-booking-note,
.fs-booking-policy p {
    color: var(--fs-muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

.fs-ticket-options {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--fs-line);
}

.fs-ticket-options li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--fs-line);
}

.fs-ticket-options strong,
.fs-ticket-options b {
    color: var(--fs-text);
    font-family: var(--fs-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.fs-ticket-options b {
    text-align: right;
}

.fs-ticket-options span,
.fs-ticket-options small {
    grid-column: 1 / -1;
    color: var(--fs-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Places per ticket and per game day (theme API 0.5). The words say the
   state; colour only repeats it: muted when open, text when low, the light
   error red when full or sold out. A sold-out ticket's name and price step
   down to muted. */
.fs-ticket-places {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fs-ticket-options .fs-ticket-places.is-low {
    color: var(--fs-text);
}

.fs-ticket-options .fs-ticket-places.is-out {
    color: #ffb8aa;
}

.fs-ticket-options li.is-sold-out > strong,
.fs-ticket-options li.is-sold-out > b {
    color: var(--fs-muted);
}

.fs-booking-availability {
    margin: 18px 0;
    padding: 11px 13px;
    border-left: 3px solid var(--fs-brand);
    background: var(--fs-screen);
    color: var(--fs-text);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fs-day-places p {
    margin: 0;
}

.fs-day-places ul {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.fs-day-places li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
}

.fs-day-places b {
    color: var(--fs-muted);
}

.fs-day-places b.is-low {
    color: var(--fs-text);
}

.fs-day-places b.is-out {
    color: #ffb8aa;
}

.fs-booking-meta {
    color: var(--fs-text);
}

/* Team rows: the name takes the text colour rather than the team colour
   core's `team_class()` sets, which was chosen for core's grounds; the colour
   moves to the swatch alone, a 3:1 graphic. */
.fs-team-availability {
    display: grid;
    gap: 7px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.fs-team-availability > li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
    padding: 11px 13px;
    border: 1px solid var(--fs-line);
    background: var(--fs-screen);
    color: var(--fs-text);
    font-size: 0.9rem;
}

.fs-team-availability > li > span {
    min-width: 0;
    font-weight: 700;
}

.fs-team-availability > li > i,
.fs-dress-card header > i {
    width: 10px;
    height: 10px;
    background: var(--fs-text);
}

/* Each swatch on a card or the screen: olive 6.26:1, tan 8.82:1, black (a
   grey, as core draws it on dark) 8.19:1, blue 6.91:1 and red 4.67:1 on the
   surface, more on the screen. */
.fs-team-availability > li.team-olive > i,
.fs-dress-card.team-olive header > i {
    background: #8f9f6e;
}

.fs-team-availability > li.team-tan > i,
.fs-dress-card.team-tan header > i {
    background: #c8b48a;
}

.fs-team-availability > li.team-black > i,
.fs-dress-card.team-black header > i {
    background: #afb0aa;
}

.fs-team-availability > li.team-blue > i,
.fs-dress-card.team-blue header > i {
    background: #8ba5b0;
}

.fs-team-availability > li.team-red > i,
.fs-dress-card.team-red header > i {
    background: #e0524c;
}

/* The four identifiers added for eight teams (theme API 0.17), on FilmSim's dark
   surface: yellow 10.4:1, orange 7.5:1, purple 6.3:1 and white, drawn in the
   theme's own warm white. */
.fs-team-availability > li.team-yellow > i,
.fs-dress-card.team-yellow header > i {
    background: #e3c35a;
}

.fs-team-availability > li.team-orange > i,
.fs-dress-card.team-orange header > i {
    background: #f0913a;
}

.fs-team-availability > li.team-purple > i,
.fs-dress-card.team-purple header > i {
    background: #a98bd6;
}

.fs-team-availability > li.team-white > i,
.fs-dress-card.team-white header > i {
    background: #f4efe6;
}

.fs-team-availability .team-booking-public-state,
.fs-dress-places .team-booking-public-state {
    color: var(--fs-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Core: #712d24, 1.6:1 on the dark grounds. The light error red is 10.81:1
   on a card and 11.81:1 on the screen. */
.fs-team-availability .team-booking-public-state.is-paused,
.fs-team-days,
.fs-dress-card header > .is-paused {
    color: #ffb8aa;
}

.fs-screen .team-booking-reopens {
    color: #ffb8aa;
    font-size: 0.8rem;
    font-weight: 700;
}

.fs-team-availability .team-booking-reopens,
.fs-team-availability .team-sniper-availability,
.fs-team-availability .fs-team-days {
    grid-column: 2 / -1;
    font-size: 0.8rem;
}

.fs-team-availability .team-sniper-availability,
.fs-dress-places .team-sniper-availability {
    color: var(--fs-muted);
    font-size: 0.8rem;
}

.fs-team-days {
    font-size: 0.8rem;
    font-weight: 700;
}

.fs-button-full {
    width: 100%;
    margin-top: 9px;
    text-align: center;
}

/* A booking state that can't be acted on: words in the muted text, a dashed
   edge, no fill, so it never reads as the orange action. */
.fs-button-disabled {
    border: 2px dashed var(--fs-muted);
    color: var(--fs-muted);
    cursor: not-allowed;
}

.fs-booking-policy {
    margin-top: 12px;
}

.fs-booking-policy summary {
    display: list-item;
    min-height: 44px;
    padding: 12px 0;
    box-sizing: border-box;
    color: var(--fs-text);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.fs-booking-policy p {
    margin: 0;
}

/* -- Wardrobe ----------------------------------------------------------------- */
.fs-dress {
    border-top: 1px solid var(--fs-line);
}

.fs-section-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 24px;
}

.fs-section-head > * {
    min-width: 0;
}

.fs-section-head h2 {
    margin: 0;
}

.fs-section-note {
    max-width: 44ch;
    margin: 0;
    color: var(--fs-muted);
}

.fs-dress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}

.fs-screen .fs-dress-card {
    min-width: 0;
    padding: 22px 22px 26px;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
    color: var(--fs-text);
    overflow-wrap: anywhere;
}

.fs-dress-card header {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fs-line);
}

.fs-dress-card header h3 {
    margin: 0;
    font-size: 1.6rem;
}

.fs-dress-card header > strong {
    color: var(--fs-text);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.fs-dress-places {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    margin: -4px 0 14px;
}

.fs-dress-card section + section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--fs-line);
}

.fs-dress-card .rich-text,
.fs-dress-card .rich-text p {
    color: var(--fs-text);
    line-height: 1.6;
}

.fs-dress-recommended {
    margin: 12px 0 0;
    color: var(--fs-muted);
    font-size: 0.85rem;
}

/* A <button>: no fill of its own, so the ghost reads as it does as a link. */
button.fs-button-ghost {
    margin-top: 24px;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

button.fs-button-ghost:hover {
    background: var(--fs-text);
    color: var(--fs-screen);
}

/* Core's dress-code dialog stays on paper. Its team headings take the team
   colour from `team_class()`, which on its #e8e7df card is under 2:1 for tan
   and black; the colour stays on the card's top rule and the heading takes
   the ink. */
.dress-code-dialog-team h3 {
    color: var(--fs-ink);
}

@media (max-width: 860px) {
    .fs-event-facts-inner,
    .fs-event-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .fs-day-times dl {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* On a phone each credit is its label over its value, both left-aligned:
   the dates and a site map link don't fit beside a label at 320 pixels. */
@media (max-width: 480px) {
    .fs-credits--left > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .fs-credits--left dt,
    .fs-credits--left dd {
        text-align: left;
    }

    .fs-site-map-link {
        margin-left: 0;
    }
}

/* -- About ---------------------------------------------------------------- */
.fs-prose p:not(.fs-kicker) {
    color: var(--fs-muted);
    line-height: 1.65;
    max-width: 62ch;
}

/* player.jpg is a 360 by 409 portrait: drawn at its own shape and never
   wider than its source, rather than cropped and stretched to 16:9. */
.fs-split-photo.fs-split-portrait {
    justify-self: center;
    max-width: 360px;
    aspect-ratio: auto;
}

.fs-faq details {
    border-top: 1px solid var(--fs-line);
    max-width: 820px;
}

.fs-faq details:last-of-type {
    border-bottom: 1px solid var(--fs-line);
}

/* display: flex drops the browser's own disclosure triangle, so the open
   and closed state is drawn here as a plus that turns to a minus. */
.fs-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding-block: 10px;
    color: var(--fs-text);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.fs-faq summary::-webkit-details-marker {
    display: none;
}

/* The plus and minus are drawing, not words, so they carry empty alt text
   and are not read with the question. The plain declaration first is for a
   browser without alt text, which drops the second and still draws the mark. */
.fs-faq summary::after {
    content: "+";
    content: "+" / "";
    flex: none;
    color: var(--fs-brand);
    font-family: var(--fs-display);
    font-size: 1.6rem;
    line-height: 1;
}

.fs-faq details[open] > summary::after {
    content: "−";
    content: "−" / "";
}

.fs-faq details p {
    color: var(--fs-muted);
    line-height: 1.65;
    max-width: 70ch;
    margin: 0 0 20px;
}

.fs-archive .fs-actions {
    margin-top: 32px;
}

/* -- Page heads and paper pages ------------------------------------------- */
.fs-page-head {
    padding-block: clamp(40px, 7vw, 80px) 24px;
    border-bottom: 1px solid var(--fs-line);
}

.fs-page-head h1 {
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 4.4rem);
}

.fs-page-head .fs-lead {
    margin: 16px 0 0;
}

/* A heading and its words beside them, top-aligned rather than centred. */
.fs-split--top {
    align-items: start;
}

/* Operator rich text on a band: its own headings smaller than the band's,
   and lists set like the paragraphs around them. */
.fs-prose .rich-text :is(h1, h2, h3) {
    margin: 28px 0 10px;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.fs-prose .rich-text > :first-child {
    margin-top: 0;
}

.fs-prose .rich-text :is(ul, ol) {
    max-width: 62ch;
    padding-left: 20px;
    color: var(--fs-muted);
    line-height: 1.65;
}

.fs-cta {
    border-top: 1px solid var(--fs-line);
}

.fs-cta-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: end;
    justify-content: space-between;
}

.fs-cta-inner > * {
    min-width: 0;
}

.fs-cta h2 {
    margin: 0;
}

/* -- Rules ------------------------------------------------------------------
 * Gunman's frame: a sticky index rail beside numbered sections. Core draws
 * `.rules-contiguous-highlight` and the highlighted list items as a
 * translucent white panel for paper (rgb(255 255 255 / 42%), mid-grey on the
 * screen, under 2:1 for the muted words on it), so on the band they are cards:
 * text 15.62:1 and muted 8.72:1 on the surface, as the suite check measures. */
.fs-rules-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* Sticky, so a long index scrolls inside itself rather than running off
   the bottom of a short window. */
.fs-rules-index {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    display: grid;
    padding-right: 20px;
    border-right: 1px solid var(--fs-line);
    min-width: 0;
}

.fs-rules-index a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    align-content: center;
    min-height: 44px;
    padding: 8px 0;
    border-top: 1px solid var(--fs-line);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.fs-rules-index a > span,
.fs-rules-number {
    color: var(--fs-muted);
    font-family: var(--fs-display);
    font-weight: 600;
    letter-spacing: 0.1em;
}

.fs-rules-index a:hover {
    color: var(--fs-brand);
}

.fs-rules-content {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fs-rules-content > section {
    max-width: 74ch;
    scroll-margin-top: 24px;
}

.fs-rules-content > section + section {
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid var(--fs-line);
}

.fs-rules-number {
    margin: 0 0 6px;
}

.fs-rules-content h2 {
    margin: 0 0 16px;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

.fs-rules-content li {
    color: var(--fs-text);
    line-height: 1.6;
}

.fs-rules-content li + li {
    margin-top: 8px;
}

.fs-rules-content li::marker {
    color: var(--fs-brand);
}

.fs-screen .rules-contiguous-highlight {
    display: grid;
    gap: 16px;
    padding: 24px;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
    border-left: 3px solid var(--fs-brand);
}

.fs-screen .rules-contiguous-highlight > * {
    margin: 0;
}

.fs-rules-content .highlighted-rule-list,
.fs-rules-content .rules-rich-text-highlighted > :is(ul, ol) {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fs-rules-content .highlighted-rule-list li,
.fs-rules-content .rules-rich-text-highlighted > :is(ul, ol) > li {
    margin: 0;
    padding: 18px 20px;
    background: var(--fs-surface);
    border-left: 3px solid var(--fs-brand);
    color: var(--fs-text);
}

/* A highlighted numbered list keeps its numbers, inside each card. */
.fs-rules-content .rules-rich-text-highlighted > ol {
    list-style: decimal inside;
}

.fs-rules-content .highlighted-rule-list strong {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}

.fs-rules-dress {
    margin-top: 24px;
    padding: 20px;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
}

.fs-rules-dress header {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fs-line);
}

.fs-rules-dress header strong {
    min-width: 0;
    font-family: var(--fs-display);
    font-size: 1.3rem;
    text-transform: uppercase;
}

.fs-rules-dress .fs-text-link {
    min-height: 44px;
    margin: 0;
}

.fs-rules-dress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px 24px;
}

.fs-rules-dress-grid h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.fs-rules-dress-grid p {
    margin: 0 0 8px;
}

@media (max-width: 860px) {
    .fs-rules-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .fs-rules-index {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
        border-right: 0;
    }
}

/* -- Venues ----------------------------------------------------------------- */
.fs-venue-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(12px, 2vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fs-venue-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
}

.fs-venue-card .fs-still {
    aspect-ratio: 16 / 9;
}

.fs-venue-body {
    display: grid;
    align-content: start;
    padding: 18px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fs-venue-card h2 {
    margin: 0 0 10px;
    font-size: 1.6rem;
}

.fs-venue-card h2 a {
    color: var(--fs-text);
}

.fs-venue-card h2 a:hover {
    color: var(--fs-brand);
}

.fs-venue-summary,
.fs-venue-terrain,
.fs-venue-count {
    margin: 0 0 8px;
}

.fs-venue-terrain {
    color: var(--fs-muted);
    font-size: 0.9rem;
}

.fs-venue-count {
    color: var(--fs-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fs-venue-body .fs-actions {
    margin-top: 12px;
}

/* One venue: the address as credits, Open in maps beside it. */
.fs-site-flags {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fs-credits dd strong {
    font-weight: 700;
}

.fs-venue-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}

.fs-venue-detail > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fs-venue-terrain-block {
    padding-left: 20px;
    border-left: 1px solid var(--fs-line);
}

.fs-site-map-image {
    display: block;
    border: 1px solid var(--fs-line);
}

.fs-site-map-image img {
    display: block;
    width: 100%;
    height: auto;
}

.fs-site-map-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: center;
    justify-content: space-between;
    color: var(--fs-muted);
    font-size: 0.85rem;
}

.fs-site-map-open {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--fs-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fs-site-map-file {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
    color: var(--fs-text);
    overflow-wrap: anywhere;
}

.fs-site-map-file > div {
    display: grid;
    min-width: 0;
}

.fs-site-map-file span {
    color: var(--fs-muted);
    font-size: 0.85rem;
}

/* The chronograph limits: Gunman's table on the band. */
.fs-limit-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--fs-text);
}

.fs-limit-table th,
.fs-limit-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--fs-line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.fs-limit-table thead th {
    border-bottom: 2px solid var(--fs-brand);
    overflow-wrap: normal;
    color: var(--fs-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* anywhere, not break-word: only anywhere lets a long class name shrink the
   column's minimum width, so the table fits at 320 pixels. */
.fs-limit-table tbody th {
    overflow-wrap: anywhere;
    hyphens: auto;
    font-family: var(--fs-display);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.fs-class-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
    margin-top: 28px;
}

.fs-class-rules article {
    min-width: 0;
    padding: 20px;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
    overflow-wrap: anywhere;
}

.fs-class-rules h3 {
    margin: 0 0 10px;
    font-size: 1.4rem;
}

.fs-class-rules .rich-text :is(p, li) {
    color: var(--fs-muted);
    line-height: 1.6;
}

.fs-class-rules .rich-text :is(ul, ol) {
    padding-left: 20px;
}

@media (max-width: 860px) {
    .fs-venue-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* At 320 pixels the four columns hold about 70 pixels each: smaller words
   and tighter cells, so the table never needs a sideways scroll. */
@media (max-width: 600px) {
    .fs-limit-table {
        font-size: 0.85rem;
    }

    .fs-limit-table th,
    .fs-limit-table td {
        padding: 10px 6px;
    }

    .fs-limit-table thead th {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .fs-limit-table tbody th {
        font-size: 0.95rem;
    }
}

/* -- Teams ------------------------------------------------------------------
 * Gunman's rows. The team colour is the tag's border, the event page's
 * swatch colours, each 3:1 or better on the surface; the tag's words are the
 * text colour. */
.fs-team-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--fs-line);
}

.fs-team-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 12px 24px;
    align-items: start;
    padding: 24px 0;
    border-bottom: 1px solid var(--fs-line);
}

.fs-team-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 8px;
    border: 2px solid var(--fs-text);
    background: var(--fs-surface);
    color: var(--fs-text);
    font-family: var(--fs-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    min-width: 0;
}

.fs-team-row.fs-team-olive .fs-team-tag {
    border-color: #8f9f6e;
}

.fs-team-row.fs-team-tan .fs-team-tag {
    border-color: #c8b48a;
}

.fs-team-row.fs-team-black .fs-team-tag {
    border-color: #afb0aa;
}

.fs-team-row.fs-team-blue .fs-team-tag {
    border-color: #8ba5b0;
}

.fs-team-row.fs-team-red .fs-team-tag {
    border-color: #e0524c;
}

.fs-team-row.fs-team-yellow .fs-team-tag {
    border-color: #e3c35a;
}

.fs-team-row.fs-team-orange .fs-team-tag {
    border-color: #f0913a;
}

.fs-team-row.fs-team-purple .fs-team-tag {
    border-color: #a98bd6;
}

.fs-team-row.fs-team-white .fs-team-tag {
    border-color: #f4efe6;
}

.fs-team-row-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fs-team-row-body h2 {
    margin: 0 0 8px;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.fs-team-row-body h2 a {
    color: var(--fs-text);
}

.fs-team-row-body h2 a:hover {
    color: var(--fs-brand);
}

.fs-team-row-body p {
    max-width: 66ch;
    margin: 0;
    color: var(--fs-muted);
}

.fs-team-row-body .fs-team-row-dress {
    margin-top: 8px;
}

.fs-team-row-dress strong {
    color: var(--fs-text);
}

@media (max-width: 720px) {
    .fs-team-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .fs-team-tag {
        justify-self: start;
    }
}

/* One team: the Wardrobe cards are the event page's; leadership portraits
   are cards on the band. */
.fs-dress-card > .fs-kicker {
    margin-bottom: 10px;
}

.fs-dress-recommended strong {
    display: block;
    color: var(--fs-text);
}

.fs-dress-recommended ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.fs-command-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fs-commander {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding-bottom: 16px;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
    overflow-wrap: anywhere;
}

.fs-commander img,
.fs-commander-blank {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    margin-bottom: 12px;
    object-fit: cover;
    background: var(--fs-screen);
}

.fs-commander-role,
.fs-commander-name {
    padding: 0 16px;
}

.fs-commander-role {
    color: var(--fs-brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.fs-commander-name {
    color: var(--fs-text);
    font-family: var(--fs-display);
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* -- Tools ------------------------------------------------------------------
 * Gunman's converter, its hooks untouched, as a card on the band. Its fields
 * are dark, with a muted edge (8.72:1 on the card, over the 3:1 a control's
 * edge needs) and a dark native picker. */
.fs-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 44px;
    align-items: start;
}

.fs-tool-copy {
    min-width: 0;
}

.fs-tool-copy p:not(.fs-kicker) {
    max-width: 58ch;
    color: var(--fs-muted);
    line-height: 1.6;
}

.fs-tool-copy .fs-tool-warning {
    margin: 18px 0 0;
    padding: 14px 16px;
    background: var(--fs-surface);
    border-left: 3px solid var(--fs-brand);
    color: var(--fs-text);
}

.fs-tool-copy .fs-tool-formula {
    margin: 18px 0 0;
    font-family: var(--fs-display);
    letter-spacing: 0.04em;
}

.fs-converter {
    min-width: 0;
    padding: 24px 22px 26px;
    background: var(--fs-surface);
    border: 1px solid var(--fs-line);
    color-scheme: dark;
}

.fs-converter label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.fs-converter label > span:first-child {
    color: var(--fs-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.fs-converter select,
.fs-converter input {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 12px;
    border: 1px solid var(--fs-muted);
    border-radius: 0;
    background: var(--fs-screen);
    color: var(--fs-text);
    font-family: var(--fs-display);
    font-size: 16px;
}

.fs-converter-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: end;
    margin-top: 20px;
}

.fs-converter-fields > i {
    padding-bottom: 14px;
    color: var(--fs-muted);
    font-size: 1.2rem;
    font-style: normal;
}

.fs-converter-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.fs-converter-input > b {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--fs-brand);
    color: var(--fs-on-brand);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

@media (max-width: 860px) {
    .fs-tool {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 420px) {
    .fs-converter-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .fs-converter-fields > i {
        justify-self: center;
        padding: 0;
        transform: rotate(90deg);
    }
}

/* -- Terms and privacy: on the box-office paper ------------------------------
 * No screen band, so main is the paper sheet. Kickers and numbers take the
 * paper link colour (5.71:1), as the projector orange is 2.65:1 on paper. */
.fs-paper-page :is(h1, h2) {
    font-family: var(--fs-display);
    text-transform: uppercase;
    line-height: 1;
}

.fs-paper-page .fs-kicker,
.fs-paper-page .fs-legal-index a > span {
    color: var(--fs-paper-link);
}

.fs-paper-head {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.fs-paper-head h1 {
    margin: 0 0 12px;
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.fs-paper-lead {
    max-width: 62ch;
    margin: 0;
}

.fs-legal-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.fs-legal-index {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    display: grid;
    min-width: 0;
    padding-right: 20px;
    border-right: 1px solid var(--line);
}

.fs-legal-index .fs-kicker:not(:first-child) {
    margin-top: 24px;
}

.fs-paper-page .fs-legal-index a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    align-content: center;
    min-height: 44px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    color: var(--fs-ink);
    font-size: 0.9rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* The two document links have no number, so no number column. */
.fs-paper-page .fs-legal-index a:not(:has(> span)) {
    display: flex;
    align-items: center;
}

.fs-paper-page .fs-legal-index a[aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fs-legal-index a > span {
    font-family: var(--fs-display);
    font-weight: 600;
}

.fs-legal-content {
    max-width: 74ch;
    min-width: 0;
}

.fs-legal-head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
}

.fs-legal-print {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fs-paper-link);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.fs-paper-page .legal-document h2 {
    margin: 24px 0 4px;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 600;
    scroll-margin-top: 24px;
}

.fs-paper-page .legal-document :is(p, li) {
    font-size: 0.95rem;
}

@media (max-width: 860px) {
    .fs-legal-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .fs-legal-index {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
        border-right: 0;
    }
}