/*
 * Site chrome: the masthead and the ticker.
 *
 * Loaded on every page, not just the homepage. The masthead was originally
 * inside home.css, which meant inner pages fell back to Astra's own header:
 * it listed every published page alphabetically, Sample Page and the broken
 * Portal included, across three wrapped rows. Nothing like the design.
 *
 * Tokens come from style.css.
 */
/* -------------------------------------------------------------------------
   Astra's wrapper
   Astra puts the page inside a width-limited, padded container. The homepage
   is full bleed, so on this template only, that container gets out of the way.
   ------------------------------------------------------------------------- */

/*
 * Astra wraps the page in a width-limited, padded container. Our coded
 * templates are full bleed and own their own gutter, so the container gets out
 * of the way on all of them, not just the homepage. Elementor pages keep it.
 */
.motay-coded #content,
.motay-coded #content > .ast-container,
.motay-coded .site-content > .ast-container {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
}

.motay-coded #page,
.motay-coded .site-content {
    background: var(--motay-ink);
}

/*
 * The side gutter, owned in one place.
 *
 * On :root, not on .motay-page. It used to sit on .motay-page, which only
 * exists on the homepage, so every inner page lost its gutter entirely and the
 * wordmark sat flush against the edge of the window.
 */
:root {
    --motay-edge: clamp(1rem, 0.4rem + 2.2vw, 3rem);
}

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

.motay-masthead {
    background: var(--motay-ink);
    padding-block: 1rem;
    padding-inline: var(--motay-edge);
    border-bottom: 1px solid var(--motay-ink-2);
}

.motay-masthead__inner {
    display: flex;
    align-items: center;
    /* Wraps, so the open menu can take a full row of its own beneath the bar.
       Without this the row never breaks and the nav, which asks for 100%,
       is simply shrunk to whatever is left: 119px on a phone, which wrapped
       "Creators Connect" onto two lines and stretched the masthead to most
       of the screen with the wordmark floating in the middle of it. */
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 1600px;
    margin-inline: auto;
}

/* The wordmark is type, not an image, until the real logo files arrive. */
.motay-wordmark {
    display: block;
    margin-right: auto;
    font-family: var(--motay-font-display);
    font-weight: 900;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
    line-height: 0.85;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--motay-paper);
    text-decoration: none;
}

.motay-wordmark:hover {
    color: var(--motay-paper);
}

.motay-wordmark__line {
    display: block;
}

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

/* Navigation ------------------------------------------------------------- */

.motay-nav__list {
    display: flex;
    gap: clamp(1rem, 0.5rem + 1.4vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.motay-nav__list a:hover,
.motay-nav__list a:focus-visible {
    color: var(--motay-aqua);
}

/* Where you are. Announced by aria-current and shown by the underline, so it
   does not rely on colour alone. */
/* Orange, as the mockup has it, and it separates "where you are" from aqua,
   which already means hover. The underline is a graphic, needing 3:1: orange
   on ink is 6.7:1. */
.motay-nav__list a[aria-current="page"] {
    color: var(--motay-paper);
    text-decoration: underline;
    text-decoration-color: var(--motay-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* The toggle is the mobile control. Hidden once the menu fits. */
/* Hidden until the script has run: a button that does nothing is worse than
   no button. See the .motay-js rules below. */
.motay-nav-toggle {
    order: 3;
    width: 2.75rem;
    height: 2.75rem;
    display: none;
    place-items: center;
    background: transparent;
    border: 1px solid rgba(244, 242, 237, 0.25);
    border-radius: 8px;
    cursor: pointer;
}

.motay-nav-toggle__bars,
.motay-nav-toggle__bars::before,
.motay-nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--motay-paper);
    content: "";
}

.motay-nav-toggle__bars {
    position: relative;
    transition: background-color 0.15s ease;
}

.motay-nav-toggle__bars::before,
.motay-nav-toggle__bars::after {
    transition: transform 0.2s ease;
}

/*
 * Open, it is a cross.
 *
 * Three bars that stay three bars while the menu is open leave nothing saying
 * how to close it, and the button is the only thing that does.
 */
.motay-nav-toggle[aria-expanded="true"] .motay-nav-toggle__bars {
    background: transparent;
}

.motay-nav-toggle[aria-expanded="true"] .motay-nav-toggle__bars::before {
    transform: translateY(6px) rotate(45deg);
}

.motay-nav-toggle[aria-expanded="true"] .motay-nav-toggle__bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

/*
 * Every state stated, above Astra's specificity.
 *
 * Astra fills button:focus and button:hover with its own background, and
 * clicking the burger focuses it, so the moment the menu opened the button
 * became a plain white square with the cross invisible inside it. Exactly the
 * fault the player's close button had, for exactly the same reason.
 */
.motay-masthead .motay-nav-toggle,
.motay-masthead .motay-nav-toggle:hover,
.motay-masthead .motay-nav-toggle:focus,
.motay-masthead .motay-nav-toggle:active {
    background: transparent;
    box-shadow: none;
    color: var(--motay-paper);
    /*
     * Astra puts padding: 12px 24px on every button. Inside a fixed 44px box
     * that is 48px of side padding in 44px of width, so the content area
     * collapsed to nothing against the left padding and the icon sat 9px off
     * centre. The grid centring was doing its job on a box with no room in it.
     */
    padding: 0;
}

.motay-masthead .motay-nav-toggle:hover {
    border-color: var(--motay-aqua);
}

.motay-masthead .motay-nav-toggle:focus-visible {
    outline: 2px solid var(--motay-aqua);
    outline-offset: 2px;
}

.motay-masthead .motay-nav-toggle[aria-expanded="true"] {
    border-color: var(--motay-aqua);
}

/* The bars are drawn in paper, so they must not inherit a changed colour. */
.motay-nav-toggle__bars,
.motay-nav-toggle__bars::before,
.motay-nav-toggle__bars::after {
    background: var(--motay-paper);
}

.motay-nav-toggle[aria-expanded="true"] .motay-nav-toggle__bars {
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .motay-nav-toggle__bars,
    .motay-nav-toggle__bars::before,
    .motay-nav-toggle__bars::after {
        transition: none;
    }
}

.motay-nav-toggle__bars::before {
    position: absolute;
    top: -6px;
}

.motay-nav-toggle__bars::after {
    position: absolute;
    top: 6px;
}

/*
 * On a phone the navigation is a full width row beneath the bar.
 *
 * Visible by default. It is collapsed only under .motay-js, a class set on
 * <html> by one line in the head before anything paints, so a phone with
 * JavaScript off, or a script that fails to load, gets the whole menu as a
 * list rather than a burger that does nothing. That is the project's first
 * motion rule applied to the menu: never hide content in CSS waiting for a
 * script.
 *
 * The collapsed state follows aria-expanded, so the attribute a screen reader
 * hears is the single source of truth rather than a class that could disagree.
 */
.motay-nav {
    order: 4;
    /* A row of its own: basis 100% with no shrink, rather than width alone,
       which a flex item is free to ignore. Reset on desktop, where it must
       share the bar. */
    flex: 0 0 100%;
    width: 100%;
}

/*
 * The burger, up to 1200px.
 *
 * It was 768px when the menu had six short items. The review of 2026-09-21
 * made it seven, with "Programs & Initiatives" among them, and at 768 the
 * menu fell onto a second row under the wordmark with Give on a third.
 * Measured: wordmark, seven items and Give fit on one bar from about 1,120px.
 */
@media (max-width: 74.999rem) {
    .motay-js .motay-nav-toggle {
        display: grid;
    }

    .motay-js .motay-nav {
        display: none;
    }

    /*
     * Open, the menu is a panel over the page with its own scroll.
     *
     * It used to be a block pushed into the flow, so the page scrolled
     * underneath it: you could slide away, leave the menu open somewhere above
     * you, and have no way back to the button. Fixed, with the page behind
     * locked, means the only thing that scrolls is the menu itself.
     *
     * Scoped to .motay-js, like the collapsed state, so with no script the
     * menu is still an ordinary list in the page.
     */
    .motay-js .motay-nav-toggle[aria-expanded="true"] + .motay-nav {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1;
        padding-inline: var(--motay-edge);
        /* Clear of the bar: its 2.75rem button inside 1rem of padding. */
        padding-top: 5.25rem;
        padding-bottom: 2.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--motay-ink);
    }

    /* The bar sits above the panel, so the close button is always reachable. */
    .motay-js .motay-wordmark,
    .motay-js .motay-masthead__give,
    .motay-js .motay-nav-toggle {
        position: relative;
        z-index: 2;
    }

    /* A row that is obviously a target when touched or hovered. */
    .motay-nav .motay-nav__list a:hover,
    .motay-nav .motay-nav__list a:focus-visible {
        background: rgba(244, 242, 237, 0.06);
        color: var(--motay-aqua);
    }

    .motay-nav .motay-nav__list a {
        padding-inline: 0.5rem;
        margin-inline: -0.5rem;
        border-radius: 6px;
    }

    .motay-nav .motay-nav__list {
        flex-direction: column;
        gap: 0.25rem;
        padding-block: 0.75rem;
    }

    .motay-nav .motay-nav__list a {
        display: block;
        /* Roughly a 46px row. A thumb is about 44px and WCAG 2.5.8 sets 24px
           as the floor, so this clears both rather than sitting on the line. */
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--motay-ink-2);
    }
}

.motay-masthead__give {
    order: 2;
}

/* -------------------------------------------------------------------------
   Ticker
   ------------------------------------------------------------------------- */

.motay-ticker {
    /* Bottom only: the masthead above already draws the top line. */
    border-bottom: 1px solid var(--motay-ink-2);
    background: var(--motay-ink);
    overflow-x: auto;
    /* A horizontal scroller needs to be reachable by keyboard, and a
       scrollable region is not focusable by default in every browser. */
    scrollbar-width: none;
}

.motay-ticker::-webkit-scrollbar {
    display: none;
}

.motay-ticker__track {
    display: flex;
    align-items: stretch;
    min-width: max-content;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--motay-edge);
}

.motay-ticker__cell {
    display: flex;
    align-items: center;
    gap: 0.5em;
    max-width: none;
    margin: 0;
    padding: 0.7rem 1.25rem;
    border-left: 1px solid var(--motay-ink-2);
    font-size: var(--motay-step-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--motay-muted);
}

.motay-ticker__cell:first-of-type {
    border-left: 0;
    padding-left: 0;
}

.motay-ticker__label {
    color: var(--motay-muted);
}

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

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

.motay-ticker a {
    text-decoration: none;
}

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


@media (min-width: 75rem) {
    .motay-nav-toggle {
        display: none;
    }

    /*
     * The navigation sits beside the wordmark, not against the Give button.
     *
     * The wordmark carries margin-right:auto, which on a narrow screen
     * correctly pushes Give to the far edge. On a wide one it pushed the whole
     * navigation there too, which is not what the design does and left the
     * left half of the bar empty. So on desktop the wordmark takes a fixed gap
     * and the navigation carries the auto margin instead: it hugs the wordmark
     * and pushes everything after it to the right.
     *
     * Explicit order on all four, because a flex item with no order defaults
     * to 0 and lands next to the wordmark. That is exactly how the social
     * icons ended up in the middle of the bar.
     */
    .motay-wordmark {
        margin-right: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem);
    }

    .motay-nav {
        display: block;
        order: 1;
        /* Undo the phone's full row. width alone does not: flex-basis wins
           over width, and leaving it at 100% put the whole menu on a second
           line under the wordmark at every desktop width. */
        flex: 0 1 auto;
        width: auto;
        margin-right: auto;
    }

    .motay-social--masthead {
        order: 2;
    }

    .motay-masthead__give {
        order: 3;
    }
}

/* -------------------------------------------------------------------------
   Footer
   Site-wide, so it lives here with the masthead rather than in home.css.
   ------------------------------------------------------------------------- */

.motay-footer {
    background: var(--motay-ink);
    border-top: 1px solid var(--motay-ink-2);
}

.motay-footer__inner {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--motay-edge, clamp(1rem, 0.4rem + 2.2vw, 3rem));
}

.motay-footer__strip {
    padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
    border-bottom: 1px solid var(--motay-ink-2);
}

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

.motay-partners__item {
    display: grid;
    place-items: center;
    min-height: 5rem;
    padding: 1rem;
    border: 1px solid var(--motay-ink-2);
    border-radius: 4px;
    background: var(--motay-ink-2);
    text-align: center;
    font-size: var(--motay-step-sm);
    font-weight: 600;
}

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

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

.motay-footer__main {
    padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 4rem) 0;
}

.motay-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.motay-footer__blurb {
    margin: 1rem 0 0;
    max-width: 26ch;
    color: var(--motay-muted);
    font-size: var(--motay-step-base);
    line-height: 1.5;
}

.motay-footer__heading {
    margin-bottom: 0.85rem;
}

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

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

.motay-footer__links a:hover,
.motay-footer__links a:focus-visible {
    color: var(--motay-aqua);
    text-decoration: underline;
}

.motay-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
    padding-block: 1.25rem;
    border-top: 1px solid var(--motay-ink-2);
}

.motay-footer__copy,
.motay-footer__legal {
    margin: 0;
    max-width: none;
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
}

.motay-footer__legal a {
    color: var(--motay-muted);
}

.motay-footer__legal a:hover {
    color: var(--motay-paper);
}

@media (min-width: 48rem) {
    .motay-footer__grid {
        grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
        gap: 2.5rem;
    }
}

/* A small uppercase label above a block. */
.motay-eyebrow {
    margin: 0 0 1.25rem;
    color: var(--motay-muted);
    font-family: var(--motay-font-body);
    font-size: var(--motay-step-sm);
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}


/* -------------------------------------------------------------------------
   Partner logos in the footer
   ------------------------------------------------------------------------- */

.motay-partners__link {
    display: grid;
    gap: 0.6rem;
    place-items: center;
    text-decoration: none;
    color: inherit;
}

.motay-partners__logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 2.75rem;
    height: auto;
}

.motay-partners__name {
    display: block;
    color: var(--motay-paper);
    font-size: var(--motay-step-sm);
    font-weight: 600;
}

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



/* =========================================================================
   Moved out of home.css
   The section furniture is used by the Stories index, the archives and single
   posts as well as the homepage. While it lived in home.css those templates
   rendered with no section padding at all, and Astra's 1240px container went
   unreset, so the Stories index was both cramped and too narrow.
   ========================================================================= */
/* -------------------------------------------------------------------------
   Shared section furniture
   ------------------------------------------------------------------------- */

.motay-section {
    padding-block: var(--motay-section);
    padding-inline: var(--motay-edge);
}

.motay-section__inner {
    max-width: 1600px;
    margin-inline: auto;
}

.motay-section__head {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}

.motay-section__title {
    margin: 0;
    font-size: var(--motay-step-xl);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
}

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

/* Social accounts, in the masthead and the footer -------------------------
   A short mark rather than a brand logo: the real assets are the platforms'
   and an icon font is a request and a dependency for a handful of links. The
   accessible name is the account name, carried in sr-only text.
   ------------------------------------------------------------------------- */

.motay-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
}

.motay-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(244, 242, 237, 0.25);
    color: var(--motay-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: lowercase;
}

.motay-social a:hover {
    color: var(--motay-paper);
    border-color: rgba(244, 242, 237, 0.55);
}

.motay-social--masthead {
    margin-right: 0.25rem;
}

/* The masthead is tight below this, and Give has to survive. Since the
   ministry's review of 2026-09-21 the menu has seven items and needs about
   800px on its own, so the icons join it only where there is room for all
   of it: measured, the whole bar needs about 1,300px. They are in the footer
   of every page whatever the width. */
@media (max-width: 89.999rem) {
    .motay-social--masthead {
        display: none;
    }
}

.motay-social--footer {
    margin-top: 1.25rem;
}

/* -------------------------------------------------------------------------
   The What we do dropdown

   Opened by hover and by focus. :focus-within rather than a click handler,
   so a keyboard reaches it with nothing but Tab and no script at all: if
   live.js never loads, the menu still works.

   On a phone the whole navigation is already an accordion, so the children
   are simply shown, indented, rather than floating over anything.
   ------------------------------------------------------------------------- */

.motay-nav__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0 0 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.motay-nav__list .sub-menu a {
    font-size: 0.9375rem;
    color: var(--motay-muted);
}

.motay-nav__list .sub-menu a:hover,
.motay-nav__list .sub-menu a:focus-visible {
    color: var(--motay-paper);
}

@media (min-width: 75rem) {
    .motay-nav__list > li {
        position: relative;
    }

    .motay-nav__list .sub-menu {
        position: absolute;
        top: 100%;
        left: -1rem;
        z-index: 40;
        min-width: 15rem;
        /*
         * The gap above the panel is padding, not margin.
         *
         * As a margin it was dead space: moving the pointer from "Ministries"
         * down to the first item crossed 12 pixels that were neither, the
         * parent stopped being hovered, and the menu shut in your face. As
         * padding it belongs to the panel, so the trip is unbroken.
         */
        margin-top: 0;
        padding: 1.6rem 0.5rem 0.85rem;
        background-clip: padding-box;
        background: var(--motay-ink-2);
        border: 1px solid rgba(244, 242, 237, 0.12);
        border-radius: 10px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
        /* Hidden with visibility rather than display, so the browser can
           still find it for focus and so it could be transitioned later. */
        visibility: hidden;
        opacity: 0;
    }

    .motay-nav__list > li:hover > .sub-menu,
    .motay-nav__list > li:focus-within > .sub-menu,
    .motay-nav__list > li.is-open > .sub-menu {
        visibility: visible;
        opacity: 1;
    }

    .motay-nav__list .sub-menu {
        transition: opacity 0.15s ease;
    }

    /* Hover is not colour alone: the label is underlined as well, which also
       tells you which parent the open panel belongs to. */
    .motay-nav__list > li > a:hover,
    .motay-nav__list > li > a:focus-visible,
    .motay-nav__list > li:hover > a,
    .motay-nav__list > li:focus-within > a {
        color: var(--motay-aqua);
        text-decoration: underline;
        text-underline-offset: 0.4em;
        text-decoration-thickness: 2px;
    }

    /* The caret turns over while its panel is open. */
    .motay-nav__list > li.menu-item-has-children:hover > a::after,
    .motay-nav__list > li.menu-item-has-children:focus-within > a::after {
        transform: translateY(-0.1em) rotate(180deg);
    }

    @media (prefers-reduced-motion: reduce) {
        .motay-nav__list .sub-menu {
            transition: none;
        }
    }

    .motay-nav__list .sub-menu a {
        display: block;
        padding: 0.45rem 0.9rem;
        border-radius: 5px;
        white-space: nowrap;
    }

    .motay-nav__list .sub-menu a:hover,
    .motay-nav__list .sub-menu a:focus-visible {
        background: rgba(244, 242, 237, 0.07);
    }

    /* The little mark on a parent, so it reads as a menu before it is opened. */
    .motay-nav__list > li.menu-item-has-children > a::after {
        content: "";
        display: inline-block;
        margin-left: 0.45em;
        border: 0.28em solid transparent;
        border-top-color: currentColor;
        transform: translateY(0.18em);
        opacity: 0.7;
    }
}

/* -------------------------------------------------------------------------
   The highlights player

   Shared by the homepage's Watch again and the event pages, which is why it
   lives here rather than in either of their stylesheets. The markup is built
   by events.js as a native <dialog>, so focus trapping, Escape and the inert
   page behind come from the browser.
   ------------------------------------------------------------------------- */

.motay-play__icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.55em;
    border-style: solid;
    border-width: 0.4em 0 0.4em 0.68em;
    border-color: transparent transparent transparent currentColor;
    vertical-align: -0.05em;
}

.motay-player {
    width: min(64rem, 100vw - 2rem);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--motay-ink);
    color: var(--motay-paper);
    overflow: hidden;
}

.motay-player::backdrop {
    background: rgba(5, 7, 12, 0.86);
}

.motay-player__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
}

.motay-player__title {
    flex: 1;
    margin: 0;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-base);
    color: var(--motay-paper);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.motay-player__close {
    display: grid;
    place-items: center;
    padding: 0;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(244, 242, 237, 0.25);
    border-radius: 8px;
    background: transparent;
    color: var(--motay-paper);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

/* Every state stated, at a specificity above Astra's: its theme paints
   button:focus and button:hover with a filled background, which turned this
   into a white square the moment the dialog focused it on opening. */
.motay-player .motay-player__close,
.motay-player .motay-player__close:hover,
.motay-player .motay-player__close:focus,
.motay-player .motay-player__close:active {
    background: transparent;
    color: var(--motay-paper);
    box-shadow: none;
}

.motay-player .motay-player__close:hover,
.motay-player .motay-player__close:focus-visible {
    border-color: var(--motay-aqua);
    color: var(--motay-aqua);
    outline: 2px solid var(--motay-aqua);
    outline-offset: 2px;
}

.motay-player__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.motay-player__frame iframe,
.motay-player__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The page behind does not scroll while the player, or the menu, is open. */
.motay-player-open,
.motay-nav-open {
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   The mandate figures
   Here rather than in home.css because the About page shows them too, and a
   stylesheet is loaded by the templates that use it. The markup is one file,
   template-parts/figures.php, so the two pages cannot disagree.
   ------------------------------------------------------------------------- */

.motay-figures {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 0;
    margin: 0 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(244, 242, 237, 0.14);
    list-style: none;
}

.motay-figures__item {
    padding-inline: 1.25rem;
}

.motay-figures__item:first-child {
    padding-left: 0;
}

.motay-figures__figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15em;
    margin: 0 0 0.4rem;
    max-width: none;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-xl);
    line-height: 1;
    letter-spacing: -0.035em;
}

.motay-figures__unit {
    font-size: 0.45em;
    letter-spacing: -0.01em;
}

/* Each figure takes a different accent. All four are measured against ink-2:
   aqua 11.0:1, orange 6.5:1, the lifted blue 5.6:1, paper 15.5:1. The brand
   blue would be 4.1:1 here and is deliberately not used. */
.motay-figures__figure--cool  { color: var(--motay-aqua); }
.motay-figures__figure--warm  { color: var(--motay-orange); }
.motay-figures__figure--blue  { color: var(--motay-blue-link); }
.motay-figures__figure--paper { color: var(--motay-paper); }

.motay-figures__note {
    margin: 0;
    max-width: 24ch;
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
    line-height: 1.4;
}

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

    .motay-figures__item + .motay-figures__item {
        border-left: 1px solid rgba(244, 242, 237, 0.14);
    }
}