/* CGS Article Template, moved into cgs-core (the article module, 0.25.0).
   This file is the SOURCE from 0.25.0: edit it here. cgs-site/theme/
   article-template.css and cgs-site/scripts/sync_css.py keep the record of
   WPCode snippet 25095580 only, which this module keeps quiet while ticked.
   Loaded on single posts only (see cgs_article_css_enabled), because
   /home-new/ page 25095190 already uses its own .cgs-hero. */
:root{
  --cgs-navy:#27318B; --cgs-ink:#1D2B47; --cgs-body-c:#52585D;
  --cgs-muted:#5B6478; --cgs-line:#E2E4EA; --cgs-alt:#F5F6FA;
  /* Category chip font, pinned to whatever the Insights feed badge
     (.cgs-no-badge, snippet 25095233) resolves to. Pinned rather than
     inherited, so hero and related cards stay identical to the list view and
     to each other. Until 2026-09-29 both stacks began with static Roboto,
     which renders about 4.6% narrower than Roboto Flex (108.5px vs 113.4px for
     PEACE & DISARMAMENT at 700 9.5px) and cost a post a Roboto download for
     its chips alone; both now begin with Roboto Flex (owner yes). */
  --cgs-badge-font:"Roboto Flex",Helvetica,Arial,sans-serif;
}
/* 1 article top. Standard news order: breadcrumb, 16:9 image, title, deck,
   byline (Eston 2026-08-06, replacing the navy masthead). The section is plain
   white, so nothing here inverts to light-on-dark any more. */
.cgs-article{background:#fff!important;box-shadow:none!important;border-bottom:0!important;padding-top:40px!important}
@media(max-width:980px){.cgs-article{padding-top:24px!important}}
/* font-size carries !important on all three steps. The title is a Divi Post
   Title module, so this h1 sits inside .et_pb_title_container and Divi's
   .et_pb_title_container h1{font-size:36px} ties this rule on specificity
   (0,1,1 each) and wins on source order. The symptom was mobile only, because
   36px is what the 768px step asks for anyway: below 768px the 30px never
   applied and long titles ran to 5 lines at 375px. Marking only the base rule
   would leave the two breakpoints outranked by it, so all three carry it.
   line-height was never affected, Divi's rule does not set it. */
.cgs-article h1{color:var(--cgs-navy);font-weight:700;line-height:1.14;font-size:30px!important;
  max-width:900px;text-wrap:balance;margin-bottom:0}
@media(min-width:768px){.cgs-article h1{font-size:36px!important}}
@media(min-width:1100px){.cgs-article h1{font-size:42px!important}}
.cgs-deck{color:var(--cgs-ink);font-size:17px;line-height:1.55;max-width:680px;margin-top:14px}
@media(min-width:1100px){.cgs-deck{font-size:19px}}
/* 2 badge pill, overlaid on the hero image top left. Both stream classes get the
   same treatment now that the pill sits on a photo rather than on navy; the two
   class names survive so the stream stays addressable. Values mirror
   .cgs-rel-badge and the Insights cards, a little larger for a full width hero. */
/* Matched to the Insights feed badge (.cgs-no-badge, snippet 25095233), not
   "a little larger for a full width hero", which is what this used to be. The
   divergence was real and compound: 11px Montserrat in a 19px pill here against
   9.5px Roboto in a 33px pill there, so the hero label read both smaller and
   heavier than the card the reader clicked from (Eston 2026-08-07).

   font-family is PINNED via --cgs-badge-font rather than inherited, for the
   reason documented on that token. line-height is still inherited on purpose:
   it is what gives the chip its 33.2px height, matching the list view.

   Do NOT reintroduce a `font:` shorthand here. The shorthand resets line-height
   to normal, which would drop the pill back to ~15px and reopen this same gap.
   Padding keeps !important because Divi still has rules that reach this pill;
   the badge is a <span> now, so the last-of-type paragraph bug is gone, but the
   guard is cheap. */
.cgs-badge,.cgs-badge--news{position:absolute;top:12px;left:12px;z-index:2;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 9px!important;border-radius:999px;background:rgba(40,44,52,.78);
  font-family:var(--cgs-badge-font);
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  transition:background .2s ease}
.cgs-badge:hover,.cgs-badge--news:hover{background:rgba(40,44,52,.95)}
.cgs-badge a,.cgs-badge--news a{color:#fff!important;text-decoration:none}
/* 2b breadcrumb, above the image and on white */
.cgs-breadcrumb{font-size:13px;letter-spacing:.3px;margin-bottom:14px;color:var(--cgs-muted)}
.cgs-breadcrumb a{color:var(--cgs-muted)!important;text-decoration:none}
.cgs-breadcrumb a:hover{color:var(--cgs-navy)!important;text-decoration:underline}
.cgs-breadcrumb a:focus-visible{outline:3px solid #F1C500;outline-offset:2px}
/* 3 hero: enforced 16:9, no white frame. Both frame selectors are live: the
   markup ships from [cgs_hero] (.cgs-hero__frame), but a Divi Image module
   dropped into the same slot brings .et_pb_image_wrap instead. */
/* position:relative anchors the badge. The margin is flattened with !important
   because this is a <figure>, which the UA sheet gives a 1em/40px margin. The
   old negative top margins are gone: they existed only to lift the image over
   the navy masthead, and there is no masthead to overlap now. */
.cgs-hero{position:relative;margin:0 0 28px!important}
.cgs-hero figcaption{margin:0}
.cgs-hero .et_pb_image_wrap,.cgs-hero .cgs-hero__frame{display:block;aspect-ratio:16/9;
  overflow:hidden;border-radius:10px;
  border:1px solid var(--cgs-line);box-shadow:0 10px 28px rgba(29,43,71,.18)}
.cgs-hero .et_pb_image_wrap img,.cgs-hero .cgs-hero__frame img{width:100%;height:100%;
  object-fit:cover;display:block}
.cgs-hero--portrait .et_pb_image_wrap,.cgs-hero--portrait .cgs-hero__frame{background:var(--cgs-ink);
  display:flex;align-items:center;justify-content:center}
.cgs-hero--portrait .et_pb_image_wrap img,.cgs-hero--portrait .cgs-hero__frame img{width:auto;
  height:100%;object-fit:contain}
.cgs-hero-caption{font-size:13px;line-height:1.4;color:var(--cgs-muted);margin-top:10px}
/* 4 meta row. Sits under the title and deck now, so it carries its own top gap
   and its rule doubles as the separator into the body. */
.cgs-meta{font-size:14px;color:var(--cgs-muted);border-bottom:1px solid var(--cgs-line);
  padding-bottom:16px;margin-top:22px;margin-bottom:28px}
.cgs-meta a{color:var(--cgs-navy);font-weight:600;text-decoration:none}
.cgs-meta img.cgs-orgmark{width:28px;height:28px;border-radius:50%;border:1px solid var(--cgs-line);
  vertical-align:middle;margin-right:8px;background:#fff}
/* 5 body */
.cgs-body p{font-size:17px;line-height:1.7;color:var(--cgs-body-c)}
@media(min-width:768px){.cgs-body p{font-size:18px;line-height:1.75}}
.cgs-body a{color:var(--cgs-navy);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.cgs-body a:hover{text-decoration-thickness:2px}
.cgs-body h2{font-size:22px;color:var(--cgs-navy);margin-top:40px;padding-bottom:12px}
@media(min-width:1100px){.cgs-body h2{font-size:26px}}
.cgs-body h3{font-size:19px;color:var(--cgs-ink)}
@media(min-width:1100px){.cgs-body h3{font-size:21px}}
.cgs-body blockquote{border-left:4px solid var(--cgs-navy);padding:2px 0 2px 24px;margin:32px 0;
  font-size:21px;line-height:1.45;color:var(--cgs-navy)}
@media(min-width:1100px){.cgs-body blockquote{font-size:24px}}
.cgs-body ul,.cgs-body ol{padding-left:24px}
.cgs-body li{margin-bottom:8px}
.cgs-body img{border-radius:8px;margin:28px 0;max-width:100%}
/* 6 end cards */
.cgs-endcard{background:#fff;border:1px solid var(--cgs-line);border-left:4px solid var(--cgs-navy);
  border-radius:10px;padding:24px 28px;box-shadow:0 6px 18px rgba(29,43,71,.08)}
.cgs-endcard--news{background:var(--cgs-alt);border-left:1px solid var(--cgs-line);box-shadow:none}
/* Navy, not muted grey: these eyebrows are the About CGS box's headers, and the
   news box is the only place they survive now that the author card dropped its
   own (Eston 2026-08-07). */
.cgs-endcard .cgs-eyebrow{font:700 11px/1 Montserrat,sans-serif;text-transform:uppercase;
  letter-spacing:1px;color:var(--cgs-navy);margin-bottom:10px}
.cgs-disclaimer{font-size:13px;font-style:italic;color:var(--cgs-muted);
  border-top:1px solid var(--cgs-line);padding-top:16px;margin-top:28px}
.cgs-monogram{display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;background:var(--cgs-navy);color:#fff;
  font:700 26px Montserrat,sans-serif;letter-spacing:1px;flex:0 0 72px}
/* border-left matches the other three sides: the navy accent bar .cgs-endcard
   draws is dropped here on purpose (Eston 2026-08-07). Same override the news
   box already makes. */
.cgs-authorcard{display:flex;gap:20px;align-items:flex-start;margin-top:36px;
  border-left:1px solid var(--cgs-line)}
@media(max-width:560px){.cgs-authorcard{flex-direction:column;gap:14px}}
.cgs-authorcard__text{flex:1;min-width:0}
.cgs-authorcard__name{font-weight:700;color:var(--cgs-ink);margin:0 0 6px}
.cgs-authorcard p{font-size:15px;line-height:1.6;color:var(--cgs-body-c)}
.cgs-authorcard a{color:var(--cgs-navy);font-weight:600}
.cgs-endcard--news{margin-top:36px}
/* 7 fallback hero (no featured image) */
.cgs-fbhero{aspect-ratio:16/9;border-radius:10px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--fb-a,#1D2B47),var(--fb-b,#27318B));
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--cgs-line);box-shadow:0 10px 28px rgba(29,43,71,.18)}
.cgs-fbhero::before{content:"";position:absolute;inset:0;opacity:.1;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:22px 22px}
/* same wordmark and proportion as the feed card (insights.css .cgs-no-logo) */
.cgs-fbhero img{position:relative;width:56%;max-width:320px;min-width:160px;height:auto;object-fit:contain;opacity:.95}
/* 8 related + newsletter */
.cgs-related{background:var(--cgs-alt)}
/* The gold seam is load bearing, not decoration: the band and the site footer
   are both navy and merge into one block without it. Same fix, same 3px, same
   token as the campaign take-action bands (S31), so the two read as one system.
   Gold is a non-text accent here, which is what the brand guide allows. */
.cgs-newsband{background:var(--cgs-navy);text-align:center;border-bottom:3px solid #F1C500}
.cgs-newsband h2{color:#fff;font-size:26px;margin-bottom:10px}
@media(min-width:1100px){.cgs-newsband h2{font-size:30px}}
.cgs-newsband .cgs-sub{color:#E5E6F1;font-size:16px;max-width:560px;margin:0 auto 22px}
.cgs-newsband a.cgs-btn{display:inline-block;background:#fff;color:var(--cgs-navy);border-radius:50px;
  padding:14px 32px;font:700 17px Montserrat,sans-serif;letter-spacing:1px;text-decoration:none}
.cgs-newsband a.cgs-btn:hover{background:#E5E6F1}
/* 9 outline button (news PDF slot) */
a.cgs-btn-outline{display:inline-block;background:transparent;color:var(--cgs-navy);
  border:2px solid var(--cgs-navy);border-radius:50px;padding:12px 28px;
  font:700 16px Montserrat,sans-serif;letter-spacing:1px;text-decoration:none;margin-top:16px}
a.cgs-btn-outline:hover{background:var(--cgs-navy);color:#fff}
/* 10 related cards. Values mirror the Insights cards on purpose, but that CSS is
   emitted inside the [cgs_news_opinion] shortcode (snippet 25095233) so it never
   reaches a single post. Restated here rather than shared. */
.cgs-rel-h2{font-size:22px;color:var(--cgs-navy);margin-bottom:22px}
@media(min-width:1100px){.cgs-rel-h2{font-size:26px}}
.cgs-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:1000px){.cgs-rel-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:560px){.cgs-rel-grid{grid-template-columns:1fr}}
.cgs-rel-card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid #ececec;border-radius:10px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease}
.cgs-rel-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.1)}
.cgs-rel-media{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--cgs-ink)}
.cgs-rel-media img{width:100%;height:100%;object-fit:cover;display:block}
.cgs-rel-media--fallback{background:linear-gradient(135deg,var(--cgs-ink),var(--cgs-navy))}
/* Same pinned chip font as .cgs-badge, so the hero chip and the related card
   chips on the same page cannot drift apart from each other or from the list. */
.cgs-rel-badge{position:absolute;top:8px;left:8px;z-index:2;background:rgba(40,44,52,.78);
  color:#fff!important;font-family:var(--cgs-badge-font);
  font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;text-decoration:none;transition:background .2s ease}
.cgs-rel-badge:hover{background:rgba(40,44,52,.95);color:#fff!important}
.cgs-rel-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.cgs-rel-title{font-size:17px;line-height:1.3;margin:0 0 10px}
.cgs-rel-title a{color:#1a1a2e!important;text-decoration:none}
.cgs-rel-title a:hover{color:var(--cgs-navy)!important}
.cgs-rel-date{font-size:12px;color:#777;margin:auto 0 0}
/* 11 respect reduced motion (project standard since S31) */
@media(prefers-reduced-motion:reduce){
  .cgs-rel-card,.cgs-rel-badge{transition:none}
  .cgs-rel-card:hover{transform:none}
}
/* 12 focus rings (project standard since S31) */
.cgs-rel-title a:focus-visible,.cgs-rel-badge:focus-visible,.cgs-rel-media:focus-visible,
a.cgs-btn-outline:focus-visible,.cgs-newsband a.cgs-btn:focus-visible{
  outline:3px solid #F1C500;outline-offset:2px}
.cgs-badge a:focus-visible,.cgs-badge--news a:focus-visible{outline:3px solid #F1C500;outline-offset:2px}
/* Part of our work on X (advocacy redesign part 5b, decision O): leads the end
   block of an article tagged with an issue. Divi pads every paragraph, so the
   padding is set whole. */
.cgs-ourwork{margin:0 0 28px;padding:12px 16px!important;border-left:4px solid #F1C500;background:var(--cgs-alt);font-family:"Roboto Flex",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--cgs-ink)}
.cgs-ourwork a{color:var(--cgs-navy)!important;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cgs-ourwork a:hover{text-decoration:none}