/* ============================================================================
   Waterford College — site.css
   ----------------------------------------------------------------------------
   Shared page-level styles for every page on the site. Load order per page:
     colors_and_type.css  (tokens)
     chrome.css           (header / hero / footer / buttons)
     site.css             (this file: sections, prose, cards, bands)
     an optional inline <style> for anything genuinely page-specific
   Everything here is driven by var(--wc-*) tokens. Never introduce a new hex.
   ========================================================================== */

:root {
  --content-w: 1180px;
  --prose-w: 68ch;
  /* Vertical rhythm: one scale used by every band so pages stack predictably. */
  --band-y: 104px;
  --band-y-tight: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--wc-white);
  color: var(--wc-petrol);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   BANDS — every content section is a band. Alternate .band--tint for rhythm.
   ========================================================================== */
.band { padding: var(--band-y) 0; }
.band--tight { padding: var(--band-y-tight) 0; }
.band--tint { background: var(--wc-off-white); }
.band--petrol { background: var(--wc-petrol); color: var(--fg-on-dark); }
.band--petrol h2, .band--petrol h3 { color: var(--wc-white); }
.band--petrol p { color: var(--fg-on-dark-muted); }
.band + .band--tint, .band--tint + .band { border-top: 1px solid var(--line-soft); }

.container { max-width: var(--content-w); margin: 0 auto; padding: 0 48px; }
.container--narrow { max-width: 900px; }

/* ============================================================================
   SECTION HEADS — eyebrow, serif title with one italic accent word, lede.
   This rhythm is the site's signature; keep it consistent across pages.
   ========================================================================== */
.eyebrow-line {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wc-green);
  margin: 0 0 18px;
}
.band--petrol .eyebrow-line { color: var(--wc-lime); }

.section-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 20px;
  max-width: 22ch;
  text-wrap: balance;
}
.section-title em { font-style: italic; color: var(--wc-green); }
.band--petrol .section-title em { color: var(--wc-lime); }

.lede {
  font-size: 18px;
  color: var(--fg-2);
  max-width: var(--prose-w);
  margin: 0;
}
.band--petrol .lede { color: var(--fg-on-dark-muted); }

/* body prose inside a band */
.prose p { font-size: 16.5px; color: var(--fg-2); max-width: var(--prose-w); margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--wc-green-dark); }
.band--petrol .prose p { color: var(--fg-on-dark-muted); }
.band--petrol .prose a { color: var(--wc-lime); }

/* ============================================================================
   BUTTONS on light fields (chrome.css owns the ones on petrol)
   ========================================================================== */
.btn-solid {
  background: var(--wc-petrol); border-color: var(--wc-petrol); color: var(--wc-white);
  font-size: 12.5px;
}
.btn-solid:hover { background: var(--wc-green); border-color: var(--wc-green); color: var(--wc-petrol); }
.btn-outline {
  background: transparent; border-color: rgba(1,55,84,.28); color: var(--wc-petrol);
  font-size: 12.5px;
}
.btn-outline:hover { border-color: var(--wc-petrol); background: var(--wc-petrol); color: var(--wc-white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.wc-btn svg { width: 15px; height: 15px; flex: none; }

/* ============================================================================
   CARD GRIDS
   ========================================================================== */
.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--wc-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 34px 30px 30px;
  box-shadow: var(--sh-card);
  display: flex; flex-direction: column;
}
.card h3 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 1.5rem; margin: 0 0 12px; color: var(--wc-petrol);
}
.card p { font-size: 15.5px; color: var(--fg-2); margin: 0; max-width: none; }
.card__link { margin-top: auto; padding-top: 22px; }

/* a card that leads with a photo */
.card--photo { padding: 0; overflow: hidden; }
.card--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.card--photo .card__body { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.card--photo .card__meta {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wc-green); margin: 0 0 10px;
}

/* ============================================================================
   REASON LIST — the "why this school" blocks. A rule, a heading, a paragraph.
   ========================================================================== */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 56px; margin-top: 56px; }
.reason { border-top: 2px solid var(--wc-green); padding-top: 22px; }
.reason h3 {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.45rem;
  margin: 0 0 10px; color: var(--wc-petrol);
}
.reason p { font-size: 15.5px; color: var(--fg-2); margin: 0; max-width: 46ch; }
.band--petrol .reason { border-top-color: var(--wc-lime); }
.band--petrol .reason h3 { color: var(--wc-white); }

/* ============================================================================
   FACT STRIP — small pill facts (grades open, curriculum, and so on)
   ========================================================================== */
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.facts span {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wc-petrol); background: var(--wc-white);
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  padding: 9px 18px;
}
.band--tint .facts span { background: var(--wc-white); }
.band--petrol .facts span {
  background: transparent; color: var(--wc-white); border-color: var(--line-on-dark);
}

/* ============================================================================
   SPLIT — text one side, photo the other
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--flip .split__media { order: -1; }
.split__media img { width: 100%; border-radius: var(--r-lg); display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* ============================================================================
   CTA BAND — the closing call on every page
   ========================================================================== */
.cta { background: var(--wc-green); color: var(--wc-petrol); position: relative; overflow: hidden; }
.cta__glow {
    position: absolute; right: -140px; top: 50%; transform: translateY(-50%);
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 62%);
    pointer-events: none;
  }
.cta .container { position: relative; z-index: 1; padding-top: 84px; padding-bottom: 88px; }
.cta h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.1;
  color: var(--wc-petrol); margin: 0 0 16px; max-width: 20ch;
}
/* On the green field the accent is italic ALONE. White on brand green is only
   2.62:1 and lime is worse, so the two-tone treatment drops its colour shift
   here rather than its legibility. Petrol on green is 5.5:1. */
.cta h2 em { font-style: italic; color: var(--wc-petrol); }
.cta p { color: var(--wc-petrol); font-size: 17px; max-width: 56ch; margin: 0; }
/* Buttons on green: solid petrol leads, outlined petrol follows. */
.cta .wc-btn--green { background: var(--wc-petrol); border-color: var(--wc-petrol); color: var(--wc-white); }
.cta .wc-btn--green:hover { background: var(--wc-white); border-color: var(--wc-white); color: var(--wc-petrol); filter: none; }
.cta .wc-btn--ghost { color: var(--wc-petrol); border-color: rgba(1,55,84,.34); }
.cta .wc-btn--ghost:hover { background: rgba(1,55,84,.08); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--flip .split__media { order: 0; }
}
@media (max-width: 900px) {
  :root { --band-y: 68px; --band-y-tight: 52px; }
  .container { padding: 0 24px; }
  .reasons { grid-template-columns: 1fr; gap: 34px; margin-top: 38px; }
  .cta .container { padding-top: 60px; padding-bottom: 64px; }
}
@media (max-width: 700px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* The Waterford lockup is wide; shrink it before it can overflow. */
@media (max-width: 560px) {
  .wc-header { padding: 12px 16px; gap: 12px; }
  .wc-header__brand img { height: 28px; }
}

/* ============================================================================
   NEWS — the listing and the article layout
   ========================================================================== */
.news-list { display: grid; gap: 26px; grid-template-columns: repeat(2, 1fr); margin-top: 52px; }
@media (max-width: 800px) { .news-list { grid-template-columns: 1fr; } }

.news-card { display: flex; flex-direction: column; }
.news-card time {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wc-green); display: block; margin-bottom: 10px;
}
.news-card h3 {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.55rem;
  margin: 0 0 12px; color: var(--wc-petrol);
}
.news-card p { font-size: 15.5px; color: var(--fg-2); margin: 0; max-width: none; }

/* Article body. Measure is deliberately narrow: this is long-form reading. */
.article { max-width: 68ch; }
.article time {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wc-green); display: block; margin-bottom: 18px;
}
.article p { font-size: 17.5px; line-height: 1.66; color: var(--fg-2); margin: 0 0 22px; max-width: none; }
.article p:first-of-type { font-size: 19px; color: var(--wc-petrol); }
.article h2 {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem;
  color: var(--wc-petrol); margin: 44px 0 16px;
}
.article a { color: var(--wc-green-dark); }
.article-nav { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-soft); }

/* ============================================================================
   DESIGN PASS — softness, colour and shape
   ----------------------------------------------------------------------------
   The first build was correct and plain. This layer adds the things that make
   it feel like the brand: an arched "badge" silhouette borrowed from the shield
   in the logo, green as a real background rather than only an accent, and
   photography given room to carry a page.
   ========================================================================== */

/* ---------------------------------------------------------------- green band */
/* Brand green is only 2.62:1 on white, so it can never carry small text as a
   foreground. As a BACKGROUND behind white text it is strong and safe, and it
   is the warmest surface in the palette. Use it for a page's one big moment. */
.band--green { background: var(--wc-green); color: var(--wc-petrol); }
.band--green .eyebrow-line { color: var(--wc-petrol); opacity: .75; }
.band--green .section-title { color: var(--wc-petrol); }
.band--green .section-title em { color: var(--wc-white); font-style: italic; }
.band--green .lede, .band--green .prose p { color: rgba(1,55,84,.86); }
.band--green .reason { border-top-color: rgba(1,55,84,.35); }
.band--green .reason h3 { color: var(--wc-petrol); }
.band--green .reason p { color: rgba(1,55,84,.82); }
.band--green .facts span {
  background: rgba(255,255,255,.55); border-color: rgba(1,55,84,.18); color: var(--wc-petrol);
}
.band--green .wc-btn.btn-solid { background: var(--wc-petrol); border-color: var(--wc-petrol); color: #fff; }
.band--green .wc-btn.btn-solid:hover { background: var(--wc-white); border-color: var(--wc-white); color: var(--wc-petrol); }

/* Pale green wash, for a softer alternative to the cool grey tint. */
.band--mint { background: #EAF7F2; }

/* ------------------------------------------------------------- the arch shape */
/* The logo is a shield. An arch is that silhouette softened: flat foot, round
   shoulders. It is the site's one ownable image shape, and it is what makes a
   photo grid stop looking like a stock template. */
.arch {
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 32% 32% var(--r-lg) var(--r-lg);
  overflow: hidden;
}
.arch img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A portrait arch, for the "one child, doing one thing" shots. */
.arch--portrait { aspect-ratio: 3 / 4; }
.arch--tall { aspect-ratio: 2 / 3; }

/* Arch cards: an arched photo with a caption beneath, the pattern replacing
   plain text columns wherever a page was reading as a wall of words. */
.arch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 52px; }
.arch-row--3 { grid-template-columns: repeat(3, 1fr); }
.arch-card__label {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem;
  color: var(--wc-petrol); margin: 20px 0 6px;
}
.arch-card p { font-size: 15px; color: var(--fg-2); margin: 0; max-width: none; }
.band--petrol .arch-card__label { color: var(--wc-white); }
.band--petrol .arch-card p { color: var(--fg-on-dark-muted); }
.band--green .arch-card__label, .band--green .arch-card p { color: var(--wc-petrol); }
@media (max-width: 1000px) { .arch-row, .arch-row--3 { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 560px) { .arch-row, .arch-row--3 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- full-bleed photo band */
/* A picture used as a breath between two text sections. */
.photo-band { position: relative; overflow: hidden; height: 46vh; min-height: 340px; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 40%); }
.photo-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,55,84,.20) 0%, rgba(1,55,84,0) 40%, rgba(1,55,84,.30) 100%);
}

/* --------------------------------------------------------------- soft edges */
/* Rounder cards and softer shadows throughout: the campus and the messaging
   are organic, and hard rectangles fight that. */
.card { border-radius: 28px; }
.split__media img { border-radius: 28px; }
.card--photo img { border-radius: 0; }

/* ============================================================================
   SUB-NAV — the "where am I" device
   ----------------------------------------------------------------------------
   The site deliberately runs FEW pages, each holding several sections, with a
   sticky bar that jumps between them and highlights the section you are in.
   School sites get lost-in-a-maze precisely because they answer every question
   with another page. This is the alternative, and it is the pattern Broadacres
   uses on its About and Contact pages.
   Behaviour lives in scripts/chrome.js and self-initialises on [data-subnav].
   ========================================================================== */
.subnav {
  position: sticky; top: 78px; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.subnav__track {
  max-width: var(--content-w); margin: 0 auto; padding: 0 48px;
  display: flex; gap: 34px; overflow-x: auto; scrollbar-width: none;
}
.subnav__track::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; border: 0; text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); padding: 20px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-natural);
}
.subnav a:hover { color: var(--wc-petrol); opacity: 1; }
.subnav a.is-active { color: var(--wc-green-dark); border-bottom-color: var(--wc-green); }
@media (max-width: 900px) { .subnav { top: 70px; } .subnav__track { padding: 0 24px; gap: 24px; } }

/* Sections targeted by a sub-nav need headroom so the sticky bars do not
   cover the heading when you jump to them. */
[data-subnav-section] { scroll-margin-top: 140px; }

/* ============================================================================
   PEOPLE — leadership cards
   ========================================================================== */
.people { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; margin-top: 44px; }
.people__photo { border-radius: 28px; overflow: hidden; }
.people__photo img { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover; }
.people__name { font-family: var(--font-serif); font-weight: 400; font-size: 1.9rem; margin: 0 0 6px; }
.people__role {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wc-green); margin: 0 0 22px;
}
@media (max-width: 800px) { .people { grid-template-columns: 1fr; gap: 28px; } .people__photo { max-width: 300px; } }

/* A quiet panel for an honest note, e.g. a post still being appointed. */
.note-panel {
  background: var(--wc-off-white); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--wc-green);
  border-radius: 0 20px 20px 0; padding: 26px 30px; margin-top: 38px; max-width: 68ch;
}
.note-panel p { margin: 0; font-size: 16px; color: var(--fg-2); max-width: none; }