/* =========================================================================
 * NewBostonPost — Ghost theme stylesheet
 * Premium subscriber-first newspaper. Built on warm-paper / navy / brick-red /
 * gold palette with Playfair Display + Source Serif 4 + Inter typography.
 * ========================================================================= */

/* ---------------- Tokens ---------------- */
:root {
  --nbp-ink:        #0B1B2B;
  --nbp-ink-2:      #14283C;
  --nbp-paper:      #FBF9F4;
  --nbp-paper-pure: #FFFFFF;
  --nbp-rule:       #E2DED4;
  --nbp-rule-soft:  #ECE7DC;
  --nbp-text:       #16212C;
  --nbp-text-mute:  #5A6776;
  --nbp-text-soft:  #7C8896;
  --nbp-red:        #B0241F;
  --nbp-red-deep:   #8A1B17;
  --nbp-blue:       #1B4F8C;
  --nbp-gold:       #B0883B;
  --nbp-gold-soft:  #F4ECD8;

  --nbp-serif:    "Playfair Display", Georgia, "Times New Roman", serif;
  --nbp-serif-d:  "Playfair Display", Georgia, "Times New Roman", serif;
  --nbp-serif-r:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --nbp-sans:     "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --nbp-mono:     "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --nbp-w:        1440px;

  /* Ghost Portal CSS variable overrides — read by portal.min.js inside the
     Portal iframe, so the modal's primary buttons / links honor brand red.
     The full modal markup lives in a sandboxed iframe and cannot be themed
     beyond these tokens; for the full Portal look we render our own
     .nbp-portal__* cards on theme-owned routes (e.g. /signup/). */
  --ghost-accent-color: var(--nbp-red);
  --gh-accent-color:    var(--nbp-red);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

.nbp-root, body {
  background: var(--nbp-paper) !important;
  color: var(--nbp-text) !important;
  font-family: var(--nbp-serif-r) !important;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "onum";
}

.nbp-headline { font-family: var(--nbp-serif) !important; letter-spacing: -0.01em; }
.nbp-ui       { font-family: var(--nbp-sans) !important; }

a { color: var(--nbp-blue) !important; text-decoration: none; }
a:hover { color: var(--nbp-red) !important; }

/* Prevent stray horizontal scroll on phones if a single element ever
   over-extends (long URLs in pasted prose, oversized embeds, etc.). */
/* v1.0.211 — Use `overflow-x: clip` instead of `overflow-x: hidden` so
   `position: sticky` works for descendants. `overflow: hidden` on any
   axis turns the element into a scroll container, which silently kills
   every sticky element underneath (article rail, page rail, etc.) —
   the rail just scrolled away with the page instead of staying in
   view. `clip` clips horizontal overflow without creating a scroll
   container, so sticky descendants resume working. Fallback to hidden
   for very old browsers (pre-2022) that don't understand clip. */
html, body { overflow-x: hidden; overflow-x: clip; }

.nbp-container { max-width: var(--nbp-w); margin: 0 auto; padding: 0 24px; }

img { max-width: 100%; height: auto; display: block; }
/* Force common embeds to scale to their column. */
iframe, video, embed, object { max-width: 100%; }
/* Long unbroken strings (URLs, email addresses) wrap inside prose blocks
   instead of pushing the column wider than the viewport. */
.nbp-prose, .nbp-card__headline, .nbp-card__dek { overflow-wrap: anywhere; word-break: break-word; }

.nbp-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--nbp-ink) !important; color: #fff !important; padding: 8px 12px;
}
.nbp-skip:focus { left: 8px; top: 8px; z-index: 1000; }

/* Visually-hidden helper (used by form labels for screen readers). */
.nbp-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------------- Eyebrow ---------------- */
.nbp-eyebrow {
  font-family: var(--nbp-sans) !important;
  font-weight: 700 !important;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nbp-red) !important;
  display: inline-block;
}
.nbp-eyebrow--blue   { color: var(--nbp-blue) !important; }
.nbp-eyebrow--gold   { color: var(--nbp-gold) !important; }
.nbp-eyebrow--ink    { color: var(--nbp-ink) !important; }
.nbp-eyebrow--mute   { color: var(--nbp-text-mute) !important; }
.nbp-eyebrow--breaking { color: #fff !important; background: var(--nbp-red) !important; padding: 2px 6px; }

/* ---------------- Buttons ---------------- */
.nbp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--nbp-sans) !important; font-weight: 600 !important;
  padding: 12px 22px; border-radius: 2px;
  font-size: 14px; letter-spacing: 0.02em;
  border: 0; cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.nbp-btn--lg     { padding: 16px 28px; font-size: 15px; }
.nbp-btn--block  { display: flex; width: 100%; }
.nbp-btn--primary { background: var(--nbp-ink) !important; color: #fff !important; }
.nbp-btn--primary:hover { background: var(--nbp-ink-2) !important; color: #fff !important; }
.nbp-btn--red     { background: var(--nbp-red) !important; color: #fff !important; }
.nbp-btn--red:hover { background: var(--nbp-red-deep) !important; color: #fff !important; }
.nbp-btn--gold    { background: var(--nbp-gold) !important; color: #fff !important; }
.nbp-btn--ghost   { background: transparent !important; color: var(--nbp-ink) !important; border: 1px solid var(--nbp-ink); }
.nbp-btn--ghost:hover { background: var(--nbp-ink) !important; color: #fff !important; }
.nbp-btn--ghost-light { background: transparent !important; color: #fff !important; border: 1px solid #fff; }
.nbp-btn--ghost-light:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }

/* ---------------- Header ---------------- */
.nbp-header { font-family: var(--nbp-sans) !important; }
.nbp-utility { background: var(--nbp-ink) !important; color: #fff !important; }
.nbp-utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; max-width: var(--nbp-w); margin: 0 auto; padding: 0 24px;
  font-size: 12px; letter-spacing: .01em; gap: 12px;
  white-space: nowrap;
}
.nbp-utility__left { display: flex; gap: 18px; opacity: 0.92; min-width: 0; overflow: hidden; }
.nbp-utility__sep { opacity: 0.4; }
.nbp-utility__right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.nbp-utility__right a { color: #fff !important; opacity: 0.92; }
.nbp-utility__right a:hover { opacity: 1; }
.nbp-utility__cta {
  background: var(--nbp-red) !important; padding: 6px 12px; font-weight: 600 !important;
  border-radius: 2px;
}
.nbp-utility__cta:hover { background: var(--nbp-red-deep) !important; color: #fff !important; }

.nbp-masthead { background: var(--nbp-paper) !important; border-bottom: 1px solid var(--nbp-rule); }
.nbp-masthead__grid {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: var(--nbp-w); margin: 0 auto; padding: 28px 24px 20px; gap: 16px;
}
.nbp-masthead__motto {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600 !important; color: var(--nbp-text-mute) !important;
}
.nbp-masthead__center { text-align: center; }
.nbp-masthead__title {
  font-family: var(--nbp-serif) !important; color: var(--nbp-ink) !important;
  font-weight: 900 !important; font-size: 44px; letter-spacing: -0.02em; line-height: 1;
}
.nbp-masthead__title:hover { color: var(--nbp-ink) !important; }
.nbp-masthead__logo { max-height: 60px; margin: 0 auto; }
/* Bundled NewBostonPost logo (Minuteman + wordmark + "Hub of Conservative
   Thought" banner). It's a horizontal composite at ~2.37:1 aspect, so it
   needs more vertical room than a flat wordmark. Tagline + description
   rules below are no-ops because the bundled image bakes them in. */
.nbp-masthead__logo--bundled { max-height: 110px; width: auto; height: auto; max-width: min(420px, 90vw); display: block; }
.nbp-masthead__logo--bundled + .nbp-masthead__description { display: none; }
/* Small italicised tagline rendered beneath the wordmark when no logo
   image is uploaded. Matches the live site's "The hub of conservative
   thought" line that sits under the bridge logo. When the editor uploads
   a logo image with the tagline baked in, this rule is bypassed. */
.nbp-masthead__description {
  display: block; margin-top: 6px;
  font-family: var(--nbp-serif) !important;
  font-style: italic; font-weight: 400 !important;
  font-size: 13px; letter-spacing: 0.01em;
  color: var(--nbp-text-soft) !important;
}
.nbp-masthead__tagline {
  margin-top: 8px; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--nbp-text-mute) !important;
}
.nbp-masthead__actions {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
}
/* Visible labeled search bar in the masthead.
   This replaces an icon-only magnifier — search is a top-three task for
   the 35+ reading audience and needs a clearly labeled affordance. */
.nbp-search-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff !important; border: 1px solid var(--nbp-rule);
  border-radius: 3px; padding: 0 10px 0 12px; height: 40px;
  width: 280px;
  color: var(--nbp-ink) !important; cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.nbp-search-trigger:hover,
.nbp-search-trigger:focus-visible {
  border-color: var(--nbp-ink) !important;
  box-shadow: 0 0 0 1px var(--nbp-ink);
  outline: 0;
}
.nbp-search-trigger svg { flex-shrink: 0; opacity: 0.7; }
.nbp-search-trigger__placeholder {
  flex: 1;
  font-size: 14px;
  color: var(--nbp-text-mute) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1199px) { .nbp-search-trigger { width: 220px; } }
@media (max-width: 1023px) { .nbp-search-trigger { display: none; } }

/* Icon buttons can carry a visible text label (Search, Account) for clarity. */
.nbp-iconbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  background: transparent !important; border: 1px solid var(--nbp-rule);
  border-radius: 3px; color: var(--nbp-ink) !important; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600 !important;
}
.nbp-iconbtn:hover { background: #fff !important; border-color: var(--nbp-ink) !important; }
.nbp-iconbtn svg { flex-shrink: 0; }
.nbp-iconbtn--mobile-search { display: none; }
@media (max-width: 1023px) { .nbp-iconbtn--mobile-search { display: inline-flex; } }
@media (max-width: 640px) { .nbp-iconbtn--account span { display: none; } }

.nbp-nav { border-top: 1px solid var(--nbp-rule); background: var(--nbp-paper) !important; }
.nbp-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--nbp-w); margin: 0 auto; padding: 0 24px; height: 48px;
  font-size: 14px; gap: 16px;
}
/* The nav list is horizontally scrollable on narrow viewports so a long list
   of beats (News, Politics, Gender Identity, Faith, Commentary, Culture,
   Sports …) never wraps the masthead height. We hide the scrollbar but keep
   touch + wheel scrolling, and use scroll-snap so each beat feels intentional
   when the reader swipes through them. */
.nbp-nav__list {
  display: flex; gap: 28px; list-style: none; padding: 0; margin: 0;
  align-items: center; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.nbp-nav__list::-webkit-scrollbar { display: none; }
.nbp-nav__list > li { scroll-snap-align: start; flex: 0 0 auto; }
.nbp-nav__link {
  font-weight: 600 !important; color: var(--nbp-ink) !important; padding: 12px 0;
  border-bottom: 2px solid transparent; letter-spacing: 0.02em;
  white-space: nowrap;
}
.nbp-nav__link:hover { color: var(--nbp-red) !important; }
.nbp-nav__link.is-active { color: var(--nbp-red) !important; border-bottom-color: var(--nbp-red); }
.nbp-nav__link--gold { color: var(--nbp-gold) !important; display: inline-flex; align-items: center; gap: 5px; }
.nbp-nav__all {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  background: transparent !important; border: 1px solid var(--nbp-rule); border-radius: 3px;
  color: var(--nbp-ink) !important; font: inherit; font-size: 13px; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.nbp-nav__all:hover { border-color: var(--nbp-ink) !important; }
.nbp-nav__all[aria-expanded="true"] {
  background: var(--nbp-ink) !important; color: #fff !important; border-color: var(--nbp-ink) !important;
}
.nbp-nav__chev {
  display: inline-block; transition: transform 150ms ease;
  font-size: 10px; line-height: 1;
}
.nbp-nav__all[aria-expanded="true"] .nbp-nav__chev { transform: rotate(180deg); }

/* ---------------- Mega menu (All Sections panel) ---------------- */
.nbp-mega {
  background: var(--nbp-paper) !important;
  border-top: 1px solid var(--nbp-rule);
  border-bottom: 1px solid var(--nbp-rule);
  box-shadow: 0 24px 40px -24px rgba(11, 27, 43, 0.25);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.nbp-mega.is-open { opacity: 1; transform: translateY(0); }
.nbp-mega__inner { max-width: var(--nbp-w); margin: 0 auto; padding: 40px 24px; }
.nbp-mega__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.nbp-mega__close {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent !important; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--nbp-text-mute) !important;
}
.nbp-mega__close:hover { color: var(--nbp-ink) !important; }
.nbp-mega__close span { font-size: 18px; line-height: 1; }
.nbp-mega__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px;
}
.nbp-mega__col-head {
  font-family: var(--nbp-serif) !important; font-size: 15px; font-weight: 700 !important;
  color: var(--nbp-red) !important;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding-bottom: 8px; margin: 0 0 12px;
  border-bottom: 2px solid var(--nbp-red);
}
.nbp-mega__col ul { list-style: none; margin: 0; padding: 0; }
.nbp-mega__col li { margin: 10px 0; }
.nbp-mega__col a {
  font-family: var(--nbp-serif) !important;
  font-size: 16px; font-weight: 500 !important; color: var(--nbp-ink) !important;
  text-decoration: none; line-height: 1.35;
}
.nbp-mega__col a:hover { color: var(--nbp-red) !important; }
.nbp-mega__sub {
  margin-top: 8px !important;
  margin-left: 12px; padding-left: 12px;
  border-left: 1px solid var(--nbp-rule);
}
.nbp-mega__sub li { margin: 6px 0; }
.nbp-mega__sub a {
  font-family: var(--nbp-sans) !important;
  font-size: 13.5px; font-weight: 400 !important; color: var(--nbp-text-mute) !important;
}
.nbp-mega__utility {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--nbp-rule);
  font-size: 13px; color: var(--nbp-text-mute) !important;
}
.nbp-mega__utility a { color: var(--nbp-text-mute) !important; text-decoration: none; }
.nbp-mega__utility a:hover { color: var(--nbp-red) !important; }
.nbp-mega__utility-label {
  font-weight: 700 !important; text-transform: uppercase; font-size: 11px;
  letter-spacing: 0.18em; color: var(--nbp-ink) !important;
}

/* ---------------- Search overlay ---------------- */
.nbp-search-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(11, 27, 43, 0.55) !important;
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 24px;
  opacity: 0; transition: opacity 180ms ease;
  pointer-events: none;
}
.nbp-search-overlay.is-open { opacity: 1; pointer-events: auto; }
/* Critical: when the [hidden] attribute is present, force display:none so the
   overlay does not sit invisible over the page intercepting clicks. The class
   rule above sets display:flex which would otherwise override the user-agent
   [hidden] {display:none} rule. */
.nbp-search-overlay[hidden],
.nbp-mega[hidden] { display: none !important; }
.nbp-search-overlay__sheet {
  background: var(--nbp-paper) !important; width: 100%; max-width: 720px;
  border-radius: 6px;
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.45);
  padding: 28px 28px 22px;
  transform: translateY(-8px);
  transition: transform 180ms ease;
}
.nbp-search-overlay.is-open .nbp-search-overlay__sheet { transform: translateY(0); }
.nbp-search-overlay__label {
  display: block; font-family: var(--nbp-sans) !important;
  font-size: 11px; font-weight: 700 !important; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--nbp-text-mute) !important;
  margin-bottom: 12px;
}
.nbp-search-overlay__inputrow {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--nbp-ink); border-radius: 4px;
  padding: 0 14px; height: 56px;
  background: #fff !important;
}
.nbp-search-overlay__inputrow svg { color: var(--nbp-ink) !important; flex-shrink: 0; }
.nbp-search-overlay__inputrow input {
  flex: 1; background: transparent !important; border: 0; outline: 0;
  font-family: var(--nbp-serif) !important;
  font-size: 22px; color: var(--nbp-ink) !important;
  padding: 0;
}
.nbp-search-overlay__inputrow input::placeholder { color: var(--nbp-text-mute) !important; }
.nbp-search-overlay__close {
  background: transparent !important; border: 0; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--nbp-text-mute) !important;
  padding: 0 4px;
}
.nbp-search-overlay__close:hover { color: var(--nbp-ink) !important; }
.nbp-search-overlay__hints {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--nbp-rule);
}
.nbp-search-overlay__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 8px 0 0; padding: 0;
}
.nbp-search-overlay__chips a {
  display: inline-flex; align-items: center;
  background: #fff !important; border: 1px solid var(--nbp-rule); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--nbp-ink) !important;
  text-decoration: none;
}
.nbp-search-overlay__chips a:hover {
  border-color: var(--nbp-ink) !important; color: var(--nbp-red) !important;
}
.nbp-search-overlay__quick ul {
  list-style: none; margin: 8px 0 0; padding: 0;
}
.nbp-search-overlay__quick li { margin: 6px 0; }
.nbp-search-overlay__quick a {
  font-size: 13.5px; color: var(--nbp-ink) !important; text-decoration: none;
}
.nbp-search-overlay__quick a:hover { color: var(--nbp-red) !important; }
.nbp-search-overlay__foot {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--nbp-rule);
  font-size: 12px; color: var(--nbp-text-mute) !important;
}
.nbp-search-overlay__foot kbd {
  display: inline-block;
  background: #fff !important; border: 1px solid var(--nbp-rule);
  border-radius: 3px; padding: 1px 6px;
  font-family: var(--nbp-sans) !important; font-size: 11px; font-weight: 600 !important;
}
.nbp-btn--ink {
  background: var(--nbp-ink) !important; color: #fff !important; border: 1px solid var(--nbp-ink);
  padding: 10px 18px; font-weight: 700 !important; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
}
.nbp-btn--ink:hover { background: #000 !important; }

body.is-scroll-locked { overflow: hidden; }

/* ---------------- Footer ---------------- */
.nbp-footer { background: var(--nbp-ink) !important; color: #fff !important; font-family: var(--nbp-sans) !important; margin-top: 64px; }
.nbp-footer a { color: rgba(255,255,255,0.85) !important; }
.nbp-footer a:hover { color: var(--nbp-gold) !important; }
.nbp-footer__convert { border-bottom: 1px solid rgba(255,255,255,0.1); }
.nbp-footer__convert-grid {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px; align-items: center;
  max-width: var(--nbp-w); margin: 0 auto; padding: 40px 24px;
}
.nbp-footer__headline {
  font-size: 26px; font-weight: 700 !important; line-height: 1.15; margin: 8px 0; color: #fff !important;
  white-space: nowrap;
}
.nbp-footer__lede { color: rgba(255,255,255,0.7) !important; font-size: 14px; max-width: 32em; }
.nbp-footer__convert-cta { display: flex; gap: 12px; justify-content: flex-end; }
.nbp-footer__main {
  display: grid;
  grid-template-columns: 2fr repeat(6, 1fr);
  gap: 32px 24px;
  padding: 48px 24px;
}
.nbp-footer__brand .nbp-footer__brandtitle { font-size: 22px; font-weight: 700 !important; color: #fff !important; }
.nbp-footer__brandtext { color: rgba(255,255,255,0.7) !important; font-size: 13px; max-width: 28em; margin: 8px 0 16px; line-height: 1.5; }
.nbp-footer__addr { display: flex; gap: 8px; align-items: center; color: rgba(255,255,255,0.7) !important; font-size: 12.5px; margin: 4px 0; }
.nbp-footer__social { margin-top: 14px; display: flex; gap: 14px; font-size: 12px; }
.nbp-footer__col-head {
  font-family: var(--nbp-sans) !important;
  font-size: 11px; font-weight: 700 !important; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--nbp-gold) !important;
  margin: 0 0 12px;
}
.nbp-footer__col h3 { color: var(--nbp-gold) !important; margin-bottom: 12px; }
.nbp-footer__col ul { list-style: none; padding: 0; margin: 0; }
.nbp-footer__col li { margin: 8px 0; font-size: 13.5px; }
.nbp-footer__colophon { border-top: 1px solid rgba(255,255,255,0.1); }
.nbp-footer__colophon-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: var(--nbp-w); margin: 0 auto; padding: 18px 24px;
  font-size: 12px; color: rgba(255,255,255,0.55) !important;
}
.nbp-footer__legal { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0; }

/* ---------------- Cards ---------------- */
.nbp-card { display: grid; gap: 12px; }
.nbp-card__media { background: var(--nbp-rule-soft) !important; display: block; overflow: hidden; }
.nbp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.nbp-card__media:hover img { transform: scale(1.02); }
.nbp-card__labels { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nbp-card__headline { font-family: var(--nbp-serif) !important; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 4px 0; }
.nbp-card__headline a { color: inherit !important; }
.nbp-card__headline a:hover { color: var(--nbp-red) !important; }
.nbp-card__dek { color: var(--nbp-text-mute) !important; font-size: 14px; line-height: 1.5; margin: 0; }
.nbp-card--xl .nbp-card__headline { font-size: 44px; line-height: 1.05; }
.nbp-card--l  .nbp-card__headline { font-size: 28px; line-height: 1.1; }
.nbp-card--m  .nbp-card__headline { font-size: 20px; line-height: 1.18; }
.nbp-card--s  .nbp-card__headline { font-size: 17px; line-height: 1.22; }
.nbp-card--xs .nbp-card__headline { font-size: 15px; line-height: 1.25; }
.nbp-card--xl .nbp-card__media { aspect-ratio: 16 / 9; }

/* ---------------- Homepage hero slider ----------------
   Wraps the lead .nbp-card--xl in a fading carousel. All slides are
   stacked into a single grid cell so the container's height equals
   the tallest slide and the active slide overlays the others via
   opacity + visibility. The no-JS fallback shows only the first
   slide (others are visibility:hidden but still in the document for
   crawlers). */
.nbp-fp__hero-slider { position: relative; }
.nbp-fp__hero-slides { display: grid; grid-template-columns: 1fr; }
.nbp-fp__hero-slide {
  grid-column: 1; grid-row: 1;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease;
  pointer-events: none;
}
.nbp-fp__hero-slide.is-active {
  opacity: 1; visibility: visible;
  pointer-events: auto;
  position: relative; z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .nbp-fp__hero-slide { transition: none; }
}

/* Prev/Next arrows positioned over the hero image (16:9 band at the
   top of the .nbp-card--xl). v1.0.253 — chromeless classy arrows: no
   pill, no border, no background. Just a large SVG chevron in crisp
   white with a soft drop-shadow so it stays legible over light AND
   dark photos. Hover slides the arrow outward by 4px and shifts to
   the brand red; gold focus ring for keyboard users. */
.nbp-fp__hero-arrow {
  position: absolute;
  top: calc((100vw * 9 / 16) / 2); /* mobile fallback */
  top: 28%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto;
  padding: 12px;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45))
          drop-shadow(0 2px 6px rgba(0,0,0,0.35));
  transition: color .2s ease, transform .25s ease, filter .2s ease;
}
.nbp-fp__hero-arrow-icon {
  display: block;
  width: 36px; height: 36px;
}
.nbp-fp__hero-arrow:hover {
  color: var(--nbp-red);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55))
          drop-shadow(0 3px 10px rgba(0,0,0,0.45));
}
.nbp-fp__hero-arrow--prev:hover { transform: translate(-4px, -50%); }
.nbp-fp__hero-arrow--next:hover { transform: translate( 4px, -50%); }
.nbp-fp__hero-arrow:active { transform: translateY(-50%) scale(0.95); }
.nbp-fp__hero-arrow:focus-visible {
  outline: 2px solid var(--nbp-gold);
  outline-offset: 4px;
  border-radius: 2px;
}
.nbp-fp__hero-arrow--prev { left: 8px; }
.nbp-fp__hero-arrow--next { right: 8px; }
.nbp-fp__hero-arrow[hidden] { display: none; }

/* Dot tablist below the active slide. */
.nbp-fp__hero-dots {
  display: flex; gap: 8px; justify-content: center;
  margin: 14px 0 4px;
}
.nbp-fp__hero-dots[hidden] { display: none; }
.nbp-fp__hero-dot {
  width: 9px; height: 9px;
  padding: 0; border: 0;
  border-radius: 999px;
  background: rgba(11, 27, 43, 0.22);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.nbp-fp__hero-dot:hover { background: rgba(11, 27, 43, 0.45); }
.nbp-fp__hero-dot.is-active {
  background: var(--nbp-red);
  transform: scale(1.2);
}
.nbp-fp__hero-dot:focus-visible {
  outline: 2px solid var(--nbp-gold);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .nbp-fp__hero-arrow { padding: 10px; }
  .nbp-fp__hero-arrow .nbp-fp__hero-arrow-icon { width: 26px; height: 26px; }
  .nbp-fp__hero-arrow--prev { left: 2px; }
  .nbp-fp__hero-arrow--next { right: 2px; }
}
.nbp-card--l  .nbp-card__media { aspect-ratio: 4 / 3; }
.nbp-card--m  .nbp-card__media,
.nbp-card--s  .nbp-card__media { aspect-ratio: 3 / 2; }

.nbp-card--side {
  grid-template-columns: 1fr 220px; align-items: start; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--nbp-rule);
}
.nbp-card--side .nbp-card__media { aspect-ratio: 4 / 3; order: 2; }
.nbp-card--side > .nbp-card__body { order: 1; }
.nbp-card--side:last-child { border-bottom: 0; }

/* Story meta */
.nbp-meta { font-size: 12.5px; color: var(--nbp-text-soft) !important; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nbp-meta__sep { opacity: 0.5; }
.nbp-meta__byline { color: var(--nbp-text-mute) !important; }
.nbp-meta__byline a { color: var(--nbp-ink) !important; font-weight: 600 !important; }

/* ---------------- Lead ---------------- */
/* Optional publication cover band rendered above the lead when both
   @custom.show_publication_cover_on_home is true AND @site.cover_image is set. */
.nbp-home__cover { width: 100%; max-height: 420px; overflow: hidden; }
.nbp-home__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nbp-home__lead { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding-top: 28px; padding-bottom: 28px; }
.nbp-lead { display: grid; gap: 18px; }
.nbp-lead__media { display: block; overflow: hidden; background: var(--nbp-rule-soft) !important; aspect-ratio: 16 / 9; }
.nbp-lead__media img { width: 100%; height: 100%; object-fit: cover; }
.nbp-lead__caption { font-family: var(--nbp-sans) !important; font-size: 12px; color: var(--nbp-text-mute) !important; padding: 8px 0; }
.nbp-lead__head { font-size: 56px; line-height: 1.04; font-weight: 800 !important; margin: 4px 0; color: var(--nbp-ink) !important; }
.nbp-lead__head a { color: inherit !important; }
.nbp-lead__dek { font-size: 19px; color: var(--nbp-text-mute) !important; line-height: 1.5; margin: 0; }

/* Top stories list */
.nbp-toplist { list-style: none; padding: 0; margin: 0; }
.nbp-toplist__item { padding: 14px 0; border-bottom: 1px solid var(--nbp-rule); }
.nbp-toplist__item:last-child { border-bottom: 0; }

/* ---------------- Section header ---------------- */
.nbp-sectionhead {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid var(--nbp-ink); padding-bottom: 8px; margin: 36px 0 20px;
}
.nbp-sectionhead__label { font-size: 22px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0; }
.nbp-sectionhead__link {
  font-size: 12px; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--nbp-red) !important; display: inline-flex; align-items: center; gap: 4px;
}

/* ---------------- Home sections ---------------- */
.nbp-home__section { padding: 16px 0; }
.nbp-home__section-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px;
}
.nbp-home__section-grid > .nbp-card--m { border-left: 1px solid var(--nbp-rule); padding-left: 20px; }
.nbp-home__section-grid > .nbp-card:nth-child(2) { border-left: 0; padding-left: 0; }

.nbp-home__premium {
  background: linear-gradient(180deg, #fff 0%, var(--nbp-gold-soft) 100%) !important;
  border: 1px solid #E8DDC2; padding: 28px;
  margin-top: 36px; margin-bottom: 36px;
}
.nbp-home__premium-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}

.nbp-home__latest {
  display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding: 24px 0;
}
.nbp-home__latest-feed > .nbp-card { padding-block: 18px; }

/* Opinion strip */
/* ----- Spotlight: Interviews — premium ink/gold band ----- */
.nbp-spotlight {
  background: var(--nbp-ink) !important;
  color: #fff !important;
  margin: 64px 0 0;
  padding: 64px 0;
}
.nbp-spotlight .nbp-container { max-width: 1440px; }
.nbp-spotlight__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 20px;
  margin-bottom: 40px;
}
.nbp-spotlight__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nbp-gold) !important;
}
.nbp-spotlight__title {
  font-size: 40px;
  font-weight: 900 !important;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 8px 0 0;
}
.nbp-spotlight__lede {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 15px;
  line-height: 1.65;
  margin: 8px 0 0;
  max-width: 560px;
}
.nbp-spotlight__see-all {
  font-family: var(--nbp-ui) !important;
  font-size: 12px;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nbp-gold) !important;
  white-space: nowrap;
  text-decoration: none;
}
.nbp-spotlight__see-all:hover { color: #fff !important; }
.nbp-spotlight__see-all--mobile { display: none; }

.nbp-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.nbp-spotlight__card { display: flex; flex-direction: column; }
.nbp-spotlight__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
  margin-bottom: 24px;
}
.nbp-spotlight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 500ms ease;
}
.nbp-spotlight__card:hover .nbp-spotlight__media img { filter: grayscale(0); }
.nbp-spotlight__role {
  font-family: var(--nbp-ui) !important;
  font-size: 10.5px;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nbp-gold) !important;
  margin-bottom: 12px;
}
.nbp-spotlight__quote {
  position: relative;
  font-family: var(--nbp-display) !important;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500 !important;
  font-style: italic;
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0;
  padding-left: 0;
  border: 0;
}
.nbp-spotlight__quote-mark {
  display: block;
  font-family: var(--nbp-display) !important;
  font-size: 48px;
  line-height: 0.6;
  color: var(--nbp-gold) !important;
  margin-bottom: 4px;
}
.nbp-spotlight__attrib {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.nbp-spotlight__subject {
  font-size: 17px;
  font-weight: 700 !important;
  margin: 0;
  color: #fff !important;
}
.nbp-spotlight__subject a { color: inherit !important; text-decoration: none; }
.nbp-spotlight__subject a:hover { color: var(--nbp-gold) !important; }
.nbp-spotlight__topic {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px;
  line-height: 1.4;
  margin: 4px 0 0;
}
.nbp-spotlight__interviewer {
  font-family: var(--nbp-ui) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.62) !important;
  margin-top: 12px;
}
.nbp-spotlight__interviewer a {
  color: var(--nbp-gold) !important;
  text-decoration: none;
}
.nbp-spotlight__interviewer a:hover { color: #fff !important; }

.nbp-home__opinion { padding: 16px 0; }
.nbp-home__opinion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.nbp-column { display: grid; grid-template-columns: 56px 1fr; gap: 14px; }
.nbp-column__avatar {
  width: 56px; height: 56px; border-radius: 999px; overflow: hidden;
  background: var(--nbp-rule-soft) !important; display: grid; place-items: center;
  font-family: var(--nbp-sans) !important; font-weight: 700 !important; color: var(--nbp-ink) !important;
  flex-shrink: 0;
}
.nbp-column__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Initial-only fallback: hide the full name, reveal only the first letter. */
.nbp-column__avatar > span {
  display: block; width: 100%; height: 100%;
  line-height: 56px; text-align: center;
  font-size: 0; color: var(--nbp-ink) !important;
  text-transform: uppercase; letter-spacing: 0;
  overflow: hidden; white-space: nowrap;
}
.nbp-column__avatar > span::first-letter { font-size: 22px; }
.nbp-column__head { font-size: 16px; line-height: 1.25; margin: 4px 0 0; }

/* Trending list */
.nbp-trending { list-style: none; padding: 0; margin: 0; }
.nbp-trending li {
  display: grid; grid-template-columns: 48px 1fr auto auto;
  align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--nbp-rule);
}
.nbp-trending__num {
  font-family: var(--nbp-serif) !important; font-size: 32px; color: var(--nbp-red) !important;
  font-weight: 800 !important; line-height: 1; opacity: 0.8;
}
.nbp-trending__head { font-size: 18px; font-weight: 600 !important; color: var(--nbp-ink) !important; }
.nbp-trending__sec { font-size: 12px; color: var(--nbp-text-mute) !important; text-transform: uppercase; letter-spacing: 0.1em; }

/* ---------------- Trust strip ----------------
   Full-bleed white band: the .nbp-trust section escapes any constraining
   parent container (e.g. .nbp-fp's max-width 1440px on the homepage) by
   pushing its own width out to the full viewport with the classic
   `width: 100vw; margin-left: calc(50% - 50vw)` trick. The inner
   .nbp-container inside the partial keeps the four stat columns
   centered and capped at 1440px so the typography doesn't sprawl on
   ultra-wide displays. Vertical scrollbar gutter is accounted for by
   browsers in the 100vw calc on modern viewports — if a horizontal
   scroll appears on rare overflow cases, swap 100vw for 100% and apply
   the bleed at the parent container instead. */
.nbp-trust {
  background: #fff !important;
  border-block: 1px solid var(--nbp-rule);
  margin: 24px 0;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
}
.nbp-trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding: 24px; text-align: center;
}
.nbp-trust__num { font-size: 32px; font-weight: 700 !important; color: var(--nbp-ink) !important; }
.nbp-trust__lab {
  font-family: var(--nbp-sans) !important; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--nbp-text-mute) !important; margin-top: 4px;
}

/* ---------------- Newsletter ---------------- */
.nbp-newsletter { background: var(--nbp-ink) !important; color: #fff !important; padding: 24px; position: relative; overflow: hidden; }
/* v1.0.255 — Liberty Bell photographic watermark on the dark navy
   newsletter card. Real bell photo (transparent PNG) anchored to the
   center-right, rendered very faint via low opacity + a slight blur
   so it reads as a ghosted emblem behind the copy and never competes
   with the CTA. Sized larger than the card so the silhouette feels
   monumental rather than illustrative. */
.nbp-newsletter__watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: auto;
  opacity: 0.07;
  filter: blur(0.5px) grayscale(0.2);
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.nbp-newsletter__inner { position: relative; z-index: 1; }
.nbp-newsletter h3 { font-size: 22px; line-height: 1.18; margin: 8px 0; color: #fff !important; }
.nbp-newsletter p { font-size: 13.5px; color: rgba(255,255,255,0.72) !important; margin: 8px 0 16px; line-height: 1.5; }
.nbp-newsletter__form { display: flex; flex-direction: column; gap: 8px; font-family: var(--nbp-sans) !important; }
.nbp-newsletter__form input {
  height: 44px; padding: 0 12px; background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2); color: #fff !important; font-size: 14px;
  border-radius: 2px;
}
.nbp-newsletter__form input::placeholder { color: rgba(255,255,255,0.5) !important; }
.nbp-newsletter__fine { font-size: 11px; color: rgba(255,255,255,0.5) !important; margin-top: 8px; }

.nbp-newsletter--inline {
  background: var(--nbp-paper) !important; color: var(--nbp-ink) !important;
  border: 1px solid var(--nbp-rule);
  text-align: center; padding: 32px 24px; margin: 36px 0;
}
.nbp-newsletter--inline h3 { color: var(--nbp-ink) !important; font-size: 26px; }
.nbp-newsletter--inline p { color: var(--nbp-text-mute) !important; }
.nbp-newsletter--inline .nbp-newsletter__form {
  flex-direction: row; max-width: 460px; margin: 16px auto 0;
}
.nbp-newsletter--inline .nbp-newsletter__form input {
  background: #fff !important; border: 1px solid rgba(11, 27, 43, 0.22) !important; color: var(--nbp-ink) !important; flex: 1;
}
.nbp-newsletter--inline .nbp-newsletter__form input:focus {
  border-color: var(--nbp-ink) !important; outline: 2px solid var(--nbp-gold); outline-offset: 1px;
}
.nbp-newsletter--inline .nbp-newsletter__fine { color: var(--nbp-text-mute) !important; }

/* ---------------- Paywall / Subscribe CTA ---------------- */
.nbp-paywall--block {
  background: linear-gradient(180deg, #fff, var(--nbp-gold-soft)) !important;
  border: 1px solid #E8DDC2; padding: 28px;
}
.nbp-paywall__head { font-size: 22px; line-height: 1.2; margin: 8px 0; color: var(--nbp-ink) !important; }
.nbp-paywall__list {
  list-style: none; padding: 0; margin: 12px 0; font-family: var(--nbp-sans) !important;
  font-size: 13.5px; color: var(--nbp-text) !important;
}
.nbp-paywall__list li { padding: 4px 0 4px 18px; position: relative; }
.nbp-paywall__list li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 8px; height: 8px; background: var(--nbp-gold) !important; border-radius: 999px;
}
.nbp-paywall__fine { font-family: var(--nbp-sans) !important; font-size: 11.5px; color: var(--nbp-text-mute) !important; margin-top: 8px; text-align: center; }
.nbp-paywall--inline {
  background: linear-gradient(180deg, #fff, var(--nbp-gold-soft)) !important;
  border: 1px solid #E8DDC2; padding: 36px 32px; margin: 36px 0; text-align: center !important;
}
.nbp-paywall--inline .nbp-eyebrow { display: block; text-align: center !important; }
.nbp-paywall--inline .nbp-paywall__head { font-size: 26px; text-align: center !important; max-width: 22em; margin: 8px auto 12px; }
.nbp-paywall--inline .nbp-paywall__body { color: var(--nbp-text-mute) !important; max-width: 38em; margin: 0 auto 20px; text-align: center !important; }
.nbp-paywall__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 4px; }
@media (max-width: 520px) {
  .nbp-paywall--inline { padding: 28px 20px; }
  .nbp-paywall__actions { flex-direction: column; align-items: stretch; }
  .nbp-paywall__actions .nbp-btn { width: 100%; }
}

/* Teaser paragraph shown above the hard paywall when the editor did not
   set a public-preview divider. Styled like a normal lede so the reader
   feels like they were reading the story, not staring at a wall. */
.nbp-prose__teaser {
  font-family: var(--nbp-serif-r) !important;
  font-size: 20px;
  line-height: 1.55;
  color: var(--nbp-text) !important;
  margin: 0 0 24px;
}
.nbp-prose__teaser::after {
  content: "";
  display: block;
  height: 80px;
  margin-top: 8px;
  background: linear-gradient(to bottom, transparent, var(--nbp-paper)) !important;
  pointer-events: none;
}

/* Paid-post preview teaser (v86). When a non-member hits a paid post,
   post.hbs replaces Ghost's flaky truncated {{content}} with a clean
   ~180-word excerpt rendered inside .nbp-prose__teaser-wrap. The wrap
   keeps the teaser at full body width and fades the bottom into the
   page background so the eye lands on the paywall directly below. */
.nbp-prose__teaser-wrap {
  position: relative;
  margin: 0 0 8px;
}
.nbp-prose__teaser {
  font-family: var(--nbp-serif, "Source Serif 4", Georgia, serif) !important;
  font-size: 19px;
  line-height: 1.65;
  color: var(--nbp-ink) !important;
}
.nbp-prose__teaser p {
  margin: 0 0 1em;
}
.nbp-prose__teaser p:last-child { margin-bottom: 0; }
.nbp-prose__teaser-fade {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(251,249,244,0) 0%, var(--nbp-paper, #FBF9F4) 92%);
}

/* Hard paywall (gates members-only post). v85: switched bg from
   gold-soft tan to brand paper cream + hairline rule border with a
   single red top stripe — matches the approved mockup and reads as
   the same paper the article is printed on, not a separate insert. */
.nbp-hardwall {
  position: relative;
  padding: 40px 36px 36px;
  margin: 12px 0 28px;
  background: var(--nbp-paper, #FBF9F4) !important;
  border: 1px solid var(--nbp-rule, #E2DED4);
  border-top: 2px solid var(--nbp-red);
  text-align: center;
}
.nbp-hardwall__head {
  font-family: var(--nbp-serif-d, "Playfair Display", Georgia, serif) !important;
  font-weight: 800 !important;
  font-size: 30px;
  line-height: 1.2;
  margin: 14px auto 14px;
  max-width: 18em;
  color: var(--nbp-ink) !important;
}
.nbp-hardwall__body {
  font-family: var(--nbp-serif, "Source Serif 4", Georgia, serif) !important;
  font-size: 16px;
  line-height: 1.55;
  color: var(--nbp-text-mute) !important;
  max-width: 36em;
  margin: 0 auto 22px;
}
.nbp-hardwall__plans {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  margin: 8px auto 18px;
  max-width: 560px;
}
/* Ghost btn carries a 1px border that the red btn lacks; subtract 1px of
   padding so both buttons occupy identical box heights when paired. */
.nbp-hardwall__plans .nbp-btn--ghost.nbp-btn--lg { padding: 15px 27px; }
/* v1.0.224 — Force the "Already a member? Sign in" outline button's
   label to ink. Some readers were seeing white-on-white because a
   downstream Portal/Ghost stylesheet or aggressive prose link rule was
   overriding the base .nbp-btn--ghost color at higher specificity.
   This ultra-specific selector (3 classes + tag + attribute) wins
   without resorting to a more sweeping rule. */
a.nbp-btn.nbp-btn--ghost[data-portal],
.nbp-hardwall__plans a.nbp-btn--ghost,
.nbp-hardwall__plans a.nbp-btn--ghost:link,
.nbp-hardwall__plans a.nbp-btn--ghost:visited { color: var(--nbp-ink) !important; background: #fff !important; border: 2px solid var(--nbp-ink) !important; }
.nbp-hardwall__plans a.nbp-btn--ghost:hover { color: #fff !important; background: var(--nbp-ink) !important; }
@media (max-width: 520px) {
  .nbp-hardwall__plans { flex-direction: column; }
  .nbp-hardwall__plans .nbp-btn { width: 100%; }
}
.nbp-hardwall__perks {
  list-style: none; padding: 0; margin: 16px auto 0; max-width: 36em;
  font-family: var(--nbp-sans) !important; font-size: 13px; color: var(--nbp-text-mute) !important; text-align: left;
}
.nbp-hardwall__perks li { padding: 4px 0 4px 20px; position: relative; }
.nbp-hardwall__perks li::before { content: "•"; position: absolute; left: 0; color: var(--nbp-gold) !important; font-size: 1.25em; line-height: 1; top: 0.05em; }

/* ---------------- Premium badge ---------------- */
.nbp-badge {
  font-family: var(--nbp-sans) !important; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600 !important; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 2px;
}
.nbp-badge--premium { color: var(--nbp-gold) !important; background: var(--nbp-gold-soft) !important; border: 1px solid #E8DDC2; }
.nbp-badge--gold { color: #fff !important; background: var(--nbp-gold) !important; }

/* ---------------- Tags ---------------- */
.nbp-tag {
  display: inline-block; font-family: var(--nbp-sans) !important; font-size: 12px; font-weight: 500 !important;
  background: var(--nbp-rule-soft) !important; color: var(--nbp-text) !important; padding: 4px 10px; border-radius: 2px;
  margin-right: 6px; margin-top: 6px;
}
.nbp-tag:hover { background: var(--nbp-ink) !important; color: #fff !important; }

/* ---------------- Article (Article Premium mockup) ---------------- */
.nbp-article { background: var(--nbp-paper) !important; }

.nbp-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 64px;
  padding: 48px 24px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
}
.nbp-article__main { max-width: 720px; width: 100%; }

.nbp-article__header { margin: 0 0 32px; padding: 0; max-width: 720px; }
.nbp-article__labels { display: flex; gap: 12px; align-items: center; margin: 0 0 20px; }
.nbp-article__head {
  font-family: var(--nbp-serif) !important;
  font-size: 48px; line-height: 1.1; font-weight: 900 !important;
  letter-spacing: -0.01em;
  color: var(--nbp-ink) !important; margin: 0 0 24px;
}
.nbp-article__dek {
  font-family: var(--nbp-serif-r) !important; font-style: italic;
  font-size: 26px; line-height: 1.3;
  color: var(--nbp-text-mute) !important; margin: 0 0 32px; max-width: 90%;
}

.nbp-article__byline-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 0;
  border-top: 1px solid var(--nbp-rule) !important;
  border-bottom: 1px solid var(--nbp-rule) !important;
  margin-bottom: 32px;
}
.nbp-byline { font-family: var(--nbp-sans) !important; font-size: 13.5px; color: var(--nbp-text-mute) !important; display: flex; flex-direction: column; gap: 4px; }
.nbp-byline__authors a { color: var(--nbp-ink) !important; font-weight: 700 !important; }

.nbp-article__actions { display: flex; gap: 10px; align-items: center; }
.nbp-actionbtn {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--nbp-rule) !important;
  background: transparent !important; color: var(--nbp-ink) !important;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.nbp-actionbtn:hover { background: var(--nbp-rule-soft) !important; border-color: var(--nbp-ink) !important; }
.nbp-actionbtn.is-active { background: var(--nbp-ink) !important; color: var(--nbp-paper) !important; border-color: var(--nbp-ink) !important; }
.nbp-actionbtn.is-active svg { fill: var(--nbp-paper) !important; }
.nbp-actionbtn.is-flashed { background: var(--nbp-gold) !important; color: #fff !important; border-color: var(--nbp-gold) !important; }
.nbp-actionbtn svg { width: 16px; height: 16px; display: block; }

.nbp-article__hero { margin: 0 0 48px; max-width: 720px; }
.nbp-article__hero img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--nbp-rule-soft) !important; display: block;
}
/* v1.0.214 — Hero feature-image caption.
   Was a flex space-between row that ASSUMED editors had appended a
   credit with a specific em-dash convention; when they didn't, the
   layout broke (caption stretched + tiny credit floated awkwardly far
   right). Now: stacked vertical block, italic serif caption, small
   uppercase-tracked muted-ink credit on its own line — matches the
   broadsheet convention every reader recognizes. The credit split is
   done by `main-v172.js` so legacy captions don't need rewriting. */
.nbp-article__hero-caption {
  font-family: "Source Serif 4", Georgia, serif !important;
  font-size: 14px;
  font-style: italic;
  color: var(--nbp-ink-2, #4a5566) !important;
  line-height: 1.5;
  padding: 12px 0 0;
  display: block;
  text-align: left;
}

/* v1.0.186 — Article rail now scroll-follows the reader.
   Was: bare `position: sticky` with no height cap, which silently failed
   whenever the rail (Connect + Membership + Ad + On-the-Record) was taller
   than the viewport — the rail's TOP was already above the top of the
   viewport before any scrolling, so sticky had nothing to "stick" against
   and the rail just scrolled away with the page.
   Now: cap the rail at viewport height (minus the 32px top inset and a
   matching 24px bottom breathing space) and let its inner cards scroll
   internally. The thin scrollbar only appears when the rail is taller
   than the viewport; on tall monitors there's no scrollbar at all.
   align-self: start keeps the rail from stretching to the row height
   (a CSS Grid quirk that also defeats sticky). */
.nbp-article__rail {
  position: sticky;
  top: 32px;
  align-self: start;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  /* Subtle right-edge padding so cards aren't kissing the scrollbar. */
  padding-right: 4px;
}
.nbp-article__rail::-webkit-scrollbar { width: 6px; }
.nbp-article__rail::-webkit-scrollbar-track { background: transparent; }
.nbp-article__rail::-webkit-scrollbar-thumb {
  background: var(--nbp-rule);
  border-radius: 3px;
}
.nbp-article__rail::-webkit-scrollbar-thumb:hover { background: var(--nbp-text-mute); }

/* Prose */
.nbp-prose { font-family: var(--nbp-serif-r) !important; font-size: 19.5px; line-height: 1.75; color: var(--nbp-text) !important; }
.nbp-article__body.nbp-prose { max-width: 660px; }
.nbp-prose p { margin: 0 0 1.4em; }
/* Dropcap is intentionally scoped to article bodies only. Generic Ghost
   pages (Subscribe, About, custom marketing pages) use .nbp-prose too,
   but their copy is short and a dropcap looks broken there. */
.nbp-article__body.nbp-prose > p:first-of-type::first-letter {
  font-family: var(--nbp-serif) !important; font-weight: 800 !important; float: left;
  font-size: 5.6em; line-height: 0.85; padding: 0.08em 0.12em 0 0; color: var(--nbp-ink) !important;
}
/* Suppress dropcap inside paywall blocks so it can't snatch the "A" out
   of "Already have an account?" or any other CTA copy. */
.nbp-prose .gh-post-upgrade-cta p:first-of-type::first-letter,
.nbp-prose .nbp-hardwall p:first-of-type::first-letter,
.nbp-hardwall p:first-of-type::first-letter,
.gh-post-upgrade-cta p:first-of-type::first-letter {
  float: none; font-size: inherit; padding: 0; color: inherit !important; font-weight: inherit !important;
}
/* Belt-and-suspenders kill switch for Pages. The dropcap is intentionally
   limited to article bodies only. These explicit overrides ensure that
   marketing Pages (Submit a Story, About, Contact, Editorial Policy,
   Subscribe, Authors index) never inherit the article-body dropcap, even
   if their first paragraph happens to live inside .nbp-prose. */
.nbp-page__body p::first-letter,
.nbp-page__body li::first-letter,
.nbp-policy__body p::first-letter,
.nbp-policy__body li::first-letter,
.nbp-policy__callout p::first-letter,
.nbp-policy__callout li::first-letter,
.nbp-policy__intro p::first-letter,
.nbp-policy p::first-letter,
.nbp-policy li::first-letter,
.nbp-subscribe p::first-letter,
.nbp-contact p::first-letter,
.nbp-author__bio p::first-letter,
.nbp-newsletter p::first-letter,
.nbp-paywall p::first-letter,
.nbp-aboutstory p::first-letter,
.kg-callout-card p::first-letter,
.kg-callout-text::first-letter,
.kg-callout-card div::first-letter,
.kg-toggle-card p::first-letter,
.kg-product-card p::first-letter,
.kg-button-card a::first-letter,
.kg-bookmark-card p::first-letter {
  float: none !important;
  font-size: inherit !important;
  padding: 0 !important;
  color: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
}

/* ---------------- Ghost default upgrade CTA (.gh-post-upgrade-cta) ----------------
   v16+ suppresses this entirely via {{content cta=false}}, but if Ghost
   ever re-emits it (older content, member-tier card, etc.) make the text
   legible: white on red, no dark-blue links inheriting from the base
   anchor color. */
.gh-post-upgrade-cta { margin: 24px 0; }
.gh-post-upgrade-cta-content {
  padding: 32px 24px; text-align: center; color: #fff !important;
  border-radius: 4px;
}
.gh-post-upgrade-cta-content h2,
.gh-post-upgrade-cta-content p,
.gh-post-upgrade-cta-content small { color: #fff !important; }
.gh-post-upgrade-cta-content a { color: #fff !important; text-decoration: underline; }
.gh-post-upgrade-cta-content a.gh-btn {
  display: inline-block; background: #fff !important; color: var(--nbp-ink) !important;
  padding: 10px 22px; border-radius: 999px; font-weight: 600 !important;
  text-decoration: none; margin: 8px 0;
}
.gh-post-upgrade-cta-content a.gh-btn:hover { background: var(--nbp-paper) !important; }
.nbp-prose h2 {
  font-family: var(--nbp-serif) !important; font-weight: 700 !important; font-size: 30px;
  margin: 2.2em 0 0.6em; color: var(--nbp-ink) !important; line-height: 1.18;
}
.nbp-prose h3 { font-family: var(--nbp-serif) !important; font-weight: 700 !important; font-size: 22px; margin: 1.8em 0 0.4em; }
.nbp-prose blockquote {
  border-left: 4px solid var(--nbp-red) !important; padding: 8px 0 8px 24px; margin: 2.4em 0;
  font-family: var(--nbp-serif) !important; font-size: 26px; line-height: 1.3; color: var(--nbp-ink) !important; font-style: italic;
}
.nbp-prose h2 {
  font-family: var(--nbp-serif) !important; font-weight: 700 !important; font-size: 32px;
  letter-spacing: -0.01em;
  margin: 2.4em 0 0.8em; color: var(--nbp-ink) !important; line-height: 1.2;
}
.nbp-prose figure { margin: 1.8em 0; }
.nbp-prose figcaption { font-family: var(--nbp-sans) !important; font-size: 12.5px; color: var(--nbp-text-mute) !important; padding: 6px 0; }
.nbp-prose a { color: var(--nbp-blue) !important; border-bottom: 1px solid currentColor; }
/* Buttons inside prose: cancel the link underline and reapply variant colors,
   otherwise the .nbp-prose a rule above wins on specificity and turns the
   "Become a member" button text dark blue with an underline. */
.nbp-prose a.nbp-btn { border-bottom: 0; }
/* Ghost-variant buttons rely on a 1px border on all four sides to render
   their outline. The .nbp-prose a underline rule above (border-bottom:
   1px solid currentColor) sets the bottom edge to the link's blue, and
   the previous override then zeros it entirely, leaving the bottom edge
   missing. Restore it explicitly for ghost variants. */
.nbp-prose a.nbp-btn--ghost { border-bottom: 1px solid var(--nbp-ink) !important; }
.nbp-prose a.nbp-btn--ghost-light { border-bottom: 1px solid #fff !important; }
.nbp-prose a.nbp-btn--ghost:hover { border-bottom-color: var(--nbp-ink) !important; }
.nbp-prose a.nbp-btn--red,
.nbp-prose a.nbp-btn--primary,
.nbp-prose a.nbp-btn--gold,
.nbp-prose a.nbp-btn--ink { color: #fff !important; }
.nbp-prose a.nbp-btn--red:hover,
.nbp-prose a.nbp-btn--primary:hover,
.nbp-prose a.nbp-btn--gold:hover,
.nbp-prose a.nbp-btn--ink:hover { color: #fff !important; }
.nbp-prose a.nbp-btn--ghost { color: var(--nbp-ink) !important; }
.nbp-prose a.nbp-btn--ghost:hover { color: #fff !important; }
.nbp-prose a.nbp-btn--ghost-light { color: #fff !important; }
.nbp-prose ul, .nbp-prose ol { padding-left: 1.4em; }
.nbp-prose li { margin: 0.4em 0; }

/* About this story (methodology block) */
.nbp-aboutstory {
  margin: 64px 0 0; padding: 32px;
  background: var(--nbp-rule-soft) !important;
  border-top: 4px solid var(--nbp-ink) !important;
  font-family: var(--nbp-sans) !important;
}
.nbp-aboutstory__label {
  font-family: var(--nbp-sans) !important;
  font-size: 13px; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--nbp-ink) !important; margin: 0 0 16px;
}
.nbp-aboutstory__body {
  font-size: 14px; line-height: 1.55; color: var(--nbp-text-mute) !important;
}
.nbp-aboutstory__body p { margin: 0 0 12px; }
.nbp-aboutstory__body p:last-child { margin: 0; }
.nbp-aboutstory__body strong { color: var(--nbp-ink) !important; font-weight: 700 !important; }
.nbp-aboutstory__body a { color: var(--nbp-red) !important; font-weight: 600 !important; }
.nbp-aboutstory__body a:hover { text-decoration: underline; }
.nbp-aboutstory__links { padding-top: 8px; }
.nbp-aboutstory__links span { margin: 0 8px; color: var(--nbp-rule) !important; }

/* Tags + Republish meta footer */
.nbp-article__meta-footer {
  margin: 32px 0 0; padding: 20px 0;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
  font-size: 13px;
}
.nbp-article__tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  color: var(--nbp-text-mute) !important; font-weight: 500 !important;
}
.nbp-article__tags-label {
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 10px; margin-right: 8px;
  color: var(--nbp-text-mute) !important;
}
.nbp-tag-pill {
  display: inline-block; padding: 6px 14px;
  background: var(--nbp-rule-soft) !important; border-radius: 999px;
  color: var(--nbp-ink) !important; font-weight: 500 !important;
  font-size: 13px; text-decoration: none;
  transition: background 0.15s;
}
.nbp-tag-pill:hover { background: var(--nbp-rule) !important; }
.nbp-article__republish {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--nbp-ink) !important; font-weight: 600 !important;
  text-decoration: none;
  transition: color 0.15s;
}
.nbp-article__republish:hover { color: var(--nbp-red) !important; }
.nbp-article__republish svg { width: 16px; height: 16px; }

/* End-of-article paywall + related */
.nbp-article__bottom-paywall { margin: 64px 0 0; }
.nbp-article__related {
  margin: 64px 0 0; padding: 32px 0 0;
  border-top: 3px solid var(--nbp-ink) !important;
}
.nbp-article__related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 24px;
}

/* Sticky right rail — For Members card */
.nbp-rail__formembers { display: block; }
.nbp-rail__formembers-list {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.nbp-rail__formembers-list > li {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--nbp-rule) !important;
}
.nbp-rail__formembers-list > li:last-child { border-bottom: 0 !important; padding-bottom: 0; }
.nbp-rail__formembers-link {
  display: block; text-decoration: none; color: inherit !important;
}
.nbp-rail__formembers-meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  flex-wrap: wrap;
}
.nbp-rail__formembers-headline {
  font-family: var(--nbp-serif) !important; font-weight: 700 !important;
  font-size: 16px; line-height: 1.3;
  color: var(--nbp-ink) !important; margin: 0;
  transition: color 0.15s;
}
.nbp-rail__formembers-link:hover .nbp-rail__formembers-headline { color: var(--nbp-red) !important; }

/* Author block end-of-article — matches Article (Premium) mockup
   ("About the reporters" row, two avatar+bio columns separated by a gap). */
.nbp-authorblock {
  border-top: 1px solid var(--nbp-rule) !important;
  border-bottom: 1px solid var(--nbp-rule) !important;
  padding: 32px 0; margin: 48px 0 0;
}
.nbp-authorblock > .nbp-eyebrow { margin-bottom: 24px; display: block; }
.nbp-authorblock__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 32px; margin-top: 0;
}
.nbp-authorblock__card {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start;
}
.nbp-authorblock__avatar {
  width: 64px; height: 64px; border-radius: 999px; overflow: hidden;
  background: var(--nbp-ink) !important;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nbp-authorblock__avatar img { width: 100%; height: 100%; object-fit: cover; }
.nbp-avatar-initials {
  font-family: var(--nbp-serif) !important; font-weight: 700 !important;
  color: #fff !important; font-size: 22px; letter-spacing: 0.02em;
}
.nbp-authorblock__name {
  font-family: var(--nbp-serif) !important;
  font-size: 20px; font-weight: 700 !important; color: var(--nbp-ink) !important;
  display: block; text-decoration: none; line-height: 1.2;
}
.nbp-authorblock__name:hover { color: var(--nbp-red) !important; }
.nbp-authorblock__bio {
  font-family: var(--nbp-sans) !important; font-size: 13px;
  color: var(--nbp-text-mute) !important; margin: 4px 0 8px; line-height: 1.45;
}
.nbp-authorblock__links { display: flex; gap: 12px; font-size: 12px; font-weight: 600 !important; }
.nbp-authorblock__links a { color: var(--nbp-red) !important; text-decoration: none; }
.nbp-authorblock__links a:hover { color: var(--nbp-red-deep) !important; text-decoration: underline; }

/* Related */
.nbp-related { padding: 24px; max-width: var(--nbp-w); margin: 0 auto; }
.nbp-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---------------- Section page (3-column magazine layout) ---------------- */

/* Section masthead — title on the left, "updated" pill on the right,
   anchored by a thin grey rule that runs the full content width. The
   tag description (dek) is intentionally hidden to mirror the live
   newbostonpost.com section pages, which show only the section name. */
.nbp-section__masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin: 40px 0 32px; padding-bottom: 16px;
  border-bottom: 1px solid var(--nbp-rule) !important;
}
.nbp-section__masthead-text { flex: 1 1 auto; min-width: 0; }
.nbp-section__title {
  font-family: var(--nbp-serif) !important;
  font-size: 64px; font-weight: 900 !important;
  color: var(--nbp-ink) !important;
  margin: 0; line-height: 0.95; letter-spacing: -0.02em;
  /* Tag/section names come straight from Ghost admin and are
     occasionally entered lowercase ("spotlight"). Force first-letter
     capitalization so the H1 always reads as a proper section name. */
  text-transform: capitalize;
}
.nbp-section__dek {
  font-family: var(--nbp-sans) !important;
  font-size: 15px; color: var(--nbp-text-mute) !important;
  margin: 8px 0 0; max-width: 38em;
}
/* Three-column grid: 3fr / 6fr / 3fr ≈ 25% / 50% / 25% */
.nbp-section__three-col {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
  gap: 32px;
  align-items: start;
  padding-bottom: 64px;
}

/* Left column — Latest feed */
.nbp-section__feed-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.nbp-section__feed-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.nbp-section__feed-item {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--nbp-rule-soft) !important;
}
.nbp-section__feed-item:last-child { border-bottom: 0 !important; padding-bottom: 0; }
.nbp-section__feed-meta { display: flex; align-items: center; gap: 8px; }
.nbp-section__feed-time {
  font-family: var(--nbp-sans) !important;
  font-size: 11px; color: var(--nbp-text-soft) !important;
}
.nbp-section__feed-headline {
  font-family: var(--nbp-serif) !important;
  font-size: 15px; font-weight: 700 !important;
  color: var(--nbp-ink) !important;
  line-height: 1.25; text-decoration: none;
  display: block;
}
.nbp-section__feed-headline:hover { color: var(--nbp-red) !important; }

/* Center column — features */
.nbp-section__center-col {
  display: flex; flex-direction: column; gap: 40px; min-width: 0;
}
.nbp-section__secondary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--nbp-rule) !important;
}
.nbp-section__secondary-large { min-width: 0; }
.nbp-section__secondary-stack {
  display: flex; flex-direction: column; gap: 24px;
}
.nbp-section__secondary-stack > * + *::before {
  content: ""; display: block;
  border-top: 1px solid var(--nbp-rule) !important;
  margin-bottom: 24px; transform: translateY(-12px);
}

/* Right rail */
.nbp-section__rail { display: flex; flex-direction: column; gap: 32px; min-width: 0; }

/* Premium card in section rail — gold gradient surface */
.nbp-premium-card {
  background: linear-gradient(180deg, #ffffff 0%, var(--nbp-gold-soft) 100%) !important;
  border: 1px solid #E8DDC2 !important;
  padding: 20px;
}
.nbp-premium-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.nbp-premium-card__title {
  font-family: var(--nbp-serif) !important;
  font-size: 20px; font-weight: 700 !important;
  color: var(--nbp-ink) !important;
  margin: 0 0 16px;
}
.nbp-premium-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.nbp-premium-card__list > * + * {
  padding-top: 16px;
  border-top: 1px solid var(--nbp-rule) !important;
}
.nbp-premium-card__link { display: block; text-decoration: none; }
.nbp-premium-card__link h4 {
  font-family: var(--nbp-serif) !important;
  font-size: 15px; font-weight: 700 !important;
  color: var(--nbp-ink) !important;
  margin: 0 0 4px; line-height: 1.3;
}
.nbp-premium-card__link:hover h4 { color: var(--nbp-red) !important; }

/* ---------------- Section page (v72 — match interior-page mockup
   attached_assets/03-section-politics_*.jpg) ---------------- */

/* "Latest in {section}" header above the left feed. Single-line bold serif
   title with a thin black underline running the column width. Replaces the
   shared section-header partial here so the underline can hug the title. */
.nbp-section__feed-title {
  font-family: var(--nbp-serif) !important;
  font-size: 22px; font-weight: 800 !important;
  color: var(--nbp-ink) !important;
  margin: 0 0 12px;
  text-transform: capitalize;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nbp-ink) !important;
}

/* 2-up small-card grid in the center column (post #3 + post #4). */
.nbp-section__twoup {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  padding-top: 8px;
  border-top: 1px solid var(--nbp-rule) !important;
}

/* Empty-state placeholder shown in the center column when a section tag
   has zero posts (e.g. a brand-new section that hasn't launched yet).
   Keeps the column visually anchored so the page doesn't collapse. */
.nbp-section__empty {
  background: var(--nbp-paper) !important;
  border: 1px solid var(--nbp-rule) !important;
  padding: 40px 32px;
  text-align: center;
}
.nbp-section__empty .nbp-empty {
  font-size: 16px;
  line-height: 1.6;
  color: var(--nbp-text-mute) !important;
  max-width: 52ch;
  margin: 0 auto;
}
.nbp-section__empty a { color: var(--nbp-red) !important; text-decoration: underline; }

/* Reporters card — author bio under each name. v1.0.249 clamps to 2
   lines so a verbose Ghost author bio doesn't blow up the rail height;
   the rail still feels like a "beat line" without truncating server-side. */
.nbp-rail__beat {
  font-family: var(--nbp-sans) !important;
  font-size: 12px; line-height: 1.4;
  color: var(--nbp-text-mute) !important;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "For Subscribers" stack in the right rail. Three independent items;
   each item shows a cream/tan pill, headline, and timeago line. No
   surrounding gold gradient frame — the live mockup keeps each item
   visually distinct rather than grouping them under one card. */
.nbp-section__subs-stack {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.nbp-section__subs-item {
  background: var(--nbp-gold-soft) !important;
  border: 1px solid #E8DDC2 !important;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.nbp-section__subs-pill { align-self: flex-start; }
.nbp-section__subs-head {
  font-family: var(--nbp-serif) !important;
  font-size: 17px; font-weight: 700 !important;
  color: var(--nbp-ink) !important;
  line-height: 1.25; text-decoration: none;
}
.nbp-section__subs-head:hover { color: var(--nbp-red) !important; }
.nbp-section__subs-time {
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--nbp-text-soft) !important;
}

/* Full-width support band at the bottom of every section page. Dark ink
   surface, gold "Become a Member" eyebrow, big serif headline, and a
   gold pill CTA on the right. Hidden for paid members. */
.nbp-support-band {
  background: var(--nbp-ink) !important;
  color: #fff !important;
  margin-top: 64px;
  padding: 48px 0;
}
.nbp-support-band__inner {
  display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: center;
}
.nbp-support-band__text { min-width: 0; }
.nbp-support-band__title {
  font-family: var(--nbp-serif) !important;
  font-size: 32px; font-weight: 800 !important;
  color: #fff !important;
  margin: 8px 0 8px; line-height: 1.15;
}
.nbp-support-band__fine {
  font-family: var(--nbp-sans) !important;
  font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,0.78) !important;
  margin: 0; max-width: 64ch;
}
.nbp-support-band__cta {
  white-space: nowrap;
  padding: 14px 22px !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
}
@media (max-width: 720px) {
  .nbp-support-band__inner { grid-template-columns: 1fr; }
  .nbp-support-band__title { font-size: 26px; }
  .nbp-section__twoup { grid-template-columns: 1fr; }
}

/* ---------------- Author page ---------------- */
.nbp-author__hero { background: var(--nbp-paper) !important; border-bottom: 1px solid var(--nbp-rule); padding: 48px 0; }
.nbp-author__hero-grid {
  display: grid; grid-template-columns: 240px 1fr; gap: 40px;
  max-width: var(--nbp-w); margin: 0 auto; padding: 0 24px;
  align-items: start;
}
/* v1.0.189 — author tile uses the same 4:5 portrait recipe as the
   about-page person tiles (`.nbp-about__person-portrait`). The hero
   block sets the width; aspect-ratio + the shared portrait class do
   the rest (paper bg, grayscale fade, hover release). */
.nbp-author__avatar {
  width: 240px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  overflow: hidden;
  background: var(--nbp-paper) !important;
  display: block;
  position: relative;
}
.nbp-author__avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.15);
  transition: filter 500ms ease;
}
.nbp-author__avatar:hover img { filter: grayscale(0); }
.nbp-author__name { font-size: 48px; font-weight: 800 !important; color: var(--nbp-ink) !important; margin: 6px 0; line-height: 1; }
.nbp-author__loc { color: var(--nbp-text-mute) !important; margin: 4px 0 12px; }
.nbp-author__bio { font-size: 17px; color: var(--nbp-text-mute) !important; max-width: 42em; line-height: 1.6; }
.nbp-author__actions { display: flex; gap: 10px; margin-top: 16px; }
.nbp-author__creds {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 20px 24px; border-bottom: 1px solid var(--nbp-rule);
}
.nbp-author__beat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nbp-author__beat-text { font-family: var(--nbp-serif-r) !important; font-size: 16px; color: var(--nbp-text) !important; margin-top: 4px; }
.nbp-author__feed { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding: 24px; }

/* Rail */
.nbp-rail { display: flex; flex-direction: column; gap: 24px; }
.nbp-rail__list ol { list-style: decimal-leading-zero; padding-left: 1.4em; }
.nbp-rail__link { font-size: 16px; line-height: 1.25; color: var(--nbp-ink) !important; display: block; }
.nbp-rail__avatar { width: 40px; height: 40px; border-radius: 999px; overflow: hidden; background: var(--nbp-rule-soft) !important; display: grid; place-items: center; }
.nbp-rail__reporters ul { list-style: none; padding: 0; margin: 8px 0 0; }
.nbp-rail__reporters li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--nbp-rule); }
.nbp-rail__name { display: inline-block; font-family: var(--nbp-serif) !important; font-size: 16px; font-weight: 700 !important; color: var(--nbp-ink) !important; }
.nbp-rail__name:hover { color: var(--nbp-red) !important; }
.nbp-rail__bio { font-family: var(--nbp-serif) !important; font-size: 13px; line-height: 1.45; color: var(--nbp-text-mute) !important; margin: 6px 0 0; }

/* ---------------- Author page (v74 — match attached_assets/05-author_*.jpg)
   Adds: location+email row, beat pills, inline follow form,
   Connect card, On the Record testimonial card. ---------------- */

/* Hero — body column to the right of the photo. */
.nbp-author__hero-body { min-width: 0; }
.nbp-author__loc-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 8px 0 16px;
  font-family: var(--nbp-sans) !important;
  font-size: 14px;
  color: var(--nbp-text-mute) !important;
}
.nbp-author__loc-sep { color: var(--nbp-rule) !important; }
.nbp-author__email-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--nbp-ink) !important; text-decoration: none;
}
.nbp-author__email-link:hover { color: var(--nbp-red) !important; }
.nbp-author__email-link svg { width: 14px; height: 14px; }

/* Beat pills row sitting below the Follow button. The data-nbp-author-beats
   list is deduped by main.js (which removes duplicate <li data-nbp-beat>
   entries so an author with 6 Politics stories shows one Politics pill). */
.nbp-author__beats {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.nbp-author__beats > li { display: inline-flex; }

/* Inline follow form (after the second story in the feed). Matches the
   mockup's "Get every story Mary Conroy publishes — free." card. */
.nbp-author__follow-inline {
  background: var(--nbp-paper) !important;
  border-top: 1px solid var(--nbp-rule) !important;
  border-bottom: 1px solid var(--nbp-rule) !important;
  padding: 24px;
  margin: 24px 0;
  text-align: center;
}
.nbp-author__follow-title {
  font-family: var(--nbp-serif) !important;
  font-size: 22px; font-weight: 800 !important;
  color: var(--nbp-ink) !important;
  margin: 0 0 16px;
}
.nbp-author__follow-form {
  display: flex; gap: 8px; max-width: 460px; margin: 0 auto;
}
.nbp-author__follow-form input[type="email"] {
  flex: 1; min-width: 0;
  padding: 10px 14px; font-size: 14px;
  border: 1px solid var(--nbp-ink) !important;
  background: #fff !important;
  font-family: var(--nbp-sans) !important;
}
.nbp-author__follow-form .nbp-btn { white-space: nowrap; padding: 10px 20px; font-size: 14px; }
.nbp-author__follow-success,
.nbp-author__follow-error {
  display: none; margin-top: 12px; font-size: 13px;
  font-family: var(--nbp-sans) !important;
}
[data-members-form="success"] .nbp-author__follow-success { display: block; color: var(--nbp-ink) !important; }
[data-members-form="error"] .nbp-author__follow-error { display: block; color: var(--nbp-red) !important; }

/* Recent Stories feed heading sits above the feed in the same style as
   the section page's "Latest in {section}" header (thin black underline). */
.nbp-author__feed-head { margin-top: 0; }

/* Right rail — Connect card. Cream surface, list of social rows with
   inline icons, then a tip-line block at the bottom with a phone pill. */
.nbp-rail__connect {
  background: var(--nbp-paper) !important;
  border: 1px solid var(--nbp-rule) !important;
  padding: 18px 20px;
}
.nbp-rail__connect > h3 { margin: 0 0 12px; }
.nbp-rail__connect-list {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.nbp-rail__connect-list a {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--nbp-sans) !important;
  font-size: 14px; color: var(--nbp-ink) !important;
  text-decoration: none;
  word-break: break-word;
}
.nbp-rail__connect-list a:hover { color: var(--nbp-red) !important; }
.nbp-rail__connect-list svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--nbp-text-mute); }

.nbp-rail__connect-tip {
  border-top: 1px solid var(--nbp-rule) !important;
  padding-top: 14px; margin-top: 6px;
}
.nbp-rail__connect-tip h4 {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 6px;
  color: var(--nbp-red) !important;
  font-size: 11px;
}
.nbp-rail__connect-tip-icon { display: inline-flex; }
.nbp-rail__connect-tip-icon svg { width: 12px; height: 12px; }
.nbp-rail__connect-tip p {
  font-family: var(--nbp-sans) !important;
  font-size: 13px; line-height: 1.5;
  color: var(--nbp-text-mute) !important;
  margin: 0 0 10px;
}
.nbp-rail__connect-pill {
  display: inline-block;
  font-family: var(--nbp-sans) !important;
  font-size: 13px; font-weight: 600;
  color: var(--nbp-ink) !important;
  background: #fff !important;
  border: 1px solid var(--nbp-rule) !important;
  padding: 6px 12px;
  letter-spacing: 0.02em;
}

/* v1.0.191 — "Recent Coverage" rail card. Replaces the legacy
   On the Record testimonial block. Mirrors the section masthead
   visual recipe (red top rule + serif title) so it reads as part
   of the same design system. */
.nbp-rail__recent {
  border-top: 2px solid var(--nbp-red) !important;
  padding-top: 16px;
}
.nbp-rail__recent-title {
  font-family: var(--nbp-serif) !important;
  font-size: 20px; font-weight: 700 !important;
  color: var(--nbp-ink) !important;
  margin: 0 0 14px;
}
.nbp-rail__recent-list {
  list-style: none; padding: 0; margin: 0;
}
.nbp-rail__recent-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--nbp-rule) !important;
  display: block;
}
.nbp-rail__recent-item:first-child { padding-top: 0; }
.nbp-rail__recent-item:last-child  { border-bottom: 0; padding-bottom: 4px; }
.nbp-rail__recent-tag {
  display: inline-block;
  font-family: var(--nbp-sans) !important;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nbp-red) !important;
  text-decoration: none !important;
  margin-bottom: 4px;
}
.nbp-rail__recent-tag:hover { color: var(--nbp-red-deep, #8A1B17) !important; }
.nbp-rail__recent-link {
  display: block;
  font-family: var(--nbp-serif) !important;
  font-size: 15px; line-height: 1.35; font-weight: 700;
  color: var(--nbp-ink) !important;
  text-decoration: none !important;
  margin: 0 0 4px;
}
.nbp-rail__recent-link:hover { color: var(--nbp-red) !important; }
.nbp-rail__recent-date {
  font-family: var(--nbp-sans) !important;
  font-size: 11.5px;
  color: var(--nbp-text-mute) !important;
}
.nbp-rail__recent-all {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--nbp-sans) !important;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--nbp-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--nbp-ink);
  padding-bottom: 2px;
}
.nbp-rail__recent-all:hover { color: var(--nbp-red) !important; border-bottom-color: var(--nbp-red); }

/* Top labels chain on article (POLITICS · INVESTIGATION). The dot
   separator gets its own span so a missing secondary tag doesn't leave
   a dangling "·" in the flex row. */
.nbp-article__labels-sep {
  font-family: var(--nbp-sans) !important;
  font-size: 12px;
  color: var(--nbp-text-mute) !important;
  line-height: 1;
}
.nbp-rail__reporters li { padding: 14px 0 !important; }
.nbp-rail__tip { background: var(--nbp-paper-pure) !important; border: 1px solid var(--nbp-rule); padding: 18px; }

/* ---------------- Subscribe / Membership page ---------------- */
/* Mirrors canvas mockup at artifacts/mockup-sandbox/.../newbostonpost/Subscribe.tsx */
.nbp-subscribe { background: #fff !important; }

/* Hero ----------------------------------------------------- */
.nbp-subscribe__hero { background: #fff !important; border-bottom: 1px solid var(--nbp-rule) !important; padding: 0; }
.nbp-subscribe__hero-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center;
  max-width: var(--nbp-w); margin: 0 auto; padding: 64px 24px;
}
.nbp-subscribe__hero-copy .nbp-eyebrow { margin-bottom: 16px; }
.nbp-subscribe__head { font-family: var(--nbp-serif) !important; font-size: 56px; font-weight: 900 !important; color: var(--nbp-ink) !important; line-height: 1.05; letter-spacing: -0.01em; margin: 16px 0 20px; }
.nbp-subscribe__dek { font-family: var(--nbp-serif) !important; font-size: 19px; color: var(--nbp-text-mute) !important; max-width: 480px; line-height: 1.6; margin: 0 0 32px; }
.nbp-subscribe__hero-cta { display: flex; gap: 16px; }
.nbp-subscribe__hero-cta .nbp-btn--lg { font-size: 16px; padding: 0 32px; height: 56px; line-height: 56px; }
.nbp-subscribe__hero-art { margin: 0; aspect-ratio: 4/3; background: var(--nbp-rule-soft) !important; padding: 8px; }
.nbp-subscribe__hero-art img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.25); mix-blend-mode: multiply; }

/* Benefits ------------------------------------------------- */
.nbp-subscribe__benefits { background: #fff !important; border-bottom: 1px solid var(--nbp-rule) !important; padding: 80px 0; }
.nbp-subscribe__benefits-head { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.nbp-subscribe__benefits-title { font-family: var(--nbp-serif) !important; font-size: 36px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0 0 12px; line-height: 1.1; }
.nbp-subscribe__benefits-sub { font-family: var(--nbp-serif) !important; font-size: 17px; color: var(--nbp-text-mute) !important; margin: 0; }
.nbp-subscribe__benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; row-gap: 48px; }
.nbp-benefit { }
.nbp-benefit__icon { width: 24px; height: 24px; color: var(--nbp-gold) !important; margin-bottom: 16px; }
.nbp-benefit__icon svg { width: 24px; height: 24px; display: block; color: var(--nbp-gold) !important; stroke: currentColor !important; }
.nbp-benefit__title { font-family: var(--nbp-serif) !important; font-size: 22px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0 0 8px; line-height: 1.2; }
.nbp-benefit__desc { font-family: var(--nbp-serif) !important; font-size: 15px; color: var(--nbp-text-mute) !important; line-height: 1.6; margin: 0; }

/* Pricing -------------------------------------------------- */
.nbp-subscribe__plans { background: var(--nbp-paper) !important; border-bottom: 1px solid var(--nbp-rule) !important; padding: 96px 0; }
.nbp-subscribe__plans-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.nbp-plans__grid { display: grid; gap: 24px; align-items: end; }
.nbp-plans__grid--two { grid-template-columns: repeat(2, 1fr); }
.nbp-plan {
  background: #fff !important; border: 1px solid var(--nbp-rule) !important; padding: 32px;
  display: flex; flex-direction: column; position: relative;
}
.nbp-plan__title { font-family: var(--nbp-serif) !important; font-size: 24px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0 0 16px; line-height: 1.1; }
.nbp-plan__title--lg { font-size: 28px; }
.nbp-plan__price-row { margin-bottom: 4px; }
.nbp-plan__price { font-family: var(--nbp-serif) !important; font-size: 40px; font-weight: 700 !important; color: var(--nbp-ink) !important; letter-spacing: -0.01em; }
.nbp-plan__per { font-family: var(--nbp-sans) !important; font-size: 16px; font-weight: 400 !important; color: var(--nbp-text-mute) !important; margin-left: 4px; }
.nbp-plan__sub { font-family: var(--nbp-sans) !important; font-size: 13px; color: var(--nbp-text-mute) !important; margin-bottom: 24px; }
.nbp-plan__lede { font-family: var(--nbp-serif) !important; font-size: 14.5px; color: var(--nbp-text-mute) !important; line-height: 1.55; margin: 0 0 32px; min-height: 60px; }
.nbp-plan .nbp-btn--block { width: 100%; }
.nbp-plan__features { list-style: none; padding: 0; margin: 32px 0 0; font-family: var(--nbp-sans) !important; }
.nbp-plan__features li { display: flex; align-items: flex-start; gap: 10px; padding: 0; margin: 16px 0; font-size: 14px; color: var(--nbp-ink) !important; line-height: 1.4; border: 0 !important; }
.nbp-plan__features li::before { content: "\2713"; color: var(--nbp-gold) !important; font-weight: 700 !important; flex-shrink: 0; line-height: 1.4; }
.nbp-plan--featured {
  background: #fff !important; border: 2px solid var(--nbp-gold) !important;
  transform: translateY(-16px); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
}
.nbp-plan--featured .nbp-plan__features li { font-size: 14.5px; font-weight: 500 !important; }
.nbp-plan__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--nbp-gold) !important; color: #fff !important;
  font-family: var(--nbp-sans) !important; font-size: 11px; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.15em;
  padding: 6px 14px; border-radius: 2px; white-space: nowrap;
}

/* Editor Letter (dark) ------------------------------------- */
.nbp-subscribe__letter { background: var(--nbp-ink) !important; color: #fff !important; padding: 96px 0; margin: 0; }
.nbp-subscribe__letter-inner { max-width: 800px; margin: 0 auto; padding: 0 24px; text-align: center; }
.nbp-subscribe__letter-bar { width: 64px; height: 4px; background: var(--nbp-red) !important; margin: 0 auto 32px; }
.nbp-letter, .nbp-subscribe__letter .nbp-letter {
  font-family: var(--nbp-serif) !important; font-style: italic !important;
  font-size: 30px; font-weight: 300 !important; line-height: 1.5;
  color: rgba(255,255,255,0.9) !important; max-width: none; margin: 0; padding: 0;
  border: 0 !important; quotes: none;
}
.nbp-subscribe__letter .nbp-letter p { margin: 0 0 12px; color: rgba(255,255,255,0.9) !important; font-style: italic !important; }
.nbp-subscribe__letter .nbp-letter p:last-child { margin-bottom: 0; }
.nbp-subscribe__letter-sig { margin-top: 40px; }
.nbp-subscribe__letter-name { font-family: var(--nbp-sans) !important; font-size: 18px; font-weight: 700 !important; color: var(--nbp-gold) !important; text-transform: uppercase; letter-spacing: 0.1em; }
.nbp-subscribe__letter-role { font-family: var(--nbp-sans) !important; font-size: 14px; color: rgba(255,255,255,0.5) !important; margin-top: 4px; }

/* Preview + Quotes block (2-col) --------------------------- */
.nbp-subscribe__preview-block { background: #fff !important; border-bottom: 1px solid var(--nbp-rule) !important; padding: 80px 0; }
.nbp-subscribe__preview-grid { display: grid; grid-template-columns: 1fr 360px; gap: 64px; padding: 0 24px; max-width: var(--nbp-w); margin: 0 auto; }
.nbp-subscribe__preview-head { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.nbp-subscribe__preview-star { width: 20px; height: 20px; color: var(--nbp-gold) !important; display: inline-flex; }
.nbp-subscribe__preview-star svg { width: 20px; height: 20px; color: var(--nbp-gold) !important; stroke: currentColor !important; fill: var(--nbp-gold) !important; }
.nbp-subscribe__preview-title { font-family: var(--nbp-serif) !important; font-size: 26px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0; line-height: 1.1; }
.nbp-subscribe__preview-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

.nbp-subscribe__quotes { background: rgba(232,228,219,0.5) !important; padding: 32px; border-radius: 2px; align-self: start; }
.nbp-subscribe__quotes-head { margin-bottom: 32px; }
.nbp-subscribe__quotes-list { display: flex; flex-direction: column; gap: 32px; }
.nbp-subscribe__quote { margin: 0; }
.nbp-subscribe__quote blockquote { font-family: var(--nbp-serif) !important; font-style: italic !important; font-size: 15px; line-height: 1.6; color: var(--nbp-ink) !important; margin: 0; padding: 0; border: 0 !important; }
.nbp-subscribe__quote figcaption { font-family: var(--nbp-sans) !important; font-size: 12px; font-weight: 700 !important; color: var(--nbp-text-mute) !important; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 12px; }
.nbp-subscribe__quote-rule { width: 32px; height: 1px; background: var(--nbp-rule) !important; border: 0 !important; margin: 0; }

/* FAQ (collapsible) ---------------------------------------- */
.nbp-subscribe__faq { background: #fff !important; padding: 96px 0; }
.nbp-subscribe__faq-inner { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.nbp-subscribe__faq-head { text-align: center; margin-bottom: 48px; }
.nbp-subscribe__faq-title { font-family: var(--nbp-serif) !important; font-size: 32px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0; line-height: 1.1; }
.nbp-subscribe__faq-list { border-top: 1px solid var(--nbp-rule) !important; }
.nbp-faq__item { border-bottom: 1px solid var(--nbp-rule) !important; }
.nbp-faq__summary {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 20px 0; cursor: pointer; list-style: none;
  background: transparent !important; border: 0 !important; text-align: left;
  gap: 16px;
}
.nbp-faq__summary::-webkit-details-marker { display: none; }
.nbp-faq__summary::marker { display: none; content: ''; }
.nbp-faq__q { font-family: var(--nbp-serif) !important; font-size: 19px; font-weight: 700 !important; color: var(--nbp-ink) !important; line-height: 1.3; transition: color 0.15s ease; }
.nbp-faq__item:hover .nbp-faq__q { color: var(--nbp-red) !important; }
.nbp-faq__chev { width: 20px; height: 20px; color: var(--nbp-text-mute) !important; flex-shrink: 0; transition: transform 0.2s ease; display: inline-flex; }
.nbp-faq__chev svg { width: 20px; height: 20px; color: var(--nbp-text-mute) !important; stroke: currentColor !important; }
.nbp-faq__item[open] .nbp-faq__chev { transform: rotate(180deg); }
.nbp-faq__a { padding: 0 0 24px; font-family: var(--nbp-serif) !important; font-size: 15.5px; color: var(--nbp-text-mute) !important; line-height: 1.6; }
.nbp-faq__a a { color: var(--nbp-red) !important; text-decoration: underline; }

/* Final CTA (dark, centered) ------------------------------- */
.nbp-subscribe__final { background: var(--nbp-ink-2) !important; color: #fff !important; padding: 96px 0; margin-top: 0; }
.nbp-subscribe__final-inner { display: block; max-width: 600px; margin: 0 auto; padding: 0 24px; text-align: center; grid-template-columns: none; }
.nbp-subscribe__final-eyebrow { display: inline-block; margin-bottom: 16px; }
.nbp-subscribe__final-title, .nbp-subscribe__final h2 {
  font-family: var(--nbp-serif) !important; font-size: 40px; font-weight: 700 !important;
  color: #fff !important; line-height: 1.15; margin: 16px 0 24px; max-width: none;
}
.nbp-subscribe__final-dek { font-family: var(--nbp-serif) !important; font-size: 17px; color: rgba(255,255,255,0.7) !important; margin: 0 0 40px; }
.nbp-subscribe__final-cta { display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: center; }
.nbp-subscribe__final-cta .nbp-btn--lg { font-size: 16px; padding: 0 32px; height: 56px; line-height: 56px; }
@media (min-width: 640px) { .nbp-subscribe__final-cta { flex-direction: row; } }

/* ---------------- Editorial Policy ---------------- */
/* Mirrors canvas mockup at artifacts/mockup-sandbox/.../newbostonpost/EditorialPolicy.tsx */
.nbp-policy { background: #fff !important; padding: 0; max-width: none; }

/* Centered header band ------------------------------------- */
.nbp-policy__header { background: #fff !important; border-bottom: 1px solid var(--nbp-rule) !important; padding: 64px 24px 48px; }
.nbp-policy__header-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.nbp-policy__header-inner .nbp-eyebrow { display: inline-block; margin-bottom: 16px; }
.nbp-policy__head {
  font-family: var(--nbp-serif) !important; font-size: 52px; font-weight: 900 !important;
  color: var(--nbp-ink) !important; line-height: 1.1; letter-spacing: -0.01em;
  margin: 16px 0 24px;
}
.nbp-policy__dek {
  font-family: var(--nbp-serif) !important; font-size: 20px; line-height: 1.6;
  color: var(--nbp-text-mute) !important; max-width: 700px; margin: 0 auto;
}
.nbp-policy__updated {
  font-family: var(--nbp-mono) !important; font-size: 13px; letter-spacing: 0.04em;
  color: var(--nbp-text-mute) !important; margin-top: 32px;
}

/* 3-column body wrapper ------------------------------------ */
.nbp-policy__wrap { padding: 64px 24px; }
.nbp-policy__layout {
  display: grid; grid-template-columns: 280px 1fr 280px; gap: 48px;
  align-items: start; max-width: var(--nbp-w); margin: 0 auto;
}

/* Rail label -- shared by both sides ----------------------- */
.nbp-policy__rail-label {
  font-family: var(--nbp-sans) !important; font-size: 11px; font-weight: 700 !important;
  color: var(--nbp-text-mute) !important; text-transform: uppercase; letter-spacing: 0.15em;
  margin-bottom: 24px;
}
.nbp-policy__rail-label--red { color: var(--nbp-red) !important; }

/* Left rail ------------------------------------------------ */
.nbp-policy__leftrail { position: sticky; top: 32px; align-self: start; }
.nbp-policy__toc { display: flex; flex-direction: column; gap: 12px; }
.nbp-policy__toc a {
  display: block; font-family: var(--nbp-serif) !important;
  font-size: 14.5px; font-weight: 500 !important; color: var(--nbp-ink) !important;
  text-decoration: none; transition: color 0.15s ease;
}
.nbp-policy__toc a:hover { color: var(--nbp-red) !important; }

.nbp-policy__corrections-log {
  background: var(--nbp-paper) !important; border: 1px solid var(--nbp-rule) !important;
  padding: 20px; margin-top: 48px;
}
.nbp-policy__corrections-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.nbp-policy__corrections-list li {
  font-family: var(--nbp-serif) !important; font-size: 13px; line-height: 1.55;
  color: var(--nbp-text) !important;
  padding: 12px 0; border-bottom: 1px solid var(--nbp-rule) !important;
}
.nbp-policy__corrections-list li.nbp-policy__corrections-list-last,
.nbp-policy__corrections-list li:last-child { border-bottom: 0 !important; padding-bottom: 0; }
.nbp-policy__corrections-list li:first-child { padding-top: 0; }
.nbp-policy__corrections-date {
  display: block; font-family: var(--nbp-sans) !important; font-weight: 700 !important;
  color: var(--nbp-ink) !important; font-size: 13px; margin-bottom: 4px;
}

/* Center main column --------------------------------------- */
.nbp-policy__main { max-width: 680px; }
.nbp-policy__section { margin-bottom: 64px; }
.nbp-policy__section:last-child { margin-bottom: 0; }
.nbp-policy__section-num {
  font-family: var(--nbp-mono) !important; font-size: 13px; letter-spacing: 0.04em;
  color: var(--nbp-red) !important; margin-bottom: 8px;
}
.nbp-policy__section-title {
  font-family: var(--nbp-serif) !important; font-size: 32px; font-weight: 700 !important;
  color: var(--nbp-ink) !important; line-height: 1.15; margin: 0 0 24px;
}
.nbp-policy__section-body {
  font-family: var(--nbp-serif) !important; font-size: 18px; line-height: 1.7;
  color: var(--nbp-text) !important; margin: 0 0 20px;
}
.nbp-policy__section-body a { color: var(--nbp-red) !important; text-decoration: underline; }

.nbp-policy__paywall-spacer { margin: 64px 0; }

/* Right rail ----------------------------------------------- */
.nbp-policy__rightrail { position: sticky; top: 32px; align-self: start; }
.nbp-policy__board-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; }
.nbp-policy__board-list li {
  display: flex; align-items: center; gap: 16px;
}
.nbp-policy__board-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--nbp-ink) !important; color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; text-decoration: none;
  font-family: var(--nbp-sans) !important; font-weight: 700 !important;
  font-size: 16px;
}
.nbp-policy__board-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nbp-policy__board-avatar [data-initials] {
  width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff !important; font-family: var(--nbp-sans) !important; font-weight: 700 !important;
}
.nbp-policy__board-meta { flex: 1; min-width: 0; }
.nbp-policy__board-name {
  display: block; font-family: var(--nbp-sans) !important; font-weight: 700 !important;
  font-size: 15px; color: var(--nbp-ink) !important; text-decoration: none; line-height: 1.3;
}
a.nbp-policy__board-name:hover { color: var(--nbp-red) !important; }
.nbp-policy__board-role { font-family: var(--nbp-serif) !important; font-size: 13px; color: var(--nbp-text-mute) !important; line-height: 1.4; margin-top: 2px; }

.nbp-policy__ombudsman {
  margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--nbp-rule) !important;
}
.nbp-policy__ombudsman-copy {
  font-family: var(--nbp-serif) !important; font-size: 13.5px; line-height: 1.6;
  color: var(--nbp-text-mute) !important; margin: 0 0 16px;
}
.nbp-policy__ombudsman-email {
  font-family: var(--nbp-sans) !important; font-weight: 700 !important; font-size: 13.5px;
  color: var(--nbp-ink) !important; text-decoration: underline; text-underline-offset: 4px;
  transition: color 0.15s ease;
}
.nbp-policy__ombudsman-email:hover { color: var(--nbp-red) !important; }

/* Newsletter footer wrap ----------------------------------- */
.nbp-policy__newsletter { max-width: var(--nbp-w); margin: 0 auto; padding: 0 24px 64px; }

/* ==================== CONTACT PAGE (v57) ====================
   Layout mirrors the canvas mockup at artifacts/mockup-sandbox/src/
   components/mockups/newbostonpost/Contact.tsx exactly:
     1. Header band   – paper-bg, 1.5fr/1fr split, h1 left + alert card right
     2. Main grid     – 1fr / 400px (directory + tipline | form + address)
     3. Trust strip   – shared partial (no contact-specific styling)
     4. Newsletter    – inline variant inside max-w wrap
   All rules use !important so the editor cannot weaken them by accident in
   the Code Injection panel; 902+ count maintained across the theme.        */

/* Outer wrap is full-bleed. Inner max-width lives on each band. */
.nbp-contact { background: var(--nbp-paper) !important; }

/* --- Header band (paper bg, bottom rule) ----------------------- */
.nbp-contact__header { border-bottom: 1px solid var(--nbp-rule) !important; padding: 64px 0; background: var(--nbp-paper) !important; }
.nbp-contact__header-inner { max-width: var(--nbp-w); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: end; }
.nbp-contact__head { font-family: var(--nbp-serif-d) !important; font-size: 52px; font-weight: 900 !important; line-height: 1.1; letter-spacing: -0.01em; color: var(--nbp-ink) !important; margin: 16px 0 24px; }
.nbp-contact__dek { font-family: var(--nbp-serif-r) !important; font-size: 19px; line-height: 1.6; color: var(--nbp-text-mute) !important; max-width: 540px; margin: 0; }
/* Alert card (right column) — white card w/ red 4px left bar. */
.nbp-contact__alert { position: relative; background: #fff !important; border: 1px solid var(--nbp-rule) !important; padding: 24px 24px 24px 28px; }
.nbp-contact__alert::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--nbp-red) !important; }
.nbp-contact__alert-row { display: flex; align-items: flex-start; gap: 12px; }
.nbp-contact__alert-icon { color: var(--nbp-red) !important; flex-shrink: 0; margin-top: 2px; }
.nbp-contact__alert-title { font-family: var(--nbp-serif-d) !important; font-size: 18px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0 0 8px; }
.nbp-contact__alert-body { font-family: var(--nbp-serif-r) !important; font-size: 14px; line-height: 1.55; color: var(--nbp-text-mute) !important; margin: 0; }
.nbp-contact__alert-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--nbp-sans) !important; font-size: 13px; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nbp-red) !important; margin-top: 16px; text-decoration: none; }
.nbp-contact__alert-link:hover { color: var(--nbp-red-deep) !important; }

/* --- Main two-column grid ------------------------------------- */
.nbp-contact__main { max-width: var(--nbp-w); margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: 1fr 400px; gap: 64px; align-items: start; }

/* Section heading style shared by Directory + Tipline title sits inline. */
.nbp-contact__section-title { font-family: var(--nbp-serif-d) !important; font-size: 28px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0 0 32px; padding-bottom: 12px; border-bottom: 2px solid var(--nbp-ink) !important; }

/* Directory: 2-col card grid */
.nbp-contact__directory-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 64px; }
.nbp-contact__dir-card { border: 1px solid var(--nbp-rule) !important; background: transparent !important; padding: 24px; transition: border-color 160ms ease; }
.nbp-contact__dir-card:hover { border-color: var(--nbp-ink) !important; }
.nbp-contact__dir-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.nbp-contact__dir-icon { color: var(--nbp-text-soft) !important; }
.nbp-contact__dir-role { font-family: var(--nbp-sans) !important; font-size: 16px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0; }
.nbp-contact__dir-desc { font-family: var(--nbp-serif-r) !important; font-size: 13.5px; line-height: 1.55; color: var(--nbp-text-mute) !important; margin: 0 0 16px; min-height: 40px; }
.nbp-contact__dir-email { font-family: var(--nbp-sans) !important; font-size: 14px; font-weight: 600 !important; color: var(--nbp-ink) !important; text-decoration: none; word-break: break-word; }
.nbp-contact__dir-email:hover { color: var(--nbp-red) !important; }

/* Confidential Tipline (ink card, gold accents) */
.nbp-contact__secure { background: var(--nbp-ink) !important; color: #fff !important; padding: 40px; border: none !important; margin: 0; }
.nbp-contact__secure-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.nbp-contact__secure-icon { color: var(--nbp-gold) !important; }
.nbp-contact__secure h2 { font-family: var(--nbp-serif-d) !important; font-size: 26px; font-weight: 700 !important; color: #fff !important; margin: 0; }
.nbp-contact__secure-lede { font-family: var(--nbp-serif-r) !important; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.8) !important; margin: 0 0 24px; }
.nbp-contact__secure-methods { display: flex; flex-direction: column; gap: 24px; }
.nbp-contact__secure-method h4 { font-family: var(--nbp-sans) !important; font-size: 16px; font-weight: 700 !important; color: #fff !important; margin: 0 0 4px; }
.nbp-contact__secure-method p { font-family: var(--nbp-serif-r) !important; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.6) !important; margin: 0 0 8px; }
.nbp-contact__secure-pill { display: inline-block; font-family: var(--nbp-mono) !important; font-size: 14px; color: #fff !important; background: rgba(255,255,255,0.1) !important; padding: 8px 12px; border-radius: 0; }
.nbp-contact__secure-link { font-family: var(--nbp-sans) !important; font-size: 14px; color: var(--nbp-gold) !important; text-decoration: none; }
.nbp-contact__secure-link:hover { text-decoration: underline; }

/* --- Right rail: form card + address card -------------------- */
.nbp-contact__rail { display: flex; flex-direction: column; gap: 48px; }

.nbp-contact__form-card { background: #fff !important; border: 1px solid var(--nbp-rule) !important; padding: 32px; }
.nbp-contact__form-title { font-family: var(--nbp-serif-d) !important; font-size: 24px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0 0 24px; }
.nbp-contact__form { display: flex; flex-direction: column; gap: 20px; }
.nbp-contact__field { display: flex; flex-direction: column; }
.nbp-contact__field label { display: block; font-family: var(--nbp-sans) !important; font-size: 13px; font-weight: 700 !important; color: var(--nbp-text) !important; margin: 0 0 6px; text-transform: none; letter-spacing: 0; }
.nbp-contact__field input,
.nbp-contact__field select,
.nbp-contact__field textarea {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px; background: #fff !important;
  border: 1px solid var(--nbp-rule) !important; font-family: var(--nbp-serif-r) !important; font-size: 14px; color: var(--nbp-text) !important;
  border-radius: 0; outline: none; transition: border-color 120ms ease;
}
.nbp-contact__field textarea { padding: 12px; height: auto; resize: vertical; min-height: 120px; line-height: 1.5; }
.nbp-contact__field input:focus,
.nbp-contact__field select:focus,
.nbp-contact__field textarea:focus { border-color: var(--nbp-ink) !important; }
.nbp-contact__form-submit { width: 100%; }

/* Address card (right rail, second block) */
.nbp-contact__addr-map { aspect-ratio: 4 / 3; background: var(--nbp-rule-soft) !important; border: 1px solid var(--nbp-rule) !important; margin-bottom: 24px; overflow: hidden; }
.nbp-contact__addr-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nbp-contact__addr-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: var(--nbp-text-soft) !important; font-family: var(--nbp-sans) !important; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.nbp-contact__addr-title { font-family: var(--nbp-sans) !important; font-size: 16px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.nbp-contact__addr-title svg { color: var(--nbp-text-mute) !important; }
.nbp-contact__addr-body { font-family: var(--nbp-serif-r) !important; font-size: 14.5px; line-height: 1.6; color: var(--nbp-text-mute) !important; margin: 0; }
.nbp-contact__addr-divider { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--nbp-rule) !important; }
.nbp-contact__addr-divider h3 { font-family: var(--nbp-sans) !important; font-size: 15px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0 0 8px; }
.nbp-contact__addr-divider p { font-family: var(--nbp-serif-r) !important; font-size: 14px; line-height: 1.55; color: var(--nbp-text-mute) !important; margin: 0; }
.nbp-contact__addr-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--nbp-sans) !important; font-size: 14px; font-weight: 700 !important; color: var(--nbp-ink) !important; text-decoration: none; }
.nbp-contact__addr-link:hover { color: var(--nbp-red) !important; }

/* --- Newsletter footer wrap (shared inline strip) ------------ */
.nbp-contact__newsletter { max-width: var(--nbp-w); margin: 0 auto; padding: 64px 24px; }

/* ---------------- Authors index ---------------- */
.nbp-authors { padding: 48px 24px; }
.nbp-authors__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
.nbp-authors__card {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  padding: 16px; border: 1px solid var(--nbp-rule); background: #fff !important;
}
.nbp-authors__avatar { width: 64px; height: 64px; border-radius: 999px; overflow: hidden; background: var(--nbp-rule-soft) !important; display: grid; place-items: center; }
.nbp-authors__name { font-size: 18px; color: var(--nbp-ink) !important; }

/* ---------------- Members signup landing ---------------- */
.nbp-membersignup { padding: 64px 24px; text-align: center; max-width: 720px; }
.nbp-membersignup h1 { font-size: 44px; line-height: 1.1; color: var(--nbp-ink) !important; }

/* ---------------- Error ---------------- */
.nbp-error { padding: 64px 24px; text-align: center; }
.nbp-error__head { font-size: 48px; color: var(--nbp-ink) !important; }
.nbp-error__body { font-size: 18px; color: var(--nbp-text-mute) !important; }

/* ---------------- Ad slot ----------------
   The "Advertisement" disclosure is a small, unstyled label that sits OUTSIDE
   the ad creative — it is not part of the ad box itself. This matches the way
   newspapers print the word above their print ads and the convention used by
   NYT/WaPo/Atlantic on the web. Aligns with the FTC's "Native Advertising:
   A Guide for Businesses" disclosure guidance. */
/* v110: ad wrapper and inner are transparent — the creative sits
   directly on the page paper with no card or frame. The "Advertisement"
   label also sits on the paper (NYT/WaPo convention). Any creative that
   needs its own background must include it inside the creative itself. */
.nbp-ad {
  display: block;
  font-family: var(--nbp-sans) !important;
  margin: 16px 0;
  background: transparent !important;
  padding: 0;
}
.nbp-ad__label {
  display: block; text-align: center;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nbp-text-mute) !important;
  margin: 0 0 8px;
}
.nbp-ad__inner {
  background: transparent !important;
  border: 0;
  color: var(--nbp-text-soft) !important;
  display: flex; align-items: center; justify-content: center;
  max-width: 100%; overflow: hidden;
  margin-left: auto; margin-right: auto;
}
/* Any creative dropped into a slot must scale to its slot, never overflow. */
.nbp-ad__inner > * { max-width: 100%; }
.nbp-ad__inner img,
.nbp-ad__inner iframe,
.nbp-ad__inner video { max-width: 100%; height: auto; }
.nbp-ad--leaderboard .nbp-ad__inner { min-height: 90px; }
.nbp-ad--rectangle   .nbp-ad__inner { min-height: 250px; }
.nbp-ad--billboard   .nbp-ad__inner { min-height: 250px; }

/* Production: unfilled ad slots collapse entirely. No dashed box, no
   "Advertisement" label, no slot-key placeholder text. The slot stays
   in the DOM (so JS can fill it later) but contributes zero visible
   real estate. Editors only see something on the page once they paste
   creative into the matching block on the "ad-slots" Ghost Page; until
   then the layout looks ad-free. */
.nbp-ad.is-empty {
  display: none !important;
}

.nbp-ad-leaderboard-wrap { padding: 12px 24px 0; max-width: var(--nbp-w); margin: 0 auto; }
/* Pre-footer leaderboard variant — slightly more vertical breathing room
   so the unit doesn't crash into either the last article element above
   or the footer's top border below. */
.nbp-ad-leaderboard-wrap--prefooter { padding: 32px 24px 16px; }

/* Article-page ad wrappers. Both center the ad and add vertical
   breathing room so the unit doesn't crash into surrounding article
   chrome. .is-empty on the inner .nbp-ad collapses the entire wrap
   (no leftover whitespace) when no creative is configured. */
.nbp-article__ad { display: flex; justify-content: center; }
.nbp-article__ad:has(.nbp-ad.is-empty) { display: none; }
.nbp-article__ad--top { margin: 8px 0 24px; }
.nbp-article__ad--mid { margin: 28px 0; }

/* ---------------- Pagination ---------------- */
.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 32px 0; border-top: 1px solid var(--nbp-rule); margin-top: 32px;
  font-family: var(--nbp-sans) !important; font-size: 13px; color: var(--nbp-text-mute) !important;
}
.pagination a {
  background: var(--nbp-ink) !important; color: #fff !important; padding: 10px 16px; border-radius: 2px;
  font-weight: 600 !important;
}

/* ---------------- Responsive ----------------
   Layered breakpoint system, mobile-last (we author desktop-first because the
   typical reader visits on a desktop browser, but the layout collapses
   gracefully through four steps):
     - 1024px : tablet landscape and below — drop multi-rail homepages,
                stack hero/article rails, switch the mega-menu to 3 cols
     - 768px  : tablet portrait — collapse the seven-col footer, shrink the
                masthead, drop section grids to 2 cols
     - 640px  : large phone — single-col everything, hide motto/utility meta,
                remove the article drop-cap (poor on small screens)
     - 480px  : small phone — tightest container padding, smaller display type
*/

/* Tablet landscape (≤1024px) */
@media (max-width: 1024px) {
  .nbp-home__lead, .nbp-home__latest, .nbp-author__feed,
  .nbp-article__layout, .nbp-subscribe__hero-grid,
  .nbp-subscribe__final-inner, .nbp-footer__convert-grid {
    grid-template-columns: 1fr;
  }
  /* Contact: header collapses to single column; main keeps form rail under. */
  .nbp-contact__header-inner { grid-template-columns: 1fr; gap: 32px; }
  .nbp-contact__main { grid-template-columns: 1fr; gap: 48px; }
  /* Editorial policy: drop the right rail under content, keep TOC left. */
  .nbp-policy__layout { grid-template-columns: 220px 1fr; }
  .nbp-policy__rightrail { grid-column: 1 / -1; position: static; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--nbp-rule) !important; }
  .nbp-policy__board-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .nbp-policy__ombudsman { margin-top: 32px; }
  /* Section page: collapse 3-col into 2-col (feed + center, rail below). */
  .nbp-section__three-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .nbp-section__rail { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 24px; }
  .nbp-section__rail > * { flex: 1 1 280px; min-width: 0; }
  .nbp-home__section-grid, .nbp-home__premium-grid, .nbp-home__opinion-grid,
  .nbp-section__secondary, .nbp-subscribe__benefits-grid,
  .nbp-contact__directory-grid, .nbp-authors__grid,
  .nbp-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Subscribe preview/quotes: stack rail under feed at tablet. */
  .nbp-subscribe__preview-grid { grid-template-columns: 1fr; gap: 40px; }
  .nbp-subscribe__preview-cards { grid-template-columns: repeat(2, 1fr); }
  /* Stack the homepage section "lead + 3 secondary" pattern cleanly. */
  .nbp-home__section-grid > .nbp-card--m { border-left: 0; padding-left: 0; }
  .nbp-plans__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .nbp-plan--featured { transform: none; }
  .nbp-spotlight__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .nbp-spotlight__title { font-size: 32px; }
  .nbp-mega__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  /* Footer at tablet: brand row spans full width; remaining columns stack 3-up. */
  .nbp-footer__main { grid-template-columns: repeat(3, 1fr); }
  .nbp-footer__brand { grid-column: 1 / -1; }
  .nbp-footer__convert-cta { justify-content: flex-start; }
  .nbp-article__head { font-size: 40px; }
  .nbp-article__dek { font-size: 22px; }
  .nbp-article__hero, .nbp-article__hero-caption,
  .nbp-section__masthead,
  .nbp-home, .nbp-related { padding-left: 0; padding-right: 0; }
  /* Spotlight is a full-bleed ink band; the inner container still needs
     side padding so the headline/cards don't kiss the viewport edge. */
  .nbp-spotlight .nbp-container { padding-left: 24px; padding-right: 24px; }
  .nbp-article__layout { gap: 32px; padding: 24px 20px; grid-template-columns: 1fr; }
  .nbp-article__main { max-width: 100%; }
  .nbp-article__header, .nbp-article__hero, .nbp-article__body.nbp-prose { max-width: 100%; }
  .nbp-article__rail { position: static; }
  .nbp-article__related-grid { grid-template-columns: repeat(2, 1fr); }
  .nbp-lead__head { font-size: 40px; }
  .nbp-section__title, .nbp-subscribe__head { font-size: 48px; }
  .nbp-author__hero-grid { grid-template-columns: 180px 1fr; gap: 24px; }
  .nbp-author__avatar { width: 180px; height: auto; }
  .nbp-author__name { font-size: 36px; }
  .nbp-author__creds { grid-template-columns: 1fr; gap: 12px; }
}

/* Tablet portrait (≤768px) */
@media (max-width: 768px) {
  .nbp-container,
  .nbp-utility__inner, .nbp-masthead__grid, .nbp-nav__inner,
  .nbp-mega__inner, .nbp-footer__convert-grid, .nbp-footer__main,
  .nbp-footer__colophon-inner, .nbp-related, .nbp-policy__wrap, .nbp-policy__header,
  .nbp-contact__header-inner, .nbp-contact__main, .nbp-contact__newsletter,
  .nbp-subscribe__hero-grid, .nbp-subscribe__final-inner,
  .nbp-author__hero-grid, .nbp-author__feed, .nbp-section__masthead .nbp-container,
  .nbp-ad-leaderboard-wrap {
    padding-left: 20px; padding-right: 20px;
  }
  /* Editorial policy: drop to single column on tablet portrait. */
  .nbp-policy__layout { grid-template-columns: 1fr; gap: 32px; }
  .nbp-policy__leftrail, .nbp-policy__rightrail { position: static; }
  .nbp-policy__head { font-size: 40px; }
  .nbp-policy__main { max-width: none; }
  /* Hide non-essential utility-bar meta so Sign in / Subscribe never wrap. */
  .nbp-utility__left { display: none; }
  .nbp-utility__inner { justify-content: flex-end; }
  /* Shrink the masthead so the wordmark stays on one line. */
  .nbp-masthead__grid { grid-template-columns: 1fr auto; padding: 18px 20px 14px; }
  .nbp-masthead__motto { display: none; }
  .nbp-masthead__title { font-size: 36px; }
  .nbp-masthead__tagline { font-size: 10px; letter-spacing: 0.18em; }
  .nbp-masthead__logo--bundled { max-height: 84px; max-width: min(320px, 80vw); }
  /* The labeled "Search" button collapses to icon-only to free room. */
  .nbp-iconbtn--mobile-search span,
  .nbp-iconbtn--account span { display: none; }
  /* Footer drops to 2 cols + brand row. */
  .nbp-footer__main { grid-template-columns: repeat(2, 1fr); padding: 32px 20px; }
  .nbp-footer__convert-grid { padding: 32px 20px; gap: 20px; grid-template-columns: 1fr; }
  /* Allow the footer headline to wrap on small screens (the desktop nowrap
     would otherwise overflow the viewport). */
  .nbp-footer__headline { font-size: 24px; white-space: normal; }
  .nbp-footer__colophon-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Subscribe cards full-width single column. */
  .nbp-plans__grid--two { grid-template-columns: 1fr; max-width: 480px; }
  .nbp-subscribe__hero { padding: 36px 0; }
  .nbp-subscribe__head { font-size: 40px; }
  /* Section page: collapse to single column, masthead stacks vertically. */
  .nbp-section__three-col { grid-template-columns: 1fr; gap: 32px; }
  .nbp-section__rail { flex-direction: column; }
  .nbp-section__masthead { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .nbp-section__title { font-size: 40px; }
  .nbp-section__secondary { grid-template-columns: 1fr; }
  /* Mega menu: 2 cols at this width is comfortable for thumbs. */
  .nbp-mega__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .nbp-mega__inner { padding: 28px 20px; }
  /* Article hero/header tighter. */
  .nbp-article__header { padding: 24px 20px 16px; }
  .nbp-article__hero-caption { padding: 10px 20px 0; }
  .nbp-article__head { font-size: 30px; }
  .nbp-article__dek { font-size: 18px; }
  .nbp-article__byline-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* v1.0.214 — Hero caption is no longer flex; legacy mobile overrides
     are obsolete (caption stack is the default at every breakpoint). */
  .nbp-aboutstory { padding: 24px 20px; }
  .nbp-article__related-grid { grid-template-columns: 1fr; }
  .nbp-article__meta-footer { flex-direction: column; align-items: flex-start; }
  /* Side cards stack the image below the headline at this size. */
  .nbp-card--side { grid-template-columns: 1fr; gap: 12px; }
  .nbp-card--side .nbp-card__media { order: 0; aspect-ratio: 16 / 9; }
  .nbp-card--xl .nbp-card__headline { font-size: 32px; }
  .nbp-card--l  .nbp-card__headline { font-size: 24px; }
  .nbp-card--m  .nbp-card__headline { font-size: 19px; }
  /* Author block 1-col so 80px avatar + bio doesn't crowd. */
  .nbp-authorblock__grid { grid-template-columns: 1fr; }
}

/* Large phone (≤640px) */
@media (max-width: 640px) {
  .nbp-masthead__grid { grid-template-columns: 1fr; row-gap: 12px; padding: 16px; }
  .nbp-masthead__center { order: -1; }
  /* Keep the labeled mobile Search button visible — search must remain
     obvious on phones, not hidden behind a hamburger. */
  .nbp-masthead__actions { justify-content: center; gap: 8px; }
  .nbp-masthead__title { font-size: 32px; }
  .nbp-masthead__tagline { display: none; }
  .nbp-masthead__logo--bundled { max-height: 72px; max-width: 88vw; }
  .nbp-nav__inner { padding: 0 16px; gap: 12px; }
  .nbp-nav__list { gap: 18px; }
  .nbp-nav__all { padding: 0 10px; font-size: 12px; }
  .nbp-home__section-grid, .nbp-home__premium-grid, .nbp-home__opinion-grid,
  .nbp-section__secondary, .nbp-subscribe__benefits-grid,
  .nbp-subscribe__preview-grid, .nbp-subscribe__preview-cards,
  .nbp-contact__directory-grid, .nbp-authors__grid,
  .nbp-related__grid, .nbp-trust__grid {
    grid-template-columns: 1fr;
  }
  /* Contact phone polish: tighten card padding + headline. */
  .nbp-contact__head { font-size: 36px; margin-top: 8px; }
  .nbp-contact__dek { font-size: 17px; }
  .nbp-contact__main { padding: 48px 20px; }
  .nbp-contact__header { padding: 48px 0; }
  .nbp-contact__form-card, .nbp-contact__alert { padding: 24px; }
  .nbp-contact__secure { padding: 28px 24px; }
  .nbp-contact__secure h2 { font-size: 22px; }
  .nbp-subscribe__benefits, .nbp-subscribe__plans, .nbp-subscribe__letter,
  .nbp-subscribe__preview-block, .nbp-subscribe__faq, .nbp-subscribe__final {
    padding: 56px 0;
  }
  .nbp-subscribe__benefits-title { font-size: 28px; }
  .nbp-subscribe__faq-title { font-size: 26px; }
  .nbp-subscribe__final-title { font-size: 30px; }
  .nbp-letter, .nbp-subscribe__letter .nbp-letter { font-size: 22px; }
  .nbp-plan { padding: 24px; }
  .nbp-spotlight { padding: 48px 0; }
  .nbp-spotlight .nbp-container { padding-left: 20px; padding-right: 20px; }
  .nbp-spotlight__head { grid-template-columns: 1fr; align-items: start; padding-bottom: 16px; margin-bottom: 28px; }
  .nbp-spotlight__head .nbp-spotlight__see-all { display: none; }
  .nbp-spotlight__see-all--mobile { display: inline-flex; margin-top: 24px; }
  .nbp-spotlight__grid { grid-template-columns: 1fr; gap: 40px; }
  .nbp-spotlight__title { font-size: 28px; }
  .nbp-spotlight__lede { font-size: 14px; }
  .nbp-spotlight__quote { font-size: 18px; }
  .nbp-spotlight__media { margin-bottom: 18px; }
  .nbp-mega__grid { grid-template-columns: 1fr; gap: 20px; }
  .nbp-mega__inner { padding: 20px 16px; }
  .nbp-mega__sub { margin-left: 8px; padding-left: 8px; }
  .nbp-footer__main { grid-template-columns: 1fr; padding: 28px 16px; }
  .nbp-footer__brand { grid-column: auto; }
  .nbp-footer__convert-grid { padding: 28px 16px; }
  .nbp-search-overlay { padding: 24px 12px; }
  .nbp-search-overlay__sheet { padding: 20px; }
  .nbp-search-overlay__inputrow { height: 48px; padding: 0 10px; }
  .nbp-search-overlay__inputrow input { font-size: 18px; }
  .nbp-search-overlay__hints { grid-template-columns: 1fr; gap: 18px; }
  .nbp-search-overlay__inputrow .nbp-btn--ink { display: none; }
  .nbp-article__head { font-size: 26px; }
  .nbp-lead__head { font-size: 28px; }
  .nbp-prose { font-size: 17px; }
  /* Drop caps look awful at phone widths with a 5em first letter. */
  .nbp-article__body.nbp-prose > p:first-of-type::first-letter { float: none; font-size: inherit; padding: 0; }
  .nbp-prose blockquote { font-size: 20px; padding-left: 16px; }
  .nbp-prose h2 { font-size: 24px; }
  .nbp-section__title, .nbp-subscribe__head { font-size: 32px; }
  .nbp-section__dek, .nbp-subscribe__dek { font-size: 16px; }
  .nbp-author__hero-grid { grid-template-columns: 1fr; text-align: left; }
  .nbp-author__avatar { width: 160px; height: auto; }
  .nbp-author__name { font-size: 28px; }
  /* Hero image bleeds edge-to-edge on phones (newsroom convention). */
  .nbp-article__hero { margin: 16px 0; }
  .nbp-article__layout { padding: 12px 16px; gap: 16px; }
  .nbp-related { padding: 16px; }
  .nbp-policy__wrap { padding: 32px 16px; }
  .nbp-contact__main, .nbp-contact__header-inner, .nbp-contact__newsletter { padding-left: 16px; padding-right: 16px; }
  .nbp-policy__header { padding: 40px 16px 32px; }
  .nbp-policy__head { font-size: 32px; }
  .nbp-policy__dek { font-size: 17px; }
  .nbp-policy__section { margin-bottom: 40px; }
  .nbp-policy__section-title { font-size: 26px; margin-bottom: 16px; }
  .nbp-policy__section-body { font-size: 17px; }
  .nbp-policy__board-list { grid-template-columns: 1fr; }
  /* Pricing cards become full-bleed on phones. */
  .nbp-plans__grid, .nbp-plans__grid--two { padding: 0 16px; }
  /* Buttons that sit side-by-side stack vertically. */
  .nbp-subscribe__hero-cta, .nbp-author__actions, .nbp-footer__convert-cta {
    flex-direction: column; align-items: stretch;
  }
  .nbp-subscribe__hero-cta .nbp-btn,
  .nbp-author__actions .nbp-btn,
  .nbp-footer__convert-cta .nbp-btn { justify-content: center; }
}

/* Phone (≤720px): fully stack the section page. The 1024px rule
   above collapses the 3-col into feed (1fr) + center (2fr), but at
   phone widths the feed column becomes ~110px wide and headlines
   reflow to one word per line. Stack everything to a single column
   so each card uses the full width of the viewport. */
@media (max-width: 720px) {
  .nbp-section__three-col {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 40px;
  }
  .nbp-section__feed-col,
  .nbp-section__center-col,
  .nbp-section__rail { grid-column: 1 / -1; }
  .nbp-section__rail { flex-direction: column; }
  .nbp-section__rail > * { flex: 1 1 auto; }
  /* The 2-up small-card grid inside the center column collapses too. */
  .nbp-section__twoup { grid-template-columns: 1fr; gap: 24px; }
  /* Section masthead tightens its padding so the page feels phone-native. */
  .nbp-section__masthead { padding: 20px 16px 16px; }
  .nbp-section__three-col { padding-left: 16px; padding-right: 16px; }
}

/* Small phone (≤480px) */
@media (max-width: 480px) {
  :root { --nbp-w: 100%; }
  .nbp-container { padding: 0 16px; }
  .nbp-masthead__title { font-size: 28px; }
  .nbp-article__head { font-size: 22px; }
  .nbp-lead__head { font-size: 24px; }
  .nbp-card--xl .nbp-card__headline { font-size: 26px; }
  /* Even tighter ad slots on the smallest phones so 320px-wide creatives fit. */
  .nbp-ad--rectangle .nbp-ad__inner { min-height: 250px; }
  .nbp-ad--leaderboard .nbp-ad__inner { min-height: 50px; }
}

/* ==========================================================================
   Koenig editor cards
   --------------------------------------------------------------------------
   Required by Ghost / GScan: any image, gallery, bookmark, embed, button,
   callout, toggle, header, product, video, audio, file, or signup card the
   editor produces is wrapped in classes prefixed with .kg-. The theme MUST
   style at least .kg-width-wide and .kg-width-full so wide/full-bleed images
   render correctly. We extend that with the full card set so every editor
   block looks intentional inside the NewBostonPost article column.
   ========================================================================== */

/* Width modifiers — applied to figures inside the article column.
   The article column is ~720px; "wide" lets media break out to roughly the
   page measure, "full" spans the viewport edge-to-edge.
   Each required class is declared as its own simple rule so theme validators
   reliably detect the selector. */
.kg-width-wide {
  position: relative;
  width: min(100vw, 1040px);
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
}
.kg-width-full {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
}
.kg-width-full img {
  width: 100%;
  height: auto;
  display: block;
}

/* Image card — caption styling that matches our serif body copy. */
.kg-image-card { margin: 24px 0; }
.kg-image-card img { display: block; width: 100%; height: auto; border-radius: 2px; }

/* v1.0.200 — Defensive cap on in-body images. Editors occasionally
   paste full-resolution logos / source images (e.g. a 1500px square
   "CW Beacon" mark) directly into a post; without a cap those images
   stretch the prose column or blow up the article layout. This rule
   bounds every <img> inside the reading column to a sensible printable
   height while preserving aspect ratio and centering. Wide hero-card
   images (.kg-width-wide, .kg-width-full) keep their bleed behavior. */
.nbp-prose img,
.nbp-prose figure img,
.nbp-prose .kg-image-card:not(.kg-width-wide):not(.kg-width-full) img {
  max-height: 480px;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* v1.0.214 — In-body caption block. Centered italic looked amateur
   for editorial; switched to left-aligned italic serif that hugs the
   image's left edge — classic broadsheet style. The companion
   `.nbp-cap__*` rules below split the photo credit onto its own line. */
.kg-image-card figcaption,
.kg-gallery-card figcaption,
.kg-embed-card figcaption,
.kg-video-card figcaption,
.kg-audio-card figcaption {
  font-family: "Source Serif 4", Georgia, serif !important;
  font-size: 14px;
  font-style: italic;
  color: var(--nbp-ink-2, #4a5566) !important;
  text-align: left;
  margin: 10px 0 0;
  line-height: 1.5;
  display: block;
}

/* v1.0.214 — Photo-credit substructure (rendered by main-v172.js).
   The JS pass splits "Caption text — Photo by Jane Doe / Reuters" into
   <span.nbp-cap__text> + <span.nbp-cap__credit>. CSS then renders the
   credit as a small uppercase-tracked muted-gold line below the caption
   body, matching the broadsheet convention. The label ("PHOTO",
   "ILLUSTRATION", "CREDIT", etc.) sits in its own .nbp-cap__credit-label
   span so we can color-accent it without separating the body. */
.nbp-cap__text {
  display: block;
}
.nbp-cap__credit {
  display: block;
  margin-top: 6px;
  font-family: var(--nbp-sans) !important;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nbp-text-mute) !important;
  line-height: 1.4;
}
.nbp-cap__credit-label {
  color: var(--nbp-gold) !important;
  font-weight: 700;
  margin-right: 6px;
}
.nbp-cap__credit-body {
  color: var(--nbp-text-mute) !important;
}

/* Gallery card — Ghost emits .kg-gallery-container > .kg-gallery-row > .kg-gallery-image */
.kg-gallery-card { margin: 24px 0; }
.kg-gallery-container { display: flex; flex-direction: column; gap: 8px; }
.kg-gallery-row { display: flex; flex-direction: row; justify-content: center; gap: 8px; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; margin: 0; }

/* Bookmark card — link preview block. */
.kg-bookmark-card { margin: 24px 0; }
.kg-bookmark-container {
  display: flex;
  min-height: 148px;
  color: var(--nbp-ink, #0B1B2B) !important;
  background: var(--nbp-paper, #FBF9F4) !important;
  border: 1px solid rgba(11,27,43,.12);
  border-radius: 3px;
  text-decoration: none;
  overflow: hidden;
}
.kg-bookmark-container:hover { border-color: var(--nbp-red, #B0241F) !important; }
.kg-bookmark-content { flex: 1 1 auto; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.kg-bookmark-title { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; font-size: 18px; line-height: 1.3; color: var(--nbp-ink) !important; }
.kg-bookmark-description { font-family: "Source Serif 4", Georgia, serif !important; font-size: 14px; line-height: 1.5; color: var(--nbp-ink-2, #4a5566) !important; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kg-bookmark-metadata { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: Inter, system-ui, sans-serif !important; font-size: 12px; color: var(--nbp-ink-2, #4a5566) !important; }
.kg-bookmark-metadata .kg-bookmark-icon { width: 16px; height: 16px; }
.kg-bookmark-metadata .kg-bookmark-author::after { content: "•"; margin-left: 8px; color: rgba(11,27,43,.4) !important; }
.kg-bookmark-thumbnail { flex: 0 0 33%; min-height: 100%; position: relative; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Embed card — YouTube, Twitter/X, etc. Make iframes responsive. */
.kg-embed-card { margin: 24px 0; display: flex; flex-direction: column; align-items: center; }
.kg-embed-card iframe { max-width: 100%; }

/* Button card */
.kg-button-card { margin: 24px 0; text-align: center; }
.kg-button-card.kg-align-left { text-align: left; }
.kg-btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  background: var(--nbp-red, #B0241F) !important;
  color: #fff !important;
  transition: background 120ms ease;
}
.kg-btn:hover { background: #8d1c19 !important; }
.kg-btn-accent { background: var(--nbp-red, #B0241F) !important; color: #fff !important; }

/* v1.0.187 — Defensive "dark CTA → white text" sweep.
   Editors regularly paste raw <a> tags into Ghost cards with an inline
   background (e.g. `<a href="..." style="background:#B0241F">Become a
   Subscriber Today</a>`). Those anchors don't pick up `.kg-btn` or
   `.nbp-btn--*` so the global `a { color: var(--nbp-blue) !important; }`
   wins and the button text renders blue-on-red — visually broken.
   This rule catches every inline-styled background variant of the brand
   ink + red we ship, plus the legacy lowercase/spaced rgb() forms Ghost
   sometimes emits, and forces white text + no underline. The selectors
   are intentionally high-specificity (class + attribute) so they beat
   the global `a {...!important}` from the reset block. */
a[style*="#B0241F" i], a[style*="#b0241f" i],
a[style*="#8A1B17" i], a[style*="#8a1b17" i],
a[style*="#8d1c19" i], a[style*="#8D1C19" i],
a[style*="#0B1B2B" i], a[style*="#0b1b2b" i],
a[style*="#000" i], a[style*="#111" i], a[style*="#222" i],
a[style*="#1a1a1a" i], a[style*="#1f1f1f" i],
a[style*=":black" i], a[style*=": black" i],
a[style*="rgb(0, 0, 0)"], a[style*="rgb(0,0,0)"],
a[style*="rgb(176, 36, 31)"], a[style*="rgb(176,36,31)"],
a[style*="rgb(11, 27, 43)"],   a[style*="rgb(11,27,43)"],
a[style*="rgb(138, 27, 23)"],  a[style*="rgb(138,27,23)"] {
  color: #fff !important;
  text-decoration: none !important;
}
a[style*="#B0241F" i] *, a[style*="#b0241f" i] *,
a[style*="#0B1B2B" i] *, a[style*="#0b1b2b" i] *,
a[style*="#000" i] *, a[style*="#111" i] *, a[style*="#1a1a1a" i] *,
a[style*=":black" i] *, a[style*=": black" i] *,
a[style*="rgb(0, 0, 0)"] *, a[style*="rgb(0,0,0)"] *,
a[style*="rgb(176, 36, 31)"] *, a[style*="rgb(176,36,31)"] *,
a[style*="rgb(11, 27, 43)"] *, a[style*="rgb(11,27,43)"] * {
  color: #fff !important;
}

/* Same protection for buttons rendered with our own brand classes
   even when they appear OUTSIDE `.nbp-prose` (e.g. inside a Ghost
   editor-inserted card or a raw HTML block on a Page). The existing
   `.nbp-prose a.nbp-btn--red` rule only covered the prose context. */
a.nbp-btn--red, a.nbp-btn--ink, a.nbp-btn--primary,
.kg-card a.nbp-btn--red, .kg-card a.nbp-btn--ink, .kg-card a.nbp-btn--primary,
.kg-callout-card a[href][style*="background"],
.kg-callout-card a.kg-btn,
.kg-callout-card a[class*="btn"] {
  color: #fff !important;
  text-decoration: none !important;
}

/* v1.0.208 / v1.0.212 — "Stories You Might Like" rail block.
   Two-column row (96px thumb + flex headline) with a soft rule between
   items. Thumb uses object-fit: cover + 4:3 aspect so even portrait
   feature images crop cleanly into a uniform tile column. */
.nbp-rail__alsolike { margin-top: 28px; }
.nbp-rail__alsolike-list { list-style: none; padding: 0; margin: 0; }
.nbp-rail__alsolike-item {
  border-top: 1px solid var(--nbp-rule);
  padding: 14px 0;
}
.nbp-rail__alsolike-item:first-child { border-top: 0; padding-top: 4px; }
.nbp-rail__alsolike-link {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: start;
  text-decoration: none !important;
  color: var(--nbp-ink) !important;
}
.nbp-rail__alsolike-thumb {
  width: 96px;
  aspect-ratio: 4 / 3;
  background: var(--nbp-rule);
  overflow: hidden;
  border-radius: 2px;
}
.nbp-rail__alsolike-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nbp-rail__alsolike-body { min-width: 0; }
.nbp-rail__alsolike-tag {
  display: block;
  margin: 0 0 4px;
  font-size: 10px !important;
}
.nbp-rail__alsolike-headline {
  font-family: var(--nbp-serif) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--nbp-ink) !important;
}
.nbp-rail__alsolike-link:hover .nbp-rail__alsolike-headline { color: var(--nbp-red) !important; }

/* v1.0.204 — "You Might Also Like" sits below the primary "More from
   {beat}" grid and uses the same .nbp-article__related-grid layout.
   Visually separate the two with a top rule and a touch more breathing
   room so they don't read as a single eight-card wall. */
.nbp-article__alsolike {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--nbp-rule);
}

/* v1.0.203 — Content-link gold accent. Globally `a` is forced
   blue (line 58) for utility/nav consistency, but inline links
   INSIDE the reading body should pick up the brand gold so they
   read as editorial accents rather than UI-blue web links. Scoped
   to `.nbp-prose a` (article + page body, paywall excerpts) and
   excludes anchors that are styled as buttons (their text must
   stay white on dark / brand-colored on light) or that have been
   marked by the JS contrast enforcer. */
.nbp-prose a,
.nbp-prose a:link,
.nbp-prose a:visited {
  color: var(--nbp-gold) !important;
  text-decoration: underline;
  text-decoration-color: var(--nbp-gold-soft);
  text-underline-offset: 3px;
}
.nbp-prose a:hover,
.nbp-prose a:focus {
  color: var(--nbp-red) !important;
  text-decoration-color: var(--nbp-red) !important;
}
/* Don't gold-ify button-like anchors inside prose. */
.nbp-prose a.nbp-btn,
.nbp-prose a.nbp-btn--red,
.nbp-prose a.nbp-btn--ink,
.nbp-prose a.nbp-btn--gold,
.nbp-prose a.nbp-btn--primary,
.nbp-prose a.kg-btn,
.nbp-prose a[data-nbp-contrast="done"] {
  color: #fff !important;
  text-decoration: none !important;
}

/* v1.0.199 — Hover lock for the JS contrast enforcer. The v1.0.193
   walker writes `data-nbp-contrast="done"` on every anchor it has
   re-painted white. We then add a CSS rule that re-applies white text
   in EVERY state (link / visited / hover / focus / active) and on every
   descendant element so a more-specific external `:hover` selector
   targeting an inner text span (which our inline-style descendant
   walk had to fight) can't claw the color back to brand-red. The
   attribute selector keeps this scoped strictly to buttons the JS
   already verified are dark-backgrounded — body-prose inline links
   are untouched. */
a[data-nbp-contrast="done"],
a[data-nbp-contrast="done"]:link,
a[data-nbp-contrast="done"]:visited,
a[data-nbp-contrast="done"]:hover,
a[data-nbp-contrast="done"]:focus,
a[data-nbp-contrast="done"]:active,
a[data-nbp-contrast="done"] *,
a[data-nbp-contrast="done"]:hover * {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Callout card — colored block with optional emoji. */
.kg-callout-card {
  display: flex;
  margin: 24px 0;
  padding: 20px;
  border-radius: 3px;
  background: rgba(176,136,59,.08) !important;
  border-left: 3px solid var(--nbp-gold, #B0883B);
}
.kg-callout-card-grey { background: rgba(11,27,43,.04) !important; border-left-color: rgba(11,27,43,.4); }
.kg-callout-card-blue { background: rgba(11,27,43,.06) !important; border-left-color: var(--nbp-ink, #0B1B2B); }
.kg-callout-card-green { background: rgba(60,128,72,.08) !important; border-left-color: #3c8048; }
.kg-callout-card-yellow { background: rgba(176,136,59,.12) !important; border-left-color: var(--nbp-gold, #B0883B); }
.kg-callout-card-red { background: rgba(176,36,31,.08) !important; border-left-color: var(--nbp-red, #B0241F); }
.kg-callout-card-pink { background: rgba(176,36,31,.06) !important; border-left-color: var(--nbp-red, #B0241F); }
.kg-callout-card-purple { background: rgba(60,40,90,.08) !important; border-left-color: #3c285a; }
.kg-callout-card-accent { background: rgba(176,36,31,.08) !important; border-left-color: var(--nbp-red, #B0241F); color: var(--nbp-ink) !important; }
.kg-callout-emoji { flex: 0 0 auto; font-size: 20px; margin-right: 12px; line-height: 1.5; }
.kg-callout-text { flex: 1 1 auto; font-family: "Source Serif 4", Georgia, serif !important; font-size: 16px; line-height: 1.6; color: var(--nbp-ink, #0B1B2B) !important; }

/* Toggle (collapsible) card */
.kg-toggle-card {
  margin: 24px 0;
  padding: 16px 20px;
  border: 1px solid rgba(11,27,43,.12);
  border-radius: 3px;
}
.kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.kg-toggle-heading-text { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; font-size: 18px; color: var(--nbp-ink) !important; margin: 0; }
.kg-toggle-card-icon { width: 14px; height: 14px; transition: transform 200ms ease; }
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; }
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-card-icon { transform: rotate(-90deg); }
.kg-toggle-content { padding-top: 12px; font-family: "Source Serif 4", Georgia, serif !important; font-size: 16px; line-height: 1.6; color: var(--nbp-ink) !important; }

/* Header card — large hero block inside an article. */
.kg-header-card { margin: 32px 0; padding: 48px 24px; text-align: center; background: var(--nbp-ink, #0B1B2B) !important; color: #fff !important; border-radius: 3px; }
.kg-header-card.kg-style-light { background: var(--nbp-paper, #FBF9F4) !important; color: var(--nbp-ink) !important; }
.kg-header-card .kg-header-card-heading { font-family: "Playfair Display", Georgia, serif !important; font-weight: 800 !important; font-size: 36px; line-height: 1.15; margin: 0; }
.kg-header-card .kg-header-card-subheading { font-family: "Source Serif 4", Georgia, serif !important; font-size: 18px; font-style: italic; margin-top: 12px; opacity: .85; }

/* Product card */
.kg-product-card { margin: 24px 0; padding: 20px; border: 1px solid rgba(11,27,43,.12); border-radius: 3px; }
.kg-product-card-container { display: flex; flex-direction: column; gap: 12px; }
.kg-product-card-image { width: 100%; height: auto; border-radius: 2px; }
.kg-product-card-title { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; font-size: 22px; color: var(--nbp-ink) !important; margin: 0; }
.kg-product-card-rating { color: var(--nbp-gold, #B0883B) !important; }
.kg-product-card-description { font-family: "Source Serif 4", Georgia, serif !important; font-size: 16px; line-height: 1.6; color: var(--nbp-ink) !important; }

/* Video, audio, file cards */
.kg-video-card,
.kg-audio-card,
.kg-file-card { margin: 24px 0; }
.kg-video-card video,
.kg-audio-card audio { width: 100%; }
.kg-file-card a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(11,27,43,.12);
  border-radius: 3px;
  text-decoration: none;
  color: var(--nbp-ink) !important;
}
.kg-file-card a:hover { border-color: var(--nbp-red, #B0241F) !important; }

/* Signup card — Ghost members signup form embedded in a post. */
.kg-signup-card { margin: 24px 0; padding: 32px; border-radius: 3px; background: var(--nbp-ink, #0B1B2B) !important; color: #fff !important; text-align: center; }
.kg-signup-card-heading { font-family: "Playfair Display", Georgia, serif !important; font-weight: 800 !important; font-size: 26px; line-height: 1.2; margin: 0; }
.kg-signup-card-subheading { font-family: "Source Serif 4", Georgia, serif !important; font-size: 16px; opacity: .85; margin-top: 8px; }
.kg-signup-card-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.kg-signup-card-form input { padding: 12px 14px; border-radius: 2px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06) !important; color: #fff !important; min-width: 240px; font-family: Inter, system-ui, sans-serif !important; }
.kg-signup-card-form input::placeholder { color: rgba(255,255,255,.55) !important; }
.kg-signup-card-form button { padding: 12px 20px; border: 0; border-radius: 2px; background: var(--nbp-red, #B0241F) !important; color: #fff !important; font-family: Inter, system-ui, sans-serif !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }

/* Responsive: collapse wide/full to column width on phones, stack bookmark
   thumbnail under content, drop gallery to a single column. */
@media (max-width: 768px) {
  .nbp-prose .kg-width-wide,
  .nbp-prose .kg-width-full,
  .kg-width-wide,
  .kg-width-full {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
  .kg-bookmark-container { flex-direction: column-reverse; }
  .kg-bookmark-thumbnail { flex: 0 0 200px; }
  .kg-gallery-row { flex-direction: column; }
  .kg-header-card { padding: 32px 16px; }
  .kg-header-card .kg-header-card-heading { font-size: 28px; }
}

/* Empty-state message for tag/author/section feeds with no posts */
.nbp-empty {
  margin: 24px 0 0;
  padding: 24px;
  color: var(--nbp-mute) !important;
  font-style: italic;
  text-align: center;
  background: rgba(0,0,0,0.02) !important;
  border: 1px dashed rgba(11,27,43,0.15);
  border-radius: 4px;
}

/* ============================================================
   v28 — Premium interior page treatment (page.hbs nbp-page--v2)
   Hero band + 2-col layout + sticky TOC + related + quick cards.
   ============================================================ */
.nbp-page--v2 { display: block; padding: 0; }

/* ---- Full-bleed ink hero ---- */
.nbp-page__hero {
  background: var(--nbp-ink) !important;
  color: var(--nbp-paper) !important;
  padding: 56px 0 48px;
  border-bottom: 4px solid var(--nbp-gold);
  position: relative;
}
.nbp-page__hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px; height: 1px;
  background: rgba(176, 136, 59, 0.45) !important;
}
.nbp-page__hero-inner { max-width: 920px; }
.nbp-page__hero-eyebrow {
  color: var(--nbp-gold) !important;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600 !important;
  text-transform: uppercase;
}
.nbp-page__hero-title {
  font-family: var(--nbp-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--nbp-paper) !important;
}
.nbp-page__hero-dek {
  font-family: var(--nbp-serif) !important;
  font-weight: 400 !important;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  margin: 0 0 22px;
  color: rgba(251, 249, 244, 0.82) !important;
  max-width: 740px;
}
.nbp-page__hero-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: rgba(251, 249, 244, 0.6) !important;
  letter-spacing: 0.04em;
}
.nbp-page__hero-meta time { color: rgba(251, 249, 244, 0.85) !important; }

/* Feature image, if present */
.nbp-page__feature { margin: 0; padding: 24px 0 0; background: var(--nbp-paper) !important; }
.nbp-page__feature img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: cover;
  border-radius: 2px;
}
.nbp-page__feature figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--nbp-mute) !important;
  font-style: italic;
}

/* ---- Two-column body layout ---- */
.nbp-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  padding-top: 56px;
  padding-bottom: 64px;
  align-items: start;
}
.nbp-page__main { min-width: 0; }

/* The prose block already inherits from .nbp-prose. Add page-specific
   typographic touches: larger lead paragraph, framed callouts. */
.nbp-page--v2 .nbp-page__body {
  font-size: 18px;
  line-height: 1.72;
  color: var(--nbp-ink) !important;
  max-width: 720px;
}
.nbp-page--v2 .nbp-page__body > p:first-of-type {
  font-size: 21px;
  line-height: 1.55;
  color: #1a2c3f !important;
  margin-top: 0;
}
.nbp-page--v2 .nbp-page__body h2 {
  font-family: var(--nbp-serif) !important;
  font-weight: 800 !important;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 48px 0 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(11, 27, 43, 0.12);
  color: var(--nbp-ink) !important;
  scroll-margin-top: 96px;
}
.nbp-page--v2 .nbp-page__body h3 {
  font-family: var(--nbp-serif) !important;
  font-weight: 700 !important;
  font-size: 21px;
  line-height: 1.3;
  margin: 32px 0 10px;
  color: var(--nbp-ink) !important;
  scroll-margin-top: 96px;
}
.nbp-page--v2 .nbp-page__body a {
  color: var(--nbp-red) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.nbp-page--v2 .nbp-page__body a:hover { color: #8a1c18 !important; }
.nbp-page--v2 .nbp-page__body ul,
.nbp-page--v2 .nbp-page__body ol {
  padding-left: 1.4em;
  margin: 16px 0;
}
.nbp-page--v2 .nbp-page__body li { margin: 6px 0; }
.nbp-page--v2 .nbp-page__body blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  border-left: 4px solid var(--nbp-gold);
  background: rgba(176, 136, 59, 0.06) !important;
  font-family: var(--nbp-serif) !important;
  font-style: italic;
  font-size: 19px;
  color: #1a2c3f !important;
}
.nbp-page--v2 .nbp-page__body hr {
  border: none;
  border-top: 1px solid rgba(11, 27, 43, 0.18);
  margin: 40px 0;
}

/* "Reviewed by editorial team on …" pill */
.nbp-page__reviewed {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 48px;
  padding: 10px 16px;
  background: rgba(11, 27, 43, 0.04) !important;
  border: 1px solid rgba(11, 27, 43, 0.1);
  border-radius: 999px;
  font-size: 13px;
  color: var(--nbp-mute) !important;
  letter-spacing: 0.02em;
}
.nbp-page__reviewed-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nbp-gold) !important;
  box-shadow: 0 0 0 3px rgba(176, 136, 59, 0.18);
}
.nbp-page__reviewed time { color: var(--nbp-ink) !important; font-weight: 500 !important; }

/* ---- Sticky right rail ---- */
.nbp-page__rail { position: relative; align-self: start; }
/* v1.0.197 — rail scrolls independently on desktop when the stacked
   modules exceed viewport height. Mirrors the post.hbs `.nbp-article__rail`
   recipe from v1.0.186 (max-height tied to viewport minus a top inset,
   thin webkit scrollbar). Without this the sticky simply stopped working
   when the rail outgrew the viewport because position:sticky can't
   scroll its own overflow. */
.nbp-page__rail-sticky {
  position: sticky;
  top: 56px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--nbp-rule) transparent;
  padding-right: 4px;
}
.nbp-page__rail-sticky::-webkit-scrollbar { width: 6px; }
.nbp-page__rail-sticky::-webkit-scrollbar-track { background: transparent; }
.nbp-page__rail-sticky::-webkit-scrollbar-thumb { background: var(--nbp-rule); border-radius: 3px; }
.nbp-page__rail-sticky::-webkit-scrollbar-thumb:hover { background: var(--nbp-text-mute); }

/* TOC */
.nbp-page__toc {
  background: #fff !important;
  border: 1px solid rgba(11, 27, 43, 0.12);
  border-radius: 4px;
  padding: 18px 18px 16px;
}
.nbp-page__toc h3 { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.16em; }
.nbp-page__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.nbp-page__toc li { margin: 0; padding: 0; }
.nbp-page__toc li.is-h3 { padding-left: 16px; }
.nbp-page__toc a {
  display: block;
  padding: 7px 0 7px 12px;
  border-left: 2px solid transparent;
  color: #4a5b6e !important;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: color .15s, border-color .15s, background .15s;
}
.nbp-page__toc a:hover {
  color: var(--nbp-ink) !important;
  border-left-color: rgba(11, 27, 43, 0.4);
}
.nbp-page__toc a.is-active {
  color: var(--nbp-ink) !important;
  font-weight: 600 !important;
  border-left-color: var(--nbp-red);
  background: rgba(176, 136, 59, 0.06) !important;
}

/* Related-pages list */
.nbp-page__related {
  background: #fff !important;
  border: 1px solid rgba(11, 27, 43, 0.12);
  border-radius: 4px;
  padding: 18px;
}
.nbp-page__related h3 { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.16em; }
.nbp-page__related ul { list-style: none; margin: 0; padding: 0; }
.nbp-page__related li {
  border-top: 1px solid rgba(11, 27, 43, 0.08);
}
.nbp-page__related li:first-child { border-top: 0; }
.nbp-page__related a {
  display: block;
  padding: 11px 0;
  color: var(--nbp-ink) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500 !important;
  position: relative;
  padding-right: 22px;
  transition: color .15s;
}
.nbp-page__related a::after {
  content: '→';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nbp-gold) !important;
  font-weight: 400 !important;
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.nbp-page__related a:hover {
  color: var(--nbp-red) !important;
}
.nbp-page__related a:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}

/* Quick-answer card (contact, advertise, members) */
.nbp-page__card {
  background: var(--nbp-ink) !important;
  color: var(--nbp-paper) !important;
  border-radius: 4px;
  padding: 20px;
  position: relative;
  border-top: 3px solid var(--nbp-gold);
}
.nbp-page__card h3 {
  margin: 0 0 10px;
  color: var(--nbp-gold) !important;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.nbp-page__card p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.nbp-page__card p:last-child { margin-bottom: 0; }
.nbp-page__card a {
  color: var(--nbp-paper) !important;
  text-decoration: underline;
  text-decoration-color: rgba(176, 136, 59, 0.6);
  text-underline-offset: 3px;
  font-weight: 600 !important;
}
.nbp-page__card a:hover { color: #fff !important; text-decoration-color: var(--nbp-gold); }
.nbp-page__card .nbp-meta { color: rgba(251, 249, 244, 0.65) !important; }

/* Back-to-top button */
.nbp-page__totop {
  appearance: none;
  background: transparent !important;
  border: 1px solid rgba(11, 27, 43, 0.2);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--nbp-ink) !important;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.nbp-page__totop:hover {
  background: var(--nbp-ink) !important;
  color: var(--nbp-paper) !important;
  border-color: var(--nbp-ink) !important;
}

/* Bottom CTA strip */
.nbp-page__bottomcta {
  background: linear-gradient(180deg, transparent 0%, rgba(11, 27, 43, 0.03) 100%) !important;
  border-top: 1px solid rgba(11, 27, 43, 0.08);
  padding: 48px 0 24px;
  margin-top: 0;
}

/* ---- Mobile / small-screen ---- */
@media (max-width: 920px) {
  .nbp-page__hero { padding: 40px 0 32px; }
  .nbp-page__layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 40px;
  }
  .nbp-page__rail { order: -1; }
  .nbp-page__rail-sticky { position: static; }
  .nbp-page__toc { padding: 14px; }
  .nbp-page--v2 .nbp-page__body { font-size: 17px; }
  .nbp-page--v2 .nbp-page__body > p:first-of-type { font-size: 19px; }
  .nbp-page--v2 .nbp-page__body h2 { font-size: 23px; margin-top: 32px; padding-top: 16px; }
  .nbp-page--v2 .nbp-page__body h3 { font-size: 18px; margin-top: 22px; }
  .nbp-page__totop { display: none; }
}

/* ============================================================
   FRONT PAGE — 3-column newspaper top layout (v33)
   Renders the home hero as: Latest+Trending | Lead+Subs | Newsletter+Subs
   ============================================================ */
.nbp-frontpage {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: 32px;
  padding-top: 24px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(11, 27, 43, 0.08);
}

/* ---------- LEFT RAIL ---------- */
.nbp-frontpage__left {
  font-family: var(--nbp-sans, system-ui, sans-serif) !important;
  border-right: 1px solid rgba(11, 27, 43, 0.08);
  padding-right: 24px;
}
.nbp-fpblock { margin-bottom: 28px; }
.nbp-fpblock--ad { background: transparent !important; padding: 12px 0; text-align: center; }
.nbp-fpblock__head {
  font-family: var(--nbp-serif, Georgia, serif) !important;
  font-size: 18px;
  font-weight: 700 !important;
  color: var(--nbp-ink, #0B1B2B) !important;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--nbp-red, #B0241F);
}

/* Latest News list — timestamp + headline */
.nbp-latest-list { list-style: none; margin: 0; padding: 0; }
.nbp-latest-list__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(11, 27, 43, 0.06);
}
.nbp-latest-list__item:last-child { border-bottom: 0; }
.nbp-latest-list__time {
  font-size: 10.5px;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nbp-red, #B0241F) !important;
  padding-top: 2px;
}
.nbp-latest-list__head {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--nbp-ink, #0B1B2B) !important;
  text-decoration: none;
  font-weight: 500 !important;
}
.nbp-latest-list__head:hover { color: var(--nbp-red, #B0241F) !important; }

/* Trending Now list — numbered */
.nbp-trending-list { list-style: none; margin: 0; padding: 0; }
.nbp-trending-list__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(11, 27, 43, 0.06);
}
.nbp-trending-list__item:last-child { border-bottom: 0; }
.nbp-trending-list__num {
  font-family: var(--nbp-serif, Georgia, serif) !important;
  font-size: 22px;
  font-weight: 700 !important;
  color: var(--nbp-gold, #B0883B) !important;
  line-height: 1;
}
.nbp-trending-list__head {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--nbp-ink, #0B1B2B) !important;
  text-decoration: none;
  font-weight: 500 !important;
}
.nbp-trending-list__head:hover { color: var(--nbp-red, #B0241F) !important; }

/* ---------- CENTER ---------- */
.nbp-frontpage__main { min-width: 0; }
.nbp-fphero { margin: 0; }
.nbp-fphero__media {
  display: block;
  margin: 0 0 18px;
  overflow: hidden;
}
.nbp-fphero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.nbp-fphero__caption {
  font-size: 12px;
  color: var(--nbp-meta, #6b6b6b) !important;
  padding: 6px 2px 0;
  font-family: var(--nbp-sans, system-ui, sans-serif) !important;
}
.nbp-fphero__body { padding: 0 4px; }
.nbp-fphero__head {
  font-family: var(--nbp-serif, Georgia, serif) !important;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  font-weight: 700 !important;
  color: var(--nbp-ink, #0B1B2B) !important;
  margin: 12px 0 14px;
  letter-spacing: -0.01em;
}
.nbp-fphero__head a { color: inherit !important; text-decoration: none; }
.nbp-fphero__head a:hover { color: var(--nbp-red, #B0241F) !important; }
.nbp-fphero__dek {
  font-size: 17px;
  line-height: 1.45;
  color: #2c3a4a !important;
  margin: 0 0 14px;
  font-family: var(--nbp-serif, Georgia, serif) !important;
}

/* 2-up secondary cards under the hero */
.nbp-frontpage__subs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(11, 27, 43, 0.08);
}
.nbp-fpsub { margin: 0; }
.nbp-fpsub__media {
  display: block;
  margin: 0 0 12px;
  overflow: hidden;
}
.nbp-fpsub__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.nbp-fpsub__head {
  font-family: var(--nbp-serif, Georgia, serif) !important;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700 !important;
  margin: 8px 0 8px;
  color: var(--nbp-ink, #0B1B2B) !important;
}
.nbp-fpsub__head a { color: inherit !important; text-decoration: none; }
.nbp-fpsub__head a:hover { color: var(--nbp-red, #B0241F) !important; }

/* ---------- RIGHT RAIL ---------- */
.nbp-frontpage__right {
  font-family: var(--nbp-sans, system-ui, sans-serif) !important;
}

/* Newsletter ink card */
.nbp-fpnewsletter {
  background: var(--nbp-ink, #0B1B2B) !important;
  color: var(--nbp-paper, #FBF9F4) !important;
  padding: 22px 20px;
  margin-bottom: 24px;
}
.nbp-fpnewsletter .nbp-eyebrow--gold {
  color: var(--nbp-gold, #B0883B) !important;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700 !important;
  display: block;
  margin-bottom: 10px;
}
.nbp-fpnewsletter__head {
  font-family: var(--nbp-serif, Georgia, serif) !important;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700 !important;
  margin: 0 0 10px;
  color: var(--nbp-paper, #FBF9F4) !important;
}
.nbp-fpnewsletter__body {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(251, 249, 244, 0.78) !important;
  margin: 0 0 14px;
}
.nbp-fpnewsletter__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nbp-fpnewsletter__form input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(251, 249, 244, 0.25);
  background: rgba(251, 249, 244, 0.06) !important;
  color: var(--nbp-paper, #FBF9F4) !important;
  font-size: 14px;
  font-family: inherit !important;
  border-radius: 0;
  box-sizing: border-box;
}
.nbp-fpnewsletter__form input[type="email"]::placeholder { color: rgba(251, 249, 244, 0.45) !important; }
.nbp-fpnewsletter__form input[type="email"]:focus {
  outline: 2px solid var(--nbp-gold, #B0883B);
  outline-offset: -1px;
}
.nbp-fpnewsletter__fine {
  font-size: 11px;
  color: rgba(251, 249, 244, 0.55) !important;
  margin: 10px 0 0;
}

/* For Subscribers list */
.nbp-fpsubsblock { margin-bottom: 24px; }
.nbp-fpsubsblock .nbp-eyebrow--gold {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: var(--nbp-gold, #B0883B) !important;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--nbp-gold, #B0883B);
}
.nbp-fpsubs-list { list-style: none; margin: 0; padding: 0; }
.nbp-fpsubs-list__item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(11, 27, 43, 0.08);
}
.nbp-fpsubs-list__item:last-child { border-bottom: 0; }
.nbp-fpsubs-list__head {
  display: block;
  font-family: var(--nbp-serif, Georgia, serif) !important;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700 !important;
  color: var(--nbp-ink, #0B1B2B) !important;
  text-decoration: none;
  margin-bottom: 4px;
}
.nbp-fpsubs-list__head:hover { color: var(--nbp-red, #B0241F) !important; }
.nbp-fpsubs-list__dek {
  font-size: 12.5px;
  line-height: 1.4;
  color: #4a5560 !important;
  margin: 4px 0 6px;
}

/* Membership cream card */
.nbp-fpmember {
  background: #f5efe2 !important;
  padding: 22px 20px;
}
.nbp-fpmember .nbp-eyebrow--gold {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: var(--nbp-gold, #B0883B) !important;
  margin-bottom: 8px;
}
.nbp-fpmember__head {
  font-family: var(--nbp-serif, Georgia, serif) !important;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700 !important;
  margin: 0 0 12px;
  color: var(--nbp-ink, #0B1B2B) !important;
}
.nbp-fpmember__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #2c3a4a !important;
}
.nbp-fpmember__list li {
  padding: 4px 0 4px 18px;
  position: relative;
}
.nbp-fpmember__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--nbp-red, #B0241F) !important;
  font-weight: 700 !important;
}

/* Tablet: 2-col (stack right rail under center) */
@media (max-width: 1024px) {
  .nbp-frontpage {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
  }
  .nbp-frontpage__right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .nbp-fpnewsletter, .nbp-fpsubsblock, .nbp-fpmember { margin-bottom: 0; }
}

/* Mobile: full single column */
@media (max-width: 720px) {
  .nbp-frontpage {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 16px;
  }
  .nbp-frontpage__left {
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid rgba(11, 27, 43, 0.08);
    padding-bottom: 16px;
  }
  .nbp-frontpage__right {
    grid-template-columns: 1fr;
  }
  .nbp-frontpage__subs {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .nbp-fphero__head { font-size: 28px; }
}

/* ============================================================
   HIDE GHOST'S DEFAULT PAID-POST CTA (v35)
   Ghost auto-injects a red "This post is for paying subscribers only"
   block at the truncation point on paid posts. We render our own
   branded premium-upsell partial in post.hbs, so the default is hidden.
   ============================================================ */
.gh-post-upgrade-cta,
.gh-post-upgrade-cta-content,
[data-gh-portal-upgrade-cta] {
  display: none !important;
}

/* ========================================================================
     ABOUT PAGE  (custom/page-about.hbs at /about/)
     Mirrors artifacts/mockup-sandbox/.../About.tsx
     ======================================================================== */
  .nbp-about { color: var(--nbp-ink) !important; font-family: var(--nbp-sans) !important; }

  /* ----- Hero ------------------------------------------------------------- */
  .nbp-about__hero {
    background: var(--nbp-paper) !important;
    border-bottom: 1px solid var(--nbp-rule) !important;
    padding: 64px 0 80px;
  }
  .nbp-about__hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: end;
  }
  @media (min-width: 1000px) {
    .nbp-about__hero-grid { grid-template-columns: 1.4fr 1fr; gap: 64px; }
  }
  .nbp-about__title {
    font-family: var(--nbp-serif-d) !important;
    font-weight: 900 !important;
    font-size: 60px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--nbp-ink) !important;
    margin: 16px 0 24px;
  }
  @media (max-width: 720px) { .nbp-about__title { font-size: 40px; } }
  .nbp-about__dek {
    font-family: var(--nbp-serif-r) !important;
    font-size: 20px;
    line-height: 1.55;
    color: var(--nbp-text-mute) !important;
    max-width: 640px;
    margin: 0;
  }
  .nbp-about__hero-cta {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Dark stat panel */
  .nbp-about__statbox {
    background: var(--nbp-ink) !important;
    color: #fff !important;
    padding: 32px;
    border-top: 6px solid var(--nbp-gold) !important;
  }
  .nbp-about__statbox-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--nbp-gold) !important;
    margin-bottom: 16px;
  }
  .nbp-about__statbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin: 0;
  }
  .nbp-about__statbox-cell { margin: 0; }
  .nbp-about__statbox-cell--bordered {
    padding: 0 24px;
    border-left: 1px solid rgba(255,255,255,0.15) !important;
    border-right: 1px solid rgba(255,255,255,0.15) !important;
  }
  .nbp-about__statbox-cell dt {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.6) !important;
  }
  .nbp-about__statbox-cell dd { margin: 4px 0 0; }
  .nbp-about__statbox-num {
    font-family: var(--nbp-serif-d) !important;
    font-weight: 900 !important;
    font-size: 28px;
    line-height: 1;
    color: #fff !important;
  }
  .nbp-about__statbox-region {
    font-family: var(--nbp-serif-d) !important;
    font-weight: 900 !important;
    font-size: 18px;
    line-height: 1.1;
    color: #fff !important;
  }
  .nbp-about__statbox-note {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7) !important;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
  }

  /* ----- Generic numbered split section (mission, values head, etc.) ------ */
  .nbp-about__section {
    border-bottom: 1px solid var(--nbp-rule) !important;
    padding: 80px 0;
  }
  .nbp-about__section--white { background: #fff !important; }
  .nbp-about__section--paper { background: var(--nbp-paper) !important; }

  .nbp-about__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  @media (min-width: 900px) {
    .nbp-about__split { grid-template-columns: 260px 1fr; gap: 64px; }
  }
  .nbp-about__split--head { margin-bottom: 40px; align-items: end; }

  .nbp-about__split-rail .nbp-eyebrow { display: block; }
  .nbp-about__split-rule {
    margin-top: 16px;
    height: 3px;
    width: 48px;
    background: var(--nbp-red) !important;
  }
  .nbp-about__rail-note {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nbp-text-mute) !important;
  }

  .nbp-about__lede {
    font-family: var(--nbp-serif-d) !important;
    font-weight: 700 !important;
    font-size: 34px;
    line-height: 1.25;
    color: var(--nbp-ink) !important;
    margin: 0 0 28px;
  }
  .nbp-about__lede--sm {
    font-size: 26px;
    line-height: 1.3;
    margin: 0;
    max-width: 760px;
  }
  .nbp-about__copy {
    font-family: var(--nbp-serif-r) !important;
    font-size: 17px;
    line-height: 1.7;
    color: var(--nbp-text-mute) !important;
    max-width: 760px;
    margin: 0;
  }

  /* ----- Who-we-are fact strip ------------------------------------------- */
  .nbp-about__factstrip {
    background: var(--nbp-paper) !important;
    border-bottom: 1px solid var(--nbp-rule) !important;
    padding: 48px 0;
  }
  .nbp-about__factstrip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  @media (min-width: 600px) { .nbp-about__factstrip-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .nbp-about__factstrip-grid { grid-template-columns: repeat(4, 1fr); } }
  .nbp-about__fact { border-left: 2px solid var(--nbp-red) !important; padding-left: 20px; }
  .nbp-about__fact-k {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--nbp-text-soft) !important;
  }
  .nbp-about__fact-v {
    font-family: var(--nbp-serif-d) !important;
    font-weight: 700 !important;
    font-size: 22px;
    line-height: 1.15;
    color: var(--nbp-ink) !important;
    margin-top: 8px;
  }
  .nbp-about__fact-sub {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--nbp-text-mute) !important;
    margin-top: 6px;
  }

  /* ----- Values icon grid ------------------------------------------------- */
  .nbp-about__values-grid {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--nbp-rule) !important;
    border-left: 1px solid var(--nbp-rule) !important;
  }
  @media (min-width: 600px)  { .nbp-about__values-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .nbp-about__values-grid { grid-template-columns: repeat(5, 1fr); } }
  .nbp-about__value {
    border-right: 1px solid var(--nbp-rule) !important;
    border-bottom: 1px solid var(--nbp-rule) !important;
    padding: 24px;
    background: #fff !important;
    transition: background 0.15s ease;
  }
  .nbp-about__value:hover { background: var(--nbp-paper) !important; }
  .nbp-about__value-icon { color: var(--nbp-red) !important; }
  .nbp-about__value-title {
    font-family: var(--nbp-serif-d) !important;
    font-weight: 700 !important;
    font-size: 16px;
    line-height: 1.2;
    color: var(--nbp-ink) !important;
    margin: 16px 0 8px;
  }
  .nbp-about__value-body {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--nbp-text-mute) !important;
    margin: 0;
  }

  /* ----- Coverage pills + pullquote -------------------------------------- */
  .nbp-about__pills {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .nbp-about__pills a {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: #fff !important;
    border: 1px solid var(--nbp-ink) !important;
    color: var(--nbp-ink) !important;
    padding: 10px 16px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nbp-about__pills a:hover {
    background: var(--nbp-ink) !important;
    color: #fff !important;
  }
  .nbp-about__pullquote {
    font-family: var(--nbp-serif-r) !important;
    font-style: italic;
    font-size: 16px;
    line-height: 1.65;
    color: var(--nbp-text-mute) !important;
    border-left: 2px solid var(--nbp-red) !important;
    padding-left: 20px;
    max-width: 760px;
    margin: 0;
  }

  /* ----- Team grid + person cards (with real Ghost-storage portraits) ---- */
  .nbp-about__team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 48px;
  }
  .nbp-about__team-grid:last-child { margin-bottom: 0; }
  @media (min-width: 700px)  { .nbp-about__team-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .nbp-about__team-grid { grid-template-columns: repeat(3, 1fr); } }

  .nbp-about__person {
    background: #fff !important;
    border-top: 1px solid var(--nbp-rule) !important;
  }
  .nbp-about__person--featured { border-top: 3px solid var(--nbp-red) !important; }

  .nbp-about__person-photo {
    aspect-ratio: 4 / 5;
    background: var(--nbp-paper) !important;
    overflow: hidden;
  }
  .nbp-about__person-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.15);
    transition: filter 0.5s ease;
  }
  .nbp-about__person:hover .nbp-about__person-photo img { filter: grayscale(0); }

  .nbp-about__person-body { padding: 20px 0 0; }
  .nbp-about__person-role {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--nbp-red) !important;
    margin-bottom: 6px;
  }
  .nbp-about__person-name {
    font-family: var(--nbp-serif-d) !important;
    font-weight: 700 !important;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--nbp-ink) !important;
    margin: 0;
  }
  .nbp-about__person-bio {
    font-size: 14px;
    line-height: 1.6;
    color: var(--nbp-text-mute) !important;
    margin: 12px 0 0;
  }
  .nbp-about__person-mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nbp-ink) !important;
    margin-top: 16px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--nbp-rule) !important;
    text-decoration: none;
  }
  .nbp-about__person-mail:hover {
    color: var(--nbp-red) !important;
    border-bottom-color: var(--nbp-red) !important;
  }

  /* ----- Optional editor notice ----------------------------------------- */
  .nbp-about__notice {
    background: #fff !important;
    border-bottom: 1px solid var(--nbp-rule) !important;
    padding: 32px 0;
  }

  /* ----- FAQ accordion --------------------------------------------------- */
  .nbp-about__faqlist { border-top: 1px solid var(--nbp-rule) !important; }
  .nbp-about__faq {
    border-bottom: 1px solid var(--nbp-rule) !important;
    padding: 20px 0;
  }
  .nbp-about__faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--nbp-serif-d) !important;
    font-weight: 700 !important;
    font-size: 18px;
    line-height: 1.3;
    color: var(--nbp-ink) !important;
  }
  .nbp-about__faq summary::-webkit-details-marker { display: none; }
  .nbp-about__faq summary::marker { display: none; content: ''; }
  .nbp-about__faq-chev {
    flex-shrink: 0;
    color: var(--nbp-text-soft) !important;
    transition: transform 0.2s ease;
    display: inline-flex;
  }
  .nbp-about__faq[open] .nbp-about__faq-chev { transform: rotate(180deg); }
  .nbp-about__faq p {
    margin: 12px 0 0;
    font-family: var(--nbp-serif-r) !important;
    font-size: 15px;
    line-height: 1.65;
    color: var(--nbp-text-mute) !important;
    max-width: 680px;
  }
  .nbp-about__faq a { color: var(--nbp-red) !important; font-weight: 600; text-decoration: underline; }

  /* ----- Newsletter wrap ------------------------------------------------- */
  .nbp-about__newsletter-wrap { padding: 64px 24px; }

  /* ----- Smaller phones -------------------------------------------------- */
  @media (max-width: 600px) {
    .nbp-about__hero { padding: 40px 0 56px; }
    .nbp-about__section { padding: 56px 0; }
    .nbp-about__factstrip { padding: 40px 0; }
    .nbp-about__statbox { padding: 24px; }
    .nbp-about__statbox-cell--bordered { padding: 0 16px; }
    .nbp-about__lede { font-size: 26px; }
    .nbp-about__lede--sm { font-size: 22px; }
    .nbp-about__hero-cta .nbp-btn { width: 100%; justify-content: center; }
    .nbp-about__faq summary { font-size: 17px; }
  }
/* ========================================================================
   NEWSLETTER SIGNUP STATES
   Ghost's portal.min.js toggles `loading`, `success`, and `error` classes on
   any <form data-members-form="signup">. Style each state inline so the
   reader never sees a Portal modal — they get a "check your inbox" message
   right where the form was.
   ======================================================================== */

.nbp-newsletter__success,
.nbp-newsletter__error {
  display: none;
  font-family: var(--nbp-sans) !important;
  font-size: 14px;
  line-height: 1.55;
  padding: 14px 16px;
  border-radius: 2px;
  margin-top: 8px;
}

/* Default (light) variants — used inside dark .nbp-newsletter card.
   Inverts to readable on the ink background. */
.nbp-newsletter .nbp-newsletter__success,
.nbp-fpnewsletter .nbp-newsletter__success {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff !important;
}
.nbp-newsletter .nbp-newsletter__success strong,
.nbp-fpnewsletter .nbp-newsletter__success strong { color: var(--nbp-gold) !important; }
.nbp-newsletter .nbp-newsletter__error,
.nbp-fpnewsletter .nbp-newsletter__error {
  background: rgba(176,36,31,0.18) !important;
  border: 1px solid rgba(255,200,200,0.35);
  color: #fff !important;
}

/* Light-card variant (.nbp-newsletter--inline lives on cream paper) */
.nbp-newsletter--inline .nbp-newsletter__success {
  background: var(--nbp-gold-soft) !important;
  border: 1px solid rgba(176,136,59,0.35);
  color: var(--nbp-ink) !important;
}
.nbp-newsletter--inline .nbp-newsletter__success strong { color: var(--nbp-red) !important; }
.nbp-newsletter--inline .nbp-newsletter__error {
  background: #fdecec !important;
  border: 1px solid rgba(176,36,31,0.35);
  color: #6b1a18 !important;
}

/* Show success / error inline based on Ghost-injected form state classes.
   Forms are immediate siblings of the message divs (see HBS templates). */
form.nbp-newsletter__form.success,
form.nbp-fpnewsletter__form.success { display: none; }
form.nbp-newsletter__form.success ~ .nbp-newsletter__success,
form.nbp-fpnewsletter__form.success ~ .nbp-newsletter__success { display: block; }
form.nbp-newsletter__form.error ~ .nbp-newsletter__error,
form.nbp-fpnewsletter__form.error ~ .nbp-newsletter__error { display: block; }

/* Loading state — dim the button while Ghost is sending the magic link */
form.nbp-newsletter__form.loading button[type="submit"],
form.nbp-fpnewsletter__form.loading button[type="submit"] {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}
form.nbp-newsletter__form.loading button[type="submit"]::after,
form.nbp-fpnewsletter__form.loading button[type="submit"]::after {
  content: " \2026"; /* horizontal ellipsis */
}

/* ============================================================
   HOMEPAGE FRONT-PAGE LAYOUT (v58 — `.nbp-fp__*`)
   ------------------------------------------------------------
   Mirrors the canvas mockup at artifacts/mockup-sandbox/src/
   components/mockups/newbostonpost/Homepage.tsx. Replaces the
   older `.nbp-frontpage` variant entirely (the old rules above
   are now dead code; left in place so legacy custom HTML pages
   that still reference them keep rendering).

   Grid contract:
     1440px max-w wrapper
     12-col grid: 3 / 6 / 3 with 32px gap, items-start
     Each column is a flex-column with rhythmic vertical gap.
   ============================================================ */

.nbp-fp { padding: 40px 24px 0; max-width: var(--nbp-w); margin: 0 auto; }
.nbp-fp__leader { margin: 0 0 32px; }

/* ---- 3-col masthead -------------------------------------- */
.nbp-fp__masthead {
  display: grid !important;
  grid-template-columns: 3fr 6fr 3fr !important;
  gap: 32px !important;
  align-items: start !important;
}
.nbp-fp__left,
.nbp-fp__center,
.nbp-fp__right {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
.nbp-fp__left   { gap: 32px !important; }
.nbp-fp__center { gap: 32px !important; }
.nbp-fp__right  { gap: 32px !important; }

/* ---- LEFT: Latest News ----------------------------------- */
.nbp-fp__latest { display: block; }
/* Pull the section header flush with the top of the column so "Latest News"
   sits exactly at the same Y as the lead post's hero image in the center
   column (which has no top margin). Without this override, .nbp-sectionhead's
   default 36px top margin pushes the rule + label down and makes the left
   rail look misaligned against the image on desktop. */
/* Pulled up with a small negative top margin (-6px) to compensate for the
   line-height padding above the cap of "Latest News" — without it, the
   default 22px label sits ~5–6px below the column top because of the
   font's ascender leading, leaving a visible gap above the heading that
   makes it look unaligned vs the lead post's hero image (which has zero
   leading above its top edge). Combined with line-height: 1 on the label
   itself so the glyph TOP, not the line-box top, aligns with the image. */
/* v1.0.166 — final alignment. v1.0.165 zeroed the section-header's
   default 36px top margin which got the dark NEWSLETTER card top and
   the hero image top flush at column-zero, but the Latest News glyph
   cap was rendering ~8px ABOVE column-zero because Playfair's line-box
   sits with negative leading at the top (cap-top is above the line-box
   origin in this metric). Add 8px padding-top to push the cap DOWN
   onto the column-zero line where the image + card top edges live.
   Net result: all three column tops share the same horizontal eye-line
   on desktop. */
.nbp-fp__left  > .nbp-fp__latest > .nbp-sectionhead,
.nbp-fp__latest:first-child > .nbp-sectionhead {
  margin-top: 0 !important;
  padding-top: 30px !important;
}
/* Right-rail desktop alignment: same intent as the left-rail "Latest News"
   trick above. The first newsletter card in the right rail now opens with
   its gold "NEWSLETTER" eyebrow glyph-top sitting at column-zero so it
   visually aligns with "Latest News" (left) and the hero image top
   (center) on desktop. The dark card's TOP edge already sits at column
   zero; the default 28px top padding pushed the eyebrow text 28px below.
   Trim padding-top to 6px and apply line-height:1 + -6px margin on the
   first eyebrow to bring the glyph-top to ~zero. Side padding stays 28px
   so the card still reads as a padded ink block; bottom 28px untouched.
   Scoped to `.nbp-fp__right > .nbp-newsletter:first-child` so newsletter
   modules used elsewhere on the site (post.hbs sidebar, page.hbs CTA,
   subscribe page) are not affected. Mobile rule below this block resets
   the padding back to 28px since horizontal rail-alignment is irrelevant
   when the rail stacks below the lead. */
/* v1.0.166 — push the right-rail dark NEWSLETTER card down 8px so
   its top edge lines up with the hero image top and the (also pushed
   down 8px) Latest News glyph cap. Three flush tops on desktop. */
/* v1.0.169 — pull the gold "NEWSLETTER" eyebrow TEXT (not just the
   card top edge) up to the same horizontal eye-line as the Latest
   News glyph cap and the hero image top. Strategy: keep the card
   pushed down 23px so the dark rectangle top still anchors the right
   rail, but drop the card's natural 24px top padding to ~0 and pull
   the first eyebrow up with line-height:1 + a small negative margin
   so its glyph cap lands on the column-zero eye-line. Restore 16px
   bottom margin so the headline below the eyebrow doesn't crowd. */
@media (min-width: 1025px) {
  .nbp-fp__right > .nbp-newsletter:first-child {
    margin-top: 23px !important;
    padding-top: 4px !important;
  }
  .nbp-fp__right > .nbp-newsletter:first-child > .nbp-eyebrow:first-child {
    line-height: 1 !important;
    margin-top: -3px !important;
    margin-bottom: 16px !important;
  }
}
.nbp-fp__latest-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 24px !important; }
.nbp-fp__latest-item { display: flex !important; gap: 12px !important; align-items: flex-start !important; }
.nbp-fp__latest-time {
  font-family: var(--nbp-sans) !important; font-size: 11px !important; font-weight: 700 !important;
  color: var(--nbp-gold) !important; text-transform: uppercase; letter-spacing: 0.04em;
  width: 64px !important; flex-shrink: 0 !important; padding-top: 2px !important;
}
.nbp-fp__latest-head {
  font-family: var(--nbp-serif-d) !important; font-size: 15px !important; font-weight: 700 !important;
  line-height: 1.25 !important; color: var(--nbp-ink) !important; text-decoration: none !important;
  display: block !important; transition: color 120ms ease;
}
.nbp-fp__latest-head:hover { color: var(--nbp-red) !important; }

/* ---- LEFT: Trending block (paper-soft surface) ----------- */
.nbp-fp__trending {
  background: var(--nbp-rule-soft) !important; padding: 20px !important;
  display: flex !important; flex-direction: column !important; gap: 16px !important;
}
.nbp-fp__trending > .nbp-eyebrow { margin: 0 !important; color: var(--nbp-ink) !important; }
.nbp-fp__trending-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 24px !important; }
.nbp-fp__trending-item { display: flex !important; gap: 12px !important; align-items: flex-start !important; }
.nbp-fp__trending-num {
  font-family: var(--nbp-serif-d) !important; font-size: 24px !important; font-weight: 900 !important;
  color: var(--nbp-red) !important; opacity: 0.4 !important; line-height: 1 !important;
  flex-shrink: 0 !important;
}
.nbp-fp__trending-head {
  font-family: var(--nbp-serif-d) !important; font-size: 16px !important; font-weight: 700 !important;
  line-height: 1.22 !important; color: var(--nbp-ink) !important; text-decoration: none !important;
  display: block !important; transition: color 120ms ease;
}
.nbp-fp__trending-head:hover { color: var(--nbp-red) !important; }

/* ---- LEFT: optional ad rectangle ------------------------ */
.nbp-fp__rail-ad { background: transparent !important; padding: 12px 0 !important; text-align: center !important; }

/* ---- CENTER: 2-up secondary grid ------------------------ */
.nbp-fp__secondary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* ---- CENTER: Opinion & Commentary ----------------------- */
.nbp-fp__opinion { padding-top: 32px !important; border-top: 1px solid var(--nbp-rule) !important; }
.nbp-fp__opinion-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
.nbp-fp__op { display: grid !important; grid-template-columns: 48px 1fr !important; gap: 16px !important; align-items: flex-start !important; }
.nbp-fp__op-avatar {
  width: 48px !important; height: 48px !important; border-radius: 999px !important;
  background: var(--nbp-rule) !important; display: grid !important; place-items: center !important;
  text-decoration: none !important; overflow: hidden !important;
}
.nbp-fp__op-avatar > span {
  font-family: var(--nbp-serif-d) !important; font-size: 18px !important; font-weight: 700 !important;
  color: var(--nbp-text-mute) !important; line-height: 1 !important;
}
.nbp-fp__op-body { min-width: 0 !important; }
.nbp-fp__op-author {
  font-family: var(--nbp-sans) !important; font-size: 12px !important; font-weight: 700 !important;
  color: var(--nbp-red) !important; text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 4px !important;
}
.nbp-fp__op-head { font-family: var(--nbp-serif-d) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.22 !important; color: var(--nbp-ink) !important; margin: 0 !important; }
.nbp-fp__op-head a { color: inherit !important; text-decoration: none !important; transition: color 120ms ease; }
.nbp-fp__op-head a:hover { color: var(--nbp-ink-2) !important; }

/* ---- RIGHT: Premium framing card (gold tint) ------------- */
.nbp-fp__premium {
  background: linear-gradient(180deg, #fff, var(--nbp-gold-soft, #FAF4E6)) !important;
  border: 1px solid #E8DDC2 !important; padding: 24px !important;
}
.nbp-fp__premium-badge { margin-bottom: 16px !important; }
.nbp-fp__premium-head {
  font-family: var(--nbp-serif-d) !important; font-size: 20px !important; font-weight: 700 !important;
  line-height: 1.2 !important; color: var(--nbp-ink) !important; margin: 0 0 16px !important;
}
.nbp-fp__premium-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; }
.nbp-fp__premium-item { padding: 16px 0 !important; border-bottom: 1px solid var(--nbp-rule) !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.nbp-fp__premium-item:first-child { padding-top: 0 !important; }
.nbp-fp__premium-item:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
.nbp-fp__premium-link {
  font-family: var(--nbp-serif-d) !important; font-size: 16px !important; font-weight: 700 !important;
  line-height: 1.25 !important; color: var(--nbp-ink) !important; text-decoration: none !important;
  transition: color 120ms ease;
}
.nbp-fp__premium-link:hover { color: var(--nbp-red) !important; }
.nbp-fp__premium-time { font-family: var(--nbp-sans) !important; font-size: 11px !important; color: var(--nbp-text-mute) !important; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- RIGHT: Faith & Culture list ------------------------ */
.nbp-fp__faith-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 24px !important; }
.nbp-fp__faith-item { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.nbp-fp__faith-head { font-family: var(--nbp-serif-d) !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.22 !important; color: var(--nbp-ink) !important; margin: 0 !important; }
.nbp-fp__faith-head a { color: inherit !important; text-decoration: none !important; transition: color 120ms ease; }
.nbp-fp__faith-head a:hover { color: var(--nbp-red) !important; }
.nbp-fp__faith-time { font-family: var(--nbp-sans) !important; font-size: 11px !important; color: var(--nbp-text-mute) !important; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- TRUST STRIP wrap ----------------------------------- */
.nbp-fp__trust-wrap { margin: 64px 0 0 !important; }

/* ---- DEEP SECTIONS: 3-col with top + bottom rule -------- */
.nbp-fp__deep {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important;
  border-top: 1px solid var(--nbp-rule) !important;
  border-bottom: 1px solid var(--nbp-rule) !important;
  padding: 64px 0 !important;
  margin-top: 64px !important;
}
.nbp-fp__deep-col { display: flex !important; flex-direction: column !important; gap: 24px !important; min-width: 0 !important; }

/* v76 — text-only items in the bottom 3-col deep section. Replaces the
   old story-card layout="side" calls that squeezed text into ~80px in
   narrow columns. Matches the homepage mockup: section header + 2
   stacked headline+dek items, no thumbnails. */
.nbp-fp__deep-item {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nbp-rule);
}
.nbp-fp__deep-item:last-child { border-bottom: 0; padding-bottom: 0; }
.nbp-fp__deep-labels {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 2px;
}
.nbp-fp__deep-head {
  font-family: var(--nbp-serif) !important;
  font-size: 20px; font-weight: 700 !important;
  line-height: 1.2;
  color: var(--nbp-ink) !important;
  margin: 0;
}
.nbp-fp__deep-head a { color: inherit !important; text-decoration: none; }
.nbp-fp__deep-head a:hover { color: var(--nbp-red) !important; }
.nbp-fp__deep-dek {
  font-family: var(--nbp-sans) !important;
  font-size: 14px; line-height: 1.5;
  color: var(--nbp-text-mute) !important;
  margin: 0;
}

/* ---- FINAL: paywall + newsletter ------------------------ */
.nbp-fp__final { padding: 0 24px 64px !important; max-width: var(--nbp-w); margin: 64px auto 0 !important; display: flex !important; flex-direction: column !important; gap: 32px !important; }

/* ---- Responsive ---------------------------------------- */
@media (max-width: 1024px) {
  /* On tablets, the center column (lead hero) takes the full top row
     so the editor's chosen lead post is the first thing readers see.
     Left rail (Latest + Trending) drops below it, then right rail. */
  .nbp-fp__masthead { grid-template-columns: 1fr 1fr !important; }
  .nbp-fp__center { grid-column: 1 / -1 !important; order: -1 !important; }
  .nbp-fp__left   { order: 1 !important; }
  .nbp-fp__right  { order: 2 !important; grid-column: 1 / -1 !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 24px !important; }
  .nbp-fp__right > * { flex: 1 1 280px !important; min-width: 0 !important; }
  .nbp-fp__deep { grid-template-columns: 1fr 1fr !important; }
  .nbp-fp__deep > :last-child { grid-column: 1 / -1 !important; }
  .nbp-fp__opinion-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  /* Phones: full single-column stack — center (lead hero) first. */
  .nbp-fp { padding: 24px 16px 48px !important; }
  .nbp-fp__masthead { grid-template-columns: 1fr !important; gap: 32px !important; }
  .nbp-fp__center { order: -1 !important; }
  .nbp-fp__left   { order: 1 !important; }
  .nbp-fp__right  { order: 2 !important; flex-direction: column !important; }
  .nbp-fp__left, .nbp-fp__center, .nbp-fp__right { gap: 32px !important; }
  .nbp-fp__secondary { grid-template-columns: 1fr !important; }
  .nbp-fp__opinion-grid { grid-template-columns: 1fr !important; }
  .nbp-fp__deep { grid-template-columns: 1fr !important; padding: 32px 0 !important; gap: 32px !important; }
  .nbp-fp__trust-wrap { margin: 40px 0 32px !important; }
  .nbp-fp__final { padding: 24px 16px 48px !important; }
}


/* =========================================================================
   NBP Advertise / Partnerships
   (custom/page-advertise-with-newbostonpost.hbs at /advertise-with-newbostonpost/)
   Mirrors artifacts/mockup-sandbox/.../Advertise.tsx
   ========================================================================= */
.nbp-advertise { color: var(--nbp-ink) !important; font-family: var(--nbp-sans) !important; }

/* ----- Hero (dark) ----------------------------------------------------- */
.nbp-advertise__hero {
  background: var(--nbp-ink) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--nbp-rule) !important;
  padding: 80px 0 96px;
}
.nbp-advertise__hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: end;
}
@media (min-width: 1000px) {
  .nbp-advertise__hero-grid { grid-template-columns: 1.4fr 1fr; gap: 64px; }
}
.nbp-advertise__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nbp-sans) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nbp-gold) !important;
  margin-bottom: 20px;
}
.nbp-advertise__title {
  font-family: var(--nbp-serif-d) !important;
  font-weight: 900 !important;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff !important;
  margin: 0 0 24px;
}
@media (max-width: 720px) { .nbp-advertise__title { font-size: 38px; } }
.nbp-advertise__dek {
  font-family: var(--nbp-serif-r) !important;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75) !important;
  max-width: 640px;
  margin: 0;
}

/* Audience snapshot card */
.nbp-advertise__snapshot {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  padding: 32px;
}
.nbp-advertise__snapshot-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nbp-gold) !important;
  margin-bottom: 16px;
}
.nbp-advertise__snapshot-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.nbp-advertise__snapshot-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
}
.nbp-advertise__snapshot-list dt {
  font-size: 13px;
  color: rgba(255,255,255,0.65) !important;
}
.nbp-advertise__snapshot-list dd {
  font-family: var(--nbp-serif-d) !important;
  font-size: 20px;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0;
}
.nbp-advertise__snapshot-cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--nbp-gold) !important;
  color: var(--nbp-ink) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 20px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.nbp-advertise__snapshot-cta:hover { background: #fff !important; color: var(--nbp-ink) !important; }

/* ----- Shared headlines ------------------------------------------------ */
.nbp-advertise__h2 {
  font-family: var(--nbp-serif-d) !important;
  font-weight: 700 !important;
  font-size: 40px;
  line-height: 1.15;
  color: var(--nbp-ink) !important;
  margin: 12px 0 0;
}
.nbp-advertise__h2--md { font-size: 32px; }
@media (max-width: 720px) { .nbp-advertise__h2 { font-size: 28px; } }

/* ----- Why partner ----------------------------------------------------- */
.nbp-advertise__why {
  background: var(--nbp-paper) !important;
  padding: 80px 0;
}
.nbp-advertise__why-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.nbp-advertise__why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 800px) {
  .nbp-advertise__why-grid { grid-template-columns: repeat(3, 1fr); }
}
.nbp-advertise__feature {
  background: #fff !important;
  border: 1px solid var(--nbp-rule) !important;
  padding: 32px;
  transition: border-color 0.15s ease;
}
.nbp-advertise__feature:hover { border-color: var(--nbp-ink) !important; }
.nbp-advertise__feature-icon { color: var(--nbp-red) !important; margin-bottom: 16px; }
.nbp-advertise__feature-title {
  font-family: var(--nbp-serif-d) !important;
  font-weight: 700 !important;
  font-size: 22px;
  color: var(--nbp-ink) !important;
  margin: 0 0 12px;
}
.nbp-advertise__feature p {
  font-family: var(--nbp-sans) !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--nbp-text-mute) !important;
  margin: 0;
}

/* ----- Demographics ---------------------------------------------------- */
.nbp-advertise__demo {
  background: #fff !important;
  border-top: 1px solid var(--nbp-rule) !important;
  border-bottom: 1px solid var(--nbp-rule) !important;
  padding: 80px 0;
}
.nbp-advertise__demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 1000px) {
  .nbp-advertise__demo-grid { grid-template-columns: 1fr 1.3fr; gap: 56px; }
}
.nbp-advertise__demo-source {
  font-size: 16px;
  line-height: 1.6;
  color: var(--nbp-text-mute) !important;
  margin: 12px 0 24px;
}
.nbp-advertise__demo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nbp-red) !important;
  text-decoration: none;
}
.nbp-advertise__demo-link:hover { color: var(--nbp-red-deep) !important; }
.nbp-advertise__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 600px) {
  .nbp-advertise__stats { grid-template-columns: repeat(2, 1fr); }
}
.nbp-advertise__stat { border-bottom: 2px solid var(--nbp-rule) !important; padding-bottom: 16px; }
.nbp-advertise__stat-num {
  font-family: var(--nbp-serif-d) !important;
  font-weight: 900 !important;
  font-size: 44px;
  line-height: 1;
  color: var(--nbp-ink) !important;
}
.nbp-advertise__stat-label {
  margin-top: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nbp-text-mute) !important;
}

/* ----- Packages -------------------------------------------------------- */
.nbp-advertise__packages {
  background: var(--nbp-paper) !important;
  padding: 80px 0;
}
.nbp-advertise__packages-head { text-align: center; margin-bottom: 48px; }
.nbp-advertise__packages-sub {
  font-size: 16px;
  color: var(--nbp-text-mute) !important;
  max-width: 640px;
  margin: 12px auto 0;
}
.nbp-advertise__packages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1000px) {
  .nbp-advertise__packages-grid { grid-template-columns: repeat(3, 1fr); }
}
.nbp-advertise__pkg {
  background: #fff !important;
  border: 2px solid var(--nbp-rule) !important;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.nbp-advertise__pkg--featured {
  position: relative;
  border-color: var(--nbp-red) !important;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.18);
}
.nbp-advertise__pkg-ribbon {
  position: absolute;
  top: -14px;
  left: 32px;
  background: var(--nbp-red) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 12px;
}
.nbp-advertise__pkg-name {
  font-family: var(--nbp-serif-d) !important;
  font-weight: 700 !important;
  font-size: 24px;
  color: var(--nbp-ink) !important;
  margin: 0 0 8px;
}
.nbp-advertise__pkg-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.nbp-advertise__pkg-price-num {
  font-family: var(--nbp-serif-d) !important;
  font-weight: 900 !important;
  font-size: 40px;
  color: var(--nbp-ink) !important;
}
.nbp-advertise__pkg-price-period {
  font-size: 13px;
  color: var(--nbp-text-mute) !important;
}
.nbp-advertise__pkg-blurb {
  font-size: 14px;
  line-height: 1.55;
  color: var(--nbp-text-mute) !important;
  margin: 0 0 24px;
  min-height: 88px;
}
.nbp-advertise__pkg-features {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 12px;
  flex-grow: 1;
}
.nbp-advertise__pkg-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--nbp-ink) !important;
}
.nbp-advertise__pkg-check {
  color: var(--nbp-red) !important;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.nbp-advertise__pkg-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 18px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.nbp-advertise__pkg-cta--ghost {
  border: 2px solid var(--nbp-ink) !important;
  color: var(--nbp-ink) !important;
  background: transparent !important;
}
.nbp-advertise__pkg-cta--ghost:hover { background: var(--nbp-ink) !important; color: #fff !important; }
.nbp-advertise__pkg-cta--solid {
  background: var(--nbp-red) !important;
  color: #fff !important;
  border: 2px solid var(--nbp-red) !important;
}
.nbp-advertise__pkg-cta--solid:hover { background: var(--nbp-red-deep) !important; border-color: var(--nbp-red-deep) !important; }

/* ----- Editorial standards firewall ----------------------------------- */
.nbp-advertise__standards {
  background: #fff !important;
  border-top: 1px solid var(--nbp-rule) !important;
  border-bottom: 1px solid var(--nbp-rule) !important;
  padding: 64px 0;
}
.nbp-advertise__standards-grid {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 800px) {
  .nbp-advertise__standards-grid { grid-template-columns: auto 1fr; }
}
.nbp-advertise__standards-icon { color: var(--nbp-gold) !important; flex-shrink: 0; }
.nbp-advertise__standards-title {
  font-family: var(--nbp-serif-d) !important;
  font-weight: 700 !important;
  font-size: 28px;
  line-height: 1.2;
  color: var(--nbp-ink) !important;
  margin: 12px 0 16px;
}
.nbp-advertise__standards-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nbp-text-mute) !important;
  max-width: 820px;
  margin: 0;
}
.nbp-advertise__standards-text a { color: var(--nbp-red) !important; text-decoration: underline; font-weight: 600; }
.nbp-advertise__standards-text a:hover { color: var(--nbp-red-deep) !important; }

/* ----- Contact form ---------------------------------------------------- */
.nbp-advertise__contact {
  background: var(--nbp-paper) !important;
  padding: 80px 0;
}
.nbp-advertise__contact-grid {
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 800px) {
  .nbp-advertise__contact-grid { grid-template-columns: 1fr 1.2fr; }
}
.nbp-advertise__contact-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--nbp-text-mute) !important;
  margin: 12px 0 24px;
}
.nbp-advertise__contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.nbp-advertise__contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nbp-ink) !important;
}
.nbp-advertise__contact-list-mute { color: var(--nbp-text-mute) !important; }
.nbp-advertise__contact-list a { color: var(--nbp-ink) !important; font-weight: 600; text-decoration: none; }
.nbp-advertise__contact-list a:hover { color: var(--nbp-red) !important; }
.nbp-advertise__contact-icon { color: var(--nbp-red) !important; flex-shrink: 0; }

.nbp-advertise__form {
  background: #fff !important;
  border: 1px solid var(--nbp-rule) !important;
  padding: 32px;
  display: grid;
  gap: 20px;
}
.nbp-advertise__form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  .nbp-advertise__form-row { grid-template-columns: 1fr 1fr; }
}
.nbp-advertise__field { display: block; }
.nbp-advertise__field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nbp-text-mute) !important;
  margin-bottom: 4px;
}
.nbp-advertise__field-input {
  width: 100%;
  border: 1px solid var(--nbp-rule) !important;
  padding: 10px 12px;
  font-family: var(--nbp-sans) !important;
  font-size: 14px;
  color: var(--nbp-ink) !important;
  background: #fff !important;
  transition: border-color 0.15s ease;
}
.nbp-advertise__field-input:focus { outline: none; border-color: var(--nbp-ink) !important; }
.nbp-advertise__field-select { background: #fff !important; }
textarea.nbp-advertise__field-input { resize: vertical; min-height: 100px; font-family: var(--nbp-sans) !important; }
.nbp-advertise__form-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--nbp-ink) !important;
  color: #fff !important;
  border: 0;
  cursor: pointer;
  font-family: var(--nbp-sans) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px;
  transition: background 0.15s ease;
}
.nbp-advertise__form-submit:hover { background: var(--nbp-red) !important; }

/* ----- Optional editor's-note notice ---------------------------------- */
.nbp-advertise__notice { background: var(--nbp-paper) !important; padding: 0 0 64px; }
.nbp-advertise__notice-card {
  background: #fff !important;
  border: 1px solid var(--nbp-rule) !important;
  border-left: 4px solid var(--nbp-gold) !important;
  padding: 24px 28px;
}
.nbp-advertise__notice-card .nbp-prose { color: var(--nbp-text-mute) !important; margin-top: 8px; }

/* ----- Smaller phones --------------------------------------------------- */
@media (max-width: 600px) {
  .nbp-advertise__hero { padding: 48px 0 56px; }
  .nbp-advertise__why,
  .nbp-advertise__demo,
  .nbp-advertise__packages,
  .nbp-advertise__contact { padding: 48px 0; }
  .nbp-advertise__snapshot,
  .nbp-advertise__feature,
  .nbp-advertise__pkg,
  .nbp-advertise__form { padding: 24px; }
  .nbp-advertise__stat-num { font-size: 36px; }
  .nbp-advertise__pkg-blurb { min-height: 0; }
}

/* ========================================================================
   PORTAL  (members modal style system)
   Mirrors artifacts/mockup-sandbox/.../Portal.tsx canvas mockup.

   Provides theme-owned classes for the four Portal states — Sign in,
   Sign up + plans, Account home, Account settings — so they can be used
   on theme routes such as /signup/ where Ghost honors members/signup.hbs.

   Ghost's actual Portal modal is rendered inside a sandboxed iframe and
   cannot be styled from a theme stylesheet. Brand color is propagated to
   that iframe via --ghost-accent-color set on :root above; for the full
   modal look (typography, plan cards, etc.) use these classes on a
   theme-owned page.
   ======================================================================== */

/* ---- Section wrapper (only used on demo / preview pages) -------------- */
.nbp-portal__section {
  background: var(--nbp-paper) !important;
  padding: 64px 0;
  border-bottom: 1px solid var(--nbp-rule) !important;
}
.nbp-portal__section--ink {
  background: var(--nbp-ink) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
.nbp-portal__section-head {
  max-width: var(--nbp-w);
  margin: 0 auto 32px;
  padding: 0 24px;
}
.nbp-portal__section-eyebrow {
  font-family: var(--nbp-sans) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nbp-gold) !important;
  margin-bottom: 8px;
}
.nbp-portal__section-title {
  font-family: var(--nbp-serif-d) !important;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--nbp-ink) !important;
  margin: 0 0 8px;
}
.nbp-portal__section--ink .nbp-portal__section-title { color: #fff !important; }
.nbp-portal__section-desc {
  font-family: var(--nbp-serif-r) !important;
  color: var(--nbp-text-mute) !important;
  font-size: 15px;
  line-height: 1.55;
  max-width: 640px;
  margin: 0;
}
.nbp-portal__section--ink .nbp-portal__section-desc { color: rgba(255,255,255,0.55) !important; }

/* ---- Modal card ------------------------------------------------------- */
.nbp-portal__modal {
  position: relative;
  margin: 0 auto;
  max-width: 94%;
  background: var(--nbp-paper-pure) !important;
  border: 1px solid var(--nbp-rule) !important;
  border-radius: 4px;
  box-shadow: 0 30px 70px -20px rgba(11,27,43,0.45);
  padding: 48px 36px 36px;
}
.nbp-portal__modal--narrow { width: 460px; }
.nbp-portal__modal--regular { width: 540px; }
.nbp-portal__modal--wide { width: 560px; }

.nbp-portal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--nbp-text-mute) !important;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}
.nbp-portal__close:hover {
  color: var(--nbp-ink) !important;
  background: var(--nbp-gold-soft) !important;
}

/* ---- Brandmark inside the modal -------------------------------------- */
.nbp-portal__brand {
  text-align: center;
}
.nbp-portal__brand-mark {
  font-family: var(--nbp-serif-d) !important;
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--nbp-ink) !important;
  display: block;
}
.nbp-portal__brand-rule {
  width: 48px;
  height: 2px;
  background: var(--nbp-red) !important;
  margin: 12px auto 0;
}

/* ---- Headlines & body ------------------------------------------------- */
.nbp-portal__title {
  font-family: var(--nbp-serif-d) !important;
  font-weight: 900;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--nbp-ink) !important;
  margin: 24px 0 36px;
  font-size: 40px;
  line-height: 1;
}
.nbp-portal__title--md { font-size: 36px; line-height: 1.05; margin: 24px 0 8px; }
.nbp-portal__title--sm { font-size: 32px; line-height: 1.1; margin: 16px 0 12px; }
.nbp-portal__title--page {
  font-size: 28px;
  line-height: 1.1;
  text-align: left;
  margin: 0 0 4px;
}

.nbp-portal__lede {
  font-family: var(--nbp-serif-r) !important;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  color: var(--nbp-text-mute) !important;
  max-width: 420px;
  margin: 0 auto 28px;
}
.nbp-portal__lede--meta {
  font-size: 14.5px;
  margin: 12px auto 28px;
}
.nbp-portal__lede--page {
  text-align: left;
  font-size: 13.5px;
  margin: 0 0 28px;
  max-width: none;
}

/* ---- Form fields ------------------------------------------------------ */
.nbp-portal__field { margin-bottom: 16px; }
.nbp-portal__label {
  font-family: var(--nbp-sans) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nbp-ink) !important;
  margin-bottom: 6px;
  display: block;
}
.nbp-portal__sublabel {
  font-family: var(--nbp-serif-r) !important;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nbp-text-mute) !important;
  margin: 0 0 8px;
}
.nbp-portal__input {
  width: 100%;
  background: var(--nbp-paper-pure) !important;
  border: 1px solid var(--nbp-rule) !important;
  border-radius: 3px;
  padding: 14px 16px;
  font-family: var(--nbp-sans) !important;
  font-size: 15px;
  color: var(--nbp-ink) !important;
  outline: none;
  transition: border-color .15s ease;
}
.nbp-portal__input::placeholder { color: #9aa1aa; }
.nbp-portal__input:focus { border-color: var(--nbp-ink) !important; }

.nbp-portal__field-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

/* ---- Buttons ---------------------------------------------------------- */
.nbp-portal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--nbp-sans) !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nbp-portal__btn--primary {
  width: 100%;
  background: var(--nbp-red) !important;
  color: #fff !important;
  margin-top: 8px;
  padding: 16px 24px;
}
.nbp-portal__btn--primary:hover { background: var(--nbp-red-deep) !important; }

.nbp-portal__btn--ink {
  background: var(--nbp-ink) !important;
  color: #fff !important;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 12px 20px;
}
.nbp-portal__btn--ink:hover { background: var(--nbp-red) !important; }

.nbp-portal__btn--ghost {
  background: transparent;
  border-color: var(--nbp-rule) !important;
  color: var(--nbp-ink) !important;
  font-size: 12px;
  padding: 12px 16px;
}
.nbp-portal__btn--ghost:hover {
  background: var(--nbp-gold-soft) !important;
  border-color: var(--nbp-ink) !important;
}

.nbp-portal__btn--danger-ghost {
  background: transparent;
  border-color: var(--nbp-red) !important;
  color: var(--nbp-red) !important;
  font-size: 12px;
  padding: 12px 16px;
}
.nbp-portal__btn--danger-ghost:hover {
  background: var(--nbp-red) !important;
  color: #fff !important;
}

.nbp-portal__btn--text {
  background: transparent;
  border: 0;
  color: var(--nbp-text-mute) !important;
  font-family: var(--nbp-sans) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 8px;
  cursor: pointer;
}
.nbp-portal__btn--text:hover { color: var(--nbp-ink) !important; }

/* ---- Footer / supplementary copy ------------------------------------- */
.nbp-portal__foot {
  font-family: var(--nbp-serif-r) !important;
  font-size: 14px;
  text-align: center;
  color: var(--nbp-text-mute) !important;
  margin-top: 28px;
}
.nbp-portal__foot--fine {
  font-size: 12px;
  line-height: 1.5;
  max-width: 420px;
  margin: 16px auto 0;
}
.nbp-portal__foot a {
  font-family: var(--nbp-sans) !important;
  color: var(--nbp-red) !important;
  font-weight: 700;
  text-decoration: none;
}
.nbp-portal__foot a:hover { color: var(--nbp-red-deep) !important; }
.nbp-portal__foot--fine a { text-decoration: underline; font-weight: 400; }

/* ---- Plan cards (sign-up state) -------------------------------------- */
.nbp-portal__plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.nbp-portal__plan {
  display: block;
  position: relative;
  border: 2px solid var(--nbp-rule) !important;
  border-radius: 4px;
  padding: 20px;
  background: var(--nbp-paper-pure) !important;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.nbp-portal__plan:hover { border-color: var(--nbp-ink) !important; }
.nbp-portal__plan--featured {
  border-color: var(--nbp-red) !important;
  background: #FFF8F7 !important;
}
.nbp-portal__plan--featured:hover { border-color: var(--nbp-red) !important; }

.nbp-portal__plan-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
.nbp-portal__plan-radio {
  width: 20px;
  height: 20px;
  accent-color: var(--nbp-red);
}
.nbp-portal__plan-name {
  font-family: var(--nbp-serif-d) !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--nbp-ink) !important;
  margin: 0;
}
.nbp-portal__plan-note {
  font-family: var(--nbp-serif-r) !important;
  font-size: 13px;
  color: var(--nbp-text-mute) !important;
  margin: 4px 0 0;
}
.nbp-portal__plan-note .nbp-portal__plan-check {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--nbp-gold) !important;
}
.nbp-portal__plan-price {
  text-align: right;
}
.nbp-portal__plan-price strong {
  display: block;
  font-family: var(--nbp-serif-d) !important;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--nbp-ink) !important;
}
.nbp-portal__plan-price span {
  display: block;
  font-family: var(--nbp-sans) !important;
  font-size: 12px;
  color: var(--nbp-text-mute) !important;
  margin-top: 4px;
}
.nbp-portal__plan-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--nbp-red) !important;
  color: #fff !important;
  font-family: var(--nbp-sans) !important;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 2px;
}
.nbp-portal__plan-badge::before {
  content: "★";
  font-size: 10px;
  line-height: 1;
}

/* ---- Account home: identity icon, list-card, action grid ------------- */
.nbp-portal__avatar {
  display: flex;
  justify-content: center;
}
.nbp-portal__avatar-circle {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  border: 2px solid var(--nbp-red) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nbp-serif-d) !important;
  font-weight: 800;
  font-size: 26px;
  color: var(--nbp-red) !important;
  background: var(--nbp-paper-pure) !important;
}

.nbp-portal__list {
  border: 1px solid var(--nbp-rule) !important;
  border-radius: 4px;
  overflow: hidden;
  background: var(--nbp-paper-pure) !important;
}
.nbp-portal__list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--nbp-rule) !important;
}
.nbp-portal__list-row:last-child { border-bottom: 0; }
.nbp-portal__list-title {
  font-family: var(--nbp-sans) !important;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--nbp-ink) !important;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nbp-portal__list-meta {
  font-family: var(--nbp-serif-r) !important;
  font-size: 13px;
  color: var(--nbp-text-mute) !important;
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nbp-portal__list-action {
  flex-shrink: 0;
  font-family: var(--nbp-sans) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nbp-red) !important;
  text-decoration: none;
}
.nbp-portal__list-action:hover { color: var(--nbp-red-deep) !important; }

.nbp-portal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}

/* ---- Settings page: back link, divider, newsletter toggles ----------- */
.nbp-portal__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--nbp-sans) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nbp-red) !important;
  margin-bottom: 20px;
  text-decoration: none;
}
.nbp-portal__back:hover { color: var(--nbp-red-deep) !important; }

.nbp-portal__newsletters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nbp-portal__news-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: var(--nbp-paper-pure) !important;
  border: 1px solid var(--nbp-rule) !important;
  border-radius: 3px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.nbp-portal__news-row:hover { border-color: var(--nbp-ink) !important; }
.nbp-portal__news-name {
  font-family: var(--nbp-sans) !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--nbp-ink) !important;
}
.nbp-portal__news-hint {
  font-family: var(--nbp-serif-r) !important;
  font-size: 12.5px;
  color: var(--nbp-text-mute) !important;
  margin-top: 2px;
}

.nbp-portal__toggle {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  background: #d8d3c4;
  margin-top: 2px;
  transition: background-color .15s ease;
}
.nbp-portal__toggle--on { background: var(--nbp-red) !important; }
.nbp-portal__toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: left .15s ease;
}
.nbp-portal__toggle--on::after { left: 22px; }

.nbp-portal__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--nbp-rule) !important;
}

.nbp-portal__danger {
  display: block;
  font-family: var(--nbp-sans) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nbp-red) !important;
  margin-top: 12px;
  text-decoration: none;
}
.nbp-portal__danger:hover { color: var(--nbp-red-deep) !important; }

/* ---- Stack utility (vertical spacing inside modals) ------------------ */
.nbp-portal__stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 600px) {
  .nbp-portal__modal { padding: 36px 22px 28px; }
  .nbp-portal__modal--narrow,
  .nbp-portal__modal--regular,
  .nbp-portal__modal--wide { width: 100%; }
  .nbp-portal__title { font-size: 32px; margin: 18px 0 28px; }
  .nbp-portal__title--md { font-size: 28px; }
  .nbp-portal__plan-price strong { font-size: 24px; }
  .nbp-portal__actions { grid-template-columns: 1fr; }
}

/* Ad-rotator container injected by ads.js when the editor's slot HTML
   contains a <script> rotator (e.g. the one on /ad-slots/). The stub
   gives the rotator script a previousElementSibling.classList.contains
   ("ad-slot") to latch onto, then the script fills it with rotating
   creatives. min-height keeps the slot from collapsing during the
   first paint before the JS runs. */
.nbp-ad__inner > .ad-slot {
  display: block;
  min-height: 250px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.nbp-ad--leaderboard .nbp-ad__inner > .ad-slot {
  min-height: 90px;
  max-width: 728px;
}

/* ============================================================
   Article share bar — brand-aligned monochrome pills matching
   the existing .nbp-actionbtn aesthetic (ink on paper, hairline
   border, gold focus ring). Sits between body and "About this
   story". The "Follow Us on Google News" pill on the right uses
   the brand red so it reads as a primary call to action.
   ============================================================ */
.nbp-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 36px 0 28px;
  padding: 18px 0;
  border-top: 1px solid var(--nbp-rule);
  border-bottom: 1px solid var(--nbp-rule);
}
.nbp-share__label {
  font-family: var(--nbp-font-ui, "Inter", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nbp-ink-soft, #4a5562);
  margin-right: 4px;
}
.nbp-share__group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nbp-share__list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nbp-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--nbp-paper, #FBF9F4);
  color: var(--nbp-ink, #0B1B2B);
  border: 1px solid var(--nbp-rule, #E2DED4);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
/* v1.0.207 — Light hover for share-row circle buttons. Mirrors the
   v1.0.206 Follow-on-Google-News pill: keep the chip light in every
   state so the SVG icon stays visible and the row reads consistently
   on hover. Border darkens to brand ink as the affordance cue. */
.nbp-share__btn:hover,
.nbp-share__btn:focus {
  background: var(--nbp-paper, #FBF9F4);
  border-color: var(--nbp-ink, #0B1B2B);
  color: var(--nbp-ink, #0B1B2B) !important;
}
.nbp-share__btn:focus-visible { outline: 2px solid var(--nbp-gold); outline-offset: 2px; }
.nbp-share__btn svg { width: 15px; height: 15px; display: block; }

.nbp-share__follow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: var(--nbp-paper, #FBF9F4);
  border: 1px solid var(--nbp-rule, #E2DED4);
  color: var(--nbp-ink, #0B1B2B);
  text-decoration: none;
  font-family: var(--nbp-font-ui, "Inter", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
/* v1.0.206 — Light hover for the Follow-on-Google-News pill. Previous
   ink-fill hover read as "dark CTA hidden until hover", which felt
   jarring against the otherwise light share row and (combined with the
   global gold-link rule) flashed red text on ink. Keep the chip light
   in every state — just tighten the border + nudge text to brand red
   so the affordance is still clearly clickable. */
.nbp-share__follow:hover,
.nbp-share__follow:focus {
  background: var(--nbp-paper, #FBF9F4);
  border-color: var(--nbp-ink, #0B1B2B);
  color: var(--nbp-ink, #0B1B2B) !important;
}
.nbp-share__follow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.nbp-share__follow-icon svg { width: 18px; height: 18px; display: block; }

@media (max-width: 540px) {
  .nbp-share { gap: 12px; padding: 14px 0; }
  .nbp-share__list { gap: 4px; }
  .nbp-share__btn { width: 32px; height: 32px; }
  .nbp-share__label { display: none; }
}

/* ==========================================================================
   ABOUT-US PAGE (page-about-us.hbs) — plain editorial layout that mirrors
   the live https://www.newbostonpost.com/about/ structure 1:1. Intentionally
   restrained — no design-system flourishes — so the on-page design matches
   the existing live About page rather than the branded About redesign.
   ========================================================================== */
.nbp-aboutlive { background: var(--nbp-paper) !important; padding: 0 0 64px; }
.nbp-aboutlive__hero { padding: 56px 0 24px; text-align: center; border-bottom: 1px solid var(--nbp-rule); }
.nbp-aboutlive__title { font-family: var(--nbp-serif-d) !important; font-size: 44px; font-weight: 900 !important; line-height: 1.1; letter-spacing: -0.01em; color: var(--nbp-ink) !important; margin: 0 0 12px; }
.nbp-aboutlive__dek { font-family: var(--nbp-serif-r) !important; font-size: 18px; line-height: 1.55; color: var(--nbp-text-mute) !important; max-width: 640px; margin: 0 auto; }
.nbp-aboutlive__wrap { max-width: 760px; padding: 0 24px; }
.nbp-aboutlive__sec { padding: 36px 0; border-bottom: 1px solid var(--nbp-rule); }
.nbp-aboutlive__sec:last-child { border-bottom: 0; }
.nbp-aboutlive__h2 { font-family: var(--nbp-serif-d) !important; font-size: 28px; font-weight: 800 !important; color: var(--nbp-ink) !important; margin: 0 0 16px; }
.nbp-aboutlive__sec p { font-family: var(--nbp-serif-r) !important; font-size: 18px; line-height: 1.7; color: var(--nbp-text) !important; margin: 0 0 14px; }
.nbp-aboutlive__sec p:last-child { margin-bottom: 0; }
.nbp-aboutlive__sec a { color: var(--nbp-blue) !important; text-decoration: underline; }
.nbp-aboutlive__sec a:hover { color: var(--nbp-red) !important; }
.nbp-aboutlive__bullets { font-family: var(--nbp-serif-r) !important; font-size: 18px; line-height: 1.7; color: var(--nbp-text) !important; margin: 0 0 0 1.25em; padding: 0; }
.nbp-aboutlive__bullets li { margin: 0 0 6px; }
.nbp-aboutlive__bullets li strong { color: var(--nbp-ink) !important; font-weight: 700 !important; }
.nbp-aboutlive__cats { font-family: var(--nbp-sans) !important; font-size: 15px !important; line-height: 1.7 !important; color: var(--nbp-text) !important; }

/* Team grid -------------------------------------------------------------- */
.nbp-aboutlive__team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; margin-top: 24px; }
.nbp-aboutlive__person img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--nbp-rule); margin: 0 0 12px; border-radius: 2px; }
.nbp-aboutlive__person h3 { font-family: var(--nbp-serif-d) !important; font-size: 18px; font-weight: 800 !important; color: var(--nbp-ink) !important; margin: 0 0 2px; }
.nbp-aboutlive__person .nbp-aboutlive__role { font-family: var(--nbp-sans) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nbp-red) !important; margin: 0 0 8px !important; }
.nbp-aboutlive__person p { font-family: var(--nbp-serif-r) !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--nbp-text-mute) !important; margin: 0 0 6px !important; }
.nbp-aboutlive__person p a { font-family: var(--nbp-sans) !important; font-size: 13px !important; color: var(--nbp-blue) !important; word-break: break-all; }
@media (max-width: 760px) { .nbp-aboutlive__team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .nbp-aboutlive__team { grid-template-columns: 1fr; } }

/* FAQ ------------------------------------------------------------------ */
.nbp-aboutlive__faq h4 { font-family: var(--nbp-serif-d) !important; font-size: 18px; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 24px 0 8px; }
.nbp-aboutlive__faq h4:first-of-type { margin-top: 8px; }
.nbp-aboutlive__reviewed { font-family: var(--nbp-sans) !important; font-size: 12px !important; color: var(--nbp-text-mute) !important; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 32px !important; padding-top: 16px; border-top: 1px solid var(--nbp-rule); }

/* Mobile hero ----------------------------------------------------------- */
@media (max-width: 600px) {
  .nbp-aboutlive__title { font-size: 32px; }
  .nbp-aboutlive__h2 { font-size: 22px; }
  .nbp-aboutlive__sec p, .nbp-aboutlive__bullets { font-size: 16px; }
}

/* ============================================================
   ABOUT US — PREMIUM (page-about-us.hbs) — v130
   Namespace: .nbp-aboutpx
   ============================================================ */
.nbp-aboutpx { background: var(--nbp-paper) !important; }
.nbp-aboutpx a { color: inherit; text-decoration: none; }

/* ----- Hero ----- */
.nbp-aboutpx__hero { border-bottom: 1px solid var(--nbp-rule); background: var(--nbp-paper) !important; padding: 64px 0 80px; }
.nbp-aboutpx__hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; max-width: var(--nbp-w); }
.nbp-aboutpx__hero-text .nbp-eyebrow { display: inline-block; margin-bottom: 16px; }
.nbp-aboutpx__title { font-family: var(--nbp-serif-d) !important; font-size: 60px; line-height: 1.05; font-weight: 900 !important; letter-spacing: -0.01em; color: var(--nbp-ink) !important; margin: 0 0 24px; }
.nbp-aboutpx__dek { font-family: var(--nbp-serif-r) !important; font-size: 20px; line-height: 1.55; color: var(--nbp-text-mute) !important; max-width: 640px; margin: 0; }
.nbp-aboutpx__hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.nbp-aboutpx__cta-solid, .nbp-aboutpx__cta-ghost { font-family: var(--nbp-sans) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 22px; display: inline-flex; align-items: center; transition: all 0.2s ease; }
.nbp-aboutpx__cta-solid { background: var(--nbp-ink) !important; color: #fff !important; }
.nbp-aboutpx__cta-solid:hover { background: var(--nbp-red) !important; }
.nbp-aboutpx__cta-ghost { border: 2px solid var(--nbp-ink); color: var(--nbp-ink) !important; }
.nbp-aboutpx__cta-ghost:hover { background: var(--nbp-ink) !important; color: #fff !important; }

/* ----- Hero stats panel ----- */
.nbp-aboutpx__stats { background: var(--nbp-ink) !important; color: #fff; padding: 32px; border-top: 6px solid var(--nbp-gold); }
.nbp-aboutpx__stats-label { font-family: var(--nbp-sans) !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nbp-gold) !important; margin-bottom: 16px; }
.nbp-aboutpx__stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; }
.nbp-aboutpx__stats-grid dt { font-family: var(--nbp-sans) !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); margin: 0 0 4px; }
.nbp-aboutpx__stats-grid dd { font-family: var(--nbp-serif-d) !important; font-size: 28px; font-weight: 900 !important; color: #fff !important; margin: 0; line-height: 1; }
.nbp-aboutpx__stats-mid { border-left: 1px solid rgba(255,255,255,0.15); border-right: 1px solid rgba(255,255,255,0.15); padding: 0 24px; }
.nbp-aboutpx__stats-region { font-size: 18px !important; line-height: 1.1 !important; }
.nbp-aboutpx__stats-note { font-family: var(--nbp-serif-r) !important; font-size: 13px !important; line-height: 1.55; color: rgba(255,255,255,0.7) !important; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15); }

/* ----- Section base ----- */
.nbp-aboutpx__sec { border-bottom: 1px solid var(--nbp-rule); padding: 80px 0; }
.nbp-aboutpx__sec--white { background: #fff !important; }
.nbp-aboutpx__sec--paper { background: var(--nbp-paper) !important; }

/* ----- Split (label / body) ----- */
.nbp-aboutpx__split { display: grid; grid-template-columns: 260px 1fr; gap: 64px; max-width: var(--nbp-w); }
.nbp-aboutpx__split--align-end { align-items: end; margin-bottom: 40px; }
.nbp-aboutpx__split-label .nbp-eyebrow { display: block; }
.nbp-aboutpx__rule { display: block; width: 48px; height: 3px; background: var(--nbp-red); margin-top: 16px; }
.nbp-aboutpx__split-h { font-family: var(--nbp-serif-d) !important; font-size: 26px; line-height: 1.3; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0; max-width: 760px; }
.nbp-aboutpx__lead { font-family: var(--nbp-serif-d) !important; font-size: 34px; line-height: 1.25; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 0 0 28px; max-width: 800px; }
.nbp-aboutpx__body { font-family: var(--nbp-serif-r) !important; font-size: 17px; line-height: 1.7; color: var(--nbp-text-mute) !important; max-width: 760px; margin: 0; }

/* ----- Facts strip ----- */
.nbp-aboutpx__facts { background: var(--nbp-paper) !important; border-bottom: 1px solid var(--nbp-rule); padding: 48px 0; }
.nbp-aboutpx__facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: var(--nbp-w); }
.nbp-aboutpx__fact { border-left: 2px solid var(--nbp-red); padding-left: 20px; }
.nbp-aboutpx__fact-k { font-family: var(--nbp-sans) !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.14em; color: var(--nbp-text-soft) !important; }
.nbp-aboutpx__fact-v { font-family: var(--nbp-serif-d) !important; font-size: 22px; line-height: 1.15; font-weight: 700 !important; color: var(--nbp-ink) !important; margin-top: 8px; }
.nbp-aboutpx__fact-s { font-family: var(--nbp-serif-r) !important; font-size: 13.5px; line-height: 1.5; color: var(--nbp-text-mute) !important; margin-top: 6px; }

/* ----- Values grid ----- */
.nbp-aboutpx__values { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--nbp-rule); border-left: 1px solid var(--nbp-rule); }
.nbp-aboutpx__value { border-right: 1px solid var(--nbp-rule); border-bottom: 1px solid var(--nbp-rule); padding: 24px; background: #fff; transition: background 0.2s; }
.nbp-aboutpx__value:hover { background: var(--nbp-paper); }
.nbp-aboutpx__value svg { width: 28px; height: 28px; color: var(--nbp-red); display: block; }
.nbp-aboutpx__value-t { font-family: var(--nbp-serif-d) !important; font-size: 16px; line-height: 1.2; font-weight: 700 !important; color: var(--nbp-ink) !important; margin: 16px 0 8px; }
.nbp-aboutpx__value-b { font-family: var(--nbp-serif-r) !important; font-size: 13.5px; line-height: 1.55; color: var(--nbp-text-mute) !important; }

/* ----- Coverage pills ----- */
.nbp-aboutpx__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.nbp-aboutpx__pills span { font-family: var(--nbp-sans) !important; font-size: 12.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.08em; background: #fff; border: 1px solid var(--nbp-ink); color: var(--nbp-ink) !important; padding: 10px 16px; }
.nbp-aboutpx__quote { font-family: var(--nbp-serif-r) !important; font-style: italic; font-size: 16px; line-height: 1.65; color: var(--nbp-text-mute) !important; max-width: 760px; border-left: 2px solid var(--nbp-red); padding-left: 20px; margin: 0; }

/* ----- Team intro + grids ----- */
.nbp-aboutpx__team-intro { margin-bottom: 48px; }
.nbp-aboutpx__team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.nbp-aboutpx__team--featured { margin-bottom: 48px; }
.nbp-aboutpx__person { background: #fff; border-top: 1px solid var(--nbp-rule); }
.nbp-aboutpx__person--featured { border-top: 3px solid var(--nbp-red); }
.nbp-aboutpx__portrait { aspect-ratio: 4/5; background: var(--nbp-paper); overflow: hidden; }
.nbp-aboutpx__portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15); transition: filter 0.5s ease; }
.nbp-aboutpx__person:hover .nbp-aboutpx__portrait img { filter: grayscale(0); }
.nbp-aboutpx__person-body { padding-top: 20px; }
.nbp-aboutpx__person-role { font-family: var(--nbp-sans) !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.14em; color: var(--nbp-red) !important; margin-bottom: 6px; }
.nbp-aboutpx__person-name { font-family: var(--nbp-serif-d) !important; font-size: 22px; line-height: 1.15; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--nbp-ink) !important; margin: 0; }
.nbp-aboutpx__person-bio { font-family: var(--nbp-serif-r) !important; font-size: 14px; line-height: 1.6; color: var(--nbp-text-mute) !important; margin: 12px 0 0; }
.nbp-aboutpx__person-email { display: inline-flex; align-items: center; gap: 8px; font-family: var(--nbp-sans) !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--nbp-ink) !important; margin-top: 16px; padding-bottom: 2px; border-bottom: 1px solid var(--nbp-rule); transition: all 0.2s; }
.nbp-aboutpx__person-email svg { width: 14px; height: 14px; }
.nbp-aboutpx__person-email:hover { color: var(--nbp-red) !important; border-bottom-color: var(--nbp-red); }

/* ----- FAQ ----- */
.nbp-aboutpx__faq-intro { font-family: var(--nbp-serif-r) !important; font-size: 14px; line-height: 1.55; color: var(--nbp-text-mute) !important; margin: 20px 0 0; }
.nbp-aboutpx__faq { border-top: 1px solid var(--nbp-rule); }
.nbp-aboutpx__faq details { border-bottom: 1px solid var(--nbp-rule); padding: 20px 0; }
.nbp-aboutpx__faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; }
.nbp-aboutpx__faq summary::-webkit-details-marker { display: none; }
.nbp-aboutpx__faq summary > span:first-child { font-family: var(--nbp-serif-d) !important; font-size: 18px; line-height: 1.3; font-weight: 700 !important; color: var(--nbp-ink) !important; }
.nbp-aboutpx__chev { font-size: 16px; color: var(--nbp-text-soft); transition: transform 0.2s; flex-shrink: 0; }
.nbp-aboutpx__faq details[open] .nbp-aboutpx__chev { transform: rotate(180deg); }
.nbp-aboutpx__faq-a { font-family: var(--nbp-serif-r) !important; font-size: 15px; line-height: 1.65; color: var(--nbp-text-mute) !important; max-width: 680px; margin-top: 12px; }
.nbp-aboutpx__faq-a a { color: var(--nbp-red) !important; font-weight: 600; text-decoration: underline; }

/* ----- Reviewed footer ----- */
.nbp-aboutpx__reviewed { font-family: var(--nbp-sans) !important; font-size: 12px !important; color: var(--nbp-text-mute) !important; text-transform: uppercase; letter-spacing: 0.06em; padding: 24px; margin: 0 auto; max-width: var(--nbp-w); }

/* ----- Editor body fallback ----- */
.nbp-aboutpx__editor { max-width: 760px; }

/* ----- Responsive ----- */
@media (max-width: 1024px) {
  .nbp-aboutpx__hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .nbp-aboutpx__split { grid-template-columns: 1fr; gap: 24px; }
  .nbp-aboutpx__values { grid-template-columns: repeat(2, 1fr); }
  .nbp-aboutpx__facts-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .nbp-aboutpx__team, .nbp-aboutpx__team--featured { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .nbp-aboutpx__sec { padding: 56px 0; }
  .nbp-aboutpx__hero { padding: 40px 0 56px; }
  .nbp-aboutpx__title { font-size: 38px; }
  .nbp-aboutpx__lead { font-size: 24px; }
  .nbp-aboutpx__split-h { font-size: 22px; }
  .nbp-aboutpx__values { grid-template-columns: 1fr; }
  .nbp-aboutpx__facts-grid { grid-template-columns: 1fr; }
  .nbp-aboutpx__team, .nbp-aboutpx__team--featured { grid-template-columns: 1fr; }
  .nbp-aboutpx__hero-cta { flex-direction: column; align-items: stretch; }
  .nbp-aboutpx__cta-solid, .nbp-aboutpx__cta-ghost { justify-content: center; }
  .nbp-aboutpx__stats-grid { gap: 16px; }
  .nbp-aboutpx__stats-mid { padding: 0 12px; }
}

/* =========================================================================
   NBP SiteStyle  — premium editorial pattern shared by:
     custom/page-submit-your-story.hbs   (/submit-your-story/)
     custom/page-privacy-policy.hbs      (/privacy-policy/)
     custom/page-terms-of-use.hbs        (/terms-of-use/)
   Mirrors the canvas mockups (SubmitYourStory.tsx, PrivacyPolicy.tsx,
   TermsOfUse.tsx) which were rebuilt on the canonical "About SiteStyle"
   premium editorial template (centered hero, mono kickers, italic gold
   numerals, drop-cap intro, gold-stripe at-a-glance card, italic pull-
   quotes, FAQ accordion).
   ========================================================================= */
.nbp-ss { color: var(--nbp-ink) !important; font-family: var(--nbp-sans) !important; background: var(--nbp-paper) !important; }
.nbp-ss * { box-sizing: border-box; }

/* shared container --------------------------------------------------- */
.nbp-ss__wrap        { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.nbp-ss__wrap--md    { max-width:  920px; margin: 0 auto; padding: 0 24px; }
.nbp-ss__wrap--sm    { max-width:  820px; margin: 0 auto; padding: 0 24px; }

/* mono kicker (§ I · the promise) ------------------------------------ */
.nbp-ss__kicker {
  font-family: var(--nbp-mono) !important;
  font-size: 11px !important; line-height: 1 !important;
  letter-spacing: 0.2em !important; text-transform: uppercase !important;
  color: var(--nbp-text-soft) !important; margin-bottom: 12px !important;
}

/* gold-diamond rule (— ◆ —) ------------------------------------------ */
.nbp-ss__diamond { display: flex; align-items: center; gap: 8px; }
.nbp-ss__diamond--center { justify-content: center; }
.nbp-ss__diamond span.line { display: block; width: 40px; height: 1px; background: var(--nbp-gold); }
.nbp-ss__diamond span.line--lg { width: 48px; }
.nbp-ss__diamond span.dot  { display: block; width: 6px; height: 6px; background: var(--nbp-gold); transform: rotate(45deg); }
.nbp-ss__diamond span.dot--lg { width: 8px; height: 8px; }

/* HERO --------------------------------------------------------------- */
.nbp-ss__hero { background: #fff !important; padding: 64px 0 48px; border-bottom: 1px solid var(--nbp-rule); text-align: center; }
.nbp-ss__hero-inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.nbp-ss__eyebrow {
  display: inline-block;
  font-family: var(--nbp-mono) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: var(--nbp-red) !important;
}
.nbp-ss__title {
  font-family: var(--nbp-display) !important; font-weight: 900 !important;
  font-size: 54px !important; line-height: 1.05 !important;
  letter-spacing: -0.02em !important; color: var(--nbp-ink) !important;
  margin: 16px 0 20px !important;
}
.nbp-ss__lede {
  font-family: var(--nbp-serif) !important; font-size: 19px !important;
  line-height: 1.55 !important; color: var(--nbp-text-mute) !important; margin: 0 !important;
}
.nbp-ss__hero-meta {
  margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--nbp-mono) !important; font-size: 12px !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--nbp-text-soft) !important;
}
.nbp-ss__hero-meta .sep { opacity: 0.4; }

/* SECTION shells ----------------------------------------------------- */
.nbp-ss__sec        { padding: 96px 0; border-top: 1px solid var(--nbp-rule); position: relative; overflow: hidden; }
.nbp-ss__sec--first { padding-top: 96px; border-top: none; }

/* asymmetric label/body grid (§ I + § IV pull-quote sections) -------- */
.nbp-ss__grid-aside { display: grid; grid-template-columns: 220px 1fr; gap: 56px 56px; align-items: start; }
.nbp-ss__aside h2 {
  font-family: var(--nbp-display) !important; font-weight: 900 !important;
  font-size: 34px !important; line-height: 1.05 !important;
  letter-spacing: -0.02em !important; color: var(--nbp-ink) !important; margin: 0 !important;
}
.nbp-ss__aside-rule { margin-top: 20px; }

/* PULL-QUOTE block (with ghost gold quote glyph) --------------------- */
.nbp-ss__quote-wrap { position: relative; }
.nbp-ss__quote-glyph {
  position: absolute; top: -40px; left: -12px;
  font-family: var(--nbp-display) !important; font-weight: 900 !important;
  font-size: 160px !important; line-height: 1 !important;
  color: var(--nbp-gold) !important; opacity: 0.15;
  user-select: none; pointer-events: none;
}
.nbp-ss__quote {
  position: relative; margin: 0;
  font-family: var(--nbp-serif) !important; font-style: italic !important;
  font-size: 26px !important; line-height: 1.45 !important;
  letter-spacing: -0.01em !important; color: var(--nbp-ink) !important;
}
.nbp-ss__quote--sm { font-size: 24px !important; }
.nbp-ss__quote-after {
  position: relative; margin: 24px 0 0;
  font-family: var(--nbp-serif) !important; font-size: 17px !important;
  line-height: 1.7 !important; color: var(--nbp-text-mute) !important;
}
.nbp-ss__quote-attrib {
  position: relative; margin-top: 28px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--nbp-mono) !important; font-size: 11px !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: var(--nbp-text-soft) !important;
}
.nbp-ss__quote-attrib .bar { display: block; width: 24px; height: 1px; background: var(--nbp-text-soft); }

/* DROP-CAP body + AT-A-GLANCE card (§ II) ---------------------------- */
.nbp-ss__split { display: grid; grid-template-columns: 1fr 360px; gap: 56px 56px; align-items: start; }
.nbp-ss__split-h2 {
  font-family: var(--nbp-display) !important; font-weight: 900 !important;
  font-size: 40px !important; line-height: 1.05 !important;
  letter-spacing: -0.02em !important; color: var(--nbp-ink) !important;
  margin: 0 0 24px !important;
}
.nbp-ss__split-body {
  font-family: var(--nbp-serif) !important; font-size: 19px !important;
  line-height: 1.7 !important; color: var(--nbp-text) !important;
  margin: 28px 0 0 !important;
}
.nbp-ss__dropcap {
  font-family: var(--nbp-display) !important; font-weight: 900 !important;
  float: left; font-size: 58px !important; line-height: 0.85 !important;
  color: var(--nbp-gold) !important; margin: 4px 8px 0 0;
}

/* "at a glance" card (gold top stripe + numbered rows) --------------- */
.nbp-ss__card {
  position: relative; background: #fff;
  border: 1px solid var(--nbp-rule); padding: 28px;
  box-shadow: 0 1px 0 0 rgba(11,27,43,0.04), 0 8px 24px -12px rgba(11,27,43,0.18);
}
.nbp-ss__card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--nbp-gold);
}
.nbp-ss__card-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
  font-family: var(--nbp-mono) !important; font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: var(--nbp-gold) !important;
}
.nbp-ss__card-list { list-style: none; margin: 0; padding: 0; }
.nbp-ss__card-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--nbp-rule);
}
.nbp-ss__card-list li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.nbp-ss__card-num {
  font-family: var(--nbp-mono) !important; font-weight: 900 !important;
  font-size: 15px !important; line-height: 1; color: var(--nbp-gold) !important;
  flex-shrink: 0; width: 22px; margin-top: 4px;
}
.nbp-ss__card-text {
  font-family: var(--nbp-serif) !important; font-size: 14.5px !important;
  line-height: 1.5 !important; color: var(--nbp-text) !important;
}

/* ITALIC GOLD NUMERALS list (§ III — the body sections) -------------- */
.nbp-ss__list-head { text-align: center; margin-bottom: 56px; }
.nbp-ss__list-h2 {
  font-family: var(--nbp-display) !important; font-weight: 900 !important;
  font-size: 44px !important; line-height: 1.1 !important;
  letter-spacing: -0.02em !important; color: var(--nbp-ink) !important;
  margin: 12px 0 20px !important;
}
.nbp-ss__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nbp-ink); }
.nbp-ss__list li {
  display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--nbp-rule);
  transition: background 200ms ease;
}
.nbp-ss__list li:hover .nbp-ss__list-num { color: var(--nbp-ink) !important; }
.nbp-ss__list-num {
  font-family: var(--nbp-display) !important; font-weight: 900 !important; font-style: italic !important;
  font-size: 80px !important; line-height: 0.85 !important; letter-spacing: -0.02em !important;
  color: var(--nbp-gold) !important; transition: color 200ms ease;
}
.nbp-ss__list-h3 {
  font-family: var(--nbp-display) !important; font-weight: 900 !important;
  font-size: 24px !important; line-height: 1.2 !important; letter-spacing: -0.01em !important;
  color: var(--nbp-ink) !important; margin: 0 0 8px !important;
}
.nbp-ss__list-h3 .pip {
  display: inline-block; vertical-align: middle; width: 6px; height: 6px;
  background: var(--nbp-gold); transform: rotate(45deg); margin-left: 12px;
}
.nbp-ss__list-body {
  font-family: var(--nbp-serif) !important; font-size: 16.5px !important;
  line-height: 1.65 !important; color: var(--nbp-text-mute) !important; margin: 0 !important;
}

/* TWO-CARD pair under § IV pull-quote -------------------------------- */
.nbp-ss__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; position: relative; }
.nbp-ss__minicard { background: #fff; border: 1px solid var(--nbp-rule); padding: 20px; }
.nbp-ss__minicard-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--nbp-mono) !important; font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  color: var(--nbp-gold) !important;
}
.nbp-ss__minicard-body {
  font-family: var(--nbp-serif) !important; font-size: 14px !important;
  line-height: 1.55 !important; color: var(--nbp-text-mute) !important; margin: 0 !important;
}
.nbp-ss__minicard-body code, .nbp-ss__mono-inline {
  font-family: var(--nbp-mono) !important; font-size: 13px !important;
  color: var(--nbp-ink) !important;
}

/* CTA / mailto button section (§ V) ---------------------------------- */
.nbp-ss__cta { text-align: center; }
.nbp-ss__cta-h2 {
  font-family: var(--nbp-display) !important; font-weight: 900 !important;
  font-size: 40px !important; line-height: 1.05 !important;
  letter-spacing: -0.02em !important; color: var(--nbp-ink) !important;
  margin: 12px 0 20px !important;
}
.nbp-ss__cta-body {
  font-family: var(--nbp-serif) !important; font-size: 18px !important;
  line-height: 1.7 !important; color: var(--nbp-text-mute) !important;
  margin: 28px 0 40px !important;
}
.nbp-ss__cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--nbp-ink) !important; color: #fff !important;
  font-family: var(--nbp-sans) !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  padding: 16px 28px; text-decoration: none !important;
  transition: background 180ms ease, color 180ms ease;
}
.nbp-ss__cta-btn:hover { background: var(--nbp-gold) !important; color: var(--nbp-ink) !important; }
.nbp-ss__cta-foot {
  margin-top: 20px;
  font-family: var(--nbp-mono) !important; font-size: 11px !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--nbp-text-soft) !important;
}

/* FAQ accordion (rotating + glyph) ----------------------------------- */
.nbp-ss__faq { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.nbp-ss__faq-head { text-align: center; margin-bottom: 48px; }
.nbp-ss__faq-h2 {
  font-family: var(--nbp-display) !important; font-weight: 900 !important;
  font-size: 36px !important; line-height: 1.1 !important;
  color: var(--nbp-ink) !important; margin: 12px 0 20px !important;
}
.nbp-ss__faq-rule { width: 60px; height: 3px; background: var(--nbp-gold); margin: 0 auto; }
.nbp-ss__faq-list { border-top: 1px solid var(--nbp-ink); }
.nbp-ss__faq-item { border-bottom: 1px solid var(--nbp-rule); padding: 20px 0; }
.nbp-ss__faq-item summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  cursor: pointer; list-style: none;
}
.nbp-ss__faq-item summary::-webkit-details-marker { display: none; }
.nbp-ss__faq-q {
  font-family: var(--nbp-display) !important; font-weight: 700 !important;
  font-size: 19px !important; line-height: 1.35 !important;
  color: var(--nbp-ink) !important; transition: color 180ms ease;
}
.nbp-ss__faq-item:hover .nbp-ss__faq-q { color: var(--nbp-gold) !important; }
.nbp-ss__faq-plus {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px;
  color: var(--nbp-text-soft); transition: transform 300ms ease;
}
.nbp-ss__faq-item[open] .nbp-ss__faq-plus { transform: rotate(45deg); }
.nbp-ss__faq-a {
  font-family: var(--nbp-serif) !important; font-size: 16px !important;
  line-height: 1.65 !important; color: var(--nbp-text-mute) !important;
  margin: 16px 36px 0 0 !important;
}

/* SUBMIT-only form card (re-uses the page chrome above) -------------- */
.nbp-ss__form-card {
  background: #fff; border: 1px solid var(--nbp-rule); padding: 28px;
  box-shadow: 0 1px 0 0 rgba(11,27,43,0.04), 0 8px 24px -12px rgba(11,27,43,0.18);
}
.nbp-ss__form-row { display: grid; gap: 16px; margin-bottom: 16px; }
.nbp-ss__form-row--2 { grid-template-columns: 1fr 1fr; }
.nbp-ss__field { display: block; }
.nbp-ss__field-label {
  display: block; margin-bottom: 6px;
  font-family: var(--nbp-mono) !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--nbp-text-soft) !important;
}
.nbp-ss__field-input {
  display: block; width: 100%;
  font-family: var(--nbp-sans) !important; font-size: 15px !important;
  color: var(--nbp-ink) !important; background: var(--nbp-paper) !important;
  border: 1px solid var(--nbp-rule); padding: 12px 14px;
  transition: border 180ms ease;
}
.nbp-ss__field-input:focus { outline: none; border-color: var(--nbp-ink); }
.nbp-ss__field-textarea { resize: vertical; min-height: 140px; }
.nbp-ss__form-consent {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 0;
  font-family: var(--nbp-serif) !important; font-size: 14px !important;
  color: var(--nbp-text-mute) !important; line-height: 1.5;
}
.nbp-ss__form-submit {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--nbp-ink) !important; color: #fff !important;
  font-family: var(--nbp-sans) !important; font-weight: 700 !important;
  font-size: 12px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important;
  padding: 14px 24px; border: none; cursor: pointer;
  transition: background 180ms ease;
}
.nbp-ss__form-submit:hover { background: var(--nbp-red) !important; }
.nbp-ss__form-fineprint {
  margin-top: 16px;
  font-family: var(--nbp-serif) !important; font-style: italic;
  font-size: 13px !important; color: var(--nbp-text-soft) !important; line-height: 1.55;
}

/* Optional editor-pasted notice (Ghost page body) -------------------- */
.nbp-ss__notice {
  background: #fff; border-left: 3px solid var(--nbp-gold);
  padding: 24px 28px; margin: 24px 0;
  font-family: var(--nbp-serif) !important;
}

/* ----- Tablet ------------------------------------------------------- */
@media (max-width: 900px) {
  .nbp-ss__grid-aside { grid-template-columns: 1fr; gap: 24px; }
  .nbp-ss__split      { grid-template-columns: 1fr; gap: 32px; }
  .nbp-ss__pair       { grid-template-columns: 1fr; }
}

/* ----- Phone -------------------------------------------------------- */
@media (max-width: 600px) {
  .nbp-ss__hero       { padding: 48px 0 36px; }
  .nbp-ss__title      { font-size: 38px !important; }
  .nbp-ss__lede       { font-size: 17px !important; }
  .nbp-ss__sec        { padding: 64px 0; }
  .nbp-ss__aside h2,
  .nbp-ss__split-h2,
  .nbp-ss__cta-h2     { font-size: 28px !important; }
  .nbp-ss__list-h2    { font-size: 32px !important; }
  .nbp-ss__list li    { grid-template-columns: 64px 1fr; gap: 18px; padding: 20px 0; }
  .nbp-ss__list-num   { font-size: 50px !important; }
  .nbp-ss__list-h3    { font-size: 20px !important; }
  .nbp-ss__list-body  { font-size: 15.5px !important; }
  .nbp-ss__quote      { font-size: 21px !important; }
  .nbp-ss__quote--sm  { font-size: 19px !important; }
  .nbp-ss__quote-glyph{ font-size: 110px !important; top: -28px; }
  .nbp-ss__form-row--2{ grid-template-columns: 1fr; }
  .nbp-ss__faq-q      { font-size: 17px !important; }
  .nbp-ss__cta-btn    { width: 100%; justify-content: center; }
}

/* ============================================================
   About page — magazine layout (v1.0.141)
   Used by page-about.hbs. Mirrors the canvas mockup at
   artifacts/mockup-sandbox/.../newbostonpost/About.tsx exactly:
   side stat-panel hero, 4-col facts strip, 5-col icon values
   grid, pill tags, 3+6 team grid, chevron FAQ.
   ============================================================ */

.nbp-about { background: #fff; }

/* Shared section helpers ------------------------------------ */
.nbp-about__sec {
  border-bottom: 1px solid var(--nbp-rule);
  padding: 80px 0;
}
.nbp-about__sec--paper { background: var(--nbp-paper); }
.nbp-about__sec--white { background: #fff; }
.nbp-about__sec-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
}
.nbp-about__sec-aside {}
.nbp-about__sec-label {
  display: block;
  font-family: var(--nbp-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nbp-text-soft);
}
.nbp-about__sec-rule {
  margin-top: 16px;
  height: 3px;
  width: 48px;
  background: var(--nbp-red);
}

/* HERO ------------------------------------------------------ */
.nbp-about__hero {
  border-bottom: 1px solid var(--nbp-rule);
  background: var(--nbp-paper);
  padding: 64px 0 80px;
}
.nbp-about__hero-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.nbp-about__hero-eyebrow {
  display: inline-block;
  font-family: var(--nbp-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nbp-red);
}
.nbp-about__hero-title {
  font-size: 60px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
  color: var(--nbp-ink) !important;
  margin: 16px 0 24px !important;
}
.nbp-about__hero-lede {
  font-family: var(--nbp-serif-d) !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  color: var(--nbp-text-mute) !important;
  max-width: 640px;
  margin: 0 0 32px !important;
}
.nbp-about__hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nbp-about__btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--nbp-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 12px 20px;
  transition: background 120ms ease, color 120ms ease;
}
.nbp-about__btn--primary { background: var(--nbp-ink); color: #fff !important; }
.nbp-about__btn--primary:hover { background: var(--nbp-red); color: #fff !important; }
.nbp-about__btn--outline { border: 2px solid var(--nbp-ink); color: var(--nbp-ink) !important; padding: 10px 18px; }
.nbp-about__btn--outline:hover { background: var(--nbp-ink); color: #fff !important; }

.nbp-about__hero-stat {
  background: var(--nbp-ink);
  color: #fff;
  padding: 32px;
  border-top: 6px solid var(--nbp-gold);
}
.nbp-about__hero-stat-eyebrow {
  font-family: var(--nbp-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nbp-gold);
  margin-bottom: 16px;
}
.nbp-about__stats-dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
}
.nbp-about__stat dt {
  font-family: var(--nbp-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
}
.nbp-about__stat-v {
  font-size: 28px !important;
  font-weight: 900 !important;
  margin: 4px 0 0 !important;
  color: #fff !important;
  line-height: 1.05 !important;
}
.nbp-about__stat-v--sm { font-size: 18px !important; line-height: 1.1 !important; }
.nbp-about__stat--mid { border-left: 1px solid rgba(255,255,255,0.15); border-right: 1px solid rgba(255,255,255,0.15); padding: 0 24px; }
.nbp-about__hero-stat-foot {
  font-family: var(--nbp-serif-d) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.7) !important;
  margin: 24px 0 0 !important;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* MISSION --------------------------------------------------- */
.nbp-about__mission-h {
  font-size: 34px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--nbp-ink) !important;
  margin: 0 0 28px !important;
}
.nbp-about__mission-body {
  font-family: var(--nbp-serif-d) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--nbp-text-mute) !important;
  max-width: 760px;
  margin: 0;
}

/* WHO WE ARE — facts strip ---------------------------------- */
.nbp-about__facts {
  border-bottom: 1px solid var(--nbp-rule);
  background: var(--nbp-paper);
  padding: 48px 0;
}
.nbp-about__facts-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.nbp-about__fact { border-left: 2px solid var(--nbp-red); padding-left: 20px; }
.nbp-about__fact-k {
  font-family: var(--nbp-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nbp-text-soft);
}
.nbp-about__fact-v {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--nbp-ink) !important;
  margin: 8px 0 6px !important;
  line-height: 1.15 !important;
}
.nbp-about__fact-sub {
  font-family: var(--nbp-serif-d);
  font-size: 13.5px;
  color: var(--nbp-text-mute);
}

/* VALUES ---------------------------------------------------- */
.nbp-about__values-head {
  max-width: 1440px;
  margin: 0 auto 40px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: end;
}
.nbp-about__values-h {
  font-size: 26px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: var(--nbp-ink) !important;
  max-width: 760px;
  margin: 0 !important;
}
.nbp-about__values-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
.nbp-about__values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--nbp-rule);
  border-left: 1px solid var(--nbp-rule);
}
.nbp-about__value {
  border-right: 1px solid var(--nbp-rule);
  border-bottom: 1px solid var(--nbp-rule);
  padding: 24px;
  background: #fff;
  transition: background 120ms ease;
}
.nbp-about__value:hover { background: var(--nbp-paper); }
.nbp-about__value-icon { width: 28px; height: 28px; color: var(--nbp-red); }
.nbp-about__value-h {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--nbp-ink) !important;
  margin: 16px 0 8px !important;
  line-height: 1.2 !important;
}
.nbp-about__value-body {
  font-family: var(--nbp-serif-d);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--nbp-text-mute);
}

/* WHAT WE COVER --------------------------------------------- */
.nbp-about__cover-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.nbp-about__cover-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--nbp-sans);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #fff;
  border: 1px solid var(--nbp-ink);
  color: var(--nbp-ink);
  padding: 10px 16px;
}
.nbp-about__cover-quote {
  font-family: var(--nbp-serif-d) !important;
  font-style: italic;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--nbp-text-mute) !important;
  max-width: 760px;
  border-left: 2px solid var(--nbp-red);
  padding-left: 20px;
  margin: 0;
}

/* MEET OUR TEAM --------------------------------------------- */
.nbp-about__team-head {
  max-width: 1440px;
  margin: 0 auto 48px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
}
.nbp-about__team-lede {
  font-family: var(--nbp-serif-d) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--nbp-text-mute) !important;
  max-width: 760px;
  margin: 0 !important;
}
.nbp-about__team-row {
  max-width: 1440px;
  margin: 0 auto 48px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.nbp-about__team-row:last-of-type { margin-bottom: 0; }

.nbp-about__person { background: #fff; }
.nbp-about__person { border-top: 1px solid var(--nbp-rule); }
.nbp-about__person--featured { border-top: 3px solid var(--nbp-red); }
.nbp-about__person-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--nbp-paper);
  overflow: hidden;
}
.nbp-about__person-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15);
  transition: filter 500ms ease;
}
.nbp-about__person:hover .nbp-about__person-portrait img { filter: grayscale(0); }
.nbp-about__person-body { padding-top: 20px; }
.nbp-about__person-role {
  font-family: var(--nbp-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nbp-red);
  margin-bottom: 6px;
}
.nbp-about__person-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  color: var(--nbp-ink) !important;
  margin: 0 !important;
}
.nbp-about__person-bio {
  font-family: var(--nbp-serif-d);
  font-size: 14px;
  line-height: 1.6;
  color: var(--nbp-text-mute);
  margin: 12px 0 0;
}
.nbp-about__person-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--nbp-sans);
  font-size: 12.5px;
  font-weight: 600;
  /* v1.0.183 — gold accent (was --nbp-ink) so each team-card
     email reads as a deliberate accent, not body copy. !important
     defeats the global `a { color: var(--nbp-blue) !important; }`. */
  color: var(--nbp-gold) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--nbp-gold);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.nbp-about__person-email:hover { color: var(--nbp-red) !important; border-color: var(--nbp-red); }

/* Optional editor-pasted notice ----------------------------- */
.nbp-about__notice {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  font-family: var(--nbp-serif-d);
  font-size: 16px;
  line-height: 1.65;
  color: var(--nbp-text-mute);
}

/* FAQ ------------------------------------------------------- */
.nbp-about__faq-sec {
  border-bottom: 1px solid var(--nbp-rule);
  background: var(--nbp-paper);
  padding: 80px 0;
}
.nbp-about__faq-aside-note {
  font-family: var(--nbp-serif-d);
  font-size: 14px;
  line-height: 1.6;
  color: var(--nbp-text-mute);
  margin: 20px 0 0;
}
.nbp-about__faq-list {
  border-top: 1px solid var(--nbp-rule);
}
.nbp-about__faq-item {
  border-bottom: 1px solid var(--nbp-rule);
  padding: 20px 0;
}
.nbp-about__faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
}
.nbp-about__faq-item summary::-webkit-details-marker { display: none; }
.nbp-about__faq-q {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--nbp-ink) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.nbp-about__faq-chev {
  width: 20px;
  height: 20px;
  color: var(--nbp-text-soft);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.nbp-about__faq-item[open] .nbp-about__faq-chev { transform: rotate(180deg); }
.nbp-about__faq-a {
  font-family: var(--nbp-serif-d);
  font-size: 15px;
  line-height: 1.65;
  color: var(--nbp-text-mute);
  max-width: 680px;
  margin-top: 12px;
}
.nbp-about__faq-link { color: var(--nbp-red); font-weight: 600; text-decoration: underline; }

/* Responsive ------------------------------------------------ */
@media (max-width: 1100px) {
  .nbp-about__values-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .nbp-about__hero-grid,
  .nbp-about__sec-grid,
  .nbp-about__values-head,
  .nbp-about__team-head { grid-template-columns: 1fr; gap: 32px; }
  .nbp-about__hero-title { font-size: 44px !important; }
  .nbp-about__facts-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .nbp-about__values-grid { grid-template-columns: repeat(2, 1fr); }
  .nbp-about__team-row { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  .nbp-about__hero { padding: 48px 0 56px; }
  .nbp-about__hero-title { font-size: 36px !important; }
  .nbp-about__hero-lede { font-size: 17px !important; }
  .nbp-about__sec, .nbp-about__faq-sec { padding: 56px 0; }
  .nbp-about__facts-grid { grid-template-columns: 1fr; }
  .nbp-about__values-grid { grid-template-columns: 1fr; }
  .nbp-about__team-row { grid-template-columns: 1fr; gap: 32px; }
  .nbp-about__mission-h { font-size: 26px !important; }
  .nbp-about__hero-stat { padding: 24px; }
  .nbp-about__stats-dl { gap: 16px; }
  .nbp-about__stat--mid { padding: 0 16px; }
}

/* =====================================================================
   Careers page — .nbp-careers__*  (mirrors canvas mockup Careers.tsx 1:1)
   ===================================================================== */
.nbp-careers { background: #fff; color: var(--nbp-ink); }

/* Hero */
.nbp-careers__hero { background: var(--nbp-paper); border-bottom: 1px solid var(--nbp-rule); padding: 64px 0 80px; }
.nbp-careers__hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
.nbp-careers__hero-eyebrow { margin-bottom: 16px; }
.nbp-careers__hero-title { font-size: 60px; line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; color: var(--nbp-ink); margin: 0 0 24px; }
.nbp-careers__hero-lede { font-size: 20px; line-height: 1.55; color: var(--nbp-text-mute); max-width: 640px; margin: 0; }
.nbp-careers__hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.nbp-careers__btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; padding: 12px 20px; transition: background 120ms ease, color 120ms ease; }
.nbp-careers__btn--primary { background: var(--nbp-ink); color: #fff !important; }
.nbp-careers__btn--primary:hover { background: var(--nbp-red); color: #fff !important; }
.nbp-careers__btn--outline { border: 2px solid var(--nbp-ink); color: var(--nbp-ink) !important; padding: 10px 18px; }
.nbp-careers__btn--outline:hover { background: var(--nbp-ink); color: #fff !important; }

/* Hero stat panel */
.nbp-careers__hero-stat { background: var(--nbp-ink); color: #fff; padding: 32px; border-top: 6px solid var(--nbp-gold); }
.nbp-careers__hero-stat-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--nbp-gold); margin-bottom: 20px; }
.nbp-careers__stats-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; }
.nbp-careers__stat { margin: 0; }
.nbp-careers__stat--mid { padding: 0 24px; border-left: 1px solid rgba(255,255,255,0.15); border-right: 1px solid rgba(255,255,255,0.15); }
.nbp-careers__stat dt { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.nbp-careers__stat-v { font-size: 40px; font-weight: 900; line-height: 1; margin: 0; color: #fff; }
.nbp-careers__stat-v--sm { font-size: 22px; line-height: 1.2; font-weight: 700; }
.nbp-careers__hero-stat-foot { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 28px; padding-top: 20px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); }

/* Section scaffolding */
.nbp-careers__sec { padding: 96px 0; }
.nbp-careers__sec--white { background: #fff; }
.nbp-careers__sec--paper { background: var(--nbp-paper); border-top: 1px solid var(--nbp-rule); border-bottom: 1px solid var(--nbp-rule); }
.nbp-careers__sec-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nbp-red); margin-bottom: 12px; }
.nbp-careers__sec-rule { width: 48px; height: 2px; background: var(--nbp-red); margin-bottom: 24px; }

/* 01 / Why work here */
.nbp-careers__sec-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.nbp-careers__why-h { font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--nbp-ink); margin: 0; }
.nbp-careers__why-body { font-size: 17px; line-height: 1.75; color: var(--nbp-text-mute); }
.nbp-careers__why-body p { margin: 0 0 20px; }
.nbp-careers__why-grid { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.nbp-careers__why-item { border-left: 2px solid var(--nbp-red); padding-left: 16px; }
.nbp-careers__why-h-sm { font-size: 15px; font-weight: 700; color: var(--nbp-ink); margin-bottom: 4px; }

/* 02 / Traits */
.nbp-careers__traits-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.nbp-careers__traits-h { font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--nbp-ink); margin: 0; }
.nbp-careers__traits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.nbp-careers__trait { background: #fff; padding: 28px; border: 1px solid var(--nbp-rule); transition: border-color 160ms ease; }
.nbp-careers__trait:hover { border-color: var(--nbp-ink); }
.nbp-careers__trait-icon { width: 44px; height: 44px; border-radius: 999px; background: var(--nbp-ink); color: var(--nbp-gold); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.nbp-careers__trait-h { font-size: 18px; font-weight: 700; color: var(--nbp-ink); margin: 0 0 8px; line-height: 1.2; }
.nbp-careers__trait p { font-size: 14.5px; line-height: 1.6; color: var(--nbp-text-mute); margin: 0; }

/* 03 / Open positions */
.nbp-careers__roles-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 2px solid var(--nbp-ink); }
.nbp-careers__roles-h { font-size: 40px; font-weight: 700; line-height: 1.05; color: var(--nbp-ink); margin: 0; }
.nbp-careers__roles-note { font-size: 14px; color: var(--nbp-text-mute); max-width: 360px; margin: 0; }
.nbp-careers__roles { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--nbp-rule); border-bottom: 1px solid var(--nbp-rule); }
.nbp-careers__role { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 28px 12px; border-top: 1px solid var(--nbp-rule); align-items: center; transition: background 120ms ease; }
.nbp-careers__role:first-child { border-top: 0; }
.nbp-careers__role:hover { background: rgba(251, 249, 244, 0.6); }
.nbp-careers__role-h { font-size: 24px; font-weight: 700; color: var(--nbp-ink); line-height: 1.2; margin: 0 0 12px; transition: color 120ms ease; }
.nbp-careers__role:hover .nbp-careers__role-h { color: var(--nbp-red); }
.nbp-careers__role-body { font-size: 15px; line-height: 1.65; color: var(--nbp-text-mute); margin: 0; max-width: 760px; }
.nbp-careers__role-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(11, 27, 43, 0.8); }
.nbp-careers__role-tag { display: inline-flex; align-items: center; }
.nbp-careers__role-apply { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--nbp-ink) !important; border-bottom: 2px solid var(--nbp-ink); padding-bottom: 4px; text-decoration: none; white-space: nowrap; transition: color 120ms ease, border-color 120ms ease; }
.nbp-careers__role-apply:hover { color: var(--nbp-red) !important; border-bottom-color: var(--nbp-red); }
.nbp-careers__roles-foot { margin-top: 32px; font-size: 15px; line-height: 1.65; color: var(--nbp-text-mute); }

/* 04 / Hiring process (ink strip) */
.nbp-careers__process { background: var(--nbp-ink); color: #fff; padding: 96px 0; }
.nbp-careers__process-head { max-width: 720px; margin-bottom: 56px; }
.nbp-careers__process-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nbp-gold); margin-bottom: 12px; }
.nbp-careers__process-h { font-size: 40px; font-weight: 700; line-height: 1.1; color: #fff; margin: 0; }
.nbp-careers__process-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.nbp-careers__step { border-top: 2px solid var(--nbp-gold); padding-top: 20px; }
.nbp-careers__step-n { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: var(--nbp-gold); margin-bottom: 12px; }
.nbp-careers__step-h { font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; margin: 0 0 12px; }
.nbp-careers__step p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.75); margin: 0; }

/* 05 / FAQ */
.nbp-careers__faq-wrap { max-width: 920px; }
.nbp-careers__faq-head { text-align: center; margin-bottom: 48px; }
.nbp-careers__faq-h { font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--nbp-ink); margin: 0; }
.nbp-careers__faq-list { background: #fff; border: 1px solid var(--nbp-rule); }
.nbp-careers__faq-item { border-top: 1px solid var(--nbp-rule); }
.nbp-careers__faq-item:first-child { border-top: 0; }
.nbp-careers__faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; padding: 24px; transition: background 120ms ease; }
.nbp-careers__faq-item summary::-webkit-details-marker { display: none; }
.nbp-careers__faq-item summary:hover { background: rgba(251, 249, 244, 0.5); }
.nbp-careers__faq-q { font-size: 18px; font-weight: 700; color: var(--nbp-ink); line-height: 1.3; }
.nbp-careers__faq-chev { color: var(--nbp-text-mute); font-size: 18px; transition: transform 200ms ease; flex-shrink: 0; }
.nbp-careers__faq-item[open] .nbp-careers__faq-chev { transform: rotate(180deg); }
.nbp-careers__faq-a { padding: 0 24px 24px; font-size: 15px; line-height: 1.7; color: var(--nbp-text-mute); }

/* 06 / Apply CTA */
.nbp-careers__apply-wrap { max-width: 920px; }
.nbp-careers__apply-card { border: 2px solid var(--nbp-ink); padding: 56px; position: relative; }
.nbp-careers__apply-tag { position: absolute; top: -12px; left: 40px; background: #fff; padding: 0 12px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--nbp-red); }
.nbp-careers__apply-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; }
.nbp-careers__apply-h { font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--nbp-ink); margin: 0 0 16px; }
.nbp-careers__apply-body { font-size: 16px; line-height: 1.7; color: var(--nbp-text-mute); max-width: 560px; margin: 0; }
.nbp-careers__apply-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--nbp-ink); color: #fff !important; padding: 16px 24px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; width: 100%; transition: background 120ms ease; }
.nbp-careers__apply-cta:hover { background: var(--nbp-red); color: #fff !important; }
.nbp-careers__apply-note { font-size: 12px; color: var(--nbp-text-mute); margin: 12px 0 0; text-align: center; }

/* Responsive */
@media (max-width: 1100px) {
  .nbp-careers__hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .nbp-careers__sec-grid { grid-template-columns: 1fr; gap: 32px; }
  .nbp-careers__traits-grid { grid-template-columns: repeat(2, 1fr); }
  .nbp-careers__process-grid { grid-template-columns: repeat(2, 1fr); }
  .nbp-careers__apply-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 900px) {
  .nbp-careers__hero-title { font-size: 44px; }
  .nbp-careers__why-h, .nbp-careers__traits-h, .nbp-careers__roles-h, .nbp-careers__process-h, .nbp-careers__faq-h { font-size: 30px !important; }
  .nbp-careers__why-grid { grid-template-columns: 1fr; }
  .nbp-careers__roles-head { flex-direction: column; align-items: flex-start; }
  .nbp-careers__role { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nbp-careers__hero, .nbp-careers__sec, .nbp-careers__process { padding: 56px 0; }
  .nbp-careers__hero-title { font-size: 36px !important; }
  .nbp-careers__hero-lede { font-size: 17px; }
  .nbp-careers__traits-grid, .nbp-careers__process-grid { grid-template-columns: 1fr; }
  .nbp-careers__hero-stat { padding: 24px; }
  .nbp-careers__stats-dl { gap: 16px; }
  .nbp-careers__stat--mid { padding: 0 16px; }
  .nbp-careers__apply-card { padding: 32px 24px; }
  .nbp-careers__apply-h { font-size: 26px; }
}

/* =====================================================================
   Why Subscribe page — .nbp-whysub__*  (mirrors WhySubscribe.tsx 1:1)
   ===================================================================== */
.nbp-whysub { background: #fff; color: var(--nbp-ink); }

/* Hero */
.nbp-whysub__hero { background: var(--nbp-ink); color: #fff; position: relative; overflow: hidden; }
.nbp-whysub__hero-bg { position: absolute; inset: 0; opacity: 0.07; pointer-events: none;
  background-image: radial-gradient(circle at 20% 20%, var(--nbp-gold) 0, transparent 40%), radial-gradient(circle at 80% 80%, var(--nbp-red) 0, transparent 50%); }
.nbp-whysub__hero-inner { position: relative; padding: 80px 0 96px; max-width: 1200px; }
.nbp-whysub__hero-eyebrow { color: var(--nbp-gold) !important; margin-bottom: 20px; }
.nbp-whysub__hero-title { font-size: clamp(48px, 7vw, 84px); font-weight: 900; line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 32px; max-width: 920px; color: #fff; }
.nbp-whysub__hero-title-accent { color: var(--nbp-gold); }
.nbp-whysub__hero-lede { font-size: 22px; line-height: 1.55; color: rgba(255,255,255,0.85); max-width: 760px; margin: 0; }
.nbp-whysub__hero-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.nbp-whysub__btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; transition: background 120ms ease, color 120ms ease; }
.nbp-whysub__btn--red { background: var(--nbp-red); color: #fff !important; }
.nbp-whysub__btn--red:hover { background: #fff; color: var(--nbp-ink) !important; }
.nbp-whysub__btn-link { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--nbp-gold) !important; border-bottom: 1px solid var(--nbp-gold); padding-bottom: 4px; text-decoration: none; transition: color 120ms ease, border-color 120ms ease; }
.nbp-whysub__btn-link:hover { color: #fff !important; border-bottom-color: #fff; }
.nbp-whysub__hero-stats { margin: 48px 0 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.15); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 640px; }
.nbp-whysub__hero-stat { margin: 0; }
.nbp-whysub__hero-stat-v { font-size: 40px; font-weight: 900; line-height: 1; color: var(--nbp-gold); margin: 0; }
.nbp-whysub__hero-stat dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); margin-top: 8px; }

/* Section labels */
.nbp-whysub__sec-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nbp-red); margin-bottom: 12px; }

/* The case (problem / answer split) */
.nbp-whysub__case { background: #fff; padding: 96px 0; border-bottom: 1px solid var(--nbp-rule); }
.nbp-whysub__case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.nbp-whysub__case-col { padding-left: 32px; }
.nbp-whysub__case-col--problem { border-left: 3px solid var(--nbp-red); }
.nbp-whysub__case-col--answer { border-left: 3px solid var(--nbp-blue); }
.nbp-whysub__case-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 12px; }
.nbp-whysub__case-label--red { color: var(--nbp-red); }
.nbp-whysub__case-label--blue { color: var(--nbp-blue); }
.nbp-whysub__case-h { font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--nbp-ink); margin: 0 0 20px; }
.nbp-whysub__case-body { font-size: 17px; line-height: 1.7; color: var(--nbp-text-mute); margin: 0; }

/* Pull quote */
.nbp-whysub__pull { background: var(--nbp-paper); padding: 80px 0; border-bottom: 1px solid var(--nbp-rule); }
.nbp-whysub__pull-inner { max-width: 1000px; text-align: center; }
.nbp-whysub__pull-quote { color: var(--nbp-gold); margin: 0 auto 24px; display: block; }
.nbp-whysub__pull-q { font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.25; font-style: italic; color: var(--nbp-ink); margin: 0; }
.nbp-whysub__pull-attrib { margin-top: 24px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nbp-red); }

/* Pillars */
.nbp-whysub__pillars { background: #fff; padding: 96px 0; }
.nbp-whysub__pillars-head { text-align: center; max-width: 740px; margin: 0 auto 56px; }
.nbp-whysub__pillars-h { font-size: 44px; font-weight: 700; line-height: 1.05; color: var(--nbp-ink); margin: 0; }
.nbp-whysub__pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.nbp-whysub__pillar { background: #fff; border: 1px solid var(--nbp-rule); padding: 28px; transition: border-color 160ms ease; }
.nbp-whysub__pillar:hover { border-color: var(--nbp-ink); }
.nbp-whysub__pillar-icon { width: 48px; height: 48px; background: var(--nbp-ink); color: var(--nbp-gold); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.nbp-whysub__pillar-h { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--nbp-ink); margin: 0 0 12px; }
.nbp-whysub__pillar p { font-size: 14.5px; line-height: 1.65; color: var(--nbp-text-mute); margin: 0; }

/* Compare table */
.nbp-whysub__compare { background: var(--nbp-paper); padding: 96px 0; border-top: 1px solid var(--nbp-rule); border-bottom: 1px solid var(--nbp-rule); }
.nbp-whysub__compare-wrap { max-width: 1000px; }
.nbp-whysub__compare-head { text-align: center; margin-bottom: 48px; }
.nbp-whysub__compare-h { font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--nbp-ink); margin: 0; }
.nbp-whysub__compare-table { background: #fff; border: 1px solid var(--nbp-rule); }
.nbp-whysub__compare-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; }
.nbp-whysub__compare-row + .nbp-whysub__compare-row { border-top: 1px solid var(--nbp-rule); }
.nbp-whysub__compare-row--head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--nbp-text-mute); border-bottom: 1px solid var(--nbp-rule); }
.nbp-whysub__compare-row--head + .nbp-whysub__compare-row { border-top: 0; }
.nbp-whysub__compare-cell { padding: 16px 24px; font-size: 15px; color: var(--nbp-ink); }
.nbp-whysub__compare-row--head .nbp-whysub__compare-cell { padding: 16px 24px; }
.nbp-whysub__compare-cell--us { text-align: center; background: var(--nbp-ink); color: #fff; }
.nbp-whysub__compare-cell--them { text-align: center; }
.nbp-whysub__compare-yes { text-align: center; color: var(--nbp-red); font-weight: 700; font-size: 18px; }
.nbp-whysub__compare-yes--mute { color: var(--nbp-text-mute); font-weight: 400; }
.nbp-whysub__compare-no { text-align: center; color: var(--nbp-text-mute); }
.nbp-whysub__compare-partial { text-align: center; color: var(--nbp-text-mute); font-style: italic; }
.nbp-whysub__compare-note { font-size: 13px; color: var(--nbp-text-mute); text-align: center; margin: 20px 0 0; }

/* Member voices */
.nbp-whysub__voices { background: #fff; padding: 96px 0; }
.nbp-whysub__voices-head { margin-bottom: 56px; }
.nbp-whysub__voices-h { font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--nbp-ink); margin: 0; max-width: 700px; }
.nbp-whysub__voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.nbp-whysub__voice { background: var(--nbp-paper); padding: 32px; border-top: 3px solid var(--nbp-gold); margin: 0; }
.nbp-whysub__voice-q { color: var(--nbp-gold); margin-bottom: 16px; display: block; }
.nbp-whysub__voice-text { font-size: 19px; line-height: 1.45; font-weight: 600; font-style: italic; color: var(--nbp-ink); margin: 0 0 20px; }
.nbp-whysub__voice-who { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--nbp-red); }

/* FAQ */
.nbp-whysub__faq { background: var(--nbp-paper); padding: 96px 0; border-top: 1px solid var(--nbp-rule); border-bottom: 1px solid var(--nbp-rule); }
.nbp-whysub__faq-wrap { max-width: 920px; }
.nbp-whysub__faq-head { text-align: center; margin-bottom: 48px; }
.nbp-whysub__faq-h { font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--nbp-ink); margin: 0; }
.nbp-whysub__faq-list { background: #fff; border: 1px solid var(--nbp-rule); }
.nbp-whysub__faq-item { border-top: 1px solid var(--nbp-rule); }
.nbp-whysub__faq-item:first-child { border-top: 0; }
.nbp-whysub__faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; padding: 24px; transition: background 120ms ease; }
.nbp-whysub__faq-item summary::-webkit-details-marker { display: none; }
.nbp-whysub__faq-item summary:hover { background: rgba(251, 249, 244, 0.6); }
.nbp-whysub__faq-q { font-size: 18px; font-weight: 700; color: var(--nbp-ink); line-height: 1.3; }
.nbp-whysub__faq-chev { color: var(--nbp-text-mute); font-size: 18px; transition: transform 200ms ease; flex-shrink: 0; }
.nbp-whysub__faq-item[open] .nbp-whysub__faq-chev { transform: rotate(180deg); }
.nbp-whysub__faq-a { padding: 0 24px 24px; font-size: 15px; line-height: 1.7; color: var(--nbp-text-mute); }

/* Final CTA */
.nbp-whysub__final { background: var(--nbp-ink); color: #fff; padding: 96px 0; }
.nbp-whysub__final-inner { max-width: 1000px; text-align: center; }
.nbp-whysub__final-eyebrow { color: var(--nbp-gold) !important; margin-bottom: 20px; }
.nbp-whysub__final-h { font-size: clamp(36px, 5vw, 56px); font-weight: 700; line-height: 1.05; color: #fff; margin: 0 0 24px; }
.nbp-whysub__final-lede { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.8); max-width: 680px; margin: 0 auto 40px; }
.nbp-whysub__final-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.nbp-whysub__final-fine { font-size: 12px; color: rgba(255,255,255,0.5); margin: 32px 0 0; }

/* Responsive */
@media (max-width: 1100px) {
  .nbp-whysub__pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .nbp-whysub__case-grid { grid-template-columns: 1fr; gap: 40px; }
  .nbp-whysub__voices-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 900px) {
  .nbp-whysub__hero-inner { padding: 56px 0 64px; }
  .nbp-whysub__case, .nbp-whysub__pillars, .nbp-whysub__compare, .nbp-whysub__voices, .nbp-whysub__faq, .nbp-whysub__final { padding: 64px 0; }
  .nbp-whysub__case-h, .nbp-whysub__pillars-h, .nbp-whysub__compare-h, .nbp-whysub__voices-h, .nbp-whysub__faq-h { font-size: 28px !important; }
  .nbp-whysub__pull { padding: 56px 0; }
}
@media (max-width: 640px) {
  .nbp-whysub__pillars-grid { grid-template-columns: 1fr; }
  .nbp-whysub__hero-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .nbp-whysub__hero-stat-v { font-size: 28px; }
  .nbp-whysub__compare-cell { padding: 12px 16px; font-size: 14px; }
  .nbp-whysub__compare-row--head .nbp-whysub__compare-cell { padding: 12px 16px; font-size: 10px; }
}

/* =====================================================================
   Harvard-and-Yale-Hate-You page — .nbp-hyhy__*  (mirrors HarvardYale.tsx)
   ===================================================================== */
.nbp-hyhy { background: #fff; color: var(--nbp-ink); }

/* Hero */
.nbp-hyhy__hero { background: var(--nbp-ink); color: #fff; position: relative; overflow: hidden; }
.nbp-hyhy__hero-bg { position: absolute; inset: 0; opacity: 0.08; pointer-events: none;
  background-image: radial-gradient(circle at 80% 30%, var(--nbp-red) 0, transparent 45%), radial-gradient(circle at 15% 85%, var(--nbp-gold) 0, transparent 50%); }
.nbp-hyhy__hero-inner { position: relative; padding: 80px 0 96px; max-width: 1200px; }
.nbp-hyhy__hero-eyebrow { color: var(--nbp-red) !important; margin-bottom: 20px; }
.nbp-hyhy__hero-title { font-size: clamp(56px, 9vw, 108px); font-weight: 900; line-height: 0.92; letter-spacing: -0.02em; margin: 0 0 32px; color: #fff; max-width: 960px; }
.nbp-hyhy__hero-title-accent { color: var(--nbp-red); font-style: italic; font-weight: 900; }
.nbp-hyhy__hero-lede { font-size: 22px; line-height: 1.5; color: rgba(255,255,255,0.85); max-width: 820px; margin: 0; font-family: var(--nbp-serif, "Source Serif 4", Georgia, serif); font-style: italic; }
.nbp-hyhy__hero-sub { margin-top: 24px; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.65); max-width: 760px; }
.nbp-hyhy__hero-cta { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Buttons */
.nbp-hyhy__btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; transition: background 120ms ease, color 120ms ease; }
.nbp-hyhy__btn--red { background: var(--nbp-red); color: #fff !important; }
.nbp-hyhy__btn--red:hover { background: #fff; color: var(--nbp-ink) !important; }
.nbp-hyhy__btn--lg { padding: 20px 40px; font-size: 15px; letter-spacing: 0.12em; }
.nbp-hyhy__btn-link { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--nbp-gold) !important; border-bottom: 1px solid var(--nbp-gold); padding-bottom: 4px; text-decoration: none; transition: color 120ms ease, border-color 120ms ease; }
.nbp-hyhy__btn-link:hover { color: #fff !important; border-bottom-color: #fff; }

/* Section labels */
.nbp-hyhy__sec-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nbp-red); margin-bottom: 16px; }

/* Drop-cap intro */
.nbp-hyhy__intro { background: var(--nbp-paper); padding: 80px 0; border-bottom: 1px solid var(--nbp-rule); }
.nbp-hyhy__intro-inner { max-width: 760px; }
.nbp-hyhy__intro-p { font-family: var(--nbp-serif, "Source Serif 4", Georgia, serif); font-size: 20px; line-height: 1.7; color: var(--nbp-ink); margin: 0; }
.nbp-hyhy__dropcap { float: left; font-family: var(--nbp-serif, "Source Serif 4", Georgia, serif); font-size: 88px; line-height: 0.85; font-weight: 900; color: var(--nbp-red); margin: 4px 12px 0 0; }

/* Argument blocks */
.nbp-hyhy__blocks { background: #fff; }
.nbp-hyhy__blocks-inner { max-width: 1100px; padding: 80px 24px; }
.nbp-hyhy__block { display: grid; grid-template-columns: 180px 1fr; gap: 56px; }
.nbp-hyhy__block + .nbp-hyhy__block { border-top: 1px solid var(--nbp-rule); padding-top: 64px; margin-top: 64px; }
.nbp-hyhy__block-rail { position: sticky; top: 24px; align-self: flex-start; }
.nbp-hyhy__block-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--nbp-red); line-height: 1.6; }
.nbp-hyhy__block-body { min-width: 0; }
.nbp-hyhy__block-setup { font-family: var(--nbp-serif, "Source Serif 4", Georgia, serif); font-size: 21px; line-height: 1.55; color: var(--nbp-ink); margin: 0 0 32px; font-style: italic; }
.nbp-hyhy__block-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--nbp-ink); color: #fff !important; padding: 12px 24px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; transition: background 120ms ease; }
.nbp-hyhy__block-cta:hover { background: var(--nbp-red); }

/* Evidence card */
.nbp-hyhy__evidence { display: flex; align-items: flex-start; gap: 16px; background: var(--nbp-paper); border-left: 3px solid var(--nbp-red); padding: 20px; margin-bottom: 12px; transition: border-color 160ms ease; }
.nbp-hyhy__evidence:last-of-type { margin-bottom: 32px; }
.nbp-hyhy__evidence:hover { border-left-color: var(--nbp-ink); }
.nbp-hyhy__evidence-icon { color: var(--nbp-red); flex-shrink: 0; margin-top: 4px; }
.nbp-hyhy__evidence-body { min-width: 0; }
.nbp-hyhy__evidence-kicker { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nbp-text-mute); margin-bottom: 6px; }
.nbp-hyhy__evidence-h { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--nbp-ink); margin: 0; }

/* Closing */
.nbp-hyhy__close { background: var(--nbp-paper); padding: 96px 0; border-top: 1px solid var(--nbp-rule); border-bottom: 1px solid var(--nbp-rule); }
.nbp-hyhy__close-inner { max-width: 860px; text-align: center; }
.nbp-hyhy__close-quote { font-family: var(--nbp-serif, "Source Serif 4", Georgia, serif); font-size: clamp(26px, 3.6vw, 38px); line-height: 1.35; color: var(--nbp-ink); font-style: italic; margin: 0 0 40px; }
.nbp-hyhy__close-label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--nbp-red); margin-bottom: 12px; }
.nbp-hyhy__close-h { font-size: clamp(40px, 6vw, 64px); font-weight: 900; line-height: 1.05; color: var(--nbp-ink); margin: 0; }

/* Final CTA */
.nbp-hyhy__final { background: var(--nbp-ink); color: #fff; padding: 112px 0; position: relative; overflow: hidden; }
.nbp-hyhy__final-bg { position: absolute; inset: 0; opacity: 0.06; pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, var(--nbp-red) 0, transparent 60%); }
.nbp-hyhy__final-inner { position: relative; max-width: 900px; text-align: center; }
.nbp-hyhy__final-wordmark { font-size: clamp(72px, 12vw, 140px); font-weight: 900; line-height: 0.9; letter-spacing: -0.02em; color: #fff; }
.nbp-hyhy__final-wordmark span { color: var(--nbp-red); }
.nbp-hyhy__final-lede { margin: 32px auto 0; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.75); max-width: 640px; }
.nbp-hyhy__final-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.nbp-hyhy__final-fine { margin-top: 32px; font-size: 12px; color: rgba(255,255,255,0.45); }

/* Responsive */
@media (max-width: 900px) {
  .nbp-hyhy__hero-inner { padding: 56px 0 64px; }
  .nbp-hyhy__intro, .nbp-hyhy__close { padding: 64px 0; }
  .nbp-hyhy__final { padding: 80px 0; }
  .nbp-hyhy__blocks-inner { padding: 56px 24px; }
  .nbp-hyhy__block { grid-template-columns: 1fr; gap: 20px; }
  .nbp-hyhy__block-rail { position: static; }
  .nbp-hyhy__block + .nbp-hyhy__block { padding-top: 48px; margin-top: 48px; }
  .nbp-hyhy__block-setup { font-size: 19px; }
  .nbp-hyhy__intro-p { font-size: 18px; }
  .nbp-hyhy__dropcap { font-size: 64px; }
}
@media (max-width: 640px) {
  .nbp-hyhy__btn { padding: 14px 22px; font-size: 13px; }
  .nbp-hyhy__btn--lg { padding: 16px 28px; font-size: 14px; }
  .nbp-hyhy__evidence { padding: 16px; gap: 12px; }
  .nbp-hyhy__evidence-h { font-size: 17px; }
}

/* =====================================================================
   FAQ page — .nbp-faq__*  (mirrors Faq.tsx 1:1)
   Note: parent `.nbp-faq` selector has no own block-level styles to avoid
   colliding with the legacy `.nbp-faq` flat-list class still present in
   theme content elsewhere. All styles are scoped under `.nbp-faq__*`.
   ===================================================================== */

/* Hero */
.nbp-faq__hero { background: var(--nbp-paper); border-bottom: 1px solid var(--nbp-rule); }
.nbp-faq__hero-inner { padding: 80px 0; max-width: 1200px; }
.nbp-faq__hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.nbp-faq__hero-copy { max-width: 820px; }
.nbp-faq__hero-eyebrow { color: var(--nbp-red) !important; margin-bottom: 20px; }
.nbp-faq__hero-title { font-size: clamp(48px, 7vw, 84px); font-weight: 900; line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 24px; color: var(--nbp-ink); }
.nbp-faq__hero-title-accent { color: var(--nbp-red); font-style: italic; font-weight: 900; }
.nbp-faq__hero-lede { font-size: 20px; line-height: 1.55; color: var(--nbp-text-mute); max-width: 680px; margin: 0; }
.nbp-faq__hero-stat { background: #fff; border: 1px solid var(--nbp-rule); padding: 24px; max-width: 280px; }
.nbp-faq__hero-stat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nbp-red); margin-bottom: 8px; }
.nbp-faq__hero-stat-n { font-size: 28px; font-weight: 900; line-height: 1; color: var(--nbp-ink); margin: 0 0 4px; }
.nbp-faq__hero-stat-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--nbp-text-mute); }

/* Jump nav */
.nbp-faq__jump { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 8px; }
.nbp-faq__jump-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--nbp-rule); padding: 10px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--nbp-ink) !important; text-decoration: none; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
.nbp-faq__jump-chip:hover { background: var(--nbp-ink); color: #fff !important; border-color: var(--nbp-ink); }
.nbp-faq__jump-chip svg { flex-shrink: 0; }

/* Groups */
.nbp-faq__groups { background: #fff; padding: 80px 0; }
.nbp-faq__groups-inner { max-width: 920px; display: flex; flex-direction: column; gap: 64px; }
.nbp-faq__group { scroll-margin-top: 96px; }
.nbp-faq__group-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid var(--nbp-ink); }
.nbp-faq__group-icon { width: 44px; height: 44px; background: var(--nbp-ink); color: var(--nbp-gold); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nbp-faq__group-meta { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nbp-red); margin-bottom: 4px; }
.nbp-faq__group-h { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--nbp-ink); margin: 0; }

/* Items */
.nbp-faq__list { border: 1px solid var(--nbp-rule); }
.nbp-faq__item + .nbp-faq__item { border-top: 1px solid var(--nbp-rule); }
.nbp-faq__item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; padding: 24px; transition: background 120ms ease; }
.nbp-faq__item summary::-webkit-details-marker { display: none; }
.nbp-faq__item summary:hover { background: rgba(251, 249, 244, 0.6); }
.nbp-faq__q { font-size: 18px; font-weight: 700; color: var(--nbp-ink); line-height: 1.35; }
.nbp-faq__chev { color: var(--nbp-text-mute); font-size: 18px; transition: transform 200ms ease; flex-shrink: 0; margin-top: 4px; }
.nbp-faq__item[open] .nbp-faq__chev { transform: rotate(180deg); }
.nbp-faq__a { padding: 0 24px 24px; font-size: 15.5px; line-height: 1.7; color: var(--nbp-text-mute); }
.nbp-faq__email, .nbp-faq__inline-link { color: var(--nbp-red) !important; text-decoration: underline; text-decoration-color: rgba(176, 36, 31, 0.4); text-underline-offset: 4px; }
.nbp-faq__email:hover, .nbp-faq__inline-link:hover { text-decoration-color: var(--nbp-red); }

/* Footer two-up */
.nbp-faq__foot { background: var(--nbp-paper); padding: 80px 0; border-top: 1px solid var(--nbp-rule); border-bottom: 1px solid var(--nbp-rule); }
.nbp-faq__foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1100px; }
.nbp-faq__foot-card { padding: 32px; }
.nbp-faq__foot-card--contact { background: #fff; border: 1px solid var(--nbp-rule); }
.nbp-faq__foot-card--sub { background: var(--nbp-ink); color: #fff; border-top: 3px solid var(--nbp-gold); }
.nbp-faq__foot-icon { width: 48px; height: 48px; background: var(--nbp-ink); color: var(--nbp-gold); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.nbp-faq__foot-eyebrow { color: var(--nbp-gold) !important; margin-bottom: 12px; }
.nbp-faq__foot-h { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--nbp-ink); margin: 0 0 12px; }
.nbp-faq__foot-h--inv { color: #fff; }
.nbp-faq__foot-p { font-size: 15.5px; line-height: 1.65; color: var(--nbp-text-mute); margin: 0 0 24px; }
.nbp-faq__foot-p--inv { color: rgba(255,255,255,0.75); }
.nbp-faq__foot-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.nbp-faq__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; transition: background 120ms ease, color 120ms ease; }
.nbp-faq__btn--ink { background: var(--nbp-ink); color: #fff !important; }
.nbp-faq__btn--ink:hover { background: var(--nbp-red); }
.nbp-faq__btn--red { background: var(--nbp-red); color: #fff !important; }
.nbp-faq__btn--red:hover { background: #fff; color: var(--nbp-ink) !important; }
.nbp-faq__btn-link { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid; transition: color 120ms ease, border-color 120ms ease; }
.nbp-faq__btn-link--ink { color: var(--nbp-ink) !important; border-bottom-color: var(--nbp-ink); }
.nbp-faq__btn-link--gold { color: var(--nbp-gold) !important; border-bottom-color: var(--nbp-gold); }
.nbp-faq__btn-link--gold:hover { color: #fff !important; border-bottom-color: #fff; }

/* Responsive */
@media (max-width: 900px) {
  .nbp-faq__hero-inner { padding: 56px 0; }
  .nbp-faq__hero-grid { grid-template-columns: 1fr; }
  .nbp-faq__hero-stat { max-width: none; }
  .nbp-faq__groups, .nbp-faq__foot { padding: 56px 0; }
  .nbp-faq__groups-inner { gap: 48px; }
  .nbp-faq__foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .nbp-faq__group-h { font-size: 24px; }
  .nbp-faq__q { font-size: 17px; }
  .nbp-faq__item summary, .nbp-faq__a { padding-left: 20px; padding-right: 20px; }
}

/* =====================================================================
   page.hbs — article-mode additions (.nbp-page--article)
   When a Ghost Page has a primary_tag, page.hbs renders a post-style
   layout with byline / share / author-block / comments. The reused
   .nbp-byline / .nbp-aboutstory / .nbp-authorblock / .nbp-article__*
   classes already have rules; these additions cover the hero-on-ink
   context (where byline text needs to be light) plus a few new wrappers.
   ===================================================================== */

/* Tag-link chain in hero (POLITICS · LOCAL  [Premium]) */
.nbp-page__hero-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.nbp-page__hero-labels .nbp-eyebrow { color: var(--nbp-gold) !important; }
.nbp-page__hero-labels .nbp-eyebrow:hover { color: #fff !important; }
.nbp-page__hero-labels-sep { color: rgba(255, 255, 255, 0.35); font-weight: 700; }

/* Byline inside the ink hero — recolor for dark background */
.nbp-page__hero-byline { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); max-width: 760px; }
.nbp-page__hero-byline .nbp-byline { color: rgba(251, 249, 244, 0.7) !important; }
.nbp-page__hero-byline .nbp-byline__authors,
.nbp-page__hero-byline .nbp-byline__authors a { color: #fff !important; font-weight: 700 !important; }
.nbp-page__hero-byline .nbp-byline__authors a:hover { color: var(--nbp-gold) !important; }
.nbp-page__hero-byline .nbp-byline__meta,
.nbp-page__hero-byline .nbp-byline__meta time,
.nbp-page__hero-byline .nbp-byline__updated { color: rgba(251, 249, 244, 0.65) !important; }

/* Comments section spacing */
.nbp-page__comments { margin: 64px 0 0; padding-top: 32px; border-top: 1px solid var(--nbp-rule); }
.nbp-page__comments :where(h2, h3, h4) { font-family: var(--nbp-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nbp-ink); margin-bottom: 16px; }

/* Article-mode page: tighten reviewed-pill spacing under comments/related */
.nbp-page--article .nbp-page__reviewed { margin-top: 48px; }
.nbp-page--article .nbp-article__related { margin-top: 64px; }

@media (max-width: 900px) {
  .nbp-page__hero-byline { margin-top: 18px; padding-top: 16px; }
}

/* Weather chip in the utility bar (hydrated by main-v133.js). */
.nbp-utility__weather { display: inline-flex; align-items: center; gap: 8px; }
.nbp-utility__weather-data { display: inline-flex; align-items: center; gap: 8px; }
.nbp-utility__weather-data[hidden] { display: none; }
.nbp-utility__weather-icon { font-size: 14px; line-height: 1; }