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

/* The page is at least as tall as the window and the main area takes the spare height, so the
   footer sits at the bottom of the window on a short page. */
body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: var(--type-step-0);
    overflow-wrap: anywhere;
}

.site-main {
    flex: 1 0 auto;
}

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

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

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

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

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

/* Hold the picture to the card's frame so the focal point positions the crop; an auto row would grow
   to a portrait photograph's full height and show only its top. */
.programme-card__media .responsive-media,
.editorial-card__media .responsive-media,
.event-card__media .responsive-media {
    grid-template-rows: minmax(0, 1fr);
}


.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-detail__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

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

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

/*
 * The book band can lead with a map instead of the mounted photograph (journeys.top_of_page in the
 * book record): lines from where a few of the book's artists were born to London, drawn one after
 * another, with the book photograph landing on the map once they have all arrived.
 */
.book-band__map {
    inline-size: min(100%, 36rem);
    justify-self: center;
}

.book-band--journeys .route-stage {
    --route-halo: var(--color-wine);
}

.book-band--journeys .route-map__stop circle {
    stroke: var(--color-wine);
}

/* The artists' birthplaces are open rings; London, where the lines arrive, is the filled dot. */
.route-stage--journeys .route-map__stop--origin circle {
    fill: var(--color-wine);
    stroke: var(--color-coral);
    stroke-width: 2;
}

.route-stage--journeys .route-stage__postcard--1 {
    inset-block-end: 2%;
    inset-inline-start: 0;
    inline-size: 42%;
    rotate: -3deg;
}

.route-stage--journeys .route-stage__caption {
    display: none;
}

.book-band .qr-code--button {
    grid-template-columns: none;
}

/*
 * About (/about/): after the introduction and the hung photograph, the milestones line sits beside
 * the specialisms and where Leslie teaches; television and writing follow as credit lists, and three
 * audience comments lead the rest, which wait behind a button.
 */
.about-profile {
    display: grid;
    gap: clamp(var(--space-7), 6vw, var(--space-8));
}

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

.about-glance,
.about-credits {
    display: grid;
    gap: var(--space-7) clamp(var(--space-6), 5vw, var(--space-8));
}

.about-glance__facts {
    display: grid;
    gap: var(--space-6);
    align-content: start;
}

.about-glance__line,
.about-glance__facts section,
.about-credits section,
.about-voices {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.career {
    position: relative;
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0 0 0 2.2rem;
    list-style: none;
}

/* The gold line the milestones hang on. */
.career::before {
    position: absolute;
    inset-block: 0.7rem;
    inset-inline-start: 0.55rem;
    inline-size: 2px;
    background: var(--color-gold);
    content: "";
    transform-origin: top;
}

.career__item {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.15rem var(--space-4);
    align-items: baseline;
}

.career__item::before {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: -2.1rem;
    inline-size: 0.9rem;
    block-size: 0.9rem;
    border: 2px solid var(--color-oxblood);
    border-radius: 50%;
    background: var(--color-oxblood);
    content: "";
}

.career__year {
    color: var(--color-oxblood);
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.career__text {
    display: grid;
    gap: 0.15rem;
}

.career__text strong {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    font-weight: 500;
    line-height: 1.3;
}

.about-list,
.credit-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-list {
    border-block-start: var(--border-hairline) solid var(--color-line-light);
}

.about-list li {
    padding-block: var(--space-2);
    border-block-end: var(--border-hairline) solid var(--color-line-light);
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.35;
}

.about-list small {
    display: block;
    color: #6a5a52;
    font-family: var(--font-ui);
    font-size: var(--type-step--1);
}

.about-lede {
    color: #3d3038;
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.4;
}

.about-note {
    color: #4a3c45;
    font-size: var(--type-step--1);
}

.credit-list li {
    display: grid;
    gap: 0.15rem;
    padding-block: var(--space-3);
    border-block-end: var(--border-hairline) solid var(--color-line-light);
}

.credit-list__title {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.3;
}

.credit-list__meta {
    color: #5c4c56;
    font-size: var(--type-step--1);
}

.book-credit {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
    color: inherit;
    text-decoration: none;
}

.book-credit__cover {
    display: block;
    inline-size: 5.5rem;
    box-shadow: 0 0.6rem 1rem -0.6rem rgb(23 16 25 / 55%);
}

.book-credit__text {
    display: grid;
    gap: 0.2rem;
}

.book-credit__more {
    margin-block-start: var(--space-1);
    font-size: var(--type-step--1);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--color-coral);
    text-underline-offset: 0.2em;
}

.book-credit:hover .credit-list__title {
    color: var(--color-oxblood);
}

.about-voices__featured,
.about-voices__all {
    display: grid;
    gap: var(--space-5);
}

.about-quote {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    margin: 0;
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--color-gold);
}


.about-quote p {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.45;
}

.about-quote cite {
    font-style: normal;
    color: var(--color-oxblood);
    font-size: var(--type-step--1);
    font-weight: 700;
}

.about-voices__more summary {
    display: inline-flex;
    min-block-size: var(--target-minimum);
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border: var(--border-strong) solid var(--color-ink);
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.about-voices__more summary::-webkit-details-marker {
    display: none;
}

.about-voices__more[open] summary {
    margin-block-end: var(--space-5);
}

@media (max-width: 30rem) {
    .career__item {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 56rem) {
    .about-glance {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }

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

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

    .about-voices__all {
        display: block;
        columns: 2;
        column-gap: var(--space-7);
    }

    .about-voices__all .about-quote {
        break-inside: avoid;
        margin-block-end: var(--space-5);
    }
}

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

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

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

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

    .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 strip, 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, with the button
 * hanging above the row so that, where the run ends, it rests inside the run instead of over the
 * section after it. 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(--space-5));
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    block-size: 0;
    pointer-events: none;
}

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

/* Room at the end of the run for the button to rest in, clear of the last card. */
.get-in-touch-run::after {
    display: block;
    block-size: calc(var(--target-minimum) + var(--space-2));
    content: "";
}

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

/*
 * With config/display.json set to "button", the code waits behind an "Open on mobile" button (the
 * same pill as the buying links) and opens in a pop-up. The pill's arrow marks links to other sites,
 * so this button has none.
 */
.qr-code--button {
    inline-size: auto;
}

/* In a card, band or shelf that gives the code a narrow column, the button keeps its own width
   instead (Safari otherwise squeezes the pill to the column and the label runs past its edge). */
:is(.audio-guide-card--with-qr, .book-band, .listen-feature) .qr-code.qr-code--button {
    grid-template-columns: max-content;
    justify-self: start;
}

.qr-code__open {
    justify-self: start;
    inline-size: max-content;
    white-space: nowrap;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.qr-code__open::after {
    content: none;
}

.qr-code__phone {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.qr-code__phone circle {
    fill: currentColor;
    stroke: none;
}

.qr-code__popover {
    inline-size: min(100% - 2rem, 22rem);
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-medium);
    background: var(--color-paper);
    color: var(--color-ink);
    text-align: center;
    box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 60%);
}

.qr-code__popover:popover-open {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
}

.qr-code__popover::backdrop {
    background: rgb(23 16 25 / 70%);
}

.qr-code__popover .responsive-media {
    inline-size: 12rem;
}

.qr-code__popover-title {
    font-family: var(--font-display);
    font-size: var(--type-step-2);
    line-height: 1.1;
}

.qr-code__hint {
    font-size: var(--type-step--1);
}

/* The pop-up is paper wherever its button sits, so its text and picture take the paper treatment. */
.qr-code .qr-code__popover .qr-code__caption {
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-style: normal;
    font-weight: 700;
}

.qr-code .qr-code__popover .responsive-media {
    padding: 0;
    outline: 0;
}

/* A phone or tablet cannot scan its own screen, so touch devices and phone-width screens keep only
   the links beside a code. The width check also covers a phone driven by a pointer (iPhone Mirroring,
   a paired mouse), which no longer reports a coarse pointer. */
@media (hover: none) and (pointer: coarse), (max-width: 47.99rem) {
    .qr-code {
        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;
    }

    /* Side by side, an item is too narrow for artwork beside its text until 90rem, so the artwork
       sits above the text there; the listening pills then keep to one line each. */
    .listen-shelf:has(.listen-feature + .listen-feature) .listen-feature__inner {
        grid-template-columns: minmax(0, 1fr);
    }

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

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

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

/*
 * Trip route map (components/route-map). The journey is drawn on the dark band as an inline SVG:
 * faint coasts and the Alps, a coral line from home to the destination and dotted gold legs for
 * optional extensions. The trip's photograph is pinned to the top right corner; postcards of the
 * destination sit at the bottom left. Without motion the map is shown finished (see Motion).
 */
/* The coasts fade out towards the edges: the base layer strokes with a radial gradient (masks on
   the map break painting in Chrome). */
.route-stage {
    position: relative;
    isolation: isolate;
}

.route-map {
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
}

.route-map__coast,
.route-map__ridge {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.route-map__coast {
    stroke-width: 1.1;
    opacity: 0.8;
}

.route-map__ridge {
    stroke-width: 1;
    opacity: 0.6;
}

.route-map__label {
    stroke: none;
    fill: #9a8290;
    font: italic 400 13px var(--font-display);
    letter-spacing: 0.06em;
}

.route-map__leg {
    fill: none;
    stroke: var(--color-coral);
    stroke-width: 2.6;
    stroke-linecap: round;
}

.route-map__leg--optional {
    stroke: #c9a06a;
    stroke-width: 1.8;
    stroke-dasharray: 2 7;
}

/* The mask that reveals each leg; with pathLength="1" a dash of 1 is the whole leg. */
.route-map__reveal {
    fill: none;
    stroke: #fff;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.route-map__stop circle {
    fill: var(--color-paper);
    stroke: var(--color-ink);
    stroke-width: 2;
}

.route-map__stop--optional circle {
    fill: var(--color-ink);
    stroke: #c9a06a;
    stroke-width: 1.8;
}

/* Stop names and notes keep a halo of the band colour so a coastline never runs through them. */
.route-map__name,
.route-map__note {
    stroke: var(--route-halo, var(--color-ink));
    stroke-width: 4px;
    stroke-linejoin: round;
    paint-order: stroke;
}

.route-map__name {
    fill: var(--color-paper);
    font: 500 19px var(--font-display);
}

.route-map__note {
    fill: #d8c8cf;
    font: 500 12.5px var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.route-map__stop--optional .route-map__name {
    fill: #e6d2b2;
    font-size: 16px;
}

.route-map__stop--optional .route-map__note {
    fill: #c4ae8f;
}

.route-map__traveller {
    fill: var(--color-coral);
}

.route-map__halo {
    opacity: 0.25;
}

.route-stage__portrait,
.route-stage__postcard {
    position: absolute;
    z-index: 2;
    margin: 0;
    background: var(--color-paper);
    box-shadow: 0 1rem 1.8rem -0.8rem rgb(0 0 0 / 70%);
}

.route-stage__portrait {
    inset-block-start: 0;
    inset-inline-end: 1%;
    inline-size: 29%;
    padding: var(--space-2);
    outline: var(--border-hairline) solid var(--color-gold);
    outline-offset: calc(-1 * var(--space-1));
    rotate: 2.5deg;
}

.route-stage__postcard {
    display: grid;
    gap: var(--space-1);
    inline-size: 27%;
    padding: 0.45rem 0.45rem 0.35rem;
}

.route-stage__postcard--1 {
    inset-block-end: 14%;
    inset-inline-start: 1%;
    rotate: -4deg;
}

.route-stage__postcard--2 {
    inset-block-end: 3%;
    inset-inline-start: 30%;
    rotate: 2.5deg;
}

.route-stage__caption {
    margin: 0;
    color: #5c4c56;
    font-size: 0.72rem;
    line-height: 1.3;
}

/* The pinned pictures crop to fixed shapes; the long selectors outrank the showcase band's image rules. */
.route-stage .route-stage__portrait img,
.detail-lead--route .detail-lead__media .route-stage__portrait img {
    inline-size: 100%;
    max-block-size: none;
    aspect-ratio: 3 / 4;
    margin: 0;
    box-shadow: none;
    object-fit: cover;
}

.route-stage .route-stage__postcard img,
.detail-lead--route .detail-lead__media .route-stage__postcard img {
    inline-size: 100%;
    max-block-size: none;
    aspect-ratio: 4 / 3;
    margin: 0;
    box-shadow: none;
    object-fit: cover;
}

@media (max-width: 34rem) {
    .route-map__name {
        font-size: 25px;
    }

    .route-map__note {
        font-size: 16px;
    }

    .route-map__stop--optional .route-map__name {
        font-size: 22px;
    }

    .route-map__label {
        font-size: 17px;
    }

    .route-stage__caption {
        display: none;
    }

    .route-stage__portrait,
    .route-stage__postcard {
        padding: var(--space-1);
    }

    .route-stage__postcard {
        inline-size: 24%;
    }

    .route-stage__postcard--2 {
        inset-inline-start: 25%;
    }
}

/* On the programme page the map takes the place of the mounted photograph; on a phone it follows the introduction. */
.detail-lead--route .detail-lead__media {
    order: 0;
    inline-size: auto;
    max-inline-size: 46rem;
    justify-self: stretch;
    padding: 0 var(--page-gutter) var(--space-7);
}

@media (min-width: 64rem) {
    .detail-lead--route .detail-lead__media {
        justify-self: center;
        inline-size: 100%;
        padding: clamp(var(--space-6), 4vw, var(--space-8)) 0;
    }
}

/* Home page: the next trip, on a wine panel beneath the three "What's on next" cards. */
.home-trip {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    border-radius: var(--radius-large);
    background: var(--color-wine);
    color: var(--color-paper);
    overflow: hidden;
}

.home-trip__copy {
    --flow-space: var(--space-3);
}

.home-trip__eyebrow {
    color: var(--color-coral);
    font-weight: 700;
}

.home-trip h3 {
    font-size: var(--type-step-3);
    line-height: 1.05;
}

.home-trip h3 a {
    color: inherit;
    text-decoration-thickness: var(--border-hairline);
    text-underline-offset: 0.18em;
}

.home-trip__when {
    color: #eadde3;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.home-trip__summary {
    max-inline-size: 38ch;
    color: #eadde3;
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.35;
}

.home-trip__media {
    inline-size: 100%;
    max-inline-size: 34rem;
    justify-self: center;
}

.home-trip__media > .mounted-print {
    max-inline-size: 18rem;
    margin-inline: auto;
}

.home-trip .route-stage {
    --route-halo: var(--color-wine);
}

.home-trip .route-map__stop circle {
    stroke: var(--color-wine);
}

/* Each trip is a panel of its own: the copy beside the map. */
.home-trip__panel {
    display: grid;
    gap: clamp(var(--space-5), 3vw, var(--space-6));
    align-items: center;
}

.home-trip__explore {
    padding-block-start: var(--space-2);
}

@media (min-width: 52rem) {
    .home-trip__panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .home-trip .route-stage__portrait {
        inline-size: 31%;
    }
}

/*
 * With more than one trip the panel lists each trip's start date. The choice is a group of radio
 * buttons kept off screen (they carry the names screen readers announce); the visible date tabs are
 * their labels. Only the chosen trip's panel shows; without :has() support the first trip stays.
 */
.home-trip__choices {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.home-trip__panel + .home-trip__panel {
    display: none;
}

@supports selector(:has(*)) {
    .home-trip:has(#home-trip-2:checked) [data-trip="1"],
    .home-trip:has(#home-trip-3:checked) [data-trip="1"],
    .home-trip:has(#home-trip-4:checked) [data-trip="1"] {
        display: none;
    }

    .home-trip:has(#home-trip-2:checked) [data-trip="2"],
    .home-trip:has(#home-trip-3:checked) [data-trip="3"],
    .home-trip:has(#home-trip-4:checked) [data-trip="4"] {
        display: grid;
    }

    .home-trip:has(#home-trip-1:checked) label[for="home-trip-1"],
    .home-trip:has(#home-trip-2:checked) label[for="home-trip-2"],
    .home-trip:has(#home-trip-3:checked) label[for="home-trip-3"],
    .home-trip:has(#home-trip-4:checked) label[for="home-trip-4"] {
        border-color: var(--color-coral);
        background: rgb(239 167 143 / 12%);
    }

    .home-trip:has(#home-trip-1:focus-visible) [data-trip="1"] label[for="home-trip-1"],
    .home-trip:has(#home-trip-2:focus-visible) [data-trip="2"] label[for="home-trip-2"],
    .home-trip:has(#home-trip-3:focus-visible) [data-trip="3"] label[for="home-trip-3"],
    .home-trip:has(#home-trip-4:focus-visible) [data-trip="4"] label[for="home-trip-4"] {
        outline: var(--border-focus) solid var(--color-coral);
        outline-offset: 3px;
    }
}

@supports not selector(:has(*)) {
    .trip-dates__list {
        display: none;
    }
}

.trip-dates {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hairline) solid var(--color-line-dark);
}

.trip-dates__label {
    color: #cdb9c4;
    font-size: var(--type-step--1);
    font-weight: 500;
}

.trip-dates__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.trip-tab {
    display: grid;
    grid-template-columns: auto 1fr;
    min-inline-size: 11rem;
    border: 1.5px solid var(--color-line-dark);
    border-radius: var(--radius-small);
    color: var(--color-paper);
    cursor: pointer;
    overflow: hidden;
}

.trip-tab:hover {
    border-color: var(--color-coral);
}

.trip-tab__date {
    display: grid;
    place-content: center;
    padding: var(--space-1) var(--space-3);
    border-inline-end: 1.5px dashed var(--color-line-dark);
    background: var(--color-ink);
    line-height: 1;
    text-align: center;
}

.trip-tab__day {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-variant-numeric: tabular-nums;
}

.trip-tab__month {
    color: var(--color-coral);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trip-tab__place {
    align-self: center;
    padding: var(--space-2) var(--space-3);
    line-height: 1.25;
}

.trip-tab__place small {
    display: block;
    color: #cdb9c4;
    font-size: 0.78rem;
}

.trip-dates__all {
    justify-self: start;
    color: var(--color-paper);
    font-size: var(--type-step--1);
    font-weight: 500;
    text-decoration-color: var(--color-coral);
    text-underline-offset: 0.2em;
}

/* Gallery tours (/gallery-tours/): an ink band with the title and the enquiry action beside the
   group photograph, which hangs across the band's lower edge like a picture on a wall. The galleries
   follow on a map of London, the ways to book read as gallery wall labels, and the enquiry form
   closes the page. */
/* Each section sets its own flow space for its children, so the page sets the gaps between them. */
.gallery-tours > * + * {
    margin-block-start: clamp(var(--space-7), 6vw, var(--space-8));
}

.gallery-tours > .gallery-tours__lead + * {
    margin-block-start: clamp(var(--space-7), 7vw, var(--space-9));
}

.gallery-tours__lead {
    display: grid;
    gap: var(--space-7);
    margin-inline: calc(50% - 50vw);
    margin-block-start: calc(-1 * var(--main-top));
    padding: var(--space-7) var(--page-gutter) 0;
    background: linear-gradient(to bottom, var(--color-ink) calc(100% - clamp(3rem, 8vw, 5rem)), transparent 0);
    color: var(--color-paper);
}

.gallery-tours__intro {
    display: grid;
    gap: var(--space-5);
    align-items: end;
}

.gallery-tours__heading {
    --flow-space: var(--space-3);
}

.gallery-tours__eyebrow {
    color: var(--color-coral);
    font-family: var(--font-ui);
    font-size: var(--type-step--1);
    font-weight: 700;
}

.gallery-tours__heading h1 {
    max-inline-size: 10ch;
    font-size: var(--type-step-4);
    line-height: 0.95;
}

.gallery-tours__standfirst {
    --flow-space: var(--space-5);
    max-inline-size: 34rem;
}

.gallery-tours__summary {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.35;
}

.gallery-tours__photo {
    inline-size: min(100%, 32rem);
    justify-self: center;
    rotate: 1.5deg;
    padding: clamp(var(--space-2), 1vw, var(--space-4));
    background: var(--color-paper);
    outline: var(--border-hairline) solid var(--color-gold);
    outline-offset: calc(-1 * clamp(var(--space-1), 0.5vw, var(--space-2)));
    box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 60%);
}

.gallery-tours__photo .responsive-media img {
    aspect-ratio: 4 / 3;
}

.gallery-tours__section {
    --flow-space: var(--space-5);
}

.gallery-tours__options {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-tours__label {
    --flow-space: var(--space-2);
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-5);
    border: var(--border-hairline) solid var(--color-line-light);
    border-radius: var(--radius-small);
    background: var(--color-paper-deep);
    box-shadow: 0 0.5rem 1rem -0.75rem rgb(23 16 25 / 35%);
}

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

.gallery-tours__label .gallery-tours__price {
    padding-block-end: var(--space-3);
    border-block-end: var(--border-hairline) solid var(--color-gold);
    color: var(--color-oxblood);
    font-family: var(--font-display);
    font-size: var(--type-step-2);
    line-height: 1.1;
}

.gallery-tours__note {
    max-inline-size: 40rem;
}

.gallery-tours__ask {
    margin-block-start: auto;
    padding-block-start: var(--space-3);
}

.gallery-tours__enquiry {
    --flow-space: var(--space-4);
    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);
}

.gallery-tours__enquiry h2 {
    font-size: var(--type-step-3);
}

/* The enquiry panel: the invitation beside a short form made for tours. */
.tour-enquiry {
    display: grid;
    gap: var(--space-6) clamp(var(--space-6), 5vw, var(--space-8));
    align-items: start;
    scroll-margin-block-start: var(--space-5);
}

.tour-enquiry__intro {
    --flow-space: var(--space-4);
}

.tour-enquiry__intro p {
    max-inline-size: 30rem;
}

.tour-enquiry__fallback {
    color: #d8c8cf;
    font-size: var(--type-step--1);
}

.tour-enquiry__fallback a {
    color: var(--color-paper);
}

.tour-form {
    max-inline-size: none;
}

.tour-form__choice {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.tour-form__choice legend {
    margin-block-end: var(--space-3);
    padding: 0;
    font-weight: 700;
}

.tour-form__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-3);
}

/* Each tour is a tile; the radio button covers it, so the whole tile is the target. */
.tour-form__options label {
    position: relative;
    display: block;
    font-weight: 400;
    cursor: pointer;
}

.contact-form .tour-form__options input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tour-form__options span {
    display: grid;
    gap: 0.2rem;
    block-size: 100%;
    padding: var(--space-3) var(--space-4);
    border: var(--border-strong) solid var(--color-line-dark);
    border-radius: var(--radius-small);
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.25;
}

.tour-form__options small {
    color: #d8c8cf;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 500;
}

.tour-form__options input:checked + span {
    border-color: var(--color-coral);
    background: rgb(239 167 143 / 14%);
    box-shadow: inset 0 0 0 1px var(--color-coral);
}

.tour-form__options input:focus-visible + span {
    outline: var(--border-focus) solid var(--color-coral);
    outline-offset: 2px;
}

.tour-form__options input[aria-invalid="true"] + span {
    border-color: var(--color-coral);
}

.tour-form__row {
    display: grid;
    gap: var(--space-5);
    align-items: end;
}

.tour-form textarea {
    min-block-size: 7rem;
}

/* The galleries on a map of London (components/london-map), drawn on the paper. */
.tours-map {
    display: grid;
    gap: var(--space-5);
    align-items: center;
}

.london-map {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: hidden;
}

.london-map__park {
    fill: var(--color-paper-deep);
    stroke: var(--color-line-light);
    stroke-width: 1;
}

.london-map__street {
    fill: none;
    stroke: #d3c0a8;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.london-map__river,
.london-map__bank {
    fill: none;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

/* About 250 metres wide at this scale (one unit is roughly 9 metres). */
.london-map__bank {
    stroke: #b9a58f;
    stroke-width: 27;
}

.london-map__river {
    stroke: #e3d2bb;
    stroke-width: 25;
}

.london-map__bridge {
    fill: none;
    stroke: #9c8a78;
    stroke-width: 3.5;
}

.london-map__label,
.london-map__landmark-name,
.london-map__street-name,
.london-map__gallery {
    stroke: var(--color-paper);
    stroke-linejoin: round;
    paint-order: stroke;
}

.london-map__label {
    fill: #8b7a6d;
    font: italic 400 14px var(--font-display);
    letter-spacing: 0.06em;
    stroke-width: 3px;
}

.london-map__label--park {
    font-size: 12px;
}

.london-map__street-name {
    fill: #a08c7a;
    font: 500 10px var(--font-ui);
    letter-spacing: 0.04em;
    stroke-width: 3px;
}

.london-map__mark {
    fill: var(--color-paper);
    stroke: #6a5a52;
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.london-map__detail {
    fill: #6a5a52;
}

.london-map__detail-line {
    fill: none;
    stroke: #6a5a52;
    stroke-width: 1;
    stroke-linecap: round;
}

.london-map__landmark-name {
    fill: #6a5a52;
    font: italic 400 13px var(--font-display);
    stroke-width: 3.5px;
}

.london-map__hull {
    fill: var(--color-ink);
}

.london-map__cabin {
    fill: var(--color-coral);
}

.london-map__wake {
    fill: none;
    stroke: #9c8a78;
    stroke-width: 1;
    stroke-linecap: round;
}

.london-map__pin {
    transform-box: fill-box;
}

.london-map__ring {
    fill: none;
    stroke: var(--color-oxblood);
    stroke-width: 1.5;
    opacity: 0;
}

.london-map__dot {
    fill: var(--color-oxblood);
    stroke: var(--color-paper);
    stroke-width: 2.5;
}

.london-map__gallery {
    fill: var(--color-ink);
    font: 500 16px var(--font-display);
    stroke-width: 4px;
}

.london-map__credit {
    fill: #a08c7a;
    font: 400 9px var(--font-ui);
}

.tours-map__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: var(--border-hairline) solid var(--color-line-light);
}

.tours-map__list li {
    padding: var(--space-3) var(--space-1);
    border-block-end: var(--border-hairline) solid var(--color-line-light);
    font-family: var(--font-display);
    font-size: var(--type-step-1);
}

/* Pointing at a gallery in the list lights its pin. */
.tours-map:has([data-gallery="1"]:hover) .london-map__pin[data-gallery="1"],
.tours-map:has([data-gallery="2"]:hover) .london-map__pin[data-gallery="2"],
.tours-map:has([data-gallery="3"]:hover) .london-map__pin[data-gallery="3"],
.tours-map:has([data-gallery="4"]:hover) .london-map__pin[data-gallery="4"],
.tours-map:has([data-gallery="5"]:hover) .london-map__pin[data-gallery="5"],
.tours-map:has([data-gallery="6"]:hover) .london-map__pin[data-gallery="6"],
.tours-map:has([data-gallery="7"]:hover) .london-map__pin[data-gallery="7"],
.tours-map:has([data-gallery="8"]:hover) .london-map__pin[data-gallery="8"] {
    --pin-lit: 1;
}

.london-map__pin .london-map__ring {
    opacity: var(--pin-lit, 0);
}

.tours-map__list li:hover {
    color: var(--color-oxblood);
}

/* On a phone the map keeps a readable size and scrolls sideways. */
@media (max-width: 47.99rem) {
    .tours-map__stage {
        overflow-x: auto;
        margin-inline: calc(-1 * var(--page-gutter));
        padding-inline: var(--page-gutter);
    }

    .tours-map__stage .london-map {
        inline-size: 46rem;
        max-inline-size: none;
    }
}

/* Visitors who prefer reduced motion see the river without boats. */
@media (prefers-reduced-motion: reduce) {
    .london-map__boats {
        display: none;
    }
}

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.work-page__aside {
    font-size: var(--type-step--1);
}

@media (min-width: 40rem) {
    .tour-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 52rem) {
    /* The photograph sits beside the title; the introduction keeps clear of the paper strip below. */
    .gallery-tours__lead {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        align-items: center;
        column-gap: clamp(var(--space-6), 5vw, var(--space-8));
    }

    .gallery-tours__intro {
        gap: var(--space-5);
        padding-block-end: calc(clamp(3rem, 8vw, 5rem) + var(--space-6));
    }

    .gallery-tours__heading h1 {
        max-inline-size: none;
    }

    .gallery-tours__photo {
        align-self: end;
        justify-self: end;
        margin-block-start: var(--space-4);
    }

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

@media (min-width: 60rem) {
    .tours-map {
        grid-template-columns: minmax(0, 1fr) 17rem;
    }

    .tours-map__list {
        grid-template-columns: 1fr;
    }

    .tour-enquiry {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }
}

/* What's On (6 November 2026): the title beside the Next up ticket, a folded season timeline,
   chips with counts, then the events by course (default) or by date. */
.events-intro {
    display: grid;
    gap: var(--space-6);
    align-items: end;
}

.next-up {
    display: grid;
    gap: var(--space-3);
}

.next-up__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    color: var(--color-oxblood);
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    font-style: italic;
    line-height: 1;
}

.next-up__countdown {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--color-coral);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 700;
}

/* The whole ticket opens the event; the booking and calendar links sit above that link. */
.next-up__ticket {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
    box-shadow: 0 1.2rem 2rem -1.4rem rgb(43 23 38 / 55%);
    transition: box-shadow var(--motion-duration) var(--motion-easing), translate var(--motion-duration) var(--motion-easing);
}

.next-up__ticket:hover {
    translate: 0 -2px;
}

.next-up__ticket:has(.next-up__link:focus-visible),
.event-series:has(.event-series__link:focus-visible),
.event-row:has(.event-row__link:focus-visible) {
    outline: var(--border-strong) solid var(--color-oxblood);
    outline-offset: 3px;
}

.next-up__link:focus-visible,
.event-series__link:focus-visible,
.event-row__link:focus-visible {
    outline: none;
}

.next-up__stub {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.15rem;
    min-inline-size: 6.5rem;
    margin: 0;
    padding: var(--space-5) var(--space-4);
    border-inline-end: var(--border-strong) dashed var(--color-paper-deep);
    background: var(--color-wine);
    color: var(--color-paper);
    line-height: 1;
}

.next-up__weekday,
.next-up__month {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.next-up__month {
    color: var(--color-coral);
}

.next-up__day {
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-variant-numeric: tabular-nums;
}

/* A split-flap date: a column of numbers, from today's to the event's, shows only its last. */
.next-up__flip {
    position: relative;
    display: block;
    block-size: 1em;
    overflow: hidden;
}

.next-up__flip::after {
    position: absolute;
    inset-inline: -0.1em;
    inset-block-start: 50%;
    border-block-start: var(--border-strong) solid var(--color-wine);
    content: "";
}

.next-up__flip-strip {
    display: grid;
    text-align: center;
}

.next-up__flip-strip > span {
    display: block;
    block-size: 1em;
}

.next-up__flip--steps-1 .next-up__flip-strip { --flip-steps: 1; transform: translateY(-1em); }
.next-up__flip--steps-2 .next-up__flip-strip { --flip-steps: 2; transform: translateY(-2em); }
.next-up__flip--steps-3 .next-up__flip-strip { --flip-steps: 3; transform: translateY(-3em); }
.next-up__flip--steps-4 .next-up__flip-strip { --flip-steps: 4; transform: translateY(-4em); }
.next-up__flip--steps-5 .next-up__flip-strip { --flip-steps: 5; transform: translateY(-5em); }
.next-up__flip--steps-6 .next-up__flip-strip { --flip-steps: 6; transform: translateY(-6em); }
.next-up__flip--steps-7 .next-up__flip-strip { --flip-steps: 7; transform: translateY(-7em); }
.next-up__flip--steps-8 .next-up__flip-strip { --flip-steps: 8; transform: translateY(-8em); }
.next-up__flip--steps-9 .next-up__flip-strip { --flip-steps: 9; transform: translateY(-9em); }

.next-up__body {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-5);
}

.next-up__eyebrow,
.event-series__eyebrow,
.event-row__eyebrow {
    margin: 0;
    color: #4a3a44;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.next-up__body h2 {
    margin: 0;
    font-size: var(--type-step-2);
    line-height: 1.05;
}

.next-up__link,
.event-series__link,
.event-row__link {
    color: inherit;
    text-decoration: none;
}

.next-up__link::after,
.event-series__link::after,
.event-row__link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
}

.next-up__ticket:hover .next-up__link,
.event-series:hover .event-series__link,
.event-row:hover .event-row__link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.next-up__meta,
.event-row__when {
    display: grid;
    margin: 0;
    line-height: 1.5;
}

.next-up__actions,
.event-series__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-2) 0 0;
}

.next-up__book,
.event-series__book {
    position: relative;
    z-index: 2;
    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;
}

.next-up__book:hover,
.event-series__book:hover {
    background: #f3b8a4;
}

.event-calendar-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-block-size: var(--target-minimum);
    color: var(--color-oxblood);
    font-size: 0.92rem;
    font-weight: 700;
    text-underline-offset: 0.2em;
}

.event-calendar-link__icon {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.next-up__trip {
    margin: 0;
}

.next-up__trip a {
    color: var(--color-oxblood);
    font-weight: 700;
}

/* The season at a glance: folded into one strip until asked for. */
.season {
    border-radius: var(--radius-medium);
    background: var(--color-wine);
    color: var(--color-paper);
}

.season__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-medium);
    cursor: pointer;
    list-style: none;
}

.season__summary::-webkit-details-marker {
    display: none;
}

.season__summary:focus-visible {
    outline: var(--border-focus) solid var(--color-coral);
    outline-offset: 3px;
}

.season__title {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.season__heading {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.1;
}

.season__sub {
    color: #cdb9c4;
    font-size: 0.9rem;
}

.season__toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.4rem;
    padding: 0 var(--space-4);
    border: 1.5px solid var(--color-line-dark);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
}

.season__toggle::after {
    inline-size: 0.5em;
    block-size: 0.5em;
    border-inline-end: var(--border-strong) solid currentColor;
    border-block-end: var(--border-strong) solid currentColor;
    content: "";
    transform: translateY(-0.15em) rotate(45deg);
}

.season[open] .season__toggle::after {
    transform: translateY(0.1em) rotate(-135deg);
}

.season__summary:hover .season__toggle {
    border-color: var(--color-coral);
    color: var(--color-coral);
}

.season__hide,
.season[open] .season__show {
    display: none;
}

.season[open] .season__hide {
    display: inline;
}

.season__panel {
    display: grid;
    gap: var(--space-4);
    padding: 0 var(--space-5) var(--space-5);
}

.season__key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: var(--space-3) 0 0;
    border-block-start: var(--border-hairline) solid var(--color-line-dark);
    color: #e5d8c6;
    font-size: 0.85rem;
    list-style: none;
}

.season__key li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.season__key-dot {
    inline-size: 0.7rem;
    block-size: 0.7rem;
    border-radius: 50%;
}

.season__key-dot--in-person {
    background: var(--color-gold);
}

.season__key-dot--online {
    background: var(--color-sage);
}

.season__key-span {
    inline-size: 1.6rem;
    block-size: 0.7rem;
    border-radius: 999px;
    background: var(--color-coral);
}

.season__key-today {
    block-size: 0.9rem;
    border-inline-start: 1.5px dashed var(--color-coral);
}

/* The timeline scale is months, each an equal column, so the HTML month labels and the SVG marks share it. */
.season__chart {
    --season-label: 15rem;
    --season-months: 8;
    position: relative;
    display: grid;
    touch-action: pan-y;
}

.season__chart--months-1 { --season-months: 1; }
.season__chart--months-2 { --season-months: 2; }
.season__chart--months-3 { --season-months: 3; }
.season__chart--months-4 { --season-months: 4; }
.season__chart--months-5 { --season-months: 5; }
.season__chart--months-6 { --season-months: 6; }
.season__chart--months-7 { --season-months: 7; }
.season__chart--months-8 { --season-months: 8; }
.season__chart--months-9 { --season-months: 9; }
.season__chart--months-10 { --season-months: 10; }
.season__chart--months-11 { --season-months: 11; }
.season__chart--months-12 { --season-months: 12; }

.season__chart:focus-visible {
    outline: var(--border-focus) solid var(--color-coral);
    outline-offset: 4px;
}

.season__months {
    display: grid;
    grid-template-columns: repeat(var(--season-months), minmax(0, 1fr));
    margin: 0 0 0 var(--season-label);
    padding: 0;
    list-style: none;
}

.season__months a {
    display: block;
    overflow: hidden;
    padding: 0.2rem 0 0.3rem 0.4rem;
    border-inline-start: var(--border-hairline) solid #8a7482;
    color: var(--color-paper);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-overflow: clip;
    text-transform: uppercase;
    white-space: nowrap;
}

.season__months a:hover {
    color: var(--color-coral);
}

.season__weeks {
    display: block;
    inline-size: calc(100% - var(--season-label));
    block-size: 0.4rem;
    margin-inline-start: var(--season-label);
    border-block-start: var(--border-hairline) solid var(--color-line-dark);
    stroke: var(--color-line-dark);
    stroke-width: 1;
}

.season__weeks line,
.season__track line,
.season__overlay line {
    vector-effect: non-scaling-stroke;
}

.season__body {
    position: relative;
}

.season__lanes {
    margin: 0;
    padding: 0.4rem 0 0;
    list-style: none;
}

.season__lane {
    display: grid;
    grid-template-columns: var(--season-label) minmax(0, 1fr);
    align-items: center;
    min-block-size: 1.9rem;
}

.season__name {
    overflow: hidden;
    padding-inline-end: var(--space-3);
    color: #e5d8c6;
    font-size: 0.86rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.season__name:hover,
.season__lane.is-week .season__name {
    color: var(--color-paper);
    text-decoration: underline;
}

.season__track {
    display: block;
    inline-size: 100%;
    block-size: 1.5rem;
    overflow: visible;
}

.season__rule {
    stroke: var(--color-line-dark);
    stroke-dasharray: 1 3;
    stroke-width: 1;
}

/* Each dot is a zero-length line with round caps, so it stays round however the track stretches. */
.season__dot,
.season__span {
    stroke-linecap: round;
    transition: stroke-width var(--motion-duration) var(--motion-easing);
}

.season__dot--in-person {
    stroke: var(--color-gold);
    stroke-width: 11;
}

.season__dot--online {
    stroke: var(--color-sage);
    stroke-width: 11;
}

.season__span {
    stroke: var(--color-coral);
    stroke-width: 11;
}

.season__dot.is-week,
.season__span.is-week {
    stroke-width: 16;
}

.season__overlay {
    position: absolute;
    inset: 0 0 0 var(--season-label);
    inline-size: calc(100% - var(--season-label));
    block-size: 100%;
    pointer-events: none;
}

.season__today {
    stroke: var(--color-coral);
    stroke-dasharray: 4 4;
    stroke-width: 1.5;
}

.season__band {
    fill: rgb(239 167 143 / 14%);
}

.season__week {
    display: grid;
    gap: var(--space-3);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hairline) solid var(--color-line-dark);
}

.season__week[hidden] {
    display: none;
}

.season__week-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin: 0;
}

.season__week-head strong {
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    font-weight: 400;
}

.season__week-head span,
.season__week-empty {
    margin: 0;
    color: #cdb9c4;
    font-size: 0.9rem;
}

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

.season__week-item {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-small);
    background: rgb(243 233 218 / 7%);
    color: var(--color-paper);
    text-decoration: none;
}

.season__week-item:hover {
    background: rgb(243 233 218 / 14%);
}

.season__week-item img {
    inline-size: 3.2rem;
    block-size: 3.2rem;
    border-radius: var(--radius-small);
    object-fit: cover;
}

.season__week-text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

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

.season__week-title {
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 1.02rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.season__week-format {
    color: #b9a5b2;
    font-size: 0.8rem;
}

.season__note {
    max-width: 62rem;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-inline-start: 3px solid var(--color-coral);
    border-radius: var(--radius-small);
    background: rgb(243 233 218 / 7%);
    color: #e5d8c6;
    font-size: 0.88rem;
    line-height: 1.5;
}

.season__note strong {
    color: var(--color-coral);
}

.season__hint {
    margin: 0;
    color: #b9a5b2;
    font-size: 0.82rem;
}

/* Phones: each course name sits on its own line above a full-width track, and months show without years. */
@media (max-width: 40rem) {
    .season__summary,
    .season__panel {
        padding-inline: var(--space-4);
    }

    .season__sub {
        display: none;
    }

    .season__chart {
        --season-label: 0rem;
    }

    .season__lane {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 0.15rem;
    }

    .season__name {
        font-size: 0.8rem;
    }

    .season__track {
        block-size: 1.1rem;
    }

    .season__months a {
        padding-inline-start: 0.2rem;
        font-size: 0.66rem;
        letter-spacing: 0.04em;
    }

    .season__year {
        display: none;
    }

    .season__dot--in-person,
    .season__dot--online,
    .season__span {
        stroke-width: 8;
    }

    .season__dot.is-week,
    .season__span.is-week {
        stroke-width: 12;
    }
}

/* The season panel, chips, filters, count and results read as one block of controls, so they sit
   closer together than the page's sections. */
.events-page > .season {
    margin-block-start: var(--space-6);
}

.events-page > .event-listing {
    display: grid;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
}

/* Chips: quick ways into the list, each with the number of events it holds. */
.event-chips ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--target-minimum);
    padding: 0 var(--space-4);
    border: 1.5px solid var(--color-line-light);
    border-radius: 999px;
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;
}

.event-chip:hover {
    border-color: var(--color-ink);
}

.event-chip__count {
    min-inline-size: 1.6rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--color-paper-deep);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.event-chip[aria-current="page"] {
    border-color: var(--color-wine);
    background: var(--color-wine);
    color: var(--color-paper);
}

.event-chip[aria-current="page"] .event-chip__count {
    background: var(--color-coral);
    color: var(--color-ink);
}

/* By course or by date: two radio buttons, no script. */
.event-results {
    display: grid;
    gap: var(--space-6);
}

.event-results__bar {
    display: flex;
    justify-content: flex-end;
}

.event-view-switch {
    display: inline-flex;
    margin: 0;
    padding: 0.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-paper-deep);
}

.event-view-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.event-view-switch label {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.4rem;
    padding: 0 var(--space-4);
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.event-view-switch input:checked + label {
    background: var(--color-paper);
    box-shadow: 0 0.2rem 0.5rem -0.2rem rgb(43 23 38 / 40%);
}

.event-view-switch input:focus-visible + label {
    outline: var(--border-focus) solid var(--color-oxblood);
    outline-offset: 2px;
}

.event-results:has(#event-view-course:checked) .event-view--date,
.event-results:has(#event-view-date:checked) .event-view--course {
    display: none;
}

/* Without :has() the switch cannot work, so the complete date view shows alone. */
@supports not selector(:has(*)) {
    .event-results__bar,
    .event-view--course {
        display: none;
    }
}

.event-view--course {
    display: grid;
    gap: var(--space-7);
}

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

.event-group__title {
    margin: 0;
    padding-block-end: var(--space-2);
    border-block-end: var(--border-strong) solid var(--color-ink);
    font-size: var(--type-step-2);
    line-height: 1;
}

.event-group__title span {
    color: var(--color-oxblood);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    vertical-align: middle;
}

.event-series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-6) var(--space-5);
}

.event-series {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
    transition: box-shadow var(--motion-duration) var(--motion-easing), translate var(--motion-duration) var(--motion-easing);
}

.event-series:hover {
    box-shadow: 0 1.2rem 2rem -1.4rem rgb(43 23 38 / 55%);
    translate: 0 -2px;
}

.event-series__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--color-wine);
}

.event-series__media .responsive-media,
.event-series__media picture,
.event-series__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.event-series__media img {
    object-fit: cover;
    transform-origin: 50% 35%;
}

.event-series__flag {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-end: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0.35rem 0.35rem 0.35rem var(--space-3);
    border-radius: var(--radius-small);
    background: var(--color-wine);
    color: #e5d8c6;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 0.6rem 1rem -0.6rem rgb(23 16 25 / 70%);
}

.event-series__flag-date {
    padding: 0.15rem 0.5rem;
    border-radius: 0.15rem;
    background: var(--color-paper);
    color: var(--color-ink);
}

.event-series__flag-date span {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0;
}

.event-series__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
}

.event-series h4 {
    margin: 0;
    font-size: var(--type-step-1);
    line-height: 1.15;
    text-wrap: balance;
}

.event-series__meta,
.event-series__range {
    margin: 0;
    line-height: 1.5;
}

.event-series__range {
    color: var(--color-oxblood);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-style: italic;
}

.event-series__sessions {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: start;
    gap: var(--space-2);
}

.event-series__count {
    margin: 0;
    color: var(--color-oxblood);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-series__dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-series__dates a {
    display: block;
    border-radius: var(--radius-small);
    text-decoration: none;
}

.event-date-stub {
    display: grid;
    justify-items: center;
    inline-size: 2.9rem;
    padding: 0.3rem 0 0.35rem;
    border-radius: var(--radius-small);
    background: var(--color-wine);
    color: var(--color-paper);
    line-height: 1;
    transition: background var(--motion-duration) var(--motion-easing);
}

.event-series__dates a:hover .event-date-stub {
    background: var(--color-oxblood);
}

.event-date-stub__weekday,
.event-date-stub__month {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-date-stub__weekday {
    color: #b9a5b2;
}

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

.event-date-stub__day {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.event-series__more summary {
    inline-size: fit-content;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.event-series__more[open] summary {
    margin-block-end: var(--space-2);
}

.event-series__foot {
    flex-direction: column;
    align-items: flex-start;
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hairline) solid var(--color-line-light);
}

/* Trip pictures are portraits of Leslie; each picture's recorded focal point keeps his face in the crop. */
.event-series--trip .event-series__media {
    aspect-ratio: 4 / 3;
}

/* A small arc from London to the destination, drawn like the trip page maps. */
.event-route-sketch {
    display: block;
    inline-size: 100%;
    max-inline-size: 20rem;
    block-size: auto;
    overflow: visible;
}

.event-route-sketch__arc {
    fill: none;
    stroke: var(--color-oxblood);
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-width: 2;
}

.event-route-sketch__from {
    fill: var(--color-wine);
}

.event-route-sketch__to {
    fill: var(--color-coral);
    stroke: var(--color-wine);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
}

.event-route-sketch text {
    fill: var(--color-ink);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
}

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

    .event-series--trip {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .event-series--trip .event-series__media {
        aspect-ratio: auto;
        min-block-size: 17rem;
    }

}

/* Course cards share their row's tracks, so titles, times, dates and buttons sit level. */
@supports (grid-template-rows: subgrid) {
    .event-series-grid:not(.event-series-grid--trips) .event-series {
        grid-row: span 6;
        grid-template-rows: subgrid;
        row-gap: 0;
    }

    .event-series-grid:not(.event-series-grid--trips) .event-series__body {
        display: contents;
    }

    .event-series-grid:not(.event-series-grid--trips) .event-series__body > * {
        padding-inline: var(--space-5);
    }

    .event-series-grid:not(.event-series-grid--trips) .event-series__eyebrow {
        padding-block-start: var(--space-5);
    }

    .event-series-grid:not(.event-series-grid--trips) .event-series h4 {
        padding-block-start: var(--space-2);
    }

    .event-series-grid:not(.event-series-grid--trips) .event-series__meta,
    .event-series-grid:not(.event-series-grid--trips) .event-series__sessions {
        padding-block-start: var(--space-3);
    }

    .event-series-grid:not(.event-series-grid--trips) .event-series__foot {
        align-self: end;
        margin: var(--space-4) var(--space-5) var(--space-5);
        padding-inline: 0;
    }
}

@media (min-width: 64rem) {
    .events-intro {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .event-series-grid:not(.event-series-grid--trips) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* By date: a diary of months. Fixed side columns keep times and booking links level on every row. */
.event-view--date {
    display: grid;
    gap: var(--space-7);
}

.event-month {
    display: grid;
    gap: var(--space-4);
    scroll-margin-block-start: var(--space-5);
}

.event-month__name {
    align-self: start;
    margin: 0;
    font-size: var(--type-step-2);
    line-height: 1;
}

.event-month__year {
    display: block;
    margin-block-start: 0.2rem;
    color: #4a3a44;
    font-family: var(--font-ui);
    font-size: 1rem;
}

.event-month__count {
    display: block;
    margin-block-start: var(--space-3);
    color: var(--color-oxblood);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-month__rows {
    position: relative;
    margin: 0;
    padding: 0;
    border-block-start: var(--border-strong) solid var(--color-ink);
    list-style: none;
}

.event-row {
    position: relative;
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0;
    border-block-end: var(--border-hairline) solid var(--color-line-light);
    transition: background var(--motion-duration) var(--motion-easing);
}

.event-row:hover {
    background: rgb(234 220 200 / 60%);
}

.event-row__stub {
    display: grid;
    grid-row: span 3;
    align-self: start;
    justify-items: center;
    inline-size: 3.6rem;
    padding: 0.45rem 0;
    border-radius: var(--radius-small);
    background: var(--color-wine);
    color: var(--color-paper);
    line-height: 1;
}

.event-row__stub__weekday,
.event-row__stub__month {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.event-row__stub__day {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.event-row__media {
    display: none;
}

.event-row__main {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.event-row h4 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
}

.event-row__soon {
    margin-inline-start: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--color-coral);
    color: var(--color-ink);
    letter-spacing: 0.04em;
}

.event-row__when {
    font-size: 0.92rem;
}

.event-row__when span {
    color: #4a3a44;
}

.event-row__when .event-row__note {
    margin-block-start: 0.15rem;
    color: var(--color-oxblood);
    font-size: 0.82rem;
}

.event-row__book {
    position: relative;
    z-index: 2;
    justify-self: start;
    color: var(--color-oxblood);
    font-size: 0.92rem;
    font-weight: 700;
    text-underline-offset: 0.2em;
}

@media (min-width: 60rem) {
    .event-row {
        grid-template-columns: 3.6rem 4.5rem minmax(0, 1fr) 12.5rem 16rem;
    }

    .event-row__stub {
        grid-row: auto;
    }

    .event-row__media {
        display: block;
    }

    .event-row__media picture,
    .event-row__media img {
        display: block;
        inline-size: 4.5rem;
        block-size: 4.5rem;
        border-radius: var(--radius-small);
        object-fit: cover;
    }

    .event-row__book {
        justify-self: end;
        text-align: end;
    }
}

@media (min-width: 80rem) {
    .event-month {
        grid-template-columns: 13rem minmax(0, 1fr);
        gap: var(--space-6);
    }

    .event-month__name {
        position: sticky;
        inset-block-start: var(--space-5);
    }

    /* A gold line runs down the diary, with a dot for each event. */
    .event-month__rows::before {
        position: absolute;
        inset-block: 0;
        inset-inline-start: -1.1rem;
        inline-size: 2px;
        background: var(--color-gold);
        content: "";
        transform-origin: top;
    }

    .event-row::before {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: calc(-1.1rem - 4px);
        inline-size: 10px;
        block-size: 10px;
        margin-block-start: -5px;
        border-radius: 50%;
        background: var(--color-gold);
        box-shadow: 0 0 0 3px var(--color-paper);
        content: "";
    }
}

/* Seasonal snow in the header and footer (display setting, December to Twelfth Night). The flakes
   fall only when motion is welcome (see the reduced-motion block); these rules keep the header
   content above them. The header takes the same stacking level as the compact navigation. */
.site-snow .site-header {
    position: relative;
    z-index: 20;
}

.site-snow .site-footer {
    position: relative;
}

.site-snow .site-header__inner,
.site-snow .site-footer__inner {
    position: relative;
    z-index: 1;
}

/*
 * Work with Leslie: a square portrait in the hung lead, one card per kind of work, a strip of recent
 * television whose whole cards link to each appearance, and the enquiry desk. The desk asks what
 * the visitor is planning: with the form on, the choices are the form's own enquiry-type radios and
 * the line for the checked choice shows beside them (no script); with the form off, they are links
 * that reload the page with that choice, followed by what to include and the email link.
 */
.work-page .detail-lead--hung .detail-lead__media img {
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 22%;
}

.work-page .detail-lead--hung .responsive-media {
    max-inline-size: 16rem;
}

.work-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.work-offers {
    display: grid;
    gap: var(--space-4);
}

.work-offer {
    --flow-space: var(--space-3);
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
}

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

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

.work-offer--lead {
    background: var(--color-wine);
    color: var(--color-paper);
}

.work-offer--lead .work-offer__eyebrow,
.work-offer--lead a {
    color: var(--color-coral);
}

.work-offer__price strong {
    font-family: var(--font-display);
    font-size: var(--type-step-2);
    font-weight: 400;
    line-height: 1;
}

.work-offer__list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding-inline-start: var(--space-5);
}

.work-offer__actions {
    margin-block-start: auto;
    padding-block-start: var(--space-2);
}

.work-offer__action {
    font-weight: 700;
}

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

.work-credits__head a {
    font-weight: 700;
}

.work-credits__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.credit-card {
    --flow-space: var(--space-2);
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-2);
    border-radius: var(--radius-small);
}

.credit-card .responsive-media {
    overflow: hidden;
    border-radius: var(--radius-small);
}

.credit-card img {
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

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

.credit-card p {
    font-size: var(--type-step--1);
}

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

.credit-card__link::after {
    position: absolute;
    inset: 0;
    content: "";
}

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

.credit-card:has(.credit-card__link:focus-visible) {
    outline: var(--border-strong) solid var(--color-oxblood);
    outline-offset: var(--space-2);
}

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

.work-desk {
    max-width: none;
}

.work-desk__choices {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.work-desk__choices legend {
    padding: 0;
    font-weight: 700;
}

.work-desk__options,
.work-desk__links ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.work-desk__choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0 var(--space-3);
    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);
    color: var(--color-paper);
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

.contact-form .work-desk__choice input {
    grid-row: span 2;
    inline-size: 1.15rem;
    min-block-size: 0;
    block-size: 1.15rem;
    margin: 0;
    padding: 0;
    accent-color: var(--color-coral);
}

.work-desk__links .work-desk__choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.work-desk__label {
    font-weight: 700;
}

.work-desk__hint {
    grid-column: -2;
    font-size: var(--type-step--1);
}

.work-desk__choice:hover,
.work-desk__choice:has(input:checked),
.work-desk__choice[aria-current="true"] {
    border-color: var(--color-coral);
}

.work-desk__choice:has(input:checked),
.work-desk__choice[aria-current="true"] {
    background: rgb(239 167 143 / 14%);
}

.work-desk__choice:has(input:focus-visible) {
    outline: var(--border-focus) solid var(--color-coral);
    outline-offset: 2px;
}

.work-desk__summary {
    display: none;
}

.work-desk__summary,
.work-desk__chosen {
    padding: var(--space-4);
    border-inline-start: var(--border-focus) solid var(--color-coral);
    font-family: var(--font-display);
    font-size: var(--type-step-1);
    line-height: 1.35;
}

.work-desk:has(input[value="lecture"]:checked) .work-desk__summary--lecture,
.work-desk:has(input[value="course"]:checked) .work-desk__summary--course,
.work-desk:has(input[value="gallery_visit"]:checked) .work-desk__summary--gallery-visit,
.work-desk:has(input[value="media"]:checked) .work-desk__summary--media,
.work-desk:has(input[value="book"]:checked) .work-desk__summary--book,
.work-desk:has(input[value="other"]:checked) .work-desk__summary--other {
    display: block;
}

/* The guide keeps the panel's flow spacing above it, and a hairline marks it off from the choices. */
.work-desk__guide {
    display: grid;
    gap: var(--space-4) var(--space-5);
    margin-inline: 0;
    margin-block-end: 0;
    padding-block-start: var(--space-5);
    border-block-start: var(--border-hairline) solid var(--color-line-dark);
}

.work-desk__guide div {
    display: grid;
    align-content: start;
    gap: var(--space-1);
}

.work-desk__guide dt {
    font-weight: 700;
}

.work-desk__guide dd {
    margin: 0;
}

@media (min-width: 40rem) {
    .work-offers,
    .work-desk__options,
    .work-desk__links ul,
    .work-desk__guide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-offer--lead {
        grid-column: 1 / -1;
    }

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

@media (min-width: 64rem) {
    .work-page .detail-lead--hung {
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
    }

    .work-page .detail-lead--hung .detail-lead__media {
        padding-block: var(--space-6);
    }

    .work-offer--lead {
        grid-column: auto;
    }

    .work-desk__options,
    .work-desk__links ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .work-desk__guide {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .work-credits__list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 63.99rem) {
    .work-page .detail-lead--hung .detail-lead__media {
        order: -1;
        justify-self: start;
        inline-size: 13rem;
        padding: var(--space-4) 0 var(--space-4) var(--space-3);
    }

    .work-page .detail-lead--hung .responsive-media {
        max-inline-size: 11rem;
    }
}

/* What's On filters: chips, one search box and a month strip, or (with "Simple filters" on) a
   plain form of labelled fields. Applied filters sit below as removable tokens. */
.event-refine {
    display: grid;
    gap: var(--space-4);
}

.event-refine [hidden] {
    display: none !important;
}

.event-refine__error {
    padding: var(--space-3) var(--space-4);
    border-inline-start: var(--space-2) solid var(--color-oxblood);
    background: var(--color-paper-deep);
    font-weight: 700;
}

.event-refine__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
}

.event-refine__mode {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--target-minimum);
    margin-inline-start: auto;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--color-ink);
    font: 700 var(--type-step--1) var(--font-ui);
    cursor: pointer;
}

.event-refine__mode:hover {
    background: var(--color-paper-deep);
}

.event-refine__switch {
    position: relative;
    inline-size: 2.6rem;
    block-size: 1.5rem;
    border: 1.5px solid var(--color-ink);
    border-radius: 999px;
    background: var(--color-paper);
}

.event-refine__switch::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.2rem;
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: 50%;
    background: var(--color-ink);
    transform: translateY(-50%);
}

.event-refine__mode[aria-checked="true"] .event-refine__switch {
    border-color: var(--color-wine);
    background: var(--color-wine);
}

.event-refine__mode[aria-checked="true"] .event-refine__switch::after {
    inset-inline-start: 1.25rem;
    background: var(--color-coral);
}

/* On a phone, with script, the search and months fold behind this bar (closed unless a search or
   month is in use). Open, the bar joins the panel below it. */
.event-refine__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    inline-size: 100%;
    min-block-size: var(--target-minimum);
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
    color: var(--color-ink);
    font: inherit;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

.event-refine__more::after {
    flex: none;
    inline-size: 0.5em;
    block-size: 0.5em;
    border-inline-end: var(--border-strong) solid currentColor;
    border-block-end: var(--border-strong) solid currentColor;
    content: "";
    transform: translateY(-0.15em) rotate(45deg);
}

.event-refine__more[aria-expanded="true"] {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.event-refine__more[aria-expanded="true"]::after {
    transform: translateY(0.1em) rotate(-135deg);
}

.event-refine__more:hover {
    color: var(--color-oxblood);
}

.event-refine__more:focus-visible {
    outline: var(--border-focus) solid var(--color-coral);
    outline-offset: 3px;
}

.event-refine__more[aria-expanded="true"]:not([hidden]) + .event-refine__panel {
    margin-block-start: calc(-1 * var(--space-4));
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.event-refine__panel {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-medium);
    background: var(--color-paper-deep);
}

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

.event-refine__search {
    display: flex;
    align-items: center;
    min-block-size: 3rem;
    padding-inline: var(--space-4) var(--space-1);
    border: 1.5px solid var(--color-line-light);
    border-radius: 999px;
    background: var(--color-paper);
}

.event-refine__search:focus-within {
    border-color: var(--color-ink);
    box-shadow: var(--focus-ring);
}

.event-refine__search-field {
    flex: 1;
    min-inline-size: 0;
}

.event-refine__search-field input {
    inline-size: 100%;
    min-block-size: var(--target-minimum);
    border: 0;
    background: none;
    color: var(--color-ink);
    font: inherit;
    outline: none;
}

.event-refine__search-button {
    display: grid;
    place-items: center;
    inline-size: var(--target-minimum);
    block-size: var(--target-minimum);
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-ink);
    cursor: pointer;
}

.event-refine__search-button:hover {
    background: var(--color-paper-deep);
}

.event-refine__search-button svg {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.event-refine__label {
    margin: 0 0 var(--space-2);
    font-size: var(--type-step--1);
    font-weight: 700;
}

.event-refine__months ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-refine__month {
    --fill: 0%;
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    padding: var(--space-2) var(--space-1);
    border: 1.5px solid var(--color-line-light);
    border-radius: 0.6rem;
    background: var(--color-paper);
    color: var(--color-ink);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
}

a.event-refine__month:hover {
    border-color: var(--color-ink);
}

.event-refine__month-count {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--color-line-dark);
}

.event-refine__month::after {
    content: "";
    inline-size: 70%;
    block-size: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--color-gold) var(--fill), var(--color-line-light) var(--fill));
}

.event-refine__month--fill-10 { --fill: 10%; }
.event-refine__month--fill-20 { --fill: 20%; }
.event-refine__month--fill-30 { --fill: 30%; }
.event-refine__month--fill-40 { --fill: 40%; }
.event-refine__month--fill-50 { --fill: 50%; }
.event-refine__month--fill-60 { --fill: 60%; }
.event-refine__month--fill-70 { --fill: 70%; }
.event-refine__month--fill-80 { --fill: 80%; }
.event-refine__month--fill-90 { --fill: 90%; }
.event-refine__month--fill-100 { --fill: 100%; }

.event-refine__month[aria-current="true"] {
    border-color: var(--color-wine);
    background: var(--color-wine);
    color: var(--color-paper);
}

.event-refine__month[aria-current="true"] .event-refine__month-count {
    color: var(--color-paper-deep);
}

.event-refine__month[aria-current="true"]::after {
    background: linear-gradient(to right, var(--color-coral) var(--fill), var(--color-line-dark) var(--fill));
}

.event-refine__month--empty {
    opacity: 0.5;
}

.event-refine__simple {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: end;
}

.event-refine__field {
    display: grid;
    gap: var(--space-2);
    min-inline-size: 0;
    font-weight: 700;
}

.event-refine__field :is(input, select) {
    inline-size: 100%;
    min-block-size: var(--target-minimum);
    padding: var(--space-2) var(--space-3);
    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: 400;
}

.event-refine__hint {
    font-size: var(--type-step--1);
    font-weight: 400;
    color: var(--color-line-dark);
}

.event-refine__submit {
    justify-self: start;
    min-block-size: var(--target-minimum);
    padding-inline: var(--space-5);
    border: var(--border-strong) solid var(--color-ink);
    border-radius: 999px;
    background: var(--color-coral);
    color: var(--color-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

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

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

.event-refine__token {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-inline-start: var(--space-3);
    border: 1px solid var(--color-line-light);
    border-radius: 999px;
    font-size: var(--type-step--1);
    font-weight: 700;
}

.event-refine__token a {
    display: grid;
    place-items: center;
    inline-size: var(--target-minimum);
    block-size: 2.25rem;
    border-radius: 999px;
    color: var(--color-ink);
    text-decoration: none;
}

.event-refine__token a:hover {
    background: var(--color-paper-deep);
}

.event-refine__clear {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--target-minimum);
    padding-inline: var(--space-4);
    border: var(--border-strong) solid var(--color-oxblood);
    border-radius: 999px;
    background: var(--color-paper);
    color: var(--color-oxblood);
    font-size: var(--type-step--1);
    font-weight: 700;
    text-decoration: none;
}

.event-refine__clear:hover {
    background: var(--color-oxblood);
    color: var(--color-paper);
}

.event-refine__clear-icon {
    inline-size: 0.8rem;
    block-size: 0.8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.event-refine__tokens + .event-refine__clear {
    margin-inline-start: var(--space-2);
}

.events-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-5);
    border: 1.5px dashed var(--color-line-light);
    border-radius: var(--radius-medium);
}

.events-empty p {
    max-inline-size: var(--measure-prose);
    font-weight: 700;
}

/* After the last entry: a way out when the list has not helped. */
.event-listing__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-block-start: var(--space-6);
    padding: var(--space-5) clamp(var(--space-5), 3vw, var(--space-6));
    border-radius: var(--radius-medium);
    background: var(--color-wine);
    color: var(--color-paper);
}

.event-listing__footer h2 {
    margin-block-end: var(--space-1);
    color: var(--color-paper);
    font-size: var(--type-step-1);
}

.event-listing__footer div > p {
    max-inline-size: 52ch;
    color: var(--color-paper-deep);
}

.event-listing__footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.event-listing__footer .event-refine__clear {
    border-color: var(--color-paper);
    background: none;
    color: var(--color-paper);
}

.event-listing__footer .event-refine__clear:hover {
    background: var(--color-paper);
    color: var(--color-wine);
}

.event-listing__enquire {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-minimum);
    padding-inline: var(--space-5);
    border-radius: 999px;
    background: var(--color-coral);
    color: var(--color-ink);
    font-size: var(--type-step--1);
    font-weight: 700;
    text-decoration: none;
}

.event-listing__enquire:hover {
    background: var(--color-paper);
}

.event-listing__footer :is(a, button):focus-visible {
    box-shadow: 0 0 0 3px var(--color-wine), 0 0 0 6px var(--color-coral);
}

@media (min-width: 48rem) {
    .event-refine__simple {
        grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(8rem, 1fr)) auto;
    }

    .event-refine__simple {
        align-items: start;
    }

    .event-refine__submit {
        margin-block-start: calc(1lh + var(--space-2));
    }

    .event-refine__months ul {
        grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
    }
}

@media (max-width: 39.99rem) {
    .event-refine__panel {
        padding: var(--space-4);
    }

    .event-refine__months ul {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .event-refine__tokens + .event-refine__clear {
        margin-inline-start: 0;
    }
}

/*
 * 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-refine,
    .programme-filters,
    .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,
    .credit-card 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,
    .credit-card:hover img {
        transform: scale(1.04);
    }

    /* What's On filters: the switch slides, and swapped-in results rise into place. */
    .event-refine__switch::after {
        transition: inset-inline-start var(--motion-duration) var(--motion-easing), background-color var(--motion-duration) var(--motion-easing);
    }

    .event-listing.is-refreshing {
        opacity: 0.45;
        transition: opacity 120ms ease-out;
    }

    .event-listing.is-refreshed :is(.event-series, .event-row) {
        animation: 320ms var(--motion-easing-reveal) both rise-in;
    }

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

    /*
     * Route map motion: the line draws one leg every 1.4 seconds after a 0.4 second pause (the
     * RouteMapModel timings), each stop appears as the line reaches it, the dot follows the tip of the
     * line and leaves when it stops, and the postcards land when the line reaches the destination.
     */
    .route-map--animated .route-map__reveal {
        animation: route-draw 1.4s cubic-bezier(0.42, 0, 0.58, 1) both;
    }

    .route-map--animated .route-map__reveal--step-1 { animation-delay: 0.4s; }
    .route-map--animated .route-map__reveal--step-2 { animation-delay: 1.8s; }
    .route-map--animated .route-map__reveal--step-3 { animation-delay: 3.2s; }
    .route-map--animated .route-map__reveal--step-4 { animation-delay: 4.6s; }

    .route-map--animated .route-map__stop {
        animation: route-arrive 500ms ease-out both;
    }

    .route-map--animated .route-map__stop--step-0 { animation: none; }
    .route-map--animated .route-map__stop--step-1 { animation-delay: 1.8s; }
    .route-map--animated .route-map__stop--step-2 { animation-delay: 3.2s; }
    .route-map--animated .route-map__stop--step-3 { animation-delay: 4.6s; }
    .route-map--animated .route-map__stop--step-4 { animation-delay: 6s; }

    .route-map--animated .route-map__traveller {
        animation:
            route-arrive 1ms linear 0.4s both,
            route-leave 400ms ease-out 1.8s forwards;
    }

    .route-map--legs-2 .route-map__traveller { animation-delay: 0.4s, 3.2s; }
    .route-map--legs-3 .route-map__traveller { animation-delay: 0.4s, 4.6s; }
    .route-map--legs-4 .route-map__traveller { animation-delay: 0.4s, 6s; }

    /* On a journeys map each birthplace appears just before its line sets off for London. */
    .route-map--journeys.route-map--animated .route-map__stop--step-1 { animation-delay: 0.2s; }
    .route-map--journeys.route-map--animated .route-map__stop--step-2 { animation-delay: 1.6s; }
    .route-map--journeys.route-map--animated .route-map__stop--step-3 { animation-delay: 3s; }
    .route-map--journeys.route-map--animated .route-map__stop--step-4 { animation-delay: 4.4s; }

    .route-stage--animated .route-stage__postcard {
        animation: route-postcard var(--motion-duration-reveal) var(--motion-easing-reveal) both;
    }

    .route-stage--arrive-1 .route-stage__postcard--1 { animation-delay: 1.95s; }
    .route-stage--arrive-1 .route-stage__postcard--2 { animation-delay: 2.17s; }
    .route-stage--arrive-2 .route-stage__postcard--1 { animation-delay: 3.35s; }
    .route-stage--arrive-2 .route-stage__postcard--2 { animation-delay: 3.57s; }
    .route-stage--arrive-3 .route-stage__postcard--1 { animation-delay: 4.75s; }
    .route-stage--arrive-3 .route-stage__postcard--2 { animation-delay: 4.97s; }
    .route-stage--arrive-4 .route-stage__postcard--1 { animation-delay: 6.15s; }
    .route-stage--arrive-4 .route-stage__postcard--2 { animation-delay: 6.37s; }

    .home-trip--count-2 .route-map__reveal,
    .home-trip--count-3 .route-map__reveal,
    .home-trip--count-4 .route-map__reveal {
        animation: route-draw 1.4s cubic-bezier(0.42, 0, 0.58, 1) both;
    }

    .home-trip .route-map__reveal--step-1 { animation-delay: 0.2s; }
    .home-trip .route-map__reveal--step-2 { animation-delay: 1.6s; }
    .home-trip .route-map__reveal--step-3 { animation-delay: 3s; }
    .home-trip .route-map__reveal--step-4 { animation-delay: 4.4s; }

    .home-trip--count-2 .route-map__stop:not(.route-map__stop--step-0),
    .home-trip--count-3 .route-map__stop:not(.route-map__stop--step-0),
    .home-trip--count-4 .route-map__stop:not(.route-map__stop--step-0) {
        animation: route-arrive 500ms ease-out both;
    }

    .home-trip .route-map__stop--step-1 { animation-delay: 1.6s; }
    .home-trip .route-map__stop--step-2 { animation-delay: 3s; }
    .home-trip .route-map__stop--step-3 { animation-delay: 4.4s; }
    .home-trip .route-map__stop--step-4 { animation-delay: 5.8s; }

    .home-trip__panel + .home-trip__panel .home-trip__copy > :not(.trip-dates),
    .home-trip--count-2 .route-stage__portrait,
    .home-trip--count-3 .route-stage__portrait,
    .home-trip--count-4 .route-stage__portrait {
        animation: rise-in var(--motion-duration-reveal) var(--motion-easing-reveal) both;
    }

    .london-map__river,
    .london-map__bank {
        animation: route-draw 1.6s cubic-bezier(0.42, 0, 0.58, 1) both;
    }

    .london-map__parks,
    .london-map__streets,
    .london-map__label,
    .london-map__bridges,
    .london-map__landmarks {
        animation: route-arrive 900ms ease-out 0.8s both;
    }

    .london-map__boats {
        animation: route-arrive 600ms ease-out 1.6s both;
    }

    .london-map__pin {
        animation: pin-drop 520ms var(--motion-easing-reveal) both;
    }

    .london-map__pin--drop-1 { animation-delay: 1.5s; }
    .london-map__pin--drop-2 { animation-delay: 1.8s; }
    .london-map__pin--drop-3 { animation-delay: 2.1s; }
    .london-map__pin--drop-4 { animation-delay: 2.4s; }
    .london-map__pin--drop-5 { animation-delay: 2.7s; }
    .london-map__pin--drop-6 { animation-delay: 3s; }
    .london-map__pin--drop-7 { animation-delay: 3.3s; }
    .london-map__pin--drop-8 { animation-delay: 3.6s; }

    .london-map__ring {
        transition: opacity 200ms;
    }

    /* The milestones line draws down as the reader scrolls past it, and each point fills as it is reached. */
    @supports (animation-timeline: view()) {
        .career::before {
            animation: career-draw linear both;
            animation-timeline: view();
            animation-range: entry 20% cover 60%;
        }

        .career__item::before {
            animation: career-reach linear both;
            animation-timeline: view();
            animation-range: entry 70% entry 100%;
        }
    }

    /* What's On: the Next up date flips from today's number to the event's, once. */
    .next-up__ticket {
        animation: var(--motion-duration-reveal) var(--motion-easing-reveal) 200ms both rise-in;
    }

    .next-up__flip-strip {
        animation: flip-count 1.1s steps(var(--flip-steps, 1), end) 700ms both;
    }

    .next-up__countdown {
        animation: countdown-ping 900ms var(--motion-easing) 1.9s 2;
    }

    .season {
        interpolate-size: allow-keywords;
        animation: var(--motion-duration-reveal) var(--motion-easing-reveal) 240ms both rise-in;
    }

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

    .season[open]::details-content {
        block-size: auto;
    }

    .season__toggle::after {
        transition: transform var(--motion-duration) var(--motion-easing);
    }

    /* Opening the timeline: the today line drops in, then the marks pop on month by month. */
    .season[open] .season__today {
        animation: route-arrive 500ms ease-out 150ms both;
    }

    .season[open] .season__dot,
    .season[open] .season__span {
        animation: season-pop 420ms var(--motion-easing-reveal) both;
    }

    .season[open] .season__mark--m0 { animation-delay: 250ms; }
    .season[open] .season__mark--m1 { animation-delay: 320ms; }
    .season[open] .season__mark--m2 { animation-delay: 390ms; }
    .season[open] .season__mark--m3 { animation-delay: 460ms; }
    .season[open] .season__mark--m4 { animation-delay: 530ms; }
    .season[open] .season__mark--m5 { animation-delay: 600ms; }
    .season[open] .season__mark--m6 { animation-delay: 670ms; }
    .season[open] .season__mark--m7 { animation-delay: 740ms; }
    .season[open] .season__mark--m8 { animation-delay: 810ms; }
    .season[open] .season__mark--m9 { animation-delay: 880ms; }
    .season[open] .season__mark--m10 { animation-delay: 950ms; }
    .season[open] .season__mark--m11 { animation-delay: 1020ms; }

    .season__band {
        transition: x 180ms var(--motion-easing), width 180ms var(--motion-easing);
    }

    .event-chip,
    .event-view-switch label {
        transition:
            background var(--motion-duration) var(--motion-easing),
            border-color var(--motion-duration) var(--motion-easing),
            color var(--motion-duration) var(--motion-easing);
    }

    .event-series__media img {
        transition: transform var(--motion-duration-reveal) var(--motion-easing-reveal);
    }

    .event-series:hover .event-series__media img {
        transform: scale(1.04);
    }

    /* The trip sketch draws once on a touch screen, and redraws each time a pointer arrives. */
    @media (hover: none) {
        .event-route-sketch__arc {
            animation: route-draw 1.4s cubic-bezier(0.42, 0, 0.58, 1) 0.3s both;
        }

        .event-route-sketch__to {
            animation: route-pin 520ms var(--motion-easing-reveal) 1.6s both;
        }
    }

    @media (hover: hover) {
        .event-series--trip:hover .event-route-sketch__arc {
            animation: route-draw 1.2s cubic-bezier(0.42, 0, 0.58, 1) both;
        }

        .event-series--trip:hover .event-route-sketch__to {
            animation: route-pin 520ms var(--motion-easing-reveal) 1.1s both;
        }
    }

    @supports (animation-timeline: view()) {
        .event-series,
        .event-row {
            animation: linear both rise-in;
            animation-timeline: view();
            animation-range: entry 5% entry 45%;
        }

        .event-month__rows::before {
            animation: career-draw linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 50%;
        }
    }

    /* Snow, December to Twelfth Night: three layers of flakes fall at different speeds for five
       seconds, then settle and stay still (WCAG 2.2.2). */
    .site-snow .site-header::before,
    .site-snow .site-footer::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image:
            radial-gradient(circle at 30px 40px, rgb(255 255 255 / 85%) 0 1.6px, transparent 2.4px),
            radial-gradient(circle at 120px 150px, rgb(255 255 255 / 70%) 0 1.4px, transparent 2.2px),
            radial-gradient(circle at 70px 90px, rgb(255 255 255 / 80%) 0 2.2px, transparent 3px),
            radial-gradient(circle at 200px 30px, rgb(255 255 255 / 60%) 0 1.8px, transparent 2.6px),
            radial-gradient(circle at 40px 200px, rgb(255 255 255 / 55%) 0 1.1px, transparent 1.8px),
            radial-gradient(circle at 150px 110px, rgb(255 255 255 / 50%) 0 1px, transparent 1.6px);
        background-size: 180px 180px, 180px 180px, 260px 260px, 260px 260px, 240px 240px, 240px 240px;
        content: "";
        pointer-events: none;
        animation: snow-fall 5s cubic-bezier(0.2, 0.6, 0.35, 1) both;
    }
}

@keyframes pin-drop {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
}

@keyframes career-draw {
    from {
        transform: scaleY(0);
    }
}

@keyframes career-reach {
    from {
        background: var(--color-paper);
    }
}

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

@keyframes route-draw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes route-arrive {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

@keyframes route-postcard {
    from {
        opacity: 0;
        translate: 0 1.5rem;
    }
}

@keyframes flip-count {
    from {
        transform: translateY(0);
    }
}

@keyframes countdown-ping {
    50% {
        box-shadow: 0 0 0 0.35rem rgb(239 167 143 / 35%);
    }
}

@keyframes season-pop {
    from {
        stroke-width: 0;
    }
}

@keyframes route-pin {
    from {
        opacity: 0;
        transform: scale(0.2);
    }

    60% {
        opacity: 1;
        transform: scale(1.3);
    }
}

@keyframes snow-fall {
    from {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }

    to {
        background-position: 0 180px, 0 180px, 0 130px, 0 130px, 0 240px, 0 240px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .route-map__traveller {
        display: none;
    }

    *,
    *::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;
    }
}