/*
 * Homepage design system. Never enqueued unless YHSEO_HOME_VISUAL_REFINEMENT_ENABLED
 * is true, so `define('YHSEO_HOME_VISUAL_REFINEMENT_ENABLED', false)` in wp-config.php
 * reverts the whole homepage without a deploy.
 *
 * This file exists because the homepage had accumulated one intention per
 * implementation rather than per design: seven corner radii (4/5/6/7/8/9/12px),
 * three near-identical navies, three near-identical greens, six off-whites, and
 * four kicker styles differing in size, weight, tracking and colour. No single
 * value looked wrong; nothing lined up with anything, which is what read as
 * "off". Everything below is scoped with a `body.yhseo-home-visual-refinement`
 * prefix so it overrides the base sheets without editing them, and so the flag
 * is a true kill switch.
 *
 * Load order note: one-real-shop-production.css (a different plugin) enqueues
 * AFTER this file, so shop rules here carry an extra class to win on
 * specificity rather than on order. Its heading rule is
 * `.yhseo-server-home .yh-one-real-shop-home h2` (0,2,1); ours is (0,2,2).
 */

body.yhseo-home-visual-refinement {
  /* One value per job. */
  --yh-superior: #0b2233;   /* every dark surface: masthead, edition rule, discovery, footer */
  --yh-ink: #16272f;        /* body text on light */
  --yh-page: #e8edec;       /* page ground */
  --yh-paper: #fffdf8;      /* card surface */
  --yh-birch: #e7e0d1;      /* the one warm secondary */
  --yh-pine: #0e5a46;       /* links and buttons */
  --yh-drift: #5fd8bc;      /* accent, on dark grounds only */
  --yh-amber: #ffe9b0;      /* delayed state only */
  --yh-amber-ink: #6b4a00;
  --yh-muted: #5a6e75;

  --yh-r-ctl: 4px;          /* controls */
  --yh-r-panel: 12px;       /* panels */

  /* Single measure. The edition card used to be 1440px while every section
     below it was 1180px, so its edges jutted 130px past everything else. */
  --yh-measure: min(1180px, calc(100% - 32px));

  background: var(--yh-page);
  color: var(--yh-ink);
}

/* ---------- masthead ---------- */

body.yhseo-home-visual-refinement .yhseo-daily-site-header {
  background: var(--yh-superior);
}

body.yhseo-home-visual-refinement .yhseo-daily-site-header__email {
  border-radius: var(--yh-r-ctl);
}

/* ---------- the edition rule ----------
   Was a 54px navy hero whose headline on an ordinary day is the tagline
   ("One U.P. story worth your time."), and on a late day is "The Daily Stamp is
   delayed" — in both cases the largest type on the page carried no news and
   pushed the actual story toward the fold. It becomes a dated band: the same
   text, at rule scale, on one line. */

body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__header {
  padding: 12px 22px;
  background: var(--yh-superior);
  border-radius: 0;
  align-items: center;
}

body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__header > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 15px;
}

body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__header h1 {
  max-width: none;
  margin: 0;
  color: #c3d8d6;
  font-family: Mulish, Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .085em;
  line-height: 1.45;
  text-transform: uppercase;
  text-wrap: wrap;
}

body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__kicker {
  margin: 0;
  padding-right: 15px;
  border-right: 1px solid rgba(195, 216, 214, .3);
  color: var(--yh-drift);
}

/* The date is the one thing in the band a reader actually looks up. The heading
   text and the date are separate nodes with no punctuation between them, so on
   an ordinary day they ran together as "...WORTH YOUR TIME.MONDAY, AUGUST 10".
   The middot supplies the break the markup does not. */
body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__date {
  display: inline;
  margin: 0;
  color: var(--yh-drift);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__date::before {
  content: "\00B7";
  margin: 0 9px;
  color: rgba(195, 216, 214, .55);
  font-weight: 700;
}

body.yhseo-home-visual-refinement .yhseo-daily-edition--delayed .yhseo-daily-edition__date {
  color: #c3d8d6;
}

/* Delayed notice: retained (it carries role="alert") but tokenised, and now
   the only loud element of the delay rather than one of two. */
body.yhseo-home-visual-refinement .yhseo-daily-operational-alert {
  margin: 0;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--yh-r-panel) var(--yh-r-panel) 0 0;
  background: var(--yh-amber);
  color: var(--yh-amber-ink);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- one measure ---------- */

body.yhseo-home-visual-refinement .yhseo-server-home-main .yhseo-daily-edition--visual-refinement,
body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement {
  width: var(--yh-measure);
}

/* ---------- the lead story: the page's ceiling ---------- */

body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-lead {
  border-radius: 0 0 var(--yh-r-panel) var(--yh-r-panel);
  overflow: hidden;
}

body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-lead__body h2 {
  margin-bottom: 16px;
  /* Still the largest type on the page (sections cap at 30px), but sized for
     its ~420px column: 48px wrapped ordinary titles seven lines deep. */
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -.018em;
  text-wrap: balance;
}

body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-lead__media {
  background: var(--yh-birch);
}

/* photography-system.css gives the lead photo its own 7px radius, !important,
   through the `yh-photo--lead` role class. That class only appears on an
   on-time edition -- a delayed one carries `yh-photo--archival` -- so the
   corner is invisible until publishing catches up. The card already rounds this
   corner with overflow, so the inner radius is removed rather than restyled. */
body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-lead__media {
  border-radius: 0 !important;
}

body.yhseo-home-visual-refinement .yhseo-daily-button {
  border-radius: var(--yh-r-ctl);
  background: var(--yh-pine);
}

/* The reason line sat between the band and the story restating the headline
   verbatim. Quieten it so the headline below is what the eye reaches first. */
body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__reason {
  padding: 14px 22px;
  background: #f2f5f2;
  color: #475c62;
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- section headings, capped below the lead ---------- */

body.yhseo-home-visual-refinement .yhseo-server-section-header h2,
body.yhseo-home-visual-refinement .yhseo-server-newsletter h2,
body.yhseo-home-visual-refinement .yhseo-server-discovery-row h2,
body.yhseo-home-visual-refinement .yhseo-server-trust h2,
body.yhseo-home-visual-refinement .yhseo-retention-optional h2,
body.yhseo-home-visual-refinement .yh-one-real-shop-home h2 {
  font-family: Georgia, "Times New Roman", serif;  /* "More Yooper, when you want it" was the lone Mulish heading */
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.12;
  text-wrap: balance;
}

/* ---------- one kicker ----------
   Replaces four: 11.5/800/.0575em teal, 10/900/.14em green, 11/800/.055em
   green, 11/900/.085em teal. */

body.yhseo-home-visual-refinement .yhseo-server-kicker,
body.yhseo-home-visual-refinement .yh-newsletter-kicker,
body.yhseo-home-visual-refinement .yhseo-retention-optional__kicker,
body.yhseo-home-visual-refinement .yhseo-daily-card__label,
body.yhseo-home-visual-refinement .yh-one-real-shop-home .yh-one-real-shop-kicker {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.yhseo-home-visual-refinement .yhseo-server-kicker,
body.yhseo-home-visual-refinement .yhseo-retention-optional__kicker,
body.yhseo-home-visual-refinement .yhseo-daily-card__label {
  color: var(--yh-pine);
}

/* ---------- competing with retention-model.css ----------
   retention-model.css enqueues after this file AND reaches the daily-email
   block through an ID:
     body.yhseo-retention-simplified #yhseo-daily-edition-home > .yhseo-retention-email   (1,2,1)
     body.yhseo-retention-simplified .yhseo-retention-email .yh-newsletter-kicker         (0,3,1)
   No class-only selector can outrank the first, which is why the block kept an
   8px radius and a 39px heading. These rules borrow the same ID and repeat the
   body class to land at (1,3,x) and settle it without !important. */

/* The panel moves onto the dark surface. retention-model.css marks the
   background, the heading colour, the kicker colour and the body-copy colour
   !important, so each one is matched in kind. Every text colour in the block is
   set explicitly here: changing the ground without owning the text is how
   invisible copy ships.
   Two strings were already close to illegible on the old cream panel, because
   they sit on the form's own #071a2d box rather than on the panel -- the field
   label and the helper line under it, #40535d on near-black, about 1.9:1. They
   are fixed by the same pass. */
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement #yhseo-daily-edition-home > .yhseo-retention-email {
  border-radius: var(--yh-r-panel);
  background: var(--yh-superior) !important;
  border-left: 0;
  box-shadow: none !important;
}

body.yhseo-home-visual-refinement.yhseo-home-visual-refinement #yhseo-daily-edition-home .yhseo-retention-email h2 {
  color: #ffffff !important;
}

/* The kicker is itself a <p>, so it is excluded by name rather than left to lose
   this selector's extra element token and drop its accent colour. */
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement #yhseo-daily-edition-home .yhseo-retention-email p:not(.yh-newsletter-kicker),
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement #yhseo-daily-edition-home .yhseo-retention-email label {
  color: #b7cdd4 !important;
}

/* The form box is a fourth navy (#071a2d). A translucent lift keeps it legible
   as a distinct surface without introducing another colour value. */
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement #yhseo-daily-edition-home .yhseo-server-newsletter__form {
  background: rgba(255, 255, 255, .055);
}

/* Size and line-height are !important in retention-model.css (clamp up to 39px,
   which would put this heading above the section scale), so they are matched. */
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement #yhseo-daily-edition-home .yhseo-retention-email h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 2.2vw, 30px) !important;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.12 !important;
}

/* font-size and font-weight carry !important in retention-model.css, which no
   specificity can outrank, so they are matched here. letter-spacing and colour
   are not marked there and win on specificity alone. */
/* The competing rule uses the `font` shorthand, which is why size and weight
   both need matching here; colour is marked !important there too. */
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement #yhseo-daily-edition-home .yh-newsletter-kicker {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .09em;
  color: var(--yh-drift) !important;
}

body.yhseo-home-visual-refinement.yhseo-home-visual-refinement .yhseo-retention-optional__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  color: var(--yh-pine);
}

/* `body.yhseo-retention-simplified .yhseo-retention-optional h2` ties this at
   (0,2,1) and enqueues later, which kept the lone Mulish heading on the page. */
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement .yhseo-retention-optional h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -.012em;
}

/* On dark grounds the accent is the teal, never the pine. */
body.yhseo-home-visual-refinement .yhseo-server-newsletter .yh-newsletter-kicker,
body.yhseo-home-visual-refinement .yhseo-server-discovery-row .yhseo-server-kicker,
body.yhseo-home-visual-refinement .yh-one-real-shop-home .yh-one-real-shop-kicker {
  color: var(--yh-drift);
}

/* ---------- two radii ---------- */

body.yhseo-home-visual-refinement .yhseo-server-card,
body.yhseo-home-visual-refinement .yhseo-server-newsletter,
body.yhseo-home-visual-refinement .yhseo-server-discovery-row,
body.yhseo-home-visual-refinement .yh-one-real-shop-home {
  border-radius: var(--yh-r-panel);
}

body.yhseo-home-visual-refinement .yhseo-server-discovery-row a,
body.yhseo-home-visual-refinement .yhseo-server-trust a,
body.yhseo-home-visual-refinement .mailerlite-subscribe-submit,
body.yhseo-home-visual-refinement .yhseo-server-newsletter input[type="email"],
body.yhseo-home-visual-refinement .yh-one-real-shop-home a[class*="button"],
body.yhseo-home-visual-refinement .yhseo-server-card__media,
body.yhseo-home-visual-refinement .yhseo-server-card__media img,
body.yhseo-home-visual-refinement .yhseo-server-newsletter__form,
body.yhseo-home-visual-refinement .yhseo-daily-edition__footer a,
body.yhseo-home-visual-refinement .yhseo-retention-optional nav a {
  border-radius: var(--yh-r-ctl);
}

/* ---------- surfaces ---------- */

body.yhseo-home-visual-refinement .yhseo-server-card {
  background: var(--yh-paper);
}

/* Every homepage section was a rounded rectangle on the page ground, which
   left the boxes signalling nothing. The trust block is the one that carries
   no object -- a heading, a sentence and two links -- so it closes the page on
   the ground behind a hairline instead, the way the "More Yooper" heading
   already does. The edition, newsletter, story list, shop and discovery band
   stay panels: each of those holds something a reader acts on. */
body.yhseo-home-visual-refinement .yhseo-server-trust {
  padding: 26px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(22, 39, 47, .16);
  border-radius: 0;
}

body.yhseo-home-visual-refinement .yhseo-server-discovery-row,
body.yhseo-home-visual-refinement .yhseo-daily-site-footer,
body.yhseo-home-visual-refinement .yhseo-brand-footer {
  background: var(--yh-superior);
}

/* ---------- the "complete edition" link is a line, not an island ----------
   The edition footer held one button inside a fully-rounded dark panel with
   nothing else in it, so it read as an empty box between the newsletter and
   the sections below. It becomes a slim centered row on the page ground; the
   pine button itself (styled by daily-edition.css) carries the action. */

body.yhseo-home-visual-refinement .yhseo-daily-edition__footer {
  justify-content: center;
  padding: 6px 0 0;
  background: transparent;
  border: 0;
}

/* ---------- rows of outlined boxes read as wireframe ----------
   The optional-ways, discovery, and trust rows each lined up ghost buttons
   (thin borders, no fill). They become plain underlined links -- pine on
   light grounds, teal on the dark discovery band -- and the page stops
   looking like a mockup. Tap targets stay at 44px through min-height. */

body.yhseo-home-visual-refinement .yhseo-server-discovery-row nav a,
body.yhseo-home-visual-refinement .yhseo-server-trust nav a,
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement .yhseo-retention-optional a {
  display: inline-flex;
  min-height: 44px;
  padding: 0 3px;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

body.yhseo-home-visual-refinement .yhseo-server-trust nav a,
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement .yhseo-retention-optional a {
  text-decoration-color: rgba(14, 90, 70, .38);
}

body.yhseo-home-visual-refinement .yhseo-server-discovery-row nav a,
body.yhseo-home-visual-refinement .yhseo-server-discovery-row nav a:last-child {
  color: var(--yh-drift);
  background: transparent;
  border: 0;
  text-decoration-color: rgba(95, 216, 188, .42);
}

body.yhseo-home-visual-refinement .yhseo-server-discovery-row nav a:hover,
body.yhseo-home-visual-refinement .yhseo-server-trust nav a:hover,
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement .yhseo-retention-optional a:hover {
  background: transparent;
  text-decoration-color: currentColor;
}

body.yhseo-home-visual-refinement .yhseo-server-section-header a,
body.yhseo-home-visual-refinement .yhseo-server-trust a {
  color: var(--yh-pine);
}

/* The last two greens that were not the accent: #0f6b57 on the optional-ways
   links (marked !important in retention-model.css) and #14765f on card meta. */
body.yhseo-home-visual-refinement.yhseo-home-visual-refinement .yhseo-retention-optional a {
  color: var(--yh-pine) !important;
}

body.yhseo-home-visual-refinement .yhseo-server-card__meta {
  color: var(--yh-pine);
}

/* ---------- the daily email: say it once ----------
   The block stated the promise four ways — a long kicker, a second kicker, the
   heading's supporting line, and a closing note. The long kicker and the
   closing note are the two that carry nothing the others do not. */

body.yhseo-home-visual-refinement .yhseo-server-newsletter .yhseo-server-kicker,
body.yhseo-home-visual-refinement .yhseo-retention-email__note {
  display: none;
}

body.yhseo-home-visual-refinement .yhseo-server-newsletter {
  background: var(--yh-superior);
}

body.yhseo-home-visual-refinement .mailerlite-subscribe-submit {
  background: var(--yh-drift);
  color: #06231c;
}

/* ---------- a light news day should not look broken ----------
   The latest grid is two columns, so a single fresh story left a hole beside
   it. One story takes the full measure instead. */

body.yhseo-home-visual-refinement .yhseo-server-home-main .yhseo-server-grid--latest:has(> .yhseo-server-card:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

/* When nothing at all is inside the freshness window, the shell now falls back
   to the News archive's brief rows (`.yhseo-news-brief-list--home`, up to six),
   so the homepage is never a single story followed by chrome. The rows bring
   their own white 9px card from server-rendered-pages.css; only the surface is
   mapped onto this page's panel language. */

body.yhseo-home-visual-refinement .yhseo-news-brief-list--home {
  border: 0;
  border-radius: var(--yh-r-panel);
  background: var(--yh-paper);
}

/* ---------- shop: demoted below the journalism ----------
   Its heading was 58px against the lead story's 44px, making an $11.99 mug the
   largest type on a news homepage. */

body.yhseo-home-visual-refinement .yh-one-real-shop-home {
  overflow: hidden;
}

/* one-real-shop-production.css defines all nine of its colour tokens on
   `.yh-one-real-shop-page` / `body.yh-one-real-shop-page`. The homepage embeds
   the shop block without that class, so every var(--yh-shop-*) reference
   resolved to nothing. Most degraded invisibly, but the call to action did not:
   `.yh-one-real-shop-button` is dark text (#092127) on `--yh-shop-lime`, so the
   fill disappeared and the only link out of the block became dark-on-dark over
   its own green gradient. Supplying the tokens here fixes that through the
   plugin's own rules, and maps them onto this page's palette so the block stops
   introducing a second set of colours. */
body.yhseo-home-visual-refinement .yh-one-real-shop-home {
  --yh-shop-ink: var(--yh-ink);
  --yh-shop-muted: var(--yh-muted);
  --yh-shop-navy: var(--yh-superior);
  --yh-shop-green: var(--yh-pine);
  --yh-shop-mint: var(--yh-drift);
  --yh-shop-lime: var(--yh-drift);
  --yh-shop-paper: var(--yh-paper);
  --yh-shop-fog: var(--yh-page);
  --yh-shop-line: rgba(22, 39, 47, .16);
}

@media (min-width: 1200px) {
  body.yhseo-home-visual-refinement .yhseo-daily-site-header__inner {
    width: var(--yh-measure);
    min-height: 78px;
  }

  body.yhseo-home-visual-refinement .yhseo-daily-site-header__brand {
    font-size: 29px;
  }

  body.yhseo-home-visual-refinement .yhseo-daily-site-header__brand span {
    font-size: 10px;
  }

  body.yhseo-home-visual-refinement .yhseo-daily-site-header__nav {
    gap: clamp(16px, 1.5vw, 28px);
  }

  body.yhseo-home-visual-refinement .yhseo-daily-site-header__nav a {
    font-size: 12px;
  }

  body.yhseo-home-visual-refinement .yhseo-daily-site-header__email {
    padding-right: 16px;
    padding-left: 16px;
    font-size: 13px !important;
  }

  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-lead {
    grid-template-columns: minmax(0, 1.32fr) minmax(430px, 1fr);
    min-height: 460px;
  }

  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-lead__media,
  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-lead__media img {
    min-height: 460px;
  }

  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-lead__body {
    padding: clamp(34px, 3vw, 48px);
  }

  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-lead__body > p:not(.yhseo-daily-card__label) {
    margin-bottom: 24px;
    color: var(--yh-muted);
    font-size: 16px;
    line-height: 1.6;
  }
}

@media (max-width: 700px) {
  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__header,
  body.yhseo-home-visual-refinement .yhseo-daily-operational-alert,
  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__reason {
    padding-right: 16px;
    padding-left: 16px;
  }

  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__kicker {
    padding-right: 0;
    border-right: 0;
  }

  /* The reason paragraph runs ~200px on a phone and restates the lead's title
     and deck verbatim -- the selection parity gate requires the title in that
     text, so it cannot be shortened. Reorder it below the lead card instead so
     the photo and headline own the first screen; the headline moves from
     y~639 to y~438 on a 812px viewport and the lead CTA clears the fold.
     Flex order, not markup, for the same anchor reasons as the section
     reorder below: the retention reconciler can re-place the newsletter
     inside the edition and finds its markup where it expects it. */
  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement {
    display: flex;
    flex-direction: column;
  }

  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__reason {
    order: 1;
  }

  body.yhseo-home-visual-refinement .yhseo-daily-edition--visual-refinement .yhseo-daily-edition__footer {
    order: 2;
  }
}

/* The merch embed's square product image sized the whole panel at ~490px,
   taller than the entire story list it sat under. Cap it so the shop reads
   as one panel among several, not a second lead. */
body.yhseo-home-visual-refinement .yh-one-real-shop-home > img {
  width: min(300px, 100%) !important;
  /* The merch sheet's min-height: 420px outranks any height value. */
  min-height: 0 !important;
  height: 300px !important;
  object-fit: cover;
  align-self: center;
}

/* On a phone the merch panel outranked the email ask, in both order and size.
   The shop sat directly above the newsletter, and because the image and the
   copy stack rather than sitting side by side there, the 300px cap above still
   produced a 605px panel: taller than the newsletter (361px) and the discovery
   band (312px) combined. Email is the scarcer asset, so the newsletter goes
   first and the image takes a landscape crop.

   Ordering is done with flex `order` rather than by moving markup, because the
   merch panel and the participation row are injected by live-only plugins that
   anchor to this markup (see 2.7.179) and the retention reconciler re-places
   the newsletter from JS. Reordering visually leaves both anchors intact.
   The sections left at the default order 0 (edition, participation row, story
   list) keep their existing sequence ahead of these three. */
@media (max-width: 700px) {
  body.yhseo-home-visual-refinement main.yhseo-server-home-main {
    display: flex;
    flex-direction: column;
  }

  body.yhseo-home-visual-refinement main.yhseo-server-home-main > .yhseo-server-newsletter {
    order: 1;
  }

  body.yhseo-home-visual-refinement main.yhseo-server-home-main > .yh-one-real-shop-home {
    order: 2;
  }

  body.yhseo-home-visual-refinement main.yhseo-server-home-main > .yhseo-server-discovery-row {
    order: 3;
  }

  body.yhseo-home-visual-refinement .yh-one-real-shop-home > img {
    height: 170px !important;
  }
}