/* ------------------------------------------------------------------
   Newsletter capture.

   Layout and states only. The controls themselves are the site's own:
   `.form-field input` (10px radius, #e2e1e5 border, black on focus) and
   `.primary-btn` (black, 48px pill) — the same pair the account modals use.
   Nothing here restyles them, so a future change to style.css carries through.

   Namespaced .msm-nl* so nothing collides with the 200KB style.css.
   Loaded from partials/head.blade.php rather than pushed onto
   @stack('component-css'), which resolves inline in the head before the
   later includes get a chance to push to it.
   ------------------------------------------------------------------ */

.msm-nl {
    width: 100%;
}

.msm-nl__heading {
    margin: 0 0 6px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.msm-nl__copy {
    margin: 0 0 22px;
    line-height: 1.4;
    max-width: 44ch;
    opacity: 0.68;
}

/* The field is labelled for screen readers; the placeholder carries it visually. */
.msm-nl__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.msm-nl__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- the row ---------- */

.msm-nl__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 520px;
}

.msm-nl__field {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 0;
}

/* One state, not two: the field always looks the way it used to look only on
   focus — white, black hairline, pill. A greyed-out resting state read as
   disabled. Rounded to 48px to match .primary-btn, with the horizontal padding
   a pill needs so the text is not jammed against the curve.

   Same specificity as `.form-field input` in style.css, and this file loads
   after it, so these win without !important. 16px stops iOS zooming on focus. */
.msm-nl__field input {
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 48px;
    padding: 13px 24px;
    color: #000;
}

.msm-nl__field input::placeholder {
    color: #9a9a94;
}

/* Focus is the same shape, marked by the ring rather than a colour change. */
.msm-nl__field input:focus {
    background-color: #fff;
    border: 1px solid #000;
    outline: 2px solid #000;
    outline-offset: 2px;
}

.msm-nl__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    /* Match the field's height so the pill and the box sit on the same baseline,
       and run a little wider than the stock .primary-btn (12px 48px). */
    padding: 13px 56px;
    line-height: 1.2;
}

.msm-nl__btn[disabled] {
    cursor: default;
    opacity: 0.6;
}

.msm-nl.is-busy .msm-nl__spinner {
    display: inline-block !important;
}

/* ---------- messages ---------- */

.msm-nl__msg {
    margin: 10px 0 0;
    line-height: 1.45;
}

.msm-nl__msg:empty {
    display: none;
}

.msm-nl.is-error .msm-nl__msg {
    color: #b3261e;
}

.msm-nl.is-done .msm-nl__msg {
    font-weight: 600;
}

.msm-nl__note {
    margin: 10px 0 0;
    line-height: 1.45;
    opacity: 0.55;
}

/* Once subscribed the fields go away and the message carries the result. */
.msm-nl.is-done .msm-nl__row,
.msm-nl.is-done .msm-nl__note {
    display: none;
}

/* ---------- variant: band (end of article) ----------
   Hairline rules and nothing else: no card, no shadow, no fill. It should
   read as the last section of the article rather than an ad under it. */

/* The divider rules are gone: the yellow stripe is the separation now. */
.msm-nl--band {
    padding: 0;
    margin: 0;
}

/* Full-bleed yellow stripe.

   Flush to the page edges left and right, and flush to whatever follows it,
   but held 50px clear of the tags above so it does not read as glued to them.
   The tags' own trailing padding is zeroed further down, so this margin is the
   whole gap rather than being added to it. */
.msm-nl-stripe {
    background: #f5ff95;
    color: #000;
    padding: 55px 0;
    margin: 50px 0 0;
}

/* Desktop: words on the left, form on the right. Two columns keep the block
   short, which matters here — it sits just above the footer. */
@media (min-width: 992px) {
    .msm-nl--band {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 56px;
    }

    .msm-nl--band .msm-nl__text {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* One line. The controls below were narrowed to free up the room for it. */
    .msm-nl--band .msm-nl__heading {
        font-size: 2.333rem;
        line-height: 1.05;
        white-space: nowrap;
    }

    /* The sub is one line. The 44ch cap on .msm-nl__copy is what wrapped it. */
    .msm-nl--band .msm-nl__copy {
        max-width: none;
        margin-bottom: 0;
        font-size: 1rem;
        white-space: nowrap;
    }

    /* The form column sizes to its contents rather than to a fixed width, so
       changing the button cannot squeeze the field. The words take the rest.

       The padding compensates for the note underneath: `align-items: center`
       centres the whole form, note included, which left the field and button
       sitting a little above the heading's centre. Pushing the form down by
       roughly the note's height puts the row itself on the centre line. */
    .msm-nl--band .msm-nl__form {
        /* 630 = two 310px controls plus the 10px gap. */
        flex: 0 0 630px;
        padding-top: 31px;
    }

    .msm-nl--band .msm-nl__row {
        max-width: none;
        flex-wrap: nowrap;
    }

    /* Both fixed at the same width rather than sharing the column.

       `flex: 1 1 0` with `min-width: 0` should have split it evenly and did
       not — the button kept 307px to the field's 273 because its label is
       nowrap. A fixed basis takes the question away. 310 clears the button's
       content (275px of text plus 2x16 padding) with a little room to spare,
       and the words still get 674px against a heading that needs 538. */
    .msm-nl--band .msm-nl__field,
    .msm-nl--band .msm-nl__action {
        flex: 0 0 310px;
        width: 310px;
        min-width: 0;
    }

    .msm-nl--band .msm-nl__btn {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Centred under the controls rather than hanging off the left edge. */
    .msm-nl--band .msm-nl__note,
    .msm-nl--band .msm-nl__msg {
        text-align: center;
    }
}

/* The sub and the small print share one grey, set explicitly rather than with
   opacity so they match exactly on the yellow. */
.msm-nl--band .msm-nl__copy,
.msm-nl--band .msm-nl__note {
    color: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

/* Close the seam above the stripe.

   The credits/tags section immediately before it carries `pb-3`, and that
   padding is page-white — it showed as a thin white band between the tags and
   the yellow. Zeroed only where the stripe actually follows, so the same
   component is untouched everywhere else on the site. */
.credits-area:has(+ .msm-nl-stripe) {
    padding-bottom: 0 !important;
}

/* Fallback for browsers without :has() — the stripe absorbs the tags' padding
   into its own 50px gap so the spacing lands the same either way. */
@supports not selector(:has(*)) {
    .msm-nl-stripe {
        margin-top: 34px;
    }
}

/* Between tablet and desktop there is not enough width to hold the heading on
   one line beside the form, so it wraps again rather than overflowing. */
@media (min-width: 992px) and (max-width: 1299.98px) {
    .msm-nl--band .msm-nl__heading {
        white-space: normal;
        font-size: 2rem;
        text-wrap: balance;
    }

    .msm-nl--band .msm-nl__copy {
        white-space: normal;
    }

    .msm-nl--band .msm-nl__form {
        flex: 0 0 420px;
    }
}

/* ---------- variant: hero (homepage marquee) ---------- */

.msm-nl--hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.msm-nl--hero .msm-nl__row {
    max-width: 540px;
}

.msm-nl--hero .msm-nl__msg,
.msm-nl--hero .msm-nl__note {
    text-align: center;
}

/* ---------- phone ---------- */

@media (max-width: 575.98px) {
    /* The band sits inside the stripe, so its own padding and margin stacked
       on top of the stripe's: 55 + 40 + 34 = 129px of yellow above the
       headline against 89px below it. The stripe alone sets the inset now,
       and it sets the same one top and bottom. */
    .msm-nl--band {
        padding: 0;
        margin-top: 0;
    }

    .msm-nl-stripe {
        padding: 40px 0;
        /* 50px of white between the tags and the yellow was reading as a
           dropped-out section on a narrow screen. */
        margin-top: 24px;
    }

    .msm-nl__row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .msm-nl__field,
    .msm-nl__btn {
        flex: 1 1 100%;
        width: 100%;
    }

    /* The button is 100% of .msm-nl__action, but the action column itself is
       a `flex: 0 1 auto` item, so it only ever grew to the button's own
       content width - a 260px button in a 360px row. The rule above cannot
       reach it: it targets .msm-nl__btn, which is the child. */
    .msm-nl--band .msm-nl__action {
        flex: 1 1 100%;
        width: 100%;
    }
}


/* ------------------------------------------------------------------
   Slide-in newsletter panel

   Enters from the left edge rather than covering the page — the pattern
   It's Nice That uses, and the only popup among the eight design
   publications surveyed. There is no scrim on purpose: the article stays
   readable behind it, which is what makes meeting it mid-read tolerable.
   Because it never blocks the page, focus is not trapped.

   Light grey ground with the rotating M at the top-left, close at the
   top-right, then headline, sub, stacked field and button, small print.
   ------------------------------------------------------------------ */

.msm-nl-pop {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1200;
    width: min(560px, 100vw);
    /* Parked off-canvas and inert until opened. visibility is delayed on the
       way out so the panel is still painted while it slides away. */
    transform: translateX(-101%);
    visibility: hidden;
    transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.36s;
}

.msm-nl-pop.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .msm-nl-pop,
    .msm-nl-pop.is-open {
        transition: visibility 0s;
    }
}

/* Full height, square, flush to the edge — the shape It's Nice That uses.
   Content sits at the top; the rest of the column is deliberately empty. */
.msm-nl-pop__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ededeb;
    color: #000;
    padding: 40px 52px;
    border-radius: 0;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.16);
    overflow-y: auto;
    /* Clears the notch / home indicator when the panel runs edge to edge. */
    padding-top: calc(40px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

/* ---------- head: logo left, close right ---------- */

.msm-nl-pop__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 76px;
}

/* The mark is near-black with a transparent surround, so it needs no plate. */
.msm-nl-pop__logo {
    display: block;
    width: 84px;
    height: 84px;
    margin-left: -6px; /* optically flush with the text below it */
    pointer-events: none;
}

.msm-nl-pop__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    margin: -4px -8px 0 0;
    padding: 0;
    color: #000;
    background: transparent;
    border: 0;
    border-radius: 50%;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.msm-nl-pop__close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.07);
}

.msm-nl-pop__close:focus-visible {
    opacity: 1;
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ---------- the form inside the panel ---------- */

.msm-nl--popup .msm-nl__heading {
    font-size: 2.556rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.msm-nl--popup .msm-nl__copy {
    font-size: 1.056rem;
    line-height: 1.45;
    max-width: none;
    margin-bottom: 30px;
    color: rgba(0, 0, 0, 0.55);
    opacity: 1;
}

/* Stacked: a 380px panel has no room for a field and a pill side by side. */
.msm-nl--popup .msm-nl__row {
    flex-wrap: wrap;
    gap: 10px;
    max-width: none;
}

.msm-nl--popup .msm-nl__field,
.msm-nl--popup .msm-nl__btn {
    flex: 1 1 100%;
    width: 100%;
}

.msm-nl--popup .msm-nl__btn {
    padding-left: 16px;
    padding-right: 16px;
}

/* No outline. White on the grey is enough separation on its own, and the black
   hairline read as heavy against everything else in the panel. Focus still gets
   a visible ring, so this costs nothing for keyboard users. */
.msm-nl--popup .msm-nl__field input {
    background-color: #fff;
    border-color: transparent;
}

.msm-nl--popup .msm-nl__field input:focus {
    border-color: transparent;
    outline: 2px solid #000;
    outline-offset: 2px;
}

.msm-nl--popup .msm-nl__note,
.msm-nl--popup .msm-nl__msg {
    text-align: center;
}

.msm-nl--popup .msm-nl__note {
    font-size: 0.778rem;
    color: rgba(0, 0, 0, 0.55);
    opacity: 1;
}

/* Pushed to the foot of the column by the auto margin, the way It's Nice That
   sit theirs — out of the way of the ask, but present before anyone signs up. */
.msm-nl-pop__legal {
    margin: auto 0 0;
    padding-top: 32px;
    font-size: 0.722rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.45);
}

.msm-nl-pop__legal a {
    color: rgba(0, 0, 0, 0.7);
    text-decoration: underline;
}

.msm-nl-pop__legal a:hover {
    color: #000;
}

/* ---------- phone: a bottom sheet, never a full-screen interstitial ----------
   Google treats intrusive mobile interstitials as a ranking problem, which
   matters given the SEO work in flight. */

@media (max-width: 767.98px) {
    .msm-nl-pop {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        /* Explicitly not full height here: a full-height panel on a phone is a
           full-screen interstitial, which is the thing Google penalises. */
        height: auto;
        width: 100%;
        transform: translateY(101%);
    }

    .msm-nl-pop.is-open {
        transform: translateY(0);
    }

    .msm-nl--popup .msm-nl__heading {
        font-size: 1.722rem;
    }

    .msm-nl--popup .msm-nl__copy {
        font-size: 0.944rem;
        margin-bottom: 20px;
    }

    .msm-nl-pop__head {
        margin-bottom: 20px;
    }

    .msm-nl-pop__legal {
        padding-top: 18px;
    }

    .msm-nl-pop__panel {
        height: auto;
        overflow-y: visible;
        border-radius: 20px 20px 0 0;
        padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .msm-nl-pop__logo {
        width: 52px;
        height: 52px;
    }
}

/* ---------- homepage hero: let the field use the row it is given ----------
   .msm-nl--hero centres its children, and align-items:center shrinks the form
   to its content instead of stretching it — so the row never reached the 540px
   it is allowed and the input came out 227px wide. Its content box was 179px
   against a placeholder needing 205px, which is why the address was clipped. */
.msm-nl--hero .msm-nl__form {
    width: 100%;
}

/* Giving the form its full width is what stopped align-items:center from
   centring anything: the row is narrower than the form it now sits in, so it
   parked against the left edge while the note, which is full width with
   text-align:center, stayed in the middle. Centre the row on its own. */
.msm-nl--hero .msm-nl__row {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- popup copy ----------
   Two lines, on a column clearly narrower than the heading above it (456px on
   desktop, 350px on a phone).

   360px, not 280px: at 280 the first line came to 277px in Brockmann's fallback
   — three pixels of slack — so any wider font metric, and the webfont not having
   arrived yet is the common one, tipped it to three lines. 360 leaves about 45px
   even on the fallback.

   Checked against both copy variants, since the A/B test switches on 22 Sep and
   B does not share A's words:

     A  "Includes freebie bundle, unseen BTS insights and more."
        ...unseen BTS = 294px, ...insights = 363px  -> breaks after "BTS"
     B  "Stay on top of this week's design. Insights, top picks & more."
        ...Insights, = 343px, ...top = 376px        -> breaks after "Insights,"

   Both land on two lines anywhere in 343-363px. Re-measure if the copy changes
   rather than nudging this. text-wrap:pretty stops either ending on a runt. */
.msm-nl--popup .msm-nl__copy {
    max-width: 360px;
    text-wrap: pretty;
}

@media (min-width: 576px) {
    /* The block sat tight under the logo on desktop; it wants air. */
    .msm-nl--popup {
        margin-top: 30px;
    }
}

/* ---------- homepage hero on phones ----------
   The row runs the full width of the band, so on a phone the field and button
   ran into both edges of the yellow with nothing either side of them. */
@media (max-width: 575.98px) {
    .msm-nl--hero {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* ---------- band: note under the button, headline sized below desktop ----------

   The note sits in a column with the button (see newsletter-form), so it is
   centred under the button at every width rather than under the whole form. */
.msm-nl--band .msm-nl__action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.msm-nl--band .msm-nl__action .msm-nl__btn {
    width: 100%;
}

.msm-nl--band .msm-nl__action .msm-nl__note {
    text-align: center;
    margin: 10px 0 0;
}

/* Below 992px the band had no heading size of its own and fell back to
   .size-37, which shrinks to about 22px on a tablet against 19.5px copy — the
   headline barely read as one. Give it a real step up from the sub. */
@media (max-width: 991.98px) {
    .msm-nl--band .msm-nl__heading {
        font-size: 2rem;
        line-height: 1.1;
    }
}

@media (max-width: 575.98px) {
    .msm-nl--band .msm-nl__heading {
        font-size: 1.75rem;
    }
}