/* ============================================================
   BASE — base.css
   Reset, typography, scroll behaviour, body defaults.
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 72px; }
section[id] { scroll-margin-top: 72px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ── Typography helpers ── */
.eyebrow {
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: .7rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ''; width: 1.4rem; height: 1px; background: var(--cyan); opacity: .7; }
.sec-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700; line-height: 1.1; margin-bottom: .8rem;
}
.sec-title em { font-style: italic; color: var(--blue2); }
.sec-sub { font-size: .95rem; color: var(--muted); max-width: 56ch; line-height: 1.85; }
.sec-head { margin-bottom: 3rem; }

/* ── Layout ── */
section  { padding: 5rem 1.5rem; position: relative; z-index: 1; }
@media (min-width: 768px) { section { padding: 7rem 2rem; } }
.sw { max-width: 1080px; margin: 0 auto; }

/* ── Section dividers for visual breathing room ── */
section + section { border-top: 1px solid rgba(255,255,255,.03); }

/* ── Utility ── */
.mt1 { margin-top: .5rem; } .mt2 { margin-top: 1rem; }
.mb1 { margin-bottom: .5rem; } .mb2 { margin-bottom: 1rem; }
.text-blue { color: var(--blue2); } .text-cyan { color: var(--cyan); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ── MOBILE FONT SIZE FIX — minimum readable sizes ── */
@media (max-width: 767px) {
  .eyebrow { font-size: 0.7rem; }
  .tag, .pill, .ic-tag, .pchip, .ini-tag, .ini-eyebrow,
  .tl-period, .tl-org, .flbl, .fb-copy, .fb-badge,
  .tb-badge, .cl-badge, .bc-tag, .bc-read { font-size: 0.7rem !important; }
  .pill { padding: .2rem .55rem !important; }
  .pillar-desc, .ini-desc, .ini-more, .tl-exp p,
  .edu-detail, .test-quote, .pd-val, .cta-p { font-size: 0.875rem !important; }
  .cl-name { font-size: 0.82rem !important; white-space: normal !important; }
}