/*
  ────────────────────────────────────────────────────────────────────
  ANDES VIEWPOINTS — BULLETIN

  THE ONE IDEA DRIVING THE DESIGN
  This page is a bulletin, not a landing page. The masthead, the
  headline, the form, the section structure, the colophon — all read
  as a quarterly review. The reader is being invited to subscribe to
  a publication, not sold a product. A single 4px rule under the
  masthead is the only thick element on the page; it carries the
  page's authority and tells the reader, before they have read a
  word, that they are looking at a document that was set, not a
  page that was designed.

  THE TYPEFACE RATIONALE
  A Palatino-class serif (Iowan Old Style → Palatino Linotype →
  Palatino → Charter → Cambria → Georgia) carries every word the
  reader is meant to read at length — the headline, the section
  titles, the body, the colophon. A system sans (Helvetica Neue →
  Inter → Helvetica → Arial) is reserved for the apparatus: the
  folio, the section codes, the country stamps, the form labels, the
  colophon line. The split is the engine. system-ui is rejected as
  the body face — a newsletter that sells reading cannot be set in
  the UI font, and falling into system-ui is exactly the kind of
  decision this brief warned against.

  THE SCALE
  17px base at 1.55 line-height. The body measure is held to 62ch.
  The H1 holds at a quiet 2.25rem–2.75rem — annual-report register,
  not front-page register. Section heads at 1.25rem–1.625rem in
  regular serif. Standing heads, folio, and section codes are
  0.625rem–0.75rem in small-caps sans. The thick rule is 4px;
  everything else is a 1px hairline. The scale is restrained
  because the design depends on it.

  THE SINGLE DECISION I'D DEFEND HARDEST
  Setting the headline small. Both prior versions leaned on an
  enormous H1 to do the work; the most distinctive move available
  was the inversion. A quiet 2.5rem headline, with the second line
  set in italic as a typographic counterpoint, and a single 4px
  horizontal rule that crosses the full content width to carry the
  page's authority. A reader who lands on the page sees the rule
  first, the headline second, the body third. That reading order
  is the bulletin register. It tells them, before they have read a
  word, that they are looking at a publication, not a campaign.
  ────────────────────────────────────────────────────────────────────
*/

/* ─── TOKENS ──────────────────────────────────────────────────── */

:root {
  /* Paper */
  --paper:        #efeae0;
  --paper-deep:   #e5dfd0;
  --paper-darker: #dcd5c2;

  /* Ink */
  --ink:        #1a1814;
  --ink-soft:   #2d2925;
  --ink-muted:  #5d5648;
  --ink-faint:  #5d5648;

  /* Rule */
  --rule:      #1a1814;
  --rule-soft: #6b6457;

  /* Accent — oxidised copper, used sparingly */
  --accent:      #7a3a18;
  --accent-deep: #5a2a10;

  /* Type stacks */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino,
           "Charter", "Cambria", Georgia, serif;
  --sans:  "Helvetica Neue", "Inter", Helvetica, Arial,
           "Liberation Sans", sans-serif;

  /* Scale */
  --base:    1.0625rem;       /* 17px */
  --measure: 62ch;

  /* Spacing */
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --max-w:     80rem;          /* 1280px */
  --rhythm:    clamp(2rem, 5vh, 3.5rem);

  /* Rules */
  --rule-thick: 4px;
  --rule-hair:  1px;
}

/* ─── RESET ───────────────────────────────────────────────────── */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

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

/* ─── BODY ────────────────────────────────────────────────────── */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--base);
  line-height: 1.55;
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── SKIP LINK ───────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.625rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ─── FOCUS RING (default for all focusable elements) ─────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ─── MASTHEAD ────────────────────────────────────────────────── */

.masthead {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.75rem var(--gutter) 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.masthead-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}

.masthead-pub {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant: small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  color: var(--ink);
}
.masthead-pub .masthead-mark { font-weight: 700; }

.masthead-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
  color: var(--ink-muted);
  letter-spacing: 0.005em;
}

.masthead-folio {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  font-weight: 600;
  font-feature-settings: "tnum" 1, "lnum" 1;
  flex-wrap: wrap;
}
.folio-fig { font-weight: 700; }

.masthead-countries {
  display: flex;
  gap: 0.625rem;
  padding-left: 0.875rem;
  border-left: 1px solid var(--rule-soft);
}
.masthead-countries abbr {
  text-decoration: none;
  font-weight: 700;
  color: var(--accent);
  cursor: help;
}

.masthead-cadence {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: 500;
}

/* The decisive rule under the masthead — the only thick element */
.masthead-rule {
  max-width: var(--max-w);
  margin: 0 auto;
  border: 0;
  border-top: var(--rule-thick) solid var(--rule);
  height: 0;
}

/* ─── MAIN CONTAINER ──────────────────────────────────────────── */

main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ─── HERO ────────────────────────────────────────────────────── */

.hero {
  padding: var(--rhythm) 0 calc(var(--rhythm) * 0.85);
  border-bottom: 1px solid var(--rule-soft);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.hero-prose { max-width: 52ch; }

.kicker {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  gap: 0.625rem;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* The headline — set small, annual-report register */
.hero-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 4.2vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0 0 1.5rem;
  color: var(--ink);
}
.hero-h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: -0.012em;
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 50ch;
  font-feature-settings: "onum" 1;
}

/* ─── SUBSCRIPTION FORM (hero + foot) ─────────────────────────── */

.sub {
  /* No box, no shadow, no rounded corners — a typeset form, not a widget */
  display: flex;
  flex-direction: column;
}

.sub-stand {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.field {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
}
.field label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
  order: 1;
}
.field input[type="email"] {
  order: 2;
  width: 100%;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.4;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid var(--ink-muted);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.1s linear;
}
.field input[type="email"]::placeholder { color: var(--ink-faint); font-style: italic; }
.field input[type="email"]:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field input[type="email"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-bottom-color: var(--accent);
}
.field input[type="email"]:user-invalid {
  border-bottom-color: var(--accent-deep);
}

/* Honeypot — hidden via stylesheet, not inline */
.hp { display: none; }

.btn {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
  margin-top: 0.25rem;
  transition: background 0.1s linear, color 0.1s linear, border-color 0.1s linear;
  -webkit-appearance: none;
  appearance: none;
}
.btn:hover  { background: var(--ink); color: var(--paper); }
.btn:active { background: var(--accent); border-color: var(--accent); color: var(--paper); }

.privacy {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: 1.25rem;
  line-height: 1.5;
  max-width: 38ch;
}

/* ─── SECTIONS (shared) ───────────────────────────────────────── */

.section {
  padding: var(--rhythm) 0;
  border-bottom: 1px solid var(--rule-soft);
}

.sec-head {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 2.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.sec-code {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  margin: 0;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.01em;
}

.sec-titles { min-width: 0; }

.sec-kind {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ink-muted);
  margin: 0 0 0.625rem;
}

.sec-h {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 48ch;
  color: var(--ink);
}

/* ─── 02 · WHAT YOU'LL GET — numbered list ────────────────────── */

.numbered {
  max-width: var(--measure);
  margin: 0;
}
.numbered-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.numbered-item:first-child { border-top: 1px solid var(--rule); }
.n-no {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--accent);
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
}
.n-title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  line-height: 1.3;
  color: var(--ink);
}
.n-text {
  margin: 0;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
  font-feature-settings: "onum" 1;
}

/* ─── 03 · SAMPLE ISSUE — facsimile ───────────────────────────── */

.section--sample {
  /* Bleed the deeper paper to the page edge, like a tipped-in page */
  background: var(--paper-deep);
  margin-left:  calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding-left:  var(--gutter);
  padding-right: var(--gutter);
  border-bottom: 1px solid var(--rule-soft);
}

.issue {
  max-width: 52rem;
  margin: 0 auto;
  background: var(--paper);
  padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3.5rem);
  border-top: 3px double var(--rule);
  border-bottom: 3px double var(--rule);
  position: relative;
}

.issue-masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.5rem;
}
.issue-pub {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.issue-vol {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  font-weight: 600;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.issue-dateline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  display: flex;
  gap: 0.625rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.dateline-tag {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent);
}
.dateline-EM { color: var(--ink-faint); }

.issue-rule {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 1.25rem 0;
}
.issue-rule--double {
  border-top: 3px double var(--rule);
  margin: 1rem 0;
}

.stand {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.625rem;
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}
.stand-no {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
}

.country-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  padding: 0.1875rem 0.5625rem 0.25rem;
  margin: 0 0 0.875rem;
  line-height: 1;
}
.country-tag--sm {
  font-size: 0.625rem;
  padding: 0.15625rem 0.5rem 0.1875rem;
  margin: 0;
}

.issue-h {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 1rem;
  max-width: 46ch;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.issue-body {
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 0.875rem;
  text-align: justify;
  hyphens: auto;
  font-feature-settings: "onum" 1;
}
.issue-body:last-child { margin-bottom: 0; }

.roundup { margin: 0; }
.roundup-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.5rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.roundup-row:last-child { border-bottom: none; }
.roundup-row dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
  font-feature-settings: "onum" 1;
}
.roundup-row dt { display: flex; }

.issue-end {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-align: center;
  margin: 0.75rem 0 0;
  font-weight: 500;
}

/* ─── 04 · COUNTRY COVERAGE ───────────────────────────────────── */

.countries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.country {
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.country:nth-child(odd) {
  border-right: 1px solid var(--rule-soft);
  padding-right: 1.5rem;
}
.country:nth-child(even) {
  padding-left: 1.5rem;
}

.country-name {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 400;
  letter-spacing: -0.008em;
  margin: 0 0 0.625rem;
  color: var(--ink);
}
.country-iso {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  vertical-align: super;
  margin-left: 0.375rem;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.country-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
  font-feature-settings: "onum" 1;
}

/* ─── 05 · WHO IT'S FOR ───────────────────────────────────────── */

.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.audience-col {
  padding: 1.5rem 1.5rem 1.5rem 0;
}
.audience-col + .audience-col {
  border-left: 1px solid var(--rule-soft);
  padding-left: 1.5rem;
  padding-right: 0;
}

.audience-stand {
  font-family: var(--sans);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.375rem;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.audience-h {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink);
}
.audience-list { margin: 0; }
.audience-list li {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  padding: 0.625rem 0 0.625rem 1.625rem;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
  counter-increment: aud;
  text-align: justify;
  hyphens: auto;
  font-feature-settings: "onum" 1;
}
.audience-list { counter-reset: aud; }
.audience-list li:last-child { border-bottom: none; }
.audience-list li::before {
  content: counter(aud) ".";
  position: absolute;
  left: 0;
  top: 0.6875rem;
  font-family: var(--serif);
  font-size: 0.875rem;
  color: var(--accent);
  font-weight: 400;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ─── 06 · FAQ ────────────────────────────────────────────────── */

.faq {
  max-width: var(--measure);
  border-top: 1px solid var(--rule);
}
.faq-pair {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.faq-q {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  margin: 0 0 0.625rem;
  color: var(--ink);
  padding-left: 1.875rem;
  text-indent: -1.875rem;
}
.qa-mark {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-right: 0.5rem;
  text-indent: 0;
  display: inline-block;
  min-width: 1.25rem;
}
.faq-a {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 1.875rem;
  text-align: justify;
  hyphens: auto;
  font-feature-settings: "onum" 1;
}
.faq-a .qa-mark { color: var(--ink-soft); }

/* ─── 07 · REPEATED FORM SECTION ──────────────────────────────── */

.section--sub {
  border-bottom: 1px solid var(--rule-soft);
}
.sub--foot {
  max-width: 32rem;
  margin-top: 1.5rem;
}

/* ─── COLOPHON ────────────────────────────────────────────────── */

.colophon-rule {
  max-width: var(--max-w);
  margin: 0 auto;
  border: 0;
  border-top: 3px double var(--rule);
  height: 0;
}

.colophon {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 3rem;
}

.colo-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.colo-mark { display: block; line-height: 0; }
.colo-logo { width: auto; height: 2.5rem; display: block; }

.colo-meta { flex: 1 1 20rem; min-width: 0; }
.colo-line {
  font-family: var(--serif);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 0.375rem;
  font-feature-settings: "onum" 1;
}
.colo-strong { font-weight: 600; color: var(--ink-soft); }
.colo-line a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 1px;
  transition: color 0.1s linear, border-color 0.1s linear;
}
.colo-line a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.colo-fine {
  font-family: var(--sans);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule-soft);
  padding-top: 1rem;
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 56rem) {
  .hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  :root { --gutter: 1.25rem; }

  .masthead { padding-top: 1.25rem; }
  .masthead-row { gap: 0.5rem 1rem; }
  .masthead-tag { width: 100%; order: 3; }
  .masthead-countries { padding-left: 0; border-left: 0; }

  .sec-head {
    grid-template-columns: 3rem 1fr;
    gap: 0.875rem;
  }

  .countries { grid-template-columns: 1fr; }
  .country,
  .country:nth-child(odd),
  .country:nth-child(even) {
    border-right: none;
    padding-left: 0;
    padding-right: 0;
  }

  .audience { grid-template-columns: 1fr; }
  .audience-col,
  .audience-col + .audience-col {
    border-left: none;
    padding-left: 0;
    padding-right: 0;
  }
  .audience-col + .audience-col { border-top: 1px solid var(--rule-soft); }
  .audience-col { padding-top: 1.5rem; padding-bottom: 1.5rem; }

  .roundup-row { grid-template-columns: 1fr; gap: 0.375rem; }
  .roundup-row dt { margin-bottom: 0.125rem; }

  .colo-row { gap: 1.25rem; }
  .colo-logo { height: 2rem; }
}

@media (max-width: 32rem) {
  .hero-h1 { font-size: 1.875rem; }
  .sec-h { font-size: 1.1875rem; }
  .masthead-pub { font-size: 1rem; }
  .masthead-folio { font-size: 0.625rem; gap: 0.625rem; }
}

/* ─── REDUCED MOTION ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ─── PRINT ───────────────────────────────────────────────────── */

@media print {
  body { background: white; color: black; }
  .skip, .btn { display: none; }
  .section--sample { background: white; margin: 0; padding: 0; }
  .issue { border: 1px solid black; }
  a { color: black; text-decoration: underline; }
}