/* ── main.css ───────────────────────────────────────────────────
   Variables, reset, base typography, and utility classes.
   Everything else is split into its own file.
──────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --navy:   #0d2044;
  --blue:   #1a4282;
  --accent: #c8102e;
  --gold:   #e8a020;
  --white:  #ffffff;
  --off:    #f5f4f0;
  --gray:   #6b7280;
  --light:  #e8edf5;
  --text:   #1a1a2e;
  --radius: 4px;
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'DM Sans', system-ui, sans-serif;
  --shadow: 0 4px 24px rgba(13,32,68,.12);
  --transition: .22s cubic-bezier(.4,0,.2,1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.2;
  color: var(--navy);
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; font-family: var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }

p { max-width: 68ch; }
p + p { margin-top: 1rem; }

/* ── Utility ────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-center p { margin-left: auto; margin-right: auto; }

.flex { display: flex; align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.divider {
  border: none;
  border-top: 1px solid var(--light);
  margin: 2.5rem 0;
}

.tag {
  display: inline-block;
  background: var(--light);
  color: var(--blue);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 2px;
}
.tag-red { background: #fce8eb; color: var(--accent); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}