/* ============================================================
   SIPI v10 — Base
   Extracted from docs/v2-source-of-truth/sipi_v10_mock.html (Task A2)
   Self-hosted fonts (FADP-compliant, no Google CDN), element resets,
   typography defaults.
   ============================================================ */

/* --- Self-hosted fonts (replaces removed Google Fonts <link>) --- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/CormorantGaramond-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/CormorantGaramond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/CormorantGaramond-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Element resets --- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--ff-body);font-size:17px;line-height:1.7;color:var(--text);background:var(--white);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* WCAG 2.4.7: visible focus indicator on all interactive elements.
   :focus-visible only triggers on keyboard nav (not mouse click) —
   gives keyboard users clear orientation without a permanent ring. */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
.flip-card:focus-visible,.tao-cell:focus-visible,.gc-card:focus-visible,
.carousel-dot:focus-visible,.nav-toggle:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;
}
img,svg{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
strong,b{font-weight:500}
/* a11y: --gold-text is a darker WCAG-AA variant for text-on-light
 * (#7E6418, ~4.7 contrast on white). The original --gold is restored
 * on dark surfaces by the override block below — gold-on-navy already
 * passes AA cleanly. See tokens.css for the rationale. */
em{font-style:italic;color:var(--gold-text)}

/* --- Typography defaults --- */
/* 2026-05-18 — Anjali General tab: "Increase eyebrow text font size by
 * 4px across all sections/pages where eyebrow labels are used."
 * Old value was 10.5px (Wave 1 baseline). New value 14.5px. Per-page
 * .lbl overrides further down the cascade are left untouched. */
.lbl{font-family:var(--ff-body);font-size:14.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);margin-bottom:14px}

/* a11y: restore the lighter brand --gold for `.lbl` and `<em>` when they
 * appear on dark surfaces. The base rules use --gold-text (~4.7 on white)
 * for WCAG AA on light backgrounds; on navy/dark, gold-on-navy already
 * scores ~9:1 contrast and the lighter shade matches the visual identity.
 * Selector list mirrors the dark surfaces enumerated in components.css:
 *   .ph (page header), .tao-overlay (TAO swipe-over reveal),
 *   .flip-back (flip-card back face), .fcta (final CTA section),
 *   .foot (footer), .dark utility, .modal-content, .sb-overlay (sidebar),
 *   .hero (page hero with navy/teal bg). */
.ph em, .ph .lbl,
.tao-overlay em, .tao-overlay .lbl,
.flip-back em, .flip-back .lbl,
.fcta em, .fcta .lbl,
.foot em, .foot .lbl,
.dark em, .dark .lbl,
.modal-content em, .modal-content .lbl,
.sb-overlay em, .sb-overlay .lbl,
.hero em, .hero .lbl,
.tc-overlay em, .tc-overlay .lbl{color:var(--gold)}
.rule{width:48px;height:1px;background:var(--gold);margin-bottom:24px}
.h1{font-family:var(--ff-display);font-size:clamp(38px,5vw,72px);font-weight:300;line-height:1.08;color:var(--white);letter-spacing:-.01em}
/* H2 weight bumped 2026-05-05 (theme 1.0.83) per Anjali — Cormorant
   Garamond at 300 (Light) was reading too refined for institutional
   weight; SemiBold (600) is the heaviest face we self-host so it's the
   strongest available step from the prior 300. To go heavier than this
   we'd need to add a Bold (700) @font-face declaration + woff2 file. */
.h2{font-family:var(--ff-display);font-size:clamp(28px,3.6vw,48px);font-weight:600;line-height:1.18;color:var(--heading);letter-spacing:-.005em}
.h3{font-family:var(--ff-display);font-size:clamp(22px,2.4vw,30px);font-weight:300;line-height:1.25;color:var(--heading)}
.lead-text{font-size:19px;line-height:1.7;color:var(--text);font-weight:300;max-width:680px}
.body-text{font-size:16.5px;line-height:1.75;color:var(--text);font-weight:300}
.small{font-size:13px;line-height:1.65;color:var(--muted);font-weight:300}

/* --- Skip link (a11y) --- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px 18px;background:var(--navy);color:#fff;font-size:13px;font-weight:500;letter-spacing:.04em;text-decoration:none}
.skip-link:focus{left:8px;top:8px;outline:2px solid var(--gold);outline-offset:2px}