/* ============================================================
   AURELANE — Heading scale + centered layout (Lato)
   One type scale for every title on the site, centered,
   sized so headlines sit on 1–2 lines on desktop, 2–3 on mobile.
   ============================================================ */

:root {
  --t-display: clamp(1.55rem, 1.05rem + 1.9vw, 2.6rem);   /* section titles */
  --t-title:   clamp(1.35rem, 1rem + 1.4vw, 2.1rem);      /* chapter / sub titles */
  --t-page:    clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);     /* inner page H1 */
  --t-track:   0.06em;
}

/* ---- Shared heading treatment ---- */
.section-title,
.manifesto-title,
.chapter-title,
.regions-title,
.resp-title,
.contact-title {
  font-weight: 300;
  letter-spacing: var(--t-track);
  line-height: 1.22;
  text-wrap: balance;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 26ch;
}
.manifesto-title, .section-title, .regions-title, .resp-title, .contact-title { font-size: var(--t-display); }
.chapter-title { font-size: var(--t-title); max-width: 22ch; margin-bottom: 1.4rem; }

/* word-reveal spans: keep words centered without a trailing gap */
.reveal-words .word-mask { margin-right: 0; margin: 0 0.13em; }

.eyebrow, .chapter-eyebrow { text-align: center; margin-bottom: 1.4rem; }

/* ---- Manifesto ---- */
.manifesto-grid { justify-items: center; text-align: center; gap: 2rem; }
.manifesto-aside { justify-self: center; max-width: 60ch; text-align: center; }
.manifesto .round-arrow { margin-left: auto; margin-right: auto; }

/* ---- Horizontal chapters: centered card on a centered veil ---- */
.chapter { justify-content: center; }
.chapter-inner { margin: 0 auto; max-width: 680px; text-align: center; }
.chapter-body { margin-left: auto; margin-right: auto; max-width: 46ch; }
.chapter-veil {
  background:
    radial-gradient(70% 75% at 50% 50%, rgba(10, 24, 48, 0.86) 0%, rgba(10, 24, 48, 0.62) 45%, rgba(10, 24, 48, 0.12) 80%, rgba(10, 24, 48, 0) 100%);
}

/* ---- Process ---- */
.process-head { text-align: center; margin-bottom: 4rem; }
.pillar { text-align: center; }
.pillar p { max-width: 34ch; margin: 0 auto; }

/* ---- Regions: single centered column, regions in a row ---- */
.regions-grid { grid-template-columns: 1fr; gap: 3rem; justify-items: center; text-align: center; }
.regions-lead { max-width: 760px; }
.regions-title { margin-bottom: 1.4rem; }
.regions-body { margin: 0 auto; max-width: 54ch; }
.regions-list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; }
.regions-list li { padding-top: 0; }
.regions-veil {
  background:
    radial-gradient(80% 85% at 50% 50%, rgba(10, 24, 48, 0.86) 0%, rgba(10, 24, 48, 0.6) 55%, rgba(10, 24, 48, 0.3) 100%);
}

/* ---- Responsibility ---- */
.resp-grid { justify-items: center; text-align: center; }
.resp-cols { margin: 0 auto; }
.resp-cols p { margin: 0 auto; }

/* ---- Contact: centered lead, form beneath ---- */
.contact-grid { grid-template-columns: 1fr; gap: 3rem; justify-items: center; text-align: center; }
.contact-lead { max-width: 640px; }
.contact-form { width: 100%; max-width: 560px; text-align: left; }

/* ============================================================
   INNER PAGES (Expand, Source, News, FAQ, legal, articles)
   ============================================================ */
.content-header .wrap,
.audience-hero-copy { text-align: center; }
.content-eyebrow { text-align: center; }
.content-title {
  font-size: var(--t-page);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-wrap: balance;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}
.content-sub { margin-left: auto; margin-right: auto; text-wrap: pretty; }

/* Expand / Source hero: copy centered above, image below */
.audience-hero-grid { grid-template-columns: 1fr !important; justify-items: center; gap: clamp(2rem, 4vw, 3rem) !important; }
.audience-hero-copy { max-width: 720px; }
.audience-hero-media { order: 0 !important; width: 100%; max-width: 980px; aspect-ratio: 21 / 9 !important; }
.audience-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.news-post-title {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: 300;
  line-height: 1.2;
  text-wrap: balance;
}
.content-cta h3,
.audience-banner h3 {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  font-weight: 300;
  text-wrap: balance;
}
.audience-banner .wrap { text-align: center; justify-items: center; }
.audience-banner-actions { justify-content: center; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  :root { --t-track: 0.04em; }
  .manifesto-title, .section-title, .regions-title, .resp-title, .contact-title {
    font-size: clamp(1.35rem, 0.9rem + 2.6vw, 1.7rem);
    max-width: 22ch;
  }
  .manifesto .manifesto-title { font-size: clamp(1.35rem, 0.9rem + 2.6vw, 1.7rem); }
  .chapter-title { font-size: clamp(1.25rem, 0.9rem + 2.2vw, 1.55rem) !important; max-width: 20ch; }
  .chapter-inner { padding: 2rem 1.6rem !important; }
  .chapter-veil {
    background: radial-gradient(95% 70% at 50% 50%, rgba(10, 24, 48, 0.88) 0%, rgba(10, 24, 48, 0.7) 55%, rgba(10, 24, 48, 0.35) 100%) !important;
  }
  .pillars { grid-template-columns: 1fr !important; gap: 2.4rem !important; }
  .regions-list { gap: 0.9rem 1.8rem; }
  .content-title { font-size: clamp(1.6rem, 1rem + 3.2vw, 2.1rem); max-width: 20ch; }
  .audience-hero-media { aspect-ratio: 16 / 10 !important; }
  .news-post-title { font-size: clamp(1.4rem, 1rem + 2.4vw, 1.8rem); }
}

/* Footer: prevent long emails overflowing narrow screens */
.footer-col { min-width: 0; }
.footer-col a, .footer-line { overflow-wrap: anywhere; }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr !important; } }

/* News article header: centered */
.news-post-header { text-align: center; }
.news-post-meta { justify-content: center; }
.news-post-title { margin-left: auto !important; margin-right: auto !important; max-width: 26ch !important; }

/* ============================================================
   WIDE-SCREEN BALANCE — use the width: headlines on 2 lines,
   wider reading measure, less empty margin either side.
   ============================================================ */
@media (min-width: 900px) {
  :root { --t-display: clamp(1.8rem, 0.9rem + 2.1vw, 3rem); }
  .manifesto-title, .section-title, .regions-title, .resp-title, .contact-title { max-width: 34ch; }
  .chapter-title { max-width: 26ch; }
  .manifesto-aside { max-width: 72ch; }
  .aside-body { font-size: 1.12rem; }
  .regions-lead { max-width: 1100px; }
  .regions-body { max-width: 68ch; font-size: 1.08rem; }
  .regions-list { gap: 1rem 4.5rem; }
  .resp-cols { max-width: 1200px; gap: 2.5rem 4rem; }
  .contact-lead { max-width: 900px; }
  .content-title { max-width: 30ch; }
  .content-sub { max-width: 68ch; }
  .audience-hero-copy { max-width: 900px; }
}
@media (min-width: 900px) {
  .contact-form { max-width: 860px; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 3rem; }
  .contact-form .send-btn { margin-top: 0.6rem; }
  .contact-form .field:nth-child(n+3) { grid-column: 1 / -1; }
  .contact-form .send-btn { grid-column: 1 / -1; justify-self: center; }
}

/* ---------- Logo integration ---------- */
.brand { gap: 0.75rem; }
.brand-mark { width: auto; height: 40px; display: block; flex: none; }
.brand-word { font-size: 0.92rem; letter-spacing: 0.16em; }
.brand-footer { display: inline-block; }
.footer-logo { display: block; width: auto; height: 88px; }

/* Hero: typeset wordmark, tagline kept clear of the globe */
.hero { padding-top: clamp(8.5rem, 18vh, 14rem) !important; }
.hero-tagline { color: #EAF1F8; opacity: 0.85; font-weight: 500; letter-spacing: 0.22em; padding-left: 0.22em; }
.scroll-cue span:first-child { font-weight: 500; font-size: 0.7rem; }
.scroll-cue.pulse { animation-name: cuePulseStrong; }
@keyframes cuePulseStrong { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
.scroll-underline { opacity: 0.85; }

@media (max-width: 768px) {
  .brand-mark { height: 34px; }
  .brand-word { font-size: 0.78rem; letter-spacing: 0.14em; }
  .footer-logo { height: 72px; }
  .hero-tagline { font-size: 0.66rem; letter-spacing: 0.16em; max-width: 86vw; line-height: 1.6; }
}
@media (max-width: 480px) {
  .brand-word { display: none; }
}
@media (max-width: 768px) {
  .scroll-cue span:first-child { color: #F5F7FA; }
  .scroll-underline { background: #0A1830; }
}

/* ---------- Title refinement: normal word spacing, calmer scale ---------- */
.reveal-words .word-mask { margin-right: 0; }
:root {
  --t-display: clamp(1.45rem, 1rem + 1.5vw, 2.25rem);
  --t-track: 0.05em;
}
.manifesto-title, .section-title, .regions-title, .resp-title, .contact-title {
  font-weight: 300;
  line-height: 1.25;
  max-width: 30ch;
}
.eyebrow, .chapter-eyebrow { margin-bottom: 1.6rem; }
.contact-email { letter-spacing: 0.04em; font-size: 1rem; }
@media (min-width: 900px) {
  :root { --t-display: clamp(1.9rem, 1rem + 1.4vw, 2.5rem); }
  .manifesto-title, .section-title, .regions-title, .resp-title, .contact-title { max-width: 40ch; }
}
@media (max-width: 768px) {
  :root { --t-track: 0.03em; }
  .manifesto-title, .section-title, .regions-title, .resp-title, .contact-title { max-width: 22ch; line-height: 1.28; }
}

/* ---------- Footer: compact, logo in the top row ---------- */
.footer { padding: 3.5rem 0 2rem !important; }
.footer-grid {
  grid-template-columns: 1.3fr 1fr 1fr 0.8fr !important;
  gap: 2.5rem 3rem !important;
  align-items: start;
  margin-bottom: 2.5rem !important;
}
.footer-brand { justify-content: flex-start; }
.footer-logo { height: 104px; }
.footer-base { padding-top: 1.4rem !important; justify-content: center !important; }
.contact { padding-bottom: clamp(4rem, 7vw, 6rem) !important; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .footer-logo { height: 84px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem 1.5rem !important; }
  .footer-grid > .footer-col:nth-child(2) { grid-column: 1 / -1; }
  .footer-logo { height: 76px; }
}
/* Footer: logo · company · legal */
.footer-grid { grid-template-columns: 1.4fr 1fr 0.8fr !important; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .footer-grid > .footer-col:nth-child(2) { grid-column: auto; } }
/* Footer: logo left, info grouped right */
.footer-grid { grid-template-columns: 1fr auto auto !important; column-gap: clamp(3rem, 8vw, 7rem) !important; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr auto !important; column-gap: 2rem !important; } }
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr auto !important; column-gap: 1.5rem !important; }
  .footer-head { letter-spacing: 0.14em; }
}

/* ---------- Dark theme: deep navy space behind the globe ---------- */
html {
  background-color: #0A1830 !important;
  background-image: radial-gradient(120% 90% at 75% 0%, #1b3a5f 0%, #0d2240 38%, #0A1830 62%, #060f1d 100%) !important;
  background-attachment: fixed !important;
}
body, body.post-globe { background: transparent !important; color: #EAF1F8; }
::selection { background: #8FBCE6; color: #0A1830; }

/* Header: full logo, no separate wordmark */
.brand-logo { display: block; height: 80px; width: auto; margin: -6px 0; }
@media (max-width: 768px) { .brand-logo { height: 62px; margin: -4px 0; } }

/* Header: globe mark only (A + I) */
.brand-logo-mark { height: 50px; margin: 0; }
@media (max-width: 768px) { .brand-logo-mark { height: 42px; } }

/* ---- Tighter vertical rhythm: no forced full-screen heights ---- */
:root { --pad-y: 8rem; }
.regions, .responsibility { min-height: 0; padding: 7rem 0; }
.regions + .responsibility { padding-top: 3rem; }
@media (max-width: 900px) {
  :root { --pad-y: 5.5rem; }
  .regions, .responsibility { padding: 5rem 0; }
  .regions + .responsibility { padding-top: 2.5rem; }
}
/* Seamless Regions → Responsibility: no section-wide tint band, matched panels */
.regions-tint { display: none; }
.regions .regions-grid::before { opacity: 1; }
.regions .regions-grid { max-width: 1240px; margin-left: auto; margin-right: auto; }
.regions-veil, .responsibility-veil { display: none; }
.regions, .responsibility { overflow: visible; }
@media (max-width: 900px) { .regions .regions-grid::before, .responsibility .resp-grid::before { box-shadow: none; } }


/* ---- Full-bleed image hero (Source) ---- */
body.content-page .audience-hero.hero-full {
  position: relative;
  min-height: 82vh; min-height: 82svh;
  display: flex; align-items: center; justify-content: center;
  padding: 9rem 0 5rem;
  margin-top: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-full-media { position: absolute; inset: 0; z-index: -1; }
.hero-full-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.hero-full-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(10,24,48,0.72) 0%, rgba(10,24,48,0.45) 60%, rgba(10,24,48,0.25) 100%),
    linear-gradient(180deg, rgba(10,24,48,0.55) 0%, rgba(10,24,48,0) 30%, rgba(10,24,48,0) 70%, #0A1830 100%);
}
.hero-full-copy { position: relative; text-align: center; max-width: 760px; }
.hero-full-copy .content-title { margin-top: 0.5rem; }
.hero-full-copy .content-sub { max-width: 34em; }
@media (max-width: 768px) {
  body.content-page .audience-hero.hero-full { min-height: 78svh; padding: 7rem 0 3.5rem; }
  .hero-full-media img { object-position: 35% 60%; }
}

/* ============================================================
   SOURCE PAGE — homepage text system: centered, uppercase light titles
   ============================================================ */
:is(.page-source, .page-expand) .hero-full-copy .content-title,
:is(.page-source, .page-expand) .audience-banner h3,
:is(.page-source, .page-expand) .content-cta h3 {
  font-family: var(--font-head);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--t-track);
  line-height: 1.22;
  text-wrap: balance;
}
:is(.page-source, .page-expand) .hero-full-copy .content-title { font-size: var(--t-page); letter-spacing: 0.12em; margin: 0 auto 1.4rem; }
:is(.page-source, .page-expand) .hero-full-copy .content-eyebrow { margin-bottom: 1.4rem; }
:is(.page-source, .page-expand) .hero-full-copy .content-sub { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem); line-height: 1.7; color: #D6E4F4; }
:is(.page-source, .page-expand) .audience-banner h3,
:is(.page-source, .page-expand) .content-cta h3 { font-size: var(--t-title); max-width: 26ch; margin-left: auto; margin-right: auto; }

/* Intro: one centered column like the homepage manifesto */
:is(.page-source, .page-expand) .audience-intro { border-top: 0; padding: clamp(4rem, 8vh, 6rem) 0 clamp(2rem, 4vh, 3rem); }
:is(.page-source, .page-expand) .audience-intro-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.4rem; }
:is(.page-source, .page-expand) .audience-intro-lead {
  font-family: var(--font-head); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--t-track); line-height: 1.3; text-wrap: balance;
  font-size: var(--t-title); max-width: 30ch; color: #EAF1F8;
}
:is(.page-source, .page-expand) .audience-intro-body { max-width: 62ch; text-wrap: pretty; }

/* Services: centered eyebrow, centered stacked rows */
:is(.page-source, .page-expand) .services-section-head { grid-template-columns: 1fr; justify-items: center; border-top: 0; padding-bottom: 2rem; }
:is(.page-source, .page-expand) .services-section-rule { display: none; }
:is(.page-source, .page-expand) .services-eyebrow { text-align: center; }
:is(.page-source, .page-expand) .services-directory { max-width: 820px; margin: 0 auto; }
:is(.page-source, .page-expand) .service-row { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.9rem; padding: 2.4rem 0; }
:is(.page-source, .page-expand) .service-row-head { grid-template-columns: 1fr; justify-items: center; gap: 0.6rem; }
:is(.page-source, .page-expand) .service-num { padding-top: 0; }
:is(.page-source, .page-expand) .service-title { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.14em; }
:is(.page-source, .page-expand) .service-body { max-width: 60ch; margin: 0 auto; text-wrap: pretty; }

/* Banner: stacked, centered */
:is(.page-source, .page-expand) .audience-banner .wrap { grid-template-columns: 1fr; gap: 1.6rem; }
:is(.page-source, .page-expand) .audience-banner-actions { justify-content: center; }

@media (max-width: 768px) {
  :is(.page-source, .page-expand) .hero-full-copy .content-title { letter-spacing: 0.1em; }
  :is(.page-source, .page-expand) .hero-full-copy .content-sub { font-size: 0.98rem; }
  :is(.page-source, .page-expand) .audience-intro { padding: 3.5rem 0 1.5rem; }
  :is(.page-source, .page-expand) .audience-intro-lead { max-width: 22ch; }
  :is(.page-source, .page-expand) .services-eyebrow { max-width: 24ch; line-height: 1.8; }
  :is(.page-source, .page-expand) .service-row { padding: 2rem 0; gap: 0.75rem; }
  :is(.page-source, .page-expand) .service-body { font-size: 0.95rem; }
}
:is(.page-source, .page-expand) .audience-intro-lead {
  text-transform: none; letter-spacing: 0.01em; font-weight: 300;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.45; max-width: 36ch;
}
@media (max-width: 768px) {
  :is(.page-source, .page-expand) .audience-intro-lead { max-width: 26ch; }
  :is(.page-source, .page-expand) .services-eyebrow { max-width: none; letter-spacing: 0.22em; }
}
:is(.page-source, .page-expand) .services-section { padding-top: 1rem; } :is(.page-source, .page-expand) .services-section-head { padding-top: 1.5rem; }

.page-expand .hero-full-media img { object-position: center 45%; }
@media (max-width: 768px) { .page-expand .hero-full-media img { object-position: center 50%; } }
@media (max-width: 768px) {
  .hero-full-copy .content-eyebrow { letter-spacing: 0.22em; }
  .page-expand .hero-full-media::after {
    background:
      radial-gradient(90% 55% at 50% 45%, rgba(10,24,48,0.82) 0%, rgba(10,24,48,0.55) 65%, rgba(10,24,48,0.35) 100%),
      linear-gradient(180deg, rgba(10,24,48,0.55) 0%, rgba(10,24,48,0) 30%, rgba(10,24,48,0) 70%, #0A1830 100%);
  }
}

/* Lato: white wordmark, light weights that exist in Lato, paragraphs ~6% larger */
.hero-wordmark { color: #FFFFFF; font-weight: 300; }
.hero-wordmark.shimmer {
  background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 38%, #8FBCE6 50%, #FFFFFF 62%, #FFFFFF 100%);
  background-size: 280% 100%; background-position: 140% 0;
  -webkit-background-clip: text; background-clip: text;
}
.hero-wordmark-sub { font-weight: 300; }
p:not(.aside-label):not(.eyebrow), li { font-size-adjust: 0.536; }
/* Shimmer uses transparent fill; a text-shadow would show through and grey the letters.
   Use a drop-shadow filter instead so the wordmark stays pure white. */
.hero-wordmark.shimmer { text-shadow: none; filter: drop-shadow(0 1px 14px rgba(10, 24, 48, 0.5)); }
