/*
Theme Name: Esrala
Theme URI: https://esrala.com
Author: Esrala
Description: Marketing theme for Esrala — an AI tutor for homeschool families. Server-rendered, no page builder, no jQuery, one stylesheet.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: esrala
*/

/* One file, loaded once. No framework, no build step — the whole point is
   that a page ships as HTML and CSS and nothing blocks first paint. */

:root {
  --navy: #123a6d;
  --navy-dark: #0e2f58;
  --gold: #b8860f;
  --gold-soft: #fdf6e3;
  --teal: #0f766e;
  --teal-soft: #e7f5f3;
  --ink: #16202e;
  --muted: #5b6675;
  --line: #e2e6ec;
  --bg: #ffffff;
  --bg-soft: #f7f9fb;
  --radius: 14px;
  --radius-pill: 999px;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }

p { margin: 0 0 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; }
.brand img { height: 36px; width: auto; }
.site-nav { margin-left: auto; }
.nav-list {
  display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0;
}
.nav-list a {
  display: block; padding: .5rem .75rem; border-radius: 9px;
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem;
}
.nav-list a:hover { background: var(--bg-soft); color: var(--ink); }
.header-cta { display: flex; align-items: center; gap: .5rem; }
.link-quiet { color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .5rem; }
.link-quiet:hover { color: var(--ink); }

/* ── Mobile menu ────────────────────────────────────────────────────── */

.mobile-nav { display: none; position: relative; }
.mobile-nav > summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-left: .1rem;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
}
.mobile-nav > summary::-webkit-details-marker { display: none; }
.mobile-nav > summary:hover { background: var(--bg-soft); }
.mobile-nav > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Three bars drawn from one element: the middle is the box, the outer two are
   its pseudo-elements. Turns into an X when the disclosure is open. */
.mobile-nav-bars, .mobile-nav-bars::before, .mobile-nav-bars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .18s ease, opacity .18s ease;
}
.mobile-nav-bars { position: relative; }
.mobile-nav-bars::before, .mobile-nav-bars::after { content: ''; position: absolute; left: 0; }
.mobile-nav-bars::before { top: -6px; }
.mobile-nav-bars::after  { top: 6px; }
.mobile-nav[open] .mobile-nav-bars { background: transparent; }
.mobile-nav[open] .mobile-nav-bars::before { transform: translateY(6px) rotate(45deg); }
.mobile-nav[open] .mobile-nav-bars::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav-panel {
  position: absolute; right: 0; top: calc(100% + .55rem); z-index: 60;
  min-width: 15rem; padding: .5rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px -16px rgba(16,32,56,.28);
}
.mobile-nav-panel .nav-list { flex-direction: column; gap: 0; }
.mobile-nav-panel .nav-list a { padding: .65rem .75rem; font-size: 1rem; }
.mobile-nav-signin {
  display: block; margin-top: .35rem; padding: .65rem .75rem;
  border-top: 1px solid var(--line); border-radius: 0 0 9px 9px;
  color: var(--muted); text-decoration: none; font-weight: 500;
}
.mobile-nav-signin:hover { background: var(--bg-soft); color: var(--ink); }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .mobile-nav { display: block; }
  /* Without the nav to push it, the CTA needs its own shove to the right. */
  .header-cta { margin-left: auto; }
  /* "Sign in" moves into the menu so the logo and the CTA both fit on a
     narrow phone without wrapping the header onto two lines. */
  .header-cta .link-quiet { display: none; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */

/* --radius is the card/panel radius; buttons are pills. Kept as its own token
 * so it cannot drift from theme.json, which sets the same value for buttons
 * added in the block editor — the two disagreeing is what put a 14px header
 * button on the same page as a 999px hero button.
 */
.btn {
  display: inline-block; padding: .85rem 1.5rem; border-radius: var(--radius-pill);
  font-weight: 600; text-decoration: none; border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: .5rem 1rem; font-size: .95rem; }

/* The variant classes have to serve two different markups.
 *
 * header.php writes plain anchors: <a class="btn btn-primary">. The block
 * editor writes <div class="wp-block-button btn-primary"><a class="…__link">,
 * because a custom class on a button block lands on the WRAPPER — and the
 * wrapper is not what WordPress paints. Colouring it gives you a square
 * coloured rectangle sitting behind the default dark pill, which is exactly
 * what the hero looked like. So each variant is written twice: once for the
 * bare anchor, once pushed down to the link inside the block wrapper.
 */
.wp-block-button { background: none; border: 0; padding: 0; }
.wp-block-button > .wp-block-button__link { transition: transform .12s ease, background .12s ease; }
.wp-block-button > .wp-block-button__link:hover { transform: translateY(-1px); }

.btn-primary:not(.wp-block-button),
.wp-block-button.btn-primary > .wp-block-button__link {
  background: var(--navy); color: #fff; border: 1px solid transparent;
}
.btn-primary:not(.wp-block-button):hover,
.wp-block-button.btn-primary > .wp-block-button__link:hover { background: var(--navy-dark); }

.btn-ghost:not(.wp-block-button),
.wp-block-button.btn-ghost > .wp-block-button__link {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
}
.btn-ghost:not(.wp-block-button):hover,
.wp-block-button.btn-ghost > .wp-block-button__link:hover { background: var(--bg-soft); }

.btn-gold:not(.wp-block-button),
.wp-block-button.btn-gold > .wp-block-button__link {
  background: var(--gold); color: #1d1a10; border: 1px solid transparent;
}
.btn-gold:not(.wp-block-button):hover,
.wp-block-button.btn-gold > .wp-block-button__link:hover { background: #a2760d; }

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; background:
  radial-gradient(ellipse 50% 60% at 78% 6%, rgba(18,58,109,.10), transparent 62%),
  radial-gradient(ellipse 45% 55% at 8% 94%, rgba(184,134,15,.12), transparent 58%); }
/* The block editor renders the hero as a plain group, so there is no
   .hero-inner to carry the vertical rhythm — the class has to sit on .hero
   itself. Both are listed so hand-written templates keep working. */
.hero, .hero-inner { padding-block: clamp(3rem, 6vw, 5.5rem); }
.hero-inner { text-align: center; }
.eyebrow {
  display: inline-block; margin: 0 0 1rem;
  background: var(--gold-soft); color: var(--gold);
  border: 1px solid rgba(184,134,15,.35); border-radius: 999px;
  padding: .3rem .85rem; font-size: .8rem; font-weight: 700;
}
/* text-align on an inline-block centres its TEXT, not the pill itself, so the
   editor's "align center" left the eyebrow stranded at the left margin while
   everything below it was centred. Centre the box, not the label. */
.eyebrow.has-text-align-center { display: block; width: fit-content; margin-inline: auto; }
.hero h1 { max-width: 20ch; margin-inline: auto; }
.hero h1 em { font-style: normal; color: var(--navy); }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 62ch; margin-inline: auto; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }
.hero-shot { margin: 3rem auto 0; max-width: 1000px; }
.hero-shot img { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(16,32,56,.35); }
.hero-shot figcaption, .shot figcaption {
  margin-top: .6rem; font-size: .82rem; color: var(--muted); text-align: center;
}

/* ── Bands ──────────────────────────────────────────────────────────── */

.band { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.band-muted { background: var(--bg-soft); border-block: 1px solid var(--line); }
.band-navy { background: var(--navy); color: #fff; text-align: center; }
.band-navy h2 { color: #fff; }
.band-navy .lede { color: rgba(255,255,255,.8); }
.band-head { max-width: 62ch; margin: 0 auto 2.25rem; text-align: center; }

/* ── Cards ──────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 1.25rem; }
.cards.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards.cols-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem;
}
.card h3 { margin-bottom: .4rem; }
.card-body p:last-child { margin-bottom: 0; }
.card-body { color: var(--muted); font-size: .96rem; }
.card-num { display: block; font-size: 1.9rem; font-weight: 700; color: rgba(184,134,15,.55); line-height: 1; margin-bottom: .35rem; }

.shot { margin: 1.5rem 0 0; }
.shot img { border: 1px solid var(--line); border-radius: var(--radius); }

/* ── Notes ──────────────────────────────────────────────────────────── */

.note { border-radius: var(--radius); padding: 1.15rem 1.35rem; margin: 1.5rem 0; }
.note-gold { background: var(--gold-soft); border: 1px solid rgba(184,134,15,.4); }
.note-teal { background: var(--teal-soft); border: 1px solid rgba(15,118,110,.3); }
.note p:last-child { margin-bottom: 0; }
.note-title { font-weight: 700; margin-bottom: .25rem; }

/* ── Pricing ────────────────────────────────────────────────────────── */

.plans { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.plan {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 20px; padding: 1.9rem; display: flex; flex-direction: column;
}
.plan-featured { border-color: var(--navy); box-shadow: 0 0 0 1px rgba(18,58,109,.2), 0 18px 40px -24px rgba(16,32,56,.4); }
.plan-flag {
  position: absolute; top: -.75rem; left: 1.9rem;
  background: var(--gold); color: #1d1a10; border-radius: 999px;
  padding: .25rem .75rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.plan h3 { font-size: 1.4rem; }
.plan-tagline { color: var(--muted); font-size: .95rem; }
.plan-price { font-size: 3rem; font-weight: 700; margin: 1rem 0 0; line-height: 1; }
.plan-price .cur { font-size: 1.4rem; color: var(--muted); vertical-align: super; }
.plan-price .per { font-size: 1rem; font-weight: 400; color: var(--muted); }
.plan-unit { color: var(--muted); font-size: .9rem; font-weight: 500; margin-top: .25rem; }
.plan .btn { margin: 1.25rem 0 0; text-align: center; }
.plan-features { list-style: none; margin: 1.75rem 0 0; padding: 1.75rem 0 0; border-top: 1px solid var(--line); }
.plan-features li { display: flex; gap: .65rem; font-size: .94rem; margin-bottom: .6rem; }
.plan-features .yes span { color: var(--teal); font-weight: 700; }
.plan-features .no { color: #9aa4b1; }

/* ── FAQ ────────────────────────────────────────────────────────────── */

.faq { max-width: 46rem; margin-inline: auto; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-bottom: .75rem;
}
.faq-item summary { font-weight: 600; cursor: pointer; }
.faq-item[open] summary { margin-bottom: .5rem; }
.faq-item p { color: var(--muted); font-size: .96rem; }
.faq-item p:last-child { margin-bottom: 0; }

/* ── Pages ──────────────────────────────────────────────────────────── */

.page-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding-block: 3rem; text-align: center; }
.page-body { padding-block: 2.5rem; }
.page-body > .wrap, .prose { max-width: 46rem; margin-inline: auto; }
/* Content that is not a block group brings no gutter of its own — a shortcode
   that emits a bare <p> and <form>, like the contact page, ran flush to both
   edges of a phone. Editor-built groups already carry has-global-padding, so
   they are excluded rather than padded twice. */
.page-body > *:not(.has-global-padding):not(.alignfull):not(.wrap) {
  max-width: calc(46rem + 40px);
  margin-inline: auto;
  padding-inline: 20px;
}

.legal { padding-block: 3rem; }
.legal .wrap { max-width: 46rem; }
.legal-org { color: var(--muted); font-weight: 500; margin: 0; }
.legal-updated { color: var(--muted); font-size: .9rem; }
.prose h2 { font-size: 1.25rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.prose h3 { margin-top: 1.5rem; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .5rem; color: var(--muted); }
.prose p { color: var(--muted); }
.prose strong { color: var(--ink); }

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); margin-top: 0; }
.footer-grid {
  display: grid; gap: 2.5rem; padding-block: 3rem;
  grid-template-columns: 2fr 1fr 1fr;
}
.footer-brand img { height: 34px; width: auto; }
.footer-brand p { color: var(--muted); font-size: .93rem; max-width: 34ch; margin-top: 1rem; }
.footer-addr { font-size: .82rem; }
.footer-head { font-weight: 700; font-size: .95rem; margin-bottom: .65rem; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .45rem; }
.footer-list a { color: var(--muted); text-decoration: none; font-size: .93rem; }
.footer-list a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between;
  border-top: 1px solid var(--line); padding-block: 1.25rem;
  font-size: .82rem; color: var(--muted);
}
.footer-bottom a { color: var(--muted); text-decoration: none; }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Respect the setting rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .btn:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Blog
   Built for a pSEO archive: hundreds of articles on one template, so the
   card has to hold up whether the excerpt is 12 words or 40 and whether or
   not anyone remembered a featured image.
   ───────────────────────────────────────────────────────────────────────── */

.wrap-narrow { max-width: 720px; }

.blog-hero {
  background:
    radial-gradient(ellipse 60% 70% at 82% 12%, rgba(18,58,109,.10), transparent 62%),
    radial-gradient(ellipse 55% 60% at 12% 88%, rgba(184,134,15,.10), transparent 58%);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}
.blog-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.4rem, 1rem + 5.4vw, 4.6rem);
  letter-spacing: -0.035em;
  line-height: .98;
  margin-bottom: .6rem;
}
.blog-hero .lede { margin-inline: 0; max-width: 52ch; }
.blog-hero-sm { padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2rem); }
.blog-hero-sm h1 { font-size: clamp(2rem, 1rem + 3.4vw, 3.2rem); max-width: 22ch; }

/* ── Featured post ── */

.featured-post { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.featured-link {
  display: grid; gap: 1.75rem; align-items: center;
  text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.featured-link:hover {
  border-color: rgba(18,58,109,.35);
  box-shadow: 0 18px 44px -22px rgba(16,32,56,.35);
  transform: translateY(-2px);
}
.featured-media img { border-radius: 14px; width: 100%; }
.featured-body h2 { margin-bottom: .5rem; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); }
.featured-excerpt { display: block; color: var(--muted); margin-bottom: .9rem; }

@media (min-width: 900px) {
  .featured-link:has(.featured-media) { grid-template-columns: 1.05fr 1fr; }
}

/* ── Section head + pills ── */

.section-head { margin-bottom: 1.5rem; }
.section-head h2 { margin-bottom: 0; letter-spacing: -0.03em; }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.pill {
  display: inline-block; padding: .4rem .95rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--muted); text-decoration: none;
  font-size: .9rem; font-weight: 500;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pill:hover { color: var(--ink); border-color: rgba(18,58,109,.3); }
.pill.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.tag-row { margin-top: 2.5rem; }

/* ── Card grid ── */

.blog-list { padding-bottom: clamp(3rem, 6vw, 5rem); }
.post-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }

.post-card { display: flex; }
.post-card-link {
  display: flex; flex-direction: column; width: 100%;
  text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; background: var(--bg);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.post-card-link:hover {
  border-color: rgba(18,58,109,.35);
  box-shadow: 0 16px 40px -22px rgba(16,32,56,.35);
  transform: translateY(-2px);
}
.post-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}
.post-card-title { font-size: 1.2rem; margin-bottom: .5rem; letter-spacing: -0.015em; }
.post-card-excerpt { display: block; color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }
/* Pushes meta + CTA to the bottom so cards of different lengths line up. */
.post-card-excerpt + .post-meta { margin-top: auto; }

.post-meta { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; color: var(--muted); font-size: .85rem; }
.post-meta .dot { opacity: .6; }

.post-card-cta {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .85rem; font-weight: 600; font-size: .92rem; color: var(--navy);
}
.post-card-link:hover .post-card-cta span[aria-hidden] { transform: translateX(3px); }
.post-card-cta span[aria-hidden] { transition: transform .15s ease; }

.empty-note { color: var(--muted); padding-block: 3rem; text-align: center; }

/* ── Single article ── */

.single-head { padding-block: clamp(2.25rem, 4vw, 3.5rem) 1.5rem; }
.single-head h1 { max-width: 20ch; font-size: clamp(2rem, 1.1rem + 3.2vw, 3.1rem); letter-spacing: -0.03em; }
.lede-left { margin-inline: 0; text-align: left; max-width: 60ch; }
.back-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 500;
  margin-bottom: 1.5rem;
}
.back-link:hover { color: var(--ink); }
.single-head .eyebrow a { color: inherit; text-decoration: none; }
.single-media { margin: 0 0 2.5rem; }
.single-media img { border-radius: 18px; border: 1px solid var(--line); }

/* Long-form body. ~68ch is where the eye still finds the next line. */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5rem; font-size: 1.6rem; }
.prose h3 { margin-top: 2rem; font-size: 1.2rem; }
.prose p, .prose li { font-size: 1.06rem; line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.35rem; margin-bottom: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose img, .prose figure img { border-radius: 12px; }
.prose figure { margin: 2rem 0; }
.prose figcaption { color: var(--muted); font-size: .88rem; margin-top: .6rem; }
.prose blockquote {
  margin: 2rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--gold); color: var(--ink);
  font-size: 1.1rem;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px;
  padding: .12em .38em; font-size: .9em;
}
.prose pre {
  background: var(--ink); color: #e8edf4; border-radius: 12px;
  padding: 1.1rem 1.25rem; overflow-x: auto; font-size: .92rem;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; }
.prose th { background: var(--bg-soft); font-weight: 600; }
/* Wide content scrolls inside itself; the page body never scrolls sideways. */
.prose .wp-block-table { overflow-x: auto; }

.article-cta {
  border-radius: 20px; padding: clamp(2rem, 4vw, 3rem);
  margin-block: clamp(3rem, 5vw, 4rem);
}
.article-cta h2 { max-width: 30ch; margin-inline: auto; }

/* ── Pagination ── */

.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 .8rem;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted); text-decoration: none; font-size: .93rem; font-weight: 500;
}
.page-numbers:hover { color: var(--ink); border-color: rgba(18,58,109,.3); }
.page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }

/* The hero eyebrow is a gold pill. Inside a card it must not be: a flex item
   stretches to the container width by default, so the pill became a full-width
   bar across every card. In blog contexts it becomes what it should have been
   there all along — a small uppercase label. */
.blog-hero .eyebrow,
.post-card .eyebrow,
.featured-body .eyebrow,
.single-head .eyebrow,
.section-head .eyebrow {
  /* The base rule is inline-block for the hero badge. Left as-is here it sits
     on the same line as the back-link above it. */
  display: block;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: .55rem;
  color: var(--gold);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.blog-hero .eyebrow { margin-bottom: .9rem; }