/*
 * The homepage.
 *
 * Built against design/Landing-page-v3.jpg and Landing-page-v3-mobile.jpg.
 * Mobile first: the plain rules are the 390px layout and the wider layouts are
 * added in min-width queries.
 *
 * Tokens come from style.css. No colour is written literally here except where
 * a comment explains why.
 */

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.motay-hero__aside {
    display: grid;
    gap: 0.75rem;
}

.motay-hero {
    display: grid;
    gap: 0.75rem;
    padding: var(--motay-edge);
    max-width: 1600px;
    margin-inline: auto;
}

.motay-hero__panel {
    border: 1px solid var(--motay-ink-2);
    border-radius: 4px;
    padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

.motay-hero__title {
    margin: 0;
    font-size: var(--motay-step-hero);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.035em;
    /* A belt and braces against a long word in an editable headline. The
       clamp above is sized to fit, but the headline is editable and somebody
       will eventually type a longer word than we planned for. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.motay-hero__accent {
    color: var(--motay-orange);
}

.motay-hero__standfirst {
    margin: 1.25rem 0 0;
    max-width: 34ch;
    color: var(--motay-muted);
    font-size: var(--motay-step-md);
    line-height: 1.5;
}

.motay-hero__rows {
    margin: 1.75rem 0 0;
}

.motay-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--motay-ink-2);
}

.motay-hero__row:last-child {
    border-bottom: 1px solid var(--motay-ink-2);
}

.motay-hero__row-label {
    flex: 0 0 auto;
    margin: 0;
    font-size: var(--motay-step-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.motay-hero__row-label--cool {
    color: var(--motay-aqua);
}

.motay-hero__row-label--warm {
    color: var(--motay-orange);
}

.motay-hero__row-value {
    margin: 0;
    font-size: var(--motay-step-base);
}

.motay-hero__row-value a {
    color: var(--motay-paper);
    text-decoration: none;
}

.motay-hero__row-value a:hover {
    text-decoration: underline;
}

.motay-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.75rem 0 0;
    max-width: none;
}

/* Join has nowhere to go yet, so it renders as a disabled button rather than
   a dead link.
   Not dimmed: fading it to 55% dropped ink on orange from 6.7:1 to roughly
   2.5:1 against the ink ground, which fails. The state is carried by the
   cursor and by the note beside it instead of by opacity. */
.motay-hero__actions .motay-btn[disabled] {
    cursor: not-allowed;
    box-shadow: inset 0 0 0 2px rgba(12, 15, 23, 0.25);
}

.motay-hero__note {
    flex: 0 0 100%;
    margin: 0;
    max-width: none;
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
}

/* Tile grid -------------------------------------------------------------- */

.motay-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.motay-grid__tile {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: var(--motay-ink-2);
    aspect-ratio: 3 / 2;
    max-width: 100%;
}

.motay-grid__link {
    display: block;
    height: 100%;
}

/*
   Two layers, stacked.

   A tile cross-fades between photographs, so both the outgoing and the
   incoming picture have to occupy the same space at once. Absolute rather
   than a grid or a stack, because the tile's height comes from its
   aspect-ratio on narrow screens and from the grid row on wide ones, and
   neither should change while a picture is swapping.

   The script sets z-index and opacity on these as it fades. It never sets a
   transition, so the duration below is the one place it is written down, and
   it has to stay in step with FADE in live.js.
*/
.motay-grid__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.9s ease;
}

/* The layer waiting its turn. It holds nothing until the script gives it a
   photograph, and a transparent img would otherwise paint over the tile. */
.motay-grid__image--under {
    opacity: 0;
}

/* The label sits on the photograph, so it carries its own scrim rather than
   relying on the picture being dark in that corner. */
/* Above both photographs. Computed styles cannot see paint order, so the
   layer this sits on has to be stated rather than inferred from the source
   order: the images take a z-index from the script as they fade. */
.motay-grid__label {
    position: absolute;
    z-index: 3;
    left: 0.75rem;
    bottom: 0.75rem;
    transition: opacity 0.35s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.3em 0.7em 0.3em 0.55em;
    border-radius: 999px;
    background: rgba(12, 15, 23, 0.78);
    color: var(--motay-paper);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* "Mission 30 Million Mandate, Uganda" is a long line at tile width, so
       it wraps rather than pushing past the edge of the photograph. */
    max-width: calc(100% - 1.5rem);
    line-height: 1.35;
}

.motay-grid__label::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--motay-aqua);
}

/*
   The label at phone width.

   A tile is about 165px across at 390px, and "Mission 30 Million Mandate,
   Cameroon" ran to three lines there, which covered most of the photograph.
   The mockup wraps these to two lines, so the type comes down and the
   tracking comes in until it does the same. The words are not shortened:
   the activity and the place together are the point of the label.
   ------------------------------------------------------------------------- */
@media (max-width: 47.999rem) {
    .motay-grid__label {
        left: 0.5rem;
        bottom: 0.5rem;
        gap: 0.4em;
        padding: 0.25em 0.6em 0.25em 0.45em;
        font-size: 0.6875rem; /* 11px floor for uppercase labels */
        letter-spacing: 0.05em;
        max-width: calc(100% - 1rem);
    }
}

/* Mandate figure ------------------------------------------------------- */

.motay-hero__stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(1.25rem, 0.8rem + 2vw, 2rem);
    border-radius: 4px;
    /* Pure white on the blue, not paper: paper is 4.03:1 here and fails. */
    background: var(--motay-blue);
    color: var(--motay-on-blue);
}

.motay-hero__stat-figure {
    margin: 0;
    /* Stated, not inherited. It is correct today only because this is a
       paragraph and Astra's colour rule targets headings. */
    color: var(--motay-on-blue);
    max-width: none;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-xl);
    line-height: 1;
    letter-spacing: -0.03em;
}

.motay-hero__stat-note {
    margin: 0;
    max-width: 28ch;
    font-size: var(--motay-step-base);
    line-height: 1.45;
}

/* -------------------------------------------------------------------------
   Live bar
   Ink on the live red, never white: white is 3.55:1 here and fails.
   ------------------------------------------------------------------------- */

.motay-livebar {
    background: var(--motay-live);
    color: var(--motay-ink);
    padding-block: 1rem;
    padding-inline: var(--motay-edge);
}

.motay-livebar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    max-width: 1600px;
    margin-inline: auto;
}

.motay-livebar__text {
    flex: 1 1 20rem;
    margin: 0;
    max-width: none;
    font-weight: 600;
}

.motay-live--on-red {
    color: var(--motay-ink);
    margin-right: 0.75em;
}

.motay-live--on-red::before {
    background: var(--motay-ink);
}

.motay-btn--onred {
    background: var(--motay-paper);
    color: var(--motay-ink);
}

/* -------------------------------------------------------------------------
   Wider screens
   ------------------------------------------------------------------------- */

/*
 * A phone shows three photographs, whatever the desktop shows.
 *
 * The v3 mobile mockup draws six, and this departs from it on purpose: six
 * photographs ahead of everything else on the page is a lot to ask of the
 * connections this audience has. The pictures are not merely hidden, they are
 * never fetched: the template marks these tiles lazy, and a lazy image inside
 * a display: none element has no layout box, so the browser never requests
 * it. Hiding alone would have downloaded all six and shown three.
 */
/*
 * Written as a max-width rule, and scoped to the grid, for two reasons.
 *
 * A name card sets `display: flex` to centre its title, and those rules sit
 * further down this file. At equal specificity the later rule wins, so a plain
 * `.motay-grid__tile--extra { display: none }` was simply overruled and a
 * phone showed all six. The extra class buys the specificity.
 *
 * And hiding only below the breakpoint means there is nothing to put back
 * above it: `display: block` would have flattened the name cards that need
 * flex. Above 48rem this rule does not exist, so every tile keeps whatever
 * display its own kind gives it.
 */
@media (max-width: 47.999rem) {
    .motay-grid .motay-grid__tile--extra {
        display: none;
    }
}

@media (min-width: 48rem) {
    .motay-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* A little variety without depending on how many tiles there are. */
    .motay-grid__tile:first-child {
        grid-column: span 2;
        aspect-ratio: 3 / 2;
    }
}

@media (min-width: 64rem) {
    /*
     * Two columns of equal height.
     *
     * The panel and the mandate figure are one stack on the left, and the tile
     * grid fills the same height on the right. Laying them out as three
     * separate grid items left the figure floating below a short panel with a
     * large dead space beside it, which is not what the design does: there the
     * figure sits directly under the panel and the two columns line up.
     */
    .motay-hero {
        grid-template-columns: repeat(12, 1fr);
        align-items: stretch;
    }

    .motay-hero__aside {
        grid-column: 1 / span 5;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* The panel takes the slack, so the figure stays its natural size and
       sits against the bottom of the column. */
    .motay-hero__panel {
        flex: 1 1 auto;
    }

    .motay-hero__stat {
        flex: 0 0 auto;
    }

    /*
     * Two explicit rows, so the grid fills the same height as the left column
     * and both end level. An aspect-ratio on the lead tile fixed its height
     * instead, which left the blue figure hanging below the grid.
     */
    .motay-grid {
        grid-column: 6 / -1;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1.45fr 1fr;
    }

    /* The lead photograph runs the full width of the grid, with the pair
       beneath it, as the design has it. */
    .motay-grid__tile:first-child {
        grid-column: 1 / -1;
        aspect-ratio: auto;
    }

    /* The tiles fill their row rather than setting their own height. */
    .motay-grid__tile {
        aspect-ratio: auto;
        min-height: 0;
    }

    /*
     * The six tile mosaic, as design/Landing-page-v3.jpg draws it: a wide
     * photograph, a tall one down the side, a pair beneath, then a second
     * wide one and a last small one. Three columns and three rows, with the
     * shapes varied so it reads as a mosaic rather than a contact sheet.
     *
     * Only when there are six tiles. With three, the rules above stand
     * untouched, which is what keeps the thin-library layout exactly as it
     * was rather than as a special case of this one.
     */
    .motay-grid--mosaic {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .motay-grid--mosaic .motay-grid__tile:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .motay-grid--mosaic .motay-grid__tile:nth-child(2) {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .motay-grid--mosaic .motay-grid__tile:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .motay-grid--mosaic .motay-grid__tile:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    .motay-grid--mosaic .motay-grid__tile:nth-child(5) {
        grid-column: 1 / span 2;
        grid-row: 3;
    }

    .motay-grid--mosaic .motay-grid__tile:nth-child(6) {
        grid-column: 3;
        grid-row: 3;
    }

    .motay-hero__title {
        font-size: var(--motay-step-hero);
    }
}

/* -------------------------------------------------------------------------
   Photo cards
   Used by Join the network and by the field reports.
   ------------------------------------------------------------------------- */

.motay-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.motay-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 4px;
    background: var(--motay-ink-2);
    min-height: 23rem;
    isolation: isolate;
}

.motay-card--report {
    min-height: 14rem;
}

/* Find your people: the four directorates. Two across on a tablet and four on
   a desktop, where a card is about a quarter of the page, so the headline is
   sized from the card and not from the window: "InnerCity Mission for Youth"
   at the section step does not fit a 240px card. The same fix as the
   programme cards, for the same reason. */
.motay-cards--join .motay-card {
    container-type: inline-size;
    min-height: 21rem;
}

.motay-cards--join .motay-card__title {
    font-size: clamp(1.25rem, 11cqi, var(--motay-step-lg));
    overflow-wrap: break-word;
}

.motay-card__link {
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: inherit;
    text-decoration: none;
    color: inherit;
}

.motay-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* A light wash over the whole photograph, so the image reads as part of a
   dark page rather than a bright rectangle punched into it. */
.motay-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(12, 15, 23, 0.55) 0%,
        rgba(12, 15, 23, 0.18) 55%,
        rgba(12, 15, 23, 0.05) 100%
    );
}

/* The text carries its own bed, sized to the text rather than to the card.
   The first attempt put one gradient across the whole card, which meant the
   label's legibility depended on what happened to be in that part of the
   photograph: on a bright crowd shot the aqua label nearly disappeared. This
   way every card has the same reliable contrast whatever the picture. */
.motay-card__body {
    position: relative;
    width: 100%;
    padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
    /* Solid behind the text, gone by the top of the block, so the photograph
       is still the photograph. The first pass at this ran the bed at 93% for
       most of the card height and buried the picture. */
    background: linear-gradient(
        to top,
        rgba(12, 15, 23, 0.96) 0%,
        rgba(12, 15, 23, 0.9) 45%,
        rgba(12, 15, 23, 0.55) 80%,
        rgba(12, 15, 23, 0) 100%
    );
    padding-top: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
}

.motay-card__label {
    margin: 0 0 0.5rem;
    max-width: none;
    color: var(--motay-aqua);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.motay-card__label--dot {
    display: flex;
    align-items: center;
    gap: 0.45em;
}

.motay-card__label--dot::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--motay-aqua);
}

.motay-card__title {
    margin: 0 0 0.5rem;
    font-size: var(--motay-step-lg);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--motay-paper);
}

.motay-card__title--sm {
    font-size: var(--motay-step-md);
}

.motay-card__line {
    margin: 0;
    max-width: 32ch;
    color: var(--motay-paper);
    font-size: var(--motay-step-base);
    line-height: 1.45;
}

.motay-card--report .motay-card__line {
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
}

.motay-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    color: var(--motay-paper);
    font-size: var(--motay-step-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.motay-card__arrow {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    /* Ink on orange, as everywhere else. */
    background: var(--motay-orange);
    color: var(--motay-on-orange);
}

.motay-card__cta:hover {
    color: var(--motay-aqua);
}

.motay-card__cta:hover .motay-card__arrow {
    filter: brightness(1.1);
}

/* -------------------------------------------------------------------------
   Today's word
   ------------------------------------------------------------------------- */

.motay-word__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.motay-word__card {
    padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
    border: 1px solid var(--motay-ink-2);
    border-radius: 4px;
    background: var(--motay-ink-2);
}

.motay-word__card--fallback {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.motay-word__cover {
    width: 9rem;
    height: auto;
    border-radius: 4px;
    flex: 0 0 auto;
}

.motay-word__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.85rem;
    max-width: none;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--motay-muted);
}

.motay-word__source {
    color: var(--motay-aqua);
}

.motay-word__title {
    margin: 0 0 0.85rem;
    font-size: var(--motay-step-lg);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.motay-word__snippet {
    margin: 0;
    max-width: 62ch;
    color: var(--motay-muted);
    font-size: var(--motay-step-base);
    line-height: 1.6;
}

.motay-word__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    max-width: none;
}

/* -------------------------------------------------------------------------
   The mandate
   ------------------------------------------------------------------------- */

.motay-mandate {
    background: var(--motay-ink-2);
}

.motay-mandate__second {
    margin-top: 0;
}

/* -------------------------------------------------------------------------
   Wider screens
   ------------------------------------------------------------------------- */

@media (min-width: 48rem) {
    .motay-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .motay-cards--join {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .motay-cards--join {
        grid-template-columns: repeat(4, 1fr);
    }

    .motay-section__head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
        align-items: end;
        gap: 2rem;
    }

    /* The first card is the wide one, as the mockup has it: TeeVo gets the
       room because it carries the snippet. */
    .motay-word__cards {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------------
   Programmes
   ------------------------------------------------------------------------- */

.motay-cards--programmes {
    grid-template-columns: 1fr;
}

.motay-card--programme {
    min-height: 15rem;
}

.motay-card__when {
    margin: 0.85rem 0 0;
    max-width: none;
    font-size: var(--motay-step-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--motay-aqua);
}

/*
 * Solid cards.
 *
 * A fill needs no scrim and no gradient bed: the background is already one
 * flat colour, and a gradient over it would just make the bottom muddy. So
 * both are switched off, and the text colour is set to whatever passes on
 * that fill.
 */
.motay-card--orange,
.motay-card--blue,
.motay-card--surface {
    background-image: none;
}

.motay-card--orange::after,
.motay-card--blue::after,
.motay-card--surface::after {
    content: none;
}

.motay-card--orange .motay-card__body,
.motay-card--blue .motay-card__body,
.motay-card--surface .motay-card__body {
    background: none;
    padding-top: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
}

/* Ink on orange: 6.7:1. White would be 2.9:1 and fails, which is what the
   mockup shows and what we are deliberately not doing. */
.motay-card--orange {
    background-color: var(--motay-orange);
}

.motay-card--orange .motay-card__title,
.motay-card--orange .motay-card__line,
.motay-card--orange .motay-card__when {
    color: var(--motay-on-orange);
}

/* Pure white on blue: 4.51:1. Paper would be 4.03:1 and fails. */
.motay-card--blue {
    background-color: var(--motay-blue);
}

.motay-card--blue .motay-card__title,
.motay-card--blue .motay-card__line,
.motay-card--blue .motay-card__when {
    color: var(--motay-on-blue);
}

.motay-card--surface {
    background-color: var(--motay-ink-2);
    box-shadow: inset 0 0 0 1px rgba(244, 242, 237, 0.09);
}

.motay-card--surface .motay-card__line {
    color: var(--motay-muted);
}

/* -------------------------------------------------------------------------
   Films
   ------------------------------------------------------------------------- */

.motay-films__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.motay-film {
    background: var(--motay-ink-2);
    border-radius: 4px;
    overflow: hidden;
}

.motay-film__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* A fixed-ratio window, with the poster positioned inside it absolutely.
   Sizing the image with height:100% against a box whose own height comes from
   aspect-ratio left the posters overflowing and the rows misaligned, so the
   box is a positioning context and the image is pinned to it. */
.motay-film__poster {
    display: block;
    position: relative;
    aspect-ratio: 2 / 3;
    width: 100%;
    overflow: hidden;
    background: var(--motay-ink);
}

.motay-film__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain, not cover. The posters do not share one aspect ratio: they run
       from 0.67 to 0.89, and cover cropped the widest one hard enough to cut
       the credits off its edges. A poster is finished artwork with type on it,
       so the whole of it shows and the box letterboxes instead. */
    object-fit: contain;
    display: block;
}

/* The caption always sits at the bottom, so the four cards line up whatever
   shape the posters are. */
.motay-film {
    display: flex;
    flex-direction: column;
}

.motay-film__link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.motay-film__caption {
    margin-top: auto;
}

.motay-film__caption {
    display: block;
    padding: 0.9rem 1rem 1.1rem;
}

.motay-film__title {
    display: block;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-md);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--motay-paper);
}

.motay-film__meta {
    display: block;
    margin-top: 0.3rem;
    font-size: var(--motay-step-sm);
    color: var(--motay-muted);
}

.motay-film__link:hover .motay-film__title {
    color: var(--motay-aqua);
}

/* -------------------------------------------------------------------------
   Wider screens
   ------------------------------------------------------------------------- */

@media (min-width: 48rem) {
    .motay-cards--programmes {
        grid-template-columns: repeat(3, 1fr);
    }

    .motay-films__list {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* -------------------------------------------------------------------------
   Apps
   ------------------------------------------------------------------------- */

/*
 * The apps slide sideways, at every width.
 *
 * Built on the browser's own horizontal scroll with snap points, so a phone
 * swipes it, a trackpad's two-finger swipe moves it and the arrow keys move it
 * once focused, all with no script. live.js adds click-and-drag for a mouse,
 * and the buttons under it. Nothing moves by itself, so WCAG 2.2.2 does not
 * come into it.
 *
 * One card and a peek of the next on a phone, two on a tablet, three on a
 * desktop: with three apps a desktop simply shows them all, and a fourth slides
 * in without anybody touching the layout.
 */
.motay-apps__list {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 74%;
    gap: 1rem;
    margin: 0;
    padding: 0 0 0.25rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}

/* The scrollbar goes only once the script has put buttons in its place, so a
   mouse without the script still has something to drag. */
.motay-js .motay-apps__list {
    scrollbar-width: none;
    cursor: grab;
}

.motay-js .motay-apps__list::-webkit-scrollbar {
    display: none;
}

/* While a mouse drags it, snapping would fight the pointer, and a drag must
   not select the text it passes over. */
.motay-apps__list.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.motay-apps__list.is-dragging a {
    pointer-events: none;
}

.motay-apps__list:focus-visible {
    outline: 2px solid var(--motay-blue-link);
    outline-offset: 4px;
}

@media (min-width: 40rem) {
    .motay-apps__list {
        grid-auto-columns: calc((100% - 1rem) / 2);
    }
}

@media (min-width: 64rem) {
    .motay-apps__list {
        gap: 1.25rem;
        grid-auto-columns: calc((100% - 2.5rem) / 3);
    }
}

/*
 * No card around the screenshot.
 *
 * Each of these images is already a phone composed on its own coloured
 * ground, so putting it inside a bordered box made a box inside a box, and
 * the phone had to shrink to about 62% to sit inside the padding. The image
 * is the card now: shown whole, at full width, undistorted, with the words
 * underneath.
 */
.motay-app {
    display: flex;
    flex-direction: column;
    background: none;
    border: 0;
    scroll-snap-align: start;
}

.motay-app__inner,
.motay-app__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/*
 * A fixed window, with each screenshot shown whole inside it.
 *
 * The images are not one shape: two are 2160x2700 and PCDL is 4320x6605, a
 * good deal taller. Letting each one set its own height made the row ragged
 * and dropped PCDL's caption 125px below its neighbours. A fixed ratio plus
 * contain gives every card the same height, so the captions line up, and no
 * screenshot is cropped or stretched to get there.
 */
.motay-app__shot {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(244, 242, 237, 0.04);
}

/* The frame with no screenshot: the name, large, on the orange. Ink on
   orange, as every orange surface on this site, 6.7:1. Sized from the frame
   so a long name fits. */
.motay-app__shot--name {
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    container-type: inline-size;
    background: var(--motay-orange);
}

/* Present behind a store picture, and shown only if that picture fails. */
.motay-app__shot:not(.motay-app__shot--name) .motay-app__mark {
    display: none;
}

.motay-app__mark {
    color: var(--motay-on-orange);
    font-family: var(--motay-font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 13cqi, 3rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    overflow-wrap: break-word;
}

.motay-app__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* A mouse drag across the slider must not pick the picture up instead. */
    -webkit-user-drag: none;
    user-select: none;
}

/* Pinned to the bottom, so the captions agree even when a screenshot
   letterboxes inside its window. */
.motay-app__body {
    display: block;
    margin-top: auto;
    padding: 1.1rem 0 0;
}

.motay-app__name {
    display: block;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-md);
    letter-spacing: -0.02em;
    color: var(--motay-paper);
}

.motay-app__line {
    display: block;
    margin-top: 0.35rem;
    max-width: 34ch;
    color: var(--motay-muted);
    font-size: var(--motay-step-base);
    line-height: 1.45;
}

.motay-app__platforms {
    display: block;
    margin-top: 0.6rem;
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.motay-app__link:hover .motay-app__name {
    color: var(--motay-aqua);
}

/* -------------------------------------------------------------------------
   The quote
   Pure white on the brand blue: 4.51:1. Paper would be 4.03:1 and fail.
   ------------------------------------------------------------------------- */

.motay-quote {
    background: var(--motay-blue);
    color: var(--motay-on-blue);
    padding-block: var(--motay-section);
    padding-inline: var(--motay-edge);
}

.motay-quote__figure {
    margin: 0;
    max-width: 56rem;
}

.motay-quote__text,
.motay-quote__text p {
    /*
     * Pure white, stated rather than inherited.
     *
     * Astra styles blockquote with a muted grey, and an explicit rule beats
     * an inherited colour however carefully the parent sets it. The result
     * measured rgb(169, 167, 162) on the brand blue: 1.88:1, which is not a
     * near miss, it is unreadable. Paper would also fail here at 4.03:1.
     */
    color: var(--motay-on-blue);
}

.motay-quote__text {
    margin: 0;
    padding: 0;
    border: 0;
    /* Astra italicises blockquotes. The design sets this upright, and Archivo
       at this weight and size is the point of the section. */
    font-style: normal;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-xl);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.motay-quote__text p {
    margin: 0;
    max-width: none;
    color: var(--motay-on-blue);
}

.motay-quote__by {
    margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

.motay-quote__name,
.motay-quote__role {
    display: block;
    /* Both stay pure white. The role line is set lighter by weight, not by
       opacity: fading it would take it under the threshold on this blue. */
    color: var(--motay-on-blue);
}

.motay-quote__name {
    font-weight: 700;
    font-size: var(--motay-step-base);
}

.motay-quote__role {
    margin-top: 0.2rem;
    font-weight: 400;
    font-size: var(--motay-step-base);
}

/* -------------------------------------------------------------------------
   Give
   The one light section on the page: ink on paper, not paper on ink.
   ------------------------------------------------------------------------- */

.motay-give {
    background: var(--motay-paper);
    color: var(--motay-ink);
}

.motay-give__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

.motay-give__title {
    color: var(--motay-ink);
}

.motay-give__body {
    margin: 1.25rem 0 0;
    max-width: 36ch;
    /* Not the muted grey: that token is tuned for the dark ground and is only
       3.4:1 on paper. A darker grey keeps the same intent and passes. */
    color: #4A5163;
    font-size: var(--motay-step-md);
    line-height: 1.55;
}

.motay-give__card {
    padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(12, 15, 23, 0.1), 0 10px 30px rgba(12, 15, 23, 0.06);
}

.motay-give__card-title {
    margin: 0 0 1.25rem;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-md);
    letter-spacing: -0.02em;
    color: var(--motay-ink);
}

.motay-rails {
    margin: 0;
    padding: 0;
    list-style: none;
}

.motay-rails__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-top: 1px solid rgba(12, 15, 23, 0.1);
}

.motay-rails__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.motay-rails__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Each mark is a tinted square with dark text on it, so every one of them is
   legible without depending on the tint being light enough by luck. */
.motay-rails__mark--blue { background: #E4ECFF; color: #16357F; }
.motay-rails__mark--aqua { background: #DFF7F2; color: #0A5B4E; }
.motay-rails__mark--warm { background: #FFE9DC; color: #8A3505; }

.motay-rails__name {
    display: block;
    font-weight: 700;
    font-size: var(--motay-step-base);
    color: var(--motay-ink);
}

.motay-rails__line {
    display: block;
    margin-top: 0.1rem;
    font-size: var(--motay-step-sm);
    color: #4A5163;
}

.motay-give__action {
    width: 100%;
    justify-content: center;
    margin-top: 1.5rem;
}

.motay-btn--ink {
    background: var(--motay-ink);
    color: var(--motay-paper);
}

.motay-give__note {
    margin: 0.9rem 0 0;
    max-width: none;
    text-align: center;
    font-size: var(--motay-step-sm);
    color: #4A5163;
}

/* -------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------- */

.motay-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

.motay-contact__email {
    margin: 2rem 0 0;
    max-width: none;
}

.motay-contact__email .motay-eyebrow {
    display: block;
    margin-bottom: 0.4rem;
}

.motay-contact__email a {
    color: var(--motay-paper);
    font-size: var(--motay-step-md);
    text-decoration: none;
}

.motay-contact__email a:hover {
    color: var(--motay-aqua);
    text-decoration: underline;
}

.motay-contact__form {
    padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
    border: 1px solid var(--motay-ink-2);
    border-radius: 4px;
    background: var(--motay-ink-2);
}

.motay-contact__fallback {
    margin: 0 0 1.25rem;
    color: var(--motay-muted);
    font-size: var(--motay-step-base);
    line-height: 1.55;
}

/* -------------------------------------------------------------------------
   Newsletter
   An orange band, so every word on it is ink. White would be 2.9:1.
   ------------------------------------------------------------------------- */

.motay-news {
    background: var(--motay-orange);
    color: var(--motay-on-orange);
    padding-block: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    padding-inline: var(--motay-edge);
}

.motay-news__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
}

.motay-news__title {
    margin: 0;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-lg);
    letter-spacing: -0.03em;
    color: var(--motay-on-orange);
}

.motay-news__line,
.motay-news__pending {
    margin: 0.4rem 0 0;
    max-width: 40ch;
    color: var(--motay-on-orange);
    font-size: var(--motay-step-base);
    line-height: 1.45;
}

.motay-news__pending {
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Wider screens
   ------------------------------------------------------------------------- */

@media (min-width: 48rem) {
    .motay-news__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 2rem;
    }
}

@media (min-width: 64rem) {
    .motay-give__grid,
    .motay-contact__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4rem;
    }
}

/* -------------------------------------------------------------------------
   Colour tiles in the hero grid

   A tile with no photograph becomes a colour card carrying its name, the way
   the Programmes section treats NFMC and GIGS. That is what lets the grid read
   as deliberate while the library holds two distinct photographs: each photo
   is used once and the rest of the grid is colour, rather than the same crowd
   shot repeated five times.

   Every pairing here is ink on the accent, which is the only combination that
   passes on aqua, orange and the raised surface alike, and it is what the
   design system already mandates for orange.
   ------------------------------------------------------------------------- */

.motay-grid__tile--aqua,
.motay-grid__tile--blue,
.motay-grid__tile--orange,
.motay-grid__tile--raised {
    display: flex;
    align-items: flex-end;
}

.motay-grid__tile--aqua   { background: var(--motay-aqua); }
.motay-grid__tile--orange { background: var(--motay-orange); }
.motay-grid__tile--raised { background: var(--motay-ink-2); }

/* The blue takes pure white, not ink: ink on this blue is 4.7:1 but white is
   the pairing the design system fixed for blue, and it matches the mandate
   tile sitting beside it. */
.motay-grid__tile--blue {
    background: var(--motay-blue);
}

.motay-grid__name {
    display: block;
    padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-md);
    line-height: 1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.motay-grid__tile--aqua   .motay-grid__name { color: var(--motay-on-aqua); }
.motay-grid__tile--orange .motay-grid__name { color: var(--motay-on-orange); }
.motay-grid__tile--blue   .motay-grid__name { color: var(--motay-on-blue); }
.motay-grid__tile--raised .motay-grid__name { color: var(--motay-paper); }

/* The whole card is the target on a colour tile, so the link fills it. */
.motay-grid__tile--aqua .motay-grid__link,
.motay-grid__tile--blue .motay-grid__link,
.motay-grid__tile--orange .motay-grid__link,
.motay-grid__tile--raised .motay-grid__link {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
}

/* -------------------------------------------------------------------------
   What is coming up

   Cards side by side, as the v4 design has them, with one rule carried over
   from the alternatives compared in design/Upcoming-options.jpg: a card with
   no poster takes an accent and puts its title large, rather than stretching
   to match its neighbours around an empty rectangle. Announcing something
   before the artwork exists is the normal case here.

   Every accent pairing is ink on the colour, which is the only combination
   that passes on aqua, orange and blue alike and is what the design system
   already mandates.
   ------------------------------------------------------------------------- */

.motay-upcoming__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.motay-upcard {
    display: flex;
    flex-direction: column;
    background: var(--motay-ink-2);
    border: 1px solid rgba(244, 242, 237, 0.08);
    border-radius: 6px;
    overflow: hidden;
    /* See the note on the title below: the headline is sized from the card. */
    container-type: inline-size;
}

.motay-upcard__poster img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.motay-upcard__body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.motay-upcard__when {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--motay-aqua);
}

/* A card headline is sized from the card, not from the window.

   `--motay-step-lg` grows with the viewport, which is right for a section
   heading spanning the page and wrong inside a card: at 768px the step says
   35px while the card is 176px wide, and "Trumpets Conference" needs 291px for
   the word "Conference" alone. It ran out through the right hand edge and the
   card's own `overflow: hidden` cut the last letters off. Caught by eye on the
   live preview, and 3,960 elements were being measured for contrast without
   anything asking whether they were still inside their box.

   `cqi` is one percent of the card's inline size, so the headline now shrinks
   with the card and the step only caps it. The clamp's floor keeps it a
   headline on the narrowest card.

   `break-word` is the net, not the mechanism: it does nothing while a word
   fits, and a name long enough to defeat the sizing breaks rather than
   escapes. `node tools/check-overflow.js` is what proves it. */
.motay-upcard__title {
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: clamp(1.25rem, 10cqi, var(--motay-step-lg));
    line-height: 1.05;
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
}

.motay-upcard__title a {
    color: var(--motay-paper);
    text-decoration: none;
}

.motay-upcard__title a:hover {
    text-decoration: underline;
}

.motay-upcard__line {
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
    line-height: 1.5;
}

.motay-upcard__countdown {
    align-self: flex-start;
    background: rgba(244, 242, 237, 0.09);
    border-radius: 5px;
    padding: 0.5em 0.9em;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: 1.05rem;
}

.motay-upcard__actions {
    margin-top: auto;
    padding-top: 0.5rem;
}

.motay-upcard__now {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    background: var(--motay-live);
    color: var(--motay-ink);
    font-family: var(--motay-font-body);
    font-size: 0.6875rem; /* 11px floor: 10px caps were hard to read on a phone */
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35em 0.7em;
    border-radius: 4px;
}

/* No poster, so the type becomes the poster. The same treatment the hero
   gives an entry with no photograph. */
.motay-upcard--aqua   { background: var(--motay-aqua); border-color: transparent; }
.motay-upcard--orange { background: var(--motay-orange); border-color: transparent; }
.motay-upcard--blue   { background: var(--motay-blue); border-color: transparent; }

.motay-upcard--aqua .motay-upcard__body,
.motay-upcard--orange .motay-upcard__body {
    justify-content: center;
}

.motay-upcard--aqua .motay-upcard__title,
.motay-upcard--aqua .motay-upcard__title a,
.motay-upcard--orange .motay-upcard__title,
.motay-upcard--orange .motay-upcard__title a {
    color: var(--motay-ink);
    font-size: var(--motay-step-xl);
}

.motay-upcard--aqua .motay-upcard__line,
.motay-upcard--orange .motay-upcard__line {
    color: rgba(12, 15, 23, 0.78);
}

.motay-upcard--aqua .motay-upcard__when,
.motay-upcard--orange .motay-upcard__when {
    color: rgba(12, 15, 23, 0.7);
}

/* Blue takes pure white, never paper: paper on this blue is 4.03:1 and fails. */
.motay-upcard--blue .motay-upcard__body { justify-content: center; }
.motay-upcard--blue .motay-upcard__title,
.motay-upcard--blue .motay-upcard__title a { color: #FFFFFF; font-size: clamp(1.5rem, 13cqi, var(--motay-step-xl)); }
.motay-upcard--blue .motay-upcard__line { color: rgba(255, 255, 255, 0.86); }
.motay-upcard--blue .motay-upcard__when { color: rgba(255, 255, 255, 0.8); }

.motay-btn--ink {
    background: var(--motay-ink);
    color: var(--motay-paper);
}

.motay-upcoming__more {
    padding-top: 1.75rem;
}

/* Stated rather than inherited, as every text colour on this site has to be. */
.motay-upcoming__none {
    margin: 0;
    color: var(--motay-muted);
    font-size: var(--motay-step-base);
}

.motay-upcoming__more a {
    color: var(--motay-paper);
    font-weight: 700;
    font-size: var(--motay-step-sm);
}

@media (min-width: 48rem) {
    .motay-upcoming__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Watch again ----------------------------------------------------------- */

.motay-upcoming__subhead {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--motay-muted);
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.motay-again {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.motay-again__row {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    background: var(--motay-ink-2);
    border: 1px solid rgba(244, 242, 237, 0.08);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
}

.motay-again__thumb img {
    width: 100%;
    max-width: 180px;
    height: auto;
    border-radius: 5px;
    display: block;
}

.motay-again__when {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--motay-muted);
    margin-bottom: 0.35rem;
}

.motay-again__title {
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-md);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* The title now links to the event's own page. Stated, not inherited: Astra
   colours links, and an inherited colour loses to an explicit one. */
.motay-again__title a {
    color: var(--motay-paper);
    text-decoration: none;
}

.motay-again__title a:hover {
    text-decoration: underline;
}

.motay-again__line {
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
    margin-top: 0.35rem;
}

@media (min-width: 48rem) {
    .motay-again__row {
        grid-template-columns: 180px 1fr auto;
    }
}

/* A quieter button, for a row in a list rather than a call to action. */
.motay-btn--small {
    border: 1px solid rgba(244, 242, 237, 0.28);
    color: var(--motay-paper);
    font-size: 0.8125rem;
    padding: 0.55em 1.2em;
    white-space: nowrap;
}

.motay-btn--small:hover {
    border-color: rgba(244, 242, 237, 0.55);
}

/* -------------------------------------------------------------------------
   Creators Connect

   The one section that should look made rather than laid out, because it is
   asking creative people to join.

   **The artwork is in the section and the panel sits over it.** A line starts
   on the dark ground and carries on inside the panel rather than stopping at
   its edge, which is what happened when the art lived inside the panel with
   overflow hidden: it read as wallpaper in a box.

   Inside, the line is softened by the panel's own backdrop filter. That is
   the frosted glass technique, and the two things that make it work rather
   than look cheap are a panel that is only slightly transparent, so text
   keeps its contrast, and a blurred area kept small and given its own layer,
   because blurring a live backdrop is expensive.

   Contrast: the panel is paper at 92% over the artwork, so the worst ground
   under ink is about (245,226,212), which is still 14.9:1. Measured, not
   assumed, and check-rendered-contrast.js watches it.
   ------------------------------------------------------------------------- */

.motay-connect {
    position: relative;
    isolation: isolate;
}

.motay-connect__art {
    position: absolute;
    z-index: 0;
    inset: -8% 0 -8% 0;
    width: 100%;
    height: 116%;
    pointer-events: none;
}

.motay-connect__set {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Many thin lines rather than a few thick ones. A fat rounded stroke reads as
   a children's illustration, which is the last thing this section should be. */
.motay-connect__set--a {
    stroke: var(--motay-aqua);
    stroke-width: 2;
    opacity: 0.85;
    animation: motay-set-a 26s ease-in-out infinite alternate;
}

.motay-connect__set--b {
    stroke: var(--motay-orange);
    stroke-width: 1.5;
    opacity: 0.7;
    animation: motay-set-b 32s ease-in-out infinite alternate;
}

.motay-connect__set--c {
    stroke: var(--motay-blue-link);
    stroke-width: 1.25;
    opacity: 0.55;
    animation: motay-set-c 21s ease-in-out infinite alternate;
}

/* Transform on the group, so the browser moves one layer rather than ten
   paths, and only transform, so nothing relayouts. */
@keyframes motay-set-a {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-26px, 14px, 0); }
}

@keyframes motay-set-b {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(30px, -12px, 0); }
}

@keyframes motay-set-c {
    from { transform: translate3d(0, 0, 0) scaleY(1); }
    to   { transform: translate3d(-14px, 0, 0) scaleY(1.06); }
}

/* The panel: frosted, not opaque, so the artwork carries through it. */
.motay-connect__band {
    position: relative;
    z-index: 1;
    background: rgba(244, 242, 237, 0.92);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    color: var(--motay-ink);
    border: 1px solid rgba(244, 242, 237, 0.5);
    border-radius: 14px;
    padding: clamp(2rem, 1.2rem + 3vw, 3.75rem);
    display: grid;
    gap: 2.25rem;
    /* Its own layer. Blurring a live backdrop is the expensive part, and this
       keeps the browser from redoing it against the rest of the page. */
    will-change: transform;
}

.motay-connect__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8A5A3C;
    margin-bottom: 0.75rem;
}

.motay-connect__title {
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-xl);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--motay-ink);
}

.motay-connect__line {
    color: #4A5163;
    font-size: var(--motay-step-sm);
    line-height: 1.6;
    margin-top: 1rem;
    max-width: 32rem;
}

.motay-connect__actions {
    margin-top: 1.75rem;
}

.motay-connect__btn {
    background: var(--motay-ink);
    color: var(--motay-paper);
}

/* The disciplines. All of them, all the time. ---------------------------- */

.motay-connect__skills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-content: center;
}

.motay-connect__skill {
    border: 1px solid #cfcac1;
    border-radius: 999px;
    padding: 0.55em 1.2em;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: #5A5A5A;
    background: var(--motay-paper);
    transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}

/* The light, moved from one to the next by the script. */
.motay-connect__skill.is-lit {
    color: var(--motay-ink);
    background: var(--motay-aqua);
    border-color: transparent;
    transform: translateY(-2px);
}

@media (min-width: 48rem) {
    .motay-connect__band {
        grid-template-columns: 1.3fr 1fr;
        gap: 3.5rem;
        align-items: center;
    }
}

/* Stopped completely, not sped up. The lines stay exactly where they are, and
   the script lights nothing, so the chips read as a plain list. */
@media (prefers-reduced-motion: reduce) {
    .motay-connect__set {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   Motion

   The class that hides an element is added by live.js, never by this file,
   and only to elements below the fold at the time. So a failed script leaves
   the page exactly as the server sent it, and nothing already on screen is
   hidden and shown again. That is the flicker most scroll-reveal ships with.

   Transform and opacity only. Animating width, height, top or left relayouts
   the page on every frame, which is where jank on a long homepage comes from.

   The global prefers-reduced-motion block in style.css already reduces every
   transition to nothing, and live.js does not add the class at all in that
   case, so this is stopped twice over.
   ------------------------------------------------------------------------- */

.motay-reveal {
    opacity: 0;
    transform: translateY(14px);
}

.motay-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Hover lifts ------------------------------------------------------------
   Only where a pointer exists. On a touch screen :hover sticks after a tap,
   which leaves a card raised for no reason.
   ------------------------------------------------------------------------- */

@media (hover: hover) {
    .motay-card,
    .motay-film,
    .motay-sitem,
    .motay-again__row {
        transition: transform 0.18s ease;
    }

    .motay-card:hover,
    .motay-film:hover,
    .motay-again__row:hover {
        transform: translateY(-4px);
    }

    /* The arrow on a call to action nudges towards where it is going. */
    .motay-card__arrow {
        transition: transform 0.18s ease;
    }

    .motay-card:hover .motay-card__arrow {
        transform: translateX(3px);
    }
}

/* -------------------------------------------------------------------------
   What we do

   A parent names its children on its own card rather than sitting beside
   them, which is the relationship the live site has no way to express.

   An entry with no photograph takes an accent and its title goes large, the
   same treatment the hero and the upcoming cards give. Every pairing is ink
   on the accent, except blue which takes pure white: paper on this blue is
   4.03:1 and fails.
   ------------------------------------------------------------------------- */

.motay-work__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.motay-workcard {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 15rem;
    border-radius: 6px;
    overflow: hidden;
    background: var(--motay-ink-2);
    border: 1px solid rgba(244, 242, 237, 0.08);
    /* Only the inline size is contained, so the card still grows to fit its
       words, and it is already a containing block through position: relative,
       which the absolutely positioned image depends on. */
    container-type: inline-size;
}

.motay-workcard__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.motay-workcard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 15, 23, 0.96) 0%, rgba(12, 15, 23, 0.68) 45%, rgba(12, 15, 23, 0.2) 100%);
}

.motay-workcard--aqua::after,
.motay-workcard--orange::after,
.motay-workcard--blue::after {
    display: none;
}

.motay-workcard__body {
    position: relative;
    z-index: 1;
    padding: 1.6rem;
    width: 100%;
}

.motay-workcard__kind {
    font-size: 0.6875rem; /* 11px floor: 10px caps were hard to read on a phone */
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--motay-aqua);
    margin-bottom: 0.4rem;
}

/* Sized from the card, for the reason given on .motay-upcard__title.
   "The Teevolution" was 9px past its 180px card at 768. */
.motay-workcard__title {
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: clamp(1.25rem, 10cqi, var(--motay-step-lg));
    line-height: 1.08;
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
}

.motay-workcard__title a {
    color: var(--motay-paper);
    text-decoration: none;
}

.motay-workcard__title a:hover {
    text-decoration: underline;
}

.motay-workcard__out {
    font-size: 0.7em;
    opacity: 0.75;
    margin-left: 0.2em;
}

.motay-workcard__line {
    color: #c6ccd8;
    font-size: var(--motay-step-sm);
    line-height: 1.45;
    margin-top: 0.5rem;
}

/* The logo card: the mark whole on a light panel, the words below it.
   A logo is not a photograph, so it is not cropped to fill, not dimmed, and
   nothing is laid over it. The panel is paper because most Loveworld marks are
   drawn for a light ground and disappear on ink. */
.motay-workcard--logo {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: stretch;
}

.motay-workcard--logo::after {
    display: none;
}

.motay-workcard__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    min-height: 11rem;
    background: var(--motay-paper);
}

/* Sized so a tall mark and a wide one both fill the panel properly. The cap
   also decides which file the browser picks out of srcset, so a mean one is
   not just small on screen, it fetches a thumbnail and renders it soft. */
.motay-workcard__logo {
    max-width: 68%;
    max-height: 9rem;
    width: auto;
    height: auto;
    object-fit: contain;
}

.motay-workcard--logo .motay-workcard__body {
    padding-top: 1.25rem;
}

.motay-workcard--aqua   { background: var(--motay-aqua); border-color: transparent; }
.motay-workcard--orange { background: var(--motay-orange); border-color: transparent; }
.motay-workcard--blue   { background: var(--motay-blue); border-color: transparent; }

/* The heading states the colour as well as its link: the rendered sweep
   measures the heading itself, and anything in it that is not the link (the
   "has its own site" arrow) takes the heading's colour, not the link's. It
   was paper on aqua, 1.52:1, the first time an entry with no picture landed
   on an aqua card. */
.motay-workcard--aqua .motay-workcard__title,
.motay-workcard--orange .motay-workcard__title,
.motay-workcard--aqua .motay-workcard__title a,
.motay-workcard--orange .motay-workcard__title a { color: var(--motay-ink); }
.motay-workcard--aqua .motay-workcard__line,
.motay-workcard--orange .motay-workcard__line { color: rgba(12, 15, 23, 0.8); }
.motay-workcard--aqua .motay-workcard__kind,
.motay-workcard--orange .motay-workcard__kind { color: rgba(12, 15, 23, 0.72); }

.motay-workcard--blue .motay-workcard__title,
.motay-workcard--blue .motay-workcard__title a { color: #FFFFFF; }
.motay-workcard--blue .motay-workcard__line { color: rgba(255, 255, 255, 0.88); }
.motay-workcard--blue .motay-workcard__kind { color: rgba(255, 255, 255, 0.82); }

@media (min-width: 48rem) {
    .motay-work__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.motay-work__more {
    padding-top: 1.75rem;
}

.motay-work__more a {
    color: var(--motay-paper);
    font-weight: 700;
    font-size: var(--motay-step-sm);
}

/* ---------------------------------------------------------------------------
   The slider's controls

   Added by live.js, and only shown once the list actually overflows, so three
   apps on a wide screen get no buttons they do not need. Under the slider
   rather than over the pictures: overlaid arrows sat on the screenshots and
   read as part of them.
   ------------------------------------------------------------------------ */

.motay-slider__bar {
    display: none;
}

.motay-slider.is-sliding .motay-slider__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

.motay-slider__count {
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
    font-variant-numeric: tabular-nums;
}

.motay-slider__buttons {
    display: flex;
    gap: 0.5rem;
}

/* Every state stated: Astra fills a focused or hovered button otherwise. */
.motay-slider .motay-slider__btn,
.motay-slider .motay-slider__btn:hover,
.motay-slider .motay-slider__btn:focus,
.motay-slider .motay-slider__btn:active {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(244, 242, 237, 0.3);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--motay-paper);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.motay-slider .motay-slider__btn:hover {
    border-color: var(--motay-aqua);
    color: var(--motay-aqua);
}

.motay-slider .motay-slider__btn:focus-visible {
    outline: 2px solid var(--motay-aqua);
    outline-offset: 2px;
}

.motay-slider .motay-slider__btn[disabled] {
    opacity: 0.3;
    cursor: default;
    border-color: rgba(244, 242, 237, 0.3);
    color: var(--motay-paper);
}