@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url("../fonts/dm-sans-latin.ca72d2bcea8f.woff2") format("woff2");
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/newsreader-latin.6e4f2958c3a7.woff2") format("woff2");
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/newsreader-italic-latin.a99fb127682b.woff2") format("woff2");
}

:root {
    --color-paper: #f3e9da;
    --color-ink: #171019;
    --color-wine: #2b1726;
    --color-forest: #234a33;
    --color-oxblood: #651f32;
    --color-coral: #efa78f;
    --color-sage: #8da69b;
    --color-gold: #a57635;
    --color-line-light: #cdbdaa;
    --color-line-dark: #564550;

    --font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --font-ui: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --type-step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
    --type-step-0: clamp(1rem, 0.95rem + 0.24vw, 1.125rem);
    --type-step-1: clamp(1.25rem, 1.12rem + 0.62vw, 1.62rem);
    --type-step-2: clamp(1.62rem, 1.35rem + 1.3vw, 2.4rem);
    --type-step-3: clamp(2.2rem, 1.65rem + 2.7vw, 3.8rem);
    --type-step-4: clamp(2.8rem, 1.85rem + 4.7vw, 5.6rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 6rem;

    --radius-small: 0.25rem;
    --radius-medium: 0.75rem;
    --radius-large: 2rem;
    --border-hairline: 1px;
    --border-strong: 2px;
    --border-focus: 3px;
    --measure-prose: 68ch;
    --width-content: 78rem;
    --width-wide: 90rem;
    --target-minimum: 2.75rem;
    --motion-duration: 160ms;
    --motion-easing: ease-out;
    --motion-duration-reveal: 700ms;
    --motion-duration-image: 1200ms;
    --motion-easing-reveal: cubic-bezier(0.2, 0.7, 0.2, 1);
    --focus-ring: 0 0 0 3px var(--color-paper), 0 0 0 6px var(--color-oxblood);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: 100%;
    line-height: 1.6;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: var(--type-step-0);
    overflow-wrap: anywhere;
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 0.98;
    text-wrap: balance;
}

h1 {
    font-size: var(--type-step-4);
}

h2 {
    font-size: var(--type-step-2);
}

h3 {
    font-size: var(--type-step-1);
}

p,
ul,
ol {
    margin-block: 0;
}

a {
    color: currentColor;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 0.14em;
}

:focus-visible {
    outline: var(--border-focus) solid transparent;
    border-radius: var(--radius-small);
    box-shadow: var(--focus-ring);
}

.skip-link {
    position: fixed;
    z-index: 100;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    min-height: var(--target-minimum);
    padding: var(--space-3) var(--space-4);
    transform: translateY(calc(-100% - var(--space-6)));
    background: var(--color-paper);
    color: var(--color-ink);
    font-weight: 700;
    transition: transform var(--motion-duration) var(--motion-easing);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

.site-header {
    border-block-end: var(--border-hairline) solid var(--color-line-dark);
    background: var(--color-ink);
    color: var(--color-paper);
}

.site-header__inner,
.site-main__inner,
.site-footer__inner {
    width: min(100% - 2rem, var(--width-content));
    margin-inline: auto;
}

.site-header__inner {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-4);
}

.site-header__identity {
    display: inline-flex;
    align-items: center;
    inline-size: 19rem;
    max-inline-size: 100%;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    text-decoration: none;
}

.site-header__identity img {
    width: 100%;
    height: auto;
}

.site-navigation {
    min-width: 0;
}

.site-navigation__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-navigation a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    font-size: var(--type-step--1);
    text-decoration: none;
}

.site-navigation a[aria-current="page"] {
    text-decoration-line: underline;
    text-decoration-color: var(--color-coral);
    text-decoration-thickness: var(--border-strong);
    text-underline-offset: 0.42em;
}

/* Phone and tablet navigation. Below 64rem the wordmark has its own row and a second row holds the
   three lead links from the site settings plus a More disclosure (details/summary, so it works without
   script). Each link is rendered twice, once in the full list and once in the More sheet, and only one
   copy is ever displayed. Open, the More tab and its sheet share the wine surface and the sheet hangs
   from the bottom edge of the tab row across the full header width, so the two read as one piece. */
.site-navigation__more {
    display: none;
}

@media (max-width: 63.99rem) {
    .site-header:has(.site-navigation--compact) {
        position: relative;
        z-index: 20;
    }

    .site-header:has(.site-navigation--compact) .site-header__inner {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-block: 0;
    }

    .site-header:has(.site-navigation--compact) .site-header__identity {
        max-inline-size: calc(100% - (2 * var(--space-4)));
        margin: var(--space-3) var(--space-4);
    }

    .site-navigation--compact {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
        border-block-start: var(--border-hairline) solid var(--color-line-dark);
    }

    .site-navigation--compact .site-navigation__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .site-navigation--compact .site-navigation__secondary {
        display: none;
    }

    .site-navigation--compact .site-navigation__list a,
    .site-navigation__more > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 100%;
        min-block-size: calc(var(--target-minimum) + var(--space-1));
        padding-inline: var(--space-2);
        border-inline-end: var(--border-hairline) solid var(--color-line-dark);
        font-size: var(--type-step--1);
        text-align: center;
        text-decoration: none;
    }

    /* The current tab is marked by a coral bar along its foot, and so is More when the current page is under it. */
    .site-navigation--compact .site-navigation__list a[aria-current="page"],
    .site-navigation__more[data-current] > summary {
        box-shadow: inset 0 calc(-1 * var(--border-focus)) 0 var(--color-coral);
    }

    .site-navigation__more {
        display: block;
    }

    .site-navigation__more > summary {
        gap: var(--space-2);
        border-inline-end: 0;
        list-style: none;
        cursor: pointer;
    }

    .site-navigation__more > summary::-webkit-details-marker {
        display: none;
    }

    .site-navigation__chevron {
        inline-size: 0.45rem;
        block-size: 0.45rem;
        border-inline-end: var(--border-strong) solid currentColor;
        border-block-end: var(--border-strong) solid currentColor;
        rotate: 45deg;
        translate: 0 -0.15rem;
    }

    /* Open, the tab and the sheet are one wine surface: no marker or rule between them. */
    .site-navigation__more[open] > summary {
        background: var(--color-wine);
        box-shadow: none;
    }

    .site-navigation__more[open] .site-navigation__chevron {
        rotate: -135deg;
        translate: 0 0.15rem;
    }

    .site-navigation__sheet {
        position: absolute;
        inset-inline: 0;
        inset-block-start: 100%;
        display: grid;
        margin: 0;
        padding: 0 var(--space-4) var(--space-4);
        border-block-end: var(--border-hairline) solid var(--color-line-dark);
        background: var(--color-wine);
        list-style: none;
    }

    .site-navigation__sheet a {
        display: flex;
        inline-size: 100%;
        min-block-size: calc(var(--target-minimum) + var(--space-2));
        border-block-end: var(--border-hairline) solid var(--color-line-dark);
        font-family: var(--font-display);
        font-size: var(--type-step-1);
    }

    .site-navigation__sheet li:last-child a {
        border-block-end: 0;
    }

    .site-navigation__sheet a[aria-current="page"] {
        color: var(--color-coral);
        text-decoration: none;
    }
}

.site-main {
    padding-block: clamp(var(--space-7), 7vw, var(--space-9));
}

.site-main--opening {
    padding-block: 0;
}

.site-main--opening > .site-main__inner {
    display: grid;
    gap: clamp(var(--space-7), 7vw, var(--space-9));
    padding-block: clamp(var(--space-7), 7vw, var(--space-9));
}

.opening-stage {
    display: block;
    background: var(--color-forest);
}

.home-hero {
    display: grid;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
    padding: clamp(var(--space-7), 8vw, var(--space-9)) max(var(--space-4), calc((100% - var(--width-content)) / 2));
    background: var(--color-forest);
    color: var(--color-paper);
}

.home-hero__copy {
    --flow-space: var(--space-5);
    min-width: 0;
    max-width: 52rem;
}

.home-hero h1 {
    max-inline-size: 8ch;
    line-height: 0.9;
    letter-spacing: -0.025em;
    text-wrap: wrap;
}

.home-hero__title-accent {
    color: var(--color-coral);
    font-style: italic;
}

.home-hero__eyebrow + h1 {
    margin-block-start: var(--space-2);
}

.home-hero__eyebrow,
.programme-card__eyebrow,
.event-card__eyebrow,
.editorial-card__eyebrow,
.place-card__eyebrow {
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero__summary {
    max-width: 44ch;
    font-family: var(--font-display);
    font-size: var(--type-step-2);
    line-height: 1.2;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Hero signpost to the television work (home_features.hero_television_link): one programme still with
   a play mark, then a label, the programme and channel, and where the link goes. */
.home-hero__television {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    max-width: 30rem;
    padding: var(--space-3);
    border: var(--border-hairline) solid rgb(243 233 218 / 35%);
    border-radius: var(--radius-small);
    background: rgb(23 16 25 / 30%);
    color: var(--color-paper);
    text-decoration: none;
}

.home-hero__television:hover {
    border-color: var(--color-paper);
    background: rgb(23 16 25 / 50%);
}

.home-hero__television-still {
    position: relative;
}

.home-hero__television-still img {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-small);
}

.home-hero__television-still::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    border-style: solid;
    border-width: 0.6rem 0 0.6rem 1rem;
    border-color: transparent transparent transparent var(--color-paper);
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 60%));
    content: "";
    translate: -40% -50%;
}

.home-hero__television-text {
    display: grid;
    gap: var(--space-1);
}

.home-hero__television-label {
    color: var(--color-coral);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero__television-title {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.15;
}

.home-hero__television-detail {
    font-size: var(--type-step--1);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.home-hero__media {
    min-width: 0;
}

.responsive-media {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
}

.responsive-media picture,
.responsive-media img {
    width: 100%;
}

.responsive-media img {
    height: auto;
    object-fit: cover;
}

.responsive-media[data-focal-point="50% 35%"] img {
    object-position: 50% 35%;
}

.responsive-media[data-focal-point="50% 45%"] img {
    object-position: 50% 45%;
}

.responsive-media[data-focal-point="50% 50%"] img {
    object-position: 50% 50%;
}

.responsive-media[data-focal-point="50% 25%"] img {
    object-position: 50% 25%;
}

.responsive-media[data-focal-point="50% 55%"] img {
    object-position: 50% 55%;
}

.responsive-media[data-focal-point="42% 45%"] img {
    object-position: 42% 45%;
}

.responsive-media[data-focal-point="48% 45%"] img {
    object-position: 48% 45%;
}

.responsive-media[data-focal-point="45% 45%"] img {
    object-position: 45% 45%;
}

.responsive-media[data-focal-point="55% 50%"] img {
    object-position: 55% 50%;
}

.responsive-media[data-focal-point="50% 52%"] img {
    object-position: 50% 52%;
}

.responsive-media[data-focal-point="58% 52%"] img {
    object-position: 58% 52%;
}

.responsive-media[data-focal-point="30% 50%"] img {
    object-position: 30% 50%;
}

.responsive-media[data-focal-point="52% 48%"] img {
    object-position: 52% 48%;
}

.responsive-media[data-focal-point="65% 65%"] img {
    object-position: 65% 65%;
}

.responsive-media[data-focal-point="45% 42%"] img {
    object-position: 45% 42%;
}

.responsive-media[data-focal-point="48% 50%"] img {
    object-position: 48% 50%;
}

.responsive-media[data-focal-point="50% 48%"] img {
    object-position: 50% 48%;
}

.responsive-media[data-focal-point="45% 35%"] img {
    object-position: 45% 35%;
}

.responsive-media[data-focal-point="62% 50%"] img {
    object-position: 62% 50%;
}

.responsive-media[data-focal-point="45% 40%"] img {
    object-position: 45% 40%;
}

.home-introduction {
    max-width: var(--measure-prose);
}

.home-card-grid {
    display: grid;
    gap: var(--space-5);
}

/* Homepage cards are previews: smaller titles and tighter padding than on their own listings. */
.home-card-grid .television-card h2 {
    font-size: var(--type-step-1);
}

.home-card-grid .television-card__body,
.home-card-grid .place-card {
    padding: var(--space-5);
}

.home-events__list {
    display: grid;
    gap: var(--space-5);
}

.home-events__action a,
.home-events__empty a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    font-weight: 700;
}

.programme-card,
.event-card,
.editorial-card,
.place-card {
    --flow-space: var(--space-4);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border: var(--border-hairline) solid var(--color-line-light);
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
}

.programme-card {
    background: var(--color-paper);
}

.event-card {
    border-block-start: var(--space-2) solid var(--color-coral);
    background: var(--color-paper);
    color: var(--color-ink);
}

.programme-card--illustrated,
.event-card--illustrated {
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 0;
    overflow: hidden;
}

.event-card--illustrated {
    border-block-start: var(--border-hairline) solid var(--color-line-light);
}

.programme-card__media,
.event-card--illustrated > .event-card__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.programme-card__media .responsive-media,
.programme-card__media picture,
.programme-card__media img,
.event-card__media .responsive-media,
.event-card__media picture,
.event-card__media img {
    height: 100%;
}

.programme-card__body,
.event-card__body {
    --flow-space: var(--space-4);
    align-content: start;
}

.programme-card--illustrated > .programme-card__body,
.event-card--illustrated > .event-card__body {
    padding: clamp(var(--space-5), 4vw, var(--space-6));
}

.editorial-card {
    background: var(--color-sage);
    color: var(--color-ink);
}

.place-card {
    background: var(--color-paper);
}

.place-card > .responsive-media {
    aspect-ratio: 5 / 3;
    overflow: hidden;
    border-radius: var(--radius-small);
}

.place-card > .responsive-media picture,
.place-card > .responsive-media img {
    height: 100%;
}

.place-card__eyebrow,
.days-out-page__eyebrow,
.place-detail__eyebrow {
    color: var(--color-oxblood);
}

.place-card__next-occurrence,
.place-card__explore {
    padding: var(--space-4);
    border-inline-start: var(--space-2) solid var(--color-oxblood);
    background: var(--color-sage);
    color: var(--color-ink);
}

.place-card__next-occurrence > p:first-child,
.place-card__explore > p:first-child {
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.place-card__explore ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-inline-start: var(--space-5);
}

.place-card a,
.home-days-out__action a,
.home-television__action a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    font-weight: 700;
}

.days-out-page,
.place-detail {
    --flow-space: clamp(var(--space-6), 6vw, var(--space-8));
}

.days-out-page__header,
.place-detail__header,
.place-detail__prose,
.place-detail__location,
.place-detail__events {
    max-width: var(--measure-prose);
}

.days-out-page__header,
.place-detail__header {
    --flow-space: var(--space-4);
}

.days-out-page__eyebrow,
.place-detail__eyebrow {
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.days-out-page__grid,
.place-detail__event-list,
.place-detail__audio-guides {
    display: grid;
    gap: var(--space-5);
}

.place-detail__image {
    max-width: 56rem;
}

.place-detail address {
    font-style: normal;
}

.place-detail address span {
    display: block;
}

.place-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.programme-card__eyebrow,
.editorial-card__eyebrow {
    color: var(--color-oxblood);
}

.event-card__date,
.event-card__status {
    font-weight: 700;
}

.event-card__date {
    color: var(--color-oxblood);
    font-size: var(--type-step-1);
    font-family: var(--font-display);
}

.event-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
}

.event-card__actions .event-card__book {
    padding: var(--space-3) var(--space-5);
    line-height: 1.2;
    border: var(--border-strong) solid var(--color-coral);
    border-radius: var(--radius-small);
    background: var(--color-coral);
    color: var(--color-ink);
    text-decoration: none;
}

.event-card__actions .event-card__book:hover {
    text-decoration: underline;
    text-decoration-thickness: var(--border-strong);
}

.programme-card__action a,
.event-card__actions a,
.editorial-card__action a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    font-weight: 700;
}

.programme-page {
    --flow-space: clamp(var(--space-6), 6vw, var(--space-8));
}

.detail-lead {
    display: grid;
    align-items: start;
    gap: clamp(var(--space-5), 4vw, var(--space-7));
    min-width: 0;
}

.detail-lead__primary,
.detail-lead__media {
    min-width: 0;
}

.detail-lead__media {
    inline-size: min(100%, 26rem);
    justify-self: center;
}

.detail-lead__media img {
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    max-block-size: min(30rem, 60svh);
    margin-inline: auto;
    object-fit: contain;
}

.programme-page__header,
.programme-prose {
    max-width: var(--measure-prose);
}

.programme-page__header {
    --flow-space: var(--space-4);
}

.programme-page__eyebrow {
    color: var(--color-oxblood);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.programme-page__summary {
    max-width: 44ch;
    font-family: var(--font-display);
    font-size: var(--type-step-2);
    line-height: 1.2;
}

.programme-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.filter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    padding: var(--space-2) var(--space-4);
    border: var(--border-strong) solid var(--color-ink);
    border-radius: var(--radius-small);
    font-weight: 700;
    text-decoration: none;
}

.filter-link[aria-current="page"] {
    background: var(--color-coral);
}

.programme-page__image {
    display: grid;
    gap: var(--space-2);
    max-width: 56rem;
    margin: 0;
}

.programme-grid,
.programme-event-list,
.programme-facts {
    display: grid;
    gap: var(--space-5);
}

.programme-section,
.programme-booking-state,
.programme-empty {
    max-width: var(--width-content);
}

.programme-event,
.programme-booking-state,
.programme-empty,
.programme-facts > div {
    --flow-space: var(--space-4);
    padding: clamp(var(--space-5), 4vw, var(--space-6));
    border: var(--border-hairline) solid var(--color-line-light);
    border-radius: var(--radius-medium);
}

.programme-event {
    background: var(--color-coral);
    color: var(--color-ink);
}

.programme-booking-state,
.programme-facts > div {
    background: var(--color-sage);
    color: var(--color-ink);
}

.programme-link-list {
    display: grid;
    gap: var(--space-3);
    padding-inline-start: var(--space-5);
}

.programme-link-list a,
.programme-event a,
.programme-booking-state a,
.programme-empty a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    font-weight: 700;
}

.events-page,
.event-detail {
    --flow-space: clamp(var(--space-6), 6vw, var(--space-8));
}

.events-page__header,
.event-detail__header {
    --flow-space: var(--space-4);
    max-width: var(--measure-prose);
}

.events-page__eyebrow,
.event-detail__eyebrow {
    color: var(--color-oxblood);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-shortcuts ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    padding: var(--space-2) var(--space-4);
    border: var(--border-strong) solid var(--color-ink);
    border-radius: var(--radius-small);
    font-weight: 700;
    text-decoration: none;
}

.event-shortcut[aria-current="page"] {
    background: var(--color-coral);
    text-decoration: underline;
    text-decoration-thickness: var(--border-strong);
}

.event-filter-panel {
    max-width: var(--width-content);
}

.event-filter-panel > summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: fit-content;
    min-block-size: var(--target-minimum);
    padding-block: var(--space-2);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
    list-style: none;
}

.event-filter-panel > summary::-webkit-details-marker {
    display: none;
}

.event-filter-panel > summary::before {
    content: "";
    inline-size: 0.6em;
    block-size: 0.6em;
    border-block-end: var(--border-strong) solid currentColor;
    border-inline-end: var(--border-strong) solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform var(--motion-duration) var(--motion-easing);
}

.event-filter-panel[open] > summary::before {
    transform: translateY(0.1em) rotate(-135deg);
}

.event-filter-panel[open] > summary {
    margin-block-end: var(--space-4);
}

.event-filters {
    --flow-space: var(--space-4);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border: var(--border-hairline) solid var(--color-line-light);
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
    background: var(--color-sage);
    color: var(--color-ink);
}

.event-filters fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.event-filters legend {
    margin-block-end: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--type-step-2);
    line-height: 1;
}

.event-filters__grid {
    display: grid;
    gap: var(--space-4);
}

.event-filters label {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    font-weight: 700;
}

.event-filters input,
.event-filters select,
.event-filters button {
    min-block-size: var(--target-minimum);
    max-width: 100%;
    border: var(--border-strong) solid var(--color-ink);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    color: var(--color-ink);
    font: inherit;
}

.event-filters input,
.event-filters select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
}

.event-filters__error {
    padding: var(--space-4);
    border-inline-start: var(--space-2) solid var(--color-oxblood);
    background: var(--color-paper);
}

.event-filters__actions,
.event-detail__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.event-filters button {
    padding-inline: var(--space-5);
    background: var(--color-coral);
    font-weight: 700;
    cursor: pointer;
}

.event-filters__actions a,
.event-card a,
.event-results-summary a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    font-weight: 700;
}

.event-results-status {
    max-width: var(--measure-prose);
    font-weight: 700;
}

.event-results-summary {
    --flow-space: var(--space-2);
    max-width: var(--measure-prose);
}

.event-active-filters ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding-inline-start: var(--space-5);
}

.event-results__list {
    display: grid;
    gap: var(--space-5);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
    font-size: var(--type-step--1);
}

.breadcrumbs li:not(:last-child)::after {
    margin-inline-start: var(--space-2);
    content: "/";
}

.breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
}

.event-detail__state {
    max-width: var(--measure-prose);
    padding: var(--space-4);
    border-inline-start: var(--space-2) solid var(--color-oxblood);
    background: var(--color-coral);
    color: var(--color-ink);
    font-weight: 700;
}

.event-detail__facts {
    max-width: var(--measure-prose);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border: var(--border-hairline) solid var(--color-line-light);
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
}

.event-detail__facts dl {
    display: grid;
    gap: var(--space-4);
    margin: 0;
}

.event-detail__facts dt {
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.event-detail__facts dd {
    margin: 0;
}

.event-detail__programme {
    max-width: var(--measure-prose);
}

.editorial-page {
    --flow-space: clamp(var(--space-6), 6vw, var(--space-8));
}

.editorial-page__header,
.editorial-prose,
.podcast-listening,
.deferred-player {
    max-width: var(--measure-prose);
}

.editorial-page__header {
    --flow-space: var(--space-4);
}

/* Prose keeps a reading rhythm of its own rather than inheriting the page's section gap. */
.editorial-prose,
.television-detail__prose,
.place-detail__prose,
.programme-prose {
    --flow-space: var(--space-4);
}

.editorial-prose > * + h2,
.television-detail__prose > * + h2,
.place-detail__prose > * + h2,
.programme-prose > * + h2 {
    margin-block-start: var(--space-6);
}

.editorial-page__eyebrow {
    color: var(--color-oxblood);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.editorial-page__standfirst {
    max-width: 44ch;
    font-family: var(--font-display);
    font-size: var(--type-step-2);
    line-height: 1.2;
}

.editorial-page__media {
    display: grid;
    gap: var(--space-2);
    max-width: 56rem;
    margin: 0;
}

.podcast-detail__artwork {
    width: min(100%, 28rem);
}

.editorial-listing__meta {
    font-size: var(--type-step--1);
}

.editorial-grid {
    display: grid;
    gap: var(--space-5);
}

.editorial-listing,
.editorial-facts,
.editorial-contact,
.podcast-listening,
.deferred-player,
.audio-guide-card {
    --flow-space: var(--space-4);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border: var(--border-hairline) solid var(--color-line-light);
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
}

.contact-enquiry {
    --flow-space: var(--space-6);
    max-width: 56rem;
    padding: clamp(var(--space-5), 5vw, var(--space-8));
    border: var(--border-hairline) solid var(--color-line-dark);
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
    background: var(--color-wine);
    color: var(--color-paper);
}

.contact-enquiry__heading,
.contact-form {
    max-width: var(--measure-prose);
}

.contact-enquiry__heading {
    --flow-space: var(--space-3);
}

.contact-enquiry__heading .editorial-page__eyebrow {
    color: var(--color-coral);
}

.contact-form {
    --flow-space: var(--space-5);
}

.contact-form__field {
    --flow-space: var(--space-2);
    display: grid;
}

.contact-form label {
    font-weight: 700;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    min-block-size: var(--target-minimum);
    padding: var(--space-3) var(--space-4);
    border: var(--border-strong) solid var(--color-line-dark);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    color: var(--color-ink);
    font: inherit;
}

.contact-form textarea {
    min-block-size: 12rem;
    resize: vertical;
}

.contact-form [aria-invalid="true"] {
    border-color: var(--color-coral);
}

.contact-form__help,
.contact-form__optional,
.contact-form__privacy {
    font-size: var(--type-step--1);
}

.contact-form__error {
    color: var(--color-coral);
    font-size: var(--type-step--1);
    font-weight: 700;
}

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

.contact-status {
    --flow-space: var(--space-3);
    max-width: var(--measure-prose);
    padding: var(--space-5);
    border: var(--border-strong) solid currentColor;
    border-radius: var(--radius-small);
    color: var(--color-ink);
}

.contact-status--success {
    background: var(--color-sage);
}

.contact-status--error {
    background: var(--color-coral);
}

.editorial-listing,
.podcast-listening {
    background: var(--color-sage);
    color: var(--color-ink);
}

.audio-guide-card {
    background: var(--color-paper);
}

.television-page,
.television-detail {
    --flow-space: clamp(var(--space-6), 6vw, var(--space-8));
}

.television-page__header,
.television-detail__header,
.television-detail__prose,
.television-detail__actions {
    max-width: var(--measure-prose);
}

.television-page__header,
.television-detail__header {
    --flow-space: var(--space-4);
}

.television-page__eyebrow,
.television-detail__eyebrow,
.television-card__eyebrow {
    color: var(--color-oxblood);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.television-page__grid {
    display: grid;
    gap: var(--space-5);
}

.television-card {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: var(--border-hairline) solid var(--color-line-light);
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
    background: var(--color-paper);
}

/* As on event cards, the title card fills the top of the card and the text sits below it. */
.television-card__body {
    --flow-space: var(--space-4);
    align-content: start;
    padding: clamp(var(--space-5), 4vw, var(--space-6));
}

.television-card a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
}

/* The picture is a second, pointer-only route to the same page; the title and button carry it for keyboards. */
.television-card a.television-card__media,
.event-card a.event-card__media {
    display: block;
    color: inherit;
}

.television-card__media {
    aspect-ratio: 5 / 3;
    overflow: hidden;
}

.television-card__media .responsive-media,
.television-card__media picture,
.television-card__media img {
    height: 100%;
}

.television-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.audio-guide-card__eyebrow {
    color: var(--color-oxblood);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.editorial-contact,
.deferred-player {
    background: var(--color-coral);
    color: var(--color-ink);
}

.editorial-facts dl {
    display: grid;
    gap: var(--space-4);
    margin: 0;
}

.editorial-facts dt {
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.editorial-facts dd {
    margin: 0;
}

.editorial-link-list,
.podcast-destinations {
    display: grid;
    gap: var(--space-3);
    padding-inline-start: var(--space-5);
}

.editorial-page a,
.podcast-listening a,
.deferred-player button,
.audio-guide-card a {
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
}

.editorial-page a,
.podcast-listening a,
.audio-guide-card a {
    display: inline-flex;
    align-items: center;
}

.deferred-player button {
    padding: var(--space-2) var(--space-4);
    border: var(--border-strong) solid var(--color-ink);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    color: var(--color-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.deferred-player button:disabled {
    cursor: default;
    opacity: 0.7;
}

.deferred-player iframe {
    width: 100%;
    min-height: 12rem;
    border: 0;
}

.site-footer {
    border-block-start: var(--border-strong) solid var(--color-coral);
    background: var(--color-wine);
    color: var(--color-paper);
}

.site-footer__inner {
    display: grid;
    gap: var(--space-5);
    padding-block: clamp(var(--space-6), 5vw, var(--space-7));
}

.social-links,
.footer-links {
    min-width: 0;
}

.social-links ul,
.footer-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-links a,
.footer-links a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
}

.site-footer__credit {
    max-width: var(--measure-prose);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-hairline) solid var(--color-line-dark);
    font-size: var(--type-step--1);
}

.flow > * + * {
    margin-block-start: var(--flow-space, var(--space-5));
}

.page-message {
    max-width: var(--measure-prose);
    min-height: 40vh;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    padding: var(--space-3) var(--space-5);
    border: var(--border-strong) solid transparent;
    border-radius: var(--radius-small);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--motion-duration) var(--motion-easing),
        border-color var(--motion-duration) var(--motion-easing),
        color var(--motion-duration) var(--motion-easing),
        transform var(--motion-duration) var(--motion-easing);
}

.button--primary {
    background: var(--color-coral);
    color: var(--color-ink);
}

.button--secondary {
    border-color: currentColor;
    background: transparent;
    color: inherit;
}

.button--text {
    padding-inline: 0;
    color: inherit;
    text-decoration: underline;
}

.button:hover {
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(0);
}

.card {
    --flow-space: var(--space-4);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border: var(--border-hairline) solid var(--color-line-light);
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
    background: var(--color-paper);
}

.card__eyebrow {
    color: var(--color-oxblood);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card__summary {
    max-width: var(--measure-prose);
}

.card__action a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    min-inline-size: var(--target-minimum);
    font-weight: 700;
}

.credentials-strip {
    border-block-start: var(--border-strong) solid var(--color-coral);
    border-block-end: var(--border-hairline) solid var(--color-line-light);
    background: var(--color-paper);
    color: var(--color-ink);
}

.credentials-strip__list {
    display: grid;
    gap: 0;
    width: min(100% - 2rem, var(--width-wide));
    margin-inline: auto;
    padding: 0;
    list-style: none;
}

.credentials-strip li {
    display: flex;
    align-items: center;
    min-height: var(--target-minimum);
    padding: var(--space-5) var(--space-4);
    border-block-end: var(--border-hairline) solid var(--color-line-light);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.25;
    text-wrap: balance;
}

.credentials-strip li:last-child {
    border-block-end: 0;
}

@media (min-width: 48rem) {
    .site-header__inner {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--space-6);
    }

    .site-navigation__list {
        justify-content: flex-end;
    }

    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, auto);
        align-items: start;
    }

    .social-links {
        grid-column: 1;
    }

    .footer-links {
        grid-column: 2;
        justify-self: end;
    }

    .site-footer__credit {
        grid-column: 1 / -1;
        justify-self: stretch;
        max-width: none;
        text-align: end;
    }

    .credentials-strip__list {
        grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
    }

    .credentials-strip li {
        border-block-end: 0;
        border-inline-end: var(--border-hairline) solid var(--color-line-light);
    }

    .credentials-strip li:last-child {
        border-inline-end: 0;
    }

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

    .days-out-page__grid,
    .place-detail__event-list,
    .place-detail__audio-guides,
    .television-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .programme-grid,
    .programme-event-list,
    .programme-facts,
    .home-events__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-results__list {
        max-width: 64rem;
    }

    .event-results__list > .event-card--illustrated {
        grid-template-columns: minmax(11rem, 1fr) minmax(0, 2.4fr);
        grid-template-rows: none;
    }

    .event-results__list > .event-card--illustrated > .event-card__body {
        --flow-space: var(--space-3);
    }

    .event-results__list > .event-card--illustrated > .event-card__media {
        aspect-ratio: auto;
        min-block-size: 14rem;
        contain: size;
    }

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

    .event-detail__facts dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (min-width: 64rem) {
    .detail-lead {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, min(28vw, 26rem));
    }

    .detail-lead__media {
        justify-self: end;
    }

    .home-hero {
        width: min(100%, var(--width-wide));
        margin-inline: auto;
        grid-template-columns: minmax(30rem, 38rem) minmax(0, 52rem);
        gap: 0;
        align-items: stretch;
        padding: 0;
        overflow: hidden;
    }

    .home-hero__copy {
        min-width: 0;
        max-width: 38rem;
        position: relative;
        z-index: 2;
        align-self: center;
        padding-block: clamp(var(--space-7), 8vw, var(--space-9));
        padding-inline-start: var(--space-6);
        padding-inline-end: var(--space-6);
    }

    .home-hero__media {
        position: relative;
        min-height: 0;
    }

    .home-hero__media .responsive-media {
        position: relative;
        inline-size: min(100%, 42rem);
        margin-inline-start: auto;
        height: 100%;
    }

    .home-hero__media .responsive-media::before {
        position: absolute;
        z-index: 1;
        inset-block: 0;
        inset-inline-start: 0;
        width: 72%;
        background: linear-gradient(to right, var(--color-forest) 0%, var(--color-forest) 12%, rgb(35 74 51 / 88%) 32%, transparent 100%);
        content: "";
        pointer-events: none;
    }

    .home-hero__media picture,
    .home-hero__media img {
        height: 100%;
        min-height: 0;
    }

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

    .home-events__list,
    .home-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-hero__television {
        grid-template-columns: 8.5rem minmax(0, 1fr);
    }

    .television-band__inner {
        grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-7);
    }

    .television-band__list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 0;
        padding: 0;
        overflow: visible;
    }
}

@media (min-width: 64rem) and (min-height: 42rem) {
    :root {
        --site-header-block-size: calc(var(--target-minimum) + (2 * var(--space-4)) + var(--border-hairline));
    }

    .site-header__inner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .site-navigation__list {
        flex-wrap: nowrap;
    }

    .opening-stage {
        min-height: calc(100svh - var(--site-header-block-size));
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .home-hero {
        min-height: 0;
        padding-inline: 0;
    }

    .home-hero__copy {
        --flow-space: clamp(var(--space-3), 2svh, var(--space-5));
        padding-block: clamp(var(--space-5), 4svh, var(--space-7));
    }

    .home-hero__summary {
        font-size: min(var(--type-step-2), 3.4svh);
    }

    /* With the television link the copy is taller, so the slogan and the link also scale with the
       viewport height to keep the credentials band in the first screen at 1366 by 768. */
    .home-hero:has(.home-hero__television) h1 {
        font-size: min(var(--type-step-4), 9svh);
    }

    .home-hero:has(.home-hero__television) .home-hero__copy {
        --flow-space: clamp(var(--space-3), 1.6svh, var(--space-5));
        padding-block: clamp(var(--space-4), 2.5svh, var(--space-7));
    }

    .home-hero__television {
        grid-template-columns: min(8.5rem, 11svh) minmax(0, 1fr);
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
    }

    .home-hero__television-title {
        font-size: min(var(--type-step-1), 2.6svh);
    }

    .home-hero__media {
        overflow: hidden;
        contain: size;
    }
}

@media (min-width: 90rem) {
    .site-header__inner,
    .site-main__inner,
    .site-footer__inner {
        width: min(100% - 4rem, var(--width-wide));
    }

}

/*
 * Lead compositions. Each lets a detail page's image belong to the page instead of sitting in a box
 * beside it (see DetailLead):
 * - stage: a television title card bleeds to the viewport edge and fades into a dark band, the same
 *   technique as the homepage portrait;
 * - showcase: a wide artwork or photograph is shown whole on that dark band, never faded or cropped;
 * - hung: a portrait or cover sits in a paper mount on a wine wall that runs off the page edge.
 * Bands and walls run edge to edge from inside the content column, so main clips sideways overflow.
 */
.site-main {
    --page-gutter: max(var(--space-4), calc((100vw - var(--width-content)) / 2));
}

.site-main:has(.detail-lead--stage, .detail-lead--showcase, .detail-lead--hung, .television-band) {
    overflow-x: clip;
}

/* Homepage television band (home_features.television_band): an ink band straight after the opening
   stage, with the approved credential, the route to /television/ and the four latest title cards.
   On narrow screens the cards scroll sideways in one row, so the band stays about a screen tall. */
.television-band {
    margin-inline: calc(50% - 50vw);
    margin-block-start: calc(-1 * clamp(var(--space-7), 7vw, var(--space-9)));
    background: var(--color-ink);
    color: var(--color-paper);
}

.television-band__inner {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-7) var(--page-gutter);
}

.television-band__copy {
    --flow-space: var(--space-4);
    max-width: 30rem;
}

.television-band__eyebrow {
    color: var(--color-coral);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.television-band__summary {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    font-style: italic;
    line-height: 1.3;
}

.television-band__list {
    display: flex;
    gap: var(--space-4);
    margin: 0 calc(-1 * var(--page-gutter));
    padding: 0 var(--page-gutter) var(--space-2);
    overflow-x: auto;
    list-style: none;
    scroll-padding-inline: var(--page-gutter);
    scroll-snap-type: x mandatory;
}

.television-band__list > li {
    flex: 0 0 min(62%, 16rem);
    scroll-snap-align: start;
}

.television-band__card {
    display: grid;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
}

.television-band__still img {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-small);
}

.television-band__title {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.15;
}

.television-band__card:hover .television-band__title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.television-band__meta {
    color: var(--color-line-light);
    font-size: var(--type-step--1);
}

.detail-lead--stage,
.detail-lead--showcase {
    --band-colour: var(--color-ink);
    --band-veil: rgb(23 16 25 / 86%);
    position: relative;
    gap: 0;
    margin-inline: calc(50% - 50vw);
    margin-block-start: calc(-1 * clamp(var(--space-7), 7vw, var(--space-9)));
    background: var(--band-colour);
    color: var(--color-paper);
}

.detail-lead--stage .detail-lead__primary,
.detail-lead--showcase .detail-lead__primary {
    --flow-space: var(--space-5);
    position: relative;
    z-index: 2;
    max-width: none;
    padding: var(--space-6) var(--page-gutter) var(--space-8);
}

.detail-lead--stage h1,
.detail-lead--showcase h1 {
    max-inline-size: 14ch;
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.detail-lead--stage :is(.television-detail__eyebrow, .programme-page__eyebrow, .place-detail__eyebrow),
.detail-lead--showcase :is(.television-detail__eyebrow, .programme-page__eyebrow, .place-detail__eyebrow, .television-page__eyebrow) {
    color: var(--color-coral);
}

.television-detail__summary {
    max-width: 34ch;
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.3;
}

.detail-lead__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin: 0;
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hairline) solid var(--color-line-dark);
}

.detail-lead__facts dt {
    color: var(--color-coral);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detail-lead__facts dd {
    margin: var(--space-1) 0 0;
    font-family: var(--font-display);
    font-size: var(--type-step-1);
}

/* Small screens: the title card leads, cropped above its credits, and dissolves into the heading. */
.detail-lead--stage .detail-lead__media {
    position: relative;
    order: -1;
    inline-size: auto;
    justify-self: stretch;
}

.detail-lead--stage .detail-lead__media img {
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 0%;
}

.detail-lead--stage .detail-lead__media::after {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(to top, var(--band-colour) 0%, var(--band-veil) 30%, transparent 100%);
    content: "";
    pointer-events: none;
}

.detail-lead--stage .detail-lead__primary {
    margin-block-start: calc(-1 * var(--space-6));
}

/* Small screens: the showcased image comes first, whole, inside the page gutter. */
.detail-lead--showcase .detail-lead__media {
    order: -1;
    inline-size: auto;
    justify-self: stretch;
    padding: var(--space-6) var(--page-gutter) 0;
}

.detail-lead--showcase .detail-lead__media img {
    inline-size: 100%;
    max-block-size: none;
    box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 60%);
}

/* Film loop: a silent trailer shown whole on the showcase band, like a screen hung on the wall.
   The still stands in for it until the visitor's motion preference allows the video (see Motion). */
.film-loop {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.film-loop__video {
    display: none;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    background: var(--color-ink);
    box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 60%);
}

.film-loop__frame {
    position: relative;
}

/* A television detail page with a trailer shows it on an ink panel after the programme notes, like a
   screening room; film-loop.js starts it once half of it is on screen. */
.television-detail__trailer {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-8);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
    background: var(--color-ink);
    color: var(--color-paper);
}

.television-detail__trailer h2 {
    font-size: var(--type-step-2);
}

.television-detail__trailer > * {
    justify-self: center;
    inline-size: min(100%, 56rem);
}

/* The script's pause and sound buttons replace the native controls; they are shown only once the
   script has run (data-enhanced) and the trailer can play (see Motion). */
.film-loop__controls {
    display: none;
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-start: var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.film-loop__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--target-minimum);
    padding: var(--space-2) var(--space-4);
    border: var(--border-hairline) solid rgb(255 255 255 / 45%);
    border-radius: var(--radius-small);
    background: rgb(23 16 25 / 78%);
    color: var(--color-paper);
    font: inherit;
    font-size: var(--type-step--1);
    font-weight: 700;
    cursor: pointer;
}

.film-loop__toggle:hover {
    background: var(--color-ink);
}

.film-loop__toggle[data-state="playing"] .film-loop__icon--play,
.film-loop__toggle[data-state="paused"] .film-loop__icon--pause,
.film-loop__toggle[data-state="muted"] .film-loop__icon--sound,
.film-loop__toggle[data-state="unmuted"] .film-loop__icon--muted {
    display: none;
}

.detail-lead--showcase .film-loop__still img {
    inline-size: 100%;
    max-block-size: none;
}

.film-loop__caption {
    font-size: var(--type-step--1);
}

.film-loop__caption a {
    color: inherit;
}

/* Hung: a paper mount with a fine gold line, on a wine wall that runs to the right-hand edge. */
.detail-lead--hung .detail-lead__media {
    position: relative;
    isolation: isolate;
    inline-size: auto;
    justify-self: stretch;
    padding: var(--space-7) 0 var(--space-7) var(--space-5);
}

.detail-lead--hung .detail-lead__media::before {
    position: absolute;
    z-index: -1;
    inset: 0 calc(-1 * var(--page-gutter)) 0 calc(var(--space-5) + 18%);
    border-radius: var(--radius-large) 0 0 var(--radius-large);
    background: var(--color-wine);
    content: "";
}

.detail-lead--hung .responsive-media {
    max-inline-size: 24rem;
    padding: var(--space-3);
    background: var(--color-paper);
    outline: var(--border-hairline) solid var(--color-gold);
    outline-offset: calc(-1 * var(--space-2));
    box-shadow:
        0 1.5rem 3rem -1rem rgb(23 16 25 / 55%),
        0 0.25rem 0.75rem rgb(23 16 25 / 25%);
}

.detail-lead--hung .detail-lead__media img {
    inline-size: 100%;
    max-block-size: none;
}

/* Work with Leslie: the booking copy continues the introduction in the lead column. */
.detail-lead__primary:has(> .detail-lead__intro) {
    --flow-space: var(--space-6);
    max-width: 40rem;
}

.detail-lead__intro {
    --flow-space: var(--space-4);
}

.detail-lead__body {
    padding-block-start: var(--space-5);
    border-block-start: var(--border-hairline) solid var(--color-gold);
}

.detail-lead__body h2 {
    font-size: var(--type-step-2);
}

@media (min-width: 64rem) {
    .detail-lead--stage {
        grid-template-columns: var(--page-gutter) minmax(28rem, 36rem) minmax(0, 1fr);
        min-block-size: min(44rem, calc(100svh - 5rem));
    }

    .detail-lead--stage .detail-lead__primary {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        margin-block-start: 0;
        padding: clamp(var(--space-7), 6vw, var(--space-9)) var(--space-6) clamp(var(--space-7), 6vw, var(--space-9)) 0;
    }

    /* The copy column is at most 36rem, so a long first word ("Michelangelo:") must fit it whole. */
    .detail-lead--stage h1 {
        font-size: min(var(--type-step-4), 4.75rem);
    }

    .detail-lead--stage .detail-lead__media {
        order: 0;
        grid-column: 2 / 4;
        grid-row: 1;
        align-self: stretch;
        margin-inline-start: 22rem;
        overflow: clip;
    }

    /* The band's height comes from the copy and its minimum, never from the artwork: a tall title card
       or painting fills the space it is given instead of stretching the band. */
    .detail-lead--stage .detail-lead__media .responsive-media {
        position: absolute;
        inset: 0;
    }

    .detail-lead--stage .detail-lead__media picture,
    .detail-lead--stage .detail-lead__media img {
        height: 100%;
    }

    /* Pinned to the figure rather than sized through picture's percentage height, which not every
       engine resolves against an absolutely positioned grid; otherwise a tall card spills out of the band. */
    .detail-lead--stage .detail-lead__media img {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        object-position: 50% 12%;
    }

    /* The homepage fade, turned to the band colour. */
    .detail-lead--stage .detail-lead__media::after {
        inset: 0 auto 0 0;
        width: 62%;
        height: auto;
        background: linear-gradient(to right, var(--band-colour) 0%, var(--band-colour) 14%, var(--band-veil) 36%, transparent 100%);
    }

    /* A lower fade lets the foot of a title card (credits, logos) dissolve into the band. */
    .detail-lead--stage .detail-lead__media::before {
        position: absolute;
        z-index: 1;
        inset: auto 0 0;
        height: 55%;
        background: linear-gradient(to top, var(--band-colour) 0%, var(--band-colour) 25%, var(--band-veil) 55%, transparent 100%);
        content: "";
        pointer-events: none;
    }

    .detail-lead--showcase {
        grid-template-columns: var(--page-gutter) minmax(24rem, 34rem) minmax(0, 1fr) var(--page-gutter);
        align-items: center;
    }

    .detail-lead--showcase .detail-lead__primary {
        grid-column: 2;
        grid-row: 1;
        padding: clamp(var(--space-7), 6vw, var(--space-9)) var(--space-7) clamp(var(--space-7), 6vw, var(--space-9)) 0;
    }

    .detail-lead--showcase .detail-lead__media {
        order: 0;
        grid-column: 3;
        grid-row: 1;
        padding: clamp(var(--space-6), 4vw, var(--space-8)) 0;
    }

    .detail-lead--showcase .detail-lead__media img {
        inline-size: auto;
        max-inline-size: 100%;
        max-block-size: min(34rem, 70svh);
    }

    .detail-lead--hung {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
        gap: clamp(var(--space-7), 6vw, var(--space-9));
    }

    .detail-lead--hung .detail-lead__media {
        padding: var(--space-8) 0;
    }

    .detail-lead--hung .detail-lead__media::before {
        inset-inline-start: 30%;
    }

    .detail-lead--hung .responsive-media {
        max-inline-size: none;
    }
}

@media (min-width: 90rem) {
    .site-main {
        --page-gutter: max(var(--space-6), calc((100vw - var(--width-wide)) / 2));
    }
}

/*
 * Work with Leslie: a "Get in touch" button that rides at the foot of the screen through the booking
 * introduction and television list, then comes to rest just above the enquiry section. It is a
 * zero-height sticky row whose top offset holds it at the bottom of the viewport; no script is
 * involved. It duplicates the visible button in the lead column, so it is hidden from assistive
 * technology and the tab order. Where scroll timelines are supported and motion is welcome, it
 * fades in once the visitor starts to scroll (see the motion section).
 */
.floating-action {
    position: sticky;
    z-index: 5;
    inset-block-start: calc(100svh - var(--target-minimum) - var(--space-5));
    display: flex;
    justify-content: flex-end;
    block-size: 0;
    pointer-events: none;
}

.flow > .floating-action + * {
    margin-block-start: 0;
}

.floating-action__button {
    pointer-events: auto;
    box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(23 16 25 / 55%);
}

/*
 * Listen: a podcast series is presented like a record sleeve. Its logo is the artwork, and an edge
 * fade lets the logo's black ground dissolve into the ink panel. A QR code sits in a small mount with
 * its caption beside it, below a fine rule; the audio-guide card uses the same mount on paper.
 */
/* Listen reads as one column of a measured width: each heading sits close to its list, and every
   entry shares the same rounded card, so the featured sleeve leads without overwhelming the page. */
.editorial-page:has(.sleeve-list) .editorial-section > h2 + * {
    margin-block-start: var(--space-5);
}

.sleeve-list {
    display: grid;
    gap: var(--space-5);
    max-inline-size: 52rem;
}

.sleeve-list > .editorial-listing {
    background: var(--color-paper);
}

.sleeve {
    display: grid;
    gap: var(--space-6);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
    background: var(--color-ink);
    color: var(--color-paper);
}

.sleeve__art {
    max-inline-size: 13rem;
}

.sleeve__art img {
    display: block;
    mask-image:
        linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
}

.sleeve__text {
    --flow-space: var(--space-4);
    align-self: center;
    min-width: 0;
}

.sleeve__eyebrow {
    color: var(--color-coral);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sleeve h3 {
    font-size: var(--type-step-2);
    line-height: 1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.sleeve h3 a {
    text-decoration-thickness: var(--border-hairline);
    text-underline-offset: 0.12em;
}

.sleeve__summary {
    max-width: 40ch;
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.3;
}

.sleeve .qr-code,
.audio-guide-card--with-qr .qr-code {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
    inline-size: auto;
}

.sleeve .qr-code {
    padding-block-start: var(--space-5);
    border-block-start: var(--border-hairline) solid var(--color-line-dark);
}

.sleeve .qr-code .responsive-media,
.audio-guide-card--with-qr .qr-code .responsive-media {
    padding: var(--space-2);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    outline: var(--border-hairline) solid var(--color-gold);
    outline-offset: var(--space-1);
}

.sleeve .qr-code__caption,
.audio-guide-card--with-qr .qr-code__caption {
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    font-style: italic;
    font-weight: 400;
    line-height: 1.25;
}

.audio-guide-card--with-qr .qr-code {
    padding-block-start: var(--space-5);
    border-block-start: var(--border-hairline) solid var(--color-line-light);
}

.audio-guide-card--with-qr h3 {
    font-size: var(--type-step-2);
}

@media (min-width: 48rem) {
    .sleeve {
        grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
        gap: clamp(var(--space-6), 5vw, var(--space-8));
        align-items: center;
    }

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

    .audio-guide-card--with-qr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-7);
        align-items: center;
    }

    .audio-guide-card--with-qr > .qr-code {
        grid-template-columns: 9rem;
        margin-block-start: 0;
        padding: 0;
        border: 0;
    }

    .audio-guide-card--with-qr .qr-code__caption {
        max-width: 12ch;
        font-size: var(--type-step-0);
    }
}

/* Quote blocks in editorial prose: scripture in essays and audience testimonials. */
.editorial-prose blockquote {
    margin-inline: 0;
    margin-block-end: 0;
    padding-inline-start: var(--space-5);
    border-inline-start: var(--border-strong) solid var(--color-gold);
    font-family: var(--font-display);
    font-size: var(--type-step-0);
    line-height: 1.4;
}

.editorial-prose blockquote > cite {
    display: block;
    margin-block-start: var(--space-2);
    color: var(--color-oxblood);
    font-family: var(--font-ui);
    font-size: var(--type-step--1);
    font-style: normal;
    font-weight: 700;
}

/* A scannable code duplicating a visible text link, kept large enough for a phone camera. */
.qr-code {
    display: grid;
    gap: var(--space-2);
    inline-size: min(100%, 12rem);
}

.qr-code img,
.book-gallery img {
    object-fit: contain;
}

.qr-code__caption {
    font-size: var(--type-step--1);
    font-weight: 700;
}

.book-gallery {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 30rem) {
    .book-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .book-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/*
 * Publication credits on the Book page, and the paged book reader for extracts. Below 64rem the
 * reader is ordinary prose. From 64rem it lays the text out as facing pages in columns that
 * scroll sideways; ::column snapping and ::scroll-button() turn it into a page-by-page reader
 * where supported, and other browsers keep a horizontally scrolling book.
 */
.publication-credits {
    display: grid;
    gap: var(--space-5);
}

.publication-credit {
    --flow-space: var(--space-2);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hairline) solid var(--color-line-light);
}

.publication-credit h3 {
    font-size: var(--type-step-1);
}

.publication-credit__role {
    color: var(--color-oxblood);
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.book-reader {
    max-width: var(--measure-prose);
}

.book-reader__pages {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.5;
}

.book-reader__pages > * + * {
    margin-block-start: 0.9em;
}

.book-reader__pages > h2 {
    margin-block-start: 1.6em;
    color: var(--color-oxblood);
    font-size: var(--type-step-2);
}

.book-reader__pages > h2:first-child {
    margin-block-start: 0;
}

.book-reader__pages:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (min-width: 48rem) {
    .publication-credits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .book-reader {
        position: relative;
        max-width: none;
        padding: var(--space-7) var(--space-7) var(--space-8);
        background: var(--color-paper);
        border: var(--border-hairline) solid var(--color-line-light);
        border-radius: var(--radius-small) var(--radius-medium) var(--radius-medium) var(--radius-small);
        box-shadow:
            4px 4px 0 -1px var(--color-paper),
            4px 4px 0 0 var(--color-line-light),
            8px 8px 0 -1px var(--color-paper),
            8px 8px 0 0 var(--color-line-light);
    }

    .book-reader__pages {
        anchor-name: --book-pages;
        block-size: min(70svh, 44rem);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        columns: 2;
        column-gap: var(--space-8);
        column-fill: auto;
        column-rule: var(--border-hairline) solid var(--color-line-light);
        font-size: var(--type-step-0);
        line-height: 1.6;
        hyphens: auto;
        text-wrap: pretty;
    }

    .book-reader__pages::column {
        scroll-snap-align: start;
    }

    .book-reader__pages > h2 {
        break-before: column;
        margin-block-start: 0;
    }

    .book-reader__pages > h2:first-child {
        break-before: auto;
    }

    .book-reader__pages > p,
    .book-reader__pages > blockquote {
        orphans: 3;
        widows: 3;
    }

    .book-reader__pages::scroll-button(*) {
        position: absolute;
        position-anchor: --book-pages;
        inset-block-start: calc(anchor(bottom) + var(--space-4));
        min-inline-size: var(--target-minimum);
        min-block-size: var(--target-minimum);
        padding-inline: var(--space-4);
        background: var(--color-wine);
        color: var(--color-paper);
        border: 0;
        border-radius: var(--radius-large);
        font-family: var(--font-ui);
        font-size: var(--type-step--1);
        font-weight: 700;
        cursor: pointer;
    }

    .book-reader__pages::scroll-button(inline-start) {
        content: "← Previous page" / "Previous page";
        inset-inline-start: anchor(left);
    }

    .book-reader__pages::scroll-button(inline-end) {
        content: "Next page →" / "Next page";
        inset-inline-end: anchor(right);
    }

    .book-reader__pages::scroll-button(*):focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

    .book-reader__pages::scroll-button(*):disabled {
        opacity: 0.35;
        cursor: default;
    }
}

/*
 * Editorial motion. Every rule below is an enhancement: it runs only when the visitor has not
 * asked for reduced motion, and a browser without the feature shows the finished page.
 */
@media (prefers-reduced-motion: no-preference) {
    .book-reader__pages {
        scroll-behavior: smooth;
    }

    .site-navigation__chevron {
        transition:
            rotate var(--motion-duration) var(--motion-easing),
            translate var(--motion-duration) var(--motion-easing);
    }

    /* The trailer plays only for visitors who have not asked for reduced motion. */
    .film-loop__video {
        display: block;
    }

    .film-loop__still {
        display: none;
    }

    .film-loop[data-enhanced] .film-loop__controls {
        display: flex;
    }

    @view-transition {
        navigation: auto;
    }

    .site-header {
        view-transition-name: site-header;
    }

    ::view-transition-old(root) {
        animation: 220ms var(--motion-easing) both page-leave;
    }

    ::view-transition-new(root) {
        animation: 420ms var(--motion-easing-reveal) both page-enter;
    }

    [data-view-transition] {
        view-transition-name: attr(data-view-transition type(<custom-ident>));
    }

    ::view-transition-group(*) {
        animation-duration: 520ms;
        animation-timing-function: var(--motion-easing-reveal);
    }

    .home-hero__copy > *,
    .detail-lead__primary > *,
    .events-page__header > *,
    .programme-page__header > *,
    .days-out-page__header > *,
    .television-page__header > *,
    .editorial-page__header > *,
    .event-detail__header > * {
        animation: var(--motion-duration-reveal) var(--motion-easing-reveal) both rise-in;
    }

    :is(.home-hero__copy, .detail-lead__primary, .events-page__header, .programme-page__header, .days-out-page__header, .television-page__header, .editorial-page__header, .event-detail__header) > :nth-child(2) {
        animation-delay: 80ms;
    }

    :is(.home-hero__copy, .detail-lead__primary, .events-page__header, .programme-page__header, .days-out-page__header, .television-page__header, .editorial-page__header, .event-detail__header) > :nth-child(3) {
        animation-delay: 160ms;
    }

    :is(.home-hero__copy, .detail-lead__primary, .events-page__header, .programme-page__header, .days-out-page__header, .television-page__header, .editorial-page__header, .event-detail__header) > :nth-child(n + 4) {
        animation-delay: 240ms;
    }

    .event-shortcuts,
    .programme-filters,
    .event-filter-panel,
    .event-results-summary {
        animation: var(--motion-duration-reveal) var(--motion-easing-reveal) 280ms both rise-in;
    }

    .home-hero__media picture,
    .detail-lead--stage .detail-lead__media picture {
        overflow: clip;
    }

    .home-hero__media img,
    .detail-lead--stage .detail-lead__media img {
        animation: var(--motion-duration-image) var(--motion-easing-reveal) both settle-in;
    }

    .programme-card__media img,
    .event-card__media img,
    .place-card > .responsive-media img,
    .television-card__media img {
        transition: transform var(--motion-duration-reveal) var(--motion-easing-reveal);
    }

    .programme-card--illustrated:has(a:hover, a:focus-visible) .programme-card__media img,
    .event-card--illustrated:has(a:hover, a:focus-visible) .event-card__media img,
    .place-card:has(a:hover, a:focus-visible) > .responsive-media img,
    .television-card:has(a:hover, a:focus-visible) .television-card__media img {
        transform: scale(1.04);
    }

    .event-filter-panel {
        interpolate-size: allow-keywords;
    }

    .event-filter-panel::details-content {
        block-size: 0;
        overflow: clip;
        transition:
            block-size var(--motion-duration-reveal) var(--motion-easing-reveal),
            content-visibility var(--motion-duration-reveal) allow-discrete;
    }

    .event-filter-panel[open]::details-content {
        block-size: auto;
    }

    @supports (animation-timeline: scroll()) {
        .floating-action__button {
            animation: linear both floating-action-arrive;
            animation-timeline: scroll(root);
            animation-range: 0 40svh;
        }
    }

    @supports (animation-timeline: view()) {
        .programme-card,
        .event-card,
        .place-card,
        .editorial-card,
        .television-card,
        .audio-guide-card,
        .sleeve,
        .editorial-listing,
        .programme-event,
        .card,
        .credentials-strip li {
            animation: linear both rise-in;
            animation-timeline: view();
            animation-range: entry 5% entry 45%;
        }
    }
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
}

@keyframes floating-action-arrive {
    from {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes settle-in {
    from {
        transform: scale(1.05);
    }
}

@keyframes page-leave {
    to {
        opacity: 0;
    }
}

@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .button:hover,
    .button:active {
        transform: none;
    }
}