/* ==========================================================================
   Base — element resets, type baseline, focus, prose.
   Loaded AFTER tokens.css, BEFORE component css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  line-height: var(--lh-normal);
  color: var(--c-fg);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv02";
  text-rendering: optimizeLegibility;
}

/* Type defaults — display family on headings */
h1, h2, h3, h4, h5, h6, .display, .h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-fg);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); }
h5, .h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); }
h6, .h6 { font-size: var(--fs-h6); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); }

.display { font-size: var(--fs-display); }

p { margin: 0 0 var(--s-4); color: var(--c-fg); }
.lead { font-size: var(--fs-20); line-height: var(--lh-relaxed); color: var(--c-fg-soft); text-wrap: pretty; }
small, .small { font-size: var(--fs-14); }

/* Eyebrow — repeated entity-reinforcement label above headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 var(--s-4);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { display: none; }

/* Links */
a {
  color: var(--c-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(11, 42, 74, 0.25);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }

/* Focus — accessible, branded */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-2);
}

/* Lists in prose */
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--c-accent); }

/* Inline emphasis used in editorial copy */
em, .editorial {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
}

/* Selection */
::selection {
  background: var(--wfs-orange-500);
  color: var(--wfs-cream-50);
}

/* Container utility (Bootstrap also provides one, but ours respects tokens) */
.wfs-container {
  width: 100%;
  max-width: var(--container-base);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.wfs-container--narrow { max-width: var(--container-narrow); }
.wfs-container--wide   { max-width: var(--container-wide); }

/* Section primitive */
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tight { padding-block: var(--section-y-tight); }
.section--ink {
  background: var(--c-bg-ink);
  color: var(--c-fg-on-ink);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 {
  color: var(--c-fg-on-ink);
}
.section--ink p { color: var(--c-fg-on-ink-soft); }
.section--ink .eyebrow { color: var(--wfs-orange-300); }
.section--warm { background: var(--c-bg-warm); }
.section--warm-2 { background: var(--c-bg-warm-2); }
.section--soft { background: var(--c-bg-soft); }

/* Section header — reusable layout for h2 + lead */
.section-head {
  max-width: 760px;
  margin: 0 0 var(--s-9);
}
.section-head--center { text-align: center; margin-inline: auto; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-brand);
  color: var(--c-fg-on-ink);
  padding: 12px 16px;
  z-index: 9999;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Image defaults */
img, svg { max-width: 100%; height: auto; display: block; }

/* Placeholder image (no stock) — labelled */
.img-placeholder {
  position: relative;
  background: linear-gradient(135deg, var(--wfs-cream-100), var(--wfs-cream-200));
  border: 1px dashed var(--wfs-cream-300);
  border-radius: var(--r-3);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  color: var(--wfs-navy-700);
  isolation: isolate;
}
.img-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(at 80% 20%, rgba(224, 122, 44, 0.12), transparent 50%),
    radial-gradient(at 20% 80%, rgba(11, 42, 74, 0.10), transparent 60%);
  z-index: 0;
}
.img-placeholder__meta {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  padding: 10px 14px;
  background: rgba(255,255,255,0.7);
  border-top: 1px solid var(--wfs-cream-300);
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.img-placeholder__meta strong { font-weight: 600; color: var(--wfs-navy-700); }
.img-placeholder__meta span { color: var(--wfs-ink-500); }

/* Visually-hidden */
.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Bootstrap container override to align with our scale (Bootstrap Studio likes its container) */
.container { max-width: var(--container-base); }