@charset "UTF-8";
/* ============================================================
   base.css — shared across ALL pages (index + 6 subpages)
   Reset, brand colors/fonts, site header, gold rule divider.
   ============================================================ */

/* ── LOCAL FONTS (self-hosted, no connection to Google) ──── */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

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

:root {
  --blue:   #003e64;
  --blue2:  #005080;
  --orange: #ffb500;
  --dark:   #0e1a1e;
  --muted:  #607a80;
  --light:  #f7f6f3;
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Source Sans 3', system-ui, sans-serif;
}

body {
  font-family: var(--sans);
  background: #fff;
  color: var(--dark);
  line-height: 1.75;
}

/* ── SITE HEADER (identical on every page) ───────────────── */
header.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px 56px 26px;
  background: #fff;
}
.site-brand { font-family: var(--serif); font-size: 1.5rem; color: var(--blue); text-decoration: none; }
.site-sub { font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; color: var(--blue); text-align: right; line-height: 1.5; padding-top: 6px; }

/* ── GOLD RULE DIVIDER ────────────────────────────────────── */
.rule { padding: 0 56px; }
.rule hr { border: none; height: 3px; background: var(--orange); width: 66.666%; margin: 0 auto; }

/* ── BACK LINK (subpages) ────────────────────────────────── */
.back-link { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; }
.back-link:hover { color: var(--orange); }
.back-link::before { content: "←"; }

@media (max-width: 700px) {
  header.site-header { padding: 36px 24px 20px; flex-direction: column; gap: 6px; }
  .site-sub { text-align: left; padding-top: 0; }
  .rule { padding: 0 24px; }
}