/* ============================================================
   Gram Culture — editorial theme
   Loaded LAST on every page (after css/style.css and any inline <style>), so
   it restyles the shared header, footer and cards without touching the markup
   that auth.js, site-pages.js and the page-visibility edge function rely on.

   Type:   Bodoni Moda (wordmark, display titles) · Newsreader (headlines,
           body) · Jost (labels, UI)
   Colour: warm paper grounds, near-black ink, one claret accent.
   ============================================================ */

/* ---------- the two palettes ----------
   The site ships both. `:root` is light — the palette the redesign was drawn
   in — and `:root[data-theme="dark"]` is the dark one. Nothing else in this
   file (or anywhere else on the site) names a colour twice: every surface
   reads a token, so a theme is these two blocks and nothing more.

   `data-theme` is always set, by the inline snippet in each page's <head>,
   before the first paint: it reads the reader's saved choice, resolves
   "system" against prefers-color-scheme, and writes the answer. CSS therefore
   never has to express "system" itself, which is what keeps the dark palette
   from having to be written out twice.

   Token names mean the same thing in both: `ink` is the colour of type,
   `paper` the colour of the page. `--gc-dark` / `--gc-darker` are the bands
   that are dark in BOTH themes (the footer, the podcast band) — in light they
   are near-black on paper, in dark they are barely lifted off the page so
   they still read as a band.

   Contrast, measured, both ways. Light: ink #1C1A18 on paper #FDFCFA = 15.9:1,
   text 11.7:1, muted 5.3:1, accent #8A2E3B 8.0:1. Dark: ink #F2EDE6 on paper
   #121110 = 15.6:1, text 12.0:1, muted 6.0:1, accent #C9566B 5.6:1. The accent
   differs between them because a claret chosen for paper is only 2.3:1 on
   black. */
:root {
  --gc-ink: #1C1A18;
  --gc-text: #33302D;
  --gc-muted: #6F6A64;
  --gc-soft: #5A5550;
  --gc-paper: #FDFCFA;
  --gc-band: #F4F1EC;
  --gc-rule: #E3DDD4;
  --gc-rule-strong: #C9C1B6;
  --gc-dark: #262320;
  --gc-darker: #1C1A18;
  --gc-accent: #8A2E3B;
  --gc-accent-dark: #6E2330;
  --gc-accent-tint: #E2B6B2;
  --gc-on-dark: #F6F1EA;
  --gc-on-dark-muted: #BDB4AB;

  /* Surfaces that are not simply paper or band. Kept as tokens because each
     one appeared as a literal in a dozen places before the themes existed. */
  --gc-panel: #FFFFFF;              /* a card lifted off the page */
  --gc-panel-strong: #F7F4EF;       /* the featured card in a row of cards */
  --gc-field: #FFFFFF;              /* an input's own ground */
  --gc-skeleton-a: #EFEBE4;         /* the loading shimmer's two stops */
  --gc-skeleton-b: #E7E1D8;
  --gc-overlay: rgba(253, 252, 250, .98);   /* full-screen menu and search */
  --gc-scrim: rgba(10, 10, 10, .55);        /* behind a modal */
  --gc-hover: rgba(0, 0, 0, .05);           /* a row or icon under the cursor */
  /* The four newsletter card tags: a hue each, on one shared ground. */
  --gc-tag-moves-bg: #F5E6E8;    --gc-tag-moves-fg: #8B5E62;
  --gc-tag-retail-bg: #E6F0F5;   --gc-tag-retail-fg: #3D6B7E;
  --gc-tag-innov-bg: #F0F5E6;    --gc-tag-innov-fg: #5E7A3D;
  --gc-tag-brands-bg: #F5F0E6;   --gc-tag-brands-fg: #7E6B3D;
  --gc-tag-podcast-bg: rgba(212, 168, 67, .14);
  --gc-tag-podcast-fg: #8A6B1F;

  --gc-display: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --gc-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --gc-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --gc-width: 1280px;
  --gc-gutter: 32px;
}
:root, :root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --gc-ink: #F2EDE6;
  --gc-text: #D8D2CA;
  --gc-muted: #9A938B;
  --gc-soft: #B3ACA4;
  --gc-paper: #121110;
  --gc-band: #1B1917;
  --gc-rule: #322E2A;
  --gc-rule-strong: #4A443E;
  --gc-dark: #201D1B;
  --gc-darker: #161413;
  --gc-accent: #C9566B;
  --gc-accent-dark: #A83E52;
  --gc-accent-tint: #E2B6B2;

  --gc-panel: #1B1917;
  --gc-panel-strong: #221F1C;
  --gc-field: #121110;
  --gc-skeleton-a: #1E1B19;
  --gc-skeleton-b: #282420;
  --gc-overlay: rgba(18, 17, 16, .98);
  --gc-scrim: rgba(0, 0, 0, .72);
  --gc-hover: rgba(255, 255, 255, .07);
  --gc-tag-moves-bg: #2A1B1E;    --gc-tag-moves-fg: #E79AA7;
  --gc-tag-retail-bg: #17242A;   --gc-tag-retail-fg: #8FBEDB;
  --gc-tag-innov-bg: #1D2418;    --gc-tag-innov-fg: #A8C98B;
  --gc-tag-brands-bg: #2A2419;   --gc-tag-brands-fg: #D8B98A;
  --gc-tag-podcast-bg: rgba(212, 168, 67, .18);
  --gc-tag-podcast-fg: #E0BC6B;
}

html { background: var(--gc-paper); }
body {
  background: var(--gc-paper);
  color: var(--gc-text);
  font-family: var(--gc-sans);
}
a:hover { color: var(--gc-accent); }

/* ---------- shared building blocks ---------- */
.gc-wrap { max-width: calc(var(--gc-width) + var(--gc-gutter) * 2); margin: 0 auto; padding: 0 var(--gc-gutter); }
.gc-kicker { font-family: var(--gc-sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gc-accent); margin: 0; }
.gc-kicker a { color: inherit; }
.gc-hed { font-family: var(--gc-serif); font-weight: 400; color: var(--gc-ink); margin: 0; letter-spacing: -.005em; text-wrap: balance; }
.gc-hed a { color: inherit; }
.gc-hed a:hover { color: var(--gc-accent); }
.gc-byline { font-family: var(--gc-sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gc-muted); margin: 0; }
.ai-disclosure{display:inline-block;margin-left:.5em;padding:0 .45em;border:1px solid currentColor;border-radius:999px;font-size:.75em;line-height:1.6;opacity:.7;vertical-align:middle}
.gc-dek { font-family: var(--gc-serif); font-style: italic; color: var(--gc-soft); margin: 0; text-wrap: pretty; }
.gc-display { font-family: var(--gc-display); font-weight: 400; color: var(--gc-ink); margin: 0; line-height: 1; }
.gc-link-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--gc-sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gc-ink); white-space: nowrap; }
.gc-link-arrow svg { width: 14px; height: 14px; }
.gc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--gc-sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 16px 26px; border: 1px solid var(--gc-ink); background: var(--gc-ink); color: var(--gc-paper); cursor: pointer; transition: background .2s, color .2s, border-color .2s; min-height: 44px; }
.gc-btn:hover { background: var(--gc-accent); border-color: var(--gc-accent); color: #fff; }
.gc-btn-ghost { background: transparent; color: var(--gc-ink); }
.gc-btn-ghost:hover { background: var(--gc-ink); border-color: var(--gc-ink); color: var(--gc-paper); }
.gc-btn-accent { background: var(--gc-accent); border-color: var(--gc-accent); color: #fff; }
.gc-btn-accent:hover { background: var(--gc-accent-dark); border-color: var(--gc-accent-dark); }
.gc-btn-light { background: #F4EDE4; border-color: #F4EDE4; color: #1C1A18; }
.gc-btn-light:hover { background: #fff; border-color: #fff; color: #1C1A18; }

.gc-img { display: block; width: 100%; object-fit: cover; background: var(--gc-band); transition: transform .6s ease; }
.gc-img-link { display: block; overflow: hidden; background: var(--gc-band); }
.gc-img-link:hover .gc-img { transform: scale(1.02); }

/* Card: image → kicker → centred serif headline → byline */
.gc-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; min-width: 0; }
.gc-card .gc-img-link { width: 100%; margin-bottom: 6px; position: relative; }
.gc-card .gc-img { aspect-ratio: 4 / 3; }
.gc-card .gc-hed { font-size: 20px; line-height: 1.3; }
.gc-card-meta { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gc-members { position: absolute; z-index: 1; top: 14px; left: 14px; background: var(--gc-ink); color: var(--gc-paper); font-family: var(--gc-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 6px 9px; }

/* Thumbnail row: small square image + kicker/headline/byline */
.gc-thumb-item { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.gc-thumb-item .gc-img-link { flex: 0 0 116px; width: 116px; height: 116px; }
.gc-thumb-item .gc-img { width: 100%; height: 100%; }
.gc-thumb-item .gc-thumb-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gc-thumb-item .gc-hed { font-size: 18px; line-height: 1.32; }

/* Side list item: text left, image right, ruled */
.gc-side-item { display: flex; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--gc-rule); }
.gc-side-item:first-child { padding-top: 0; }
.gc-side-item:last-child { border-bottom: 0; padding-bottom: 0; }
.gc-side-item .gc-side-text { flex: 1 1 0; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.gc-side-item .gc-hed { font-size: 21px; line-height: 1.28; }
.gc-side-item .gc-img-link { flex: 0 0 124px; width: 124px; height: 93px; }
.gc-side-item .gc-img { width: 100%; height: 100%; }

/* Section heads */
.gc-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--gc-ink); margin-bottom: 36px; }
.gc-section-head > div { display: flex; flex-direction: column; gap: 10px; }
.gc-section-head .gc-display { font-size: 46px; }
.gc-centered-head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 48px; }
.gc-centered-head .gc-display { font-size: 36px; }
.gc-centered-head::after { content: ""; display: block; width: 48px; height: 1px; background: var(--gc-accent); }
.gc-rule-title { display: flex; align-items: center; gap: 44px; }
.gc-rule-title::before, .gc-rule-title::after { content: ""; flex: 1 1 0; height: 1px; background: var(--gc-ink); }
.gc-rule-title .gc-display { font-size: 88px; letter-spacing: .18em; padding-left: .18em; text-transform: uppercase; text-align: center; }
.gc-rule-title.gc-rule-title-sm { gap: 32px; }
.gc-rule-title.gc-rule-title-sm .gc-display { font-size: 36px; letter-spacing: 0; padding-left: 0; text-transform: none; }

.gc-band { background: var(--gc-band); }

/* Advertisement slots */
.gc-ad-label { display: block; text-align: center; font-family: var(--gc-sans); font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gc-muted); margin: 0 0 8px; }

/* Skeletons in the new palette */
.skeleton-loader { background: linear-gradient(90deg, var(--gc-skeleton-a) 25%, var(--gc-skeleton-b) 50%, var(--gc-skeleton-a) 75%) !important; background-size: 200% 100% !important; border-radius: 0 !important; }

/* ---------- top banner ---------- */
.ad-top { background: var(--gc-paper); border-bottom: 0; padding: 18px 0 16px; }

/* ---------- header ---------- */
.header { background: var(--gc-paper); padding: 0; border-bottom: 1px solid var(--gc-ink); }
.header.scrolled { box-shadow: 0 1px 10px rgba(28, 26, 24, .06); }
.header-row1 { max-width: calc(var(--gc-width) + var(--gc-gutter) * 2); padding: 0 var(--gc-gutter); height: 84px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.header-row1 > .header-right { order: 1; justify-self: start; }
.header-row1 > .header-logo { order: 2; }
.header-row1 > .header-left { order: 3; justify-self: end; }
.header-logo-text { font-family: var(--gc-display); font-size: 44px; font-weight: 500; color: var(--gc-ink); letter-spacing: -.01em; line-height: 1; }
.header-logo-text:hover { color: var(--gc-ink); }

.header-right { gap: 22px; font-family: var(--gc-sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; }
.header-right > span, .header-right [data-bs-plus-sep] { display: none; }
.header-right a { color: var(--gc-ink); }
.header-right a:first-child { color: var(--gc-ink); }
.header-right a:last-child { color: var(--gc-ink); }
.header-right a[href="/newsletter"] { background: var(--gc-ink); color: var(--gc-paper) !important; padding: 12px 18px; }
.header-right a[href="/newsletter"]:hover { background: var(--gc-accent); }
.header-right a[href="/gramculture-plus"]:not(#bsLoginFallback), .header-right .bs-auth-plus-link { color: var(--gc-accent) !important; }
.header-right a:hover { color: var(--gc-accent); }

.header-left { gap: 22px; }
.header-left button { color: var(--gc-ink); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; font-family: var(--gc-sans); }
.header-left #searchBtn { order: 1; }
.header-left #menuBtn { order: 2; }
.header-left svg { width: 20px; height: 20px; }
.gc-menu-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }

.header-row2 { border-top: 1px solid var(--gc-rule); border-bottom: 0; max-height: 52px; }
.header-nav { max-width: calc(var(--gc-width) + var(--gc-gutter) * 2); padding: 0 var(--gc-gutter); height: 50px; gap: 44px; }
.header-nav a { font-family: var(--gc-sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; color: var(--gc-ink); padding: 0; height: 50px; display: inline-flex; align-items: center; }
.header-nav a:hover { color: var(--gc-accent); }
.header-nav .dot { display: none; }
body[data-bs-page="trends"] .header-nav a[href="/trends"],
body[data-bs-page="brand-spotlights"] .header-nav a[href="/brand-spotlights"],
body[data-bs-page="tech"] .header-nav a[href="/tech"],
body[data-bs-page="distribution"] .header-nav a[href="/distribution"],
body[data-bs-page="marketing"] .header-nav a[href="/marketing"],
body[data-bs-page="investment"] .header-nav a[href="/investment"],
body[data-bs-page="podcast"] .header-nav a[href="/podcast"] { color: var(--gc-accent); box-shadow: inset 0 -2px 0 var(--gc-accent); }

/* auth chip (injected by auth.js) */
.bs-auth-chip { font-family: var(--gc-sans) !important; }
.bs-auth-avatar { background: var(--gc-ink) !important; }

/* ---------- mobile menu + search overlay ---------- */
.mobile-menu { background: var(--gc-overlay); }
.mobile-menu-nav a { font-family: var(--gc-serif); font-weight: 400; color: var(--gc-ink); border-bottom-color: var(--gc-rule); }
.mobile-menu-nav a:hover { color: var(--gc-accent); }
.mobile-menu-close, .search-close { color: var(--gc-ink); }
.search-overlay { background: var(--gc-overlay); }
.search-box input { font-family: var(--gc-serif); font-weight: 400; border-bottom-color: var(--gc-ink); color: var(--gc-ink); }
.search-results a { font-family: var(--gc-serif); color: var(--gc-ink); border-bottom-color: var(--gc-rule); }
.search-results .sr-cat { font-family: var(--gc-sans); color: var(--gc-accent); letter-spacing: .16em; }

/* ---------- footer ---------- */
.new-footer {
  background: var(--gc-darker); color: var(--gc-on-dark); margin-top: 96px; max-width: none;
  padding: 80px max(var(--gc-gutter), calc((100% - var(--gc-width)) / 2)) 40px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); column-gap: 64px; align-items: start;
}
.new-footer > .footer-top, .new-footer > .footer-header { grid-column: 1; margin: 0; padding: 0; border: 0; display: block; max-width: none; }
.new-footer .footer-promo { display: none; }
.new-footer .footer-header h2 { font-family: var(--gc-display); font-size: 40px; font-weight: 500; color: var(--gc-on-dark); line-height: 1; margin: 0 0 14px; }
.new-footer .footer-header p { display: block; font-family: var(--gc-serif); font-size: 17px; line-height: 1.5; color: var(--gc-on-dark-muted); max-width: 340px; }
.new-footer > .footer-content { grid-column: 2; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.new-footer .footer-column h4 { font-family: var(--gc-sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--gc-on-dark); border: 0; padding: 0; margin: 0 0 18px; }
.new-footer .footer-column h4 ~ h4 { margin-top: 32px; }
.new-footer .footer-column li { margin: 0 0 12px; }
.new-footer .footer-column a { font-family: var(--gc-sans); font-size: 14px; color: var(--gc-on-dark-muted); }
.new-footer .footer-column a:hover { color: #fff; }
.new-footer .social-icons { gap: 10px; }
.new-footer .social-icons a { border-radius: 0; border-color: #4A443F; color: var(--gc-on-dark-muted); font-family: var(--gc-sans); width: 36px; height: 36px; font-size: 12px; }
.new-footer .social-icons a:hover { border-color: var(--gc-on-dark); color: #fff; }
/* The marks had no size of their own here, so each one filled its 36px circle
   edge to edge and read as a blob. (The contact page had this rule; the
   footer never did — it only ever held the "@" character.) */
.new-footer .social-icons svg { width: 16px; height: 16px; display: block; }
.new-footer .social-icons { flex-wrap: wrap; gap: 8px; }
.new-footer > .footer-bottom { grid-column: 1 / -1; max-width: none; margin: 64px 0 0; padding-top: 24px; border-top: 1px solid #3A3633; text-align: left; }
.new-footer .footer-bottom p { font-family: var(--gc-sans); font-size: 13px; color: #8F877F; }
.new-footer .footer-bottom a { color: #8F877F; }
.new-footer .footer-bottom a:hover { color: #fff; }

/* ---------- generic content on older pages ---------- */
.section-header h2, .cat-featured-text h2, .bof-feed-item h3, .story-card h3, .excl-card h4 { font-family: var(--gc-serif); font-weight: 400; color: var(--gc-ink); }
.section-header::before { background: var(--gc-accent); }
.nl-inline-btn, .load-more-btn { font-family: var(--gc-sans); background: var(--gc-ink); }
.nl-inline-btn:hover, .load-more-btn:hover { background: var(--gc-accent); }
.bs-plus-badge { font-family: var(--gc-sans); }

/* ============================================================
   HOMEPAGE
   ============================================================ */
.gc-river { padding: 48px 0 76px; }
.gc-river-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 260px; column-gap: 40px; }
.gc-river-col { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.gc-river-main { border-left: 1px solid var(--gc-rule); border-right: 1px solid var(--gc-rule); padding: 0 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; min-width: 0; }
.gc-river-main .gc-img-link { width: 100%; margin-bottom: 8px; }
.gc-river-main .gc-img { aspect-ratio: 4 / 3.15; }
.gc-river-main .gc-hed { font-size: 44px; line-height: 1.1; }
.gc-river-main .gc-dek { font-size: 19px; line-height: 1.5; max-width: 560px; }

.gc-exclusives { padding: 8px 0 88px; }
.gc-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; }
.gc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 56px; }

.gc-home-ad { padding: 0 0 72px; }
.gc-home-ad .ad-nbdp, .gc-home-ad .ad-melyon { max-width: calc(var(--gc-width) + var(--gc-gutter) * 2); padding: 0 var(--gc-gutter); }

.gc-latest { padding: 64px 0 76px; margin-bottom: 72px; }
.gc-latest .gc-grid-3 { column-gap: 48px; row-gap: 44px; }
.gc-latest .bs-rail-wrap { margin: 0; }

.gc-indepth { padding: 24px 0 96px; }
.gc-indepth .gc-view-all { display: flex; justify-content: center; margin: 16px 0 56px; }
.gc-indepth .gc-view-all a { font-family: var(--gc-sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gc-accent); }
.gc-indepth-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; }
.gc-lead { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.gc-lead .gc-img-link { margin-bottom: 8px; }
.gc-lead .gc-img { aspect-ratio: 3 / 2; }
.gc-lead-text { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0 28px; }
.gc-lead .gc-hed { font-size: 40px; line-height: 1.12; }
.gc-lead .gc-dek { font-size: 19px; line-height: 1.5; }

.gc-reports { background: var(--gc-dark); padding: 100px 0; overflow: hidden; }
.gc-reports-grid { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 96px; align-items: center; }
.gc-covers { position: relative; height: 530px; display: block; }
.gc-cover-back { position: absolute; left: 130px; top: 0; width: 330px; height: 440px; background: #3A3431; transform: rotate(4deg); box-shadow: 0 24px 50px rgba(0,0,0,.35); padding: 22px 28px; display: flex; justify-content: flex-end; }
.gc-cover-front .gc-kicker, .gc-cover-front .gc-byline { color: #8A2E3B; }
.gc-cover-front { position: absolute; left: 20px; top: 48px; width: 350px; height: 466px; background: #F4EDE4; box-shadow: 0 34px 70px rgba(0,0,0,.5); display: flex; flex-direction: column; border-top: 10px solid var(--gc-accent); }
.gc-cover-front-inner { color: #4A443E; flex: 1 1 0; padding: 34px 32px; display: flex; flex-direction: column; justify-content: space-between; }
.gc-cover-title { font-family: var(--gc-display); font-size: 40px; line-height: 1.02; color: #1C1A18; margin: 0; }
.gc-cover-year { font-family: var(--gc-display); font-size: 96px; line-height: .9; font-style: italic; color: #8A2E3B; margin: 0; }
.gc-reports-text { display: flex; flex-direction: column; gap: 26px; }
.gc-reports-text .gc-hed { font-size: 54px; line-height: 1.06; color: var(--gc-on-dark); }
.gc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #4A443F; border-bottom: 1px solid #4A443F; margin-top: 6px; }
.gc-stat { padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.gc-stat:first-child { padding-left: 0; }
.gc-stat + .gc-stat { border-left: 1px solid #4A443F; }
.gc-stat-num { font-family: var(--gc-display); font-size: 64px; line-height: 1; color: var(--gc-on-dark); }
.gc-stat-label { font-family: var(--gc-sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gc-on-dark-muted); }
.gc-reports-copy { font-family: var(--gc-serif); font-size: 20px; line-height: 1.5; color: #D6CEC5; margin: 0; }
.gc-reports-actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.gc-reports .gc-link-arrow { color: var(--gc-accent-tint); }
.gc-reports .gc-link-arrow:hover { color: #fff; }

.gc-duo { padding: 88px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
/* The band held the podcast and the membership card side by side. With the
   podcast off the site it is one card, which should not sit in half a grid. */
.gc-duo-single { grid-template-columns: minmax(0, 1fr); }
.gc-podcast { background: var(--gc-band); padding: 44px; display: flex; gap: 36px; align-items: center; }
.gc-podcast-art { flex: 0 0 200px; width: 200px; height: 200px; display: flex; align-items: flex-end; padding: 18px; background: radial-gradient(90% 80% at 70% 25%, #8E4A4F 0%, rgba(142,74,79,0) 70%), linear-gradient(175deg, #5C3034 0%, #2E2224 100%); }
.gc-podcast-art span { font-family: var(--gc-display); font-size: 30px; font-style: italic; color: #F4EDE4; line-height: 1; }
.gc-podcast-text { display: flex; flex-direction: column; gap: 14px; }
.gc-podcast-text .gc-display { font-size: 44px; }
.gc-podcast-text p:not(.gc-kicker) { margin: 0; font-family: var(--gc-serif); font-size: 18px; line-height: 1.5; color: var(--gc-soft); }
.gc-podcast-links { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.gc-podcast-links a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--gc-ink); color: var(--gc-ink); font-family: var(--gc-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 11px 16px; min-height: 44px; }
.gc-podcast-links a:hover { background: var(--gc-ink); color: var(--gc-paper); }
.gc-podcast-links svg { width: 12px; height: 12px; }
.gc-plus { background: var(--gc-darker); padding: 44px; display: flex; flex-direction: column; gap: 18px; }
.gc-plus .gc-display { font-size: 44px; color: var(--gc-on-dark); }
.gc-plus .gc-display span { color: var(--gc-accent-tint); font-weight: 500; }
.gc-plus p:not(.gc-kicker) { margin: 0; font-family: var(--gc-serif); font-size: 19px; line-height: 1.5; color: #D6CEC5; max-width: 460px; }
.gc-plus-points { display: flex; gap: 24px; flex-wrap: wrap; }
.gc-plus-points span { font-family: var(--gc-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-on-dark-muted); }

.gc-newsletter { padding: 56px 0; border-top: 1px solid var(--gc-ink); border-bottom: 1px solid var(--gc-ink); display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.gc-newsletter-text { display: flex; flex-direction: column; gap: 12px; }
.gc-newsletter-text .gc-hed { font-size: 38px; line-height: 1.1; }
.gc-newsletter-text p:not(.gc-kicker) { margin: 0; font-family: var(--gc-serif); font-size: 18px; line-height: 1.5; color: var(--gc-soft); }
.gc-nl-form { display: flex; flex: 0 0 auto; flex-wrap: wrap; position: relative; }
.gc-nl-form input { width: 380px; height: 54px; border: 1px solid var(--gc-ink); border-right: 0; padding: 0 18px; font-family: var(--gc-sans); font-size: 15px; color: var(--gc-ink); background: var(--gc-paper); border-radius: 0; outline: none; }
.gc-nl-form input:focus { border-color: var(--gc-accent); }
.gc-nl-form button { height: 54px; padding: 0 30px; border-radius: 0; }
.gc-nl-status { flex-basis: 100%; font-family: var(--gc-sans); font-size: 13px; margin-top: 8px; min-height: 18px; color: var(--gc-muted); }
.gc-nl-status.err { color: var(--gc-accent); }

/* ============================================================
   CATEGORY HUB
   ============================================================ */
/* Pillar masthead (#13): the section's name on the left, what it covers on the
   right, one rule under both. The old head centred a title over a keyword list,
   which read like a tag page; this reads like a section front. */
.gc-cat-head { padding-top: 72px; padding-bottom: 48px; }
.gc-cat-head-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; padding-bottom: 22px; border-bottom: 1px solid var(--gc-rule-strong); }
.gc-cat-head-title { display: flex; flex-direction: column; gap: 12px; }
.gc-cat-head .gc-display { font-size: 84px; line-height: .95; }
.gc-cat-head .gc-dek { font-size: 21px; line-height: 1.45; max-width: 46ch; }
/* Kept for any page still on the old markup. */
.gc-cat-head .gc-rule-title { width: 100%; }
.gc-cat-lead { padding: 0 0 88px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
.gc-cat-lead .gc-lead .gc-hed { font-size: 44px; line-height: 1.1; }
.gc-cat-lead .gc-lead-text { padding: 0 40px; }
.gc-cat-side { display: flex; flex-direction: column; gap: 40px; border-left: 1px solid var(--gc-rule); padding-left: 48px; }
.gc-cat-side .gc-hed, .gc-cat-grid .gc-hed { font-size: 22px; line-height: 1.28; }
.gc-cat-grid-wrap { padding-bottom: 96px; }
.gc-cat-grid { border-top: 1px solid var(--gc-ink); padding-top: 48px; }
.gc-mostread { padding: 72px 0 80px; }
.gc-mostread-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 72px; }
.gc-mostread-head { display: flex; flex-direction: column; gap: 14px; }
.gc-mostread-head .gc-display { font-size: 56px; }
.gc-mostread-head::after { content: ""; display: block; width: 48px; height: 1px; background: var(--gc-accent); margin-top: 10px; }
.gc-mostread-list { margin: 0; padding: 0; list-style: none; }
.gc-mostread-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--gc-rule); }
.gc-mostread-list li:first-child { padding-top: 0; }
.gc-mostread-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.gc-mostread-num { font-family: var(--gc-display); font-size: 40px; line-height: 1; color: var(--gc-accent); }
.gc-mostread-list .gc-hed { font-size: 24px; line-height: 1.3; }
/* Homepage variant: the same list with an ad rail beside it. The rail is a
   column of its own rather than a floated box so the list never reflows around
   a skeleton that may stay empty. */
.gc-mostread-home-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 56px; }
.gc-mostread-home .gc-mostread-head .gc-display { font-size: 48px; }
.gc-mostread-ad { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1100px) {
  .gc-mostread-home-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  /* The rail moves under the list rather than squeezing it to a column that
     cannot hold a 24px headline. */
  .gc-mostread-ad { grid-column: 1 / -1; max-width: 300px; }
}
@media (max-width: 768px) {
  .gc-mostread-home-grid { grid-template-columns: 1fr; gap: 28px; }
  .gc-mostread-home .gc-mostread-head .gc-display { font-size: 40px; }
}
.gc-load-more { display: flex; justify-content: center; padding: 72px 0 88px; }
.gc-empty { font-family: var(--gc-serif); font-size: 20px; color: var(--gc-muted); text-align: center; padding: 40px 0 96px; margin: 0; }

/* ============================================================
   ARTICLE
   ============================================================ */
.reading-progress { background: var(--gc-accent) !important; }
.gc-article-head { max-width: calc(var(--gc-width) + var(--gc-gutter) * 2); margin: 0 auto; padding: 64px var(--gc-gutter) 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.gc-article-head .gc-hed { font-size: 56px; line-height: 1.08; max-width: 1040px; }
.gc-article-head .gc-dek { font-size: 22px; line-height: 1.5; max-width: 780px; }
.gc-article-byline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.gc-article-byline .gc-byline:first-child { color: var(--gc-ink); }
.gc-article-byline .gc-sep { width: 1px; height: 12px; background: var(--gc-rule-strong); }
.gc-article-hero { max-width: calc(var(--gc-width) + var(--gc-gutter) * 2); margin: 0 auto; padding: 0 var(--gc-gutter); }
.gc-article-hero img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--gc-band); }

.article-layout.article-layout-with-sidebar {
  max-width: calc(var(--gc-width) + var(--gc-gutter) * 2); margin: 0 auto; padding: 64px var(--gc-gutter) 104px;
  display: grid; grid-template-columns: 180px minmax(0, 680px) 340px; column-gap: 40px; justify-content: space-between; align-items: start;
}
.gc-share-rail { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.gc-share-rail .gc-share-links { display: flex; gap: 10px; flex-wrap: wrap; }
.gc-share-rail a { width: 40px; height: 40px; border: 1px solid var(--gc-rule); display: flex; align-items: center; justify-content: center; color: var(--gc-ink); }
.gc-share-rail a:hover { border-color: var(--gc-ink); color: var(--gc-ink); }
.gc-share-rail svg { width: 16px; height: 16px; }
.article-layout .article-content { max-width: none; padding: 0; min-width: 0; }
.article-body, .article-body p { font-family: var(--gc-serif); font-size: 20px; line-height: 1.7; color: var(--gc-text); }
.article-body p { margin: 0 0 26px; text-wrap: pretty; }
.article-body h2, .article-body h3 { font-family: var(--gc-serif); font-weight: 400; color: var(--gc-ink); line-height: 1.2; }
.article-body h2 { font-size: 32px; margin: 44px 0 20px; }
.article-body h3 { font-size: 24px; margin: 36px 0 16px; }
.article-body a { color: var(--gc-accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { font-family: var(--gc-serif); font-size: 20px; line-height: 1.7; }
.article-lead.has-dropcap::first-letter, .article-body .has-dropcap::first-letter, .article-body p.dropcap::first-letter {
  font-family: var(--gc-display) !important; color: var(--gc-accent) !important; font-weight: 400 !important;
}
.article-pullquote-inline { margin: 40px 0 !important; padding: 36px 0 !important; border: 0 !important; border-top: 1px solid var(--gc-ink) !important; border-bottom: 1px solid var(--gc-ink) !important; background: none !important; text-align: center; }
.article-pullquote-inline::before { display: none !important; }
.article-pullquote-inline p { font-family: var(--gc-display) !important; font-size: 34px !important; line-height: 1.25 !important; font-style: italic !important; color: var(--gc-ink) !important; margin: 0 !important; text-wrap: balance; }
.article-pullquote-cite { display: block; margin-top: 16px; font-family: var(--gc-sans) !important; font-style: normal !important; font-size: 11px !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-muted) !important; }
.article-takeaways { background: var(--gc-band) !important; border: 0 !important; border-top: 3px solid var(--gc-ink) !important; border-radius: 0 !important; padding: 28px 32px !important; margin: 0 0 40px !important; }
.article-takeaways-label { font-family: var(--gc-sans) !important; color: var(--gc-accent) !important; letter-spacing: .18em !important; }
.article-takeaways li { font-family: var(--gc-serif) !important; font-size: 18px !important; color: var(--gc-text) !important; }
.article-b-mid-img figcaption, .article-img-caption { font-family: var(--gc-sans); font-size: 13px; color: var(--gc-muted); }
.article-mid-ad-label { font-family: var(--gc-sans); letter-spacing: .22em; color: var(--gc-muted); }
.article-sources { border-top: 1px solid var(--gc-rule); padding-top: 22px; }
.article-sources-note { font-family: var(--gc-sans); font-size: 14px; color: var(--gc-muted); }
.article-share-footer { border-top: 1px solid var(--gc-rule); }
.article-share-footer span { font-family: var(--gc-sans); letter-spacing: .16em; }
.article-social a { border-radius: 0 !important; border-color: var(--gc-rule) !important; color: var(--gc-ink) !important; }
.article-author-bio h4 { font-family: var(--gc-serif); font-weight: 400; color: var(--gc-ink); }
.article-author-bio p { font-family: var(--gc-sans); color: var(--gc-muted); }

.article-sidebar { position: sticky; top: 150px; width: auto; max-width: none; padding: 0; border: 0; }
.article-sidebar-inner { display: flex; flex-direction: column; gap: 32px; }
.article-side-newsletter { background: var(--gc-band) !important; border: 0 !important; border-top: 3px solid var(--gc-ink) !important; border-radius: 0 !important; padding: 28px !important; }
.article-side-newsletter-kicker { font-family: var(--gc-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .18em !important; color: var(--gc-accent) !important; }
.article-side-newsletter h4 { font-family: var(--gc-serif) !important; font-size: 24px !important; font-weight: 400 !important; line-height: 1.2 !important; color: var(--gc-ink) !important; }
.article-side-newsletter p { font-family: var(--gc-serif) !important; font-size: 16px !important; color: var(--gc-soft) !important; }
.article-side-newsletter-form input { border-radius: 0 !important; border: 1px solid var(--gc-rule-strong) !important; background: var(--gc-paper) !important; font-family: var(--gc-sans) !important; height: 48px; }
.article-side-newsletter-form button { border-radius: 0 !important; background: var(--gc-ink) !important; color: var(--gc-paper) !important; font-family: var(--gc-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .18em !important; text-transform: uppercase; height: 48px; }
.article-side-newsletter-form button:hover { background: var(--gc-accent) !important; }
.article-side-promo, .article-side-promo img { border-radius: 0 !important; }
.article-side-ad, .article-side-ad-inner { border-radius: 0 !important; }
.article-side-ad-label { font-family: var(--gc-sans) !important; letter-spacing: .22em !important; color: var(--gc-muted) !important; }
.article-side-related-kicker { font-family: var(--gc-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .18em !important; color: var(--gc-ink) !important; padding-bottom: 12px; border-bottom: 1px solid var(--gc-ink); }
.article-side-related-card { border-radius: 0 !important; border-bottom: 1px solid var(--gc-rule) !important; }
.article-side-related-card img { border-radius: 0 !important; }
.article-side-related-card h5 { font-family: var(--gc-serif) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.3 !important; color: var(--gc-ink) !important; }
.article-side-related-cat { font-family: var(--gc-sans) !important; color: var(--gc-accent) !important; letter-spacing: .16em !important; }
.article-side-related-link { font-family: var(--gc-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .18em !important; text-transform: uppercase; color: var(--gc-accent) !important; }

.gc-more { padding: 72px 0 84px; }
.gc-more .gc-rule-title { margin-bottom: 44px; }

.article-paywall-card { border-radius: 0 !important; font-family: var(--gc-sans); }
.article-paywall-card h2 { font-family: var(--gc-serif) !important; font-weight: 400 !important; }
.article-paywall-kicker { color: var(--gc-accent) !important; letter-spacing: .18em !important; }
.article-paywall-btn { border-radius: 0 !important; background: var(--gc-ink) !important; }
.article-paywall-btn:hover { background: var(--gc-accent) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1240px) {
  .gc-river-grid { grid-template-columns: 220px minmax(0, 1fr) 220px; column-gap: 28px; }
  .gc-river-main { padding: 0 28px; }
  .gc-river-main .gc-hed { font-size: 38px; }
  .gc-rule-title .gc-display { font-size: 68px; }
  .gc-reports-grid { grid-template-columns: 400px minmax(0, 1fr); gap: 56px; }
  .gc-covers { transform: scale(.85); transform-origin: left center; }
  .article-layout.article-layout-with-sidebar { grid-template-columns: 56px minmax(0, 1fr) 300px; }
  .gc-share-rail .gc-byline { display: none; }
  .gc-share-rail .gc-share-links { flex-direction: column; }
}
@media (max-width: 1024px) {
  .header-row1 { height: 72px; }
  .header-logo-text { font-size: 36px; }
  .header-nav { gap: 28px; }
  .gc-river-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
  .gc-river-main { grid-column: 1 / -1; order: -1; border: 0; padding: 0; }
  .gc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-indepth-grid, .gc-cat-lead { grid-template-columns: 1fr; }
  .gc-cat-head-grid { gap: 32px; }
  .gc-cat-head .gc-display { font-size: 60px; }
  .gc-cat-side { border-left: 0; padding-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .gc-reports-grid { grid-template-columns: 1fr; }
  .gc-covers { height: 520px; transform: none; max-width: 480px; margin: 0 auto; width: 100%; }
  .gc-duo { grid-template-columns: 1fr; }
  .gc-newsletter { flex-direction: column; align-items: stretch; gap: 24px; }
  .gc-nl-form input { width: auto; flex: 1 1 0; }
  .gc-mostread-grid { grid-template-columns: 1fr; gap: 32px; }
  .new-footer { grid-template-columns: 1fr; row-gap: 40px; }
  .new-footer > .footer-content { grid-column: 1; }
  .article-layout.article-layout-with-sidebar { grid-template-columns: minmax(0, 1fr); }
  .gc-share-rail { position: static; flex-direction: row; align-items: center; }
  .gc-share-rail .gc-byline { display: block; }
  .gc-share-rail .gc-share-links { flex-direction: row; }
  .article-sidebar { position: static; }
  .gc-article-head .gc-hed { font-size: 44px; }
}
@media (max-width: 768px) {
  :root { --gc-gutter: 20px; }
  .ad-top { padding: 12px 0; }
  .header-row1 { height: 60px; padding: 0 8px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; }
  .header-row1 > .header-left { order: 1; justify-self: start; gap: 0; }
  .header-row1 > .header-logo { order: 2; justify-self: center; }
  .header-row1 > .header-right { order: 3; justify-self: end; }
  .header-left button { width: 44px; justify-content: center; }
  .header-left #menuBtn { order: 1; }
  .header-left #searchBtn { order: 2; }
  .gc-menu-label { display: none; }
  .header-logo-text { font-size: 28px; }
  .header-right a[href="/newsletter"] { display: none !important; }
  .header-row2 { display: block !important; max-height: 44px; }
  .header-nav { justify-content: flex-start; height: 44px; gap: 24px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { font-size: 11px; height: 44px; white-space: nowrap; flex: 0 0 auto; }

  .gc-river { padding: 24px 0 36px; }
  .gc-river-grid { grid-template-columns: 1fr; gap: 0; }
  .gc-river-main { gap: 14px; padding-bottom: 36px; }
  .gc-river-main .gc-img { aspect-ratio: 4 / 5; }
  .gc-river-main .gc-hed { font-size: 30px; line-height: 1.14; }
  .gc-river-main .gc-dek { font-size: 17px; }
  .gc-river-col { gap: 0; }
  .gc-river-col .gc-card { flex-direction: row-reverse; align-items: flex-start; text-align: left; gap: 16px; padding: 20px 0; border-top: 1px solid var(--gc-rule); }
  .gc-river-col .gc-card .gc-img-link { flex: 0 0 96px; width: 96px; margin: 0; }
  .gc-river-col .gc-card .gc-img { aspect-ratio: 1 / 1; }
  .gc-river-col .gc-card .gc-card-text { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-width: 0; }
  .gc-river-col .gc-card .gc-card-meta { justify-content: flex-start; }
  .gc-river-col .gc-card .gc-hed { font-size: 18px; }
  .gc-river-grid > .gc-river-col:last-child .gc-card:last-child { border-bottom: 1px solid var(--gc-rule); }

  .gc-section-head .gc-display { font-size: 34px; }
  .gc-exclusives { padding: 0 0 48px; }
  .gc-exclusives .gc-grid-4 { display: flex; overflow-x: auto; gap: 16px; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
  .gc-exclusives .gc-grid-4::-webkit-scrollbar { display: none; }
  .gc-exclusives .gc-card { flex: 0 0 250px; scroll-snap-align: start; align-items: flex-start; text-align: left; }
  .gc-exclusives .gc-card-meta { justify-content: flex-start; }
  .gc-exclusives .gc-card .gc-hed { font-size: 18px; }

  .gc-home-ad { padding-bottom: 40px; }
  .gc-latest { padding: 44px 0 36px; margin-bottom: 0; }
  .gc-centered-head { margin-bottom: 20px; }
  .gc-centered-head .gc-display { font-size: 30px; }
  .gc-grid-3, .gc-latest .gc-grid-3 { grid-template-columns: 1fr; row-gap: 0; }
  .gc-latest .gc-thumb-item { padding: 16px 0; border-bottom: 1px solid var(--gc-rule); }
  .gc-latest .gc-thumb-item:last-child { border-bottom: 0; }
  .gc-thumb-item .gc-img-link { flex-basis: 84px; width: 84px; height: 84px; }
  .gc-thumb-item .gc-hed { font-size: 17px; }

  .gc-indepth { padding: 56px 0 48px; }
  .gc-rule-title { gap: 16px; }
  .gc-rule-title .gc-display { font-size: 40px; letter-spacing: .14em; padding-left: .14em; }
  .gc-rule-title.gc-rule-title-sm .gc-display { font-size: 28px; }
  .gc-indepth .gc-view-all { margin: 10px 0 28px; }
  .gc-lead-text, .gc-cat-lead .gc-lead-text { padding: 0; }
  .gc-lead .gc-hed, .gc-cat-lead .gc-lead .gc-hed { font-size: 26px; line-height: 1.16; }
  .gc-lead .gc-dek { font-size: 17px; }
  .gc-indepth-grid { gap: 36px; }
  .gc-side-item .gc-hed { font-size: 18px; }
  .gc-side-item .gc-img-link { flex-basis: 96px; width: 96px; height: 72px; }

  .gc-reports { padding: 48px 0; }
  .gc-covers { height: 330px; }
  .gc-cover-back { display: none; }
  .gc-cover-front { left: 50%; top: 10px; width: 220px; height: 293px; transform: translateX(-50%) rotate(-2deg); border-top-width: 7px; }
  .gc-cover-front-inner { padding: 22px 20px; }
  .gc-cover-title { font-size: 25px; }
  .gc-cover-year { font-size: 58px; }
  .gc-reports-grid { gap: 28px; }
  .gc-reports-text { gap: 18px; }
  .gc-reports-text .gc-hed { font-size: 32px; }
  .gc-stat { padding: 18px 0 18px 14px; }
  .gc-stat-num { font-size: 38px; }
  .gc-stat-label { font-size: 10px; letter-spacing: .12em; }
  .gc-reports-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .gc-reports-actions .gc-link-arrow { justify-content: center; min-height: 48px; }

  .gc-duo { padding: 40px 0; gap: 16px; }
  .gc-podcast { padding: 26px; gap: 18px; }
  .gc-podcast-art { flex-basis: 96px; width: 96px; height: 96px; padding: 10px; }
  .gc-podcast-art span { font-size: 15px; }
  .gc-podcast-text .gc-display { font-size: 28px; }
  .gc-podcast-text p:not(.gc-kicker) { font-size: 15px; }
  .gc-plus { padding: 28px 26px; }
  .gc-plus .gc-display { font-size: 32px; }
  .gc-plus p:not(.gc-kicker) { font-size: 16px; }
  .gc-plus .gc-btn { width: 100%; }

  .gc-newsletter { padding: 36px 0; }
  .gc-newsletter-text .gc-hed { font-size: 28px; }
  .gc-newsletter-text p:not(.gc-kicker) { font-size: 16px; }
  .gc-nl-form { flex-direction: column; gap: 10px; }
  .gc-nl-form input { width: 100%; flex: none; border-right: 1px solid var(--gc-ink); height: 50px; }
  .gc-nl-form button { width: 100%; height: 50px; }

  .gc-cat-head { padding-top: 40px; padding-bottom: 32px; }
  .gc-cat-head-grid { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .gc-cat-head .gc-display { font-size: 46px; }
  .gc-cat-head .gc-dek { font-size: 17px; }
  .gc-cat-head .gc-dek { font-size: 17px; }
  .gc-cat-lead { padding-bottom: 48px; gap: 32px; }
  .gc-cat-side { grid-template-columns: 1fr; gap: 32px; }
  .gc-cat-grid { padding-top: 32px; row-gap: 40px; }
  .gc-cat-grid-wrap { padding-bottom: 56px; }
  .gc-cat-side .gc-hed, .gc-cat-grid .gc-hed { font-size: 20px; }
  .gc-mostread { padding: 48px 0; }
  .gc-mostread-head .gc-display { font-size: 40px; }
  .gc-mostread-list li { grid-template-columns: 52px minmax(0, 1fr); padding: 18px 0; }
  .gc-mostread-num { font-size: 30px; }
  .gc-mostread-list .gc-hed { font-size: 19px; }
  .gc-load-more { padding: 40px 0 56px; }

  .gc-article-head { padding: 36px 20px 28px; gap: 16px; }
  .gc-article-head .gc-hed { font-size: 32px; line-height: 1.12; }
  .gc-article-head .gc-dek { font-size: 18px; }
  .gc-article-byline { gap: 10px; }
  .gc-article-hero { padding: 0; }
  .gc-article-hero img { aspect-ratio: 4 / 3; }
  .article-layout.article-layout-with-sidebar { padding: 32px 20px 56px; row-gap: 32px; }
  .article-body, .article-body p, .article-body ul, .article-body ol { font-size: 18px; }
  .article-body h2 { font-size: 26px; }
  .article-pullquote-inline p { font-size: 26px !important; }
  .gc-more { padding: 48px 0 56px; }

  .new-footer { margin-top: 48px; padding: 44px 20px 32px; row-gap: 28px; }
  .new-footer .footer-header h2 { font-size: 32px; margin-bottom: 8px; }
  .new-footer .footer-header p { font-size: 15px; }
  .new-footer > .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .new-footer .footer-column:nth-child(3) { grid-column: 1 / -1; }
  .new-footer .footer-column li { margin: 0; }
  .new-footer .footer-column a { min-height: 44px; display: flex; align-items: center; }
  .new-footer .social-icons a { width: 44px; height: 44px; }
  .new-footer > .footer-bottom { margin-top: 12px; padding-top: 20px; }
}

/* card text wrapper (lets river side cards switch to a row on mobile) */
.gc-card-text { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; min-width: 0; }
@media (max-width: 768px) {
  .gc-river-col .gc-card .gc-card-text { align-items: flex-start; gap: 8px; }
  .gc-exclusives .gc-card-text { align-items: flex-start; }
}
[hidden] { display: none !important; }
.gc-more ~ .new-footer { margin-top: 0; }

/* ---------- overrides that must beat !important rules in css/style.css ---------- */
.article-layout.article-layout-with-sidebar { grid-template-columns: 180px minmax(0, 680px) 340px !important; gap: 0 40px; }
.article-layout.article-layout-with-sidebar > .gc-share-rail { grid-column: 1; grid-row: 1; }
.article-layout.article-layout-with-sidebar > .article-content { grid-column: 2; grid-row: 1; }
.article-layout.article-layout-with-sidebar > .article-sidebar { grid-column: 3; grid-row: 1; width: auto; }
.article-body .article-lead, .article-lead { font-family: var(--gc-serif); font-size: 20px; font-weight: 400; color: var(--gc-text); line-height: 1.7; letter-spacing: 0; margin-bottom: 26px; border: 0; padding-left: 0; }
.article-lead.has-dropcap::first-letter { float: left; font-size: 88px; line-height: .8; padding: 8px 12px 0 0; font-weight: 400; }
.article-side-related { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.bs-plus-badge { font-family: var(--gc-sans) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .14em !important; color: var(--gc-muted) !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-left: 0 !important; border-radius: 0 !important; }
.ad-top-skeleton { background: linear-gradient(90deg, var(--gc-skeleton-a) 25%, var(--gc-skeleton-b) 50%, var(--gc-skeleton-a) 75%) !important; background-size: 200% 100% !important; }
@media (max-width: 1240px) {
  .article-layout.article-layout-with-sidebar { grid-template-columns: 56px minmax(0, 1fr) 300px !important; }
}
@media (max-width: 1024px) {
  .article-layout.article-layout-with-sidebar { grid-template-columns: minmax(0, 1fr) !important; row-gap: 32px; }
  .article-layout.article-layout-with-sidebar > * { grid-column: 1 !important; grid-row: auto !important; }
}
@media (max-width: 768px) {
  .article-body .article-lead, .article-lead { font-size: 18px; }
  .article-lead.has-dropcap::first-letter { font-size: 64px; }
}
@media (max-width: 768px) {
  .gc-cat-head .gc-rule-title { gap: 12px; }
  .gc-cat-head .gc-rule-title .gc-display { font-size: clamp(24px, 7.6vw, 40px); letter-spacing: .08em; padding-left: .08em; }
}
.gc-thumb-item .gc-card-meta, .gc-side-item .gc-card-meta { justify-content: flex-start; }
.article-author-bio { background: var(--gc-band) !important; border-radius: 0 !important; }
.article-avatar, .bio-avatar { background: var(--gc-rule) !important; color: var(--gc-ink) !important; font-family: var(--gc-sans) !important; }

/* ---------- empty ad slots ----------
   House ads were removed: a slot with no live campaign now holds its shape with
   a skeleton instead of filling it with our own promos. Keeping the space means
   a campaign loading later never shifts the page under the reader. */
.gc-ad-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--gc-skeleton-a) 25%, var(--gc-skeleton-b) 50%, var(--gc-skeleton-a) 75%);
  background-size: 200% 100%;
  animation: gcAdShimmer 1.6s linear infinite;
}
@keyframes gcAdShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .gc-ad-skeleton { animation: none; } }
/* Homepage banner slot: the 6:1 shape the top banner uses, so the three
   advertisement slots on the page read as one system. */
.gc-ad-slot-banner { max-width: calc(var(--gc-width) + var(--gc-gutter) * 2); margin: 0 auto; aspect-ratio: 6 / 1; }
@media (max-width: 768px) { .gc-ad-slot-banner { aspect-ratio: 3 / 1; } }
/* Article rail slot: the 300x250 the rail's campaigns are sold at. */
.gc-ad-slot-rail { width: 100%; aspect-ratio: 300 / 250; border-radius: 8px; }

/* A sold banner slot, built by js/site-pages.js from the hub's campaign. */
.gc-ad-banner { display: block; max-width: calc(var(--gc-width) + var(--gc-gutter) * 2); margin: 0 auto; color: inherit; }
.gc-ad-banner-inner { display: grid; grid-template-columns: 200px minmax(0, 1fr); background: var(--gc-dark); min-height: 120px; overflow: hidden; }
.gc-ad-banner-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gc-ad-banner-text { padding: 18px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.gc-ad-banner-title { font-family: var(--gc-display); font-size: 26px; color: var(--gc-on-dark); margin: 0; white-space: nowrap; }
.gc-ad-banner-body { font-family: var(--gc-sans); font-size: 13px; line-height: 1.5; color: var(--gc-on-dark-muted); margin: 0; flex: 1 1 240px; }
.gc-ad-banner-cta { font-family: var(--gc-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gc-accent-tint); border: 1px solid var(--gc-accent-tint); padding: 11px 22px; white-space: nowrap; }
.gc-ad-banner:hover .gc-ad-banner-cta { background: var(--gc-accent-tint); color: var(--gc-dark); }
@media (max-width: 768px) {
  .gc-ad-banner-inner { grid-template-columns: 120px minmax(0, 1fr); min-height: 96px; }
  .gc-ad-banner-text { padding: 12px 16px; gap: 10px; }
  .gc-ad-banner-title { font-size: 19px; }
  .gc-ad-banner-body { display: none; }
  .gc-ad-banner-cta { font-size: 10px; padding: 8px 14px; }
}

/* ============================================================
   THEMED — the panels that predate the tokens
   The sections drawn in the redesign already read tokens, so they follow the
   theme on their own. What is left are the panels written before it, with
   literal colours in css/style.css or in a page's own <style> block: cards,
   form controls, tags and loading skeletons. Each one is pointed at a token
   here, which is what makes it switch. gc-theme.css is the last stylesheet on
   every page, so these win without !important wherever specificity matches.

   Grouped by what the thing IS, not by which page it is on — the same card
   class appears on four pages and must not drift between them.
   ============================================================ */

/* ---------- panels and cards ---------- */
.office-card, .team-card, .pillar-card, .plus-benefit, .price-card, .report-card,
.faq-item, .event-card, .contact-nl, .stat-card, .value-card, .inst-card {
  background: var(--gc-band);
  border-color: var(--gc-rule);
  color: var(--gc-text);
}
.price-card.featured { background: var(--gc-panel-strong); }
.faq, section.faq { background: var(--gc-paper); }
.report-card h3, .price-card h3, .team-card h4, .office-card h4, .plus-benefit h4,
.faq-item summary, .inst-card h3 { color: var(--gc-ink); }
.team-card p, .office-card p, .report-card p, .plus-benefit p { color: var(--gc-muted); }
/* The avatar placeholder is a light disc with dark initials; inverted it keeps
   the same contrast rather than becoming a hole in the card. */
.team-card .avatar, .avatar { background: var(--gc-rule); color: var(--gc-ink); }
.flag { background: var(--gc-rule-strong); }

/* ---------- form controls ----------
   color-scheme: dark on <html> already repaints the native widgets; these
   rules cover the ones the pages style themselves. */
.contact-form, .adv-form { background: var(--gc-band); border-color: var(--gc-rule); }
.contact-form input, .contact-form select, .contact-form textarea,
.nl-input, .contact-nl-form input, input[type="text"], input[type="email"],
input[type="search"], select, textarea {
  background: var(--gc-paper);
  border-color: var(--gc-rule-strong);
  color: var(--gc-ink);
}
input::placeholder, textarea::placeholder { color: var(--gc-muted); }
.contact-form label, .form-group label { color: var(--gc-text); }

/* ---------- tags, dots, chips ----------
   The newsletter card tags were four pale pastels, invisible as backgrounds on
   black. They keep their hues as the type colour instead, on one shared panel. */
.nl-card-tag.moves { background: var(--gc-tag-moves-bg); color: var(--gc-tag-moves-fg); }
.nl-card-tag.retail { background: var(--gc-tag-retail-bg); color: var(--gc-tag-retail-fg); }
.nl-card-tag.innovation { background: var(--gc-tag-innov-bg); color: var(--gc-tag-innov-fg); }
.nl-card-tag.brands { background: var(--gc-tag-brands-bg); color: var(--gc-tag-brands-fg); }
.podcast-tag { background: var(--gc-tag-podcast-bg); color: var(--gc-tag-podcast-fg); }

/* ---------- loading skeletons ----------
   A light shimmer on a dark page reads as content that has already arrived.
   Same animation, dark stops. */
.skeleton-loader {
  background: linear-gradient(90deg, var(--gc-skeleton-a) 25%, var(--gc-skeleton-b) 50%, var(--gc-skeleton-a) 75%) !important;
  background-size: 200% 100% !important;
}
.ad-top, .ad-top-carousel, .ad-nbdp, .ad-melyon, .bs-rail { background: var(--gc-band); }
.gc-ad-skeleton { background: linear-gradient(90deg, var(--gc-skeleton-a) 25%, var(--gc-skeleton-b) 50%, var(--gc-skeleton-a) 75%); background-size: 200% 100%; }

/* ---------- the pages that predate the theme ---------- */
body, .header, .new-footer ~ *, main { background-color: var(--gc-paper); }
.btn, a.btn { background: var(--gc-ink); color: var(--gc-paper); }
.btn:hover, a.btn:hover { background: var(--gc-accent); color: #fff; }
hr { border-color: var(--gc-rule); }

/* ---------- the masthead's placeholder cards ----------
   A [data-bs-authors] grid ships these and keeps them until the hub returns
   someone. They must read as "waiting", not as an empty person: no name line,
   no hover, and nothing announced to a screen reader. */
.team-card.is-skeleton { pointer-events: none; }
.team-card.is-skeleton .avatar { border-radius: 50% !important; }
.team-card .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.team-card .ai-disclosure { font-family: var(--gc-sans); font-size: 10px; letter-spacing: .1em; vertical-align: middle; }

/* ---------- the theme switch ----------
   One button in the header's right-hand group, next to Login. It shows the
   theme the click will GIVE you — a moon on a light page — because showing the
   theme you are already in says nothing about what the button does. */
.gc-theme-switch { position: relative; display: inline-flex; }
.gc-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 50%;
  color: inherit; cursor: pointer; transition: border-color .15s, color .15s;
}
.gc-theme-btn:hover { border-color: var(--gc-rule-strong); color: var(--gc-accent); }
.gc-theme-btn svg { width: 17px; height: 17px; }
@media (max-width: 768px) {
  /* A 34px circle is under the 44px a thumb needs. */
  .gc-theme-btn { width: 44px; height: 44px; }
}