/* =============================================================================
   THEE BUHLE FOUNDATION — "Heritage" design system
   INSY7315 Task 2 · the client-approved Variation 1 from Task 1

   This is the prototype's design system carried into production, not a
   reinterpretation of it. The tokens, type scale, spacing and component classes
   are the same ones the Figma frames and the clickable prototype used, so the
   built site is recognisably the thing the client signed off.

   Two deliberate changes from the prototype's stylesheet:

     1. The prototype used CSS container queries, because it rendered a fake
        1440px "viewport" inside a real page and had to reflow on that element's
        width. These are real pages, so the same breakpoints are media queries.

     2. Focus, motion and contrast are treated as requirements rather than
        polish. Every interactive element has a visible focus ring, every
        animation respects prefers-reduced-motion, and the palette was checked
        against WCAG 2.1 AA — the results are recorded in docs/01-architecture.md.

   Structure:
     1. Tokens          2. Reset and base      3. Typography
     4. Layout          5. Controls            6. Components
     7. Site chrome     8. Page sections       9. Responsive
    10. Accessibility  11. Print
   ============================================================================= */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  /* Ink and paper. The palette is editorial: cream stock, deep forest ink, one
     gold accent. It is a proposal — the client has supplied no brand colours or
     logo files, which is recorded in the Task 1 prototype read-me. */
  --ink:      #17150F;
  --ink70:    #5A554A;
  /* Deepened from #8E887C, which was 3.27:1 on cream and failed WCAG AA for
     the small secondary text it is used for. #6D685E is the lightest shade of
     the same grey that passes 4.5:1 on every background in this palette. */
  --ink40:    #6D685E;
  --cream:    #FAF6EE;
  --cream2:   #F1EDE3;
  --white:    #FFFFFF;
  --line:     #E4DCCB;
  /* Deepened from #A87C32 for the same reason: 3.48:1 on cream, 3.06:1 on
     goldSoft, and it carries the eyebrow labels and small links. #856228 is
     the lightest shade of the same hue that passes 4.5:1 on all five
     backgrounds — and white on it rises from 3.75:1 to 5.56:1, so the gold
     Donate button passes too. Decorative gradients keep the lighter gold. */
  --gold:     #856228;
  --gold-d:   #6B4F1E;
  --goldSoft: #F2E7D2;
  --forest:   #2E4034;
  --forest2:  #5C6B4F;
  --clay:     #A6553C;
  --mist:     #E7EEE6;
  --page:     #DEDACF;

  /* Status colours, used for attendance, form state and system feedback.
     Never used alone: every status also carries a text label or an icon, so the
     information does not depend on colour perception. */
  --ok:       #2E4034;
  --warn:     #856228;
  --error:    #A6553C;
  --error-bg: #FBF0EC;
  --error-br: #E5C4B8;
  --ok-bg:    #E7EEE6;

  /* Cormorant Garamond is the Figma face. The stack falls back to the closest
     high-contrast old-style serif on each platform, so a learner on a cheap
     Android phone with no webfont still gets a serif heading rather than Arial. */
  --display: "Cormorant Garamond", Baskerville, "Hoefler Text", "Iowan Old Style",
             "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 2px corners throughout — the prototype's print-inspired sharpness. */
  --radius: 2px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(23, 21, 15, .04);
  --shadow-lift: 0 12px 32px rgba(23, 21, 15, .12);
  --shadow-modal: 0 30px 80px rgba(23, 21, 15, .34);

  --gutter: 80px;
  --band: 96px;

  --focus: 2.5px solid var(--gold);
}

/* ------------------------------------------------------- 2. Reset and base */

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

/* The `hidden` attribute must actually hide.
   The browser's own rule is `[hidden] { display: none }` at the lowest possible
   specificity, so any class that sets `display` — a flex row, a grid — silently
   beats it, and an element the JavaScript believes is hidden stays on screen.
   This is a real bug that cost a debugging session on the staff console's
   sign-in card, so the rule is stated once, here, with intent. */
[hidden] { display: none !important; }

html {
  /* Anchor links land below the sticky header rather than under it. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; }

/* A visible focus ring on everything, always. The gold against both cream and
   forest clears 3:1 for non-text contrast, so it is visible on every surface
   in the system. */
:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
}

/* Never remove the outline without replacing it. Keyboard users are the whole
   reason it exists. */
:focus:not(:focus-visible) { outline: none; }

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

.num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- 3. Typography */

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
  font-family: var(--display);
  letter-spacing: 0;
  text-wrap: balance;
}

.d1 { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.06; }
.d2 { font-size: clamp(30px, 4.3vw, 58px); line-height: 1.10; }
.d3 { font-size: clamp(24px, 3.0vw, 42px); line-height: 1.16; }
.d4 { font-size: clamp(20px, 2.0vw, 28px); line-height: 1.22; }
.d5 { font-size: 21px; line-height: 1.30; }

.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.lede { font-size: 17px; line-height: 1.72; color: var(--ink70); max-width: 62ch; }
.muted { color: var(--ink70); }
.dim { color: var(--ink40); }
.quiet { font-size: 14.5px; line-height: 1.65; color: var(--ink70); }
.alabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink40);
  margin: 4px 0 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* In-body links are underlined. An accent colour alone would fail WCAG 1.4.1,
   which requires that colour is not the only way of conveying information. */
.prose a, .foot-col a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------- 4. Layout */

.wrap { padding: 0 var(--gutter); }

.band { padding: var(--band) var(--gutter); }
.band--cream  { background: var(--cream); }
.band--white  { background: var(--white); }
.band--cream2 { background: var(--cream2); }
.band--forest { background: var(--forest); color: var(--white); }
.band--forest .lede,
.band--forest .muted { color: rgba(255, 255, 255, .82); }
.band--forest .eyebrow { color: var(--goldSoft); }
.band--tight { padding-top: 64px; padding-bottom: 64px; }

.grid { display: grid; gap: 24px; }
/* Grid children default to min-width:auto, which lets a wide table (e.g. the
   volunteer availability grid) stretch its column past the viewport. */
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.head { display: flex; align-items: flex-end; gap: 40px; margin-bottom: 52px; }
.head .grow { flex: 1; min-width: 0; }

.rule { height: 1px; background: var(--line); border: none; margin: 0; }
.stack { display: grid; gap: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { margin-left: auto; }

/* ----------------------------------------------------------- 5. Controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn--gold    { background: var(--gold); color: #fff; }
.btn--gold:hover:not([disabled])    { background: #B98A3D; }
.btn--forest  { background: var(--forest); color: #fff; }
.btn--forest:hover:not([disabled])  { background: #3B5244; }
.btn--ink     { background: var(--ink); color: #fff; }
.btn--light   { background: #fff; color: var(--ink); }
.btn--ghost   { border: 1px solid rgba(23, 21, 15, .25); color: var(--ink); }
.btn--ghost:hover:not([disabled])   { border-color: var(--ink); }
.btn--ghostL  { border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.btn--ghostL:hover:not([disabled])  { border-color: #fff; }
.btn--danger  { background: var(--clay); color: #fff; }
.btn--block   { width: 100%; }
.btn--s       { padding: 11px 18px; font-size: 12px; }

/* Disabled and busy states. A button that is working must say so — an
   unresponsive button is indistinguishable from a broken one. */
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

.btn[data-busy="true"] { position: relative; color: transparent !important; }
.btn[data-busy="true"]::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: tb-spin .7s linear infinite;
  /* currentColor is transparent above, so the ring needs its own colour. */
  border-color: rgba(255, 255, 255, .85);
  border-top-color: transparent;
}
.btn--ghost[data-busy="true"]::after,
.btn--light[data-busy="true"]::after {
  border-color: rgba(23, 21, 15, .55);
  border-top-color: transparent;
}

@keyframes tb-spin { to { transform: rotate(360deg); } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  background: var(--cream2);
  color: var(--ink70);
}
.chip--gold   { background: var(--goldSoft); color: var(--gold-d); }
.chip--forest { background: var(--forest); color: #fff; }
.chip--mist   { background: var(--mist); color: var(--forest); }
.chip--white  { background: #fff; color: var(--ink70); }
.chip--clay   { background: var(--error-bg); color: var(--clay); }

.tog {
  padding: 9px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink70);
}
.tog[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.tog--gold[aria-pressed="true"] { background: var(--goldSoft); border-color: var(--gold); color: var(--gold-d); }
.chipset { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------- 6. Components */

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.card--cream  { background: var(--cream); }
.card--gold   { background: #FDF6E8; border-color: #E3CFA3; }
.card--forest { background: var(--forest); border-color: var(--forest); color: #fff; }
.card--clay   { background: var(--error-bg); border-color: var(--error-br); }
.pad   { padding: 30px; }
.pad-s { padding: 22px; }

/* Forms. Every input has a real <label>; placeholders are examples, never
   labels, because a placeholder disappears the moment somebody types. */
label.f { display: block; }
label.f > span { display: block; font-size: 12px; font-weight: 650; margin-bottom: 7px; }
label.f > span .req { color: var(--clay); margin-left: 2px; }
label.f > .hint { display: block; font-size: 12px; color: var(--ink40); margin-top: 6px; }

.input {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.input::placeholder { color: var(--ink40); }
.input:hover { border-color: var(--ink40); }
textarea.input { min-height: 100px; resize: vertical; }

/* Field-level errors, bound from the API's 422 `fields` object. Marked with
   aria-invalid and described by the message, so a screen reader announces the
   problem rather than leaving a silently red box. */
.input[aria-invalid="true"] { border-color: var(--clay); border-width: 1.5px; background: var(--error-bg); }
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--clay);
}
.field-error:empty { display: none; }

label.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.6;
}
label.check input { margin-top: 4px; flex: none; width: 17px; height: 17px; accent-color: var(--forest); }
/* Sub-label on the amount toggles inherits the button colour, so it stays
   legible on both the paper (unpressed) and forest (pressed) states. */
.amt-sub { display: block; font-size: 11px; opacity: .86; }

fieldset { border: none; margin: 0; padding: 0; }
legend { font-size: 12px; font-weight: 650; padding: 0; margin-bottom: 7px; }

.bar { height: 8px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--radius); background: var(--gold); }
.band--forest .bar { background: rgba(255, 255, 255, .2); }

/* Labelled photo placeholders. The prototype used these because the client has
   supplied no photography; they are kept, labelled, rather than filled with
   stock images of children who are not the foundation's learners. */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  padding: 12px;
}

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.tablewrap:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13.5px; }
caption { text-align: left; padding: 14px 18px; font-size: 12px; color: var(--ink70); }
th, td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink70); background: var(--cream); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--cream); }

.list > * { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.list > *:first-child { border-top: none; }

.acc { border-bottom: 1px solid var(--line); }
.acc > button { display: flex; width: 100%; gap: 20px; align-items: center; padding: 22px 0; text-align: left; }
.acc > button > span:first-child { flex: 1; font-size: 18px; font-weight: 500; }
.acc > button > span:last-child { font-family: var(--display); font-size: 24px; color: var(--gold); line-height: 1; }
.acc-body { display: none; padding-bottom: 22px; max-width: 74ch; color: var(--ink70); line-height: 1.7; }
.acc.is-open .acc-body { display: block; }

.statrow { display: flex; }
.statrow > div { flex: 1; padding-right: 32px; }
.statrow > div + div { padding-left: 40px; border-left: 1px solid rgba(255, 255, 255, .18); }
.statrow b { display: block; font-family: var(--display); font-size: clamp(34px, 4.4vw, 64px); font-weight: 500; line-height: 1.04; }
.statrow em { font-style: normal; display: block; font-size: 14px; font-weight: 500; margin-top: 8px; }
.statrow small { display: block; font-size: 12px; color: var(--goldSoft); margin-top: 3px; }
.statrow--light > div + div { border-color: var(--line); }
.statrow--light b { color: var(--forest); }
.statrow--light small { color: var(--ink40); }

.evcard { display: flex; gap: 24px; background: var(--white); border: 1px solid var(--line); padding: 26px; }
.evdate { flex: none; text-align: center; background: var(--cream); padding: 14px 16px; min-width: 74px; }
.evdate b { display: block; font-family: var(--display); font-size: 32px; font-weight: 600; line-height: 1; }
.evdate span { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--gold); }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal .dow { font-size: 10px; font-weight: 700; color: var(--ink40); padding-bottom: 8px; }
.cal .day { padding: 9px 2px; border-radius: var(--radius); }
.cal .day span { font-size: 13px; }
.cal .day i { display: block; width: 5px; height: 5px; border-radius: 50%; margin: 4px auto 0; }

.chart { display: flex; align-items: flex-end; gap: 22px; height: 200px; }
.chart > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; height: 100%; justify-content: flex-end; }
.chart .col { width: 100%; }
.chart .v { font-size: 13px; font-weight: 650; }
.chart .k { font-size: 11px; color: var(--ink70); }

/* System feedback. Every form outcome renders into one of these, so a success
   and a failure look like part of the same system rather than two accidents. */
.notice {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.6;
}
.notice b { display: block; margin-bottom: 3px; }
.notice--ok    { background: var(--ok-bg);     border-color: #C7DAC7; color: var(--forest); }
.notice--error { background: var(--error-bg);  border-color: var(--error-br); color: #7A3A26; }
.notice--warn  { background: var(--goldSoft);  border-color: #E3CFA3; color: var(--gold-d); }
.notice--info  { background: var(--cream2);    border-color: var(--line); color: var(--ink70); }
.notice[hidden] { display: none; }

/* Skeleton placeholder for content still loading from the API. */
.skeleton {
  background: linear-gradient(90deg, var(--cream2) 25%, #E8E2D5 37%, var(--cream2) 63%);
  background-size: 400% 100%;
  animation: tb-shimmer 1.4s ease infinite;
  border-radius: var(--radius);
  min-height: 14px;
}
@keyframes tb-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ------------------------------------------------------- 7. Site chrome */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 650;
}
.skip:focus { left: 0; }

.annbar {
  background: var(--forest);
  color: #fff;
  padding: 11px 20px;
  text-align: center;
  font-size: 12px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.annbar b { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--goldSoft); }
.annbar a { color: var(--goldSoft); font-weight: 650; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px; }
.annbar a:hover { text-decoration: underline; }

.siteheader {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px var(--gutter);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.mark { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; text-decoration: none; }
.mark b { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: .16em; line-height: 1; }
.mark span { display: flex; align-items: center; gap: 8px; font-size: 8px; font-weight: 600; letter-spacing: .3em; color: var(--ink70); }
.mark span::before, .mark span::after { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .55; }

.navlinks { display: flex; gap: 34px; margin-inline: auto; }
.navlinks a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink70);
  text-decoration: none;
}
.navlinks a::after { content: ""; height: 1.5px; width: 20px; background: transparent; }
.navlinks a:hover { color: var(--ink); }
.navlinks a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.navlinks a[aria-current="page"]::after { background: var(--gold); }

.headact { display: flex; gap: 12px; flex: none; }
.burger { display: none; flex-direction: column; gap: 4.5px; padding: 10px 4px; margin-left: auto; }
.burger i { display: block; width: 19px; height: 1.6px; background: var(--ink); }

.drawer { display: none; background: var(--forest); color: #fff; padding: 8px 22px 30px; }
.drawer.is-open { display: block; }
.drawer a.dl {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  text-decoration: none;
}
.drawer .dact { display: grid; gap: 11px; margin-top: 26px; }
.drawer .dfoot { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 14px; color: rgba(255, 255, 255, .75); line-height: 1.9; }

.newsletter { background: var(--goldSoft); padding: 66px var(--gutter); display: flex; gap: 60px; align-items: center; flex-wrap: wrap; }
.newsletter .grow { flex: 1; min-width: 280px; }
.newsletter p { color: #6B5A38; margin: 10px 0 0; line-height: 1.65; max-width: 52ch; }

.foot { background: var(--ink); color: #fff; padding: 72px var(--gutter) 36px; }
.foot-top { display: flex; gap: 80px; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 4px; }
.foot-col h2 { margin: 0 0 8px; font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #C2A870; }
/* 24px tall: WCAG 2.2's minimum target (2.5.8). They were 21px, and the gap
   between them is small enough that the spacing exception does not apply. */
.foot-col a { font-size: 13px; color: rgba(255, 255, 255, .7); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px; padding-block: 3px; }
.foot-col a:hover { color: #fff; text-decoration: underline; }
.foot-bar { display: flex; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 56px; padding-top: 26px; font-size: 12px; color: rgba(255, 255, 255, .5); }
.foot-bar a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; }

.stickybar {
  display: none;
  position: sticky;
  bottom: 0;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 14px 20px 20px;
  gap: 10px;
  z-index: 60;
}

/* ------------------------------------------------------ 8. Page sections */

.hero {
  position: relative;
  background: linear-gradient(115deg, var(--forest) 0%, #4A5A46 55%, #8B7A55 100%);
  color: #fff;
  padding: 100px var(--gutter) 0;
  min-height: 620px;
  display: flex;
  flex-direction: column;
}
.hero .cap { position: absolute; top: 28px; left: var(--gutter); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .4; margin: 0; }
.hero-ribbon { margin-top: auto; align-self: flex-end; background: var(--cream); color: var(--ink); display: flex; gap: 46px; padding: 26px 40px; }
.hero-ribbon b { display: block; font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.1; }
.hero-ribbon span { font-size: 11px; font-weight: 500; color: var(--ink70); }

.banner { background: linear-gradient(115deg, var(--forest), #5C6B4F); color: #fff; padding: 72px var(--gutter) 80px; }
.banner .crumb { font-size: 11px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: var(--goldSoft); margin-bottom: 18px; }
.banner .crumb a { color: inherit; text-decoration: none; }
.banner .crumb a:hover { text-decoration: underline; }
.banner .lede { color: rgba(255, 255, 255, .85); margin-top: 18px; }

.values { display: flex; background: var(--white); padding: 66px var(--gutter); }
.values > div { flex: 1; padding-right: 40px; }
.values > div + div { padding-left: 48px; border-left: 1px solid var(--line); }

.filterbar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 18px var(--gutter);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.split { display: grid; gap: 24px; }

/* --------------------------------------------------------- 9. Responsive
   The same three breakpoints the prototype used, so the built site reflows at
   the widths the client reviewed. */

@media (max-width: 1100px) {
  :root { --gutter: 48px; --band: 72px; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .foot-top { gap: 48px; }
}

@media (max-width: 900px) {
  :root { --gutter: 22px; --band: 52px; }

  .navlinks, .headact { display: none; }
  .burger { display: flex; }
  .siteheader { padding-top: 14px; padding-bottom: 14px; }

  .hero { padding-top: 54px; min-height: 0; }
  .hero-ribbon { align-self: stretch; gap: 0; padding: 18px 20px; margin-top: 34px; }
  .hero-ribbon > div { flex: 1; text-align: center; }
  .hero-ribbon b { font-size: 24px; }
  .hero-ribbon span { font-size: 10px; }

  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr !important; }
  .head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 30px; }

  .values { flex-direction: column; padding-top: 38px; padding-bottom: 38px; }
  .values > div { padding-right: 0; padding-bottom: 20px; }
  .values > div + div { padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 20px; }

  .statrow { flex-wrap: wrap; gap: 24px 0; }
  .statrow > div { flex: 0 0 50%; padding-right: 16px; }
  .statrow > div + div { padding-left: 0; border-left: none; }
  .statrow b { font-size: 32px; }

  .banner { padding-top: 36px; padding-bottom: 40px; }
  .evcard { flex-direction: column; }
  .evdate { align-self: flex-start; }
  .newsletter { gap: 24px; padding-top: 40px; padding-bottom: 40px; }
  .foot-top { flex-direction: column; gap: 34px; }
  .lede { font-size: 15.5px; }
  .chart { height: 150px; gap: 12px; }

  /* The mobile action bar from the prototype's responsive frames: Donate and
     Volunteer stay reachable without scrolling back to the header. */
  .stickybar { display: flex; }
  .stickybar .btn { flex: 1; }

  .alt .imgside { order: -1; }
  table { min-width: 520px; }
}

@media (max-width: 480px) {
  body { font-size: 15.5px; }
  .d1 { font-size: 34px; }
  .d2 { font-size: 28px; }
  .hero-ribbon { gap: 0; padding: 14px 12px; }
  .hero-ribbon b { font-size: 20px; }
  .btn { padding: 14px 20px; }
  /* Touch targets stay at 44px minimum — WCAG 2.5.5. */
  .tog, .chip { min-height: 40px; }
}

/* --------------------------------------------------- 10. Accessibility */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect a user who has asked the operating system for more contrast. */
@media (prefers-contrast: more) {
  :root {
    --ink70: #3D392F;
    --ink40: #5A554A;
    --line:  #B8AC93;
  }
  .btn--ghost { border-width: 2px; border-color: var(--ink); }
  .input { border-width: 2px; }
}

/* The site is committed to the Heritage palette in both themes rather than
   inverting: a cream editorial identity rendered dark stops being the thing the
   client approved. What dark mode gets instead is the page frame, so the site
   does not glare against a dark browser chrome. */
@media (prefers-color-scheme: dark) {
  html { background: #1A1814; }
}

/* ---------------------------------------------------------- 11. Print
   Parents print permission forms and staff print registers, so print is a real
   output rather than an afterthought. */

@media print {
  .annbar, .siteheader, .drawer, .stickybar, .newsletter, .foot, .btn, .burger { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .wrap, .banner { padding: 0 0 18pt; }
  .banner { background: none; color: #000; }
  .card { border: 1px solid #999; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .ph { display: none; }
}

/* A standalone "Learn more" or "Register" link — not one inside a sentence,
   which the target-size rule exempts. At least 24px tall, and in the text-safe
   gold. */
.more-link {
  display: inline-flex; align-items: center; min-height: 24px;
  font-size: 12.5px; font-weight: 650; color: var(--gold); text-decoration: none;
}
.more-link:hover, .more-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; }