/* Membership — the paywall card a reader meets when an article stops.

   Rendered by `partials/content-cta.hbs`, which Ghost pulls in automatically
   at the end of gated content. That means this card sits INSIDE
   `<div class="gh-content gh-canvas">` (article.hbs:27), which is the single
   most important fact about styling it — see THE CASCADE below.

   ROOT FONT-SIZE IS 10px on this site (`html{font-size:62.5%}` in
   screen.css), NOT the 16px a rem value normally implies. The approved design
   spec was written in rem against a 16px root: 1.5rem title, 1.8rem padding,
   1.15rem price. Pasted verbatim those become 15px, 18px and 11.5px — the
   whole card at 62.5% of its intended size. Every value below is therefore in
   px, converted at the rate the spec intended (spec rem x 16). Do not
   "restore" the rem values; that is the trap AGENTS.md warns about for the
   section partials, and here it would silently shrink an entire component. */

.gh-content .mw-wall,
.mw-wall {
    /* `width` and `justify-self` are both load-bearing, and this is a GRID
       trap rather than a styling preference. The card is a grid item in the
       article's `main` track (760px). With `max-width:540px` and `margin:auto`
       it rendered at 375px — because in CSS Grid an auto inline margin
       DISABLES the default `justify-self:stretch`, so the item falls back to
       its fit-content width and the auto margins swallow the remaining space.
       The card was shrink-wrapping its own longest line, which is what made
       everything inside it feel cramped: the pitch's 40ch measure had no room
       to act, and the copy broke into orphans. A definite width restores the
       intended 540px; `justify-self` centres it in the track. */
    width: min(540px, 100%);
    justify-self: center;
    max-width: 540px;
    padding: 28px;
    margin: 56px auto 8px;
    color: #1a1a1a;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd6d0;
}

/* The top edge is the diamond band, not a plain rule. Full-bleed to the card
   edges: the negative inline margins equal the card's padding, and the top
   offset also answers the 1px border. Pure CSS, no image request. */
.mw-wall-band {
    height: 8px;
    margin: -29px -28px 22px;
    background:
        linear-gradient(135deg, #c92127 25%, transparent 25%) -4px 0 / 8px 8px,
        linear-gradient(225deg, #c92127 25%, transparent 25%) -4px 0 / 8px 8px,
        linear-gradient(315deg, #c92127 25%, transparent 25%) 0 0 / 8px 8px,
        linear-gradient(45deg, #c92127 25%, transparent 25%) 0 0 / 8px 8px;
}

/* EVERY TYPE RULE FROM HERE DOWN IS QUALIFIED `.gh-content .mw-wall` AND MARKED
   !important. That is not defensive habit, it is the measured minimum.

   Because the card renders inside `.gh-content`, every SECTION-scoped rule in
   the injection reaches into it. `article.tag-featured .gh-content h2` is
   (0,2,2) and sets `font-family:"eb garamond"; font-size:2.5em` — a plain
   `.mw-wall-title` at (0,1,0) loses to it, and the card's title rendered as
   45px EB Garamond on a Spotlight post while looking correct everywhere else.
   The same shape exists for `p` on tag-poetry, tag-arts-fiction and
   tag-issues, several of them !important. So the card would have taken on the
   typography of whatever section the article happened to belong to.

   `.gh-content .mw-wall .mw-wall-title` is (0,3,1), which beats every one of
   those on class count, and !important answers theirs in kind. Do not
   "simplify" these selectors back to a single class. */
.gh-content .mw-wall .mw-wall-title {
    margin: 0 !important;
    width: auto !important;
    color: #1a1a1a !important;
    font-family: "Libre Caslon Text", Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.22 !important;
    text-align: center !important;
    text-wrap: balance;
    /* `article.tag-essays h2` also sets position/z-index/background/padding and
       a 70% width. The width and margin were already answered above; these are
       the rest. `position:static` matters most — it is what the section's
       ::before/::after anchor to. */
    position: static !important;
    z-index: auto !important;
    padding: 0 !important;
    background: none !important;
}

.gh-content .mw-wall .mw-wall-pitch {
    max-width: 40ch !important;
    margin: 12px auto 0 !important;
    color: #514844 !important;
    font-family: "EB Garamond", Georgia, serif !important;
    font-size: 16.5px !important;
    font-style: normal !important;
    line-height: 1.45 !important;
    text-align: center !important;
    text-indent: 0 !important;
    /* centred copy over a short measure orphans its last line readily.
       `pretty` only rescues a single trailing word, and this one ends
       "and poets." — two words, so it stayed orphaned. `balance` evens the
       line lengths instead, which is what a two-line centred block wants. */
    text-wrap: balance;
}

/* The fleuron sits ON a hairline that runs out either side of it — the same
   device the institutional section labels use, centred rather than flush. */
.mw-wall-fleuron {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 240px;
    margin: 22px auto;
}

.mw-wall-fleuron::before,
.mw-wall-fleuron::after {
    flex: 1 1 auto;
    height: 1px;
    background: #ddd6d0;
    content: "";
}

.mw-wall-fleuron span {
    flex: none;
    color: #c92127;
    font-size: 9px;
    line-height: 1;
}

/* Libre Caslon, deliberately: the display serif keeps the price reading as a
   line of the magazine rather than a row of a pricing table. Do not move this
   to the sans. */
.gh-content .mw-wall .mw-wall-price {
    margin: 0 !important;
    color: #1a1a1a !important;
    font-family: "Libre Caslon Text", Georgia, serif !important;
    font-size: 18.4px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-indent: 0 !important;
}

/* THE CASCADE. The card renders inside `.gh-content`, and the injection sets

       .gh-content a { color: rgb(116,116,116) }                      (0,1,1)
       .gh-content p a { color:#000 !important;
                         text-decoration:underline !important;
                         border-bottom:0 !important }                 (0,1,2)

   A bare `.mw-wall-btn` is (0,1,0) and LOSES the button's colour to the first
   of those. Qualifying with the block gives (0,2,0), which wins on class
   count. The sub-line's links sit inside a `<p>`, so they meet the second
   rule and its three !important declarations — those can only be answered in
   kind, at (0,2,1). Both selectors below are written the long way for that
   reason; do not shorten them. */
.gh-content .mw-wall .mw-wall-btn {
    display: inline-block;
    /* the spec gave the button padding but no margin, so it sat hard against
       the price with a 0px gap */
    margin-top: 18px;
    padding: 12.5px 24px;
    color: #fff !important;
    font-family: "Work Sans", Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1;
    text-decoration: none !important;
    text-transform: uppercase;
    /* the house oxblood, not the brighter #c92127 the spec carried: this is
       the red already used by the section labels, the About rules, the
       Interviews plate and the Spotlight band */
    background: #7f130d;
    border: 0;
    border-radius: 2px;
}

.gh-content .mw-wall .mw-wall-btn:hover,
.gh-content .mw-wall .mw-wall-btn:focus-visible {
    color: #fff !important;
    background: #9c3e2f;
    opacity: 1;
}

.gh-content .mw-wall .mw-wall-sub {
    margin: 18px 0 0 !important;
    color: #7a706c !important;
    font-family: "Work Sans", Arial, sans-serif !important;
    font-size: 15px !important;
    font-style: normal !important;
    line-height: 1.75 !important;
    text-align: center !important;
    text-indent: 0 !important;
}

.gh-content .mw-wall .mw-wall-sub a {
    color: #a81f22 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: .14em;
    border-bottom: 0 !important;
}

.gh-content .mw-wall .mw-wall-sub a:hover {
    color: #c92127 !important;
}

/* SECTION FIRST-LETTER / FIRST-LINE RULES REACH THE CARD. This one is easy to
   miss and it was live in the preview: the Spotlight article drop cap,

       article.tag-featured .gh-content.gh-canvas p:first-of-type::first-letter

   put a large bordered initial on the card's pitch. `:first-of-type` is
   relative to the element's OWN parent, and the pitch is the first <p> inside
   `.mw-wall`, so it matches no matter where the card sits in the article. The
   Essays and Interviews fronts do the same with `:first-of-type:first-line`
   and small caps (70-sections.css:1002 and :1172).

   That selector is (0,4,2). Neutralising it needs at least as much, so each
   card paragraph is named with its element AND its class behind
   `article .gh-content.gh-canvas`, giving (0,4,3) — a clear win rather than a
   tie settled by load order. A pseudo-element cannot be unset, so every
   property those rules touch has to be answered by name. */
article .gh-content.gh-canvas .mw-wall p.mw-wall-pitch::first-letter,
article .gh-content.gh-canvas .mw-wall p.mw-wall-price::first-letter,
article .gh-content.gh-canvas .mw-wall p.mw-wall-sub::first-letter {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    background: none !important;
    border: 0 !important;
}

article .gh-content.gh-canvas .mw-wall p.mw-wall-pitch::first-line,
article .gh-content.gh-canvas .mw-wall p.mw-wall-price::first-line,
article .gh-content.gh-canvas .mw-wall p.mw-wall-sub::first-line {
    font-family: inherit !important;
    font-size: inherit !important;
    font-variant: normal !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
}

/* THE ESSAYS DIAMOND STRIPS. `article.tag-essays h2::before` and `::after`
   (70-sections.css:1058) hang a repeating red-diamond SVG seven pixels above
   and below every h2 in an Essays article. The card's title is an h2 inside
   `.gh-content`, so it collected both — two decorative strips the design never
   asked for, bracketing "The rest is for members." They only appear on Essays
   posts, which is why the earlier previews on a Spotlight article looked
   clean, and why I wrongly dismissed them as an artefact of my own test when
   they first showed up.

   The rule is (0,1,3); this is (0,4,2) and wins on class count. `content:none`
   is the declaration that actually removes a generated box — `display:none`
   alone is belt and braces. */
article .gh-content.gh-canvas .mw-wall .mw-wall-title::before,
article .gh-content.gh-canvas .mw-wall .mw-wall-title::after {
    display: none !important;
    background: none !important;
    content: none !important;
}

/* THE 258px OF NOTHING ABOVE THE CARD.

   Source ships `.gh-cta-gradient { height:160px; margin-top:-16rem }` — a
   transparent-to-white fade meant to be pulled UP over the last 160px of the
   truncated article so the text dissolves rather than stopping mid-sentence.

   That pull-up is dead on this site. The Code Injection carries

       .gh-content > * + * { margin-top: calc(1.0em * var(--content-spacing-multiplier,1)) }

   which is (0,1,0), exactly the same specificity as `.gh-cta-gradient`, and
   loads later — so it wins and the -160px becomes +18px. The fade therefore
   sits BELOW the text instead of over it, and since it fades white into white
   on a white ground it is completely invisible: 160px of blank, plus 18px
   above and 40px below, plus this card's own 40px. 258px of nothing, measured
   on /the-choices-we-make-for-family/.

   This predates the card — the old splash had the same hole above it — but the
   splash was big enough to hide it and this card is not.

   The fade is redundant now in any case: the approved design ends the article
   with a bordered card and a diamond band, which is already a hard stop. So it
   is hidden, but ONLY where this card follows it — `:has()` keeps the member
   upgrade branch, which still uses Source's own `.gh-cta`, untouched. */
.gh-content > .gh-cta-gradient:has(+ .mw-wall) {
    display: none !important;
}

@media (max-width: 600px) {
    .mw-wall {
        padding: 22px;
    }

    .mw-wall-band {
        margin: -23px -22px 18px;
    }

    .gh-content .mw-wall .mw-wall-title {
        font-size: 21px !important;
    }

    .gh-content .mw-wall .mw-wall-price {
        font-size: 17px !important;
    }
}