/* =========================
   DriftSignals — CLEAN CSS v5.4 (FULL REPLACEMENT)
   Goals:
   - Stable base system (header, hero, cards, typography)
   - Page-scoped rules only (no cross-page bleed)
   - Prose justification ONLY where intended
   - Publications: navy cards + light access boxes (scoped)
   - Subscribe: MailerLite scoped (home strip vs subscribe page)
   ========================= */

/* ===== Reset / Base ===== */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{ margin:0; }
img, svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button, input, select, textarea{ font:inherit; }

/* ===== Tokens ===== */
:root{
  --ink:#1f2a44;
  --muted:#6b7280;
  --line:#e5e7eb;

  --page:#ffffff;
  --outer:#f2f4f7;
  --soft:#f7f8fb;

  --topbar:#1f2a44;
  --accent:#c9a227;                 /* muted gold */
  --accent-soft: rgba(201,162,39,.14);

  --shadow-panel: 0 10px 24px rgba(17,24,39,.08);
  --shadow-card:  0 8px 18px rgba(17,24,39,.05);

  --radius:12px;
  --radius-lg:16px;

  --gutter:24px;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: var(--font-body);

  --text:16px;
  --text-sm:14.75px;
  --text-xs:14px;

  --h1:34px;
  --h2:22px;
  --h3:18px;
  --page-title:34px;
  --lead:16px;
}

html{ font-size:16px; }

body{
  font-family: var(--font-body);
  font-size: var(--text);
  line-height: 1.55;
  color: var(--ink);
  background: var(--outer);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Headings / Type ===== */
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
}
h1{ font-weight:800; font-size: var(--h1); }
h2{ font-weight:800; font-size: var(--h2); }
h3{ font-weight:800; font-size: var(--h3); }

h4,h5,h6{
  font-family: var(--font-body);
  font-weight:700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.page-title{
  font-size: var(--page-title);
  line-height: 1.15;
  margin: 0 0 10px;
}

.lead{
  font-size: var(--lead);
  line-height: 1.65;
  color: var(--muted);
  max-width: 72ch;
}

p{ margin: 0 0 1rem; }
li{ margin: .35rem 0; }
small, .small, .muted{
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.45;
}

/* ===== Layout Container ===== */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ===== Panel frame ===== */
.site-header,
main,
.site-footer{
  max-width:1100px;
  margin:0 auto;
  background: var(--page);
}

.site-header{ box-shadow: var(--shadow-panel); border-bottom: 1px solid var(--line); }
main{
  box-shadow: var(--shadow-panel);
  overflow:hidden;
  padding:0;
}
.site-footer{ box-shadow:none; margin-bottom:40px; }

main.container{
  padding-left:0;
  padding-right:0;
  padding-top:0;
  padding-bottom:10px;
}

/* ===== Header ===== */
.topbar{
  background: var(--topbar);
  color:#fff;
  font-size:12px;
}
.topbar-inner{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.topbar-right{ opacity:.92; }
.topbar-text{ letter-spacing:.02em; }

.navwrap{ background:#fff; }
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:74px;
}

.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}
.logo img{
  height:40px;
  width:auto;
  image-rendering: -webkit-optimize-contrast;
}

.nav{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.01em;
}
.nav a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.nav a.active{ font-weight:700; text-decoration:none; }

.nav a.subscribe{
  background: var(--ink);
  color:#fff;
  border:1px solid rgba(31,42,68,.92);
  border-radius:10px;
  padding:9px 16px;
  box-shadow: 0 10px 22px rgba(17,24,39,.10);
  text-decoration:none;
}
.nav a.subscribe:hover{ filter: brightness(.96); text-decoration:none; }

/* ===== Dropdown (Reports) — JS-driven ===== */
.nav-dd{ position:relative; display:inline-flex; align-items:center; z-index:60; }
.nav-dd__trigger{
  background:transparent;
  border:0;
  padding:0 4px;
  margin-left:2px;
  color:inherit;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.nav-dd__trigger::after{
  content:"▾";
  font-size:12px;
  opacity:.7;
  transform: translateY(-1px);
}
.nav-dd__menu{
  position:absolute;
  top:100%;
  left:-10px;
  margin-top:6px;
  min-width:250px;
  padding:10px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 40px rgba(17,24,39,.12);
  display:none;
  z-index:9999;
}
.nav-dd__menu a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  font-size:14.5px;
}
.nav-dd__menu a:hover{ background: rgba(31,42,68,.06); }
.nav-dd.is-open .nav-dd__menu,
.nav-dd.is-hover .nav-dd__menu{ display:block; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:9px 14px;
  font-weight:600;
  font-size:14.5px;
  border:1px solid rgba(31,42,68,.92);
  background:#fff;
  color:var(--ink);
  border-radius:10px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn.primary{ background: var(--ink); color:#fff; }
.btn.small{ padding:8px 12px; font-size:14px; }
.btn:hover{ transform: translateY(-1px); }

/* ===== Section rhythm ===== */
.section{ padding: 44px 0; }
.section + .section{ padding-top: 18px; }

.section-builtfor,
.section-latest,
.section-neutral,
.section-subscribe{
  border-top: 1px solid rgba(15,23,42,.06);
}

/* ===== Hero ===== */
.hero{
  position:relative;
  border-bottom:1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, var(--soft) 0%, #ffffff 74%);
  overflow:hidden;
  min-height:260px;
  padding:0 var(--gutter);
}
.hero .container{ padding-left:0; padding-right:0; }

.hero::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:60%;
  height:100%;
  background-image:url("/assets/img/hero-map.jpg");
  background-repeat:no-repeat;
  background-position:50% 56%;
  background-size:760px auto;
  opacity:1;
  pointer-events:none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 100%);
}

.hero-wrap{ position:relative; padding:48px 0 56px; z-index:1; }
.hero-text{ max-width:620px; width:100%; }

.hero h1{ font-size: var(--h1); line-height:1.08; margin:0; text-align:left; }
.hero p.lead{
  margin:14px 0 0;
  max-width:86ch;
  color: var(--muted);
  font-size:16.25px;
  line-height:1.7;
  text-align:left;
}

.hero .cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ===== Home: grids / cards ===== */
.cards{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.cards.builtfor,
.cards.neutral{ grid-template-columns: repeat(4, 1fr); }

.card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding:18px 18px 16px;
}
.card .date{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14.25px;
  color:var(--muted);
}
.card .title{
  margin-top:10px;
  font-size:18px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:-0.01em;
}
.card p{
  margin:10px 0 14px;
  color:var(--muted);
  font-size:14.75px;
  line-height:1.7;
  text-align:left;
}

/* Icon cards */
.icon-card{ padding:16px 16px 14px; }
.icon-card .card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.icon-bubble{
  width:44px; height:44px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(31,42,68,.06);
  border:1px solid rgba(31,42,68,.12);
  color: var(--ink);
  flex:0 0 auto;
}
.icon-bubble svg{ width:22px; height:22px; }
.icon-bubble svg,
.icon-bubble svg *{ fill: currentColor; stroke: currentColor; }
.icon-card .title{
  margin:0;
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-0.01em;
}
.icon-card p{ margin:8px 0 0; }

/* ===== Hide methodology section (CSS-only) ===== */
.method,
section.method,
#methodology,
#methodology-title,
.methodology-title{ display:none !important; }

/* ===== Prose / Briefs — JUSTIFICATION ONLY HERE ===== */
/* NOTE: this removes the cross-page “stretched spacing” problem */
.section.prose{ padding: clamp(42px, 6vw, 76px) 0; }
.prose{ max-width:72ch; margin:0 auto; }
.section.prose p,
.section.prose li{
  text-align: justify;
  text-justify: inter-word;
  hyphens:none;
}
.brief-content p,
.brief-content li{
  text-align: justify;
  text-justify: inter-word;
  hyphens:none;
}

/* ===== Share icons (brief pages) ===== */
.brief-prose{ position: relative; padding-top: 26px; }
.share-icons{
  position:absolute;
  top:86px;
  right:0;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
.share-ic{
  width:30px; height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  text-decoration:none;
  color:#94a3b8;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.share-ic i{ font-size:18px; line-height:1; }
.share-ic:hover{
  background: rgba(31,42,68,.06);
  color: var(--ink);
  transform: translateY(-1px);
}
@media (max-width: 960px){
  .share-icons{ position:static; margin:10px 0 12px; justify-content:flex-start; }
}
body.page-reports-weekly .share-icons{ display:none !important; }

/* ===== Reports pages (generic grid used on /reports and product pages) ===== */
.reports-hero{ padding: 28px 0 18px; }
.reports-lede{ margin:0; max-width:72ch; text-align:left; }
.reports-hero .reports-lede + .reports-lede{ margin-top:14px; }
.reports-section{ padding: 18px 0 48px; }

.reports-grid{ display:grid; gap:18px; }
.report-card{
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow: var(--shadow-card);
}
.report-card__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.report-pill{
  font-size:12px;
  line-height:1;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  color: var(--muted);
  background:#fff;
}
.report-pill--free{
  border-color: rgba(16,185,129,.35);
  color: rgba(6,95,70,1);
  background: rgba(16,185,129,.10);
}
.report-pill--trial{
  border-color: rgba(59,130,246,.35);
  color: rgba(30,64,175,1);
  background: rgba(59,130,246,.10);
}
.report-pill--coming{
  border-color: rgba(107,114,128,.35);
  color: rgba(55,65,81,1);
  background: rgba(107,114,128,.10);
}
.report-card__desc{
  margin:0 0 14px;
  max-width:78ch;
  color: var(--muted);
  text-align:left;
}
.report-card__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.btn--disabled{ opacity:.55; cursor:not-allowed; pointer-events:none; }

/* ===== Footer ===== */
.site-footer{
  padding: 20px 0 24px;
  border-top: 1px solid rgba(229,231,235,.9);
  background:#fff;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.footer-brand{ font-weight:700; font-size:14.5px; letter-spacing:.01em; }
.footer-sub{ margin-top:4px; font-size:14.25px; color: var(--muted); }
.footer-right a{
  margin-left:14px;
  text-decoration:none;
  color:#334155;
  font-size:14.5px;
}
.footer-right a:hover{ text-decoration:underline; }
.footer-brand-row{ display:flex; align-items:center; gap:12px; }
.footer-social.inline{ display:inline-flex; gap:10px; }
.footer-social.inline svg{
  width:18px; height:18px;
  fill: var(--ink);
  opacity:.7;
  transition: opacity .2s ease;
}
.footer-social.inline a:hover svg{ opacity:1; }

/* =========================
   HOME — Navy icon cards (Built-for + Neutral)
   ========================= */
.section-builtfor{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--soft) 0%, #ffffff 72%);
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.section-builtfor::before{
  content:"";
  position:absolute;
  inset:-40px -60px;
  background-image:url("/assets/img/hero-map.jpg");
  background-repeat:no-repeat;
  background-position: 78% 38%;
  background-size: 900px auto;
  opacity:.10;
  pointer-events:none;
}
.section-builtfor .container{ position:relative; z-index:1; }

.section-builtfor .icon-card,
.section-neutral .icon-card{
  background:#0f1b33;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
.section-builtfor .icon-card .title,
.section-neutral .icon-card .title{ color: rgba(255,255,255,.95); }
.section-builtfor .icon-card p,
.section-neutral .icon-card p{ color: rgba(255,255,255,.72); }

.section-builtfor .icon-bubble,
.section-neutral .icon-bubble{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.section-builtfor .icon-bubble svg,
.section-builtfor .icon-bubble svg *,
.section-neutral .icon-bubble svg,
.section-neutral .icon-bubble svg *{
  fill:#0f1b33 !important;
  stroke:#0f1b33 !important;
  opacity:1;
}

/* =========================
   HOME — Subscribe strip (MailerLite scoped)
   ========================= */
.section-subscribe{
  padding: 36px 0 !important;
  border-top: 1px solid rgba(15,23,42,.08);
  background: transparent;
}
.section-subscribe h2{ font-size: var(--h2); margin: 0 0 6px; }
.section-subscribe p.sub{ font-size: 14px; margin: 0; color: var(--muted); }

.section-subscribe .subscribe-row{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 18px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.section-subscribe .subscribe-form-wrap{
  flex: 1 1 auto;
  max-width: 640px;
  min-width: 320px;
}
.section-subscribe .subscribe-brand{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  opacity:.92;
}
.section-subscribe .subscribe-logo{ height:34px; width:auto; }

/* MailerLite (home strip only) */
.section-subscribe #mlb2-35635655.ml-form-embedContainer,
.section-subscribe #mlb2-35635655 .ml-form-align-center,
.section-subscribe #mlb2-35635655 .ml-form-align-default,
.section-subscribe #mlb2-35635655 .ml-form-embedWrapper,
.section-subscribe #mlb2-35635655 .ml-form-embedBody{
  background: transparent !important;
  border: 0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}
.section-subscribe #mlb2-35635655 .ml-form-embedContent{ display:none !important; }

.section-subscribe #mlb2-35635655 form.ml-block-form{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:0 !important;
  border:0 !important;
  background: transparent !important;
  box-shadow:none !important;
}
.section-subscribe #mlb2-35635655 .ml-form-formContent,
.section-subscribe #mlb2-35635655 .ml-form-fieldRow,
.section-subscribe #mlb2-35635655 .ml-field-group{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background: transparent !important;
}
.section-subscribe #mlb2-35635655 input.form-control,
.section-subscribe #mlb2-35635655 input[type="email"]{
  flex:1 1 auto !important;
  height:44px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  background:#fff !important;
  border-radius:12px !important;
  padding:0 14px !important;
  font-size:14.5px !important;
  color: var(--ink) !important;
  box-shadow:none !important;
  outline:none !important;
}
.section-subscribe #mlb2-35635655 .ml-form-embedSubmit{ margin:0 !important; }
.section-subscribe #mlb2-35635655 .ml-form-embedSubmit button{
  height:44px !important;
  padding:0 16px !important;
  border-radius:12px !important;
  background: var(--ink) !important;
  border:1px solid rgba(31,42,68,.92) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition: transform .15s ease, filter .15s ease !important;
}
.section-subscribe #mlb2-35635655 .ml-form-embedSubmit button:hover{
  transform: translateY(-1px) !important;
  filter: brightness(.96) !important;
}

@media (max-width: 900px){
  .section-subscribe .subscribe-row{ flex-direction:column; align-items:stretch; gap:12px; }
  .section-subscribe .subscribe-form-wrap{ max-width:100%; width:100%; min-width:0; }
  .section-subscribe .subscribe-brand{ justify-content:flex-start; }
  .section-subscribe #mlb2-35635655 form.ml-block-form{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .section-subscribe #mlb2-35635655 .ml-form-embedSubmit button{ width:100% !important; }
}

/* =========================
   SUBSCRIBE PAGE (MailerLite) — scoped + single SSOT
   Requires: <body class="subscribe-page">
   ========================= */
body.subscribe-page main{
  padding-top: 56px;
  padding-bottom: 72px;
}

body.subscribe-page .subscribe-embed{
  max-width: 560px;
  margin: 18px auto 0;
}

/* hard reset only here */
body.subscribe-page #mlb2-35635655,
body.subscribe-page #mlb2-35635655 *{
  box-sizing: border-box !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body.subscribe-page #mlb2-35635655.ml-form-embedContainer{
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  display: block !important;
}

body.subscribe-page #mlb2-35635655 .ml-form-align-center,
body.subscribe-page #mlb2-35635655 .ml-form-align-default{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  vertical-align:baseline !important;
}

/* one calm card */
body.subscribe-page #mlb2-35635655 .ml-form-embedWrapper.embedForm{
  background:#fff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:16px !important;
  box-shadow: 0 10px 24px rgba(17,24,39,.06) !important;
  padding:0 !important;
  overflow:hidden !important;
}

body.subscribe-page #mlb2-35635655 .ml-form-embedBody,
body.subscribe-page #mlb2-35635655 .ml-form-successBody{
  padding:22px !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body.subscribe-page #mlb2-35635655 .ml-form-embedContent,
body.subscribe-page #mlb2-35635655 .ml-form-successContent{
  text-align:center !important;
  margin:0 0 14px 0 !important;
}

body.subscribe-page #mlb2-35635655 .ml-form-embedContent h4,
body.subscribe-page #mlb2-35635655 .ml-form-successContent h4{
  margin:0 0 6px 0 !important;
  font-size:30px !important;
  line-height:1.12 !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  color: var(--ink) !important;
}

body.subscribe-page #mlb2-35635655 .ml-form-embedContent p,
body.subscribe-page #mlb2-35635655 .ml-form-successContent p{
  margin:0 !important;
  font-size:15.5px !important;
  line-height:1.55 !important;
  color: var(--muted) !important;
}

body.subscribe-page #mlb2-35635655 .ml-form-formContent{
  max-width:520px !important;
  margin:14px auto 0 !important;
}

body.subscribe-page #mlb2-35635655 input.form-control,
body.subscribe-page #mlb2-35635655 input[type="email"]{
  height:48px !important;
  padding:0 14px !important;
  font-size:16px !important;
  border-radius:12px !important;
  border:1px solid rgba(15,23,42,.14) !important;
  background:#fff !important;
  color: var(--ink) !important;
  box-shadow:none !important;
  text-align:center !important;
}

body.subscribe-page #mlb2-35635655 .ml-reassure{
  margin:10px 0 0 !important;
  font-size:13px !important;
  color: var(--muted) !important;
  text-align:center !important;
}

body.subscribe-page #mlb2-35635655 .ml-form-embedSubmit{
  max-width:520px !important;
  margin:12px auto 0 !important;
}

body.subscribe-page #mlb2-35635655 .ml-form-embedSubmit button{
  width:100% !important;
  height:48px !important;
  border-radius:12px !important;
  background: var(--ink) !important;
  border:1px solid rgba(31,42,68,.92) !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
body.subscribe-page #mlb2-35635655 .ml-form-embedSubmit button:hover{ filter: brightness(.96) !important; }

@media (max-width: 640px){
  body.subscribe-page #mlb2-35635655 .ml-form-embedBody,
  body.subscribe-page #mlb2-35635655 .ml-form-successBody{
    padding:18px !important;
  }
}

/* =========================
   CONTACT PAGE — scoped
   Requires: <body class="contact-page">
   ========================= */
.contact-page .contact-form{
  max-width: 640px;
  margin-top: 18px;
}
.contact-page .contact-form label{
  display:block;
  font-weight:700;
  margin:14px 0 6px;
  color: var(--ink);
}
.contact-page .contact-form input,
.contact-page .contact-form textarea,
.contact-page .contact-form select{
  display:block;
  width:100%;
  max-width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color: var(--ink);
  box-shadow:none;
  outline:none;
}
.contact-page .contact-form textarea{
  min-height: 180px;
  resize: vertical;
}
.contact-page .contact-form br{ display:none; }
.contact-page .contact-alt{ margin-top: 18px; }
.contact-page .contact-alt p{ margin: 0 0 10px; }

/* =========================
   WNB — minimal + stable
   ========================= */
body.wnb-page{ background: var(--outer); }
body.wnb-page main.wnb{
  max-width:none;
  margin:0;
  background: transparent;
  box-shadow:none;
  overflow:visible;
  padding:0;
}
body.wnb-page .site-header,
body.wnb-page .site-footer{
  max-width:1100px;
  margin:0 auto;
  background: var(--page);
}
.wnb-wrap{ max-width:1100px; margin:0 auto; padding:0 var(--gutter); }
.wnb-hero{ border-bottom:1px solid var(--line); background:#fff; padding: 28px 0 22px; }
.wnb-kicker{
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#475569;
  margin:0 0 10px;
}
.wnb-title{ margin:0 0 10px; font-size: var(--h1); line-height:1.12; }
.wnb-method{
  margin-top:10px;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background: rgba(15,23,42,.03);
  color:#334155;
  max-width:920px;
}
.wnb-body{ background:#fff; }
.wnb-grid{ max-width:1100px; margin:0 auto; padding: 22px var(--gutter) 34px; }
.wnb-grid::after{ content:""; display:block; clear:both; }

.wnb-toc-float{
  float:right;
  width:320px;
  margin:0 0 18px 18px;
  padding:16px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(10,20,30,.06);
}
.wnb-toc-float .wnb-tocbox__summary{
  font-weight:800;
  margin:0 0 10px;
  list-style:none;
  cursor:pointer;
}
.wnb-toc-float .wnb-tocbox__summary::-webkit-details-marker{ display:none; }
.wnb-toc-float .wnb-tocbox__nav a{
  display:block;
  padding:8px 0;
  text-decoration:none;
  color: var(--ink);
  opacity:.9;
  font-size:14px;
}
.wnb-toc-float .wnb-tocbox__nav a:hover{ text-decoration:underline; opacity:1; }
.wnb-toc-float .wnb-tocbox__top{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.08);
  font-weight:700;
}
@media (max-width: 960px){
  .wnb-title{ font-size: var(--page-title); }
  .wnb-toc-float{ float:none; width:auto; margin:12px 0 16px; }
}

/* =========================
   PUBLICATIONS — NAVY CARDS (SCOPED, SAFE)
   Requires: <body class="publications-page">
   ========================= */

/* stop justification on catalog page */
body.publications-page p,
body.publications-page li{
  text-align:left !important;
  text-justify:auto !important;
  word-spacing:normal !important;
  letter-spacing:0 !important;
  hyphens:none !important;
}

/* consistent width/gutters (in case sections aren't inside .container) */
body.publications-page .pubs-hero,
body.publications-page .pubs-head,
body.publications-page .pubs-grid,
body.publications-page .pub-access-grid{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  padding-left: var(--gutter, 24px);
  padding-right: var(--gutter, 24px);
}

/* spacing */
body.publications-page .pubs-hero{ padding-top: 30px; padding-bottom: 10px; }
body.publications-page .pubs-head{ padding-top: 18px; padding-bottom: 8px; }
body.publications-page .pubs-sub{ max-width:72ch; line-height:1.65; color: var(--muted); }

/* 2-col grid */
body.publications-page .pubs-grid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap:16px !important;
  padding-top:8px !important;
  padding-bottom:18px !important;
}
@media (max-width: 900px){
  body.publications-page .pubs-grid{ grid-template-columns:1fr !important; }
}

/* navy cards */
body.publications-page .pubs-grid .pub-card{
  background:#0f1b33 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:16px !important;
  box-shadow:none !important;
  padding:18px !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:100% !important;
}
body.publications-page .pubs-grid .pub-card h3{
  color: rgba(255,255,255,.95) !important;
  margin:0 0 8px !important;
  font-size:18px !important;
  line-height:1.25 !important;
}
body.publications-page .pubs-grid .pub-desc{
  color: rgba(255,255,255,.72) !important;
  margin:0 0 12px !important;
  line-height:1.6 !important;
}
body.publications-page .pubs-grid .pub-bullets{
  margin:0 0 12px !important;
  padding-left:18px !important;
}
body.publications-page .pubs-grid .pub-bullets li{
  color: rgba(255,255,255,.80) !important;
  margin:6px 0 !important;
  line-height:1.52 !important;
}
body.publications-page .pubs-grid .pub-bullets li::marker{
  color: rgba(201,162,39,.70) !important;
}
body.publications-page .pubs-grid .pub-access{
  margin-top:auto !important;
  padding-top:12px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.72) !important;
  font-size:14px !important;
  line-height:1.45 !important;
}
body.publications-page .pubs-grid .pub-access strong{
  color: rgba(255,255,255,.92) !important;
  font-weight:700 !important;
}
body.publications-page .pubs-grid .pub-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width: fit-content !important;
  margin-top:10px !important;
  padding:8px 12px !important;
  border-radius:10px !important;
  background: rgba(255,255,255,.92) !important;
  color:#0f1b33 !important;
  border:1px solid rgba(255,255,255,.92) !important;
  font-weight:700 !important;
  font-size:14px !important;
  text-decoration:none !important;
}
body.publications-page .pubs-grid .pub-link:hover{ background:#fff !important; }

/* access boxes (light) */
body.publications-page .pub-access-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap:16px !important;
  padding-top:10px !important;
  padding-bottom:18px !important;
}
@media (max-width: 980px){
  body.publications-page .pub-access-grid{ grid-template-columns:1fr !important; }
}
body.publications-page .pub-access-box{
  background: rgba(247,248,251,.95) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:16px !important;
  box-shadow:none !important;
  padding:18px !important;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 960px){
  .topbar-inner{ height:auto; padding:8px 0; }

  .nav-inner{
    height:auto;
    padding:14px 0;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .nav{ gap:14px; }

  .cards.builtfor,
  .cards.neutral{ grid-template-columns: repeat(2, 1fr); }
  .cards{ grid-template-columns: 1fr; }

  .hero::before{
    right:-70px;
    width:78%;
    background-size:720px auto;
  }
  .hero-wrap{ padding:44px 0 38px; }
  .hero h1{ font-size:36px; }
}

@media (max-width: 640px){
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-right a{ margin-left:0; margin-right:14px; }

  .nav-inner{ padding:10px 0 !important; gap:8px 12px; }
  .nav{ width:100%; justify-content:flex-start; gap:6px 12px !important; }
  .nav a{ font-size:13px !important; }

  .nav a.subscribe{
    border:0 !important;
    background: transparent !important;
    box-shadow:none !important;
    padding:6px 0 !important;
    border-radius:0 !important;
    color: var(--ink) !important;
    font-weight:600 !important;
  }

  /* Mobile readability: disable justification everywhere (including prose/briefs) */
  .section.prose p,
  .section.prose li,
  .brief-content p,
  .brief-content li{
    text-align:left !important;
    hyphens:auto;
    overflow-wrap:anywhere;
  }
}

/* =========================================================
   PUBLICATIONS — SSOT LAYOUT + TYPO RHYTHM (SAFE, SCOPED)
   Paste ONCE at VERY END of style.css
   ========================================================= */

body.publications-page{
  --pubs-max: 1100px;
  --pubs-gutter: var(--gutter, 24px);

  /* tighter + calmer rhythm */
  --pubs-hero-top: 28px;
  --pubs-hero-bottom: 14px;
  --pubs-head-top: 22px;
  --pubs-head-bottom: 10px;

  --pubs-measure: 62ch;   /* fixes awkward line breaks in photo 1 */
}

/* 0) Ensure the page uses the same gutters/width as header */
body.publications-page .pubs-hero,
body.publications-page .pubs-head,
body.publications-page .pubs-grid,
body.publications-page .pub-access-grid{
  max-width: var(--pubs-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pubs-gutter);
  padding-right: var(--pubs-gutter);
}

/* 1) Kill “stretched spacing” on this catalog page */
body.publications-page p,
body.publications-page li{
  text-align: left !important;
  text-justify: auto !important;
  word-spacing: normal !important;
  letter-spacing: 0 !important;
  hyphens: none !important;
}

/* 2) HERO TYPOGRAPHY — fixes photo 1 */
body.publications-page .pubs-hero{
  padding-top: var(--pubs-hero-top) !important;
  padding-bottom: var(--pubs-hero-bottom) !important;
}

body.publications-page .pubs-hero .page-title,
body.publications-page .pubs-hero h1{
  margin: 0 0 10px !important;
}

/* first line under title: slightly stronger, not too big */
body.publications-page .pubs-hero .lead{
  max-width: var(--pubs-measure) !important;
  margin: 0 0 10px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(31,42,68,.74) !important;
}

/* second paragraph: calmer + slightly tighter */
body.publications-page .pubs-sub{
  max-width: var(--pubs-measure) !important;
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: rgba(31,42,68,.66) !important;
}

/* 3) SECTION HEADS — consistent rhythm */
body.publications-page .pubs-head{
  padding-top: var(--pubs-head-top) !important;
  padding-bottom: var(--pubs-head-bottom) !important;
}

body.publications-page .pubs-head h2{
  margin: 0 0 8px !important;
}

/* subtle accent mark (keeps “governed system” feel) */
body.publications-page .pubs-head h2::after{
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(201,162,39,.55);
  box-shadow: 0 0 0 3px rgba(201,162,39,.10);
}

/* 4) REMOVE / SOFTEN THE UGLY DIVIDER (photo 2)
   If you have an <hr> or a .pubs-divider, neutralize it here. */
body.publications-page hr{
  border: 0 !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
  margin: 18px auto 10px !important;
  max-width: var(--pubs-max);
}

body.publications-page .pubs-divider{
  border: 0 !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
  margin: 18px auto 10px !important;
}

/* 5) GRIDS — keep the nice 2-col structure */
body.publications-page .pubs-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding-top: 10px !important;
  padding-bottom: 18px !important;
  align-items: stretch;
}
@media (max-width: 900px){
  body.publications-page .pubs-grid{
    grid-template-columns: 1fr !important;
  }
}

/* 6) NAVY CARDS — keep your current look, but slightly calmer */
body.publications-page .pubs-grid .pub-card{
  background: #0f1b33 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 18px !important;

  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

body.publications-page .pubs-grid .pub-card h3{
  color: rgba(255,255,255,.95) !important;
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

body.publications-page .pubs-grid .pub-desc{
  color: rgba(255,255,255,.72) !important;
  margin: 0 0 12px !important;
  line-height: 1.6 !important;
  max-width: 72ch;
}

/* bullets */
body.publications-page .pubs-grid .pub-bullets{
  margin: 0 0 12px !important;
  padding-left: 18px !important;
}
body.publications-page .pubs-grid .pub-bullets li{
  color: rgba(255,255,255,.80) !important;
  margin: 6px 0 !important;
  line-height: 1.52 !important;
}
body.publications-page .pubs-grid .pub-bullets li::marker{
  color: rgba(201,162,39,.70) !important;
}

/* access line */
body.publications-page .pubs-grid .pub-access{
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Open button: consistent + quiet */
body.publications-page .pubs-grid .pub-link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;

  margin-top: 10px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;

  background: rgba(255,255,255,.92) !important;
  color: #0f1b33 !important;
  border: 1px solid rgba(255,255,255,.92) !important;

  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
body.publications-page .pubs-grid .pub-link:hover{
  background: #ffffff !important;
}

/* 7) ACCESS & USE BOXES — keep light for contrast (matches photo 3) */
body.publications-page .pub-access-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
@media (max-width: 980px){
  body.publications-page .pub-access-grid{ grid-template-columns: 1fr !important; }
}
body.publications-page .pub-access-box{
  background: rgba(247,248,251,.95) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 18px !important;
}

.pub-link--disabled{
  opacity:.55;
  pointer-events:none;
  cursor:default;
}
.pub-status{
  margin:8px 0 0;
  font-size:13px;
  color: rgba(255,255,255,.65);
}

.pubs-banner{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.pubs-banner__title{ margin: 0 0 6px; }
.pubs-banner__body{ margin: 0; }

.pub-link--disabled{
  opacity: .6;
  pointer-events: none;
  cursor: default;
}
.pub-status{
  margin: 10px 0 0;
  font-size: 13px;
  opacity: .85;
}

/* Banner should behave like a UI component, not prose */
.publications-page .pubs-banner{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.10);
}

/* Kill prose paragraph spacing if any gets inherited */
.publications-page .pubs-hero .pubs-banner *{
  max-width: none;
}

.publications-page .pubs-banner__head{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.publications-page .pubs-banner__label{
  font-weight: 700;
}

.publications-page .pubs-banner__value{
  font-weight: 400;
  opacity: 0.9;
}

.publications-page .pubs-banner__body{
  margin: 0;
  line-height: 1.55;
  opacity: 0.95;
}

.publications-page .pubs-status{
  margin-top: 12px;
}

.publications-page .pubs-status .pubs-banner{
  width: 100%;
}

.publications-page .pubs-hero .pubs-banner{
  width: 100%;
  max-width: none;
}

.publications-page .pubs-hero .pubs-banner *{
  max-width: none;
}

.publications-page .section{
  max-width: 1120px;   /* or 1200px */
}

.publications-page .pubs-status .pubs-banner{
  width: 100%;
  max-width: none;
}

/* Publications intro should read like the banner body */
body.publications-page .pubs-intro{
  width: 100%;
  max-width: none;                 /* remove the narrow clamp */
  margin: 10px 0 0;                /* same visual rhythm as banner */
  padding: 0;                      /* keep it clean (not boxed) */
}

body.publications-page .pubs-intro p{
  margin: 0 0 10px;
  line-height: 1.6;
  font-size: 16px;
  color: rgba(31,42,68,.74);
  max-width: none;                 /* override .lead max-width */
}

/* optional: slightly calmer second paragraph */
body.publications-page .pubs-intro p:last-child{
  margin-bottom: 0;
  color: rgba(31,42,68,.66);
  font-size: 15.5px;
}

/* =========================================================
   HOME — SUBLINES (ONE UNIFIED STYLE) + BETTER SPACING
   ========================================================= */

/* 1) ONE SSOT SUBLINE STYLE (hero + section) */
.hero-subline,
.section-subline{
  display:block;

  /* unified typography */
  font-weight: 600;
  font-size: 17px;                 /* same everywhere */
  line-height: 1.35;
  letter-spacing: 0;

  /* unified color */
  color: rgba(31,42,68,.70);

  /* readable measure */
  max-width: 72ch;
}

/* 2) HERO: subline spacing + separation from lede */
.hero-headline{ margin: 0; }
.hero-headline .hero-subline{
  margin-top: 10px;                /* distance from H1 text */
  margin-bottom: 14px;             /* KEY: distance to the lede below */
}

/* If your lede has its own margin already, this still works */
.hero-lede{ margin-top: 0 !important; }

/* 3) SECTION HEADS: consistent rhythm */
.section-headline{ margin: 0 0 14px; }
.section-headline .section-subline{
  margin-top: 8px;
}

/* 4) Mobile: slightly smaller, still unified */
@media (max-width: 640px){
  .hero-subline,
  .section-subline{
    font-size: 16px;
    max-width: none;
  }
}

/* =========================================================
   HOME — "Publication Structure" section: bring back map.jpg
   Applies to: <section class="section section-whatyouget">
   ========================================================= */

.section-whatyouget{
  position: relative;
  overflow: hidden;

  /* subtle panel tint like your other sections */
  background: linear-gradient(180deg, var(--soft) 0%, #ffffff 72%);
  border-top: 1px solid rgba(15,23,42,.06);
}

.section-whatyouget::before{
  content:"";
  position:absolute;
  inset:-50px -70px;

  background-image: url("/assets/img/map.jpg");
  background-repeat: no-repeat;
  background-position: 78% 38%;
  background-size: 980px auto;

  opacity: .10;                 /* adjust 0.06–0.14 */
  pointer-events:none;
  z-index:0;
}

/* keep content above the background image */
.section-whatyouget .container{ position:relative; z-index:1; }

/* optional: slightly “glass” cards so the map reads behind them */
.section-whatyouget .card{
  background: rgba(255,255,255,.94);
}

/* =========================================================
   HOME — Publication Structure cards: map.jpg INSIDE each card
   Applies to cards within <section class="section section-whatyouget">
   ========================================================= */

.section-whatyouget .card{
  position: relative;                 /* needed for ::before */
  overflow: hidden;                   /* clip map to rounded corners */
  background: #fff;                   /* base */
}

/* map layer inside each card */
.section-whatyouget .card::before{
  content:"";
  position:absolute;
  inset:0;

  background-image: url("/assets/img/map.jpg");
  background-repeat:no-repeat;
  background-position: 78% 40%;       /* tweak */
  background-size: 520px auto;        /* tweak per card width */

  opacity: .55;                       /* transparency (0.06–0.18) */
  pointer-events:none;
  z-index:0;

  /* soften edges so it feels “printed”, not pasted */
  filter: saturate(.9) contrast(.95);
}

/* keep card content above the map */
.section-whatyouget .card > *{
  position: relative;
  z-index: 1;
}

/* optional: make the card feel slightly “frosted” so text stays crisp */
.section-whatyouget .card{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(42px);         /* harmless if unsupported */
}

/* =========================================================
   HERO v3 — typography polish (targets your exact markup)
   ========================================================= */

.hero.hero-v3 .hero-text{
  max-width: 60ch;                 /* improves “premium” readability */
}

/* Kicker: smaller, calmer, more “label-like” */
.hero.hero-v3 .hero-kicker{
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(31,42,68,.72);
}

/* H1: slightly tighter, cleaner */
.hero.hero-v3 .hero-headline{
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Subline: unified, but with breathing room */
.hero.hero-v3 .hero-subline{
  display: block;
  margin-top: 12px;
  margin-bottom: 18px;            /* key: separates from first lede */
  font-size: 18px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(31,42,68,.72);
}

/* Lede paragraphs: clearer hierarchy + nicer rhythm */
.hero.hero-v3 .hero-lede{
  margin: 0;
  font-size: 16.25px;
  line-height: 1.75;
  color: rgba(31,42,68,.74);
}

.hero.hero-v3 .hero-lede + .hero-lede{
  margin-top: 12px;
}

/* Secondary lede: slightly calmer */
.hero.hero-v3 .hero-lede--secondary{
  color: rgba(31,42,68,.66);
}

/* Make emphasis feel “designed”, not shouty */
.hero.hero-v3 .hero-lede strong{
  font-weight: 700;
  color: rgba(31,42,68,.92);
}

/* Optional: if you want fewer “bold pops” without editing HTML */
.hero.hero-v3 .hero-lede--secondary strong{
  font-weight: 650;
  color: rgba(31,42,68,.86);
}

/* Mobile: keep hierarchy but reduce size slightly */
@media (max-width: 640px){
  .hero.hero-v3 .hero-text{ max-width: none; }
  .hero.hero-v3 .hero-subline{ font-size: 17px; margin-bottom: 16px; }
  .hero.hero-v3 .hero-lede{ font-size: 16px; }
}

.report-page .report-block{
  margin-top: 28px;
}
.report-page .report-access{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* =========================================================
   REPORT PAGES — "Old format" SSOT (report-page + report-block)
   ========================================================= */

body.report-page .report-hero{
  padding: 34px 0 56px;
}

/* keep your prose measure but slightly wider for lists */
body.report-page .prose{
  max-width: 78ch;
}

/* headings rhythm inside report pages */
body.report-page .report-hero .page-title{
  margin: 0 0 10px;
}
body.report-page .report-hero > p{
  margin: 0 0 12px;
}

/* blocks read like “sections”, without huge gaps */
body.report-page .report-block{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,23,42,.08);
}

body.report-page .report-block h2{
  margin: 0 0 10px;
  font-size: 18px;
}

/* nicer lists for institutional feel */
body.report-page .report-block ul{
  margin: 0;
  padding-left: 18px;
}
body.report-page .report-block li{
  margin: 8px 0;
  line-height: 1.55;
}

/* Access block: slightly stronger separation */
body.report-page .report-access{
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(15,23,42,.12);
}

/* Support BOTH button systems (.btn and .button) */
body.report-page a.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 9px 14px;
  font-weight: 700;
  font-size: 14.5px;
  border: 1px solid rgba(31,42,68,.92);
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  transition: transform .15s ease, filter .15s ease;
}
body.report-page a.button.button-primary{
  background: var(--ink);
  color: #fff;
}
body.report-page a.button:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
}

/* optional: keep CTAs from looking lonely */
body.report-page .report-access a.button,
body.report-page .report-access a.btn{
  margin-top: 6px;
}

/* Mobile: prevent justification side-effects */
@media (max-width: 640px){
  body.report-page .section.prose p,
  body.report-page .section.prose li{
    text-align: left !important;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   ACCESS PAGE — institutional report-page look (scoped)
   Requires: <body class="access-page">
   Paste at VERY END of style.css
   ========================================================= */

body.access-page main{ padding: 0; }

/* IMPORTANT: your .section.prose is very tall (clamp(...)).
   On Access, we tighten it to match report pages. */
body.access-page .section.prose{
  padding: 38px 0 !important;
}

/* keep the column reading like a report */
body.access-page .access-hero{
  max-width: 860px;
  margin: 0 auto;
}

/* Status block (clean institutional banner) */
body.access-page .access-status{
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(247,248,251,.95);
}
body.access-page .access-status__head{
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
  margin-bottom: 6px;
}
body.access-page .access-status__label{
  font-weight: 800;
  color: rgba(31,42,68,.86);
}
body.access-page .access-status__value{
  color: rgba(31,42,68,.72);
}
body.access-page .access-status__body{
  color: rgba(31,42,68,.78);
  line-height: 1.55;
}

/* Report blocks (same mental model as old pages) */
body.access-page .access-block{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,23,42,.08);
}
body.access-page .access-sub{
  margin: 6px 0 0;
  max-width: 72ch;
  color: rgba(31,42,68,.70);
  line-height: 1.65;
}

/* 3-column tier grid = “institutional spec cards” */
body.access-page .access-tiergrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  body.access-page .access-tiergrid{ grid-template-columns: 1fr; }
}

body.access-page .access-tier{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: #fff;
  padding: 16px 16px 14px;
  box-shadow: 0 8px 18px rgba(17,24,39,.04);
}

body.access-page .access-tier__kicker{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(31,42,68,.65);
  margin: 0 0 6px;
}
body.access-page .access-tier__title{
  font-weight: 900;
  margin: 0 0 10px;
  color: rgba(31,42,68,.92);
}

body.access-page .access-bullets{
  margin: 0;
  padding-left: 18px;
}
body.access-page .access-bullets li{
  margin: 7px 0;
  line-height: 1.55;
  color: rgba(31,42,68,.80);
}
body.access-page .access-note{
  margin: 10px 0 0;
  font-size: 13.5px;
  color: rgba(31,42,68,.62);
}

/* Form wrapper = centered institutional “panel” */
body.access-page .access-formwrap{
  margin-top: 14px;
  max-width: 560px;
}

/* Make sure your subscribe-page styles DO NOT leak */
body.access-page #mlb2-35635655 .ml-form-embedWrapper.embedForm{
  border-radius: 16px !important;
}

/* contact footer spacing */
body.access-page .access-contact{
  margin-top: 14px;
}

/* =========================================================
   ACCESS PAGE — MailerLite form polish (scoped)
   Works with your embed #mlb2-35635655
   ========================================================= */

body.access-page #mlb2-35635655 form.ml-block-form{
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-top: 10px !important;
}

/* input */
body.access-page #mlb2-35635655 input.form-control,
body.access-page #mlb2-35635655 input[type="email"]{
  flex: 1 1 auto !important;
  height: 46px !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-size: 15.5px !important;
  box-shadow: none !important;
  outline: none !important;
}
body.access-page #mlb2-35635655 input.form-control:focus,
body.access-page #mlb2-35635655 input[type="email"]:focus{
  border-color: rgba(31,42,68,.45) !important;
  box-shadow: 0 0 0 4px rgba(31,42,68,.10) !important;
}

/* submit wrapper */
body.access-page #mlb2-35635655 .ml-form-embedSubmit{
  margin: 0 !important;
}

/* button */
body.access-page #mlb2-35635655 .ml-form-embedSubmit button{
  height: 46px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(31,42,68,.92) !important;
  background: var(--ink) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(17,24,39,.10) !important;
  transition: transform .15s ease, filter .15s ease !important;
  white-space: nowrap !important;
}
body.access-page #mlb2-35635655 .ml-form-embedSubmit button:hover{
  transform: translateY(-1px) !important;
  filter: brightness(.97) !important;
}

/* keep headline/lede tidy */
body.access-page #mlb2-35635655 .ml-form-embedContent h4{
  margin: 0 0 6px !important;
}
body.access-page #mlb2-35635655 .ml-form-embedContent p{
  margin: 0 0 8px !important;
  color: rgba(31,42,68,.70) !important;
}

/* mobile: stack input + button */
@media (max-width: 640px){
  body.access-page #mlb2-35635655 form.ml-block-form{
    flex-direction: column !important;
  }
  body.access-page #mlb2-35635655 .ml-form-embedSubmit button{
    width: 100% !important;
  }
}

body.access-page #mlb2-35635655 button{
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: var(--font-body) !important;
}

/* =========================================================
   INSTITUTIONAL PAGE SHELL (SSOT)
   ========================================================= */

.page-institutional{
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 20px 80px;
}

.page-institutional h1{
  margin-bottom: 12px;
}

.page-institutional .lead{
  margin-bottom: 28px;
  color: rgba(31,42,68,.75);
  font-size: 17px;
  line-height: 1.55;
}

/* =========================================================
   ACCESS — Navy tier cards (match HOME navy cards)
   Targets your actual markup: .access-tiergrid .access-tier
   ========================================================= */

body.access-page .access-tiergrid .access-tier{
  background:#0f1b33 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:16px !important;
  box-shadow:none !important;
}

/* headings */
body.access-page .access-tier__kicker{
  color: rgba(255,255,255,.70) !important;
}

body.access-page .access-tier__title{
  color: rgba(255,255,255,.95) !important;
}

/* bullets + text */
body.access-page .access-tiergrid .access-tier,
body.access-page .access-tiergrid .access-tier p,
body.access-page .access-tiergrid .access-tier li{
  color: rgba(255,255,255,.72) !important;
}

body.access-page .access-bullets li::marker{
  color: rgba(201,162,39,.70) !important; /* muted gold marker */
}

/* "Not yet available" note */
body.access-page .access-note{
  color: rgba(255,255,255,.62) !important;
}
body.access-page .access-note strong{
  color: rgba(255,255,255,.90) !important;
}

/* =========================================================
   STANDARD PAGES — match Access page rhythm (SSOT)
   Use on: About / Methodology / any long-form page
   Requires: bodyClass: standard-page
   Paste at VERY END of style.css
   ========================================================= */

body.standard-page main{
  padding: 0;
}

/* Your global .section.prose has very tall clamp padding.
   Standard pages should match Access-like rhythm. */
body.standard-page .section.prose{
  padding: 38px 0 !important;
}

/* Keep the same readable “report” measure */
body.standard-page .prose{
  max-width: 72ch;
  margin: 0 auto;
}

/* If you want them to read like Access (less “stretched”): */
body.standard-page .section.prose p,
body.standard-page .section.prose li{
  text-align: left !important;
  text-justify: auto !important;
  word-spacing: normal !important;
  letter-spacing: 0 !important;
  hyphens: none !important;
}

/* =========================================================
   STANDARD PAGES — match Access width (SSOT)
   Applies to: About / Methodology (bodyClass: standard-page)
   ========================================================= */

body.standard-page .section.prose{
  max-width: 860px;     /* same as Access */
  margin-left: auto;
  margin-right: auto;
}

/* keep inner prose measure if you still want it,
   OR remove this block if you want full 860px text width */
body.standard-page .prose{
  max-width: none;      /* let it use the 860px section width */
}

/* =========================================================
   CONTACT — match Access width
   Applies to: Contact (bodyClass: contact-page)
   ========================================================= */

body.contact-page .section.prose{
  max-width: 860px;     /* same as Access */
  margin-left: auto;
  margin-right: auto;
}

body.contact-page .prose{
  max-width: none;
}

/* =========================================================
   CONTACT — make it match Access page layout
   Paste at VERY END of style.css
   ========================================================= */

body.contact-page .section.prose{
  max-width: 860px;                 /* match Access */
  margin-left: auto;
  margin-right: auto;
  padding: 38px 0 !important;       /* match Access vertical rhythm */
}

/* Contact form should look like an institutional panel column */
body.contact-page .contact-form{
  max-width: 560px;                 /* match Access formwrap */
  margin: 18px auto 0;              /* center it */
}

/* Make sure the fields actually use that width */
body.contact-page .contact-form .form-row{
  width: 100%;
}

/* =========================================================
   CONTACT — center the form
   ========================================================= */

body.contact-page .contact-form{
  max-width: 700px !important;
  width: 100% !important;
  margin: 18px auto 0 !important;   /* ← THIS centers it */
}

/* keep inputs full width */
body.contact-page .contact-form input,
body.contact-page .contact-form textarea,
body.contact-page .contact-form select{
  width: 100% !important;
}

/* =========================================================
   CONTACT — make the lead paragraph same width as the rest
   Paste at VERY END of style.css
   ========================================================= */

body.contact-page .lead{
  max-width: none !important;   /* remove the 72ch clamp */
}

/* =========================================================
   ABOUT + METHODOLOGY — justify body text (scoped)
   Paste at VERY END of style.css
   ========================================================= */

body.about-page .section.prose p,
body.about-page .section.prose li,
body.methodology-page .section.prose p,
body.methodology-page .section.prose li{
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: none;
}

@media (max-width: 640px){
  body.about-page .section.prose p,
  body.about-page .section.prose li,
  body.methodology-page .section.prose p,
  body.methodology-page .section.prose li{
    text-align: left !important;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   DOC PAGES — unify About + Methodology + Contact + Access
   Goal: same top offset + same column width
   ========================================================= */

:root{
  --doc-max: 860px;      /* matches your Access page visual */
  --doc-pad-y: 38px;     /* tighter than clamp(...) */
}

/* lock the section box itself (width + top spacing) */
body.about-page .section.prose,
body.methodology-page .section.prose,
body.contact-page .section.prose,
body.access-page .section.prose{
  max-width: var(--doc-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: var(--doc-pad-y) !important;
  padding-bottom: var(--doc-pad-y) !important;
}

/* IMPORTANT: neutralize the global .prose max-width clamp on these pages */
body.about-page .prose,
body.methodology-page .prose,
body.contact-page .prose,
body.access-page .prose{
  max-width: none !important;
  margin: 0 !important;
}

/* =========================================================
   PUBLICATIONS — force ALL sections to align to same container
   Paste at VERY END of style.css
   ========================================================= */

body.publications-page .pubs-hero,
body.publications-page .pubs-head,
body.publications-page .pubs-grid,
body.publications-page .pubs-divider{
  /* same centered “page column” behavior as other pages */
  width: min(100% - 48px, 980px) !important; /* adjust 980px to match your site */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep internal grids from creating their own narrower center */
body.publications-page .pub-access-grid,
body.publications-page .pubs-grid{
  justify-content: stretch !important;
}

/* Make cards fill the Publications container nicely */
body.publications-page .pubs-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

/* Mobile: 1 column */
@media (max-width: 820px){
  body.publications-page .pubs-hero,
  body.publications-page .pubs-head,
  body.publications-page .pubs-grid,
  body.publications-page .pubs-divider{
    width: min(100% - 28px, 980px) !important;
  }

  body.publications-page .pubs-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Publications: ensure grids respect prose column */
body.publications-page .pubs-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 820px){
  body.publications-page .pubs-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PUBLICATIONS — align page width with prose pages
   Paste at VERY END of style.css
   ========================================================= */

/* 1) Make Publications sections use the SAME column width as prose pages */
body.publications-page .pubs-hero,
body.publications-page .pubs-head,
body.publications-page .pubs-grid {
  max-width: var(--prose-max, 900px); /* fallback if your site doesn't define it */
  margin-left: auto;
  margin-right: auto;
}

/* If you already have a known prose width, replace 900px with it, e.g. 860px */
/* body.publications-page .pubs-hero,
   body.publications-page .pubs-head,
   body.publications-page .pubs-grid { max-width: 860px; } */

/* 2) Keep your grids looking like grids (no "prose" spacing side effects) */
body.publications-page .pubs-grid {
  padding-left: 0;
  padding-right: 0;
}

/* 3) Ensure hero spacing matches other pages */
body.publications-page .pubs-hero {
  padding-top: 24px; /* tune if needed */
}

/* 4) Remove any accidental extra spacing between sections (common culprit) */
body.publications-page .pubs-hero + .pubs-head,
body.publications-page .pubs-head + .pubs-grid,
body.publications-page .pubs-grid + .pubs-head,
body.publications-page .pubs-grid + .pubs-divider,
body.publications-page .pubs-divider + .pubs-head,
body.publications-page .pubs-head + .pubs-divider {
  margin-top: 0;
}

/* =========================================================
   PUBLICATIONS — align vertical start with other pages
   Paste at VERY END of style.css
   ========================================================= */

/* 1) Ensure the first section starts with the same top padding */
body.publications-page main > section:first-child{
  padding-top: 44px !important; /* tune: 40–56 until it matches About/Contact */
}

/* 2) Remove any accidental top margin on the hero title (common cause) */
body.publications-page .pubs-hero .page-title{
  margin-top: 0 !important;
}

/* 3) Prevent margin-collapsing between first child and section */
body.publications-page .pubs-hero{
  overflow: auto; /* stops margin collapse without visual side effects */
}

/* =========================================================
   Publications page — align vertical start with other pages
   ========================================================= */

body.publications-page .pubs-hero {
  padding-top: var(--section-padding-top, 4rem);
}

/* =========================================================
   PUBLICATIONS — force same baseline + typography as prose pages
   Paste at VERY END of style.css
   ========================================================= */

/* A) Ensure we match whether "publications-page" is on body OR on a wrapper */
body.publications-page .pubs-hero,
.publications-page .pubs-hero{
  /* Align vertical start with other pages */
  padding-top: 4.5rem !important;   /* adjust to 4rem/5rem if needed */
  margin-top: 0 !important;
}

/* B) Make Publications H1 match the default page H1 (About/Methodology) */
body.publications-page .page-title,
.publications-page .page-title{
  /* Use the same font/color as normal page headings */
  font-family: inherit !important;   /* inherits from your global heading setup */
  color: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;

  /* Match typical prose H1 sizing/rhythm */
  font-size: 2.25rem !important;     /* tune if your prose h1 differs */
  line-height: 1.15 !important;
  margin: 0 0 0.75rem !important;
}

/* C) Make intro paragraphs match prose body text (color + width behavior) */
body.publications-page .pubs-intro p,
.publications-page .pubs-intro p{
  color: inherit !important;
  max-width: none !important;        /* prevents “narrow first paragraph” behavior */
}

/* D) If your hero has its own color/theme, neutralize it */
body.publications-page .pubs-hero,
.publications-page .pubs-hero{
  background: transparent !important;
}

/* =========================================================
   PUBLICATIONS — FINAL ALIGNMENT OVERRIDE (PASTE LAST)
   Goal: same vertical start as .section.prose pages (About, etc.)
   ========================================================= */

/* Match About's first-section padding (uses .section.prose clamp) */
body.publications-page .pubs-hero,
.publications-page .pubs-hero{
  padding-top: clamp(42px, 6vw, 76px) !important;
  margin-top: 0 !important;
  overflow: auto; /* prevents margin-collapsing */
}

/* Make sure the H1 doesn't introduce extra top offset */
body.publications-page .pubs-hero .page-title,
.publications-page .pubs-hero .page-title{
  margin-top: 0 !important;
}

/* =========================================================
   REPORT PAGES — SSOT SHELL (PASTE ONCE AT VERY END)
   Requires: bodyClass: report-page
   Goal: same width + same top offset as About/Methodology/Access
   ========================================================= */

body.report-page main{ padding: 0; }

/* Same doc width + rhythm */
body.report-page .section.prose{
  max-width: var(--doc-max, 860px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: var(--doc-pad-y, 38px) !important;
  padding-bottom: var(--doc-pad-y, 38px) !important;
}

/* Kill any inherited narrow prose clamp inside report pages */
body.report-page .prose{
  max-width: none !important;
  margin: 0 !important;
}

/* Lede style consistency */
body.report-page .lead{
  color: rgba(31,42,68,.74);
  margin: 0 0 12px;
}
body.report-page .lead--secondary{
  color: rgba(31,42,68,.66);
}

/* Blocks: tighter, “institutional” sectioning */
body.report-page .report-block{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,23,42,.08);
}
body.report-page .report-block:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Lists: stable spacing */
body.report-page .report-block ul{
  margin: 0;
  padding-left: 18px;
}
body.report-page .report-block li{
  margin: 8px 0;
  line-height: 1.55;
}

/* Access CTA spacing */
body.report-page .report-access .btn{
  margin-top: 10px;
}

/* Mobile: never justify */
@media (max-width: 640px){
  body.report-page .section.prose p,
  body.report-page .section.prose li{
    text-align: left !important;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* Access & Use — hard reset to prevent inherited vertical writing-mode */
.section-accessuse .accessuse-grid,
.section-accessuse .access-card,
.section-accessuse .access-card *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.section-accessuse .accessuse-grid{
  margin-top: 14px;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px){
  .section-accessuse .accessuse-grid{ grid-template-columns: 1fr; }
}

.section-accessuse .access-card{
  display: flex !important;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  text-decoration: none;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(247,248,251,.96);
  box-shadow: 0 10px 22px rgba(17,24,39,.05);
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-height: 260px;
}

.section-accessuse .access-card:hover{
  transform: translateY(-2px);
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 14px 30px rgba(17,24,39,.08);
}

/* Map watermark (optional) */
.section-accessuse .access-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("/assets/img/world-map-faint.png");
  background-repeat:no-repeat;
  background-position: right -30px center;
  background-size: 520px auto;
  opacity: .10;
  pointer-events:none;
}

.section-accessuse .access-card > *{
  position: relative;
  z-index: 1;
}

.section-accessuse .access-card-kicker{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(31,42,68,.65);
  margin: 0;
}

.section-accessuse .access-card-title{
  margin: 0;
  font-size: 18px;
  color: rgba(17,24,39,.92);
}

.section-accessuse .access-card-bullets{
  margin: 0;
  padding-left: 18px;
  min-height: 92px; /* equalize visual height */
}

.section-accessuse .access-card-bullets li{
  margin: 7px 0;
  line-height: 1.55;
  color: rgba(31,42,68,.80);
}

.section-accessuse .access-card-bullets li::marker{
  color: rgba(201,162,39,.70);
}

.section-accessuse .access-card-status{
  margin-top: auto;
  font-size: 13.5px;
  color: rgba(31,42,68,.62);
}

.section-accessuse .access-card-status strong{
  color: rgba(31,42,68,.86);
}

.access-card-kicker{
  font-size: 11px;
  letter-spacing: .12em;
  opacity: .55;
}

.access-card{
  cursor: pointer;
}

.access-card::after{
  content: "→";
  position: absolute;
  right: 16px;
  bottom: 14px;
  opacity: .45;
  font-size: 18px;
}

/* Access & Use: allow the subtext to run full width like other section intros */
.section-accessuse .section-subline{
  max-width: none;
}

/* =========================================================
   HOME — Access & Use (3 tier cards) — SSOT (PASTE LAST)
   Assumptions:
   - Section has class: .section-accessuse  (recommended)
   - Inside it, you have a grid wrapper: .accessuse-grid
   - Each card is an <a class="access-card"> ... </a>
   If your markup differs, tell me the exact classes and I’ll remap.
   ========================================================= */

/* 1) Uncap the text above cards (your earlier request) */
.section-accessuse .section-subline,
.section-accessuse .section-lede{
  max-width: none !important;
}

/* 2) 3-column grid */
.section-accessuse .accessuse-grid{
  margin-top: 14px;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .section-accessuse .accessuse-grid{ grid-template-columns: 1fr; }
}

/* 3) Card base (deeper grey) + map watermark */
.section-accessuse .access-card{
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;

  border-radius: 16px;
  padding: 18px;

  /* deeper grey (this WILL be visible) */
  background: #eef1f6 !important;

  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 8px 18px rgba(17,24,39,.04);
  overflow: hidden;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.section-accessuse .access-card::before{
  content:"";
  position:absolute;
  inset:0;

  /* map watermark */
  background-image: url("/assets/img/map.jpg");
  background-repeat: no-repeat;
  background-position: 80% 45%;
  background-size: 760px auto;

  /* adjust strength here */
  opacity: .10;

  pointer-events:none;
  z-index:0;
}

/* 4) Keep text above the watermark */
.section-accessuse .access-card > *{
  position: relative;
  z-index: 1;
}

/* 5) Hover state (institutional, not “app-y”) */
.section-accessuse .access-card:hover{
  transform: translateY(-2px);
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 14px 30px rgba(17,24,39,.08);
}

/* 6) Optional subtle arrow affordance */
.section-accessuse .access-card::after{
  content: "→";
  position: absolute;
  right: 16px;
  bottom: 14px;
  opacity: .35;
  font-size: 18px;
  z-index: 1;
}

/* 7) Bullet styling */
.section-accessuse .access-card ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
.section-accessuse .access-card li{
  margin: 7px 0;
  line-height: 1.55;
  color: rgba(31,42,68,.80);
}
.section-accessuse .access-card li::marker{
  color: rgba(201,162,39,.70);
}

/* 8) Prevent any weird vertical text modes bleeding in */
.section-accessuse,
.section-accessuse *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.footer-social.inline a svg{ display:block; }

/* =========================================================
   ACCESS PAGE — UNCAPPED TEXT (SCOPED, PASTE LAST)
   Fixes: global .lead { max-width:72ch; } and access-sub clamp
   ========================================================= */

body.access-page .access-hero .lead{
  max-width: none !important;   /* removes 72ch cap */
}

body.access-page .access-sub{
  max-width: none !important;   /* you previously set max-width:72ch */
}

body.access-page .access-status__body,
body.access-page .access-contact p{
  max-width: none !important;   /* ensure no inherited caps */
}

/* If you want the entire Access page column wider than 860px,
   uncomment this to use the site container width (1100px) instead. */
/*
body.access-page .section.prose{
  max-width: 1100px !important;
}
*/

/* Fallback if bodyClass isn't applied */
.section.prose.access-hero .lead,
.section.prose.access-hero .access-sub{
  max-width: none !important;
}

/* ACCESS PAGE — TYPOGRAPHY POLISH */
body.access-page h1.page-title{
  letter-spacing: -0.01em;
}

body.access-page .lead{
  font-size: 1.05rem;
  line-height: 1.6;
  color: #4b5563; /* slightly darker neutral */
}

/* ACCESS STATUS — INSTITUTIONAL NOTE */
body.access-page .access-status{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #1f2a44; /* navy anchor */
}

body.access-page .access-status__label{
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #6b7280;
}

body.access-page .access-status__value{
  font-weight: 600;
  color: #111827;
}

/* ACCESS TIERS — VISUAL BALANCE */
body.access-page .access-tier{
  display: flex;
  flex-direction: column;
}

body.access-page .access-bullets{
  flex-grow: 1;
}

body.access-page .access-note{
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #cbd5e1;
}

/* ACCESS PAGE — SECTION RHYTHM */
body.access-page .access-tiergrid{
  margin-top: 1.25rem;
  margin-bottom: 3rem;
}

body.access-page .access-block + .access-block{
  margin-top: 3.5rem;
}

/* EMAIL ACCESS — TRUST SIGNAL */
body.access-page .access-formwrap{
  padding: 1.5rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

body.access-page .access-formwrap h4{
  margin-bottom: 0.25rem;
}

/* HERO TEXT — justified (scoped) */
.hero.hero-v3 .hero-text{
  max-width: 58ch;              /* critical: prevents huge rivers */
}

.hero.hero-v3 .hero-lede{
  text-align: justify;
  text-justify: inter-word;     /* best supported behavior */
  hyphens: auto;                /* critical for justification */
  -webkit-hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;

  /* optional micro polish */
  letter-spacing: 0;
  word-spacing: 0.02em;
}

/* Reduce weird gaps on narrow screens */
@media (max-width: 640px){
  .hero.hero-v3 .hero-lede{
    text-align: left;           /* justified on mobile usually looks bad */
    hyphens: auto;
  }
}

.hero.hero-v3 .hero-lede{
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* HERO — polish line breaks by tuning measure (no nowrap) */
.hero.hero-v3 .hero-text{
  max-width: 68ch;     /* try 62ch–68ch */
}

.hero.hero-v3 .hero-lede{
  hyphens: none;               /* prevents watch-points */
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* =========================================================
   PUBLICATIONS — make "Issuance status" banner match Access status box
   Targets your current markup: <aside class="pubs-banner">...
   Paste ONCE at VERY END of style.css
   ========================================================= */

body.publications-page .pubs-banner{
  /* same geometry as Access status */
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;

  /* same surface */
  background: rgba(247,248,251,.95);
  border: 1px solid rgba(15,23,42,.10);

  /* Access box has a stronger left edge/rail */
  position: relative;
  overflow: hidden;
}

/* Left navy rail (like photo 1) */
body.publications-page .pubs-banner::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  background: #0f1b33; /* your navy */
}

/* Head row behaves like Access */
body.publications-page .pubs-banner__head{
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
  margin: 0 0 6px;
}

/* Label = bold, slightly darker */
body.publications-page .pubs-banner__label{
  font-weight: 800;
  color: rgba(31,42,68,.86);
}

/* Value = muted */
body.publications-page .pubs-banner__value{
  color: rgba(31,42,68,.72);
  font-weight: 500;
}

/* Body = same tone/line height as Access */
body.publications-page .pubs-banner__body{
  margin: 0;
  color: rgba(31,42,68,.78);
  line-height: 1.55;
}

/* Ensure no inherited max-width caps inside the hero */
body.publications-page .pubs-hero .pubs-banner,
body.publications-page .pubs-hero .pubs-banner *{
  max-width: none !important;
}