/* The Satyr — Satirical News Publication */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black: #111;
  --red:   #c00;
  --mid:   #555;
  --light: #e8e8e8;
  --bg:    #f9f8f5;
  --serif: serif;
  --sans:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Brand wordmark font. MUST be an explicit Latin serif stack, never the bare
     generic `serif`: on a page whose lang is zh/ja/ko/ar/hi, the browser would
     otherwise render the Latin "SATYR SATIRE" with that script's serif, so the
     masthead font would change from language to language. Pinning Georgia first
     keeps the wordmark identical across every edition. */
  --brand-serif: Georgia, 'Times New Roman', Times, serif;
}

body {
  font-family: var(--serif);
  background: var(--bg);
  color: var(--black);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Masthead ── */
.masthead {
  border-top: 3px solid var(--black);
  border-bottom: 1px solid var(--black);
  max-width: 850px;
  padding: 0 25px 2px 25px;
  margin-bottom: 0;
  display: flex;
  align-items: stretch;
  gap: 160px;
}

.masthead-left {
  display: flex;
  flex-direction: column;
}

.masthead-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.masthead-link:hover { text-decoration: none; }

.masthead-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: auto;
  flex-shrink: 0;
  gap: 8px;
}

.masthead-right-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: auto;
  padding-top: 10px;
}

.masthead-logo {
  height: 100px;
  width: 100px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.pub-name-text {
  display: block;
  text-align: center;
}

.pub-name-top {
  display: block;
  font-family: var(--brand-serif);
  font-size: 4.8rem;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  text-transform: uppercase;
}

.pub-name-bottom {
  display: block;
  font-family: var(--brand-serif);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1;
  margin-top: 2px;
  text-transform: uppercase;
}

.masthead .tagline {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  padding-top: 4px;
  padding-left: 40px;
  text-align: left;
}

/* ── Nav ── */
nav {
  border-bottom: 1px solid var(--black);
  background: var(--black);
  color: white;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  max-width: 850px;
  margin: 0;
  padding: 0 10px;
}

nav li a {
  display: block;
  padding: 0 10px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
}

nav li a:hover { background: var(--red); text-decoration: none; }
nav li a.active { background: var(--red); }
/* 20260715 standard: the About nav item is a round '?' pill (matches the chrome
   <style> block on articles/help pages; here in shared CSS so generated pages
   like editions/index.html render it too). */
nav li a.nav-about { display:flex; align-items:center; justify-content:center; width:1.05em; min-width:1.05em; height:1.05em; margin:0 0 0 14px; padding:0; border-radius:50%; background:#f5c518; color:#000; font-weight:800; line-height:1; font-size:0.78em; }
nav li a.nav-about:hover { background:#ffd83a; }

/* ── Layout ── */
.container {
  max-width: 850px;
  margin: 0;
  padding: 0 25px;
}

/* ── Section label ── */
.section-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}

/* ── Index: article grid ── */
.index-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 30px 0;
}

.index-grid .featured {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--light);
  padding-bottom: 28px;
  margin-bottom: 28px;
}

.index-grid .article-card {
  padding: 0 24px 28px 0;
  border-right: 1px solid var(--light);
  margin-right: 24px;
}

.index-grid .article-card:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin-bottom: 14px;
}

.card-headline {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
}

.card-headline a:hover { text-decoration: underline; }

.card-standfirst {
  font-size: 0.92rem;
  color: var(--mid);
  line-height: 1.5;
  margin-bottom: 10px;
}

.card-byline {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}

/* ── Featured card ── */
.featured .card-headline { font-size: 2rem; }
.featured .card-img { height: 360px; }

/* ── Article page ── */
.article-header {
  padding: 8px 0 2px;
  margin-bottom: 2px;
}

.article-header .section-label { margin-bottom: 10px; }

.article-headline {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
/* Devanagari (Hindi) carries tall top matras / shirorekha that rise into the
   language-switcher flag row above the headline. Nudge the headline down a few
   px so the diacritics clear the flags. Scoped to Hindi so other scripts are
   unaffected. */
html[lang="hi"] .article-headline { margin-top: 6px; }

.article-standfirst {
  font-size: 1.15rem;
  color: var(--mid);
  line-height: 1.2;
  font-style: italic;
  margin-bottom: 4px;
}

.article-meta {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  border-top: 1px solid var(--light);
  padding-top: 12px;
}

/* ── Article body ── */
.article-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  padding: 4px 0 60px;
}

.article-body.no-sidebar {
  grid-template-columns: 1fr;
}

.article-text p { margin-bottom: 16px; }

.article-text h2 {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 28px 0 4px;
  clear: both;
  text-align: left;
}

.article-text figure {
  margin: 2px 0;
  position: relative;
  overflow: hidden;
}

.figure-brand {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  opacity: 0.82;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
  pointer-events: none;
  z-index: 10;
}

.article-text figure:first-child {
  margin-top: 0;
}

.article-text figure img:not(.figure-brand) {
  width: 400px;
  max-width: 100%;
  display: block;
}

.article-text figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-family: Impact, 'Arial Narrow', var(--sans);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  padding: 10px 14px;
  text-align: center;
  line-height: 1.3;
}

.article-text .dateline {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
}

.article-text .closing-note {
  font-style: italic;
  color: var(--mid);
  font-size: 0.9rem;
  border-top: 1px solid var(--light);
  padding-top: 16px;
  margin-top: 32px;
}

/* ── Pull quote ── */
.pull-quote {
  border-top: 3px solid var(--black);
  border-bottom: 1px solid var(--light);
  padding: 18px 0;
  margin: 28px 0;
}

.pull-quote p {
  font-size: 1.25rem;
  line-height: 1.4;
  font-style: italic;
  margin: 0;
}

/* ── Sidebar ── */
.article-sidebar {
  padding-top: 4px;
}

.sidebar-block {
  border-top: 3px solid var(--black);
  padding: 16px 0 24px;
  margin-bottom: 24px;
}

.sidebar-block h3 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.sidebar-block .sidebar-headline {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  margin-top: 10px;
}

.sidebar-block .sidebar-blurb {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.45;
}

/* ── Tags ── */
.related-articles {
  margin: 28px 0;
  padding-top: 20px;
  border-top: 1px solid var(--light);
  clear: both;
  width: 100%;
  box-sizing: border-box;
}
.related-articles h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 14px;
}
.related-articles ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.related-articles li {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 10px;
  color: var(--mid);
}
.related-articles li a {
  color: var(--black);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--light);
}
.related-articles li a:hover {
  border-bottom-color: var(--black);
}

.tags {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--light);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.tags span { color: var(--mid); text-transform: uppercase; margin-right: 4px; }
.tags a {
  display: inline-block;
  background: var(--light);
  padding: 3px 8px;
  margin: 3px 3px 3px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tags a:hover { background: var(--black); color: white; text-decoration: none; }

/* ── Advertisement blocks ── */
.ad-block {
  border: 2px solid var(--black);
  padding: 18px 16px;
  margin-bottom: 24px;
  text-align: center;
  background: white;
}

.ad-block .sponsor-label {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px solid var(--light);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.ad-block .sponsor-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.ad-block .sponsor-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.4;
  margin-bottom: 10px;
}

.ad-block .ad-body {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--black);
  line-height: 1.45;
  margin-bottom: 10px;
}

.ad-block .ad-cta {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--black);
  padding: 4px 12px;
}

.ad-block.ad-ink { border-color: #1a1a4e; }
.ad-block.ad-ink .sponsor-name { color: #1a1a4e; }
.ad-block.ad-ink .ad-cta { border-color: #1a1a4e; color: #1a1a4e; }

.sponsor-strip {
  border-top: 1px solid var(--light);
  border-bottom: 1px solid var(--light);
  padding: 0 20px;
  margin: 4px 0 0;
  clear: both;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.sponsor-strip:hover { background: #fafafa; text-decoration: none; }

.sponsor-strip .sponsor-label {
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  flex-shrink: 0;
}

.sponsor-strip .sponsor-body {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sponsor-strip .sponsor-name {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 700;
}

.sponsor-strip .sponsor-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.76rem;
  color: var(--mid);
  margin-left: 6px;
}

/* ── Beat page cards (two-column, alternating image/text) ── */
.beat-list {
  margin: 16px 0 30px;
}

.beat-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--light);
}
.beat-card:last-child { border-bottom: none; }

.beat-card > a {
  width: 50%;
  flex-shrink: 0;
  display: block;
}

.beat-card-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.beat-card-body {
  flex: 1;
}

/* Alternate rows: even cards flip image to right */
.beat-card:nth-child(even) {
  flex-direction: row-reverse;
}

/* ── Topic landing page (section filter view) ── */
#topic-list {
  margin: 30px 0;
}

.topic-row {
  display: flex;
  gap: 36px;
  padding: 32px 0;
  border-bottom: 1px solid var(--light);
  align-items: flex-start;
}

.topic-row:first-child {
  border-top: 1px solid var(--light);
}

/* Even-indexed rows: reverse — text left, image right */
.topic-row.reverse {
  flex-direction: row-reverse;
}

.topic-row-img {
  flex: 0 0 380px;
}

.topic-row-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.topic-row-img--empty {
  background: var(--light);
  height: 260px;
}

.topic-row-text {
  flex: 1;
  padding-top: 4px;
}

.topic-headline {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
}

.topic-headline a:hover {
  text-decoration: underline;
}

.topic-row-text .card-standfirst {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 14px;
}

.topic-row-text .card-byline {
  margin-top: 8px;
}

@media (max-width: 680px) {
  .topic-row,
  .topic-row.reverse {
    flex-direction: column;
  }
  .topic-row-img {
    flex: none;
    width: 100%;
  }
  .topic-headline { font-size: 1.4rem; }
}

/* ── Footer ── */
footer {
  border-top: 3px solid var(--black);
  padding: 20px;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--mid);
  letter-spacing: 0.06em;
}

@media (max-width: 680px) {
  .masthead .pub-name { font-size: 2rem; }
  .index-grid { grid-template-columns: 1fr; }
  .index-grid .featured { grid-column: 1; }
  .article-body { grid-template-columns: 1fr; }
  .article-headline { font-size: 1.8rem; }
  .article-sidebar { display: none; }
}

/* ── Article components ───────────────────────────────────────── */

.meme-block {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0;
  margin: 32px auto;
  max-width: 540px;
  overflow: hidden;
}
.meme-block img { width: 100%; display: block; }
.meme-block .meme-caption {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--mid);
  padding: 10px 14px;
  border-top: 1px solid #ddd;
  text-align: center;
}

.ad-unit {
  border: 2px solid var(--black);
  padding: 20px 24px;
  margin: 36px 0;
  text-align: center;
  background: #fff;
}
.ad-unit .sponsor-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
}
.ad-unit .ad-brand {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.ad-unit .ad-copy {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.5;
  margin-bottom: 12px;
}
.ad-unit .ad-cta {
  display: inline-block;
  background: var(--black);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 22px;
  text-decoration: none;
}
.ad-unit .ad-disclaimer {
  font-family: var(--sans);
  font-size: 0.65rem;
  color: #aaa;
  margin-top: 10px;
}

.man-on-street {
  border-left: 4px solid var(--black);
  padding: 18px 24px;
  margin: 32px 0;
  background: #f9f9f9;
  clear: both;
  width: 100%;
  box-sizing: border-box;
}
.man-on-street .mot-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
}
.man-on-street .mot-quote {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}
.man-on-street .mot-attribution {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--mid);
}
.man-on-street .mot-followup {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--mid);
  font-style: italic;
  margin-top: 10px;
}

/* ── Utility / content classes ────────────────────────────────── */

.ad-brand-sub {
  font-size: 1rem;
  font-weight: 400;
}

.article-list {
  margin: 0 0 20px 20px;
  line-height: 2;
}

.column-bio {
  font-size: 0.82rem;
  line-height: 1.55;
}

.sidebar-section-bordered {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--light);
}

.sidebar-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--mid);
}

/* ── Publication dateline ─────────────────────────────────────── */

/* ── Dateline + share row ─────────────────────────────────────── */

.dateline-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 24px;
  border-bottom: 1px solid var(--light);
  background: #fafafa;
  overflow: hidden;
}

.pub-dateline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: 0.65rem;
  color: var(--mid);
  letter-spacing: 0.01em;
  line-height: 1.3;
  grid-column: 1 / -1;
  margin-top: 0;
  padding-top: 0;
}

.dl-date { }
.dl-time { }
.dl-ms   { }

/* ── Corrections block ────────────────────────────────────────── */

.corrections-block {
  border-top: 2px solid var(--black);
  margin: 40px 0 0;
  padding-top: 16px;
}
.corrections-block .corrections-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
}
.corrections-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.corrections-block li {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--mid);
  margin-bottom: 6px;
}
.corrections-block .correction-date {
  font-weight: 700;
  color: var(--black);
}

/* ── Share bar ────────────────────────────────────────────────── */

.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
}

/* Vertical share bar in masthead.
   4 columns: flexible 1fr spacer tracks on the outside, two auto icon tracks in
   the middle. The full-width pub-dateline below would otherwise inflate the
   icon tracks and spread the icons apart; the 1fr spacers absorb that extra
   width instead, keeping the two icon columns tight and centered. */
.share-bar--vertical {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0;
  align-items: start;
  line-height: 0;
}
/* Quad variant: flexible 1fr spacer tracks outside, two tight icon tracks in
   the middle. Keeps the icons from spreading when a full-width dateline sits
   below them. REQUIRES .sb-spacer placeholder cells in the markup, so it is
   opt-in per page — pages without spacers keep the plain 2-column socbar. */
.share-bar--vertical.share-bar--quad {
  grid-template-columns: 1fr auto auto 1fr;
}
.share-bar--vertical .sb-spacer {
  width: 18px;
  height: 18px;
}

.share-bar--vertical .share-copy {
  font-family: Impact, 'Arial Narrow', var(--sans);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  text-align: left;
  width: 100%;
  height: auto;
}

.share-bar a.share-icon {
  border: none;
  background: transparent;
  padding: 0;
  width: auto;
  height: 18px;
  line-height: 0;
  display: flex;
  align-items: center;
}
.share-bar a.share-icon:hover {
  background: transparent;
  opacity: 0.7;
}

/* Share bar inside article body (standalone, not in dateline-share-row) */
.article-body .share-bar {
  margin: 36px 0 24px;
  padding: 18px 0;
  border-top: 1px solid var(--light);
  border-bottom: 1px solid var(--light);
}
.share-bar .share-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  margin-right: 4px;
}
.share-bar a.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  color: var(--black);
  background: transparent;
  text-decoration: none;
  transition: opacity 0.15s;
  font-size: 0.9rem;
}
.share-bar a.share-btn:hover {
  background: var(--black);
  color: #fff;
}
.share-bar a.share-native {
  background: var(--black);
  color: #fff;
}
.share-bar a.share-native:hover {
  background: #333;
}

.pub-ms {
  font-size: 0.95em;
  font-weight: 900;
  color: var(--black);
  letter-spacing: 0;
}

/* ── Ad Banners (supplement) ── */
.sponsor-strip .sponsor-label {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 0;
}
.sponsor-strip .sponsor-body .sponsor-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}
.sponsor-strip .sponsor-body .sponsor-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--mid);
  margin-top: -2px;
  line-height: 1;
}

/* ── Ad Units (large format) ── */
.ad-unit {
  border: 1px solid var(--black);
  padding: 10px 24px;
  margin: 18px 0;
  text-align: center;
  background: #fff;
}
.ad-unit .sponsor-label {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.ad-unit .ad-brand {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.ad-unit .ad-copy {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.5;
  margin-bottom: 8px;
}
.ad-unit .ad-cta {
  display: inline-block;
  background: var(--black);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 22px;
  text-decoration: none;
}
.ad-unit .ad-disclaimer {
  font-family: var(--sans);
  font-size: 0.65rem;
  color: #aaa;
  margin-top: 6px;
}

/* ── XMR Inline Tip Jar ── */
.xmr-inline {
  border-top: 1px solid var(--light);
  border-bottom: 1px solid var(--light);
  padding: 4px 20px;
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  clear: both;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.2;
  flex-wrap: wrap;
}
.xmr-inline .xmr-inline-label {
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  flex-shrink: 0;
}
.xmr-inline .xmr-inline-ask {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--mid);
  flex: 1 1 auto;
  min-width: 0;
}
.xmr-inline .xmr-inline-addr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.xmr-inline .xmr-inline-addr {
  font-family: monospace;
  font-size: 0.7rem;
  background: transparent;
  border: none;
  padding: 3px 0;
  color: var(--black);
  user-select: all;
}
.xmr-inline .xmr-inline-copy {
  background: var(--black);
  color: #fff;
  border: none;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
}
.xmr-inline .xmr-inline-copy:hover { background: #333; }
.xmr-inline .xmr-inline-more {
  font-family: var(--sans);
  font-size: 0.64rem;
  color: var(--mid);
  text-decoration: none;
  letter-spacing: 0.06em;
}
.xmr-inline .xmr-inline-more:hover { text-decoration: underline; color: var(--black); }

/* ── Edition date + beat: equal HEIGHT across all languages ───────────────────────
   Different scripts fall back to different system fonts whose line-leading varies
   wildly (Japanese rendered ~40% taller than Latin at the same font-size). line-height:1
   normalizes the line box to a single height across every language without shrinking the
   glyphs. Verified uniform d/b heights, en…ja…ko…ar. (Phil flagged 2026-07-16) */
.article-editiondate,
.article-kicker { line-height: 1; }

/* ── Per-script edition-date + beat size: some scripts render visibly larger/heavier
   than Latin at the same font-size (Devanagari tallest; Arabic/Farsi heavier; Cyrillic
   a touch). Nudge those down so the date/beat read at one visual size across languages.
   `html[lang=..]` beats the article's inline .edition-stamp/.article-kicker. Tune by eye.
   (Phil 2026-07-16) */
/* The scripts that render naturally large at the base size — Hindi, the Arabic-script
   pair (ar, fa), and Russian — are the reference. Bump everyone else (the A-B-C-D
   languages + Chinese + Saturnian + Japanese/Korean) UP to match. `html` prefix beats
   the article's inline .edition-stamp/.article-kicker; the lang list holds the reference
   four at base. Tune the two numbers below by eye. (Phil 2026-07-16) */
/* Fixed-height "box": uniform font-size + fixed line-height + uniform bottom margin, so
   the gap from the date down to the flags is identical across every script, no matter
   where each font places its ink. line-height 20px centers the ~10px glyphs with equal
   buffer top/bottom. (Phil 2026-07-16 — the box approach.) */
/* Match every script to the VISUAL size of Arabic (Phil's reference — short but heavy,
   so it reads big). Arabic/Farsi/Hindi/Russian already read that big at ~0.60; the Latin
   group and CJK read smaller, so they're bumped UP. Tuned by eye, not by pixel height
   (height misleads for these scripts). */
/* Match the YEAR digits across all languages (Phil's "look at the 2026" test). At one
   font-size the 2026 renders the same everywhere (same digit font), so the date is uniform
   — EXCEPT Farsi, whose Persian digits (۲۰۲۶) are small glyphs and need a larger size to
   match. Words in tall scripts (Devanagari/Arabic) sit naturally taller; the NUMBER lines
   up, which is the reference. (Phil 2026-07-16) */
html .article-editiondate { font-size: 0.70rem; line-height: 20px; margin-bottom: 4px; }
html .article-kicker      { font-size: 0.72rem; line-height: 20px; margin-bottom: 4px; }
/* Per-language date sizing lives in the .edition-stamp block below (the one that
   actually wins the cascade). Do not add competing .article-editiondate rules here. */

/* ── RTL article header: date, beat, and flag block hug the right (reading start) ──
   The flags keep their internal LTR order (set elsewhere); only the block aligns
   right. Part of the 20260715 article standard so every RTL article matches without
   per-file edits. (Phil 2026-07-15/16) */
html[dir="rtl"] .article-editiondate,
html[dir="rtl"] .article-kicker { text-align: right; }
html[dir="rtl"] .article-flags { display: flex; justify-content: flex-end; }

/* ── In-article images: standard size + responsive (20260715 article standard) ────
   Two patterns: a floated single figure (.art-fig-left/right) and an image+quote
   "breakout" row (.art-breakout). On desktop the image holds ~400px beside the text;
   on phone both STACK — image on top, full width up to 400px, centered — instead of
   shrinking to a tiny image beside a narrow, very tall text column. (Phil 2026-07-16) */
/* Classes sit on the <img> (the .img-share-link <a> is display:contents, so the
   image is the real layout box / flex item). */
.art-fig-left  { float: left;  clear: both; display: block; width: 44%; max-width: 400px; height: auto; margin: 4px 24px 14px 0; }
.art-fig-right { float: right; clear: both; display: block; width: 44%; max-width: 400px; height: auto; margin: 4px 0 14px 24px; }

.art-breakout { clear: both; display: flex; gap: 26px; align-items: flex-start; margin: 24px 0; }
.art-breakout .bo-img { flex: 0 0 44%; width: 44%; max-width: 400px; height: auto; display: block; }
.art-breakout .bo-text { flex: 1; min-width: 0; }

@media (max-width: 680px) {
  .art-fig-left, .art-fig-right { float: none; width: 100%; max-width: 400px; margin: 0 auto 16px; }
  .art-breakout { flex-direction: column; }
  .art-breakout .bo-img { order: -1; flex: none; width: 100%; max-width: 400px; margin: 0 auto 14px; }
}

/* ── Phone: long ad / tip-jar copy must WRAP, not clip (classified-ad stack) ──────
   The sponsor-strip and xmr-inline are single-line flex rows built for short tags;
   a longer line (any language) overflowed the right edge and got clipped on phones,
   hiding the payoff. On narrow screens, drop the label onto its own line and let the
   body wrap. Desktop layout is untouched. (Phil flagged 2026-07-15) */
@media (max-width: 680px) {
  .sponsor-strip {
    display: block;
    white-space: normal;
    overflow: visible;
    padding: 8px 16px;
  }
  .sponsor-strip .sponsor-label { display: block; margin-bottom: 1px; }
  .sponsor-strip .sponsor-body { display: block; width: 100%; flex: none; white-space: normal; overflow: visible; text-overflow: clip; }
  .sponsor-strip .sponsor-body .sponsor-name { display: block; line-height: 1.05; }
  .sponsor-strip .sponsor-body .sponsor-tag { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; margin: 2px 0 0; }

  .xmr-inline { display: block; padding: 8px 16px; }
  .xmr-inline .xmr-inline-label { display: block; margin-bottom: 1px; }
  .xmr-inline .xmr-inline-ask { display: block; white-space: normal; margin-bottom: 6px; }
  .xmr-inline .xmr-inline-addr-row { margin-left: 0; }
}


/* ── RTL chrome stays LTR (test: tests/consistency/test_rtl_chrome.py) ──────────
   On Arabic / dir="rtl" pages the brand chrome must NOT mirror: the masthead
   (logo left, share-bar right) and the article-header meta row (edition date +
   language flags) stay left-to-right; only the article TEXT flows right-to-left. */
html[dir="rtl"] .masthead { direction: ltr; }
html[dir="rtl"] .article-header > div { direction: ltr; }
/* beat pages carry the same date+flags meta row (the .beat-head), and the
   back-issues archive its section-label+switcher row — keep them LTR too so the
   language flags sit on the right and the label/date on the left, matching the
   articles (Phil 2026-07-03: RTL beat page had flags mirrored to the left). */
html[dir="rtl"] .beat-head { direction: ltr; }
html[dir="rtl"] .archive > div:first-of-type { direction: ltr; }


/* ── Dateline visual-size parity across scripts (test: tests/consistency/test_date_font_parity.py)
   Arabic/Persian and Devanagari render a smaller visual body at a given font-size,
   so the edition-stamp dateline looked tiny in fa/ar/hi next to Latin/CJK. Bump
   those scripts so the date reads ~the same pixel height in every language. */
html[lang="fa"] .edition-stamp { font-size: 0.88em; }
html[lang="ar"] .edition-stamp { font-size: 0.68em; }  /* Phil: a little smaller */
html[lang="hi"] .edition-stamp { font-size: 0.65em; }  /* Phil: a little smaller */
html[lang="ru"] .edition-stamp { font-size: 0.70em; }  /* Phil: a little smaller */

/* Image-share link wrapper: layout-transparent so the wrapped <img> keeps its own
   float/flex sizing (a plain inline <a> made flex-child images collapse to content
   width -> shrunk). display:contents keeps the img clickable while removing the
   anchor's own box from layout. (Phil 2026-07-14: pet-horror 2nd/3rd images shrunk.) */
.img-share-link { display: contents; }
