/*
 * The Stories index, a single story, and the cards they share.
 *
 * Loaded on the index, the archives and single posts. The homepage carries its
 * own copy of the bulletin rules in home.css; the card and filter rules live
 * here because only these templates use them.
 *
 * Tokens come from style.css.
 */

/* -------------------------------------------------------------------------
   Index head and filters
   ------------------------------------------------------------------------- */

.motay-index__head {
    margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.motay-index__head .motay-section__title {
    margin-bottom: 1rem;
}

.motay-filters {
    display: grid;
    gap: 1.25rem;
    padding-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
    margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
    border-bottom: 1px solid var(--motay-ink-2);
}

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

.motay-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.55em 1.1em;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--motay-ink-2);
    color: var(--motay-paper);
    font-size: var(--motay-step-sm);
    font-weight: 600;
    text-decoration: none;
}

.motay-chip:hover {
    color: var(--motay-aqua);
    box-shadow: inset 0 0 0 1px var(--motay-aqua);
}

/* The selected chip inverts: ink on paper, 17.1:1. */
.motay-chip--on,
.motay-chip--on:hover {
    background: var(--motay-paper);
    color: var(--motay-ink);
    box-shadow: none;
}

.motay-refine {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem 1rem;
    margin: 0;
}

.motay-refine__field {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    max-width: none;
}

.motay-refine__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--motay-muted);
}

.motay-refine__select {
    padding: 0.5em 0.75em;
    border: 1px solid var(--motay-ink-2);
    border-radius: 6px;
    background: var(--motay-ink-2);
    color: var(--motay-paper);
    font-family: var(--motay-font-body);
    font-size: var(--motay-step-sm);
}

.motay-refine__go {
    padding-block: 0.62em;
}

.motay-index__lead {
    margin-bottom: 0.75rem;
}

.motay-index__empty {
    margin: 2rem 0;
    color: var(--motay-muted);
    font-size: var(--motay-step-md);
}

/* -------------------------------------------------------------------------
   The story grid
   ------------------------------------------------------------------------- */

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

.motay-card-story {
    display: flex;
    flex-direction: column;
}

.motay-card-story__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

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

.motay-card-story__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.motay-card-story__body {
    display: block;
    padding-top: 0.85rem;
}

.motay-card-story__meta {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--motay-muted);
}

/* A colour per category. The blue is the lifted blue: the brand blue is
   4.25:1 on ink and fails as text. */
.motay-card-story--blue  .motay-card-story__meta { color: var(--motay-blue-link); }
.motay-card-story--cool  .motay-card-story__meta { color: var(--motay-aqua); }
.motay-card-story--warm  .motay-card-story__meta { color: var(--motay-orange); }
.motay-card-story--live  .motay-card-story__meta { color: var(--motay-orange); }
.motay-card-story--muted .motay-card-story__meta { color: var(--motay-muted); }

.motay-card-story__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-card-story__line {
    display: block;
    margin-top: 0.4rem;
    color: var(--motay-muted);
    font-size: var(--motay-step-base);
    line-height: 1.5;
}

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

.motay-card-story__link:hover .motay-card-story__title {
    color: var(--motay-aqua);
}

/* -------------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------------- */

.motay-page .navigation.pagination {
    margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.motay-page .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.motay-page .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.5em 0.75em;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--motay-ink-2);
    color: var(--motay-paper);
    font-size: var(--motay-step-sm);
    font-weight: 600;
    text-decoration: none;
}

.motay-page .page-numbers:hover {
    color: var(--motay-aqua);
    box-shadow: inset 0 0 0 1px var(--motay-aqua);
}

.motay-page .page-numbers.current {
    background: var(--motay-paper);
    color: var(--motay-ink);
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   A single story
   ------------------------------------------------------------------------- */

.motay-single {
    padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0;
    padding-inline: var(--motay-edge);
}

.motay-single__head-inner,
.motay-single__body,
.motay-single__foot {
    /* A measured column. Body copy across a 1440px screen is unreadable
       however good the type is. */
    max-width: 44rem;
    margin-inline: auto;
}

.motay-single__meta {
    margin: 0 0 1rem;
    max-width: none;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--motay-muted);
}

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

.motay-single--blue  .motay-single__meta a { color: var(--motay-blue-link); }
.motay-single--cool  .motay-single__meta a { color: var(--motay-aqua); }
.motay-single--warm  .motay-single__meta a { color: var(--motay-orange); }
.motay-single--live  .motay-single__meta a { color: var(--motay-orange); }
.motay-single--muted .motay-single__meta a { color: var(--motay-paper); }

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

.motay-single__title {
    margin: 0;
    font-size: var(--motay-step-xl);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

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

.motay-single__byline {
    margin: 1.25rem 0 0;
    max-width: none;
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
}

.motay-single__cover {
    margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
    max-width: 72rem;
    margin-inline: auto;
}

.motay-single__cover-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.motay-single__cover figcaption {
    margin-top: 0.6rem;
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
}

.motay-single__body {
    padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-size: var(--motay-step-md);
    line-height: 1.65;
}

.motay-single__body > * {
    margin-block: 0 1.25em;
}

.motay-single__body > *:last-child {
    margin-bottom: 0;
}

.motay-single__body p {
    max-width: none;
}

.motay-single__body h2,
.motay-single__body h3 {
    margin-top: 2em;
}

.motay-single__body blockquote {
    margin-inline: 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--motay-orange);
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-lg);
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.motay-single__body img {
    height: auto;
    border-radius: 4px;
}

.motay-single__foot {
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

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

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

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

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

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

/* =========================================================================
   Moved out of home.css
   The bulletin and the story list appear on the homepage AND on the Stories
   index, so they live here and this stylesheet loads on both. Leaving them in
   home.css meant the index rendered them unstyled.
   ========================================================================= */
/* -------------------------------------------------------------------------
   What's happening
   ------------------------------------------------------------------------- */

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

/* The bulletin ---------------------------------------------------------- */

.motay-bulletin {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: var(--motay-ink-2);
    isolation: isolate;
}

.motay-bulletin__link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 24rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

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

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

/* The play mark sits in the middle, on its own, so it is legible whatever the
   photograph is doing behind it. */
/*
 * z-index matters here.
 *
 * The text block below is positioned and comes later in the DOM, so with both
 * on auto it painted over this one: its gradient reaches about 55% opacity at
 * the middle of the card, which turned a solid paper circle into a flat grey
 * disc with the triangle invisible. Computed styles looked perfectly correct
 * throughout; only the rendered pixels showed it.
 */
.motay-bulletin__play {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    padding-left: 0.25rem;
    border-radius: 50%;
    background: var(--motay-paper);
    color: var(--motay-ink);
}

.motay-bulletin__body {
    position: relative;
    display: block;
    width: 100%;
    padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) clamp(1.1rem, 0.8rem + 1vw, 1.75rem) clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
    /* Its own bed, sized to the text, for the same reason the cards have one:
       legibility must not depend on what is in that part of 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%
    );
}

/*
 * Ink on the live red, not white.
 *
 * The mockup sets this badge in white on the red, which is 3.55:1 and fails:
 * badge type is far too small to count as large text. Ink on the same red is
 * 5.4:1.
 */
.motay-bulletin__badge {
    display: inline-block;
    margin-bottom: 0.85rem;
    padding: 0.3em 0.75em;
    border-radius: 999px;
    background: var(--motay-live);
    color: var(--motay-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.motay-bulletin__title {
    display: block;
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-lg);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--motay-paper);
}

.motay-bulletin__line {
    display: block;
    margin-top: 0.6rem;
    max-width: 44ch;
    color: var(--motay-paper);
    font-size: var(--motay-step-base);
    line-height: 1.5;
}

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

/* The story list -------------------------------------------------------- */

.motay-happening__list {
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.motay-story {
    border: 1px solid var(--motay-ink-2);
    border-radius: 4px;
    background: var(--motay-ink-2);
}

.motay-story__link {
    display: block;
    padding: clamp(1rem, 0.8rem + 0.7vw, 1.35rem);
    text-decoration: none;
    color: inherit;
}

.motay-story__meta {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--motay-muted);
}

/* A colour per category. The blue one is the lifted blue, not the brand blue:
   the brand blue is 4.1:1 on this surface and fails. */
.motay-story--blue  .motay-story__meta { color: var(--motay-blue-link); }
.motay-story--cool  .motay-story__meta { color: var(--motay-aqua); }
.motay-story--warm  .motay-story__meta { color: var(--motay-orange); }
.motay-story--muted .motay-story__meta { color: var(--motay-muted); }

.motay-story__pinned {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    background: var(--motay-aqua);
    color: var(--motay-on-aqua);
    letter-spacing: 0.08em;
}

/*
 * A red dot beside paper text, not white text inside a red fill.
 *
 * The same treatment as the LIVE badge, for the same measured reason: white
 * on the live red is 3.5:1, and badge text is too small to count as large
 * text, so it fails. The dot carries the colour and the word stays paper on
 * the card, which is 15.8:1. The live token is for this and the LIVE bar and
 * nothing else.
 */
.motay-story__new {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-left: 0.5em;
    color: var(--motay-paper);
    letter-spacing: 0.08em;
}

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

.motay-story__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-story__line {
    display: block;
    margin-top: 0.35rem;
    color: var(--motay-muted);
    font-size: var(--motay-step-base);
    line-height: 1.45;
}

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

.motay-happening__all {
    justify-content: center;
    width: 100%;
}

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

@media (min-width: 64rem) {
    .motay-happening__grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }

    /*
     * No News Flash this week, so no card for the first column: the stories
     * take the whole width and lay themselves out across it, rather than
     * dropping into the left column and leaving the right half of the row
     * empty. That empty half is what the owner saw on live and read, fairly,
     * as the section being broken.
     */
    .motay-happening__grid--list-only {
        grid-template-columns: minmax(0, 1fr);
    }

    .motay-happening__grid--list-only .motay-happening__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    /*
     * "See everything" is the last child of the list, so the moment that list
     * became three columns the link took a cell of its own and stretched to
     * fill it: a pill the size of a story card sitting beside the stories.
     * It belongs on its own row, at the size of a button.
     */
    .motay-happening__grid--list-only .motay-happening__all {
        grid-column: 1 / -1;
        justify-self: start;
        /* The rule above sets width: 100%, which is right when this button
           sits in the narrow column beside the bulletin and wrong when the
           list runs the full width: justify-self alone cannot shrink an
           element that has been told to be as wide as its column. */
        width: auto;
    }

    .motay-bulletin__link {
        min-height: 30rem;
    }
}

/* -------------------------------------------------------------------------
   The announcements archive
   ------------------------------------------------------------------------- */

.motay-notices__group + .motay-notices__group {
    margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

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

.motay-notice {
    position: relative;
    padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
    padding-left: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem);
    border-radius: 4px;
    background: var(--motay-ink-2);
}

/* A colour on the edge rather than on the text, so the state reads at a
   glance without tinting the words. */
.motay-notice::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 4px 0 0 4px;
    background: var(--motay-muted);
}

.motay-notice--cool::before  { background: var(--motay-aqua); }
.motay-notice--blue::before  { background: var(--motay-blue-link); }
.motay-notice--muted::before { background: var(--motay-ink-2); }

/* Finished notices sit back a little, without dropping any text below the
   contrast threshold: the title stays paper and only the surround changes. */
.motay-notice--muted {
    background: none;
    box-shadow: inset 0 0 0 1px var(--motay-ink-2);
}

.motay-notice__when {
    margin: 0 0 0.45rem;
    max-width: none;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--motay-muted);
}

.motay-notice__title {
    margin: 0;
    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-notice__line {
    margin: 0.4rem 0 0;
    max-width: 64ch;
    color: var(--motay-muted);
    font-size: var(--motay-step-base);
    line-height: 1.5;
}

.motay-notice__action {
    margin: 0.85rem 0 0;
    max-width: none;
}

.motay-notice__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--motay-blue-link);
    font-size: var(--motay-step-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

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

/* -------------------------------------------------------------------------
   About
   ------------------------------------------------------------------------- */

.motay-about__hero {
    padding-bottom: 0;
}

.motay-about__hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    align-items: center;
}

.motay-about__title {
    margin: 0;
    font-size: var(--motay-step-xl);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

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

.motay-about__figure {
    margin: 0;
}

.motay-about__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* The sections the ministry's review added: the mandate on a raised band,
   then the leadership and the structure on the page ground, where the work
   cards (which are themselves raised) still read as cards. */
.motay-about__band {
    background: var(--motay-ink-2);
    color: var(--motay-paper);
}

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

.motay-about__band .motay-section__standfirst,
.motay-about__part .motay-section__standfirst {
    margin: 1rem 0 clamp(1.75rem, 1rem + 2.5vw, 3rem);
}

/* The menu jumps to these, and the masthead would otherwise cover the top of
   the heading it lands on. */
#who-we-are,
#mandate,
#leadership,
#structure {
    scroll-margin-top: 6rem;
}

.motay-about__subhead {
    margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 1.25rem;
    color: var(--motay-aqua);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.motay-about__more {
    margin: 2rem 0 0;
}

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

/* Leadership: any number of people, one to four across. */
.motay-leaders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    margin: clamp(1.75rem, 1rem + 2.5vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}

.motay-leaders__photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: var(--motay-ink-2);
    margin-bottom: 1rem;
}

/* A podium photograph is wider than the frame, and the face is in the upper
   half of it, so the crop keeps the top. */
.motay-leaders__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.motay-leaders__name {
    margin: 0;
    color: var(--motay-paper);
    font-size: var(--motay-step-md);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

.motay-leaders__role {
    margin: 0.4rem 0 0;
    color: var(--motay-aqua);
    font-size: var(--motay-step-sm);
    font-weight: 600;
}

.motay-leaders__line {
    margin: 0.75rem 0 0;
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
    line-height: 1.5;
}

/* The body reuses the story reading column, so there is one set of prose
   styles on the site rather than two that drift. */
.motay-about__body-wrap {
    padding-top: 0;
}

/*
 * The timeline, for when the ministry supplies "How we got here".
 *
 * A description list in the page content: an editor writes
 * <dl><dt>Beginnings</dt><dd>...</dd></dl> and it comes out as the design has
 * it. Styled now so the content can be pasted in without any further work.
 */
.motay-single__body dl {
    display: grid;
    gap: 0;
    margin-block: 1.5em;
    border-top: 1px solid var(--motay-ink-2);
}

.motay-single__body dt {
    padding-top: 1rem;
    color: var(--motay-aqua);
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-md);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.motay-single__body dd {
    margin: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--motay-ink-2);
    color: var(--motay-muted);
    font-size: var(--motay-step-base);
    line-height: 1.55;
}

/* -------------------------------------------------------------------------
   The call to action band
   Ink on the orange. White on this orange is 2.9:1 and fails at every size.
   ------------------------------------------------------------------------- */

.motay-cta {
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    padding-inline: var(--motay-edge);
    background: var(--motay-orange);
    color: var(--motay-on-orange);
    text-align: center;
}

.motay-cta__title {
    margin: 0;
    /*
     * Ink, stated rather than inherited, for the same reason as the quote:
     * Astra sets a colour on h1 to h6, which beats the colour this band sets
     * on itself. It measured paper on orange at 2.87:1.
     */
    color: var(--motay-on-orange);
    font-size: var(--motay-step-lg);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
}

.motay-cta__line {
    margin: 0.85rem auto 1.75rem;
    max-width: 44ch;
    font-size: var(--motay-step-md);
    line-height: 1.5;
}

/* An ink pill on the orange: paper on ink is 17.1:1. */
.motay-btn--ink {
    background: var(--motay-ink);
    color: var(--motay-paper);
}

.motay-cta .motay-btn[disabled] {
    cursor: not-allowed;
}

.motay-cta__note {
    margin: 0.85rem 0 0;
    max-width: none;
    font-size: var(--motay-step-sm);
    font-weight: 600;
}

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

@media (min-width: 56rem) {
    .motay-about__hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2rem, 1rem + 4vw, 4rem);
    }

    .motay-single__body dl {
        grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
        column-gap: 1.5rem;
    }

    .motay-single__body dt {
        grid-column: 1;
    }

    .motay-single__body dd {
        grid-column: 2;
        padding-top: 1rem;
    }
}