/* =====================================================================
   GRRI DESIGN SYSTEM
   Single source of truth for article presentation.

   Two consumers, one file:
     - WordPress: paste into Appearance / Customize / Additional CSS.
     - Local previews: article_renderer.py inlines this file verbatim.

   Never restate these rules inside a generated article. A briefing that
   carries its own style element has forked the design system.

   Note: WordPress Additional CSS rejects angle-bracket characters, so this
   file avoids HTML-like comments and the CSS child combinator.
   ===================================================================== */

:root {
  --navy:        #1A365D;
  --slate:       #243E56;
  --green:       #2E7D32;
  --canvas:      #FDFDFD;
  --ink:         #2D3748;
  --muted:       #718096;
  --faint:       #A0AEC0;
  --rule:        #E2E8F0;
  --panel:       #F7FAFC;
  --panel-warm:  #FBF9F4;
  --amber:       #B7791F;

  --measure:     680px;   /* editorial column */
  --rail:        304px;   /* contextual right rail */
  --gutter:      64px;
  --page-max:    calc(var(--measure) + var(--rail) + var(--gutter));
  --page-inline: 32px;    /* shared left/right inset — masthead, shell, footer */

  --serif: "Merriweather", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- base */

html {
  max-width: 100%;
}

.grri-page {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.75;
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.grri-page *,
.grri-page *::before,
.grri-page *::after {
  box-sizing: border-box;
}

.grri-page img,
.grri-page svg,
.grri-page video,
.grri-page iframe {
  max-width: 100%;
  height: auto;
}

.grri-page *:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.grri-shell {
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-inline);
  box-sizing: border-box;
}

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

.grri-masthead {
  border-bottom: 1px solid var(--rule);
  background: #FFFFFF;
  position: relative;
  z-index: 20;
}

.grri-masthead-inner {
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  padding: 14px var(--page-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.grri-wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  letter-spacing: -0.2px;
  text-decoration: none;
  line-height: 1.25;
  min-width: 0;
  flex: 1 1 auto;
}
.grri-monogram {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #F8F9FA;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.3px;
  border-left: 3px solid var(--green);
  box-sizing: border-box;
}
.grri-wordmark-text { display: block; }
.grri-wordmark-text span {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

/* Language + region controls. The region value is a coarse bucket resolved at
   the edge; no IP ever reaches the page. See gdpr_cmp_config.md. */
.grri-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  margin-left: auto;
  max-width: 100%;
  min-width: 0;
}

.grri-lang { display: flex; align-items: center; gap: 2px; }
.grri-lang a,
.grri-lang span,
.grri-lang button {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--muted);
  border: 0;
  background: transparent;
}
.grri-lang button { cursor: pointer; }
.grri-lang a:hover,
.grri-lang button:hover { background: var(--panel); color: var(--navy); }
.grri-lang [aria-current="true"] { background: var(--navy); color: #FFFFFF; }
.grri-lang [data-unavailable] { color: var(--faint); cursor: not-allowed; }

.grri-edition-note {
  margin: 0 auto;
  max-width: var(--page-max);
  padding: 8px var(--page-inline) 10px;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  background: var(--panel);
  border-bottom: 1px solid var(--rule, #E2E8F0);
}
.grri-edition-note[hidden] { display: none !important; }

.grri-region-field { display: flex; align-items: center; gap: 7px; }
.grri-region-field label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
}
.grri-region-field select {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 6px 9px;
  cursor: pointer;
}

.grri-subscribe {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #FFFFFF;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.grri-subscribe:hover { background: #14294a; }

/* --------------------------------------------------------- title block */

/* The title block sits inside the left grid column, not above the grid. That keeps the
   rail's top card level with the headline instead of stranding an empty band of white
   to the right of the title. */
.grri-titleblock {
  padding: 0;
  max-width: var(--measure);
  margin-bottom: 40px;
}

.grri-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}
.grri-breadcrumb a { color: var(--muted); text-decoration: none; }
.grri-breadcrumb a:hover { color: var(--navy); text-decoration: underline; }

.grri-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--slate);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 3px;
  text-decoration: none;
  margin-bottom: 22px;
}

.grri-sponsored-strap {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  border-left: 3px solid var(--green, #2E7D32);
  padding: 10px 14px;
  margin: 0 0 18px;
  background: rgba(46, 125, 50, 0.06);
}

/* Optical alignment: the serif headline is pulled left by ~2px so its stem
   lines up with the flush edge of the kicker and body copy above and below. */
.grri-headline {
  font-family: var(--serif);
  font-size: clamp(31px, 4.1vw, 45px);
  line-height: 1.18;
  letter-spacing: -0.9px;
  color: var(--navy);
  font-weight: 700;
  margin: 0 0 20px;
  text-wrap: balance;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.grri-dek {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.55;
  color: #4A5568;
  font-weight: 400;
  margin: 0 0 28px;
  max-width: 40em;
  text-wrap: pretty;
}

.grri-byline {
  display: flex;
  align-items: baseline;
  gap: 10px 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.grri-byline .grri-publisher { font-weight: 600; color: var(--ink); }
.grri-byline time { font-variant-numeric: tabular-nums; }
.grri-byline .grri-sep { color: var(--rule); }
.grri-byline .grri-updated { color: var(--amber); font-weight: 600; }

/* ------------------------------------------------------------ the grid */

.grri-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) var(--rail);
  gap: var(--gutter);
  align-items: start;
  padding: 48px 0 72px;
}

.grri-main { min-width: 0; }
.grri-article { min-width: 0; }

/* -------------------------------------------------------- article body */

.grri-article p,
.entry-content p,
.grri-article .grri-lede {
  font-size: 17.5px;
  line-height: 1.8;
  margin: 0 0 26px;
  color: var(--ink);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Opening paragraph carries slightly more weight, as in a print leader. */
.grri-article .grri-lede { font-size: 19px; line-height: 1.7; color: #1F2733; }

/* Structural blocks stay flush-left — justified quotes and cards look broken. */
.grri-article h2,
.grri-article h3,
.entry-content h2,
.entry-content h3,
.institutional-blockquote,
.data-matrix-table,
.data-matrix-table th,
.data-matrix-table td,
.segment-card,
.segment-card p,
.segment-block p.segment-intro,
.grri-risk-strap,
.neutral-advisory-slot,
.neutral-advisory-slot p,
.reference-section,
.reference-item,
.disclaimer {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Numbered section heads are laid out as two flex items so a wrapping title stays in
   its own column. Previously the second line ran back under the numeral; now every line
   of the title hangs from the same left edge, directly beneath the rule above it. */
.grri-article h2,
.entry-content h2 {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.32;
  color: var(--navy);
  font-weight: 700;
  margin: 56px 0 20px;
  padding-top: 26px;
  border-top: 3px solid var(--navy);
  letter-spacing: -0.3px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.section-number {
  flex: 0 0 auto;
  min-width: 1.15em;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--green);
  line-height: 1;
  padding-top: 2px;
}
.section-title { flex: 1 1 auto; min-width: 0; }
.grri-article h3,
.entry-content h3 {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--navy);
  margin: 34px 0 12px;
}

.grri-article a,
.entry-content a { color: #2C5282; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.grri-article a.grri-term-link,
.entry-content a.grri-term-link {
  color: #2C5282;
  text-decoration: underline;
  text-decoration-color: rgba(44, 82, 130, 0.42);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.grri-article a.grri-term-link:hover,
.entry-content a.grri-term-link:hover { text-decoration-color: #2C5282; }

/* Executive briefing (~5% scroll depth) */
.executive-summary-container {
  background: var(--panel);
  border-left: 4px solid var(--slate);
  padding: 26px 28px;
  margin: 0 0 40px;
  border-radius: 0 5px 5px 0;
}
.executive-summary-container p { margin: 0; font-size: 16.5px; line-height: 1.68; color: #3C4858; }
.executive-summary-container strong { color: var(--navy); }
.executive-summary-container .grri-risk-strap {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.45;
}

/* Editorial photography */
.editorial-image-frame { margin: 38px 0 42px; }
.editorial-image-frame img { width: 100%; height: auto; display: block; border-radius: 4px; }
.editorial-image-caption {
  font-size: 12px;
  color: var(--faint);
  margin-top: 10px;
  line-height: 1.55;
  padding-left: 12px;
  border-left: 2px solid var(--rule);
}
.editorial-image-caption a { color: var(--faint); }

/* Compliance data matrix (~25% scroll depth) */
.data-matrix-wrap { margin: 40px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.55;
  min-width: 540px;
}
.data-matrix-table caption {
  caption-side: bottom;
  text-align: left;
  font-size: 12px;
  color: var(--faint);
  padding-top: 12px;
}
.data-matrix-table th {
  background: var(--slate);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 14px;
}
.data-matrix-table td {
  padding: 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  background: #FFFFFF;
}
.data-matrix-table tr:nth-child(even) td { background: #F8FAFB; }
.data-matrix-table tr:last-child td { border-bottom: 2px solid var(--slate); }

/* Dual-voice expert testimonials */
.institutional-blockquote {
  font-family: var(--serif);
  font-size: 20.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--navy);
  border-left: 4px solid var(--navy);
  padding: 4px 0 4px 26px;
  margin: 46px 0;
}
.institutional-blockquote cite {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.5;
}

/* Neutral advisory slot (~75% scroll depth) — ADVISORY_DIRECTORY renders here */
.neutral-advisory-slot {
  background: #F4F7F5;
  border-left: 4px solid var(--green);
  padding: 24px 26px;
  margin: 46px 0;
  border-radius: 0 5px 5px 0;
}
.neutral-advisory-slot p { margin: 0; font-size: 16px; line-height: 1.7; }
.neutral-advisory-slot a { color: var(--green); font-weight: 600; }

/* Reader-segment takeaways — audience guardrails, editorial constitution §4 */
.segment-block { margin: 48px 0; }
.segment-block h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}
.segment-block p.segment-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 46em;
}
.segment-block .segment-grid { margin: 0; }

.segment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
  margin: 44px 0;
}
.segment-card { background: #FFFFFF; padding: 20px 22px; }
.segment-card h4 {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 8px;
}
.segment-card p { font-size: 14.5px; line-height: 1.6; margin: 0; color: #4A5568; }

/* Reference & citation matrix */
.reference-section {
  margin-top: 60px;
  padding-top: 28px;
  border-top: 3px solid var(--navy);
  font-size: 13.5px;
  line-height: 1.65;
  color: #4A5568;
}
.reference-section h2 {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--navy);
  margin: 0 0 20px;
  border: 0;
  padding: 0;
  display: block;
}
.reference-item { margin-bottom: 14px; padding-left: 24px; text-indent: -24px; }
.reference-item a { color: #2C5282; word-break: break-word; }
.ref-type {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px 6px;
  margin-right: 7px;
  text-indent: 0;
}
.disclaimer { margin-top: 32px; font-size: 11.5px; color: var(--faint); line-height: 1.6; }

/* Open-vocabulary topic layer beneath the six fixed editorial categories. */
.grri-topics {
  margin: 50px 0 36px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.grri-topics span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.grri-topic-list { display: flex; flex-wrap: wrap; gap: 7px; }
.grri-topic-list a {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--slate);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 11px;
  text-decoration: none;
}
.grri-topic-list a:hover { color: var(--green); border-color: #B9D4BB; background: #F3F8F3; }

/* ----------------------------------------------------- contextual rail */

.grri-rail { position: sticky; top: 24px; font-size: 14px; }

.grri-region-field--rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: #fff;
  box-sizing: border-box;
}
.grri-region-field--rail label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
}
.grri-region-field--rail select {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
}
.grri-region-hint {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

.grri-home-lead--regional,
.grri-archive-row--regional {
  box-shadow: inset 3px 0 0 var(--green);
}
.grri-home-chip-row a.is-active-region {
  border-bottom-color: var(--green);
  color: var(--green);
}

.grri-rail-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  background: #FFFFFF;
}
.grri-rail-card h3 {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

/* Deliberate variation so the column reads as a briefing panel rather than a
   stack of identical boxes. */

/* The clock now sits level with the headline. A solid navy fill competed with the
   navy headline for the same optical weight, so the card carries a warm ground and an
   amber deadline rule instead: distinct hue family, urgency signalled by the accent,
   and the navy stays the headline's alone. */
.grri-rail-card--clock {
  background: var(--panel-warm);
  border-color: #EDE2CC;
  border-top: 4px solid var(--amber);
  border-radius: 3px 3px 6px 6px;
}
.grri-rail-card--clock h3 { color: #8A6420; border-bottom-color: #EDE2CC; }

.grri-rail-card--accent { border-left: 4px solid var(--green); }
.grri-rail-card--warm { background: #F7FAFC; border-color: var(--rule); border-left: 4px solid var(--slate); }

.grri-countdown { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dotted #E3D6BC; }
.grri-countdown:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.grri-countdown-days {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.5px;
}
.grri-countdown-days small {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--amber);
  margin-left: 8px;
  letter-spacing: 1.1px;
}
.grri-countdown-label { font-size: 13.5px; line-height: 1.5; color: #4A5568; margin-top: 7px; font-weight: 500; }
.grri-countdown-date {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #9C8459;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.grri-rail-card--clock .grri-rail-foot { color: #9C8459; }

.grri-intel-item { padding: 13px 0; border-bottom: 1px dotted var(--rule); }
.grri-intel-item:first-of-type { padding-top: 0; }
.grri-intel-item:last-child { border-bottom: 0; padding-bottom: 0; }
.grri-intel-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.grri-intel-scope {
  color: var(--green);
  border: 1px solid #CFE3D0;
  background: #F1F7F1;
  border-radius: 2px;
  padding: 1px 5px;
}
.grri-intel-lang {
  color: var(--slate);
  border: 1px solid var(--rule);
  background: var(--panel);
  border-radius: 2px;
  padding: 1px 5px;
}
.grri-intel-item a {
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.45;
  display: block;
}
.grri-intel-item a:hover { text-decoration: underline; }
.grri-intel-note { font-size: 13px; color: #5A6B80; line-height: 1.55; margin: 5px 0 0; }

.grri-rail-foot {
  font-size: 11px;
  color: var(--faint);
  line-height: 1.5;
  margin: 12px 0 0;
}

/* ------------------------------------------------------ related rail */

.grri-related { border-top: 3px solid var(--navy); padding-top: 26px; margin-top: 64px; }
.grri-related h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 18px;
  border: 0;
  padding: 0;
}

/* Scroll-snap instead of a JS carousel: keyboard-navigable, no dependency,
   and it degrades to a plain list if scripting is unavailable. */
.grri-related-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(248px, 85%), 1fr);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
  max-width: 100%;
}
.grri-related-card {
  scroll-snap-align: start;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 148px;
}
.grri-related-card .grri-related-cat {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
}
.grri-related-card h4 {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--navy);
  margin: 0;
  font-weight: 700;
}
.grri-related-card time { font-size: 11px; color: var(--faint); margin-top: auto; }
.grri-related-card[data-placeholder] { background: repeating-linear-gradient(135deg, #FCFCFD, #FCFCFD 9px, #F6F8FA 9px, #F6F8FA 18px); }
.grri-related-card[data-placeholder] h4 { color: var(--muted); }
.grri-related-card[data-placeholder] .grri-related-cat { color: var(--faint); }

/* ---------------------------------------------------- discovery archive */

.grri-discovery { padding: 48px 0 80px; }
.grri-discovery-header {
  max-width: none;
  width: 100%;
  margin: 0 0 36px;
  padding: 0;
}
.grri-discovery-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 12px;
}
.grri-discovery h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.7px;
  color: var(--navy);
  margin: 0 0 14px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.grri-discovery-intro {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.65;
  color: #526174;
  margin: 0;
  max-width: 100%;
}

.grri-intel-item--regional {
  border-left: 3px solid var(--green);
  padding-left: 10px;
  margin-left: -13px;
}
.grri-intel-item--international {
  opacity: 0.88;
}
.grri-archive-row--regional {
  box-shadow: inset 3px 0 0 var(--green);
}

.grri-country-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 0;
  width: 100%;
}
.grri-country-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
  min-height: 100%;
}
.grri-country-card:hover {
  border-color: var(--slate);
  background: var(--panel);
}
.grri-country-iso {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--green);
}
.grri-country-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.3px;
}
.grri-country-meta {
  font-size: 12.5px;
  color: var(--muted);
}

.grri-home-header { max-width: none; }
.grri-home-paths {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 48px;
  width: 100%;
}
.grri-path-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  background: #fff;
  box-sizing: border-box;
  min-height: 100%;
}
.grri-path-card:hover { border-color: var(--slate); background: var(--panel); }
.grri-path-card strong {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--navy);
  letter-spacing: -0.2px;
}
.grri-path-card span { font-size: 13px; color: var(--muted); line-height: 1.4; }

.grri-home-section { margin: 0 0 48px; width: 100%; }
.grri-home-section:last-child { margin-bottom: 0; }
.grri-home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rule);
  width: 100%;
}
.grri-home-section-head h2 {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.3px;
}
.grri-home-section-head a {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  white-space: nowrap;
}
.grri-home-section-head a:hover { text-decoration: underline; }

.grri-home-leads {
  display: grid;
  gap: 0;
  width: 100%;
}
.grri-home-lead {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.grri-home-lead:first-child { padding-top: 0; }
.grri-home-lead:last-child { border-bottom: 0; padding-bottom: 0; }
.grri-home-lead h3 {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.35;
  margin: 6px 0 8px;
  letter-spacing: -0.3px;
}
.grri-home-lead h3 a { color: var(--navy); text-decoration: none; }
.grri-home-lead h3 a:hover { text-decoration: underline; }
.grri-home-lead time { font-size: 12.5px; color: var(--muted); }

.grri-browse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.grri-browse-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  background: #fff;
  box-sizing: border-box;
  min-height: 100%;
}
.grri-browse-card:hover { border-color: var(--navy); background: var(--panel); }
.grri-browse-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.grri-browse-meta { font-size: 12px; color: var(--muted); }

.grri-home-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  width: 100%;
  padding: 2px 0 0;
}
.grri-home-chip-row a {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.grri-home-chip-row a:hover { border-bottom-color: var(--green); }

.grri-topic-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.grri-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 600;
  background: #fff;
}
.grri-topic-chip:hover { border-color: var(--navy); }
.grri-topic-chip .grri-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.grri-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 16px;
  margin: 0 0 40px;
  border-bottom: 1px solid var(--rule);
}
.grri-category-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--slate);
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 12px;
  text-decoration: none;
}
.grri-category-nav a:hover,
.grri-category-nav a[aria-current="page"] { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }
.grri-category-nav .grri-count {
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  font-size: 10px;
}
.grri-category-nav a[aria-current="page"] .grri-count { color: #B9CAE0; }
.grri-category-nav a[data-empty] { opacity: 0.52; }

.grri-archive-month { margin-bottom: 46px; }
.grri-archive-month h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 3px solid var(--navy);
}
.grri-archive-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 190px;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.grri-archive-date {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.grri-archive-category {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
}
.grri-archive-segment {
  display: inline-block;
  margin-left: 10px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.grri-archive-segment:hover { color: var(--navy); }
.grri-archive-row h3 {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.4;
  margin: 5px 0 7px;
  color: var(--navy);
}
.grri-archive-row h3 a { color: inherit; text-decoration: none; }
.grri-archive-row h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.grri-archive-dek { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.grri-archive-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.grri-archive-tags a {
  font-size: 10.5px;
  color: var(--muted);
  background: var(--panel);
  border-radius: 999px;
  padding: 4px 8px;
  text-decoration: none;
}
.grri-archive-tags a:hover { color: var(--green); }

.grri-empty-state {
  max-width: 560px;
  background: var(--panel);
  border-left: 4px solid var(--slate);
  padding: 24px 26px;
  margin: 30px 0;
}
.grri-empty-state h2 { font-family: var(--serif); font-size: 20px; color: var(--navy); margin: 0 0 8px; }
.grri-empty-state p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; }

/* -------------------------------------------------- newsletter dialog */

.grri-dialog {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0;
  max-width: 448px;
  width: calc(100% - 32px);
  box-shadow: 0 24px 60px rgba(16, 32, 56, 0.22);
}
.grri-dialog::backdrop { background: rgba(16, 32, 56, 0.48); }
.grri-dialog-inner { padding: 30px; }
.grri-dialog h2 {
  font-family: var(--serif);
  font-size: 23px;
  color: var(--navy);
  margin: 0 0 8px;
  border: 0;
  padding: 0;
}
.grri-dialog-sub { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0 0 22px; }

.grri-field { margin-bottom: 16px; }
.grri-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}
.grri-field input,
.grri-field select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  border: 1px solid #CBD5E0;
  border-radius: 4px;
  padding: 10px 12px;
  background: #FFFFFF;
}
.grri-field input:invalid:not(:placeholder-shown) { border-color: #C53030; }
.grri-field-hint { font-size: 11.5px; color: var(--faint); margin: 5px 0 0; line-height: 1.5; }

.grri-consent { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0; }
.grri-consent input { margin-top: 3px; flex-shrink: 0; }
.grri-consent label {
  font-size: 12.5px;
  line-height: 1.55;
  color: #4A5568;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.grri-dialog-actions { display: flex; gap: 10px; align-items: center; }
.grri-btn-primary {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 4px;
  padding: 11px 22px;
  cursor: pointer;
}
.grri-btn-primary:hover { background: #276b2a; }
.grri-btn-quiet {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 11px 8px;
  cursor: pointer;
}

.grri-prototype-note {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--amber);
  background: #FFFBF0;
  border: 1px solid #F2E3C4;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 20px;
}
.grri-dialog-success {
  font-size: 15px;
  line-height: 1.65;
  color: var(--navy);
  background: #F1F7F1;
  border-left: 3px solid var(--green);
  padding: 16px 18px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 20px;
}

/* -------------------------------------------------------------- footer */

.grri-footer {
  border-top: 1px solid var(--rule);
  background: #FFFFFF;
  padding: 30px 0 44px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.65;
}
.grri-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0 0 16px;
}
.grri-footer-nav a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.grri-footer-nav a:hover { text-decoration: underline; }
.grri-footer a { color: var(--muted); }
.grri-footer p { margin: 0 0 8px; max-width: 62em; }

/* --------------------------------------------------------- responsive */

/* Stack before the two-column math overflows the viewport.
   page-max (1048) + 2×page-inline (64) ≈ 1112px — break earlier than that. */
@media (max-width: 1160px) {
  .grri-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grri-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
    gap: 20px;
    margin-top: 52px;
    padding-top: 30px;
    border-top: 3px solid var(--navy);
  }
  .grri-rail-card { margin-bottom: 0; }
  .grri-browse-grid,
  .grri-country-grid,
  .grri-home-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { --page-inline: 16px; }
  .grri-shell { padding: 0 var(--page-inline); }
  .grri-masthead-inner {
    padding: 12px var(--page-inline);
    gap: 10px 12px;
  }
  .grri-home-paths,
  .grri-browse-grid,
  .grri-country-grid { grid-template-columns: 1fr; }
  .grri-wordmark { font-size: 13.5px; gap: 8px; }
  .grri-monogram { flex-basis: 32px; width: 32px; height: 32px; font-size: 10px; }
  /* Full institute name lives in the page eyebrow; monogram keeps the masthead compact. */
  .grri-wordmark-text { display: none; }
  .grri-controls {
    width: auto;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 8px;
  }
  .grri-lang { gap: 0; }
  .grri-lang a,
  .grri-lang span,
  .grri-lang button { padding: 4px 6px; font-size: 10px; }
  .grri-subscribe {
    font-size: 11px;
    padding: 5px 9px;
    white-space: nowrap;
  }
  .grri-layout { padding-top: 32px; }
  .grri-titleblock { margin-bottom: 30px; max-width: 100%; }
  .grri-headline { letter-spacing: -0.5px; overflow-wrap: anywhere; }
  .grri-article h2 { gap: 10px; }
  .section-number { font-size: 11px; }
  .grri-dek { font-size: 17.5px; }
  .grri-page { font-size: 17px; }
  .grri-article p,
  .grri-article .grri-lede {
    font-size: 17px;
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
  .grri-article h2 { font-size: 22px; margin-top: 44px; }
  .institutional-blockquote { font-size: 18.5px; padding-left: 18px; margin: 36px 0; }
  .grri-rail { grid-template-columns: 1fr; }
  /* No sideways carousel on phones — that was the wide horizontal pan. */
  .grri-related-track {
    display: flex;
    flex-direction: column;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 12px;
  }
  .grri-related-card { width: 100%; min-height: 0; }
  .grri-discovery { padding-top: 34px; }
  .grri-archive-row { grid-template-columns: 1fr; gap: 7px; padding: 20px 0; }
  .grri-archive-tags { justify-content: flex-start; margin-top: 5px; }
  .grri-dialog-inner { padding: 22px; }
  .data-matrix-table { min-width: 0; }
  .data-matrix-wrap { margin: 28px 0; }
  .segment-grid { grid-template-columns: 1fr; }
  .grri-category-nav {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .grri-breadcrumb { flex-wrap: wrap; }
  .grri-subscribe { max-width: 100%; }
}

/* Portrait phones / narrow tablets: keep browse single-column; no sideways pans. */
@media (orientation: portrait) and (max-width: 900px) {
  .grri-home-paths,
  .grri-browse-grid,
  .grri-country-grid { grid-template-columns: 1fr; }
  .grri-layout { grid-template-columns: minmax(0, 1fr); }
  .grri-related-track {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 12px;
  }
  .grri-related-card { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .grri-page * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .grri-masthead, .grri-rail, .grri-related, .grri-dialog, .grri-subscribe { display: none !important; }
  .grri-layout { display: block; }
  .grri-page { font-size: 11pt; }
}

/* ------------------------------------------- WordPress content parity */
/* Posts render inside .entry-content, which has no access to the page shell
   classes above. These keep a WordPress-served article visually identical. */

.entry-content { max-width: var(--measure); margin: 0 auto; font-family: var(--sans); font-size: 17.5px; line-height: 1.8; color: var(--ink); }
.entry-content h1, .entry-content h2, .entry-content h3 { font-family: var(--serif); color: var(--navy); font-weight: 700; }
.entry-content h2 { font-size: 25px; margin: 52px 0 18px; padding-top: 22px; border-top: 3px solid var(--navy); }

/* Compatibility aliases for structured article blocks */
.category-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--slate);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 3px;
  text-decoration: none;
  margin-bottom: 22px;
}

.article-headline {
  font-family: var(--serif);
  font-size: clamp(31px, 4.1vw, 45px);
  line-height: 1.18;
  letter-spacing: -0.9px;
  color: var(--navy);
  font-weight: 700;
  margin: 0 0 20px -2px;
  text-wrap: balance;
}

.article-metadata {
  display: flex;
  align-items: baseline;
  gap: 10px 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 35px;
  font-weight: 500;
}

p.editorial-text {
  font-size: 17.5px;
  line-height: 1.8;
  margin: 0 0 26px;
  color: var(--ink);
}

h2.section-header {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.3;
  color: var(--navy);
  font-weight: 700;
  margin: 52px 0 18px;
  padding-top: 22px;
  border-top: 3px solid var(--navy);
  letter-spacing: -0.3px;
}

.ecosystem-dashboard-box {
  background-color: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 30px;
  margin-top: 55px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.ecosystem-dashboard-box h3 {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--navy);
  margin-top: 0;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--panel);
  padding-bottom: 12px;
}

.dashboard-row { margin-bottom: 22px; }
.dashboard-row:last-child { margin-bottom: 0; }
.dashboard-tag {
  font-size: 11px;
  font-weight: 700;
  color: #2C5282;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: block;
  margin-bottom: 6px;
}
.dashboard-body { font-size: 15px; line-height: 1.6; color: #4A5568; }
.dashboard-body a { color: #2C5282; }