/* ==========================================================================
   Framer CMS pages: /blog, /news, /daily-bulletin listings and their post templates
   (layouts/post-blog.njk, post-news.njk, post-bulletin.njk). Measurements from the live site.
   ========================================================================== */
:root {
  --cms-teal: #124341;      /* "Blue Bg" buttons, labels */
  --cms-line: #dcdbe1;      /* card borders, dividers */
  --cms-bg: #f8f8fa;        /* listing background */
  --cms-muted: #95969c;     /* dates */
  --cms-body: #141414;
}

/* appear effects used on these pages (site.js adds .is-in) */
.js [data-reveal="up"] { transform: perspective(1200px) translateY(80px); }
.js [data-reveal="up40"] { transform: translateY(40px); }
.cms-show-phone { display: none; }

/* ---------- "Read More" / "Back to …" pills ---------- */
.cms-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 24px; border-radius: 400px; overflow: hidden;
  background: var(--cms-teal); font: 400 20px/1.53 var(--f-body); color: #fcfcfc; white-space: pre; flex: none; }
.cms-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 24px; border-radius: 400px; overflow: hidden;
  background: #fff; box-shadow: inset 0 0 0 1px var(--cms-teal); font: 400 20px/1.53 var(--f-body); color: var(--cms-teal); white-space: pre; flex: none; }
.cms-back__icon { width: 24px; height: 24px; flex: none; display: block; }

/* ==========================================================================
   Listings
   ========================================================================== */
.cms-head { padding: 160px 40px 100px; display: flex; justify-content: center; background: #fff; overflow: hidden; }
.cms-head__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cms-head__title { width: 100%; font: 600 64px/1 var(--f-head); letter-spacing: -0.04em; color: var(--cms-body); }
.cms-head__sub { width: 100%; font: 400 18px/1.5 var(--f-body); color: var(--gray); }

.cms-list { background: var(--cms-bg); padding: 120px 80px; display: flex; justify-content: center; overflow: hidden; }
.cms-list__grid { flex: 1 0 0; width: 1px; display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); grid-auto-rows: min-content; justify-content: center; gap: 20px; }

.cms-card { display: flex; align-items: stretch; gap: 20px; padding: 20px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--cms-line); width: 100%; min-width: 0; }
.cms-card__img { position: relative; flex: none; width: 230px; min-height: 230px; border-radius: 16px; overflow: hidden; }
.cms-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cms-card__text { flex: 1 0 0; width: 1px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.cms-card__top { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding-bottom: 24px; overflow: clip; }
.cms-date { font: 400 14px/1.54 "Manrope", var(--f-body); letter-spacing: 0.1px; color: var(--cms-muted); white-space: pre; }
.cms-card__title { width: 100%; font: 500 24px/1.35 var(--f-head); letter-spacing: -0.7px; color: #343a40; overflow-wrap: break-word; }
.cms-card--news .cms-card__img { min-height: 0; }
.cms-card--news .cms-card__title { font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; color: var(--cms-body); }

/* Daily Bulletin cards */
.cms-card--bulletin .cms-card__top { padding-bottom: 0; }
.cms-card--bulletin .cms-card__title { font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; color: var(--cms-body); }
.cms-card__bottom { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; overflow: clip; }
.cms-card__meta { width: 100%; display: flex; justify-content: space-between; align-items: center; overflow: clip; }
.cms-tag { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 48px; background: #e9f2c3;
  transform: translate(0.2px, -20px) rotate(1deg) scale(0.8); }
.cms-tag p { font: 400 11px/1.5 var(--f-body); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); white-space: pre; }

/* ==========================================================================
   Rich text (post bodies) — mirrors the Framer text styles
   --cms-gap is the spacing Framer gives lists, images, tables and embeds inside a text block.
   ========================================================================== */
.cms-rich { --cms-gap: 0px; width: 100%; font: 400 20px/1.53 var(--f-body); color: var(--cms-body); overflow-wrap: break-word; word-break: break-word;
  font-feature-settings: var(--inter-features); }
.cms-rich--news { --cms-gap: 32px; }
.cms-rich > * + * { margin-top: var(--cms-gap); }
.cms-rich p, .cms-rich li { font: 400 20px/1.53 var(--f-body); color: var(--cms-body); }
.cms-rich > p + p, .cms-rich > * + p, .cms-rich li > p + p { margin-top: 20px; }
.cms-rich > p:has(> img:only-child), .cms-rich > p:has(> a:only-child > img) { margin-top: var(--cms-gap); }
.cms-rich > :first-child { margin-top: 0 !important; }
.cms-rich strong { font-weight: 700; }
.cms-rich em { font-style: italic; font-weight: 400; }
.cms-rich a { color: var(--green); text-decoration: none; }
.cms-rich a:hover { color: #0a0a0a; text-decoration: underline; }
.cms-rich h1, .cms-rich h2, .cms-rich h3, .cms-rich h4, .cms-rich h5, .cms-rich h6 { color: var(--cms-body); }
.cms-rich > :is(h1, h2, h3, h4, h5, h6):not(:first-child) { margin-top: 40px; }
.cms-rich h2 { font: 600 32px/1.17 var(--f-head); letter-spacing: -1.2px; }
.cms-rich h3 { font: 600 24px/1.25 var(--f-head); letter-spacing: -1px; }
.cms-rich h4 { font: 500 20px/1.26 var(--f-head); letter-spacing: -1px; }
.cms-rich h5 { font: 500 18px/1.35 var(--f-inter); letter-spacing: -0.7px; }
.cms-rich :is(h2, h3) strong { font-weight: 900; }
.cms-rich h5 strong { font-family: var(--f-inter); font-weight: 700; }
.cms-rich h3.cms-1iazjjy { font: 600 28px/1.3 "Lexend", var(--f-body); letter-spacing: -0.04em; color: #fff; }
.cms-rich h3.cms-1iazjjy strong { font-weight: 900; }
.cms-rich > h5.cms-plain:not(:first-child) { margin-top: var(--cms-gap); }
.cms-rich h5.cms-plain { font: 400 16px/1.2 var(--f-inter); letter-spacing: 0; color: #000; }
.cms-rich blockquote { position: relative; margin: 0; padding: 0 0 0 22px; }
.cms-rich > blockquote:not(:first-child) { margin-top: 20px; }
.cms-rich blockquote::before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 100%; border-radius: 1px; background: #ddd; }
.cms-rich blockquote p { font: italic 400 20px/1.53 var(--f-inter); color: #999; }
.cms-rich blockquote p + p { margin-top: 20px; }
.cms-rich blockquote strong { font-style: normal; font-weight: 700; }
.cms-rich ul, .cms-rich ol { position: relative; padding: 0; margin-bottom: 0; list-style: none; }
.cms-rich li { padding-inline-start: 2ch; list-style: none; counter-increment: list-item; }
.cms-rich ul > li::before { content: "•"; position: absolute; inset-inline-start: 0; }
.cms-rich ol > li::before { content: counter(list-item) "."; position: absolute; inset-inline-start: 0; font-variant-numeric: tabular-nums; }
.cms-rich li > :is(ul, ol) { margin-top: 0; }
.cms-rich img { display: block; width: 80%; max-width: 100%; height: auto; margin: 0 auto; } /* Framer site snippet ECZDT9pYL: images 80% wide, centred */
.cms-rich p > a:only-child:has(> img) { display: block; width: 80%; margin: 0 auto; } /* linked image: the link box is the 80% one */
.cms-rich table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; word-break: normal; border: 1px solid #99999940; border-radius: 8px; overflow: hidden; }
.cms-rich th, .cms-rich td { padding: 10px; text-align: left; vertical-align: top; min-width: 96px; /* matches Framer's 16ch column minimum (live column widths) */ overflow-wrap: anywhere; font: 400 20px/1.53 var(--f-body); color: var(--cms-body); }
.cms-rich th { background: #9999991a; }
.cms-rich tr + tr > *, .cms-rich tbody tr > * { border-top: 1px solid #99999940; }
.cms-rich * + th, .cms-rich * + td { border-left: 1px solid #99999940; }
.cms-video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; }
.cms-video img, .cms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; margin: 0; }
.cms-video button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cms-video button svg { display: block; width: 100%; height: 100%; }
.cms-video:hover button path:first-child { fill: #f00; fill-opacity: 1; }
.cms-module { width: fit-content; overflow: hidden; }
.cms-rich a.btn { color: #fff; text-decoration: none; }
.btn--teal { background: var(--teal-ink); }
.btn--teal:hover { background: var(--ink); }

/* Framer text styles switch these OpenType features on (the font shorthand above resets them) */
.cms-rich :is(p, li, h1, h2, h3, h4, h5, h6, th, td), .cms-rich blockquote p { font-feature-settings: var(--inter-features); }

/* small "Sources / Relevant Links" text block */
.cms-rich--sources p, .cms-rich--sources li { font-size: 16px; line-height: 1.5; color: var(--ink-3); }
.cms-rich--sources p strong, .cms-rich--sources li strong { font-family: var(--f-inter); }
.cms-rich--sources p em, .cms-rich--sources li em { font-family: var(--f-inter); }

/* thin rule between a post body and its sources (an SVG line in Framer, max 1200px, centred) */
.cms-divider { width: 100%; height: 1px; display: flex; justify-content: center; overflow: hidden; flex: none; }
.cms-divider::before { content: ""; flex: none; width: 1200px; height: 1px; background: rgba(220, 219, 225, 0.5); }

/* ==========================================================================
   Blog post
   ========================================================================== */
.bp-hero { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 120px 80px 0; overflow: hidden; }
.bp-back { width: 100%; max-width: 1360px; display: flex; flex-direction: column; align-items: flex-start; overflow: clip; }
.bp-cover { position: relative; width: 100%; max-width: 1360px; display: flex; border-radius: 16px; overflow: hidden; }
.bp-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bp-cover__inner { position: relative; flex: 1 0 0; width: 1px; height: 672px; padding: 20px 25px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.bp-cover__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(#0d1f2100 0%, #0d1f21 100%); }
.bp-intro { position: relative; z-index: 2; width: 100%; max-width: 951px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.bp-intro__text { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.bp-intro__title { width: 100%; font: 700 56px/1.1 var(--f-head); letter-spacing: -1.2px; color: #fff; text-align: center; overflow-wrap: break-word; }
.bp-intro__sub { width: 100%; max-width: 611px; font: 400 20px/1.53 var(--f-body); color: #f4f5f5; text-align: center; }
.bp-intro__meta { width: 100%; max-width: 310px; display: flex; justify-content: center; align-items: center; gap: 205px; }
.bp-intro__date { font: 400 14px/1.54 "Manrope", var(--f-body); letter-spacing: 0.1px; color: #fcfcfc; white-space: pre; }
.bp-intro--below { display: none; }
.bp-details { display: flex; justify-content: center; padding: 100px 80px 120px; }
.bp-article { width: 100%; max-width: 1360px; display: flex; flex-direction: column; align-items: flex-start; gap: 60px; }
.bp-cta { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; overflow: clip; }
.bp-cta__text { width: 100%; }
.bp-cta__text p { font: 400 20px/1.53 var(--f-body); color: #4c5157; text-align: left; }
.bp-cta__text p a { color: #09f; text-decoration: underline; }

/* ==========================================================================
   News post
   ========================================================================== */
.np { width: 100%; max-width: 1000px; margin: 0 auto; padding: 160px 0 100px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.np > * { width: 100%; }
.np-head { display: flex; flex-direction: column; align-items: center; gap: 20px; overflow: hidden; }
.np-back { width: 100%; display: flex; flex-direction: column; align-items: flex-start; overflow: clip; }
.np-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.np-date { font: 400 16px/1.5 var(--f-body); color: var(--ink-3); white-space: pre; }
.js .np-date[data-reveal].is-in, .np-date { opacity: 0.5; }
.np-headline { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.np-title { width: 100%; font: 600 44px/1.2 var(--f-head); letter-spacing: -0.04em; color: var(--cms-body); text-align: left; overflow-wrap: break-word; }
.np-sub-wrap { width: 100%; opacity: 0; } /* never fades in on the live site */
.np-sub { width: 100%; font: 400 18px/1.5 var(--f-body); color: var(--cms-body); text-align: left; }
.np-banner { position: relative; height: 500px; border-radius: 20px; overflow: hidden; }
.np-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.np-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; overflow: clip; }

/* ==========================================================================
   Daily Bulletin issue
   ========================================================================== */
.db { width: 100%; max-width: 1360px; margin: 0 auto; padding: 120px 80px 80px; display: flex; flex-direction: column; align-items: center; overflow: clip; }
.db > * { width: 100%; }
.db-back { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 40px; overflow: clip; }
.db-mast { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px; border-radius: 12px; background: var(--cms-teal); overflow: clip; }
.db-mast__img { position: relative; width: 100%; height: 481px; min-height: 240px; border-radius: 12px; overflow: hidden; flex: none; }
.db-mast__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.db-mast__details { width: 100%; display: flex; align-items: center; gap: 12px; overflow: clip; }
.db-issue { font: 700 20px/1.2 var(--f-head); letter-spacing: 1.4px; text-transform: uppercase; color: #d5ed71; white-space: pre; }
.db-date { font: 400 16px/1.2 var(--f-body); color: #fff; white-space: pre; }
.db-mast__title { width: 100%; font: 700 56px/1.1 var(--f-head); letter-spacing: -1.2px; color: #fff; overflow-wrap: break-word; }
.db-opening { display: flex; flex-direction: column; padding: 40px 0; overflow: clip; }
.db-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px 0; box-shadow: inset 0 1px 0 var(--mint); overflow: clip; }
.db-label { width: 100%; font: 700 11px/1.2 var(--f-head); letter-spacing: 1.4px; text-transform: uppercase; color: var(--cms-teal); }
.db-title { width: 100%; font: 600 32px/1.17 var(--f-head); letter-spacing: -1.2px; color: var(--cms-body); text-align: start; overflow-wrap: break-word; }
.db-link { display: flex; font: 700 15px/1.2 var(--f-head); color: var(--cms-teal); white-space: pre; text-decoration: underline; }
.db-feature { display: flex; flex-direction: column; align-items: center; gap: 40px; overflow: clip; }
.db-feature > * { width: 100%; }
.db-insight { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px; background: var(--cms-bg); box-shadow: inset 4px 0 0 var(--cms-teal); overflow: clip; }
.db-source { display: flex; font: 400 14px/1.5 var(--f-body); color: var(--cms-teal); white-space: pre; text-decoration: underline; }
.db-source--plain { text-decoration: none; } /* source named without a link (its page no longer exists) */
.db-question { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px; border-radius: 16px; background: var(--teal-ink); overflow: clip; }
.db-question__head { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; overflow: clip; }
.db-question .db-label { color: #fff; text-align: center; }
.db-question__q { width: 100%; font: 700 26px/1.35 var(--f-head); color: #fff; text-align: center; }
.cms-rich.db-question__copy p { font: 400 20px/1.3 var(--f-body); font-size: 20px; color: #fff; text-align: center; }
.db-signoff { display: flex; flex-direction: column; gap: 8px; padding: 40px 0; overflow: clip; }
.db-signoff__name { font: 700 17px/1.4 var(--f-head); color: var(--cms-teal); }
.db-disclosure { font: 400 13px/1.6 var(--f-body); color: var(--cms-muted); }

/* ==========================================================================
   Tablet (810–1199px)
   ========================================================================== */
@media (max-width: 1199.98px) {
  .cms-head__title { font-size: 49px; }
  .cms-head__sub { font-size: 17px; }
  .cms-list { padding: 40px 30px; }
  .cms-list__grid { display: flex; flex-direction: column; }
  .cms-card--news .cms-card__img { min-height: 230px; }
  /* blog cards: the photo keeps its own proportions (min 230px tall) instead of stretching with the text */
  .cms-card--blog .cms-card__img { align-self: flex-start; }
  .cms-card--blog .cms-card__img img { position: static; display: block; height: auto; min-height: inherit; }
  .cms-card--news .cms-card__title, .cms-card--bulletin .cms-card__title { font-size: 20px; letter-spacing: -0.4px; }
  .cms-card--bulletin { padding: 16px; }
  .cms-card--bulletin .cms-card__img { width: 156px; min-height: 156px; }
  .cms-tag { padding: 7px 20px 7px 12px; }
  .cms-tag p { font-size: 15px; letter-spacing: normal; text-transform: none; }

  .cms-rich p, .cms-rich li, .cms-rich th, .cms-rich td, .cms-rich blockquote p { font-size: 16.96px; }
  .cms-rich h2 { font-size: 28px; line-height: 1.2; }
  .cms-rich h3 { font-size: 22px; line-height: 1.27; }
  .cms-rich h4 { font-size: 18px; line-height: 1.33; }
  .cms-rich h5 { font-size: 16px; line-height: 1.4; }
  .cms-rich h3.cms-1iazjjy { font-size: 30px; }
  .cms-rich--sources p, .cms-rich--sources li { font-size: 15px; }

  .bp-hero { padding: 120px 25px 0; }
  .bp-cover__inner { padding: 0; }
  .bp-intro--over { max-width: none; padding: 250px 40px 0; }
  .bp-intro__title { font-size: 48px; line-height: 1.12; }
  .bp-details { padding: 80px 25px 100px; }

  .np { padding: 120px 40px 40px; }
  .np-date { font-size: 15px; }
  .np-title { font-size: 38px; }
  .np-sub { font-size: 17px; }
  .np-banner { height: auto; }
  .np-banner img { position: static; height: auto; }

  .db { padding: 120px 40px 80px; }
  .db-mast__title { font-size: 48px; line-height: 1.12; }
  .db-title { font-size: 28px; line-height: 1.2; }
}

/* ==========================================================================
   Phone (< 810px)
   ========================================================================== */
@media (max-width: 809.98px) {
  .cms-hide-phone { display: none; }
  .cms-show-phone { display: inline; }
  .cms-head__title { font-size: 38px; }
  .cms-head__sub { font-size: 16px; }
  .cms-list { padding: 60px 12px; }
  .cms-list--news { padding-bottom: 80px; }
  .cms-card, .cms-card--bulletin { flex-direction: column; padding: 20px; }
  .cms-card__img, .cms-card--bulletin .cms-card__img { width: 100%; min-height: 230px; }
  .cms-card--news .cms-card__img { min-height: 0; }
  .cms-card__img img { position: static; display: block; height: auto; min-height: inherit; }
  .cms-card__text { width: 100%; flex: none; justify-content: center; gap: 12px; }
  .cms-card--news .cms-card__title, .cms-card--bulletin .cms-card__title { font-size: 18px; letter-spacing: -0.36px; }
  .cms-tag { display: none; }

  .cms-rich p, .cms-rich li, .cms-rich th, .cms-rich td, .cms-rich blockquote p { font-size: 15.04px; }
  .bp-cta__text p { font-size: 16px; }
  .cms-rich h2 { font-size: 24px; line-height: 1.25; }
  .cms-rich h3 { font-size: 20px; line-height: 1.3; }
  .cms-rich h4 { line-height: 1.35; }
  .cms-rich h3.cms-1iazjjy { font-size: 28px; }
  .cms-rich--sources p, .cms-rich--sources li { font-size: 14px; }

  .bp-hero { gap: 0; padding: 0; }
  .bp-back { padding: 12px; }
  .bp-cover { border-radius: 0; max-width: none; }
  .bp-cover__inner { height: auto; aspect-ratio: 1.18902; padding: 20px 25px 0; }
  .bp-intro--over { display: none; }
  .bp-intro--below { display: flex; max-width: none; gap: 20px; padding: 30px 25px 0; }
  .bp-intro__title { font-size: 36px; line-height: 1.15; color: var(--cms-body); }
  .bp-intro--below .bp-intro__sub { max-width: none; color: var(--slate); }
  .bp-intro--below .bp-intro__meta { max-width: none; gap: 14px; }
  .bp-intro--below .bp-intro__date { color: #0d1f21; }
  .bp-details { padding: 60px 25px; }

  .np { height: 10420px; padding: 80px 16px 40px; } /* the live site fixes this height on phones; 80px top clears the fixed header */
  .np-date { font-size: 14px; }
  .np-title { font-size: 30px; letter-spacing: -0.09em; }
  .np-sub { font-size: 16px; }

  .db { max-width: 100%; padding: 120px 20px 80px; }
  .db-back { padding-bottom: 20px; }
  .db-mast { padding: 28px 22px; }
  .db-mast__details { flex-direction: column; align-items: flex-start; gap: 6px; }
  .db-mast__title { font-size: 36px; line-height: 1.15; }
  .db-opening, .db-slot { padding: 28px 0; }
  .db-title { font-size: 24px; line-height: 1.25; }
  .db-insight, .db-question { padding: 28px 22px; }
  .db-signoff { padding: 28px 22px; }
}