/* Friends Seminary layout study — shared tokens and base typography measured from friendsseminary.org (computed styles, 2026-09-25).
   Fonts: EB Garamond 700 for display, Brandon Grotesque for UI (Figtree stands in). Palette used literally.
   Every section's own rules live in sections/<name>.css (hero-header, welcome, people, campus, teachers, stories, ticker-footer),
   loaded after this file in page order; this file keeps only what every section shares. */
:root {
  --red: #d6262d; --red-deep: #bf1d24; --red-bright: #eb2d35;
  --cream: #f0efe7; --cream-dark: #ebe9e1; --cream-light: #f4f3ec; --sand: #cec1b6; --stone: #a2968a; --stone-text: #95897d;
  --charcoal: #545454; --white: #fff; --peach: #ef9842;
  --font-display: "EB Garamond", Georgia, serif;
  --font-ui: "Figtree", "brandon-grotesque", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--charcoal); font-family: var(--font-ui); font-size: clamp(1.156rem, 0.18vw + 1.07rem, 1.25rem); line-height: 1.25; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.1; }
h2 { font-family: var(--font-display); color: var(--red-deep); font-size: clamp(2.25rem, 2.28vw + 1.15rem, 3.44rem); }
h3 { font-family: var(--font-ui); text-transform: uppercase; font-size: clamp(1.25rem, 0.36vw + 1.08rem, 1.44rem); }
p { margin: 0; }
.skip-link { position: absolute; left: 1rem; top: -100%; background: var(--red-deep); color: #fff; padding: 0.5rem 1rem; z-index: 200; }
.skip-link:focus { top: 1rem; }

/* ---------- Utilities (kept for the inner pages of the study; the home sections style their own eyebrows and titles) ---------- */
.eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone-text); }
.eyebrow--light { color: #fff; }
.display-xl { font-family: var(--font-display); font-weight: 700; color: var(--red); line-height: 0.77; letter-spacing: -0.0105em; font-size: clamp(4rem, 12.45vw, 11.2rem); text-align: center; margin-bottom: 75px; }

/* Buttons: uppercase, tracked, hairline border, peach/red glyph (the home sections use the live .dark-blue--button instead, defined per section) */
.btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.95em 1.6em; border: 1px solid rgba(84, 84, 84, 0.35); border-radius: 4px; font-family: var(--font-ui); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--charcoal); background: transparent; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.btn span { color: var(--red); transition: transform 0.3s var(--ease); }
.btn:hover { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.btn:hover span { transform: translateX(4px); }
.btn--light { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn--light span { color: var(--peach); }
.btn--light:hover { background: #fff; color: var(--red); border-color: #fff; }