/* ═══════════════════════════════════════════════════════════════════════
   BASE — reset, typography, and element defaults
   ═══════════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header */
  scroll-padding-top: calc(var(--header-h-compact) + var(--sp-4));
}

/* Guard: the page body must never scroll horizontally. Wide content
   (tables, schedules) scrolls inside its own .table-scroll container. */
html, body { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Headings ──────────────────────────────────────────────────────────
   Libre Baskerville, ALWAYS 700 — no mixed weights page to page.
   Headings never use gold on a light background. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--navy);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-4); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-sm); }

/* Optical alignment: serif caps sit slightly right of the box edge. */
h1, h2 { margin-left: -0.02em; }

/* Headings sitting on navy */
.on-navy h1, .on-navy h2, .on-navy h3,
.on-navy h4, .on-navy h5, .on-navy h6 { color: var(--white); }

p {
  margin: 0 0 var(--sp-3);
  max-width: 68ch;   /* Comfortable measure — ~68 chars is the sweet spot */
}
p:last-child { margin-bottom: 0; }

/* ── Links ─────────────────────────────────────────────────────────────
   Underlined by default in body copy so color is never the sole cue. */
a {
  color: var(--navy-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--navy); text-decoration-thickness: 2px; }

.on-navy a { color: var(--gold-lt); }
.on-navy a:hover { color: var(--white); }

/* Navigational links (nav, cards, buttons) opt out of the underline */
nav a, .btn, .card a, .no-underline { text-decoration: none; }
nav a:hover, .card a:hover { text-decoration: none; }

/* ── Lists ─────────────────────────────────────────────────────────────*/
ul, ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

ul.plain, ol.plain { list-style: none; padding-left: 0; }

/* ── Media ─────────────────────────────────────────────────────────────*/
img, video, svg, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Consistent aspect ratios — enforced sitewide per the design direction */
.ratio-16-9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ratio-4-3  { aspect-ratio: 4 / 3;  object-fit: cover; width: 100%; }
.ratio-1-1  { aspect-ratio: 1 / 1;  object-fit: cover; width: 100%; }

/* ── Tables ────────────────────────────────────────────────────────────*/
table { border-collapse: collapse; width: 100%; font-size: var(--fs-base); }
caption { text-align: left; font-weight: 600; padding-bottom: var(--sp-3); color: var(--ink-2); }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
th { font-weight: 700; color: var(--navy); background: var(--cream); }

/* Wide tables scroll inside their own container, never the page body.
   max-width:100% + min-width:0 are both required: without them the table's
   intrinsic width leaks out through the flex/grid parent and the PAGE
   scrolls sideways instead of the container. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}
/* Give the table a sensible floor so columns stay readable while scrolling */
.table-scroll > table { min-width: 34rem; }

/* ── Forms ─────────────────────────────────────────────────────────────*/
input, select, textarea, button {
  font-family: inherit;
  font-size: var(--fs-base);
  color: inherit;
}

label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--navy);
  margin-bottom: var(--sp-2);
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="date"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  /* --line-input, not --line: a form control's boundary is functional and
     must meet WCAG 1.4.11 (3:1). */
  border: 1.5px solid var(--line-input);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow  var(--dur-fast) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy-3);
  box-shadow: 0 0 0 3px rgba(30,58,110,.18);
}

button { cursor: pointer; background: none; border: none; padding: 0; }

/* ── Misc elements ─────────────────────────────────────────────────────*/
hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--sp-5) 0;
}

blockquote {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 4px solid var(--gold);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--navy);
}

address { font-style: normal; }

strong, b { font-weight: 700; color: var(--navy); }
.on-navy strong, .on-navy b { color: var(--white); }

small { font-size: var(--fs-sm); }

::selection { background: var(--gold); color: var(--navy); }