/* ────────────────────────── /updates ──────────────────────────
   The public archive. The posts themselves are devUpdates.css, shared with the home page -
   everything here is the page around them.

   Unlike the home page, the cards are not sitting inside a dark .EventInfo panel, so this
   file supplies the surface they need to read against. */

.ua_page {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 12px 48px;
}

/* main.css styles the bare `header` element for the site's page headers - 96px tall and a
   flex row - which stacks the title and the standfirst on top of each other here. Reset
   rather than renamed to a div, because it is a page header and should say so. */
.ua_head {
    display: block;
    width: auto;
    height: auto;
    margin-top: 0;
    padding: 8px 4px 4px;
}

/* Not the 48px/64px h1 from main.css: that is sized for the gameweek number on a dark panel,
   and two words of it fills a phone. */
/* Dark ink, like .Status__SectionHeading on the home page. The body gradient runs light green
   to teal and this text sits over the light end of it, where the white the cards use for their
   own headings disappears. */
.ua_head h1 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.2;
    color: var(--green900);
}
@media (min-width: 43.75em) {
    .ua_head h1 { font-size: 38px; }
}

.ua_sub {
    margin: 0 0 8px;
    color: var(--green800);
    font-size: 15px;
    line-height: 1.45;
    max-width: 52ch;
}

/* The month a run of posts belongs to. An eyebrow over the cards rather than a heading on a
   surface of its own - it is a divider, and the cards are the content. */
.ua_month {
    margin: 22px 4px 8px;
    font-family: "Montserrat", "Arial", "Helvetica Neue", "Helvetica", "sans-serif";
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green800);
}
.ua_month:first-child {
    margin-top: 12px;
}

.ua_empty {
    color: var(--green800);
    padding: 24px 4px;
}

.ua_foot {
    margin-top: 32px;
    text-align: center;
}
.ua_foot .btn {
    display: inline-block;
    min-width: 220px;
    line-height: 38px;
}

/* One size for the sentence and the address both: main.css drops an inline <a> to a smaller
   size here, which left the email as fine print inside the line asking you to use it. */
.ua_contact,
.ua_contact a {
    font-size: 14px;
    line-height: 1.5;
}
.ua_contact {
    margin-top: 18px;
    color: var(--green900);
}
.ua_contact a {
    color: var(--green800);
    text-decoration: underline;
}

/* A note here has no run of siblings to be divided from - the archive interleaves them with
   features in date order - so it gets its own margin back rather than sitting flush against
   whatever kind of post happens to follow it. */
.ua_page .DevUpdate--note {
    margin-bottom: 12px;
}