/* ============================================
   Base — Reset, Typography, Utilities
   ============================================ */

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

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

body {
  font-family: var(--font-body);
  /* Live sets 18px body copy, stepping to 16px on mobile (--text-body handles
     both); --text-base stays 16px so buttons/labels keep their live sizing. */
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand-deep);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--brand);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

ul, ol {
  list-style: none;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  /* Live sets Montserrat 600 for headings, not 700 — measured on 12 of 13 pages
     at the 50px display size and on most card titles. At 700 our glyphs run
     wider, which is why the Contact "Follow. Share. Like. Comment." heading
     wrapped where live fits it on one line. */
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p + p {
  margin-top: var(--space-md);
}

strong {
  font-weight: 600;
}

/* --- Utilities --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container--narrow { max-width: var(--max-width-narrow); }
/* Centred intro/story blocks: live scales these with the viewport rather than
   capping them (64% above 980, widening to ~68/80% on tablet and phone, where
   our normal container padding already lands in the same place). */
.container--intro { max-width: var(--max-width-intro); }
@media (max-width: 980px) { .container--intro { max-width: 100%; } }
.container--wide { max-width: var(--max-width-wide); }

.text-center { text-align: center; }

/* Eyebrow — red brush-script label (Skippy Sharp), the signature FVSP accent */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand);
  margin-bottom: var(--space-sm);
  line-height: 1;
}
.script-accent { font-family: var(--font-display); font-weight: 400; text-transform: none; letter-spacing: normal; }

/* Red keyword emphasis inside headings (e.g. "coming <span>back</span>.") */
.section__header h2 span,
.hero__title span,
.kw { color: var(--brand); }

/* On red/dark bands the eyebrow + keyword flip to light */
.section--red .eyebrow { color: rgba(255,255,255,0.9); }
.section--red h2 span,
.section--red .kw { color: var(--white); }

.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: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  background: var(--brand);
  color: var(--text-on-brand);
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
  left: 0;
}

.section {
  padding: var(--space-4xl) 0;
}

.section--alt {
  background-color: var(--cream);
}

.section--dark {
  background-color: var(--ink);
  color: var(--text-on-dark);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--white);
}

.section__header {
  text-align: center;
  /* 700px was too tight once the heading went to live's 50px — it forced
     headings to wrap a line early. Live's equivalent header rows run 984px. */
  max-width: 984px;
  margin: 0 auto var(--space-3xl);
}

.section__header h2 { font-size: var(--text-display); line-height: 1; }

.section__header p {
  margin-top: var(--space-md);
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

/* Simple media placeholder box (until real imagery lands) */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  background: repeating-linear-gradient(
    45deg,
    var(--sand),
    var(--sand) 12px,
    var(--cream) 12px,
    var(--cream) 24px
  );
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-light);
  font-size: var(--text-sm);
  font-style: italic;
}

/* --- Responsive --- */


@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  .section { padding: var(--space-3xl) 0; }
  .container { padding: 0 var(--space-md); }
}

/* Kept last: the 768px block above also matches phones and would otherwise
   re-add the 16px container padding this column replaces. */
@media (max-width: 767px) {
  /* Live's mobile body copy is 18px/27px at weight 500; ours was 400, which read
     lighter and therefore smaller (Joanne rev.3, the "font size" items). */
  body { font-weight: var(--weight-body-mobile); }
  .container { max-width: var(--mobile-content); padding: 0; }

  /* The 768px block above shrinks headings to 32/24/20px, which predates the
     live measurements. Live's phone sizes are 38px for headings and 25px for
     subheads — the same as .section__header already used, so headings OUTSIDE a
     section header (the red story bands, feature-card titles) were rendering a
     size and a half too small. */
  h1, h2 { font-size: var(--text-display); line-height: 1; }
  h3 { font-size: var(--text-card-title); line-height: 1.4; }
}