@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;
    --color-paper-deep: #eadcc8;

    --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;
    }
}

/* The gap between the header and a page's first content; bands that run up to the header cancel it. */
.site-main {
    --main-top: clamp(var(--space-5), 3vw, var(--space-6));
    padding-block: var(--main-top) 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__body {
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.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, place, television and Listen and read cards share the event card's shell: deep paper, the picture on
 * top, the title link covering the whole card, and one coral button at the foot above a hairline.
 * They have no date stub, as they are not single dated events.
 */
.programme-card,
.place-card,
.television-card,
.editorial-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
    color: var(--color-ink);
}

.programme-card__body,
.place-card__body,
.television-card__body,
.editorial-card__body {
    --flow-space: var(--space-3);
    display: flex;
    flex-direction: column;
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.programme-card__link,
.place-card__link,
.television-card__link,
.editorial-card__link {
    color: inherit;
    text-decoration: none;
}

.programme-card__link::after,
.place-card__link::after,
.television-card__link::after,
.editorial-card__link::after {
    position: absolute;
    inset: 0;
    content: "";
}

.programme-card:hover .programme-card__link,
.place-card:hover .place-card__link,
.television-card:hover .television-card__link,
.editorial-card:hover .editorial-card__link {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

:is(.programme-card, .place-card, .television-card, .editorial-card):has(:is(.programme-card__link, .place-card__link, .television-card__link, .editorial-card__link):focus-visible) {
    outline: var(--border-strong) solid var(--color-oxblood);
    outline-offset: 3px;
}

:is(.programme-card__link, .place-card__link, .television-card__link, .editorial-card__link):focus-visible {
    outline: none;
}

/* Links inside the card (the next event, guides, the action) sit above the covering title link. */
.place-card__body a:not(.place-card__link),
.programme-card__action,
.place-card__action,
.television-card__action,
.editorial-card__action {
    position: relative;
    z-index: 1;
}

/* The action sits at the foot, so a row of cards ends on one line; the text keeps a gap above it. */
.programme-card__body > .programme-card__action,
.place-card__body > .place-card__action,
.television-card__body > .television-card__action,
.editorial-card__body > .editorial-card__action {
    margin-block-start: auto;
    padding-block-start: var(--space-3);
    border-block-start: var(--border-hairline) solid var(--color-line-light);
}

.programme-card__body > :nth-last-child(2),
.place-card__body > :nth-last-child(2),
.television-card__body > :nth-last-child(2),
.editorial-card__body > :nth-last-child(2) {
    margin-block-end: var(--space-4);
}

.event-card__book,
.programme-card__action a,
.place-card__action a,
.television-card__action a,
.editorial-card__action a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-block-size: var(--target-minimum);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: var(--color-coral);
    color: var(--color-ink);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.event-card__book:hover,
.programme-card__action a:hover,
.place-card__action a:hover,
.television-card__action a:hover,
.editorial-card__action a:hover {
    text-decoration: underline;
    text-decoration-thickness: var(--border-strong);
}

.programme-card__media,
.editorial-card__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

/*
 * Event cards are tickets: a wine stub carries the date, the whole card opens the event page, and
 * one short coral button at the foot books with the organiser. With a picture, the picture leads
 * and the stub sits on its lower edge; in the wide What's On rows the picture, stub and text sit
 * side by side (see the 48rem query).
 */
.event-card {
    position: relative;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    grid-template-areas: "stub body";
    overflow: hidden;
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
    color: var(--color-ink);
}

.event-card__stub {
    grid-area: stub;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.1rem;
    padding: var(--space-5) var(--space-2);
    background: var(--color-wine);
    color: var(--color-paper);
    text-align: center;
    border-inline-end: var(--border-strong) dashed var(--color-paper-deep);
}

.event-card__weekday,
.event-card__month {
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-card__day {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
}

.event-card__month {
    color: var(--color-coral);
}

.event-card--illustrated {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "media" "body";
}

.event-card__media {
    grid-area: media;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-ink);
}

.event-card--illustrated > .event-card__stub {
    grid-area: media;
    z-index: 1;
    align-self: end;
    justify-self: start;
    margin-inline-start: var(--space-5);
    margin-block-end: calc(-1 * var(--space-5));
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-small);
    box-shadow: 0 0.6rem 1rem -0.6rem rgb(23 16 25 / 70%);
}

.event-card--illustrated > .event-card__stub .event-card__day {
    font-size: 2rem;
}

.event-card__body {
    grid-area: body;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.event-card--illustrated > .event-card__body {
    padding-block-start: var(--space-6);
}

.event-card h3 {
    font-size: var(--type-step-1);
    line-height: 1.15;
}

.event-card__link {
    color: inherit;
    text-decoration: none;
}

/* The title link covers the whole card; the booking button sits above it. */
.event-card__link::after {
    position: absolute;
    inset: 0;
    content: "";
}

.event-card:hover .event-card__link {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.event-card:has(.event-card__link:focus-visible) {
    outline: var(--border-strong) solid var(--color-oxblood);
    outline-offset: 3px;
}

.event-card__link:focus-visible {
    outline: none;
}

.event-card__meta {
    display: grid;
    align-content: start;
    gap: 0.1rem;
}

.event-card__foot {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: var(--border-hairline) solid var(--color-line-light);
}

.event-card__status {
    font-size: var(--type-step--1);
}

/* An arrow drawn in the link's colour (a corner and a diagonal) marks that booking opens the
   organiser's site. */
.event-card__book::after,
.event-detail__book::after,
.date-group__book::after,
.place-visit__action::after,
.listening-links__action::after,
.editorial-card__action a[target="_blank"]::after {
    inline-size: 0.55em;
    block-size: 0.55em;
    margin-inline-start: 0.1em;
    border-block-start: var(--border-strong) solid currentColor;
    border-inline-end: var(--border-strong) solid currentColor;
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
    content: "";
}


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


.place-card > .responsive-media {
    aspect-ratio: 5 / 3;
    overflow: hidden;
}

.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);
}

/* A card's next date or guides sit on a paper slip with a wine edge, echoing the event stub. */
.programme-card__next-occurrence,
.place-card__next-occurrence,
.place-card__explore {
    --flow-space: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-inline-start: var(--space-2) solid var(--color-wine);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    color: var(--color-ink);
}

.programme-card__next-occurrence > p:first-child,
.place-card__next-occurrence > p:first-child,
.place-card__explore > p:first-child {
    color: var(--color-oxblood);
    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);
}

.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 {
    display: grid;
    gap: var(--space-5);
}

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

.programme-event,
.programme-empty {
    --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);
}

/* Topics, audience and private booking: one quiet deep-paper card with chips, as on event pages. */
.programme-info {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
}

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

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

.programme-info__chips li {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: var(--color-paper);
    font-size: var(--type-step--1);
}

.programme-info p {
    margin-block-start: var(--space-2);
}

.programme-info a {
    font-weight: 700;
    text-underline-offset: 0.2em;
}

@media (min-width: 48rem) {
    .programme-info {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: var(--space-6);
    }
}

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

.programme-link-list a,
.programme-event 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);
    background: var(--color-paper-deep);
    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-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, podcast and venue pages start their band close under the header rather than after the page's
   full top padding. */
.event-detail,
.podcast-page,
.place-detail,
.book-page {
    margin-block-start: calc(var(--space-5) - var(--main-top));
}

/*
 * Writing articles read like a printed essay: a calm header (breadcrumbs, title, standfirst, where
 * it was first published) beside the picture mounted as a print, then the text in the display face at
 * a reading measure with a drop capital, and a side card that stays in view.
 */
.article-page {
    --flow-space: clamp(var(--space-6), 5vw, var(--space-7));
}

.article-head {
    display: grid;
    gap: var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: var(--border-hairline) solid var(--color-line-light);
}

.article-head__copy {
    --flow-space: var(--space-4);
    min-inline-size: 0;
}

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

.article-head h1 {
    max-inline-size: 22ch;
    font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem);
    line-height: 1.05;
}

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

.article-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    font-size: var(--type-step--1);
}

.article-head__meta a {
    font-weight: 700;
}

.article-head__media {
    justify-self: center;
    inline-size: min(100%, 22rem);
}

.article-head__media img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.article-body {
    display: grid;
    gap: var(--space-6);
}

.article-prose {
    --flow-space: var(--space-5);
    max-inline-size: 40rem;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.25rem);
    line-height: 1.65;
}

.article-prose > p:first-child::first-letter {
    float: left;
    padding: 0.3rem 0.5rem 0 0;
    color: var(--color-oxblood);
    font-size: 4.3em;
    line-height: 0.82;
}

.article-aside {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    align-self: start;
    padding: var(--space-5);
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
    font-size: var(--type-step--1);
}

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

.article-aside a {
    font-weight: 700;
}

@media (min-width: 64rem) {
    .article-head {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: end;
    }

    .article-body {
        grid-template-columns: minmax(0, 40rem) minmax(0, 18rem);
        gap: var(--space-8);
    }

    .article-aside {
        position: sticky;
        top: var(--space-5);
    }
}

/*
 * The book page opens on a wine band: the book itself mounted as a print, then title, subtitle,
 * author and publisher, the shops as pills (the first coral), the QR code and a quiet line of
 * publication details. The description follows at reading width beside an author card.
 */
.book-page {
    --flow-space: clamp(var(--space-6), 5vw, var(--space-7));
}

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

.book-band__media {
    justify-self: center;
    inline-size: min(100%, 28rem);
    transform: rotate(-1.5deg);
}

.book-band__media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.book-band__copy {
    --flow-space: var(--space-4);
    min-inline-size: 0;
}

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

.book-band h1 {
    font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4rem);
    line-height: 1;
}

.book-band__subtitle {
    color: var(--color-line-light);
    font-family: var(--font-display);
    font-size: var(--type-step-2);
    line-height: 1.15;
}

.book-band__by {
    color: var(--color-line-light);
}

.book-band__buy {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}

.book-band__buy-title,
.book-band__details-title {
    font-family: var(--font-ui);
    font-size: var(--type-step--1);
    font-weight: 400;
}

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

.book-band .qr-code {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    inline-size: auto;
}

.book-band .qr-code .responsive-media {
    padding: var(--space-1);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    outline: var(--border-hairline) solid var(--color-gold);
    outline-offset: 2px;
}

.book-band .qr-code__prompt {
    background: var(--color-coral);
    color: var(--color-ink);
    white-space: nowrap;
}

.book-band .qr-code__caption {
    color: var(--color-line-light);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
}

.book-band__details dl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin: 0;
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hairline) solid var(--color-line-dark);
}

.book-band__details dt {
    color: var(--color-coral);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.book-band__details dd {
    margin: 0;
}

.book-about {
    display: grid;
    gap: var(--space-6);
}

.book-author {
    --flow-space: var(--space-3);
    display: grid;
    gap: var(--space-3);
    align-content: start;
    align-self: start;
    padding: var(--space-5);
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
}

.book-author__photo {
    inline-size: 8rem;
}

.book-author__photo img {
    aspect-ratio: 1;
    border-radius: var(--radius-small);
    object-fit: cover;
}

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

@media (min-width: 64rem) {
    .book-band {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: var(--space-8);
        align-items: center;
    }

    .book-about {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: var(--space-8);
    }
}

/*
 * Venue pages open on a forest-green band (the Days out colour): breadcrumbs, name, summary and
 * notes, then a paper visit card with the address and both links, and the venue picture mounted as
 * a print. Upcoming dates follow as one components/date-group card per programme; the venue's audio
 * guides sit on ink, like the Listen shelf.
 */
.place-band {
    display: grid;
    gap: var(--space-6);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border-radius: var(--radius-medium);
    background: var(--color-forest);
    color: var(--color-paper);
}

.place-band__primary {
    --flow-space: var(--space-4);
    min-inline-size: 0;
}

.place-band .breadcrumbs a,
.place-band .breadcrumbs li,
.place-band__prose {
    color: #d3ded6;
}

.place-band .place-detail__eyebrow {
    color: var(--color-coral);
}

.place-band h1 {
    font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4rem);
    line-height: 1;
}

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

.place-band__media {
    justify-self: center;
    inline-size: min(100%, 21rem);
}

.place-band__media img {
    aspect-ratio: 1;
    object-fit: cover;
}

.place-visit {
    display: grid;
    gap: var(--space-4) var(--space-6);
    align-items: center;
    max-inline-size: 40rem;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-medium);
    background: var(--color-paper);
    color: var(--color-ink);
}

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

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

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

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

.place-visit__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-block-size: var(--target-minimum);
    padding: var(--space-2) var(--space-4);
    border: var(--border-strong) solid var(--color-line-light);
    border-radius: 999px;
    color: var(--color-ink);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.place-visit__action--primary {
    border-color: var(--color-coral);
    background: var(--color-coral);
}

.place-visit__action:hover {
    text-decoration: underline;
}

.place-detail > :is(.place-detail__events, .place-detail__explore) {
    margin-block-start: clamp(var(--space-6), 5vw, var(--space-7));
}

.place-detail__events,
.place-detail__explore {
    --flow-space: var(--space-4);
    max-width: none;
}

.place-detail__event-list,
.place-detail__audio-guides {
    max-inline-size: 64rem;
}

.date-group {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
}

.date-group__stub {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: var(--space-4) var(--space-2);
    border-inline-end: var(--border-strong) dashed var(--color-paper-deep);
    background: var(--color-wine);
    color: var(--color-paper);
    text-align: center;
}

.date-group__stub small {
    color: var(--color-line-light);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.date-group__stub span {
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.date-group__stub b {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1;
}

.date-group__month {
    color: var(--color-coral);
}

.date-group__body {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    min-inline-size: 0;
}

.date-group__head {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
}

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

.date-group h3 {
    margin-block: var(--space-1);
    font-size: var(--type-step-2);
}

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

.date-group__book {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-block-size: var(--target-minimum);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: var(--color-coral);
    color: var(--color-ink);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.date-group__book:hover {
    text-decoration: underline;
}

.date-group__months {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hairline) solid var(--color-line-light);
}

.date-group__month-group {
    display: grid;
    gap: var(--space-2);
}

.date-group ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.date-group li a {
    display: grid;
    justify-items: center;
    min-inline-size: var(--target-minimum);
    min-block-size: var(--target-minimum);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    color: inherit;
    line-height: 1.1;
    text-decoration: none;
}

.date-group li a b {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
}

.date-group li a span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.date-group li a:hover {
    outline: var(--border-strong) solid var(--color-oxblood);
}

.date-group__note {
    font-size: var(--type-step--1);
}

/* On a venue page the audio guide is a dark strip, like an item on the Listen shelf. */
.place-detail__audio-guides .audio-guide-card {
    border: 0;
    background: var(--color-ink);
    color: var(--color-paper);
}

.place-detail__audio-guides .audio-guide-card__eyebrow {
    color: var(--color-coral);
}

.place-detail__audio-guides .audio-guide-card a:not(.button) {
    color: var(--color-paper);
}

.place-detail__audio-guides .qr-code__caption {
    color: var(--color-line-light);
}

@media (min-width: 48rem) {
    .place-visit {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

@media (min-width: 64rem) {
    .place-band {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: center;
    }
}

/*
 * Event pages open on a wine band: breadcrumbs, title and summary, then a ticket (a dated stub and
 * the facts), the booking pill and Add to calendar, with the programme picture mounted as a print.
 * All dates of the programme follow as a row to move between, then the description with its
 * topics and audience.
 */
.event-band {
    display: grid;
    gap: var(--space-6);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    border-radius: var(--radius-medium);
    background: var(--color-wine);
    color: var(--color-paper);
}

.event-band__primary {
    --flow-space: var(--space-5);
    min-inline-size: 0;
}

.event-band .breadcrumbs a,
.event-band .breadcrumbs li {
    color: var(--color-line-light);
}

.event-band .event-detail__eyebrow {
    color: var(--color-coral);
}

.event-band h1 {
    font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.8rem);
    line-height: 1;
}

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

.event-band__media {
    justify-self: center;
    inline-size: min(100%, 22rem);
}

.event-ticket {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    max-inline-size: 36rem;
    overflow: hidden;
    border-radius: var(--radius-medium);
    background: var(--color-paper);
    color: var(--color-ink);
}

/* The heading names the ticket for screen readers; on screen the stub and facts say it. */
.event-ticket__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.event-ticket__stub {
    display: grid;
    align-content: center;
    justify-items: center;
    padding: var(--space-4) var(--space-2);
    border-inline-end: var(--border-strong) dashed var(--color-paper);
    background: var(--color-oxblood);
    color: var(--color-paper);
    text-align: center;
}

.event-ticket__stub span {
    font-size: var(--type-step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-ticket__stub b {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1;
}

.event-ticket__month {
    color: var(--color-coral);
}

.event-ticket dl {
    display: grid;
    gap: var(--space-3) var(--space-5);
    margin: 0;
    padding: var(--space-4) var(--space-5);
}

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

.event-ticket dd {
    margin: 0;
    font-weight: 500;
}

.event-ticket__zone {
    display: block;
    font-size: var(--type-step--1);
    font-weight: 400;
}

.event-detail__book,
.event-detail__calendar {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-block-size: var(--target-minimum);
    padding: var(--space-2) var(--space-5);
    border: var(--border-strong) solid var(--color-coral);
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

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

.event-detail__calendar {
    border-color: var(--color-line-dark);
    color: var(--color-paper);
}

:is(.event-detail__book, .event-detail__calendar):hover {
    text-decoration: underline;
}

.event-detail__notes {
    display: grid;
    gap: var(--space-1);
    color: var(--color-line-light);
    font-size: var(--type-step--1);
}

.event-dates {
    --flow-space: var(--space-4);
}

/* These sections set their own rhythm for their contents, so the gap above them is set here. */
.event-detail > :is(.event-dates, .event-detail__about),
.listen-page > :is(.listen-page__row, .listen-shelf) {
    margin-block-start: clamp(var(--space-6), 5vw, var(--space-7));
}

.event-dates__list {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-dates__date {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--space-3);
    align-items: center;
    min-block-size: var(--target-minimum);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
    color: inherit;
    text-decoration: none;
}

.event-dates__date b {
    grid-row: span 2;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
}

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

a.event-dates__date:hover .event-dates__when {
    text-decoration: underline;
}

.event-dates__date--current {
    background: var(--color-ink);
    color: var(--color-paper);
}

.event-detail__about {
    display: grid;
    gap: var(--space-6);
}

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

.event-detail__programme-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    font-weight: 700;
    text-underline-offset: 0.2em;
}

.event-detail__facts {
    display: grid;
    gap: var(--space-4);
    align-content: start;
    align-self: start;
    padding: var(--space-5);
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
}

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

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

.event-detail__facts li {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: var(--color-paper);
    font-size: var(--type-step--1);
}

@media (min-width: 40rem) {
    .event-ticket dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .event-band {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: center;
    }

    .event-detail__about {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: var(--space-8);
    }
}

.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-paper-deep);
    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 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 {
    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__consent {
    margin: 0;
}

.site-footer__consent-button {
    min-block-size: var(--target-minimum);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-coral);
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.consent-bar {
    position: fixed;
    z-index: 20;
    inset-inline: 0;
    inset-block-end: 0;
    border-block-start: var(--border-strong) solid var(--color-coral);
    background: var(--color-wine);
    color: var(--color-paper);
    padding-block-end: env(safe-area-inset-bottom, 0px);
}

.consent-bar__inner {
    display: grid;
    gap: var(--space-3) var(--space-5);
    width: min(100% - 2rem, var(--width-content));
    margin-inline: auto;
    padding-block: var(--space-4);
}

.consent-bar__title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--type-step-0);
    font-weight: 700;
}

.consent-bar__text {
    max-width: var(--measure-prose);
    margin: 0;
    font-size: var(--type-step--1);
}

.consent-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.consent-bar .button--secondary {
    color: var(--color-paper);
}

@media (min-width: 56rem) {
    .consent-bar__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .consent-bar__title,
    .consent-bar__text {
        grid-column: 1;
    }

    .consent-bar__actions {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

.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;
}

/*
 * Not found: the empty wall at the Louvre in 1911. A paler patch on the wine wall shows where a
 * picture hung, with the four pegs that held it, and a museum label beside it carries the message.
 */
.not-found {
    display: grid;
    gap: clamp(var(--space-6), 5vw, var(--space-7));
    padding-block-end: var(--space-7);
}

.not-found__wall {
    display: grid;
    gap: var(--space-6);
    align-items: end;
    padding: clamp(var(--space-5), 5vw, var(--space-8));
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
    background: var(--color-wine);
}

.not-found__space {
    display: grid;
    place-items: center;
}

.not-found__ghost {
    position: relative;
    inline-size: min(100%, 9rem);
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-small);
    background: #3a2433;
    background: color-mix(in oklab, var(--color-wine), var(--color-paper) 9%);
    box-shadow: 0 0 2.5rem 0.5rem rgb(23 16 25 / 35%) inset;
}

/* Two pegs near the top of the patch and two lower down, as in the photographs of the empty wall. */
.not-found__ghost::before {
    --peg: radial-gradient(circle, var(--color-gold) 0.28rem, transparent 0.3rem);
    position: absolute;
    inset: 12% 16% 18%;
    background:
        var(--peg) left top / 0.7rem 0.7rem no-repeat,
        var(--peg) right top / 0.7rem 0.7rem no-repeat,
        var(--peg) left bottom / 0.7rem 0.7rem no-repeat,
        var(--peg) right bottom / 0.7rem 0.7rem no-repeat;
    content: "";
}

.not-found__label {
    --flow-space: var(--space-3);
    max-inline-size: 30rem;
    padding: var(--space-5);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(0 0 0 / 55%);
}

.not-found__label h1 {
    font-size: var(--type-step-3);
}

.not-found__number,
.not-found__medium {
    color: var(--color-oxblood);
    font-size: var(--type-step--1);
}

.not-found__number {
    font-weight: 700;
}

.not-found__medium {
    font-family: var(--font-display);
    font-style: italic;
}

.not-found__story {
    max-inline-size: var(--measure-prose);
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.4;
}

.not-found__ways {
    --flow-space: var(--space-4);
}

.not-found__list {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    list-style: none;
}

.not-found__list a {
    display: grid;
    gap: var(--space-1);
    block-size: 100%;
    min-block-size: var(--target-minimum);
    padding: var(--space-4);
    border: var(--border-hairline) solid var(--color-line-light);
    border-radius: var(--radius-small);
    color: inherit;
    text-decoration: none;
}

.not-found__list a:hover {
    border-color: var(--color-oxblood);
}

.not-found__way {
    color: var(--color-oxblood);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.not-found__detail {
    font-size: var(--type-step--1);
}

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

@media (min-width: 48rem) {
    .not-found__wall {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .not-found__ghost {
        inline-size: min(100%, 17rem);
    }

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

.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,
    .television-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    /* What's On rows: picture, stub and text side by side, with a tear line after the stub. */
    .event-results__list > .event-card--illustrated {
        grid-template-columns: minmax(0, 13rem) 5.5rem minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "media stub body";
    }

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

    .event-results__list > .event-card--illustrated > .event-card__stub {
        grid-area: stub;
        align-self: stretch;
        justify-self: stretch;
        margin: 0;
        padding: var(--space-5) var(--space-2);
        border-inline-end: var(--border-strong) dashed var(--color-paper-deep);
        border-radius: 0;
        box-shadow: none;
    }

    .event-results__list > .event-card--illustrated > .event-card__stub .event-card__day {
        font-size: 2.4rem;
    }

    .event-results__list > .event-card--illustrated > .event-card__body {
        padding: var(--space-5) var(--space-6) var(--space-4);
    }

    .event-results__list .event-card__foot {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .event-filters__grid {
        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 * var(--main-top));
    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 * var(--main-top));
    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 {
    /* The 14ch measure can be narrower than one long word ("Impressionism"); min-content lets the
       box grow to that word, and break-word (unlike the body's anywhere) splits a word only when
       it cannot fit the line at all. */
    min-inline-size: min-content;
    max-inline-size: 14ch;
    line-height: 0.95;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    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 photograph from the making of the programme, set in the text column with its caption below. */
.television-detail__photograph {
    display: grid;
    gap: var(--space-2);
    max-width: var(--measure-prose);
}

.television-detail__caption {
    color: var(--color-wine);
    font-family: var(--font-ui);
    font-size: var(--type-step--1);
}

/* 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;
}

/*
 * Programme leads sit on the dark showcase band in one of two ways, chosen per programme
 * (image_presentation in the programme file):
 * - mounted (default): the image hangs in a paper mount with a fine gold line on a wine wall that
 *   runs to the right-hand edge, so any image reads as a print on a gallery wall.
 * - dissolve: for an image on a pure black ground; lighten blending turns the black into the band
 *   colour, so the figures stand on the band itself. The figure is painted the band colour so the
 *   blend still works inside the view-transition layer, which isolates it from the band.
 */
.detail-lead--mounted .detail-lead__media {
    position: relative;
    isolation: isolate;
    padding-block-end: var(--space-6);
}

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

.detail-lead--mounted .responsive-media {
    max-inline-size: 32rem;
    margin-inline: auto;
    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(0 0 0 / 60%),
        0 0.25rem 0.75rem rgb(0 0 0 / 30%);
}

.detail-lead--showcase.detail-lead--mounted .detail-lead__media img {
    inline-size: 100%;
    max-block-size: none;
    box-shadow: none;
}

.detail-lead--dissolve .responsive-media {
    background: var(--band-colour);
}

.detail-lead--showcase.detail-lead--dissolve .detail-lead__media img {
    box-shadow: none;
    mix-blend-mode: lighten;
}

.programme-page__action {
    padding-block-start: var(--space-2);
}

/* A programme with no dates says so, offers a private booking where allowed, and suggests the next
   dates of up to three other programmes as event tickets. */
.programme-none {
    display: grid;
    gap: var(--space-2);
    max-inline-size: var(--measure-prose);
    padding: var(--space-4) var(--space-5);
    border-inline-start: var(--space-2) solid var(--color-wine);
    border-radius: var(--radius-small);
    background: var(--color-paper-deep);
}

.programme-none a,
.programme-suggestions__all {
    font-weight: 700;
    text-underline-offset: 0.2em;
}

.programme-suggestions__title {
    font-size: var(--type-step-1);
}

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

@media (min-width: 64rem) {
    .programme-suggestions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/*
 * Speaking: the programme pages' mounted lead, then the three formats as shared cards, the next
 * dates as event tickets, and the private-booking panel. The panel's heading and text are the page
 * body in content/pages/speaking.json, so editors change them there.
 */
.speaking-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block-start: var(--space-2);
}

.speaking-page__formats,
.speaking-page__dates {
    display: grid;
    gap: var(--space-5);
}

.speaking-page__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
}

.speaking-page__section-head a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    font-weight: 700;
    text-underline-offset: 0.2em;
}

.speaking-private {
    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-wine);
    color: var(--color-paper);
    scroll-margin-block-start: var(--space-6);
}

.speaking-private__copy {
    --flow-space: var(--space-4);
}

.speaking-private__copy h2 {
    font-size: var(--type-step-3);
    line-height: 1.05;
}

.speaking-private__copy p:not(.speaking-private__eyebrow) {
    max-width: 46ch;
}

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

.speaking-private__examples {
    --flow-space: var(--space-3);
    align-content: start;
}

.speaking-private__label {
    font-family: var(--font-display);
    font-style: italic;
}

.speaking-private__examples ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.speaking-private__examples li a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    padding: var(--space-1) var(--space-4);
    border: var(--border-hairline) solid var(--color-line-dark);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
}

.speaking-private__examples li a:hover {
    border-color: var(--color-coral);
    text-decoration: underline;
}

.speaking-private__more {
    color: var(--color-coral);
    font-weight: 700;
    text-underline-offset: 0.2em;
}

/* On the wine panel the secondary button and links take the paper colour. */
.speaking-private .button--primary {
    margin-block-start: var(--space-2);
}

/* Programme and Speaking openings fit a laptop's first screen: from 64rem the heading, introduction and
   mounted photograph scale with the viewport height as well as its width, so the actions and the
   foot of the photograph are visible without scrolling. vh is the fallback where svh is unknown. */
@media (min-width: 64rem) {
    .programme-page .detail-lead--showcase h1 {
        font-size: min(var(--type-step-4), 8.5vh);
        font-size: min(var(--type-step-4), 8.5svh);
        max-inline-size: 18ch;
    }

    .programme-page .programme-page__summary {
        font-size: clamp(var(--type-step-0), 3.4vh, var(--type-step-2));
        font-size: clamp(var(--type-step-0), 3.4svh, var(--type-step-2));
    }

    .programme-page .detail-lead--showcase .detail-lead__primary {
        --flow-space: var(--space-4);
    }

    .programme-page .detail-lead--mounted .responsive-media {
        max-inline-size: min(32rem, calc(100vh - 15rem));
        max-inline-size: min(32rem, calc(100svh - 15rem));
    }
}

@media (min-width: 64rem) {
    .speaking-page__formats,
    .speaking-page__dates {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 48rem) {
    .speaking-private {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: var(--space-8);
    }
}

/* The description now follows the band directly, so it takes the page's section gap rather than the
   prose rhythm it keeps inside; the dates section keeps that gap and spaces its own contents tightly. */
.programme-page > .programme-prose {
    margin-block-start: clamp(var(--space-6), 6vw, var(--space-8));
}

.programme-page > .programme-section > * {
    --flow-space: var(--space-4);
}

/* Programme dates that share one time, place and link: the shared details once, then linked days by month. */
.programme-dates__schedule {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.3;
}

.programme-dates__note {
    max-width: var(--measure-prose);
    padding: var(--space-3) var(--space-4);
    border-inline-start: var(--border-focus) solid var(--color-oxblood);
    background: rgb(101 31 50 / 7%);
}

.programme-dates__hint {
    font-weight: 700;
}

.programme-months {
    display: grid;
    max-width: var(--width-content);
    gap: var(--space-4);
    margin-block-start: var(--space-5);
}

.programme-month {
    display: grid;
    gap: var(--space-3);
    padding-block-start: var(--space-3);
    border-block-start: var(--border-hairline) solid var(--color-line-light);
}

.programme-month h3 {
    font-family: var(--font-ui);
    font-size: var(--type-step--1);
    font-weight: 700;
    line-height: 1.3;
}

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

.programme-day {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    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-coral);
    border-radius: var(--radius-small);
    background: var(--color-coral);
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.6;
    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);
}

.programme-day:hover {
    border-color: var(--color-oxblood);
    background: var(--color-oxblood);
    color: var(--color-paper);
}

.programme-day__weekday {
    font-weight: 400;
}

.programme-day__number {
    text-decoration: underline;
    text-decoration-thickness: var(--border-hairline);
    text-underline-offset: 0.2em;
}

/* The month is read from the heading on screen; screen readers also hear it in each link. The
   event card's full date is read in its title link; on screen the stub shows it. */
.programme-day__rest,
.event-card__date,
.date-group__rest {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* 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-6), 4vw, var(--space-7)) var(--space-6) clamp(var(--space-6), 4vw, var(--space-7)) 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-6), 4vw, var(--space-7)) var(--space-7) clamp(var(--space-6), 4vw, var(--space-7)) 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;
    }

    .detail-lead--mounted .detail-lead__media::before {
        inset: var(--space-6) calc(-1 * var(--page-gutter)) var(--space-6) 30%;
    }

    .detail-lead--mounted .detail-lead__media {
        padding-block: clamp(var(--space-7), 6vw, var(--space-9));
    }
}

@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%);
}

.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;
}

.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);
}

.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) {
    .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, audience testimonials, and press excerpts on
   television pages. */
.editorial-prose blockquote,
.television-detail__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,
.television-detail__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;
}

/* Consecutive quote blocks are paragraphs of one passage, so the gold rule runs on through them. */
:is(.editorial-prose, .television-detail__prose) blockquote + blockquote {
    margin-block-start: 0;
    padding-block-start: var(--space-4);
}

/* 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;
}

/* The code is also a link to the page it encodes; the prompt says so in the visitor's own terms. */
.qr-code .qr-code__link {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    color: var(--color-ink);
    text-decoration: none;
}

.qr-code__prompt {
    margin-block-start: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-small);
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-ui);
    font-size: var(--type-step--1);
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
}

/* On the dark Listen shelf the prompt takes the coral of the primary action so it stays visible. */
.listen-feature .qr-code__prompt {
    background: var(--color-coral);
    color: var(--color-ink);
}

.qr-code__prompt-touch {
    display: none;
}

@media (pointer: coarse) {
    .qr-code__prompt-touch {
        display: inline;
    }

    .qr-code__prompt-pointer {
        display: none;
    }
}

.qr-code__link:hover .qr-code__prompt,
.qr-code__link:focus-visible .qr-code__prompt {
    background: var(--color-oxblood);
}

/* The listen action and the guide link on an audio-guide card (place pages). */
.listen-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
}

/*
 * Listen page. The podcast series and audio guides sit side by side on one ink shelf
 * (components/listen-feature in .listen-shelf):
 * - record: square artwork as a sleeve with a vinyl disc half out, which slides further on hover
 *   where motion is allowed;
 * - guide: a photograph mounted on paper like a print.
 * From 64rem, hovering or focusing one item widens it to most of the shelf and leaves a sliver of
 * the others; each item keeps its resting inner width, so the narrowed one is clipped rather than
 * reflowed. The first listening action is a coral pill and the rest outlined pills, with the drawn
 * external arrow. Below the shelf come guest appearances (compact shared cards), then the television
 * strip at full width.
 */
.listen-page {
    --flow-space: clamp(var(--space-6), 5vw, var(--space-7));
}

.listen-shelf {
    display: grid;
    gap: var(--space-6);
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    border-radius: var(--radius-medium);
    background: var(--color-ink);
    color: var(--color-paper);
}

.listen-feature {
    min-inline-size: 0;
}

.listen-feature + .listen-feature {
    padding-block-start: var(--space-6);
    border-block-start: var(--border-hairline) solid var(--color-line-dark);
}

.listen-feature__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5) var(--space-6);
    align-items: start;
}

.listen-feature__art {
    position: relative;
    inline-size: min(100% - 3rem, 9.5rem);
}

.mounted-print {
    padding: var(--space-2);
    background: var(--color-paper);
    outline: var(--border-hairline) solid var(--color-gold);
    outline-offset: calc(-1 * var(--space-1));
    box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(0 0 0 / 70%);
    transform: rotate(-1.5deg);
}

.mounted-print img {
    inline-size: 100%;
}

.listen-feature .mounted-print img {
    aspect-ratio: 1;
    object-fit: cover;
}

.record-sleeve {
    position: relative;
}

.record-sleeve .responsive-media {
    position: relative;
    box-shadow: 0 1rem 2rem -0.75rem rgb(0 0 0 / 80%);
}

.record-sleeve__disc {
    position: absolute;
    inset: 4% -30% 4% 34%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgb(255 255 255 / 18%), transparent 45%),
        repeating-radial-gradient(circle at 50% 50%, #0b070c 0 2px, #2c222d 2px 3px);
    outline: var(--border-hairline) solid var(--color-line-dark);
    box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 50%);
}

.record-sleeve__disc::after {
    position: absolute;
    inset: 36%;
    border-radius: 50%;
    background: var(--color-oxblood) radial-gradient(circle, var(--color-ink) 0 6%, transparent 7%);
    box-shadow: inset 0 0 0 3px var(--color-coral);
    content: "";
}

.listen-feature__copy {
    --flow-space: var(--space-3);
    min-inline-size: 0;
}

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

.listen-feature h2 {
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.9rem);
    line-height: 1.1;
}

.listen-feature h2 a {
    color: inherit;
    text-decoration-thickness: var(--border-hairline);
    text-underline-offset: 0.12em;
}

.listen-feature__summary {
    max-width: 44ch;
    color: var(--color-line-light);
}

.listening-links {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.listening-links__label {
    font-size: var(--type-step--1);
}

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

.listening-links__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-block-size: var(--target-minimum);
    padding: var(--space-2) var(--space-4);
    border: var(--border-strong) solid var(--color-line-dark);
    border-radius: 999px;
    color: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.listening-links__action--primary {
    border-color: var(--color-coral);
    background: var(--color-coral);
    color: var(--color-ink);
}

.listening-links__action:hover {
    border-color: var(--color-coral);
    text-decoration: underline;
}

.listening-links__detail {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    color: inherit;
    font-weight: 700;
    text-underline-offset: 0.2em;
}

.listen-feature .qr-code {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    inline-size: auto;
}

.listen-feature .qr-code .responsive-media {
    padding: var(--space-1);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    outline: var(--border-hairline) solid var(--color-gold);
    outline-offset: 2px;
}

.listen-feature .qr-code__prompt {
    white-space: nowrap;
}

.listen-feature .qr-code__link {
    min-inline-size: 0;
}

.listen-feature .qr-code .responsive-media,
.listen-feature .qr-code img {
    inline-size: 100%;
    block-size: auto;
}

.listen-feature .qr-code__caption {
    max-width: 24ch;
    color: var(--color-line-light);
    font-family: var(--font-display);
    font-size: var(--type-step--1);
    font-style: italic;
    font-weight: 400;
}

.listen-page__row {
    display: grid;
    gap: clamp(var(--space-6), 5vw, var(--space-7));
}

.listen-page__section {
    --flow-space: var(--space-4);
}

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

.listen-page__cards {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 1fr));
}

/* In the Listen row a guest appearance is a compact card: a square picture beside the text. */
.listen-page__cards .editorial-card--illustrated {
    grid-template-columns: 8rem minmax(0, 1fr);
    grid-template-rows: none;
}

.listen-page__cards .editorial-card__media {
    aspect-ratio: auto;
    min-block-size: 100%;
}

.listen-page__cards .editorial-card__body {
    padding: var(--space-4);
}

.listen-page__cards .editorial-card h3 {
    font-size: var(--type-step-1);
}

.watch-strip {
    display: grid;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-5);
    border-radius: var(--radius-medium) var(--radius-large) var(--radius-medium) var(--radius-medium);
    background: var(--color-wine);
    color: var(--color-paper);
}

.watch-strip__thumbs {
    display: flex;
}

.watch-strip__thumbs .responsive-media {
    inline-size: 4.5rem;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 3px solid var(--color-wine);
    border-radius: var(--radius-small);
}

.watch-strip__thumbs .responsive-media + .responsive-media {
    margin-inline-start: -1.25rem;
}

.watch-strip__thumbs img {
    block-size: 100%;
    object-fit: cover;
}

.watch-strip h2 {
    font-size: var(--type-step-1);
}

.watch-strip__action a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: var(--color-coral);
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;
}

.watch-strip__action a:hover {
    text-decoration: underline;
}

@media (min-width: 40rem) {
    .listen-feature__inner {
        grid-template-columns: 12.5rem minmax(0, 1fr);
    }

    .listen-feature__art {
        inline-size: 9.5rem;
    }
}

@media (min-width: 64rem) {
    .listen-shelf {
        display: flex;
        gap: 0;
        overflow: hidden;
    }

    .listen-feature {
        flex: 1 1 0;
        overflow: hidden;
    }

    .listen-feature + .listen-feature {
        padding-block-start: 0;
        padding-inline-start: var(--space-6);
        margin-inline-start: var(--space-6);
        border-block-start: 0;
        border-inline-start: var(--border-hairline) solid var(--color-line-dark);
    }

    /*
     * Each item's content keeps its resting width while the shelf animates, so neither item's text
     * re-wraps and the shelf never changes height: the widened item gains space beside its content,
     * and the narrowed one is clipped. The resting width is the shelf's width (a container) less the
     * dividers, shared between two or three items; any other count falls back to a 30rem minimum.
     */
    .listen-shelf {
        container-type: inline-size;
    }

    .listen-feature__inner {
        min-inline-size: 30rem;
    }

    .listen-shelf:has(> .listen-feature:nth-child(2):last-child) .listen-feature__inner {
        inline-size: calc((100cqi - 4rem) / 2 - 1rem);
        min-inline-size: 0;
    }

    .listen-shelf:has(> .listen-feature:nth-child(3):last-child) .listen-feature__inner {
        inline-size: calc((100cqi - 8rem) / 3 - 1rem);
        min-inline-size: 0;
    }

    .listen-shelf:has(.listen-feature + .listen-feature) .listen-feature:is(:hover, :focus-within) {
        flex-grow: 6;
    }

    .listen-shelf:has(.listen-feature + .listen-feature):has(.listen-feature:is(:hover, :focus-within)) .listen-feature:not(:hover, :focus-within) {
        flex-grow: 0.6;
        opacity: 0.55;
    }

    .watch-strip {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: var(--space-5) var(--space-6);
    }
}

/*
 * Podcast pages open on an ink band like the Listen shelf: a series with a logo is a record sleeve
 * (record-sleeve, the disc slides on hover), an episode's artwork is a mounted print. The title,
 * listening links (components/listening-links) and QR code sit beside it; the description follows,
 * beside the series photograph.
 */
.podcast-page {
    --flow-space: clamp(var(--space-6), 5vw, var(--space-7));
}

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

.podcast-band__art {
    inline-size: min(100% - 4rem, 16rem);
}

.podcast-band__copy {
    --flow-space: var(--space-4);
    min-inline-size: 0;
}

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

.podcast-band h1 {
    font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem);
    line-height: 1.02;
}

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

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

.podcast-band__meta a,
.podcast-band__more a {
    color: var(--color-paper);
}

.podcast-band .qr-code {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    inline-size: auto;
}

.podcast-band .qr-code .responsive-media {
    padding: var(--space-1);
    border-radius: var(--radius-small);
    background: var(--color-paper);
    outline: var(--border-hairline) solid var(--color-gold);
    outline-offset: 2px;
}

.podcast-band .qr-code__prompt {
    background: var(--color-coral);
    color: var(--color-ink);
    white-space: nowrap;
}

.podcast-band .qr-code__caption {
    color: var(--color-line-light);
    font-family: var(--font-display);
    font-size: var(--type-step--1);
    font-style: italic;
    font-weight: 400;
}

.podcast-about {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

.podcast-about__photo .responsive-media {
    overflow: hidden;
    border-radius: var(--radius-medium);
}

.podcast-about__photo img {
    aspect-ratio: 4 / 3;
    inline-size: 100%;
    object-fit: cover;
}

@media (min-width: 48rem) {
    .podcast-band {
        grid-template-columns: 21rem minmax(0, 1fr);
        gap: var(--space-8);
        align-items: center;
    }

    .podcast-band__art {
        inline-size: 16rem;
    }

    .podcast-about--with-photo {
        grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
        gap: var(--space-8);
    }
}

.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);
    }

    /* A QR code pulses three times to show it can be tapped, then rests (WCAG 2.2.2). */
    .qr-code__link .responsive-media {
        animation: qr-pulse 1.6s var(--motion-easing) 0.8s 3;
    }

    .qr-code__link:hover .responsive-media,
    .qr-code__link:focus-visible .responsive-media {
        transform: scale(1.03);
        transition: transform 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;
    }

    /* On the Listen page the podcast's disc slides further out of its sleeve on hover. */
    .record-sleeve__disc {
        transition: transform var(--motion-duration-reveal) var(--motion-easing-reveal);
    }

    :is(.listen-feature, .podcast-band):hover .record-sleeve__disc {
        transform: translateX(14%) rotate(40deg);
    }

    /* The shelf eases slowly and symmetrically (in and out), and waits a moment before moving, so a
       pointer passing across it does not set it off. */
    .listen-feature {
        transition:
            flex-grow 1100ms cubic-bezier(0.45, 0, 0.25, 1) 120ms,
            opacity 900ms cubic-bezier(0.45, 0, 0.25, 1) 120ms;
    }

    .programme-card__media img,
    .editorial-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:hover .programme-card__media img,
    .event-card--illustrated:hover .event-card__media img,
    .editorial-card:hover .editorial-card__media img,
    .place-card:hover > .responsive-media img,
    .television-card:hover .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,
        .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 qr-pulse {
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 0.4rem var(--color-gold);
    }
}

@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;
    }
}