/*
 * The films section (page/films/, Films\FilmPages).
 *
 * As approved on 30 October 2026 (docs/superpowers/specs/2026-10-30-v3-
 * films-design.md): a black masthead over the backdrop, then white cards
 * on the paper tone, each headed by its icon on a dark tile. Videos and
 * photos sit on black inside the main column, never into the side one.
 * Lime is for what can be done (the trailer, tickets) and for the film
 * itself where a list shows it among others.
 */

.fm {
    --fm-ink: #141414;
    --fm-ink-mute: #5c5c58;
    --fm-ink-soft: #33332f;
    --fm-surface: #ffffff;
    --fm-paper: #f4f3ef;
    --fm-line: #e3e3de;
    --fm-tile: #141414;
    --fm-shadow: rgba(0, 0, 0, .08);

    color: var(--fm-ink);
    background: var(--fm-paper);
}

:root[data-theme="dark"] .fm {
    --fm-ink: #ededea;
    --fm-ink-mute: #a8a8a2;
    --fm-ink-soft: #cfcfca;
    --fm-surface: #161615;
    --fm-paper: #0d0d0c;
    --fm-line: #2a2a28;
    --fm-tile: #2a2a28;
    --fm-shadow: rgba(0, 0, 0, .5);
}

.fm a {
    color: inherit;
    text-decoration: none;
}

/* A line draws itself under the words on hover, as in the people pages. */
.fm-u {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    transition: background-size var(--speed-slow) var(--ease);
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
}

a:hover .fm-u,
a:focus-visible .fm-u,
.fm-u:hover {
    background-size: 100% 2px;
}

/* Icons ------------------------------------------------------------------ */

.fm-i {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fm-i .fm-i__fill {
    fill: currentColor;
    stroke: none;
}

/* A genre's own icon (FilmSection::glyph()): the admin's black drawing used
   as a mask, so it takes the colour of the words around it. */
.fm-glyph {
    flex: none;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--glyph) center / contain no-repeat;
    mask: var(--glyph) center / contain no-repeat;
}

.fm-hero__kicker .fm-glyph {
    width: 16px;
    height: 16px;
}

/* Masthead --------------------------------------------------------------- */

/* The top banner, a little apart from the masthead under it, on its own black. */
/* Not the phone's: its slot has no background, so the page would show
   through the gap as a white stripe under the banner. */
.fm > .ad--top:not(.ad--top-phone) {
    padding-bottom: 5px;
}

.fm-hero {
    position: relative;
    overflow: hidden;
    background: var(--c-ground);
    color: var(--c-ink);
}

.fm-hero__backdrop {
    position: absolute;
    inset: 0;
}

.fm-hero__backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

/* Faded in from the left, where the words are, and from the foot. */
.fm-hero__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .9) 14%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .1)),
        linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, transparent 40%);
}

.fm-hero__inner {
    position: relative;
    max-width: var(--wrap);
    margin-inline: auto;
    padding: 22px var(--gutter) 30px;
}

.fm-crumbs .pe-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--c-ink-dim);
    font-family: var(--font-mono);
    font-size: var(--size-data);
}

.fm-crumbs .pe-crumb a {
    color: var(--c-ink-mute);
}

.fm-crumbs .pe-crumb a:hover {
    color: var(--c-ink);
}

.fm-hero__body {
    display: grid;
    grid-template-columns: 243px minmax(0, 1fr);
    align-items: end;
    gap: 32px;
}

.fm-hero__poster img,
.fm-hero__poster .fm-blank {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 500 / 714;
    object-fit: cover;
    border-radius: var(--radius-lg);
    /* On the black, a dark shadow would not show: a faint edge and glow. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 34px rgba(255, 255, 255, .07);
}

.fm-hero__kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--c-accent);
    font-family: var(--font-display);
    font-size: var(--size-label);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fm-hero__kicker .fm-i {
    width: 15px;
    height: 15px;
}

.fm-hero__kicker,
.fm-hero__title,
.fm-hero__by {
    text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

.fm-hero__title {
    margin: 6px 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}

/* The original title, under the site's own: a line of its own, in the
   title's face, with a small label ahead of it. */
.fm-hero__original {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

.fm-hero__original-label {
    color: var(--c-ink-mute);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fm-hero__by {
    margin: 0 0 16px;
    color: var(--c-ink-mute);
    font-size: var(--size-ui);
    line-height: 1.5;
}

.fm-hero__by a {
    color: var(--c-ink);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .35);
    text-underline-offset: 3px;
}

.fm-hero__by a:hover {
    text-decoration-color: var(--c-accent);
}

.fm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.fm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border: 1px solid var(--c-rule);
    border-radius: 99px;
    background: rgba(0, 0, 0, .4);
    color: var(--c-ink-mute);
    font-family: var(--font-mono);
    font-size: var(--size-data-small);
}

.fm-country {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    vertical-align: middle;
}

/* The flags are round already; the ring keeps a white one off a white card. */
.fm-flag {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(127, 127, 127, .35);
}

.fm-chip__sep {
    opacity: .6;
}

.fm-chip .fm-i {
    width: 14px;
    height: 14px;
    color: var(--c-accent);
}

/* The days left to a film's release here: the one chip in the accent,
   as the legacy page's "Faltan N días" box stood out. */
.fm-chip--countdown {
    border-color: var(--c-accent);
    color: var(--c-accent);
    font-weight: 700;
}

.fm-scores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.fm-scores__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--c-rule);
    border-radius: var(--radius);
    background: rgba(20, 20, 20, .75);
}

.fm-scores__text {
    display: flex;
    flex-direction: column;
    color: var(--c-ink-mute);
    font-size: var(--size-caption);
    line-height: 1.3;
}

.fm-scores__label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--c-ink);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
}

.fm-scores__label .fm-i {
    width: 14px;
    height: 14px;
}

/* A score, as the legacy film pages draw it (.nota in top.tpl). */
.fm-score {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 52px;
    height: 42px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: var(--score-tracking);
    text-shadow: var(--score-shadow);
    -webkit-text-stroke: var(--score-stroke) #ffffff;
}

.fm-score--high {
    background: var(--c-score-shade), var(--c-score-high);
}

.fm-score--mid {
    background: var(--c-score-shade), var(--c-score-mid);
}

.fm-score--low {
    background: var(--c-score-shade), var(--c-score-low);
}

.fm-score--small {
    min-width: 40px;
    height: 32px;
    font-size: 16px;
}

/* In the masthead the first score (the site's average, where there is
   more than one) stands out: the ones after it show their colour through
   a little of the backdrop. The colour goes on a layer behind the figure,
   so the figure itself keeps its full white. */
.fm-scores__item + .fm-scores__item .fm-score {
    position: relative;
    isolation: isolate;
    background: none;
}

.fm-scores__item + .fm-scores__item .fm-score::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: .65;
}

.fm-scores__item + .fm-scores__item .fm-score--high::before {
    background: var(--c-score-shade), var(--c-score-high);
}

.fm-scores__item + .fm-scores__item .fm-score--mid::before {
    background: var(--c-score-shade), var(--c-score-mid);
}

.fm-scores__item + .fm-scores__item .fm-score--low::before {
    background: var(--c-score-shade), var(--c-score-low);
}

/* Buttons ---------------------------------------------------------------- */

.fm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: var(--size-ui);
    font-weight: 600;
    transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.fm-btn--lime {
    background: var(--c-accent);
    color: var(--c-accent-ink) !important;
}

.fm-btn--lime:hover {
    background: var(--c-accent-hover);
}

.fm-btn--ghost {
    border-color: var(--c-rule);
    background: rgba(255, 255, 255, .06);
    color: var(--c-ink) !important;
}

.fm-btn--ghost:hover {
    border-color: var(--c-rule-strong);
    background: rgba(255, 255, 255, .12);
}

.fm-btn--dark {
    background: var(--fm-tile);
    color: #ffffff !important;
}

.fm-btn--line {
    border-color: var(--fm-line);
    background: var(--fm-surface);
}

.fm-btn--line:hover {
    border-color: var(--fm-ink);
}

.fm-btn--small {
    min-height: 34px;
    padding: 6px 11px;
    font-size: 12.5px;
}

.fm-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--fm-line);
    border-radius: 99px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.fm-pill .fm-i {
    width: 14px;
    height: 14px;
}

/* Tabs: sticky under the condensed bar, scrolling sideways on a phone. ---- */

/* Body ------------------------------------------------------------------- */

.fm-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    max-width: var(--wrap);
    margin-inline: auto;
    padding: 26px var(--gutter) 60px;
}

.fm-body--ads {
    grid-template-columns: minmax(0, 1fr) 300px;
}

.fm-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.fm-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.fm-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-lg);
    background: var(--fm-surface);
}

.fm-card p {
    line-height: 1.65;
}

.fm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.fm-head__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.fm-head__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: var(--fm-tile);
    color: var(--c-accent);
}

.fm-head__icon .fm-i,
.fm-head__icon .fm-flag {
    width: 22px;
    height: 22px;
}

.fm-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* A finger's height to tap, the line around it unmoved. */
    margin-block: -10px;
    padding-block: 10px;
    color: var(--fm-ink-mute) !important;
    font-family: var(--font-display);
    font-size: var(--size-label);
    font-weight: 600;
}

.fm-more .fm-i {
    width: 14px;
    height: 14px;
    transition: transform var(--speed) var(--ease);
}

.fm-more:hover {
    color: var(--fm-ink) !important;
}

.fm-more:hover .fm-i {
    transform: translateX(3px);
}

.fm-lead {
    margin: -6px 0 14px;
    color: var(--fm-ink-mute);
    font-size: var(--size-ui);
}

.fm-note {
    margin: 12px 0 0;
    color: var(--fm-ink-mute);
    font-size: var(--size-caption);
}

/* Synopsis ---------------------------------------------------------------- */

.fm-synopsis p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.7;
}

.fm-synopsis p:first-of-type {
    font-size: 17.5px;
    font-weight: 500;
}

.fm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.fm-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--fm-line);
    border-radius: 99px;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
}

.fm-tag .fm-i {
    width: 14px;
    height: 14px;
    color: var(--fm-ink-mute);
}

a.fm-tag:hover {
    border-color: var(--fm-ink);
}

/* Showtimes --------------------------------------------------------------- */

.fm-showtimes__when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -6px 0 16px;
    color: var(--fm-ink-mute);
    font-size: 13px;
}

.fm-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
}

.fm-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
    .fm-live i {
        animation: fm-pulse 1.6s infinite;
    }
}

@keyframes fm-pulse {
    50% {
        opacity: .25;
    }
}

.fm-days {
    display: flex;
    gap: 6px;
    /* Room above and below for a day lifted under the pointer, which the
       scrolling row would otherwise cut. */
    margin: -4px 0 2px;
    padding: 4px 0 8px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.fm-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    padding: 6px 8px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius);
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
}

.fm-day b {
    color: var(--fm-ink);
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.04em;
}

.fm-day.is-current {
    border-color: var(--fm-tile);
    background: var(--fm-tile);
    color: var(--c-accent);
}

.fm-day.is-current b {
    color: #ffffff;
}

.fm-cinemas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-cinema {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px 16px;
    padding: 14px 0;
    border-top: 1px solid var(--fm-line);
}

.fm-cinema__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.fm-cinema__place {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 3px 0 0 !important;
    color: var(--fm-ink-mute);
    font-size: var(--size-caption);
    line-height: 1.4 !important;
}

.fm-cinema__place .fm-i {
    width: 13px;
    height: 13px;
}

.fm-times {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: -.03em;
}

/* A session to buy: the time is the link, lime when pointed at. */
.fm-time--buy {
    color: inherit;
    text-decoration: none;
    transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.fm-time--buy:hover,
.fm-time--buy:focus-visible {
    border-color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 18%, transparent);
}

.fm-time--buy:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.fm-time.is-past {
    opacity: .4;
    text-decoration: line-through;
}

.fm-time__tag {
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--fm-tile);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .03em;
    text-decoration: none;
}

.fm-time__tag--imax {
    background: #0a5bd8;
}

.fm-time__tag--vose {
    border: 1px solid var(--fm-ink);
    background: transparent;
    color: var(--fm-ink);
}

.fm-showtimes__more {
    margin: 0 !important;
    padding-top: 14px;
    border-top: 1px solid var(--fm-line);
    text-align: right;
}

/* On where to watch, under the offers' own cards: no rule over it. */
.fm-showtimes__more--plain {
    border-top: 0;
}

/* Where to watch ---------------------------------------------------------- */

.fm-offers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A service: its logo on a white plate across the top, the name on one
   line, then what kind of offer it is and its price. */
.fm-offer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 10px 10px 12px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-lg);
    transition: border-color .15s ease, box-shadow .15s ease;
}

a.fm-offer:hover {
    border-color: var(--fm-ink);
    box-shadow: 0 4px 14px var(--fm-shadow);
}

.fm-offer__logo {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 100%;
    height: 52px;
    padding: 8px 14px;
    border: 1px solid #e3e3de;
    border-radius: var(--radius);
    background: #ffffff;
    color: #141414;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
}

.fm-offer__logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 32px;
    object-fit: contain;
}

.fm-offer__name {
    overflow: hidden;
    padding: 0 2px;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fm-offer__deal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

.fm-offer__type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fm-ink-mute);
    font-size: 12.5px;
}

.fm-offer__type .fm-i {
    width: 13px;
    height: 13px;
}

.fm-offer__price {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--fm-paper);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* The essentials ---------------------------------------------------------- */

.fm-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin: 0 0 16px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius);
}

.fm-fact {
    padding: 14px;
    border-right: 1px solid var(--fm-line);
}

.fm-fact:last-child {
    border-right: 0;
}

.fm-fact dt {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.fm-fact dt .fm-i {
    width: 14px;
    height: 14px;
}

.fm-fact dd {
    margin: 0;
}

.fm-fact__value {
    display: block;
    font-family: var(--font-mono);
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -.04em;
}

.fm-fact__note {
    display: block;
    margin-top: 3px;
    color: var(--fm-ink-mute);
    font-size: var(--size-caption);
}

.fm-faq {
    margin: 0;
}

.fm-faq__item {
    display: grid;
    grid-template-columns: 26px 220px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--fm-line);
    font-size: var(--size-ui);
    line-height: 1.5;
}

.fm-faq__item .fm-i {
    margin-top: 1px;
    color: var(--fm-ink-mute);
}

.fm-faq__item dt {
    font-weight: 600;
}

.fm-faq__item dd {
    margin: 0;
    color: var(--fm-ink-mute);
}

.fm-faq__item dd a {
    color: var(--fm-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Cast and crew ----------------------------------------------------------- */

.fm-people {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-person {
    display: block;
}

.fm .pe-portrait {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    background: var(--fm-paper);
}

.fm .pe-portrait picture,
.fm .pe-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm .pe-portrait__blank {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    color: var(--fm-ink-mute);
}

.fm .pe-portrait__blank .icon {
    width: 46%;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    opacity: .55;
}

.fm .pe-portrait__initials {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
}

.fm-person__name {
    display: block;
    margin-top: 8px;
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.fm-person__role {
    display: block;
    margin-top: 2px;
    color: var(--fm-ink-mute);
    font-size: var(--size-caption);
    line-height: 1.3;
}

.fm-crew {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--fm-line);
}

.fm-crew__group {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 10px;
}

.fm-crew__icon {
    display: grid;
    place-items: center;
    grid-row: span 2;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: var(--fm-paper);
}

.fm-crew__group dt {
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.fm-crew__group dd {
    margin: 2px 0 0;
    font-size: var(--size-ui);
    line-height: 1.45;
}

/* Videos and photos, on black --------------------------------------------- */

.fm-media {
    --fm-line: var(--c-rule);

    min-width: 0;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--c-ground);
    color: var(--c-ink);
}

.fm-media .fm-head__icon {
    background: var(--c-accent);
    color: var(--c-accent-ink);
}

.fm-media .fm-more {
    color: var(--c-ink-mute) !important;
}

.fm-media .fm-more:hover {
    color: var(--c-ink) !important;
}

.fm-media * + .fm-head {
    margin-top: 30px;
}

.fm-player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: start;
    gap: 14px;
}

.fm-player--alone {
    grid-template-columns: minmax(0, 1fr);
}

.fm-player__main {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    background: #111111;
}

.fm-player__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.fm-player__main:hover img {
    transform: scale(1.03);
}

.fm-player__main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent 45%);
}

.fm-player__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    transform: translate(-50%, -50%);
    transition: transform var(--speed) var(--ease);
}

.fm-player__main:hover .fm-player__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.fm-player__play .fm-i {
    width: 30px;
    height: 30px;
    margin-left: 3px;
}

.fm-player__cap {
    position: absolute;
    right: 20px;
    bottom: 18px;
    left: 20px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fm-player__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

.fm-player__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--c-ink-mute);
    font-family: var(--font-mono);
    font-size: 13px;
}

.fm-player__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fm-player__meta .fm-i {
    width: 14px;
    height: 14px;
}

.fm-playlist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 308px;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
    scrollbar-color: #444444 transparent;
    scrollbar-width: thin;
}

.fm-playlist__item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: var(--radius);
}

.fm-playlist__item:hover {
    background: var(--c-surface-2);
}

.fm-playlist__thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
}

.fm-playlist__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-playlist__thumb span {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .8);
    font-family: var(--font-mono);
    font-size: 11px;
}

.fm-playlist__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fm-playlist__kind {
    color: var(--c-accent);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fm-playlist__title {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* The photos: one large, the rest around it; the last says how many more. */
.fm-mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 140px;
    grid-auto-flow: dense;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-mosaic__item a {
    position: relative;
    display: block;
    overflow: hidden;
    height: 100%;
    border-radius: var(--radius);
    background: #111111;
}

.fm-mosaic__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease);
}

.fm-mosaic__item a:hover img {
    transform: scale(1.04);
}

.fm-mosaic__item--big {
    grid-row: span 2;
    grid-column: span 2;
}

.fm-mosaic--1 .fm-mosaic__item--big,
.fm-mosaic--2 .fm-mosaic__item--big {
    grid-column: span 4;
}

/* Three: the two beside the first take a row each. */
.fm-mosaic--3 .fm-mosaic__item:not(.fm-mosaic__item--big) {
    grid-column: span 2;
}

.fm-mosaic--2 .fm-mosaic__item:not(.fm-mosaic__item--big) {
    grid-column: span 4;
}

.fm-mosaic__more {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0, 0, 0, .62);
    font-family: var(--font-display);
    font-size: 17px;
}

.fm-mosaic__more .fm-i {
    width: 22px;
    height: 22px;
}

.fm-mosaic__more small {
    color: var(--c-ink-mute);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* Reviews ----------------------------------------------------------------- */

.fm-rv-top {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
}

.fm-rv-top--one {
    grid-template-columns: minmax(0, 1fr);
}

.fm-staff {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    padding: 20px;
    border-radius: var(--radius);
    background: #141414;
    color: #ffffff !important;
}

.fm-staff::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--c-accent-tint);
}

.fm-staff__kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-accent);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fm-staff__kicker .fm-i {
    width: 14px;
    height: 14px;
}

.fm-staff__title {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.fm-staff__lead {
    position: relative;
    z-index: 1;
    color: var(--c-ink-mute);
    font-size: var(--size-ui);
    line-height: 1.55;
}

.fm-staff__by {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    color: var(--c-ink-mute);
    font-size: 13px;
}

.fm-users {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.fm-users__avg {
    display: flex;
    flex-direction: column;
}

.fm-users__n {
    font-family: var(--font-mono);
    font-size: 58px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.08em;
}

.fm-users__votes {
    margin-top: 6px;
    color: var(--fm-ink-mute);
    font-size: var(--size-caption);
}

.fm-dist {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-dist li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12px;
}

.fm-dist i {
    position: relative;
    display: block;
    overflow: hidden;
    height: 8px;
    border-radius: 5px;
    background: var(--fm-line);
}

.fm-dist i::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--w);
    border-radius: 5px;
    background: var(--fm-ink);
}

/* No reader has reviewed the film yet: the call to be the first, in the
   place the reviews would take. */
.fm-rv-first {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 18px;
    margin-bottom: 14px;
    padding: 18px 20px;
    border: 1px dashed var(--fm-line);
    border-radius: var(--radius);
    background: var(--fm-paper);
}

.fm-rv-first__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-accent-ink);
}

.fm-rv-first__icon .fm-i {
    width: 22px;
    height: 22px;
}

.fm-rv-first__title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.fm-rv-first__lead {
    margin: 0;
    color: var(--fm-ink-soft);
    font-size: 15px;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .fm-rv-first {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 16px;
    }

    .fm-rv-first .fm-btn {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

.fm-rv-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.fm-rv-bar__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}

.fm-rvs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-rv {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius);
}

.fm-rv__head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.fm-rv__avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fm-tile);
    color: var(--c-accent);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    object-fit: cover;
}

.fm-rv__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fm-rv__name {
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-rv__who time {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.fm-rv__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.fm-rv__text {
    margin: 0 !important;
    color: var(--fm-ink-soft);
    font-size: var(--size-ui);
    line-height: 1.55 !important;
}

.fm-rv__text--hidden {
    color: var(--fm-ink-mute);
    font-style: italic;
}

.fm-rv__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--fm-line);
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12px;
}

.fm-rv__foot > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fm-rv__foot .fm-i {
    width: 14px;
    height: 14px;
}

.fm-rv__safe {
    color: #1f7a3a;
}

.fm-rv__warn {
    color: #b45309;
}

:root[data-theme="dark"] .fm-rv__safe {
    color: #6fd08f;
}

:root[data-theme="dark"] .fm-rv__warn {
    color: #f0a35b;
}

.fm-rv__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-block: -10px;
    margin-left: auto;
    padding-block: 10px;
    color: var(--fm-ink) !important;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
}

.fm-press {
    margin-top: 20px;
    border-top: 1px solid var(--fm-line);
}

.fm-press__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0 6px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.fm-press__avg {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 400;
}

.fm-press ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-press__item {
    display: grid;
    grid-template-columns: 44px 160px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fm-line);
    font-size: var(--size-ui);
}

.fm-press__outlet {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-weight: 700;
}

.fm-press__outlet small {
    color: var(--fm-ink-mute);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 400;
}

.fm-press__quote {
    color: var(--fm-ink-soft);
    font-style: italic;
    line-height: 1.5;
}

.fm-press__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fm-ink-mute) !important;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.fm-press__link .fm-i,
.fm-rv__more .fm-i {
    width: 14px;
    height: 14px;
}

/* Box office -------------------------------------------------------------- */

.fm-bo {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-bo__row {
    display: grid;
    grid-template-columns: 22px 130px minmax(0, 1fr) 120px;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
}

.fm-bo__row .fm-i {
    color: var(--fm-ink-mute);
}

.fm-bo__bar {
    position: relative;
    overflow: hidden;
    height: 22px;
    border-radius: 5px;
    background: var(--fm-line);
}

.fm-bo__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--w);
    min-width: 3px;
    background: var(--fm-ink);
}

.fm-bo__bar--lead::after {
    background: var(--c-accent);
}

.fm-bo__n {
    font-family: var(--font-mono);
    font-size: 14px;
    text-align: right;
}

/* Awards ------------------------------------------------------------------ */

.fm-awards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-award {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius);
}

.fm-award__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fm-tile);
    color: var(--c-accent);
}

.fm-award.is-winner .fm-award__icon {
    background: var(--c-accent);
    color: var(--c-accent-ink);
}

.fm-award__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fm-award__name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.fm-award__tally {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 13px;
}

.fm-award__won {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
}

/* The saga ---------------------------------------------------------------- */

.fm-saga {
    position: relative;
    display: grid;
    grid-auto-columns: minmax(120px, 1fr);
    grid-auto-flow: column;
    gap: 16px;
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    list-style: none;
    counter-reset: fm-saga;
}

/* An arrow from each film to the next, level with the posters' middle. */
.fm-saga__item {
    position: relative;
}

.fm-saga__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 70px;
    right: -17px;
    width: 18px;
    height: 18px;
    background: var(--fm-ink-mute);
    opacity: .75;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E") center / contain no-repeat;
}

.fm-saga__item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fm-saga__poster {
    display: block;
    overflow: hidden;
    width: 110px;
    aspect-ratio: 250 / 357;
    margin-bottom: 10px;
    border: 3px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--fm-tile);
}

.fm-saga__poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-saga__item.is-current .fm-saga__poster {
    border-color: var(--c-accent);
}

.fm-saga__item.is-upcoming .fm-saga__poster {
    border: 2px dashed var(--fm-ink-mute);
    background: var(--fm-paper);
}

.fm-saga__title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.fm-saga__year {
    margin-top: 3px;
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12.5px;
}

/* A poster with no image: a dark tile, a film and the title. */
.fm-blank {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 12px;
    background: var(--c-surface);
    color: var(--c-ink-mute);
}

.fm-blank__title {
    color: var(--c-ink);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}

/* Soundtrack and quotes, side by side ------------------------------------- */

.fm-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.fm-pair--one {
    grid-template-columns: minmax(0, 1fr);
}

.fm-songs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-song {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fm-line);
    font-size: var(--size-ui);
}

.fm-song__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--fm-tile);
    color: var(--c-accent);
}

.fm-song__mark .fm-i {
    width: 15px;
    height: 15px;
}

.fm-song__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fm-song__title {
    font-weight: 600;
}

.fm-song__artist {
    color: var(--fm-ink-mute);
}

.fm-quote {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px 8px;
    margin: 0 0 18px;
}

.fm-quote:last-child {
    margin-bottom: 0;
}

.fm-quote .fm-i {
    width: 26px;
    height: 26px;
    color: var(--fm-line);
}

.fm-quote blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.fm-quote figcaption {
    grid-column: 2;
    color: var(--fm-ink-mute);
    font-size: 13px;
}

/* Trivia, large ----------------------------------------------------------- */

.fm-trivia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-trivia__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius);
}

.fm-trivia__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fm-tile);
    color: var(--c-accent);
}

.fm-trivia__title {
    margin: 2px 0 6px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.fm-trivia__item p {
    margin: 0;
    color: var(--fm-ink-soft);
    font-size: 14.5px;
    line-height: 1.6;
}

.fm-trivia__item a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fm-trivia__item--lead {
    grid-column: 1 / -1;
    border-color: #141414;
    background: #141414;
    color: #ffffff;
}

.fm-trivia__item--lead .fm-trivia__icon {
    background: var(--c-accent);
    color: var(--c-accent-ink);
}

.fm-trivia__item--lead .fm-trivia__title {
    font-size: 19px;
}

.fm-trivia__item--lead p {
    color: var(--c-ink-mute);
    font-size: 15.5px;
}

/* News -------------------------------------------------------------------- */

.fm-news {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
}

.fm-news__lead {
    display: flex;
    flex-direction: column;
}

/* The picture takes whatever height the stories beside it leave, so both
   columns end together and theirs is the height. Placed inside its box,
   the image adds no height of its own when the grid sizes the row. */
.fm-news__pic {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: 120px;
    overflow: hidden;
    border-radius: var(--radius);
}

.fm-news__pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-news__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 4px;
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fm-news__meta b {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-weight: 500;
}

.fm-news__title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.fm-news__title--small {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

/* The standfirst, two lines at most. */
.fm-news__lead-text {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    color: var(--fm-ink-mute);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Its stories packed close; their height is the block's, the lead's
   picture filling the rest beside them. */
.fm-news__list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-news__item {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fm-line);
}

.fm-news__list li:last-child .fm-news__item {
    padding-bottom: 0;
    border-bottom: 0;
}

/* As tall as the kicker, date and headline beside it, cropped to fit. */
.fm-news__item img {
    width: 100%;
    height: 100%;
    min-height: 90px;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.fm-news__item .fm-news__meta {
    margin-top: 0;
}

/* Products and related films ---------------------------------------------- */

.fm-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-product a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius);
    font-size: 13px;
}

.fm-product a:hover {
    border-color: var(--fm-ink);
}

.fm-product__image {
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 1;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--fm-ink-mute);
}

.fm-product__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fm-product__image .fm-i {
    width: 34px;
    height: 34px;
    stroke-width: 1.4;
}

.fm-product__title {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.fm-product__price {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 15px;
}

.fm-product .fm-btn {
    min-height: 36px;
    margin-top: auto;
    padding: 6px 10px;
    font-size: 13px;
}

.fm-product__price + .fm-btn,
.fm-product__title + .fm-btn {
    margin-top: 10px;
}

.fm-rel {
    display: flex;
    flex-direction: column;
}

.fm-rel__poster {
    display: block;
    overflow: hidden;
    aspect-ratio: 250 / 357;
    border-radius: var(--radius);
    background: var(--fm-tile);
}

.fm-rel__poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-rel__title {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.fm-rel__why {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    margin-top: 5px;
    padding: 3px 8px;
    border: 1px solid var(--fm-line);
    border-radius: 99px;
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.fm-rel__why .fm-i {
    width: 13px;
    height: 13px;
}

/* The technical details --------------------------------------------------- */

.fm-details {
    padding: 18px;
}

.fm-details .fm-head__title {
    font-size: 17px;
}

.fm-details .fm-head__icon {
    width: 28px;
    height: 28px;
}

.fm-details .fm-head__icon .fm-i {
    width: 18px;
    height: 18px;
}

.fm-details__list {
    margin: 0;
    font-size: 13.5px;
}

.fm-details__list div {
    display: grid;
    grid-template-columns: 20px 96px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--fm-line);
}

.fm-details__list .fm-i {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: var(--fm-ink-mute);
}

.fm-details__list dt {
    color: var(--fm-ink-mute);
}

.fm-details__list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* The releases, and a prequel or sequel, take the card's width, under
   their label. */
.fm-details__list .fm-details__wide dd {
    grid-column: 2 / -1;
    margin-top: 2px;
}

/* A release to a row: the flag and the country, the date at the end. */
.fm-release {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-block: 2px;
}

.fm-release__where {
    flex: 1;
    min-width: 0;
}

.fm-release time {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12.5px;
    white-space: nowrap;
}

/* A country or company to a line, level with its label; a little air
   between one and the next. */
.fm-details__list dd .fm-country {
    display: flex;
    margin: 0;
}

.fm-details__list dd .fm-country + br {
    display: none;
}

.fm-details__list dd .fm-country ~ .fm-country {
    margin-top: 5px;
}

/* A prequel or a sequel: a small poster, then the title, a block of its
   own so the line under it follows each line of words, and the year. */
.fm-sequel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    color: inherit;
}

.fm-sequel + .fm-sequel {
    margin-top: 8px;
}

.fm-sequel img,
.fm-sequel__none {
    flex: none;
    width: 36px;
    height: 52px;
    border-radius: 4px;
    background: var(--fm-line);
    object-fit: cover;
}

.fm-sequel__text {
    min-width: 0;
}

.fm-sequel__year {
    display: block;
    margin-top: 2px;
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.fm-details__seen {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 10px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.fm-details__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fm-side .fm-details {
    margin-bottom: 22px;
}

/* A strip that scrolls sideways, four cards and a quarter of the next in
   view, so it shows there is more; the buttons in its
   heading (js/films.js) move it a page at a time. Without scripting it is
   swiped or scrolled as it is. */
.fm-carousel {
    display: grid;
    grid-auto-columns: calc((100% - 4 * 14px) / 4.25);
    grid-auto-flow: column;
    gap: 14px;
    margin: 0;
    padding: 0 0 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;
}

.fm-carousel::-webkit-scrollbar {
    display: none;
}

.fm-carousel > li {
    min-width: 0;
    scroll-snap-align: start;
}

.fm-nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.fm-nav[hidden] {
    display: none;
}

/* Round, on the card, with a soft chevron. */
.fm-nav__btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--fm-line);
    border-radius: 50%;
    background: var(--fm-surface);
    color: var(--fm-ink);
    cursor: pointer;
    transition: border-color .15s ease, opacity .15s ease;
}

.fm-nav__btn .fm-i {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

.fm-nav__btn--prev .fm-i {
    transform: scaleX(-1);
}

.fm-nav__btn:hover:not(:disabled) {
    border-color: var(--fm-ink);
}

.fm-nav__btn:disabled {
    opacity: .25;
    cursor: default;
}

.fm-rel__year {
    margin-top: 2px;
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* A film's other pages ------------------------------------------------------ */

/* The shorter masthead: a small poster, the page's title and the way back. */
.fm-hero--compact .fm-hero__inner {
    padding-bottom: 24px;
}

.fm-hero--compact .fm-hero__body {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 26px;
}

.fm-hero--compact .fm-hero__poster {
    display: block;
}

.fm-hero--compact .fm-hero__title {
    font-size: clamp(28px, 4vw, 44px);
}

.fm-hero--compact .fm-chips {
    margin-bottom: 16px;
}

/* The page's own title, its h1, opening the content under the masthead. */
.fm-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

/* The crew, one group per role in a single card. */
.fm-team + .fm-team {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--fm-line);
}

.fm-team__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.fm-team__title .fm-i {
    width: 18px;
    height: 18px;
    color: var(--fm-ink-mute);
}

.fm-team__title b {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}

/* Where to watch: what is here in a sentence, then each offer as a row:
   the logo, the service and what to know, its prices, the way to it. */
/* A curated list's methodology: how each of its two lists is made. */
.fm-method__text {
    max-width: 72ch;
    margin: 6px 0 18px;
    color: var(--fm-ink-mute);
    font-size: 15px;
    line-height: 1.6;
}

.fm-method__text:last-child {
    margin-bottom: 0;
}

.fm-summary {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.55;
}

.fm-team__note {
    margin: -6px 0 12px;
    color: var(--fm-ink-mute);
    font-size: var(--size-caption);
}

.fm-deals {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-deal {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-lg);
}

.fm-deal__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.fm-deal__line {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 3px 0 0;
    color: var(--fm-ink-mute);
    font-size: 12px;
}

.fm-deal__line .fm-i {
    flex: none;
    width: 13px;
    height: 13px;
}

.fm-deal__line--warn {
    color: #b45309;
}

.fm-deal__prices {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 99px;
    background: var(--fm-paper);
    font-family: var(--font-mono);
    font-size: 12.5px;
    white-space: nowrap;
}

.fm-price b {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.fm-places {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-place {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fm-line);
}

.fm-place__name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
}

.fm-place__what {
    color: var(--fm-ink-mute);
    font-size: var(--size-caption);
}

/* Showtimes: a search and "near me" over the day's cinemas, which fold
   by province. */
.fm-finder {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 6px;
}

.fm-finder[hidden],
.fm-near[hidden],
.fm-group[hidden] {
    display: none;
}

.fm-finder__search {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--fm-line);
    border-radius: 99px;
    background: var(--fm-surface);
}

.fm-finder__search .fm-i {
    width: 16px;
    height: 16px;
    color: var(--fm-ink-mute);
}

.fm-finder__search input {
    flex: 1;
    min-width: 0;
    /* As tall as the button beside it. */
    height: 43px;
    border: 0;
    background: transparent;
    color: var(--fm-ink);
    font: inherit;
    font-size: 15px;
    outline: none;
}

.fm-finder__search:focus-within {
    border-color: var(--fm-ink);
}

.fm-near {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fm-line);
}

.fm-group + .fm-group {
    border-top: 1px solid var(--fm-line);
}

.fm-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
}

.fm-group__head::-webkit-details-marker {
    display: none;
}

.fm-group__head::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid var(--fm-ink-mute);
    border-bottom: 2px solid var(--fm-ink-mute);
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.fm-group[open] > .fm-group__head::after {
    transform: rotate(225deg);
}

.fm-group__name {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}

.fm-group__name .fm-i {
    width: 16px;
    height: 16px;
    color: var(--fm-ink-mute);
}

.fm-group__head b {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}

.fm-group > .fm-cinemas {
    padding-bottom: 14px;
}

/* On a page of hundreds of cinemas, their icons are drawn here once
   rather than written into each (the same pin and ticket as _icons). */
.fm-cinema__place--drawn::before,
.fm-btn--ticket::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--fm-ico) center / contain no-repeat;
    mask: var(--fm-ico) center / contain no-repeat;
}

.fm-cinema__place--drawn::before {
    --fm-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s7-6 7-11.5a7 7 0 0 0-14 0C5 15 12 21 12 21z%22/%3E%3Ccircle cx=%2212%22 cy=%229.5%22 r=%222.5%22/%3E%3C/svg%3E");
}

.fm-btn--ticket::before {
    --fm-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 5.5h14a2.5 2.5 0 0 1 2.5 2.5v2a2 2 0 0 0 0 4v2a2.5 2.5 0 0 1-2.5 2.5H5A2.5 2.5 0 0 1 2.5 16v-2a2 2 0 0 0 0-4V8A2.5 2.5 0 0 1 5 5.5z%22/%3E%3Cpath d=%22M15 5.5v2M15 10.75v2.5M15 16.5v2%22/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
}

.fm-cinema__far {
    color: var(--fm-ink);
    font-weight: 600;
}

/* Videos: the lead one large, then frames that preview under the pointer. */
.fm-player__frame {
    position: absolute;
    inset: 0;
    display: block;
}

.fm-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.fm-filter[hidden] {
    display: none;
}

.fm-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--fm-line);
    border-radius: 99px;
    background: var(--fm-surface);
    color: var(--fm-ink);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.fm-filter__btn b {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}

.fm-filter__btn[aria-pressed="true"] {
    border-color: var(--fm-tile);
    background: var(--fm-tile);
    color: #ffffff;
}

.fm-filter__btn[aria-pressed="true"] b {
    color: var(--c-accent);
}

.fm-vids {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-vids > li[hidden] {
    display: none;
}

.fm-vid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fm-vid__frame {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 400 / 222;
    border-radius: var(--radius);
    background: #111111;
}

.fm-vid__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-vid__play {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #000000;
}

.fm-vid__play .fm-i {
    width: 15px;
    height: 15px;
}

.fm-vid__time {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .75);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.fm-vid__kind {
    margin-top: 6px;
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fm-vid__title {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
}

.fm-vid__date {
    color: var(--fm-ink-mute);
    font-size: 12px;
}

/* A list's pages. */
.fm-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
}

.fm-pages__n,
.fm-pages__step {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--fm-line);
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 13px;
}

.fm-pages__n.is-current {
    border-color: var(--fm-tile);
    background: var(--fm-tile);
    color: #ffffff;
}

.fm-pages__step .fm-i {
    width: 16px;
    height: 16px;
}

.fm-pages__step--prev .fm-i {
    transform: scaleX(-1);
}

/* Photos: a mosaic at their own proportions, columns filled in turn. */
.fm-masonry {
    columns: 4 180px;
    column-gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-masonry > li {
    break-inside: avoid;
    margin-bottom: 10px;
}

.fm-masonry > li[hidden] {
    display: none;
}

.fm-masonry__item {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--fm-paper);
}

.fm-masonry__item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .3s ease;
}

.fm-masonry__item:hover img {
    transform: scale(1.03);
}

/* Pointed at, a photo shows its title and date over a shade at its foot
   (as people.css .pe-shot). */
.fm-masonry__item {
    position: relative;
}

.fm-shot {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 36px 10px 9px;
    background: linear-gradient(to top, rgba(0, 0, 0, .86), rgba(0, 0, 0, .5) 55%, transparent);
    color: #ffffff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
    pointer-events: none;
}

.fm-shot__title {
    display: -webkit-box;
    overflow: hidden;
    font: 600 13px/1.3 var(--font-display);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.fm-shot__date {
    color: var(--c-accent);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.fm-masonry__item:focus-visible .fm-shot {
    opacity: 1;
    transform: none;
}

@media (hover: hover) {
    .fm-masonry__item:hover .fm-shot {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fm-shot {
        transform: none;
        transition: none;
    }
}

/* Addoor's recommendations on a photo's page (as news.css .nw-addoor), in
   the column's own gap. Its widget brings the light theme's greys: on the
   dark page, the page's inks. */
:root[data-theme="dark"] .fm-addoor :is(a, p, span, div, h2, h3, h4) {
    color: var(--fm-ink) !important;
}

.fm-filter__btn--face {
    padding-left: 4px;
}

.fm-filter__face {
    display: block;
    overflow: hidden;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.fm .fm-filter__face .pe-portrait {
    width: 26px;
    height: 26px;
    aspect-ratio: 1;
    border-radius: 50%;
}

.fm .fm-filter__face .pe-portrait__initials {
    font-size: 10px;
}

/* One photo or poster, large on black, with the ones either side. */
.fm-viewer {
    padding: 0;
    overflow: hidden;
}

.fm-viewer__figure {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    background: #000000;
}

.fm-viewer__figure img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
}

.fm-viewer--poster .fm-viewer__figure {
    padding: 24px 0;
}

.fm-viewer--poster .fm-viewer__figure img {
    max-height: 72vh;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 34px rgba(255, 255, 255, .07);
}

.fm-viewer__step {
    position: absolute;
    top: 50%;
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #ffffff;
    transform: translateY(-50%);
    transition: background .15s ease;
}

.fm-viewer__step:hover {
    background: rgba(0, 0, 0, .85);
}

.fm-viewer__step .fm-i {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
}

.fm-viewer__step--prev {
    right: auto;
    left: 14px;
}

.fm-viewer__step--prev .fm-i {
    transform: scaleX(-1);
}

.fm-viewer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    color: var(--c-ink-mute);
    font-family: var(--font-mono);
    font-size: var(--size-data);
}

.fm-viewer__n {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fm-viewer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fm-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-strip__item {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    opacity: .8;
    transition: opacity .15s ease;
}

.fm-strip__item:hover,
.fm-strip__item.is-current {
    opacity: 1;
}

.fm-strip__item.is-current {
    outline: 3px solid var(--c-accent);
    outline-offset: -3px;
}

.fm-strip__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Posters, five to a row, the site's own marked. */
.fm-posters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-rel__poster {
    position: relative;
}

.fm-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--c-accent);
    color: #000000;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.fm-poster-from {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Reviews: the three scores side by side, a review to read, the vote. */
.fm-scoreboard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-lg);
    background: var(--fm-surface);
    list-style: none;
}

.fm-scoreboard__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    border-right: 1px solid var(--fm-line);
}

.fm-scoreboard__item--go {
    margin-left: auto;
    padding-right: 0;
    border-right: 0;
}

.fm-scoreboard .fm-scores__label {
    color: var(--fm-ink);
}

.fm-scoreboard .fm-scores__note {
    color: var(--fm-ink-mute);
}

.fm-rv__spoiler summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
    padding: 6px 12px;
    border: 1px dashed var(--fm-line);
    border-radius: 99px;
    color: #b45309;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.fm-rv__spoiler summary::-webkit-details-marker {
    display: none;
}

.fm-rv__spoiler summary .fm-i {
    width: 14px;
    height: 14px;
}

.fm-rv__spoiler[open] summary {
    display: none;
}

.fm-reading__title {
    margin: 16px 0 12px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}

.fm-reading p {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.65;
}

.fm-reading .fm-rv__foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--fm-line);
}

.fm-score--big {
    min-width: 84px;
    height: 64px;
    font-size: 34px;
}

.fm-users--big {
    grid-template-columns: 170px minmax(0, 1fr);
}

.fm-dist--all a {
    display: contents;
    color: inherit;
}

.fm-dist--all li {
    grid-template-columns: 24px minmax(0, 1fr) 78px;
}

.fm-dist--all a:hover span {
    color: var(--fm-ink);
}

.fm-rate {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--fm-line);
}

.fm-rate__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.fm-rate__range {
    flex: 1 1 220px;
    accent-color: var(--fm-tile);
}

.fm-rate__value {
    min-width: 52px;
    font-family: var(--font-mono);
    font-size: 26px;
    text-align: center;
}

.fm-voters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-voter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    border: 1px solid var(--fm-line);
    border-radius: 99px;
    font-size: 13px;
}

.fm-voter img,
.fm-voter__initial {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.fm-voter__initial {
    display: grid;
    place-items: center;
    background: var(--fm-paper);
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.fm-voter .fm-i {
    width: 13px;
    height: 13px;
    color: var(--fm-ink-mute);
}

/* Awards: each nomination, the wins lit. */
.fm-noms {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-nom {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-lg);
}

.fm-nom__mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fm-paper);
    color: var(--fm-ink-mute);
}

.fm-nom.is-winner .fm-nom__mark {
    background: var(--c-accent);
    color: #000000;
}

.fm-nom__mark .fm-i {
    width: 17px;
    height: 17px;
}

.fm-nom__state {
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fm-nom.is-winner .fm-nom__state {
    color: var(--fm-ink);
}

.fm-nom__category {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}

.fm-nom__for,
.fm-nom__winner {
    margin: 4px 0 0 !important;
    color: var(--fm-ink-soft);
    font-size: var(--size-caption);
}

.fm-nom__winner {
    color: var(--fm-ink-mute);
}

.fm-nom__winner a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The soundtrack, a song to a row. */
.fm-tracks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-track {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fm-line);
}

.fm-track:last-child {
    border-bottom: 0;
}

.fm-track__n {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--fm-paper);
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 15px;
}

.fm-track__n img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-track__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fm-track__title {
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 700;
}

.fm-track__line {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--fm-ink-mute);
    font-size: 12.5px;
}

.fm-track__line .fm-i {
    flex: none;
    width: 13px;
    height: 13px;
}

/* Trivia, numbered; who a fact is about. */
.fm-trivia--all {
    counter-reset: none;
}

.fm-trivia__icon--n {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
}

.fm-about {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 3px 12px 3px 3px;
    border: 1px solid var(--fm-line);
    border-radius: 99px;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
}

.fm-about__face {
    display: block;
    overflow: hidden;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.fm .fm-about__face .pe-portrait {
    width: 26px;
    height: 26px;
    aspect-ratio: 1;
}

.fm .fm-about__face .pe-portrait__initials {
    font-size: 10px;
}

/* The news, a story to a row. */
.fm-stories {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-story {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--fm-line);
}

.fm-stories li:last-child .fm-story {
    padding-bottom: 0;
    border-bottom: 0;
}

.fm-story img {
    width: 100%;
    height: auto;
    aspect-ratio: 325 / 252;
    object-fit: cover;
    border-radius: var(--radius);
}

.fm-story .fm-news__meta {
    margin-top: 0;
}

/* Under the standfirst; as specific as .fm-story .fm-news__meta, which has no top margin. */
.fm-story .fm-story__date {
    margin: 10px 0 0;
    opacity: .75;
}

/* The news page's headlines, a step up from the film page's small ones. */
.fm-story .fm-news__title {
    font-size: 19px;
    line-height: 1.3;
}

/* Products: a grid of them; one to buy, its shops the cheapest first. */
.fm-row--wrap {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.fm-product__stores {
    color: var(--fm-ink-mute);
    font-size: 12px;
}

.fm-buy__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 24px;
}

.fm-buy__main {
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-lg);
    background: #ffffff;
}

.fm-buy__main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fm-buy__thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.fm-buy__thumbs a {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-sm);
    background: #ffffff;
}

.fm-buy__thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fm-buy__text .fm-reading__title {
    margin-top: 0;
}

.fm-deal--shop {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.fm-deal--shop.is-best {
    border-color: var(--fm-ink);
}

.fm-badge--inline {
    position: static;
    margin-left: 6px;
    vertical-align: middle;
}

.fm-price s {
    color: var(--fm-ink-mute);
    font-size: 11.5px;
}

.fm-buy__about {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--fm-line);
}

/* Writing a review. */
.fm-editor {
    display: grid;
    gap: 18px;
}

.fm-editor__row {
    display: grid;
    gap: 8px;
}

.fm-editor__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
}

.fm-editor__label .fm-i {
    width: 16px;
    height: 16px;
    color: var(--fm-ink-mute);
}

.fm-editor__input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius);
    background: var(--fm-surface);
    color: var(--fm-ink);
    font: inherit;
    font-size: 16px;
}

.fm-editor__input:focus {
    border-color: var(--fm-ink);
    outline: none;
}

.fm-editor__body {
    min-height: 260px;
    line-height: 1.6;
    resize: vertical;
}

.fm-editor .is-short {
    color: #b45309;
}

.fm-editor__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.fm-editor__check .fm-i {
    width: 16px;
    height: 16px;
    color: #b45309;
}

.fm-editor__send {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fm-editor__status {
    font-weight: 600;
}

/* The section's own pages: a dark masthead with the A to Z. */
.fm-hero--index .fm-hero__inner {
    padding-bottom: 22px;
}

.fm-hero--index .fm-hero__title {
    font-size: clamp(30px, 4.5vw, 50px);
}

.fm-hero--index .fm-hero__by {
    max-width: 760px;
}

.fm-az {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.fm-az__l {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 7px;
    border: 1px solid var(--c-rule);
    border-radius: var(--radius-sm);
    color: var(--c-ink) !important;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
}

.fm-az__l:hover {
    border-color: var(--c-accent);
}

.fm-az__l.is-current {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: #000000 !important;
}

.fm-az__l.is-empty {
    opacity: .35;
}

/* A film in a list: its rank, score and platform over the poster. */
.fm-tile__rank {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--c-accent);
    color: #000000;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
}

.fm .fm-tile__score {
    position: absolute;
    top: 8px;
    right: 8px;
}

.fm-day-tag {
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--fm-paper);
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.fm-day-tag--now {
    background: var(--c-accent);
    color: #000000;
}

.fm-head--day {
    margin-bottom: 12px;
}

.fm-head--day .fm-team__title {
    margin: 0;
}

.fm-team.is-past .fm-carousel,
.fm-team.is-past .fm-posters {
    opacity: .75;
}

.fm-posters--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The A to Z, a big letter each. */
.fm-letters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-letter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 8px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-lg);
    text-align: center;
}

.fm-letter b {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.fm-letter span {
    color: var(--fm-ink-mute);
    font-size: 12px;
}

.fm-letter:hover {
    border-color: var(--fm-ink);
}

.fm-letter.is-empty {
    opacity: .4;
}

/* What a list can be narrowed by. */
.fm-refine__row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--fm-line);
}

.fm-refine__row:last-child {
    border-bottom: 0;
}

.fm-refine__label {
    padding-top: 6px;
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.fm-refine .fm-tags {
    margin: 0;
}

/* The films home's "just added": a compact list, two columns (one on a phone). */
.fm-latest {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-latest > li {
    border-top: 1px solid var(--fm-line);
}

.fm-latest > li:nth-child(-n + 2) {
    border-top: 0;
}

.fm-latest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.fm-latest__poster {
    flex: none;
    width: 40px;
    height: 60px;
    border-radius: 6px;
    background: var(--fm-tile);
    object-fit: cover;
}

.fm-latest__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fm-latest__title {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fm-latest__note {
    color: var(--fm-ink-mute);
    font-size: 12.5px;
}

@media (max-width: 767px) {
    .fm-latest {
        grid-template-columns: minmax(0, 1fr);
    }

    .fm-latest > li:nth-child(2) {
        border-top: 1px solid var(--fm-line);
    }
}

/* A curated list's other orders and its filters: the heading already spaces them from above; the posters need room below. */
.fm-order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
}

.fm-order .fm-tags {
    margin: 0;
}

.fm-narrow-open {
    background: none;
    color: inherit;
    cursor: pointer;
}

.fm-narrow-open[hidden] {
    display: none;
}

.fm-narrow-open:hover,
.fm-narrow-open.is-on {
    border-color: var(--fm-ink);
}

.fm-narrow-open b {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    border-radius: 99px;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}

.fm-narrow-on span {
    color: var(--fm-ink-mute);
    font-size: 15px;
    line-height: 1;
}

/* The filters' dialog: a native <dialog> (js/films.js), a GET form whose
   choices are the genres, decades and countries the list has. */
.fm-narrow {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--fm-surface);
    color: var(--fm-ink);
    font-family: var(--font-ui);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.fm-narrow::backdrop {
    background: rgba(0, 0, 0, .72);
}

.fm-narrow__box {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.fm-narrow__head,
.fm-narrow__foot {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
}

.fm-narrow__head {
    justify-content: space-between;
    border-bottom: 1px solid var(--fm-line);
}

.fm-narrow__foot {
    justify-content: flex-end;
    border-top: 1px solid var(--fm-line);
}

.fm-narrow__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}

.fm-narrow__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--fm-line);
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.fm-narrow__close:hover,
.fm-narrow__close:focus-visible {
    border-color: var(--fm-ink);
}

.fm-narrow__groups {
    overflow-y: auto;
    padding: 4px 20px 20px;
    overscroll-behavior: contain;
}

.fm-narrow__group {
    margin: 0;
    padding: 18px 0 0;
    border: 0;
}

/* Floated, a legend is spaced like any heading (inside its fieldset's box, not on its border). */
.fm-narrow__legend {
    float: left;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.fm-narrow__options {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fm-narrow__option {
    position: relative;
    cursor: pointer;
}

/* The radio stays, out of sight, for the keyboard and screen readers. */
.fm-narrow__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fm-narrow__option > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--fm-line);
    border-radius: 99px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
}

.fm-narrow__legend .fm-i {
    width: 18px;
    height: 18px;
    color: var(--fm-ink-mute);
}

/* The genre's glyph or the country's flag, then the name and the count. */
.fm-narrow__option > span .fm-glyph {
    color: var(--fm-ink-mute);
}

.fm-narrow__option input:checked + span .fm-glyph {
    color: inherit;
}

.fm-narrow__option > span b {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
}

.fm-narrow__option:hover > span {
    border-color: var(--fm-ink);
}

.fm-narrow__option input:checked + span {
    border-color: var(--fm-tile);
    background: var(--fm-tile);
    color: #ffffff;
}

.fm-narrow__option input:checked + span b {
    color: inherit;
    opacity: .7;
}

.fm-narrow__option input:focus-visible + span {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.fm-narrow__foot .fm-btn {
    cursor: pointer;
}

.fm .fm-tag.is-current {
    border-color: var(--fm-tile);
    background: var(--fm-tile);
    color: #ffffff;
}

.fm-tag--clear {
    border-style: dashed !important;
}

.fm-tag b {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
}

.fm-side .fm-browse {
    margin-bottom: 22px;
}

.fm-browse__links {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.fm-browse__links a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
}

.fm-browse__links .fm-i {
    width: 16px;
    height: 16px;
    color: var(--fm-ink-mute);
}

.fm-browse .fm-team__title {
    margin-top: 14px;
}

.fm-browse .fm-tags {
    margin: 0;
}

/* A video's preview under the pointer (js/video-preview.js puts a muted
   <video> and a progress bar into the frame), as on a person's page. */
.fm-player__main .v-preview,
.fm-vid__frame .v-preview,
.fm-playlist__thumb .v-preview {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--speed-slow, .3s) var(--ease, ease);
}

.fm-player__main.is-preview .v-preview,
.fm-vid__frame.is-preview .v-preview,
.fm-playlist__thumb.is-preview .v-preview {
    opacity: 1;
}

.fm-player__main .v-preview-bar,
.fm-vid__frame .v-preview-bar,
.fm-playlist__thumb .v-preview-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    height: 3px;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left;
}

.fm-player__main.is-preview .fm-player__play,
.fm-vid__frame.is-preview .fm-vid__play {
    opacity: 0;
}

.fm-player__play,
.fm-player__cap,
.fm-vid__play {
    z-index: 2;
    transition: opacity .2s ease;
}

/* The days and the finder on a film's showtimes. */
.fm-day {
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.fm-day:not(.is-current):hover {
    border-color: var(--fm-ink);
    box-shadow: 0 4px 12px var(--fm-shadow);
    transform: translateY(-2px);
}

.fm-finder--film {
    margin: 14px 0 4px;
}

.fm-showtimes__label {
    margin: 12px 0 0 !important;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.fm-showtimes__label[hidden] {
    display: none;
}

/* The cast: the leads as cards, three to a row, then everyone in two columns. */
.fm-credits--lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fm-castlist__title {
    margin-top: 22px;
}

.fm-castlist {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A person to a row, as a table: the portrait and the actor, then the part. */
.fm-castlist__item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--fm-line);
}

.fm .fm-castlist__face .pe-portrait {
    width: 36px;
    border-radius: var(--radius-sm);
}

.fm .fm-castlist__face .pe-portrait__initials {
    font-size: 11px;
}

.fm .fm-castlist__face .pe-portrait__blank .icon {
    display: none;
}

.fm-castlist__name {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
}

.fm-castlist__part {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fm-ink-mute);
    font-size: 14px;
}

.fm-castlist__part .fm-i {
    width: 13px;
    height: 13px;
}

/* What the database says about a cast together. */
.fm-stats {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-stat {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-lg);
}

.fm-stat__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fm-paper);
}

.fm-stat__icon .fm-i {
    width: 17px;
    height: 17px;
}

.fm-stat p {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.55;
}

.fm-stat a {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--fm-line);
    text-underline-offset: 3px;
}

.fm-stat a:hover {
    text-decoration-color: var(--c-accent);
}

/* A bar to each group of the page. */
.fm-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-jump__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--fm-line);
    border-radius: 999px;
    background: var(--fm-surface);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 600;
}

.fm-jump__item .fm-i {
    width: 16px;
    height: 16px;
    color: var(--fm-ink-mute);
}

.fm-jump__item b {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}

.fm-jump__item:hover {
    border-color: var(--fm-ink);
}

/* An anchor lands below the sticky bar and tabs, not under them. */
.fm [id] {
    scroll-margin-top: calc(var(--bar-height-condensed, 56px) + 64px);
}

.fm-facts--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fm-facts--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Everyone in it: the face on the left, the part and the figures beside. */
.fm-credits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-credit {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 8px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius-lg);
    background: var(--fm-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.fm-credit:hover {
    border-color: var(--fm-ink-mute);
    box-shadow: 0 4px 14px var(--fm-shadow);
}

.fm-credit__photo {
    position: relative;
    display: block;
}

.fm-credit__badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #000;
}

.fm-credit__badge .fm-i {
    width: 13px;
    height: 13px;
}

.fm-credit__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fm-credit__name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.fm-credit__died {
    color: var(--fm-ink-mute);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

.fm-credit__part {
    color: var(--fm-ink-soft);
    font-size: var(--size-caption);
    line-height: 1.35;
}

.fm-credit__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 3px;
    color: var(--fm-ink-mute);
    font-size: 12px;
    line-height: 1.35;
}

.fm-credit__age,
.fm-credit__known {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.fm-credit__age .fm-i,
.fm-credit__known .fm-i {
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: 1px;
}

.fm-credits--crew .fm-credit {
    grid-template-columns: 56px minmax(0, 1fr);
}

.fm-crew--flat {
    /* The companies: two halves, the producers and the distributor. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border: 0;
}

/* The film beside its other pages. */
.fm-filmcard {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fm-side .fm-filmcard {
    margin-bottom: 22px;
}

.fm-filmcard__link {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.fm-filmcard__poster {
    display: block;
    overflow: hidden;
    aspect-ratio: 250 / 357;
    border-radius: var(--radius);
}

.fm-filmcard__poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-filmcard__title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.fm-filmcard__year {
    color: var(--fm-ink-mute);
    font-weight: 500;
}

.fm-filmcard__facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    color: var(--fm-ink-soft);
    font-size: var(--size-caption);
    list-style: none;
}

.fm-filmcard__facts li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.fm-filmcard__facts .fm-i {
    width: 14px;
    height: 14px;
    color: var(--fm-ink-mute);
}

.fm-filmcard .fm-btn {
    align-self: flex-start;
}

/* Smaller screens --------------------------------------------------------- */

@media (max-width: 1023px) {
    .fm-player {
        grid-template-columns: minmax(0, 1fr);
    }

    .fm-playlist {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
    }

    .fm-playlist li {
        flex: 0 0 200px;
    }

    .fm-playlist__item {
        grid-template-columns: minmax(0, 1fr);
    }

    .fm-rv-top,
    .fm-rvs,
    .fm-pair,
    .fm-news {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the lead keeps its own 16:9. */
    .fm-news__pic {
        flex: none;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    .fm-body,
    .fm-body--ads {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 18px;
    }

    .fm-card,
    .fm-media {
        padding: 18px 16px;
    }

    /* The words beside the poster take only their own height; what the
       poster has left over goes to an empty last row (1fr), so it never
       opens gaps between the title and the lines under it. */
    .fm-hero__body {
        grid-template-columns: 132px minmax(0, 1fr);
        grid-template-rows: repeat(4, auto) 1fr;
        align-items: start;
        gap: 0 18px;
    }

    .fm-hero__title {
        margin-bottom: 10px;
        font-size: 30px;
    }

    .fm-scores__item {
        padding: 6px 10px 6px 6px;
    }

    .fm-score {
        min-width: 44px;
        height: 36px;
        font-size: 18px;
    }

    /* The chips, the scores and the buttons take the whole width under
       the poster, rather than a column beside it. */
    .fm-hero__text {
        display: contents;
    }

    .fm-hero__kicker,
    .fm-hero__title,
    .fm-hero__original,
    .fm-hero__by {
        grid-column: 2;
    }

    .fm-hero__poster {
        grid-row: 1 / 6;
    }

    .fm-chips,
    .fm-scores,
    .fm-actions {
        grid-column: 1 / -1;
        margin: 18px 0 0;
    }

    .fm-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fm-fact:nth-child(2n) {
        border-right: 0;
    }

    .fm-fact:nth-child(-n + 2) {
        border-bottom: 1px solid var(--fm-line);
    }

    .fm-faq__item {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .fm-faq__item dd {
        grid-column: 2;
    }

    .fm-crew {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Three to a row; of the ten, nine, so no one is left alone on the
       last row (the whole cast is a link away). */
    .fm-people {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .fm-people > li:nth-child(n + 10) {
        display: none;
    }

    .fm-awards,
    .fm-row,
    .fm-trivia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fm-trivia {
        grid-template-columns: minmax(0, 1fr);
    }

    .fm-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 110px;
    }

    /* On a phone the large video's title takes two lines at most, under a
       smaller button set higher, so the two do not meet. */
    .fm-player__play {
        top: 40%;
        width: 52px;
        height: 52px;
    }

    .fm-player__play .fm-i {
        width: 22px;
        height: 22px;
        margin-left: 2px;
    }

    .fm-player__cap {
        right: 14px;
        bottom: 12px;
        left: 14px;
        gap: 4px;
    }

    .fm-player__title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 16px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .fm-mosaic--1 .fm-mosaic__item--big,
    .fm-mosaic--2 .fm-mosaic__item--big,
    .fm-mosaic--2 .fm-mosaic__item:not(.fm-mosaic__item--big) {
        grid-column: span 2;
    }

    .fm-press__item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .fm-press__quote,
    .fm-press__link {
        grid-column: 1 / -1;
    }

    .fm-bo__row {
        grid-template-columns: 18px 80px minmax(0, 1fr) 92px;
        gap: 8px;
        font-size: 12.5px;
    }

    .fm-news__item {
        grid-template-columns: 100px minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .fm-hero--compact .fm-hero__body {
        grid-template-columns: 88px minmax(0, 1fr);
        column-gap: 16px;
    }

    .fm-hero--compact .fm-hero__title {
        font-size: 26px;
    }

    .fm-facts--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fm-facts--2 .fm-fact:nth-child(-n + 2),
    .fm-facts--3 .fm-fact {
        border-bottom: 0;
    }

    .fm-facts--3 .fm-fact:nth-child(2n) {
        border-right: 1px solid var(--fm-line);
    }

    .fm-facts--3 .fm-fact:last-child {
        border-right: 0;
    }

    .fm-credits {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .fm-credit {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .fm-credits--crew {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fm-credits--crew .fm-credit {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .fm-credits--crew .fm-credit__photo {
        width: 64px;
    }
}

@media (max-width: 767px) {
    .fm-carousel {
        grid-auto-columns: calc((100% - 10px) / 2.3);
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .fm-deal {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px 12px;
    }

    .fm-deal__prices {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .fm-deal__go {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .fm-places {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .fm-masonry {
        columns: 2;
        column-gap: 8px;
    }

    .fm-masonry > li {
        margin-bottom: 8px;
    }

    .fm-posters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fm-viewer__step {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 767px) {
    .fm-scoreboard__item {
        padding-right: 0;
        border-right: 0;
    }

    .fm-scoreboard__item--go {
        margin-left: 0;
    }

    .fm-users--big {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .fm-story {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 12px;
    }

    .fm-story .fm-news__lead-text {
        display: none;
    }

    .fm-story .fm-news__title {
        font-size: 16.5px;
    }

    .fm-buy__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fm-deal--shop {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .fm-track {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .fm-track .fm-pill {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 767px) {
    .fm-posters--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fm-refine__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .fm-tags--scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .fm-tags--scroll > li {
        flex: none;
    }

    .fm-az {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .fm-az__l {
        flex: none;
    }
}

@media (max-width: 767px) {
    .fm-credits--lead {
        grid-template-columns: minmax(0, 1fr);
    }

    .fm-credits--lead > li:nth-child(n + 4) {
        display: none;
    }

    .fm-castlist__item {
        grid-template-columns: 36px minmax(0, 1fr);
        row-gap: 0;
    }

    .fm-castlist__part {
        grid-column: 2;
    }
}

/* A curated list (page/films/index/editorial.html.twig) ------------------ */

.fm-hero__updated {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -6px 0 16px;
    color: var(--c-ink-mute);
    font-size: 13px;
}

.fm-hero__updated .fm-i {
    width: 15px;
    height: 15px;
}

/* Our selection: the rank, the poster, then why it is here and two buttons. */
.fm-picks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-pick {
    display: grid;
    grid-template-columns: 40px 112px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    padding: 18px 0;
    border-top: 1px solid var(--fm-line);
}

.fm-pick:first-child {
    padding-top: 4px;
    border-top: 0;
}

.fm-pick:last-child {
    padding-bottom: 0;
}

.fm-pick__rank {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    text-align: right;
}

.fm-pick__poster {
    grid-column: 2;
    grid-row: 1;
    display: block;
    overflow: hidden;
    aspect-ratio: 250 / 357;
    border-radius: var(--radius);
    background: var(--fm-tile);
}

.fm-pick__poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-pick__body {
    grid-column: 3;
    min-width: 0;
}

.fm-pick__head {
    /* The title's line: the score is centred on its first. */
    --line: 24px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 6px;
}

.fm-pick__score {
    flex: none;
    margin-top: calc((var(--line) - 32px) / 2);
}

.fm-pick__title {
    min-width: 0;
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.fm-card .fm-pick__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 0;
    color: var(--fm-ink-mute);
    font-size: 13px;
    line-height: 1.4;
}

.fm-pick__year {
    color: var(--fm-ink-soft);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.fm-card .fm-pick__why {
    margin: 10px 0 14px;
    color: var(--fm-ink-soft);
    font-size: 15.5px;
    line-height: 1.6;
}

.fm-pick__why a,
.fm-curio__text a {
    color: var(--fm-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fm-pick__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fm-pick__btn .fm-i {
    width: 16px;
    height: 16px;
}

/* The readers' best: twenty compact rows, down one column then the other. */
.fm-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows, 10), auto);
    grid-auto-flow: column;
    column-gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-top li {
    border-top: 1px solid var(--fm-line);
}

.fm-top__row {
    display: grid;
    grid-template-columns: 24px 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 7px 0;
}

.fm-top__rank {
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    text-align: right;
}

.fm-top__thumb,
.fm-curio__poster {
    display: block;
    width: 40px;
    overflow: hidden;
    aspect-ratio: 250 / 357;
    border-radius: 4px;
    background: var(--fm-tile);
}

.fm-curio__poster {
    width: 64px;
    border-radius: 6px;
}

.fm-top__thumb img,
.fm-curio__poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-top__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fm-top__title {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.fm-top__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    color: var(--fm-ink-mute);
    font-size: 12.5px;
}

.fm-top__year {
    color: var(--fm-ink-soft);
    font-weight: 600;
}

.fm-picked {
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.fm-card .fm-top__all {
    margin: 18px 0 0;
}

/* A long sentence: it wraps on a phone, the arrow kept at its end. */
.fm-top__more {
    justify-content: flex-start;
    text-align: left;
}

/* The list in figures, its facts and its questions. */
.fm-figures {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-figure {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius);
    background: var(--fm-paper);
}

.fm-figure .fm-i {
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
    color: var(--fm-ink-mute);
}

.fm-figure__value {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.fm-figure__label {
    color: var(--fm-ink-mute);
    font-size: 15px;
    line-height: 1.45;
}

.fm-figure__label a {
    color: var(--fm-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fm-extra__title {
    margin-top: 26px;
}

.fm-curios {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-curio {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--fm-line);
}

.fm-card .fm-curio__film {
    margin: 0 0 4px;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
}

.fm-card .fm-curio__text {
    margin: 0;
    color: var(--fm-ink-soft);
    font-size: 15.5px;
    line-height: 1.55;
}

/* The questions as big as the rest of the box (the film pages keep theirs). */
.fm-faq--curated .fm-faq__item {
    grid-template-columns: 26px 250px minmax(0, 1fr);
    font-size: 15.5px;
}

@media (max-width: 767px) {
    /* The rank sits on the poster's corner. */
    .fm-pick {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 14px;
    }

    .fm-pick__rank {
        z-index: 1;
        justify-self: start;
        margin: 6px 0 0 6px;
        padding: 4px 7px;
        border-radius: 6px;
        background: var(--fm-tile);
        color: #ffffff;
        font-size: 15px;
        text-align: left;
    }

    .fm-pick__poster {
        grid-column: 1;
    }

    .fm-pick__body {
        grid-column: 2;
    }

    .fm-pick__head {
        --line: 21.6px;
    }

    .fm-pick__title {
        font-size: 18px;
    }

    .fm-pick__btn {
        min-height: 44px;
    }

    .fm-top {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .fm-figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fm-faq--curated .fm-faq__item {
        grid-template-columns: 26px minmax(0, 1fr);
    }
}

/* The box office tab ------------------------------------------------------ */

.fm-taq__figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin: 0 0 18px;
}

.fm-taq__figure {
    padding: 12px 14px;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius);
}

.fm-taq__figure dt {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.fm-taq__figure dt .fm-i {
    width: 14px;
    height: 14px;
}

.fm-taq__figure dd {
    margin: 0;
}

.fm-taq__run {
    margin: 18px 0 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}

.fm-taq__run span {
    color: var(--fm-ink-mute);
    font-weight: 500;
}

/* A long run scrolls inside its card, never the page. */
.fm-taq__scroll {
    overflow-x: auto;
    border: 1px solid var(--fm-line);
    border-radius: var(--radius);
}

.fm-taq__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-data);
}

.fm-taq__table th,
.fm-taq__table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--fm-line);
    text-align: left;
    white-space: nowrap;
}

.fm-taq__table tbody tr:last-child th,
.fm-taq__table tbody tr:last-child td {
    border-bottom: 0;
}

.fm-taq__table thead th {
    background: var(--fm-paper);
    color: var(--fm-ink-mute);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.fm-taq__table tbody th {
    font-weight: 500;
}

.fm-taq__table .fm-taq__num {
    font-family: var(--font-mono);
    text-align: right;
}

.fm-taq__table thead .fm-taq__num {
    font-family: var(--font-display);
}

.fm-taq__pos {
    display: inline-block;
    min-width: 24px;
    text-align: center;
}

.is-leader .fm-taq__pos {
    border-radius: var(--radius-sm);
    background: var(--c-accent);
    color: var(--c-accent-ink);
    font-weight: 500;
}

.fm-taq__gross {
    min-width: 170px;
}

.fm-taq__cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Against the run's best weekend. */
.fm-taq__bar {
    flex: 0 0 auto;
    width: calc(var(--share) * .9px);
    min-width: 2px;
    height: 8px;
    border-radius: 4px;
    background: var(--fm-ink);
}

.is-leader .fm-taq__bar {
    background: var(--c-accent);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.fm-taq__value {
    font-family: var(--font-mono);
}

.fm-taq__table .is-up {
    color: #16794a;
}

.fm-taq__table .is-down {
    color: #b3261e;
}

:root[data-theme="dark"] .fm-taq__table .is-up {
    color: #6fd39b;
}

:root[data-theme="dark"] .fm-taq__table .is-down {
    color: #ff8a80;
}

@media (max-width: 767px) {
    .fm-taq__figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* On a phone: the weekend, the position, what it took, the total. */
    .fm-taq__wide {
        display: none;
    }

    .fm-taq__table {
        font-size: 12.5px;
    }

    .fm-taq__table th,
    .fm-taq__table td {
        padding: 8px 7px;
    }

    .fm-taq__table thead th {
        font-size: 10.5px;
        letter-spacing: .03em;
    }

    .fm-taq__gross {
        min-width: 0;
    }

    /* The figures alone: the bars are the wide screen's. */
    .fm-taq__bar {
        display: none;
    }

    .fm-taq__table tbody th {
        white-space: normal;
    }
}