/* ==========================================================================
   Per-site design layer.

   style.css is the shared skeleton: grid, type scale, colour tokens. This file
   is what makes each site its own publication. It is loaded after style.css,
   and everything here is scoped to a body class so nothing leaks between sites.

   It exists because the first build varied only accent colour and font family:
   the stylesheet had no rules at all keyed to layout, so three of the ten sites
   were byte-identical in structure and five shared a masthead. A reader could
   see they were one property. That is a bad product and a network fingerprint.

     .mn-design-*   whole-site personality (paper, rules, type rhythm)
     .mn-mast-*     masthead
     .mn-layout-*   front-page structure
     .mn-cards-*    card treatment
     .mn-art-*      article page

   Mobile lives beside each structure rather than in one block at the end, so a
   layout and its small-screen behaviour are read together.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design personalities
   -------------------------------------------------------------------------- */

/* athletistic - tabloid: hard, condensed, high contrast, tight leading. */
.mn-design-tabloid {
  --mn-radius: 0px;
  --mn-line: #d7dbe0;
  --mn-paper-2: #f2f4f6;
  --d-head-weight: 800;
  --d-head-tracking: -0.015em;
  --d-head-transform: uppercase;
  --d-lead: 1.05;
}
.mn-design-tabloid .mn-card__title,
.mn-design-tabloid .mn-featured__title,
.mn-design-tabloid .mn-section__h,
.mn-design-tabloid .mn-box__h {
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-weight: 800;
  line-height: 1.05;
}

/* thefashionvibes - glossy: airy, serif display, wide letter-spaced kickers. */
.mn-design-glossy {
  --mn-radius: 0px;
  --mn-paper-2: #faf7f5;
  --mn-line: #e7e1dc;
  --mn-wrap: 1240px;
  --d-lead: 1.18;
}
.mn-design-glossy .mn-kicker {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.66rem;
  font-weight: 700;
}
.mn-design-glossy .mn-card__title { font-weight: 500; line-height: 1.2; }
.mn-design-glossy .mn-section__h {
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.95rem;
  border: 0;
}
.mn-design-glossy .mn-section__h::after {
  content: ""; display: block; width: 46px; height: 2px;
  background: var(--mn-accent); margin: 0.65rem auto 0;
}

/* todaytimeslive - broadsheet: newspaper rules, condensed heads, dense. */
.mn-design-broadsheet {
  --mn-radius: 0px;
  --mn-line: #cfd4da;
  --mn-paper-2: #f7f7f4;
  --d-lead: 1.1;
}
.mn-design-broadsheet .mn-section__h {
  border-top: 3px double var(--mn-ink);
  border-bottom: 1px solid var(--mn-line);
  padding: 0.4rem 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
}

/* sportish - nightdesk: the whole page is dark, not just the bar. */
.mn-design-nightdesk {
  --mn-paper: #0c1114;
  --mn-paper-2: #131a1f;
  --mn-ink: #eef4f6;
  --mn-line: #223038;
  --mn-line-soft: #1a252b;
  --mn-muted: #8fa3ad;
  --mn-radius: 3px;
  background: var(--mn-paper);
  color: var(--mn-ink);
}
.mn-design-nightdesk a { color: var(--mn-ink); }
.mn-design-nightdesk .mn-card,
.mn-design-nightdesk .mn-rows__item { background: transparent; }
.mn-design-nightdesk .mn-tag {
  color: var(--mn-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.mn-design-nightdesk .mn-section__h { color: var(--mn-ink); }
.mn-design-nightdesk .mn-kicker { color: var(--mn-accent); }

/* gossipify - popfeed: rounded, soft shadows, playful. */
.mn-design-popfeed {
  --mn-radius: 18px;
  --mn-paper-2: #f4f7f4;
  --mn-line: #e4eae5;
  --d-lead: 1.2;
}
.mn-design-popfeed .mn-kicker {
  background: var(--mn-badge, var(--mn-accent));
  color: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: none;
}
.mn-design-popfeed .mn-section__h {
  border: 0;
  font-weight: 700;
  font-size: 1.35rem;
}

/* thenationview - quality: serif, generous leading, restrained rules. */
.mn-design-quality {
  --mn-radius: 0px;
  --mn-paper-2: #f8f8f6;
  --mn-line: #ddddd6;
  --d-lead: 1.25;
}
.mn-design-quality .mn-card__title { font-weight: 600; line-height: 1.22; }
.mn-design-quality .mn-section__h {
  border-bottom: 2px solid var(--mn-ink);
  padding-bottom: 0.35rem;
  font-size: 1.05rem;
}

/* 24hoursworlds - wire: utilitarian, tight, timestamped. */
.mn-design-wire {
  --mn-radius: 2px;
  --mn-paper-2: #f4f6f8;
  --mn-line: #dbe1e7;
  --d-lead: 1.15;
}
.mn-design-wire .mn-section__h {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.82rem;
  border-left: 4px solid var(--mn-accent);
  padding-left: 0.6rem;
  border-bottom: 0;
}

/* worldstockmarket - terminal: tabular numerals, mono meta, dense. */
.mn-design-terminal {
  --mn-radius: 2px;
  --mn-paper-2: #f3f6f8;
  --mn-line: #d4dde3;
  --d-lead: 1.12;
  font-variant-numeric: tabular-nums;
}
.mn-design-terminal .mn-card__meta,
.mn-design-terminal .mn-rows__meta,
.mn-design-terminal .mn-byline__date {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: -0.01em;
}
.mn-design-terminal .mn-section__h {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  background: var(--mn-ink);
  color: var(--mn-paper);
  padding: 0.35rem 0.7rem;
  border: 0;
}
.mn-design-terminal .mn-section__h a { color: inherit; }

/* 247newsagency - agency: traditional, serif, double rules. */
.mn-design-agency {
  --mn-radius: 0px;
  --mn-paper-2: #f8f5f2;
  --mn-line: #ded3ca;
  --d-lead: 1.2;
}
.mn-design-agency .mn-section__h {
  border-top: 1px solid var(--mn-ink);
  border-bottom: 1px solid var(--mn-ink);
  padding: 0.35rem 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
}

/* globalhappenings - warm: warm paper, soft frames, rounded imagery. */
.mn-design-warm {
  --mn-radius: 10px;
  --mn-paper-2: #fbf6f1;
  --mn-line: #ead9c9;
  --d-lead: 1.22;
}
.mn-design-warm .mn-section__h {
  border: 0;
  font-size: 1.3rem;
  font-weight: 700;
}
.mn-design-warm .mn-section__h::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; background: var(--mn-accent); margin-right: 0.55rem;
}

/* --------------------------------------------------------------------------
   2. Mastheads
   -------------------------------------------------------------------------- */

.mn-head__bandinner { display: flex; align-items: center; gap: 1rem; }

/* ticker-left */
.mn-head--ticker-left .mn-utility {
  background: var(--mn-ink); color: #fff; font-size: 0.8rem;
}
.mn-head--ticker-left .mn-utility__inner {
  display: flex; align-items: center; gap: 0.85rem; min-height: 38px;
}
.mn-head--ticker-left .mn-utility__badge {
  background: var(--mn-accent); color: var(--mn-accent-ink);
  padding: 0.16rem 0.6rem; font-weight: 800; text-transform: uppercase;
  font-size: 0.7rem; letter-spacing: 0.06em; flex: none;
}
.mn-head--ticker-left .mn-ticker { overflow: hidden; flex: 1 1 auto; min-width: 0; }
.mn-head--ticker-left .mn-ticker__list {
  display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0;
  white-space: nowrap;
}
.mn-head--ticker-left .mn-ticker a { color: #dfe4ea; text-decoration: none; }
.mn-head--ticker-left .mn-ticker a:hover { color: #fff; text-decoration: underline; }
.mn-head--ticker-left .mn-utility__date { flex: none; opacity: 0.75; }
.mn-head--ticker-left .mn-head__band { border-bottom: 3px solid var(--mn-ink); }
.mn-head--ticker-left .mn-head__bandinner { justify-content: flex-start; padding: 0.9rem 0; }
.mn-head--ticker-left .mn-head__brand { margin-right: auto; }

/* editorial-serif */
.mn-head--editorial-serif .mn-head__band--serif {
  border-top: 1px solid var(--mn-line);
  border-bottom: 1px solid var(--mn-line);
}
.mn-head--editorial-serif .mn-head__bandinner {
  flex-direction: column; gap: 0.35rem; padding: 2.2rem 0 1.6rem; text-align: center;
}
.mn-head--editorial-serif .mn-head__brand img { max-height: 74px; width: auto; }
.mn-head--editorial-serif .mn-head__tagline {
  font-style: italic; letter-spacing: 0.04em; margin: 0; color: var(--mn-muted);
}
.mn-head--editorial-serif .mn-search { margin-top: 0.4rem; }

/* stacked-rule */
.mn-head--stacked-rule .mn-dateline {
  border-bottom: 1px solid var(--mn-line); font-size: 0.76rem;
  color: var(--mn-muted); text-transform: uppercase; letter-spacing: 0.07em;
}
.mn-head--stacked-rule .mn-dateline__inner {
  display: flex; gap: 0.6rem; justify-content: center; padding: 0.45rem 0;
}
.mn-head--stacked-rule .mn-dateline__sep { opacity: 0.4; }
.mn-head--stacked-rule .mn-head__bandinner {
  flex-direction: column; gap: 0.6rem; padding: 1.4rem 0 1rem;
}
.mn-head--stacked-rule .mn-head__band--stacked {
  border-bottom: 4px double var(--mn-ink);
}

/* dark-centered */
.mn-head--dark-centered .mn-darkbar { background: #0a0f12; }
.mn-head--dark-centered .mn-darkbar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.4rem 0; position: relative;
}
.mn-head--dark-centered .mn-burger { position: absolute; left: 0; }
.mn-head--dark-centered .mn-search { position: absolute; right: 0; }
.mn-head--dark-centered .mn-head__brand img { max-height: 56px; width: auto; }

/* pill-nav */
.mn-head--pill-nav .mn-head__band--pill { padding: 1.1rem 0 0.5rem; }
.mn-head--pill-nav .mn-head__brand--chip {
  background: var(--mn-accent); color: var(--mn-accent-ink);
  border-radius: 999px; padding: 0.5rem 1.3rem; display: inline-flex;
}
.mn-head--pill-nav .mn-head__tagline {
  margin: 0; color: var(--mn-muted); font-size: 0.85rem;
}
.mn-head--pill-nav .mn-search { margin-left: auto; }

/* compact-bar */
.mn-head--compact-bar .mn-head__band--compact {
  border-bottom: 1px solid var(--mn-line); background: var(--mn-paper);
  position: sticky; top: 0; z-index: 40;
}
.mn-head--compact-bar .mn-head__bandinner { padding: 0.5rem 0; gap: 0.9rem; }
.mn-head--compact-bar .mn-head__brand img { max-height: 34px; width: auto; }
.mn-head--compact-bar .mn-head__live {
  margin-left: auto; font-size: 0.74rem; color: var(--mn-muted);
  display: inline-flex; align-items: center; gap: 0.4rem;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.mn-head--compact-bar .mn-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mn-accent);
}

/* ticker-data */
.mn-head--ticker-data .mn-datastrip {
  background: var(--mn-ink); color: #e8eef2;
  font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem;
}
.mn-head--ticker-data .mn-datastrip__inner {
  display: flex; gap: 1.6rem; align-items: center; min-height: 32px;
  overflow-x: auto; scrollbar-width: none;
}
.mn-head--ticker-data .mn-datastrip__inner::-webkit-scrollbar { display: none; }
.mn-head--ticker-data .mn-datastrip__cell {
  text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
.mn-head--ticker-data .mn-datastrip__date { margin-left: auto; opacity: 0.7; }
.mn-head--ticker-data .mn-head__band--data {
  border-bottom: 2px solid var(--mn-ink);
}
.mn-head--ticker-data .mn-head__bandinner { padding: 0.85rem 0; }
.mn-head--ticker-data .mn-head__brand { margin-right: auto; }

/* crest */
.mn-head--crest .mn-head__bandinner {
  flex-direction: column; gap: 0.3rem; padding: 1.7rem 0 1.2rem; text-align: center;
}
.mn-head--crest .mn-crest {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--mn-accent); display: block; margin: 0 auto 0.5rem;
  position: relative;
}
.mn-head--crest .mn-crest::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 50%; border: 1px solid var(--mn-accent); opacity: 0.55;
}
.mn-head--crest .mn-head__band--crest {
  border-bottom: 3px double var(--mn-line);
}
.mn-head--crest .mn-head__tagline {
  margin: 0; font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--mn-muted);
}

/* split-brand */
.mn-head--split-brand .mn-head__band--split {
  background: var(--mn-paper-2); border-bottom: 1px solid var(--mn-line);
}
.mn-head--split-brand .mn-head__bandinner { padding: 1.5rem 0; }
.mn-head--split-brand .mn-head__brand { margin-right: auto; }
.mn-head--split-brand .mn-head__tagline {
  margin: 0.25rem 0 0; color: var(--mn-muted); font-size: 0.86rem;
}
.mn-head--split-brand .mn-search { flex: 0 1 320px; }
.mn-head--split-brand .mn-search input { width: 100%; }

/* dateline */
.mn-head--dateline .mn-head__band--dateline {
  border-bottom: 2px solid var(--mn-ink);
}
.mn-head--dateline .mn-head__bandinner { padding: 1.5rem 0 1.1rem; align-items: flex-end; }
.mn-head--dateline .mn-head__meta {
  margin-left: auto; text-align: right; font-size: 0.78rem; color: var(--mn-muted);
}
.mn-head--dateline .mn-head__meta p { margin: 0.15rem 0 0; }

/* --------------------------------------------------------------------------
   3. Front-page structures
   -------------------------------------------------------------------------- */

.mn-tag {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
  margin: 0 0 0.75rem;
}

/* Shared compact headline rows. */
.mn-rows { list-style: none; margin: 0; padding: 0; }
.mn-rows__item {
  display: flex; gap: 0.8rem; padding: 0.75rem 0;
  border-bottom: 1px solid var(--mn-line-soft);
}
.mn-rows__item:last-child { border-bottom: 0; }
.mn-rows__media { flex: none; width: 84px; }
.mn-rows__media img {
  width: 100%; height: 60px; object-fit: cover; border-radius: var(--mn-radius);
  display: block;
}
.mn-rows__meta {
  display: flex; gap: 0.5rem; align-items: center;
  font-size: 0.7rem; color: var(--mn-muted); margin-bottom: 0.2rem;
}
.mn-rows__title {
  margin: 0; font-size: 0.98rem; line-height: var(--d-lead, 1.2); font-weight: 600;
}
.mn-rows__title a { text-decoration: none; color: inherit; }
.mn-rows__title a:hover { color: var(--mn-accent); text-decoration: underline; }

/* mosaic (glossy) */
.mn-mosaic { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--mn-gap); }
.mn-mosaic__side { display: grid; gap: var(--mn-gap); align-content: start; }
.mn-mosaic .mn-card--lead .mn-card__img { aspect-ratio: 4 / 5; object-fit: cover; }
.mn-mosaic .mn-card__img { border-radius: 0; }
.mn-section--strip { margin-top: calc(var(--mn-gap) * 1.5); }

/* frontpage (broadsheet) */
.mn-front {
  display: grid; grid-template-columns: 1.6fr 1.1fr 0.9fr; gap: var(--mn-gap);
  border-bottom: 3px double var(--mn-ink); padding-bottom: var(--mn-gap);
}
.mn-front__mid, .mn-front__right {
  border-left: 1px solid var(--mn-line); padding-left: var(--mn-gap);
}
.mn-front__mid { display: grid; gap: 1.1rem; align-content: start; }

/* tri-column (nightdesk) */
.mn-tri { display: grid; grid-template-columns: 0.85fr 1.9fr 0.85fr; gap: var(--mn-gap); }
.mn-rank { list-style: none; margin: 0; padding: 0; }
.mn-rank__item { padding: 0.7rem 0; border-bottom: 1px solid var(--mn-line-soft); }
.mn-rank__body { display: flex; gap: 0.6rem; align-items: flex-start; }
.mn-rank__num {
  font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--mn-accent);
  flex: none; min-width: 1.4rem;
}
.mn-rank__media img {
  width: 100%; height: 96px; object-fit: cover; margin-bottom: 0.5rem; display: block;
}
.mn-rank__title { margin: 0; font-size: 0.95rem; line-height: 1.2; }
.mn-rank__title a { text-decoration: none; color: inherit; }
.mn-overlay { position: relative; margin-bottom: var(--mn-gap); }
.mn-overlay__link { display: block; position: relative; text-decoration: none; }
.mn-overlay__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-overlay--lead .mn-overlay__img { aspect-ratio: 16 / 9; }
.mn-overlay:not(.mn-overlay--lead) .mn-overlay__img { aspect-ratio: 21 / 9; }
.mn-overlay__text {
  position: absolute; inset: auto 0 0 0; padding: 1.2rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
  color: #fff;
}
.mn-overlay__title { margin: 0.3rem 0 0; font-size: clamp(1.2rem, 2.4vw, 2rem); line-height: 1.1; }
.mn-overlay__dek { margin: 0.5rem 0 0; opacity: 0.86; font-size: 0.92rem; }
.mn-overlay__meta { display: flex; gap: 0.6rem; font-size: 0.72rem; opacity: 0.85; }
.mn-overlay__meta .mn-kicker { color: var(--mn-accent); }

/* masonry (popfeed) */
.mn-poplead {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mn-gap);
  margin-bottom: calc(var(--mn-gap) * 1.4);
}
.mn-masonry { columns: 3; column-gap: var(--mn-gap); }
.mn-masonry .mn-card {
  break-inside: avoid; margin-bottom: var(--mn-gap); display: block;
}

/* columns (quality) */
.mn-quality {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: calc(var(--mn-gap) * 1.3);
  padding-bottom: var(--mn-gap); border-bottom: 2px solid var(--mn-ink);
}
.mn-quality__second { display: grid; gap: 1.2rem; align-content: start; }
.mn-quality__second .mn-card__media { display: none; }
.mn-colset {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mn-gap);
  margin-top: var(--mn-gap);
}
.mn-colset__col { border-left: 1px solid var(--mn-line); padding-left: 1rem; }
.mn-colset__col:first-child { border-left: 0; padding-left: 0; }

/* wirefeed (wire) */
.mn-wirelead { margin-bottom: var(--mn-gap); }
.mn-wire { list-style: none; margin: 0; padding: 0; }
.mn-wire__item {
  display: grid; grid-template-columns: 62px 1fr; gap: 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--mn-line-soft);
}
.mn-wire__time {
  font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem;
  color: var(--mn-accent); font-weight: 700; padding-top: 0.15rem;
}
.mn-wire__meta {
  display: flex; gap: 0.5rem; font-size: 0.7rem; color: var(--mn-muted);
  margin-bottom: 0.15rem;
}
.mn-wire__title { margin: 0; font-size: 1.02rem; line-height: 1.22; }
.mn-wire__title a { text-decoration: none; color: inherit; }
.mn-wire__title a:hover { color: var(--mn-accent); }
.mn-wire__dek { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--mn-muted); }

/* terminal */
.mn-term { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--mn-gap); }
.mn-term__grid { display: grid; gap: 0.7rem; align-content: start; }
.mn-termcols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mn-gap);
  margin-top: var(--mn-gap);
}

/* bulletin (agency) */
.mn-agency { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--mn-gap); }
.mn-bul { list-style: none; margin: 0; padding: 0; counter-reset: bul; }
.mn-bul__item {
  counter-increment: bul; padding: 0.7rem 0 0.7rem 2.1rem; position: relative;
  border-bottom: 1px solid var(--mn-line-soft);
}
.mn-bul__item::before {
  content: counter(bul, decimal-leading-zero);
  position: absolute; left: 0; top: 0.75rem;
  font-size: 0.78rem; font-weight: 700; color: var(--mn-accent);
}
.mn-bul__title { margin: 0; font-size: 1rem; line-height: 1.22; }
.mn-bul__title a { text-decoration: none; color: inherit; }
.mn-bul__meta {
  display: flex; gap: 0.5rem; font-size: 0.7rem; color: var(--mn-muted);
  margin-top: 0.2rem;
}

/* magazine (warm) */
.mn-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mn-gap);
  margin-bottom: calc(var(--mn-gap) * 1.3);
}
.mn-strip .mn-card__img { border-radius: var(--mn-radius); }

/* --------------------------------------------------------------------------
   4. Card treatments
   -------------------------------------------------------------------------- */

.mn-cards-frame .mn-card {
  border: 1px solid var(--mn-line); padding: 0.85rem; background: var(--mn-paper);
}
.mn-cards-frame .mn-card__media { margin: -0.85rem -0.85rem 0.8rem; display: block; }

.mn-cards-bare .mn-card { border: 0; padding: 0; }
.mn-cards-bare .mn-card__img { aspect-ratio: 3 / 4; object-fit: cover; }

.mn-cards-rule .mn-card {
  border: 0; border-top: 1px solid var(--mn-line); padding-top: 0.8rem;
}

.mn-cards-overlay .mn-card__media { position: relative; display: block; }
.mn-cards-overlay .mn-card__img { aspect-ratio: 16 / 10; object-fit: cover; }

.mn-cards-pill .mn-card {
  border: 1px solid var(--mn-line); border-radius: var(--mn-radius);
  overflow: hidden; background: var(--mn-paper);
  box-shadow: 0 2px 10px rgba(20, 24, 26, 0.05);
}
.mn-cards-pill .mn-card__body { padding: 0.9rem 1rem 1.1rem; }

.mn-cards-text .mn-card__media { display: none; }
.mn-cards-text .mn-card--lead .mn-card__media { display: block; }

.mn-cards-row .mn-card {
  display: grid; grid-template-columns: 108px 1fr; gap: 0.85rem; align-items: start;
}
.mn-cards-row .mn-card--lead { display: block; }
.mn-cards-row .mn-card__img { height: 76px; object-fit: cover; }
.mn-cards-row .mn-card--lead .mn-card__img { height: auto; aspect-ratio: 16 / 9; }

.mn-cards-data .mn-card {
  border-bottom: 1px solid var(--mn-line); padding-bottom: 0.6rem;
}
.mn-cards-data .mn-card--compact .mn-card__media { display: none; }

.mn-cards-classic .mn-card__img { aspect-ratio: 3 / 2; object-fit: cover; }
.mn-cards-classic .mn-card__title { font-weight: 700; }

.mn-cards-soft .mn-card__img {
  border-radius: var(--mn-radius); aspect-ratio: 16 / 10; object-fit: cover;
}

/* --------------------------------------------------------------------------
   5. Article pages
   -------------------------------------------------------------------------- */

.mn-art-punch .mn-article__title {
  text-transform: uppercase; font-weight: 800; letter-spacing: -0.015em;
  line-height: 1.03;
}
.mn-art-punch .mn-article__body { font-size: 1.04rem; }

.mn-art-feature .mn-article__title { font-weight: 500; line-height: 1.14; }
.mn-art-feature .mn-article__body { max-width: 62ch; font-size: 1.1rem; line-height: 1.75; }
.mn-art-feature .mn-article__body > p:first-of-type::first-letter {
  float: left; font-size: 3.4em; line-height: 0.82; padding: 0.08em 0.1em 0 0;
  font-family: var(--mn-display); color: var(--mn-accent);
}

.mn-art-column .mn-article__title { line-height: 1.08; }
.mn-art-column .mn-article__body { max-width: 68ch; }
.mn-art-column .mn-article__body > p:first-of-type { font-size: 1.12rem; }

.mn-art-immersive .mn-article__media { margin-inline: calc(50% - 50vw); }
.mn-art-immersive .mn-article__media img {
  width: 100vw; max-height: 62vh; object-fit: cover;
}
.mn-art-immersive .mn-article__body { max-width: 66ch; }

.mn-art-soft .mn-article__media img { border-radius: var(--mn-radius); }
.mn-art-soft .mn-article__body { max-width: 66ch; font-size: 1.05rem; }

.mn-art-essay .mn-article__body {
  max-width: 64ch; font-size: 1.08rem; line-height: 1.78;
}
.mn-art-essay .mn-article__dek { font-style: italic; font-size: 1.15rem; }

.mn-art-brief .mn-article__title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.mn-art-brief .mn-article__body { max-width: 70ch; font-size: 0.99rem; }

.mn-art-report .mn-article__body { max-width: 70ch; }
.mn-art-report .mn-article__body table { width: 100%; font-variant-numeric: tabular-nums; }

.mn-art-dispatch .mn-article__title { font-weight: 700; line-height: 1.14; }
.mn-art-dispatch .mn-article__head {
  border-bottom: 3px double var(--mn-line); padding-bottom: 0.9rem;
}
.mn-art-dispatch .mn-article__body { max-width: 66ch; }

.mn-art-story .mn-article__media img { border-radius: var(--mn-radius); }
.mn-art-story .mn-article__body { max-width: 65ch; font-size: 1.06rem; line-height: 1.75; }

/* --------------------------------------------------------------------------
   6. Mobile.

   Every multi-column structure above collapses here. These are written per
   structure rather than as one blanket rule, because a wire feed and a
   magazine mosaic should not collapse the same way: the wire keeps its
   timestamp gutter, the mosaic drops to a single column, and the terminal
   keeps its dense rows instead of turning into big cards.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .mn-tri { grid-template-columns: 1fr 1fr; }
  .mn-tri__left { grid-column: 1 / -1; }
  .mn-front { grid-template-columns: 1fr 1fr; }
  .mn-front__right { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .mn-colset { grid-template-columns: repeat(2, 1fr); }
  .mn-colset__col:nth-child(3) { border-left: 0; padding-left: 0; }
  .mn-termcols { grid-template-columns: repeat(2, 1fr); }
  .mn-masonry { columns: 2; }
  .mn-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .mn-mosaic,
  .mn-front,
  .mn-tri,
  .mn-quality,
  .mn-term,
  .mn-agency,
  .mn-poplead { grid-template-columns: 1fr; }

  .mn-front__mid,
  .mn-front__right,
  .mn-colset__col,
  .mn-termcols__col {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--mn-line); padding-top: 1rem;
  }
  .mn-colset,
  .mn-termcols,
  .mn-strip { grid-template-columns: 1fr; }
  .mn-masonry { columns: 1; }

  /* The lead image is the largest element on a phone; cap it so the headline
     and the first paragraph are both reachable without scrolling. */
  .mn-mosaic .mn-card--lead .mn-card__img { aspect-ratio: 4 / 3; }
  .mn-overlay--lead .mn-overlay__img,
  .mn-overlay:not(.mn-overlay--lead) .mn-overlay__img { aspect-ratio: 16 / 10; }
  .mn-art-immersive .mn-article__media img { max-height: 42vh; }

  .mn-overlay__text { padding: 0.85rem; }
  .mn-overlay__title { font-size: 1.15rem; }
  .mn-overlay__dek { display: none; }

  .mn-wire__item { grid-template-columns: 48px 1fr; gap: 0.7rem; }
  .mn-wire__dek { display: none; }

  .mn-rows__media { width: 72px; }
  .mn-rows__media img { height: 52px; }

  /* Mastheads. Each collapses to a single row with the wordmark centred and
     the search folded into the nav, rather than wrapping into three lines. */
  .mn-head__bandinner { flex-wrap: wrap; row-gap: 0.5rem; padding: 0.7rem 0; }
  .mn-head--editorial-serif .mn-head__bandinner,
  .mn-head--crest .mn-head__bandinner,
  .mn-head--stacked-rule .mn-head__bandinner { padding: 1rem 0 0.75rem; }
  .mn-head__brand img { max-height: 42px !important; width: auto; }
  .mn-head--editorial-serif .mn-head__brand img { max-height: 50px !important; }

  .mn-head--dateline .mn-head__meta,
  .mn-head--compact-bar .mn-head__live,
  .mn-head--stacked-rule .mn-dateline,
  .mn-head--ticker-left .mn-utility__date,
  .mn-head--pill-nav .mn-head__tagline,
  .mn-head--split-brand .mn-head__tagline { display: none; }

  .mn-head--ticker-left .mn-utility__inner { min-height: 32px; }
  .mn-head--split-brand .mn-search { flex: 1 1 100%; }
  .mn-head--dark-centered .mn-darkbar__inner { padding: 0.8rem 0; }
  .mn-head--dark-centered .mn-burger,
  .mn-head--dark-centered .mn-search { position: static; }
  .mn-head--dark-centered .mn-head__brand { margin: 0 auto; }

  /* Search is a second-order action on a phone and was pushing the wordmark
     off the line on six of the ten mastheads. */
  .mn-head .mn-search { order: 3; flex: 1 1 100%; }
  .mn-head .mn-search input { width: 100%; }

  .mn-article__title { font-size: clamp(1.45rem, 6.2vw, 2rem); line-height: 1.12; }
  .mn-art-feature .mn-article__body > p:first-of-type::first-letter {
    font-size: 2.6em;
  }
  .mn-article__body { font-size: 1rem !important; max-width: none !important; }
}

@media (max-width: 520px) {
  .mn-rows__media,
  .mn-rank__media { display: none; }
  .mn-cards-row .mn-card { grid-template-columns: 84px 1fr; gap: 0.65rem; }
  .mn-cards-row .mn-card__img { height: 60px; }
  .mn-cards-frame .mn-card { padding: 0.7rem; }
  .mn-cards-frame .mn-card__media { margin: -0.7rem -0.7rem 0.65rem; }
  .mn-wire__item { grid-template-columns: 42px 1fr; }
  .mn-wire__time { font-size: 0.7rem; }
  .mn-section__h { font-size: 0.95rem !important; }
}

/* --------------------------------------------------------------------------
   7. Mobile faults found by measuring a real 390px viewport, not by eye.

   All four were network-wide, on every site, in the base theme:

     document 640px wide inside a 390px window (sideways scroll)
     header 574px tall, first headline at y=1002, so a phone showed no story
       at all without a full screen of scrolling
     the sections nav rendered all 8 items open, 147px tall, and the burger
       that is supposed to control it did nothing because no rule ever hid it
     the burger itself measured 15x5px

   Fixing these in the design layer rather than style.css keeps the diagnosis
   next to the remedy.
   -------------------------------------------------------------------------- */

/* The cause of the sideways scroll: images carried the source file's intrinsic
   width (570px) with max-width:none, so a 570px photo sat in a 375px column.
   Applies at every width, not just mobile. */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}
.mn-featured__media img,
.mn-card__img,
.mn-rows__media img,
.mn-rank__media img,
.mn-overlay__img,
.mn-article__media img {
  max-width: 100%;
  width: 100%;
  display: block;
}

/* Restore the fixed heights the crops rely on, now that width is capped. */
.mn-rows__media img { height: 60px; object-fit: cover; }
.mn-rank__media img { height: 96px; object-fit: cover; }

@media (max-width: 900px) {
  /* The nav collapses behind the burger. Without this the burger toggled a
     class that no rule responded to. */
  .mn-nav {
    display: none;
    border-top: 1px solid var(--mn-line);
  }
  .mn-nav.is-open { display: block; }
  .mn-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mn-nav__list > li { border-bottom: 1px solid var(--mn-line-soft); }
  .mn-nav__list > li > a {
    display: block;
    padding: 0.85rem 0;
    min-height: 44px;
    text-decoration: none;
  }

  /* A real 44px control with three visible bars. */
  .mn-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    flex: none;
  }
  .mn-burger > span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }
  .mn-head--dark-centered .mn-burger { color: #fff; }
}

@media (min-width: 901px) {
  .mn-burger { display: none; }
  .mn-nav { display: block; }
}

@media (max-width: 760px) {
  /* The ticker and the market strip are decorative and cost 271px of the
     574px header. Neither survives the trip to a phone in readable form. */
  .mn-head--ticker-left .mn-utility,
  .mn-head--ticker-data .mn-datastrip { display: none; }

  /* Keep the masthead itself to roughly a fifth of the viewport so a headline
     is visible without scrolling. */
  .mn-head__bandinner { padding: 0.55rem 0; }
  .mn-head__brand { margin: 0; }
  .mn-head__brand img { max-height: 38px !important; }
  .mn-head--editorial-serif .mn-head__brand img,
  .mn-head--crest .mn-head__brand img { max-height: 44px !important; }
  .mn-head--editorial-serif .mn-head__tagline,
  .mn-head--crest .mn-head__tagline { display: none; }

  /* Search behind the burger row rather than a third line of chrome. */
  .mn-head .mn-search { display: none; }
  .mn-nav.is-open ~ .mn-search,
  .mn-head .mn-nav.is-open .mn-search { display: block; }

  /* Anything tappable gets a 44px target. Measured hits included 18px links
     and a 21px search input. */
  .mn-nav a,
  .mn-rows__title a,
  .mn-wire__title a,
  .mn-bul__title a,
  .mn-card__title a { min-height: 24px; display: inline-block; }
  .mn-search input,
  .mn-search button { min-height: 44px; }

  body { overflow-x: clip; }
  .mn-article__body table,
  .mn-article__body pre { display: block; overflow-x: auto; max-width: 100%; }
}