/* =============================================================================
   02-base.css  ·  fonts, reset, base typography, primitives
   ========================================================================== */

/* ---------- Self-hosted variable fonts (no CDN) ---------- */
@font-face{
  font-family:"Playfair Display";
  src:url("../assets/fonts/playfair-display-var.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* Playfair Display ships OLD-STYLE figures by default, so "August 7, 2026" and
   "December 10–13, 2026" would set with descending 3/4/7/9 and x-height 0/1/2 —
   inconsistent next to the lining figures Montserrat renders in the hero "2026"
   and the countdown. Forced to lining here; it is a no-op for the two sans faces. */
:root{ font-variant-numeric:lining-nums; }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 1rem);
  -webkit-tap-highlight-color:transparent;
}
body{
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--bg);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  min-height:100vh;
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul[role="list"]{ list-style:none; padding:0; }
:where(h1,h2,h3,h4){ font-family:var(--font-display); font-weight:600; line-height:var(--lh-snug); letter-spacing:var(--ls-tight); text-wrap:balance; }
p{ text-wrap:pretty; }

/* ---------- Layout primitives ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:var(--maxw-wide); }
.container--narrow{ max-width:var(--maxw-narrow); }
.section{ position:relative; padding-block:var(--section-y); }

/* ---------- Eyebrow / section head ---------- */
.eyebrow{
  font-family:var(--font-head); font-weight:700;
  font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--gold-ink);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:2.2em; height:2px; background:var(--gold); display:inline-block; border-radius:2px; }
.on-dark .eyebrow{ color:var(--gold-200); }
.section-head{ max-width:62ch; }
.section-head .title{ font-size:var(--fs-h2); margin-top:var(--sp-3); }
.section-head .lead{ font-size:var(--fs-lead); color:var(--muted); margin-top:var(--sp-4); max-width:var(--reading); }
.on-dark .section-head .lead{ color:var(--on-navy-2); }

/* ---------- Accessibility primitives ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:.5rem; left:.5rem; z-index:var(--z-modal);
  background:var(--navy); color:var(--on-navy); padding:.7rem 1.1rem;
  border-radius:var(--r-sm); transform:translateY(-160%); transition:transform var(--dur) var(--ease);
  font-family:var(--font-head); font-weight:700; font-size:.85rem;
}
.skip-link:focus{ transform:translateY(0); outline:2px solid var(--gold); }

:focus-visible{ outline:3px solid var(--periwinkle); outline-offset:2px; border-radius:3px; }
.on-dark :focus-visible{ outline-color:var(--gold-200); }

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

/* ---------- Signature grain overlay (very subtle, code-only) ---------- */
.grain::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Utilities ---------- */
.text-gold{ color:var(--gold-ink); }
.on-dark .text-gold{ color:var(--gold-200); }
.nowrap{ white-space:nowrap; }
[hidden]{ display:none !important; }

/* ---------- Motion safety (global) ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}