/* Athena Insights — styling, rebuilt off the clean markup.
   Discipline: a few chosen values (below); everything else is calc()ed from them.
   Only brand colors, full strength (cream + navy). Classes: .hero .grid .button.
   Previous stylesheet preserved as styles.css.old for reference. */

:root {
  /* ---- Chosen values (the only numbers not computed) ---- */
  --ratio: 1.2;            /* type scale ratio — the original site's scale */
  --leading-body: 1.5;     /* body line-height — readability standard (WCAG 1.4.12 test value) */
  --leading-tight: 1.1;    /* display line-height — large type needs less leading */
  --measure: 66ch;         /* prose reading width (45–75ch band) */
  --layout: 66rem;         /* layout column max width */

  /* ---- Type — calc() chain off the ratio (exact, no rounded literals) ---- */
  --step-0: 1rem;                                               /* small / nav / legal */
  --step-1: calc(var(--step-0) * var(--ratio));                /* body (p, li) */
  --step-2: calc(var(--step-1) * var(--ratio));                /* h3 */
  --step-3: calc(var(--step-2) * var(--ratio));                /* h2 */
  --step-4: calc(var(--step-3) * var(--ratio));                /* h1 (interior pages) */
  --step-6: calc(var(--step-4) * var(--ratio) * var(--ratio)); /* hero headline */

  /* ---- Space — calc() off one body line (exact) ---- */
  --space-1:   calc(var(--step-1) * var(--leading-body));      /* one line of body text — rhythm atom */
  --space-00:  calc(var(--space-1) / 2);
  --space-000: calc(var(--space-1) / 4);
  --space-2:   calc(var(--space-1) * 2);
  --space-3:   calc(var(--space-1) * 4);
  --gutter:    var(--space-1);
  --col-min:   calc(var(--measure) / 4);                       /* card min width = ¼ prose measure */

  /* ---- Color — brand only, full strength ---- */
  --brand-cream: #FDFFE9;
  --brand-navy:  #1A2540;
  --brand-plum:  #48072D;   /* page accent — Team masthead (carries cream text, ~15:1) */
  --brand-coral: #EA6D5E;   /* page accent — Donate masthead (carries navy text, ~5:1) */
  --brand-blue:  #008AB0;   /* button teal — bold labels only (~3.9:1 on cream, large-text tier) */
  --bg: var(--brand-cream);
  --fg: var(--brand-navy);

  /* ---- Fonts ---- */
  --font-display: "IBM Plex Sans Condensed", system-ui, sans-serif;
  --font-body:    "Source Serif 4", Georgia, serif;
  --font-ibm-plex-sans-condensed: var(--font-display);  /* consumed by the inline logo SVG */

  /* ---- Motion ---- */
  --motion: 0.2s ease;   /* hover transition (a chosen animation param) */
}

/* ---- Foundation ---- */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

/* Reset UA block margins so rhythm is ours; keep small at body size (no de-emphasis). */
h1, h2, h3, p, ul, figure { margin: 0; }
small { font-size: inherit; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: var(--leading-body);
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: 700;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

a { color: inherit; text-decoration: underline; }

/* ---- Content grid: a centered reading column (measure) by default, with
   `wide` (layout) and `full` breakouts. Every section is an identically
   configured grid, so the reading column lands in the same place everywhere. ---- */
header, footer {
  padding-inline: max(var(--gutter), calc((100% - var(--layout)) / 2));
}

main { padding-block-end: var(--space-3); }   /* space above the footer */

main > section {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--layout) - var(--measure)) / 2))
    [content-start] min(var(--measure), 100% - 2 * var(--gutter)) [content-end]
    minmax(0, calc((var(--layout) - var(--measure)) / 2)) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
}
main > section > *     { grid-column: content; }   /* default: the reading measure */
main > section > .grid { grid-column: wide; }        /* card grids break out wider */
main > section:has(.grid) > * { grid-column: wide; }  /* a grid section is wide throughout (heading + intro align with the grid) */

/* ---- Header ---- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-1);
}
header > a { text-decoration: none; }        /* logo link */
header a img { display: block; height: var(--space-2); width: auto; }   /* logo */
nav ul { display: flex; gap: var(--space-1); list-style: none; padding: 0; }
nav a {
  font-family: var(--font-display);   /* interface type — bold condensed, unified with logo/headings/buttons */
  font-weight: 700;
}
/* Fade-in underline: nav (interface) links and outbound heading links (e.g. board
   names, marked with ↗). The link is signalled otherwise; the underline is a hover hint. */
nav a,
.grid h3 a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--motion);
}
nav a:hover, nav a:focus-visible,
.grid h3 a:hover, .grid h3 a:focus-visible { text-decoration-color: currentColor; }

/* ---- Vertical rhythm (one scale, three altitudes) ---- */
main > section > * + *            { margin-block-start: var(--space-1); }   /* one line between blocks */
main > section > * + :is(h2, h3)  { margin-block-start: var(--space-2); }   /* more air above a heading */
main > section > :is(h2, h3) + *  { margin-block-start: var(--space-00); }  /* tighter below it */
main > section + section          { margin-block-start: var(--space-3); }   /* between sections */
main > section:not(.hero):first-child { margin-block-start: var(--space-3); } /* first interior title clears the header */

/* ---- Hero band (home only): header + hero content over the photo, all in flow ---- */
.hero {
  color: var(--brand-navy);
  background-color: var(--fg);
  background-image: url("assets/shiona-das-reflecting-crop.jpg");
  background-position: center top;   /* anchor the sky behind the header */
  background-size: 120% auto;   /* zoom the wide crop 20% toward the sky/monument (width is the fill axis here) */
  background-repeat: no-repeat;
  padding-inline: max(var(--gutter), calc((100% - var(--layout)) / 2));   /* content to the layout column */
  padding-block-end: var(--space-3);
  min-block-size: 40rem;   /* taller band for full-bleed impact (fixed, not viewport-scaled; tune to taste) */
}
.hero > header { padding-inline: 0; }                        /* the band already insets to the column */
.hero nav a { color: var(--fg); }                            /* nav reads as navy on the light sky */
.hero > * + * { margin-block-start: var(--space-1); }        /* flow: headline → subhead */
.hero > header + * { margin-block-start: var(--space-3); }   /* headline sits below the header */
.hero h1 { font-size: var(--step-6); text-align: center; }

/* ---- Masthead (interior page title): a content-width card in a per-page brand
   accent, the counterpart to the landing's photo hero. Each page names its accent
   and the legible text color for it (fixed by contrast); the card just reads them,
   so one rule serves every page and new pages theme by setting two tokens. ---- */
.page-team   { --page-accent: var(--brand-plum);  --page-accent-fg: var(--brand-cream); }
.page-donate { --page-accent: var(--brand-coral); --page-accent-fg: var(--fg); }

.masthead > div {
  grid-column: content;                             /* contained, centered in the reading column */
  padding: var(--space-2);
  background: var(--page-accent, var(--fg));        /* fallback: navy card if a page names no accent */
  color: var(--page-accent-fg, var(--brand-cream));
}
.masthead > div > * + *               { margin-block-start: var(--space-1); }
.masthead > div > :is(h1, h2, h3) + * { margin-block-start: var(--space-00); }   /* subhead tucks under the title */

/* ---- Cards / adaptive columns ---- */
.grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min)), 1fr));
  list-style: none;
  padding: 0;
}
.grid > li > * + * { margin-block-start: var(--space-00); }
/* A text cell inside a .grid (e.g. "What we do") flows like a section. */
.grid > div > * + *           { margin-block-start: var(--space-1); }
.grid > div > :is(h2, h3) + * { margin-block-start: var(--space-00); }
.grid > :is(img, a) { align-self: start; }   /* a direct image (or linked image) cell keeps its natural height */
div.grid { --col-min: calc(var(--measure) / 2); }   /* content two-columns: fewer, wider columns than card lists, so they stack before text gets cramped */
/* A linked image cell (e.g. "What we do"): on hover it darkens and zooms slightly
   within a fixed frame — signalling it's clickable. */
.grid > a { overflow: hidden; cursor: pointer; }   /* frame clips the zoom; pointer since the placeholder link has no href */
.grid > a img { transition: filter var(--motion), transform var(--motion); }
.grid > a:hover img,
.grid > a:focus-visible img { filter: brightness(0.9); transform: scale(1.03); }

/* ---- Button ---- */
.button {
  --button-ink: var(--brand-blue);  /* teal: text + border (default), fill (on hover) */
  --button-ground: var(--bg);       /* label color once filled (cream on teal) */
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  padding: var(--space-00) var(--space-1);
  color: var(--button-ink);
  border: 1px solid var(--button-ink);
  background: transparent;
  text-decoration: none;
  transition: background-color var(--motion), color var(--motion);
}
.button:hover,
.button:focus-visible {                /* invert: fill with the ink, text becomes the ground */
  background: var(--button-ink);
  color: var(--button-ground);
}
/* Respect reduced-motion: keep the hover states, drop the animation. */
@media (prefers-reduced-motion: reduce) {
  nav a,
  .grid h3 a,
  .grid > a img,
  .button { transition: none; }
  .grid > a:hover img { transform: none; }   /* keep the darken; drop the zoom */
}

/* ---- Footer: navy band, cream text; a 2×2 that collapses to one column ---- */
footer {
  padding-block: var(--space-3);
  background: var(--fg);
  color: var(--brand-cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "nav       contact"
    "copyright .";
  row-gap: var(--space-1);   /* components are lines in the footer's flow */
}
footer > nav { grid-area: nav; }
footer > div { grid-area: contact; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-00); }  /* social row (email + LinkedIn) */
footer > p   { grid-area: copyright; }

/* The one breakpoint. Media queries can't read our tokens, so 48rem is a chosen
   value ~ where the footer's two columns stop fitting; the hero is tuned here too. */
@media (max-width: 48rem) {
  footer {
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "contact" "copyright";
  }
  footer > div { align-items: flex-start; }
  /* Hero: zoom harder toward the sky/monument on narrow screens (height is the fill axis here). */
  .hero { background-size: auto 140%; }
}