/* ==========================================================================
   Avenor Park — reset, fonts, typography, landmarks
   ========================================================================== */

/* ---- self-hosted fonts -------------------------------------------------
   Montserrat and Outfit are variable fonts: one file each covers every
   weight we use, so we declare a range rather than shipping 400/500/600
   as three identical files. Gued is the display face used for every h2
   on the live site; it is served from avenorpark.com's own uploads folder
   as a .ttf, converted here to a Latin-subset woff2.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gued";
  src: url("../assets/fonts/gued-bold.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---- typography -------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-ink);          /* AA-safe on light backgrounds */
  margin: 0 0 var(--s-1);
  position: relative;
  padding-left: 47px;              /* room for the gold rule, measured */
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--gold);
}
.eyebrow--lg { font-size: var(--fs-eyebrow-lg); }
.eyebrow--plain { padding-left: 0; }
.eyebrow--plain::before { content: none; }

/* On dark backgrounds the full-strength gold is 7.19:1 — use it there. */
.on-dark .eyebrow { color: var(--gold); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking);
  color: var(--teal);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking);
  color: var(--teal);
  margin-bottom: var(--s-3);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking);
  color: var(--black);
}
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark { color: var(--white); }

.lede { font-size: var(--fs-body); line-height: var(--lh-body); }
.center { text-align: center; }
.optional { font-weight: 400; color: var(--ink-muted); }
.on-dark .optional { color: inherit; opacity: 0.75; }

/* ---- layout primitives -------------------------------------------------- */
.section {
  padding: var(--section-pad-y) var(--section-pad-x);
  position: relative;
}
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}
.split {
  display: grid;
  grid-template-columns: 605fr 565fr;   /* measured column ratio at 1440 */
  gap: var(--col-gap);
  align-items: center;
}
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Below-the-fold sections used to skip layout/paint until near the viewport:

     content-visibility: auto;
     contain-intrinsic-size: auto 620px;

   Every deferred section claimed 620px while real heights run 220-1030px, so
   the document height was wrong until each one had been scrolled past. Measured
   on the homepage: 7 height changes in a single scroll-through, individual
   jumps up to 425px, and 11.8% total drift. The scrollbar jumped and content
   moved under the reader on every first visit.

   Per-section intrinsic sizes would keep the optimisation, but the correct
   value changes with viewport width, so it cannot be pinned in CSS without
   going stale. The images below the fold are already loading="lazy", which is
   where the real cost is; skipping layout on text boxes bought little and cost
   a visibly unstable page. Removed deliberately - do not reinstate without
   per-section sizes and a re-measure. */

/* .section--deferred is kept as a hook: js/main.js and css/blog.css both key
   off it, and it still marks "below the fold" for anything added later. */

/* ---- accessibility ------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: var(--s-2);
  top: calc(var(--s-2) * -10);
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-2); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .site-header :focus-visible {
  outline-color: var(--white);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Anchor targets sit under the fixed header without JS. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }