/* Fonts are requested from a <link> in the document head, not with @import.
   An @import here would serialise the chain HTML -> site.css -> font css ->
   font files, delaying first paint by a whole round trip. */

/* ==========================================================================
   Hope Foundation — design system
   Tokens, scale and components transcribed from the client Figma Make
   reference (Fraunces + Inter, forest / cream / amber).
   Rules of the system:
     · type scale has 11 steps, floor 12px, ceiling 72px — nothing outside it
     · exactly three radii: pill, card (16px), small (12px)
     · one section rhythm, one container, one heading pattern
   ========================================================================== */

:root {
  --hf-header-height: 112px;
  --hf-menu-top: 112px;
  --hf-program-nav-height: 96px;
  /* Palette — from the reference @theme block */
  --forest-deep: #0f2419;
  --forest: #1b3a2d;
  --forest-mid: #2a5540;
  --forest-light: #3d7a58;
  --sage: #a8c4b2;
  --sage-dim: #7aaa92;
  --cream: #faf6ef;
  --cream-dark: #f0e9db;
  --amber: #e07b2a;
  --amber-light: #f5a55a;
  --amber-pale: #fdf0e0;
  --amber-ink: #b45114;
  --charcoal: #1c1c1c;
  --muted: #6b7280;
  --muted-soft: #9ca3af;
  --body-copy: #4b5563;
  --white: #fff;
  --line: #e2ddd2;
  --line-dark: rgb(255 255 255 / .1);

  /* Type scale — Tailwind steps used by the reference. Nothing else. */
  --fs-xs: .75rem;      /* 12 */
  --fs-sm: .875rem;     /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: clamp(1.5rem, 2.2vw, 1.875rem);   /* 24 → 30 */
  --fs-4xl: clamp(1.75rem, 3vw, 2.25rem);     /* 28 → 36 */
  --fs-5xl: clamp(2rem, 4vw, 3rem);           /* 32 → 48  · section h2 */
  --fs-6xl: clamp(2.25rem, 5vw, 3.75rem);     /* 36 → 60  · page h1 */
  --fs-7xl: clamp(2.5rem, 6vw, 4.5rem);       /* 40 → 72  · home hero h1 */

  /* Rhythm */
  /* Content width grows with the screen (up to 1600px) so large monitors are
     filled; phones keep a 24px margin each side. */
  --wrap: min(100% - clamp(3rem, 5vw, 6rem), 100rem);
  --section: clamp(3rem, 4.4vw, 5.25rem);
  --section-tight: clamp(2.25rem, 3vw, 3.25rem);

  /* Radii — three, only three */
  --r-pill: 999px;
  --r-card: 1rem;
  --r-sm: .75rem;

  --shadow-sm: 0 1px 2px rgb(15 36 25 / .06), 0 1px 3px rgb(15 36 25 / .08);
  --shadow-lg: 0 10px 30px rgb(15 36 25 / .12);

  /* Two scripts, one pairing. Latin gets a serif display face over a sans for
     running text; Telugu gets the matching Noto pair, so a Telugu page reads
     with the same contrast between headline and body as an English one. Both
     stacks previously fell back to the serif, which put Telugu body copy in a
     serif while its English counterpart was set in Inter. */
  --display: 'Fraunces', 'Noto Serif Telugu', 'Nirmala UI', Gautami, 'Telugu Sangam MN', Georgia, serif;
  --body: 'Inter', 'Noto Sans Telugu', 'Nirmala UI', Gautami, 'Telugu Sangam MN', system-ui, sans-serif;

  /* Per-item scroll-reveal stagger. site.js overrides this on each element;
     declaring it here keeps every var() in the sheet resolvable. */
  --reveal-delay: 0ms;
}

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

html { scroll-behavior: smooth; background: var(--forest-deep); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Short pages fill tall and zoomed-out viewports, keeping the footer at the
   bottom. The root also matches the footer during mobile overscroll. */
body > .hf-main { flex: 0 0 auto; }
body > .hf-header, body > .hf-utility, body > .hf-footer { flex-shrink: 0; }
body > .hf-footer { flex-grow: 1; display: flex; flex-direction: column; }
.hf-footer > .hf-footer-bottom { margin-top: auto; }

/* Component display rules must never override the hidden attribute: the
   archive hides its category filter on single-category pages this way. */
[hidden] { display: none !important; }

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

/* Form controls default to the UA font (13px Arial). Bring them into the
   system so no control can fall off the type scale. */
button, input, select, textarea, option { font: inherit; font-size: var(--fs-sm); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 { font-size: var(--fs-6xl); }
h2 { font-size: var(--fs-5xl); }
h3 { font-size: var(--fs-xl); line-height: 1.3; }
h4 { font-size: var(--fs-base); }

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.hf-sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.hf-skip {
  position: absolute; z-index: 100; top: .5rem; left: .5rem;
  transform: translateY(-200%);
  padding: .7rem 1.1rem; border-radius: var(--r-pill);
  background: var(--amber); color: var(--white);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: transform .15s ease;
}
.hf-skip:focus { transform: translateY(0); }

.hf-wrap { width: var(--wrap); margin-inline: auto; }

/* ── Shared atoms ───────────────────────────────────────────────────────── */

.hf-kicker {
  margin: 0 0 .75rem;
  color: var(--amber-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hf-kicker--light { color: var(--sage); }

.hf-lede {
  max-width: 42rem;
  color: var(--body-copy);
  font-size: var(--fs-lg);
  line-height: 1.7;
}

.hf-section { padding-block: var(--section); }
.hf-section--tight { padding-block: var(--section-tight); }
.hf-section--mist { background: var(--cream-dark); }
.hf-section--ink { background: var(--forest); color: var(--cream); }
.hf-section--deep { background: var(--forest-deep); color: var(--cream); }
.hf-section--ink h1, .hf-section--ink h2, .hf-section--ink h3,
.hf-section--deep h1, .hf-section--deep h2, .hf-section--deep h3 { color: var(--white); }
.hf-section--ink p, .hf-section--deep p { color: var(--sage); }

.hf-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 2.8vw, 2.75rem);
}
.hf-section-heading > div { max-width: 40rem; }
.hf-section-heading--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hf-section-heading--center .hf-lede { margin-inline: auto; text-align: center; }

/* Buttons — pills, as in the reference */
.hf-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.75rem;
  border: 1px solid var(--amber-ink);
  border-radius: var(--r-pill);
  background: var(--amber-ink);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.hf-button:hover { background: var(--forest); border-color: var(--forest); }
.hf-button--compact { min-height: 40px; padding: .5rem 1.25rem; }
.hf-button--ghost {
  border-color: rgb(27 58 45 / .3);
  background: transparent;
  color: var(--forest);
}
.hf-button--ghost:hover { border-color: var(--forest); background: rgb(27 58 45 / .06); }
.hf-button--light { border-color: var(--amber-ink); background: var(--amber-ink); color: var(--white); }
.hf-button--outline-light,
/* A ghost button sitting on any dark ground must become the light outline. */
.hf-reference-hero .hf-button--ghost,
.hf-involved-cta .hf-button--ghost,
.hf-cta .hf-button--ghost,
.hf-section--ink .hf-button--ghost,
.hf-section--deep .hf-button--ghost {
  border-color: rgb(255 255 255 / .4);
  background: transparent;
  color: var(--white);
}
.hf-button--outline-light:hover,
.hf-reference-hero .hf-button--ghost:hover,
.hf-involved-cta .hf-button--ghost:hover,
.hf-cta .hf-button--ghost:hover,
.hf-section--ink .hf-button--ghost:hover,
.hf-section--deep .hf-button--ghost:hover { border-color: var(--white); background: rgb(255 255 255 / .1); }

.hf-text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .5rem;
  color: var(--amber-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.hf-text-link::after { content: '→'; transition: transform .18s ease; }
.hf-text-link:hover { text-decoration: underline; text-underline-offset: .3em; }
.hf-text-link:hover::after { transform: translateX(3px); }
.hf-text-link--light { color: var(--amber-light); }

.hf-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Integrated media
   The caption sits inside the frame on a gradient scrim so a photograph and
   its provenance read as one object, rather than a floating rounded box with
   a detached grey line of text beneath it. */
.hf-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--forest);
  box-shadow: var(--shadow-lg);
}
.hf-photo img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hf-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(to top, rgb(15 36 25 / .88), rgb(15 36 25 / 0));
  color: rgb(255 255 255 / .92);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.45;
}
.hf-photo--dark figcaption { color: rgb(255 255 255 / .92); }
/* Press clippings are documents, not photographs — they need to be readable
   in full, so they keep a light ground and a caption below the frame. */
.hf-photo--press { background: var(--white); box-shadow: var(--shadow-sm); }
.hf-photo--press img { aspect-ratio: auto; border: 1px solid var(--line); }
.hf-photo--press figcaption {
  position: static;
  padding: .75rem 1rem 1rem;
  background: none;
  color: var(--muted);
}

/* ── Utility bar + header ───────────────────────────────────────────────── */

.hf-utility {
  background: var(--forest-deep);
  color: rgb(255 255 255 / .72);
  font-size: var(--fs-xs);
}
.hf-utility .hf-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: .55rem;
}
.hf-utility div { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.hf-utility a { color: inherit; text-decoration: none; }
.hf-utility a:hover { color: var(--white); }

.hf-header {
  position: sticky;
  z-index: 40;
  top: 0;
  background: var(--forest-deep);
  transition: background .3s ease, box-shadow .3s ease;
}
/* site.js toggles `is-scrolled` on every page, so the solid inner-page header
   gets the same lift as the transparent home overlay. */
.hf-header.is-scrolled { box-shadow: var(--shadow-lg); }
.hf-header--overlay .hf-desktop-nav a,
.hf-header--overlay .hf-language button,
.hf-header--overlay .hf-utility a { text-shadow: 0 1px 3px rgb(15 36 25 / .8); }
.hf-header--overlay {
  position: absolute;
  /* `top: auto` keeps the overlay at its static position, below the utility
     bar. Without it the base sticky rule's `top: 0` pins it over that bar. */
  top: auto;
  right: 0;
  left: 0;
  background: transparent;
}
/* The body is a flex column, and an absolutely positioned flex child takes
   its static position from the top of the container, not from below the
   utility bar. Offset it by the bar's height wherever the bar is shown
   (it is hidden at 860px and below), or the logo sits over the bar's text. */
@media (min-width: 861px) {
  .hf-utility + .hf-header--overlay { top: calc(1.1rem + 24px); }
}
.hf-header--overlay.is-scrolled {
  position: fixed;
  top: 0;
  background: rgb(15 36 25 / .95);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
}

.hf-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.15rem;
}

.hf-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.hf-brand img { width: auto; height: 76px; }

.hf-desktop-nav { display: flex; align-items: center; gap: 1.25rem; margin-inline: auto; }
.hf-desktop-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #dcebe3;
  font-size: var(--fs-lg);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.hf-desktop-nav a:hover { color: var(--white); }
.hf-desktop-nav .hf-icon { width: 1.05rem; height: 1.05rem; color: var(--amber-light); opacity: .85; transition: opacity .2s ease, transform .2s ease; }
.hf-desktop-nav a:hover .hf-icon,
.hf-desktop-nav a[aria-current='page'] .hf-icon { opacity: 1; }
.hf-desktop-nav a[aria-current='page'] { color: var(--white); }
.hf-desktop-nav a[aria-current='page']::after {
  position: absolute; right: 0; bottom: -.5rem; left: 0;
  height: 2px; border-radius: 2px; background: var(--amber); content: '';
}

.hf-header-actions { display: flex; align-items: center; gap: .75rem; }

.hf-language {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}
.hf-language button {
  /* The button keeps a 44px hit area on both axes (WCAG 2.5.5) while the
     visible chip is drawn smaller by the inset pseudo-element, so the control
     reads as a light text toggle instead of a second orange block competing
     with the Volunteer button. `flex-shrink: 0` stops a narrow header
     squeezing the pair below the target size. */
  position: relative;
  z-index: 0;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .3rem;
  border: 0;
  background: transparent;
  color: rgb(255 255 255 / .68);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease;
}
.hf-language button::before {
  position: absolute;
  z-index: -1;
  inset: 8px 2px;
  border-radius: var(--r-pill);
  background: transparent;
  content: '';
  transition: background .18s ease;
}
.hf-language button:hover { color: var(--white); }
.hf-language button[aria-pressed='true'] { color: var(--white); }
.hf-language button[aria-pressed='true']::before { background: rgb(255 255 255 / .2); }

.hf-menu-button {
  display: none;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hf-menu-button span,
.hf-menu-button span::before,
.hf-menu-button span::after {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--white);
  transition: transform .2s ease, opacity .2s ease;
}
.hf-menu-button span { position: relative; }
.hf-menu-button span::before { position: absolute; top: -7px; content: ''; }
.hf-menu-button span::after { position: absolute; top: 7px; content: ''; }
.hf-menu-button[aria-expanded='true'] span { background: transparent; }
.hf-menu-button[aria-expanded='true'] span::before { transform: translateY(7px) rotate(45deg); }
.hf-menu-button[aria-expanded='true'] span::after { transform: translateY(-7px) rotate(-45deg); }

.hf-mobile-nav {
  background: var(--forest-deep);
  border-top: 1px solid var(--forest-mid);
  max-height: calc(100vh - var(--hf-menu-top));
  max-height: calc(100dvh - var(--hf-menu-top));
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.hf-mobile-nav .hf-wrap { display: flex; flex-direction: column; padding-block: .5rem 1.25rem; }
.hf-mobile-nav a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block: .85rem;
  border-bottom: 1px solid rgb(255 255 255 / .08);
  color: #c8ddd3;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.hf-mobile-nav a:hover { color: var(--white); }
.hf-mobile-nav .hf-icon { width: 1.15rem; height: 1.15rem; color: var(--amber-light); }

/* ── Home hero (reference) ──────────────────────────────────────────────── */

.hf-reference-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(88vh, 46rem);
  padding-block: clamp(8rem, 16vw, 11rem) clamp(3.5rem, 7vw, 6rem);
  background: var(--forest-deep);
  overflow: hidden;
}
.hf-reference-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hf-reference-hero-shade {
  position: absolute;
  inset: 0;
  /* The client asked for the photograph to read more strongly. The scrim is
     therefore much lighter than before and concentrated where the type sits:
     a short vertical wash at the top for the navigation, a soft one at the
     foot, and a horizontal fade that only reaches a third of the way across.
     The headline and lede carry their own shadow (below) so legibility no
     longer depends on flooding the whole image. Verified by sampling the
     rendered pixels behind each text block. */
  background:
    linear-gradient(90deg, rgb(15 36 25 / .86) 0%, rgb(15 36 25 / .74) 32%, rgb(15 36 25 / .44) 52%, rgb(15 36 25 / .10) 74%, transparent 100%),
    linear-gradient(180deg, rgb(15 36 25 / .70) 0%, rgb(15 36 25 / .10) 20%, rgb(15 36 25 / .12) 52%, rgb(15 36 25 / .80) 100%);
}
.hf-reference-hero-content { position: relative; }
.hf-reference-hero-content > * { max-width: 46rem; }
.hf-reference-hero h1 {
  margin: 0 0 1.25rem;
  color: var(--white);
  font-size: var(--fs-7xl);
  line-height: 1.06;
  text-shadow: 0 2px 18px rgb(15 36 25 / .82), 0 1px 3px rgb(15 36 25 / .6);
}
.hf-reference-hero h1 em { color: var(--amber); font-style: normal; }
.hf-reference-hero-lede {
  max-width: 34rem;
  margin-bottom: 2.25rem;
  color: #eaf3ee;
  font-size: var(--fs-lg);
  line-height: 1.7;
  text-shadow: 0 2px 14px rgb(15 36 25 / .85), 0 1px 3px rgb(15 36 25 / .7);
}
.hf-reference-pill {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: .4rem 1rem;
  border: 1px solid rgb(245 165 90 / .5);
  border-radius: var(--r-pill);
  /* Its own chip carries the contrast, so the photograph behind it does not
     have to be dimmed for a 12px label. */
  background: rgb(15 36 25 / .82);
  color: var(--amber-light);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hf-scroll-cue { display: none; }

/* ── Impact band ────────────────────────────────────────────────────────── */

.hf-impact { background: var(--forest); padding-block: var(--section); color: var(--cream); }
.hf-impact-heading { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); text-align: center; }
.hf-impact-heading h2 { color: var(--white); }
.hf-impact-heading .hf-kicker { color: var(--sage); }

.hf-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
}
.hf-impact-grid > article { text-align: center; }
.hf-impact-grid strong {
  display: block;
  color: var(--amber);
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hf-impact-grid h3 {
  margin-top: .6rem;
  color: var(--cream);
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
}
.hf-impact-grid p {
  margin: .35rem 0 0;
  color: var(--sage);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.hf-impact-source {
  max-width: 34rem;
  margin: clamp(2.25rem, 4vw, 3.5rem) auto 0;
  color: var(--sage-dim);
  font-size: var(--fs-sm);
  line-height: 1.7;
  text-align: center;
}

/* ── Split story (about preview) ────────────────────────────────────────── */

.hf-about-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}
.hf-about-story-photo { position: relative; margin: 0; }
.hf-about-story-photo img {
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: var(--r-card);
  object-fit: cover;
}
.hf-about-story-photo figcaption {
  position: absolute;
  bottom: -1.25rem;
  left: -1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-card);
  background: var(--amber);
  box-shadow: var(--shadow-lg);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.hf-about-story-photo figcaption strong {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1;
}
.hf-about-story-photo figcaption span { display: block; margin-top: .2rem; }
.hf-about-story-photo figcaption em {
  display: block;
  color: rgb(255 255 255 / .75);
  font-size: var(--fs-xs);
  font-style: normal;
}

.hf-purpose-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.hf-purpose-cards article {
  padding: 1.25rem;
  border-radius: var(--r-card);
  background: var(--cream-dark);
}
.hf-purpose-cards span {
  display: block;
  margin-bottom: .5rem;
  color: var(--amber);
  font-size: var(--fs-xl);
  line-height: 1;
}
.hf-purpose-cards h3 { color: var(--forest); font-size: var(--fs-sm); font-weight: 600; }
.hf-purpose-cards p {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

/* ── Programme cards ────────────────────────────────────────────────────── */

/* Programmes sit on the darker cream so the pale cards read as cards. */
.hf-programmes { padding-block: var(--section); background: var(--cream-dark); }
.hf-programmes-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 2.8vw, 2.75rem);
}
.hf-programmes-heading > div { max-width: 34rem; }
.hf-programmes-heading > p { max-width: 22rem; margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; }

.hf-about-story { padding-block: var(--section); }

.hf-events { padding-block: var(--section); }
.hf-events-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(1.75rem, 2.8vw, 2.75rem);
  text-align: center;
}

.hf-program-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}
/* Five cards on a six-column track: three, then two half-width. Centring the
   second row instead left both its cards inset from the container, so no card
   edge in the block lined up with any other. Spanning three keeps every outer
   edge on the same two lines as the row above. */
.hf-program-grid > * { grid-column: span 2; }
.hf-program-grid > :nth-child(4) { grid-column: 1 / span 3; }
.hf-program-grid > :nth-child(5) { grid-column: 4 / span 3; }
.hf-program-card {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.75rem;
  border-radius: var(--r-card);
  background: var(--cream);
  color: var(--forest);
}
/* The foundation's own core-activity marks, set in a filled disc like the
   reference the client shared. The icons are solid white artwork, so each
   card tints its disc rather than the mark. */
.hf-program-icon {
  display: inline-flex;
  width: 3.25rem;
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--amber);
}
.hf-program-icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.hf-program-card > span[aria-hidden]:not(.hf-program-icon) {
  color: var(--amber);
  font-size: var(--fs-2xl);
  line-height: 1;
}
/* On the amber and pale cards the disc flips to forest for contrast. */
.hf-program-card--orange .hf-program-icon { background: var(--forest-deep); }
.hf-program-card--light .hf-program-icon { background: var(--amber-ink); }
.hf-program-card--forest .hf-program-icon,
.hf-program-card--mid .hf-program-icon { background: var(--amber); }
.hf-program-card h3 { font-size: var(--fs-xl); }
.hf-program-card p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  opacity: .82;
}
.hf-program-link {
  margin-top: auto;
  padding-top: .5rem;
  color: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: .65;
  transition: opacity .18s ease;
}
.hf-program-link::after { content: ' →'; }
.hf-program-card:hover .hf-program-link { opacity: 1; }

.hf-program-card--forest { background: var(--forest); color: var(--cream); }
.hf-program-card--forest h3 { color: var(--white); }
.hf-program-card--forest > span[aria-hidden] { color: var(--amber-light); }
.hf-program-card--orange { background: var(--amber); color: var(--white); }
.hf-program-card--orange h3 { color: var(--white); }
.hf-program-card--orange > span[aria-hidden] { color: rgb(255 255 255 / .85); }
.hf-program-card--mid { background: var(--forest-mid); color: var(--cream); }
.hf-program-card--mid h3 { color: var(--white); }
.hf-program-card--mid > span[aria-hidden] { color: var(--amber-light); }
.hf-program-card--light { background: var(--amber-pale); color: var(--forest); }

/* ── Event / note cards ─────────────────────────────────────────────────── */

.hf-event-grid,
.hf-featured-notes,
.hf-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.hf-event-card,
.hf-note {
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.hf-event-card:hover,
.hf-note:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.hf-event-card > a { display: block; color: inherit; text-decoration: none; }
.hf-event-card img,
.hf-note img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  object-position: center 38%;
  background: var(--forest);
}
.hf-event-card > a > div,
.hf-note > div { padding: 1.5rem; }
.hf-event-card p:first-child,
.hf-note time {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .75rem;
}
.hf-event-card p:first-child span {
  padding: .25rem .75rem;
  border-radius: var(--r-pill);
  background: var(--amber-pale);
  color: var(--amber-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.hf-event-card time,
.hf-note time { color: var(--muted); font-size: var(--fs-xs); }
.hf-event-card h3,
.hf-note h3 {
  margin: 0 0 .5rem;
  color: var(--forest);
  font-size: var(--fs-lg);
  line-height: 1.35;
}
.hf-event-card p:last-child,
.hf-note p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.hf-note--lead { grid-column: span 2; }
.hf-note--lead img { aspect-ratio: 16 / 9; }
.hf-note--lead h3 { font-size: var(--fs-2xl); }
/* The lead card is twice as wide, so its 16:9 photograph is taller than the
   3:2 one beside it. Grid stretches the shorter card to match, which used to
   leave a band of empty white under its text. Letting the photograph take the
   slack fills that band with the picture instead. */
.hf-featured-notes .hf-note { display: flex; flex-direction: column; }
.hf-featured-notes .hf-note > img { flex: 1 1 auto; min-height: 11rem; }
.hf-featured-notes .hf-note > div { flex: 0 0 auto; }

/* ── Get involved band ──────────────────────────────────────────────────── */

.hf-involved-cta,
.hf-cta {
  position: relative;
  padding-block: clamp(3.25rem, 5vw, 4.75rem);
  background: var(--forest-deep);
  overflow: hidden;
  color: var(--cream);
  text-align: center;
}
/* The band's photograph is a direct child of the section, so position it here. */
.hf-involved-cta > img,
.hf-involved-cta-shade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .2;
}
.hf-involved-cta-shade { position: absolute; inset: 0; }
.hf-involved-cta-content { position: relative; max-width: 44rem; margin-inline: auto; }
.hf-involved-cta h2,
.hf-cta h2 { color: var(--white); font-size: var(--fs-5xl); }
.hf-involved-cta h2 em,
.hf-cta h2 em { color: var(--amber); font-style: normal; }
.hf-involved-cta .hf-lede,
.hf-cta .hf-lede { margin-inline: auto; color: var(--sage); text-align: center; }
.hf-involved-cta .hf-actions,
.hf-cta .hf-actions { justify-content: center; }
.hf-involved-contact { margin-top: 1.75rem; color: var(--sage-dim); font-size: var(--fs-sm); }
.hf-involved-contact a { color: inherit; text-decoration: none; }
.hf-involved-contact a:hover { color: var(--white); }

.hf-cta .hf-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.hf-cta .hf-kicker { color: var(--sage); }

/* ── Inner page hero ────────────────────────────────────────────────────── */

.hf-page-hero { padding-block: clamp(2rem, 3vw, 3rem) 0; }
.hf-page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.hf-page-hero h1 { margin-bottom: 1rem; color: var(--forest); }
.hf-page-hero-grid > :only-child { grid-column: 1 / -1; max-width: 54rem; }
.hf-page-hero-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--forest);
  box-shadow: var(--shadow-lg);
}
.hf-page-hero-photo img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hf-page-hero-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(to top, rgb(15 36 25 / .88), rgb(15 36 25 / 0));
  color: rgb(255 255 255 / .92);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.hf-page-aside {
  justify-self: start;
  padding: 1.5rem 1.75rem;
  border-radius: var(--r-card);
  background: var(--cream-dark);
}
.hf-page-aside strong {
  display: block;
  color: var(--amber);
  font-family: var(--display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
}
.hf-page-aside span {
  display: block;
  margin-top: .5rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ── Editorial blocks, restyled to the card language ────────────────────── */

.hf-manifesto,
.hf-timeline-layout,
.hf-story-intro,
.hf-proof-context,
.hf-covid-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.hf-vision-grid,
.hf-purpose,
.hf-participation,
.hf-expectations,
.hf-role-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.hf-vision-grid article,
.hf-participation article,
.hf-expectations article,
.hf-role-list article {
  padding: 1.75rem;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.hf-section--mist .hf-vision-grid article,
.hf-section--mist .hf-participation article { background: var(--white); }
.hf-vision-grid article > span,
.hf-participation article > span,
.hf-role-list article > span {
  display: block;
  margin-bottom: .75rem;
  color: var(--amber);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
}
/* Headings inside a card are card-scale, not page-scale. */
.hf-vision-grid h2,
.hf-participation h2,
.hf-expectations h2,
.hf-role-list h2,
.hf-purpose h2 { font-size: var(--fs-2xl); line-height: 1.25; }
.hf-vision-grid p,
.hf-participation p,
.hf-expectations p,
.hf-role-list p {
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* Programme chapters — the giant ghost numerals are removed */
.hf-chapters { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.hf-chapter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.hf-chapter--reverse .hf-photo { order: 2; }
.hf-chapter-number { display: none; }
.hf-chapter h2 { font-size: var(--fs-4xl); color: var(--forest); }
.hf-chapter p { color: var(--body-copy); font-size: var(--fs-base); }

/* Ledger / timeline → cards */
.hf-evidence-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(2rem, 4vw, 3rem);
}
.hf-ledger-list { display: grid; gap: .75rem; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.hf-ledger-list article,
.hf-timeline li {
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.hf-ledger-list time,
.hf-timeline time {
  color: var(--amber-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hf-ledger-list h3,
.hf-timeline h3 { margin: .5rem 0 .25rem; font-size: var(--fs-base); color: var(--forest); }
.hf-ledger-list p,
.hf-timeline p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

.hf-timeline { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }

/* Anchor nav → pill row */
.hf-anchor-nav { border-block: 1px solid var(--line); background: var(--cream); }
.hf-anchor-nav .hf-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-block: .85rem;
}
.hf-anchor-nav a {
  padding: .5rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--cream-dark);
  color: var(--forest);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.hf-anchor-nav a:hover { background: var(--amber-pale); color: var(--amber-ink); }

/* Leader block */
.hf-leader {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.hf-leader figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--forest-deep);
  box-shadow: var(--shadow-lg);
}
.hf-leader img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
}
.hf-leader figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 3rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgb(15 36 25 / .9), rgb(15 36 25 / 0));
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Gallery: equal photo canvases and captions preserve a calm reading order. */
.hf-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.hf-gallery figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-card); background: var(--white); border: 1px solid var(--line); }
.hf-gallery img { display: block; aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: contain; background: #eae5da; }
.hf-gallery figcaption { padding: 1rem 1.1rem; color: var(--forest); font-size: var(--fs-sm); font-weight: 600; }
.hf-gallery-category { display: block; margin-bottom: .4rem; color: var(--amber-ink); font-size: var(--fs-xs); }
.hf-gallery figcaption strong { display: block; font-weight: 500; }
.hf-gallery figure[hidden], .hf-gallery-controls[hidden] { display: none; }
.hf-gallery-select { display: none; }
.hf-gallery-select select { width: 100%; min-height: 48px; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--forest); font-size: var(--fs-base); cursor: pointer; }
.hf-gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.hf-gallery-filters button { min-height: 44px; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--forest); cursor: pointer; }
.hf-gallery-filters button:hover { border-color: var(--forest); }
.hf-gallery-filters button[aria-pressed='true'] { background: var(--forest); border-color: var(--forest); color: var(--white); }
.hf-gallery-status { margin: 1.25rem 0; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 860px) {
  .hf-gallery-filters { display: none; }
  .hf-gallery-select { display: block; }
  .hf-gallery-status { margin-block: .75rem; }
}
.hf-gallery-note { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); padding: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(2rem, 5vw, 4rem); background: var(--cream-dark); border-radius: var(--r-card); border: 1px solid var(--line); }
.hf-gallery-note > .hf-icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; color: var(--forest); }
.hf-gallery-note > div { flex: 1; }
.hf-gallery-note h2 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); color: var(--forest); }
.hf-gallery-note p { margin: .65rem 0 0; max-width: 58ch; color: var(--muted); }
.hf-gallery-note .hf-button { flex-shrink: 0; }
@media (max-width: 1120px) { .hf-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .hf-gallery-note { flex-wrap: wrap; gap: 1rem; }
  .hf-gallery-note > div { flex-basis: calc(100% - 4rem); }
  .hf-gallery-note .hf-button { width: 100%; }
}

/* Volunteer process */
/* The block is a wrapper div holding a heading and an <ol>; the list rules
   have to reach that <ol>, or the browser's own markers render beside the
   styled counters and every step shows its number twice. */
.hf-volunteer-process { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.hf-volunteer-process ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  counter-reset: steps;
  list-style: none;
}
.hf-volunteer-process ol li::marker { content: ''; }
.hf-volunteer-process ol li {
  position: relative;
  counter-increment: steps;
  padding: 1.5rem;
  border-radius: var(--r-card);
  background: rgb(255 255 255 / .06);
  border: 1px solid var(--line-dark);
  color: var(--cream);
  font-size: var(--fs-sm);
}
.hf-volunteer-process ol li::before {
  display: block;
  margin-bottom: .6rem;
  color: var(--amber-light);
  content: '0' counter(steps);
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.hf-safety-note { margin-top: 1.5rem; color: var(--sage-dim); font-size: var(--fs-sm); }

/* Contact */
.hf-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(2rem, 4vw, 3rem);
}
.hf-contact-panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.hf-contact-link {
  display: block;
  margin-bottom: .5rem;
  color: var(--forest);
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.hf-contact-link--email { font-size: var(--fs-lg); }
/* These are contact cards, not a button row — stack them so a phone number or
   address can never push the page wider than the viewport. */
.hf-contact-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.hf-contact-actions article {
  min-width: 0;
  padding: 1.5rem;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.hf-contact-actions article p:last-child {
  margin-top: .5rem;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.hf-contact-actions address {
  margin-bottom: .75rem;
  color: var(--forest);
  font-size: var(--fs-base);
  font-style: normal;
  line-height: 1.6;
}

/* ── Archive app ────────────────────────────────────────────────────────── */

.hf-archive-heading { margin-bottom: 2rem; }
/* The card is the row of figures, not the section. Styling the <section>
   painted the band edge to edge and left the five figures as a single grid
   item, so they stacked into one tall column instead of sitting in a row. */
/* The hero ends flush with the section under it, so the cream count card and
   the dark figures card met with no gap at all and read as one broken block.
   Separate them, and once the hero has collapsed to a single column let the
   count card fill the width so the two cards share an edge. */
.hf-archive-summary { margin-block: clamp(1.5rem, 3vw, 2.5rem) 2rem; }
.hf-archive-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--r-card);
  background: var(--forest);
  color: var(--cream);
}
.hf-archive-figures > div { text-align: center; }
.hf-archive-figures strong {
  display: block;
  color: var(--amber);
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 600;
}
.hf-archive-figures span { color: var(--sage); font-size: var(--fs-xs); }

.hf-archive-controls {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hf-archive-controls label {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hf-archive-controls input,
.hf-archive-controls select {
  min-height: 48px;
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--charcoal);
  font-family: inherit;
  font-size: var(--fs-sm);
  text-transform: none;
}
.hf-archive-status { min-height: 1.5rem; margin-bottom: 1rem; color: var(--muted); font-size: var(--fs-sm); }
.hf-archive-error { color: var(--amber-ink); font-size: var(--fs-sm); }
.hf-archive-method { margin-top: 2rem; color: var(--muted); font-size: var(--fs-sm); }

.hf-record-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hf-record {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
/* The photograph leads, the text sits under it. A fixed 8:5 frame keeps every
   card the same shape whatever the source photograph's proportions are. */
.hf-record-thumb {
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--cream-dark);
}
.hf-record-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.hf-record:hover .hf-record-thumb img { transform: scale(1.04); }
.hf-record-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem 1.4rem 1.35rem;
}
.hf-record time,
.hf-record-category { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.hf-record-category { color: var(--amber-ink); }
.hf-record h3 { margin: .25rem 0; font-size: var(--fs-base); color: var(--forest); }
/* Excerpts run from one line to a full paragraph. Clamping evens the cards out
   so a short one no longer leaves a block of blank white below its text. */
.hf-record p {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.hf-record h3 {
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.hf-record-body > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  color: var(--amber-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-underline-offset: .3em;
}

.hf-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.hf-pagination span { color: var(--muted); font-size: var(--fs-sm); }
.hf-pagination button {
  min-height: 44px;
  padding: .6rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--forest);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.hf-pagination button:hover:not(:disabled) {
  border-color: var(--amber);
  background: var(--amber-pale);
  color: var(--amber-ink);
}
.hf-pagination button:disabled { opacity: .45; cursor: default; }

.hf-media-controls {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hf-media-controls label {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hf-media-controls input,
.hf-media-controls select {
  min-height: 48px;
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--charcoal);
  font-size: var(--fs-sm);
  text-transform: none;
}
.hf-media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
}
.hf-media-library-grid figure { margin: 0; overflow: hidden; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow-sm); }
.hf-media-library-grid img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.hf-media-library-grid figcaption { padding: .75rem; color: var(--muted); font-size: var(--fs-xs); }

/* ── Story detail pages ─────────────────────────────────────────────────── */

.hf-story-main { background: var(--cream); }
.hf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-block: 1.25rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.hf-breadcrumb a { color: inherit; }

.hf-story-hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
/* Most archive stories are two or three sentences beside a portrait-ish
   photograph, so a top-aligned text column left a tall block of empty page
   under it. Centring the text against the photograph splits that space above
   and below, where it reads as margin instead of a gap. */
.hf-story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.hf-story-copy h1 {
  max-width: 26ch;
  margin: .5rem 0 1rem;
  color: var(--forest);
  font-size: var(--fs-4xl);
  line-height: 1.15;
}
.hf-story-date { color: var(--amber-ink); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; }
.hf-story-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--forest);
  box-shadow: var(--shadow-lg);
}
/* A record's evidence photograph is shown whole — never cropped. */
.hf-story-media img { width: 100%; height: auto; object-fit: contain; }
.hf-story-media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(to top, rgb(15 36 25 / .88), rgb(15 36 25 / 0));
  color: rgb(255 255 255 / .92);
  font-size: var(--fs-xs);
}
.hf-story-body { max-width: 42rem; font-size: var(--fs-base); line-height: 1.75; }
.hf-story-body p { margin-bottom: 1.15rem; color: var(--body-copy); }
/* Posts written in WordPress keep their own photos, videos and lists. */
.hf-story-rich img, .hf-story-rich video { max-width: 100%; height: auto; border-radius: 6px; }
.hf-story-rich iframe { max-width: 100%; border: 0; }
.hf-story-rich .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.hf-story-rich .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.hf-story-rich figure { margin: 0 0 1.25rem; }
.hf-story-rich ul, .hf-story-rich ol { margin: 0 0 1.15rem 1.25rem; color: var(--body-copy); }
.hf-story-rich h2, .hf-story-rich h3 { margin: 1.5rem 0 .75rem; }
.hf-story-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hf-story-related { padding-block: var(--section-tight); }
/* The grid sat flush against its own heading, which reads as a collision.
   Match the breathing room .hf-section-heading gives every other section. */
.hf-story-related .hf-related-grid { margin-top: clamp(1.75rem, 2.8vw, 2.75rem); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.hf-footer { padding-block: clamp(3rem, 5vw, 4rem) 2rem; background: var(--forest-deep); color: var(--sage-dim); }
.hf-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--forest);
}
.hf-footer-intro img { width: auto; height: 88px; margin-bottom: 1rem; }
.hf-footer-intro p { max-width: 24rem; font-size: var(--fs-sm); line-height: 1.7; }
.hf-footer-social { display: flex; gap: 1rem; margin-top: 1.25rem; }
.hf-footer-social a { color: var(--amber-light); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.hf-footer h2 {
  margin-bottom: 1rem;
  color: var(--white);
  font-family: var(--body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hf-footer nav { display: flex; flex-direction: column; gap: .55rem; }
.hf-footer nav a,
.hf-footer address a {
  color: var(--sage-dim);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color .18s ease;
}
.hf-footer nav a:hover,
.hf-footer address a:hover { color: var(--white); }
.hf-footer address { display: flex; flex-direction: column; gap: .55rem; font-size: var(--fs-sm); font-style: normal; line-height: 1.7; }
.hf-footer address a, .hf-utility a, .hf-involved-contact a, .hf-contact-link { overflow-wrap: break-word; }
.hf-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  color: var(--sage-dim);
  font-size: var(--fs-xs);
}
.hf-footer-bottom a { color: inherit; }

/* ══ Responsive ══════════════════════════════════════════════════════════ */

@media (max-width: 1120px) {
  .hf-desktop-nav { display: none; }
  .hf-menu-button { display: block; }
  .hf-header-actions { margin-left: auto; }
  .hf-program-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hf-program-grid > :nth-child(4) { grid-column: span 2; }
  .hf-program-grid > :nth-child(5) { grid-column: span 2; }
  .hf-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hf-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-event-grid,
  .hf-featured-notes,
  .hf-related-grid { grid-template-columns: minmax(0, 1fr); }
  .hf-note--lead { grid-column: auto; }
  .hf-about-story-grid,
  .hf-manifesto,
  .hf-timeline-layout,
  .hf-story-intro,
  .hf-proof-context,
  .hf-covid-story,
  .hf-evidence-ledger,
  .hf-chapter,
  .hf-leader,
  .hf-contact-grid,
  .hf-page-hero-grid,
  .hf-story-layout { grid-template-columns: minmax(0, 1fr); }
  .hf-page-aside { justify-self: stretch; }
  /* On a single column the photograph should lead the story, as it does on the
     card that linked here — a headline, then a wall of text, then finally the
     photograph puts the picture in the wrong place. Centring is a two-column
     idea, so it is dropped here too. */
  .hf-story-layout { align-items: start; }
  .hf-story-layout .hf-story-media { order: -1; margin-bottom: 1.75rem; }
  .hf-chapter--reverse .hf-photo { order: 0; }
  .hf-about-story-photo figcaption { left: 1rem; bottom: 1rem; }
  .hf-archive-controls,
  .hf-media-controls { grid-template-columns: minmax(0, 1fr); }
  .hf-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-utility { display: none; }
}

@media (max-width: 620px) {
  .hf-header-actions > .hf-button { display: none; }
}

@media (max-width: 560px) {
  .hf-program-grid,
  .hf-purpose-cards,
  .hf-gallery { grid-template-columns: minmax(0, 1fr); }
  .hf-program-grid > *,
  .hf-program-grid > :nth-child(4),
  .hf-program-grid > :nth-child(5) { grid-column: auto; }
  .hf-gallery-wide,
  .hf-gallery-tall { grid-column: auto; grid-row: auto; }
  .hf-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .hf-brand img { height: 60px; }
  .hf-actions .hf-button { width: 100%; }
}


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

/* Primary action inside the mobile menu, mirroring the reference nav. */
.hf-mobile-nav .hf-mobile-cta {
  margin-top: 1rem;
  border-bottom: 0;
  color: var(--white);
  text-align: center;
}

/* Related field records — the markup is <a><time/><strong/></a>, so give the
   anchor a card shell and put the date on its own line above the title. */
.hf-related-grid a {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.hf-related-grid img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  object-position: center 38%;
  background: var(--cream-dark);
  transition: transform .35s ease;
}
.hf-related-grid a:hover img { transform: scale(1.04); }
.hf-related-copy {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.15rem 1.35rem 1.35rem;
}
.hf-related-grid a:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.hf-related-grid time {
  color: var(--amber-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hf-related-grid strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--forest);
  font-family: var(--display);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* ── Telugu typography ──────────────────────────────────────────────────────
   Two corrections applied only when the page is in Telugu:

   1. Latin letter-spacing must not be applied to an Indic script. Tracking
      pulls apart conjunct clusters (ప్ర, స్వ) and makes them read as separate
      glyphs, so every tracked element resets to normal spacing. `uppercase`
      is meaningless for a script without case, so it goes too.

   2. Telugu glyphs carry more vertical mass than Latin at the same pixel
      size, so display type set at the Latin size reads noticeably larger.
      The display steps are reduced ~10% to match optically. Body steps are
      left alone — small Indic text needs the size to stay legible.
   ────────────────────────────────────────────────────────────────────────── */

html[lang='te'] {
  --fs-7xl: clamp(2.25rem, 5.4vw, 4rem);      /* 36 → 64 */
  --fs-6xl: clamp(2rem, 4.5vw, 3.25rem);      /* 32 → 52 */
  --fs-5xl: clamp(1.75rem, 3.6vw, 2.625rem);  /* 28 → 42 */
  --fs-4xl: clamp(1.5rem, 2.7vw, 2rem);       /* 24 → 32 */
}

html[lang='te'] .hf-kicker,
html[lang='te'] .hf-reference-pill,
html[lang='te'] .hf-program-link,
html[lang='te'] .hf-record-category,
html[lang='te'] .hf-archive-controls label,
html[lang='te'] .hf-media-controls label,
html[lang='te'] .hf-ledger-list time,
html[lang='te'] .hf-timeline time,
html[lang='te'] .hf-related-grid time,
html[lang='te'] .hf-story-date,
html[lang='te'] .hf-vision-grid article > span,
html[lang='te'] .hf-participation article > span,
html[lang='te'] .hf-role-list article > span,
html[lang='te'] .hf-footer h2 {
  letter-spacing: normal;
  text-transform: none;
}

/* Telugu headlines need a little more leading than the tight Latin setting. */
html[lang='te'] h1,
html[lang='te'] h2,
html[lang='te'] h3 { line-height: 1.28; }

/* ── Pointer target comfort ─────────────────────────────────────────────────
   WCAG 2.5.8 asks for 24x24 CSS px. These link groups sit in generous
   whitespace so they'd pass on the spacing exception, but giving them a real
   24px box makes them comfortable to hit — especially on touch — without
   changing how anything looks. The desktop nav's active underline is offset
   to match its new box.
   ────────────────────────────────────────────────────────────────────────── */

.hf-utility a,
.hf-breadcrumb a,
.hf-footer nav a,
.hf-footer address a,
.hf-footer-social a,
.hf-footer-bottom a,
.hf-involved-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.hf-desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.hf-desktop-nav a[aria-current='page']::after { bottom: .35rem; }

/* ── COVID mosaic ───────────────────────────────────────────────────────────
   This block was never given a layout, so its four photographs stacked at
   full column width and left 1,845px of dead space beside a short text
   column. A 2x2 grid of square crops balances the split.
   ────────────────────────────────────────────────────────────────────────── */
.hf-covid-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.hf-covid-mosaic img {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--r-card);
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

/* ── Sticky editorial columns ───────────────────────────────────────────────
   In these two-column splits the left side is a short heading and the right
   side is a long list. Pinning the heading while the list scrolls removes the
   dead space and gives the section a deliberate reading rhythm. The offset
   clears the sticky header. Disabled below the two-column breakpoint, where
   the columns stack.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 861px) {
  .hf-timeline-layout > :first-child,
  .hf-evidence-ledger > :first-child,
  .hf-proof-context > :first-child,
  .hf-covid-story > :first-child,
  .hf-expectations > :first-child,
  .hf-manifesto > :first-child,
  .hf-story-intro > :first-child {
    position: sticky;
    top: 6.75rem;
    /* Centred, not top-aligned: most of these sections are shorter than the
       viewport, so sticky never engages and a top-aligned heading would leave
       the gap it was meant to remove. Centring balances the split at any
       height; sticky still takes over the moment a section outgrows the
       screen. */
    align-self: center;
  }
}

/* ── Timeline rail ──────────────────────────────────────────────────────────
   A connector and node per entry so the milestones read as one sequence
   rather than four detached cards.
   ────────────────────────────────────────────────────────────────────────── */
.hf-timeline { position: relative; padding-left: 1.9rem; }
.hf-timeline::before {
  position: absolute;
  top: 1.6rem;
  bottom: 1.6rem;
  left: .4rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--amber), rgb(224 123 42 / .12));
  content: '';
}
.hf-timeline li { position: relative; }
.hf-timeline li::before {
  position: absolute;
  top: 1.6rem;
  left: -1.72rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px var(--cream);
  content: '';
}
.hf-section--mist .hf-timeline li::before { box-shadow: 0 0 0 4px var(--cream-dark); }

/* Programme cards lift on hover, matching the reference's card interaction. */
.hf-program-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.hf-program-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .hf-reveal { opacity: 1; transform: none; transition: none; }
  .hf-program-card:hover { transform: none; }
}

/* ── Proportional section rhythm ────────────────────────────────────────────
   A band holding a two-line statement or a pair of small cards does not need
   the same vertical rhythm as one holding a six-card grid. These sections were
   measured carrying more padding than content (up to 1.4x), which read as
   large empty gaps. `:has()` scopes the tighter rhythm to them by what they
   contain, so it stays correct as content changes; browsers without `:has()`
   simply keep the base rhythm.
   ────────────────────────────────────────────────────────────────────────── */
.hf-section:has(> .hf-manifesto),
.hf-section:has(> .hf-vision-grid),
.hf-section:has(> .hf-story-intro),
.hf-section:has(> .hf-expectations),
.hf-section:has(> .hf-archive-method),
.hf-section:has(> .hf-proof-context) {
  padding-block: var(--section-tight);
}

/* The programme CTA sits directly under a full-bleed section, so it only needs
   breathing room once. */
.hf-cta { padding-block: clamp(2.75rem, 4vw, 4rem); }

/* ── Motion ─────────────────────────────────────────────────────────────────
   Reveal-on-scroll is done with CSS scroll-driven animations rather than an
   IntersectionObserver. The earlier JS version left four elements per page
   stuck at opacity 0 when the observer failed to fire — a class of bug that
   cannot happen here, because progress is a pure function of scroll position
   rather than an event that might be missed.

   Everything sits inside @supports, so a browser without scroll-driven
   animations (Firefox stable at time of writing) simply renders the content
   with no animation at all. Content is never hidden without a mechanism that
   is guaranteed to show it again.

   Only opacity and transform are animated, so the work stays on the
   compositor thread.
   ────────────────────────────────────────────────────────────────────────── */

@keyframes hf-rise {
  from { opacity: 1; transform: translateY(.75rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes hf-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hf-section-heading,
    .hf-impact-heading,
    .hf-programmes-heading,
    .hf-events-heading,
    .hf-archive-heading,
    .hf-program-card,
    .hf-event-card,
    .hf-note,
    .hf-purpose-cards article,
    .hf-timeline li,
    .hf-ledger-list article,
    .hf-vision-grid article,
    .hf-participation article,
    .hf-role-list article,
    .hf-expectations article,
    .hf-volunteer-process li,
    .hf-contact-actions article,
    .hf-covid-mosaic img,
    .hf-about-story-photo,
    .hf-leader figure {
      animation: hf-rise linear both;
      animation-timeline: view();
      /* Complete well before the element is centred, so it is fully settled
         by the time it is being read. */
      animation-range: entry 0% cover 26%;
    }

    /* A quiet reading-progress rail. `body::before` keeps this markup-free,
       so it applies to all 1,055 pages without touching a template. */
    body::before {
      position: fixed;
      z-index: 60;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      transform: scaleX(0);
      transform-origin: 0 50%;
      background: linear-gradient(90deg, var(--amber), var(--amber-light));
      content: '';
      animation: hf-progress linear;
      animation-timeline: scroll(root block);
    }

    /* The hero image drifts slightly as the hero scrolls away, which gives the
       masthead depth without moving any text. */
    .hf-reference-hero-image {
      animation: hf-hero-drift linear;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes hf-hero-drift {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ── Print ──────────────────────────────────────────────────────────────────
   A scroll-driven animation has no timeline when printing, so every animated
   element would otherwise render at its opening keyframe — an entirely blank
   page. Force the settled state and drop decoration.
   ────────────────────────────────────────────────────────────────────────── */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
  }

  body::before { display: none !important; }
  .hf-utility,
  .hf-header,
  .hf-mobile-nav,
  .hf-language,
  .hf-skip { display: none !important; }

  body { background: #fff; color: #000; }
  .hf-section,
  .hf-section--ink,
  .hf-section--deep,
  .hf-section--mist { background: #fff !important; color: #000 !important; }
  .hf-photo figcaption,
  .hf-page-hero-photo figcaption,
  .hf-leader figcaption,
  .hf-story-media figcaption {
    position: static !important;
    padding: .5rem 0 0 !important;
    background: none !important;
    color: #444 !important;
  }
  a { text-decoration: underline; }
  .hf-event-card, .hf-note, .hf-record, .hf-program-card { break-inside: avoid; }
}

/* ── Card alignment ─────────────────────────────────────────────────────────
   Cards in a row hold copy of differing length, so their calls to action were
   landing at different heights and the row read as ragged. Making every card a
   full-height flex column and pushing its actions to the bottom puts every CTA
   on one line, whatever the copy above it does.
   ────────────────────────────────────────────────────────────────────────── */
.hf-participation article,
.hf-role-list article,
.hf-vision-grid article,
.hf-expectations article,
.hf-purpose-cards article,
.hf-contact-actions article,
.hf-ledger-list article,
.hf-timeline li {
  display: flex;
  height: 100%;
  flex-direction: column;
}

/* The trailing action of a card is pinned to its foot. */
.hf-participation article > .hf-button,
.hf-participation article > .hf-actions,
.hf-role-list article > .hf-button,
.hf-contact-actions article > .hf-text-link,
.hf-vision-grid article > .hf-button {
  margin-top: auto;
}

/* A card whose actions are a button plus a text link: keep them on one row,
   let them wrap cleanly, and give the pair its own space. */
.hf-participation article .hf-actions {
  align-items: center;
  gap: .75rem 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
}

/* Card grids stretch their items so the flex columns have a height to fill. */
.hf-participation,
.hf-role-list,
.hf-vision-grid,
.hf-expectations,
.hf-purpose-cards,
.hf-ledger-list { align-items: stretch; }

/* ── Reading measure ────────────────────────────────────────────────────────
   Prose was running to 160-206 characters per line in a few places, roughly
   double a comfortable measure. Capping these at ~68ch keeps every block of
   copy readable; `text-wrap: pretty` stops a paragraph ending on a lone word.
   ────────────────────────────────────────────────────────────────────────── */
.hf-impact-heading p,
.hf-archive-method,
.hf-story-body p,
.hf-section-heading p,
.hf-events-heading p,
.hf-impact-source { max-width: 68ch; }

.hf-impact-heading p,
.hf-impact-source,
.hf-events-heading p { margin-inline: auto; }

p, .hf-lede, li { text-wrap: pretty; }

/* When the two-column splits collapse at tablet widths their prose runs the
   full container — measured at 98ch on iPad Pro portrait. Cap it so the
   reading measure holds at every width, not just on desktop. */
.hf-about-story-copy p,
.hf-manifesto p,
.hf-covid-story p,
.hf-proof-context p,
.hf-story-intro p,
.hf-timeline-layout p,
.hf-evidence-ledger p,
.hf-contact-panel p,
.hf-leader p,
.hf-decade-strip figcaption,
.hf-safety-note { max-width: 68ch; }

/* ── Founder's message ──────────────────────────────────────────────────────
   His own words, quoted from the foundation's magazine, set against the dark
   band so it separates the "who we are" and "what we do" halves of the page.
   ────────────────────────────────────────────────────────────────────────── */
.hf-founder-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}
.hf-founder-photo {
  margin: 0;
  width: 184px;
  flex: 0 0 184px;
  overflow: hidden;
  border-radius: var(--r-sm);
}
.hf-founder-photo img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hf-founder-heading h2 { max-width: 24ch; font-size: var(--fs-4xl); }
.hf-founder-person { display: flex; align-items: center; gap: 1.25rem; margin-block: 1.5rem 0; }
.hf-founder-person > .hf-founder-name { margin: 0; min-width: 0; }
.hf-founder-person .hf-founder-photo { animation: none; box-shadow: none; background: transparent; border-radius: var(--r-sm); }
.hf-founder-quote {
  max-width: 60ch;
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--amber);
  color: var(--cream);
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-style: normal;
  line-height: 1.6;
}
.hf-founder-copy > p { max-width: 60ch; color: var(--sage); }
.hf-founder-name { margin-top: 1.5rem; }
.hf-founder-name strong {
  display: block;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.hf-founder-name span { color: var(--sage-dim); font-size: var(--fs-sm); }

@media (max-width: 860px) {
  .hf-founder-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hf-founder-grid { gap: 1.5rem; }
  .hf-founder-photo { width: clamp(112px, 38vw, 160px); flex-basis: clamp(112px, 38vw, 160px); }
  .hf-founder-person { gap: 1rem; }
}
html[lang='en'] .hf-about-ending { white-space: nowrap; }
.hf-leader { display: block; max-width: 64rem; }
.hf-leader .hf-founder-person { margin-bottom: 1.5rem; }

/* ── A decade in evidence ───────────────────────────────────────────────────
   Four dated photographs lead the section, one per phase of the decade, with
   the milestones reading beneath them.
   ────────────────────────────────────────────────────────────────────────── */
.hf-decade-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.hf-decade-shot img { aspect-ratio: 4 / 3; }
.hf-decade-shot figcaption { font-size: var(--fs-xs); }

@media (max-width: 860px) {
  .hf-decade-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

/* The leadership portrait filled the screen on a phone; cap it so the copy
   beside it stays part of the same view. */
@media (max-width: 860px) {
  .hf-leader figure { max-width: 15rem; }
}

/* ── Record navigation ──────────────────────────────────────────────────────
   A bare "Back to archive" link left a reader with one way out of 1,042
   records. Each record now offers its chronological neighbours either side of
   a real control back to the index.
   ────────────────────────────────────────────────────────────────────────── */
/* Story navigation.

   This used to sit inside the article's text column, where three items shared
   about 400px: the neighbour titles clipped mid-word and, on the newest and
   oldest stories, the empty slot left the row visibly lopsided. It now spans
   the full content width below the article, so each neighbour gets half the
   page and the way back to the archive sits between them. */
.hf-story-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: .75rem clamp(.75rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.hf-story-step {
  display: flex;
  min-height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--forest);
  border-radius: var(--r-card);
  background: var(--forest);
  color: var(--white);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hf-story-step:hover {
  background: var(--forest-mid);
  border-color: var(--amber-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.hf-story-step:focus-visible { outline: 3px solid var(--amber-light); outline-offset: 3px; }
/* On the newest and oldest stories one neighbour does not exist. The slot
   stays in the grid so the row keeps its shape, but shows nothing. */
.hf-story-step.is-empty { border: none; background: none; box-shadow: none; }
.hf-story-step span {
  color: var(--amber-light);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hf-story-step strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.hf-story-step--prev span::before { content: '← '; }
.hf-story-step--next { text-align: left; }
.hf-story-step--next span::after { content: ' →'; }

/* The way back to the archive spans both columns underneath, so it reads as
   the shared destination rather than a third neighbour. */
.hf-story-index {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: .35rem;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .hf-story-nav { grid-template-columns: minmax(0, 1fr); }
  .hf-story-step--next { text-align: left; }
  .hf-story-step.is-empty { display: none; }
  .hf-story-index { justify-self: stretch; text-align: center; }
}

/* ── Clickable cards ────────────────────────────────────────────────────────
   A card that shows a headline, a summary and a link should open from
   anywhere on it, not only from the link. The link keeps the accessible name
   and stays the single tab stop; its ::after simply extends the hit area over
   the whole card. Text inside stays selectable because the overlay sits
   behind the content.
   ────────────────────────────────────────────────────────────────────────── */
.hf-record,
.hf-note,
.hf-media-library-grid figure { position: relative; }

.hf-record-body > a::after,
.hf-note .hf-text-link::after,
.hf-media-library-grid figcaption > a::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
}

/* The whole card responds, so it should look responsive. */
.hf-record { transition: box-shadow .2s ease, transform .2s ease; }
.hf-record:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.hf-record:has(.hf-record-body > a:focus-visible),
.hf-note:has(.hf-text-link:focus-visible) { outline: 2px solid var(--amber); outline-offset: 3px; }
.hf-record-body > a:focus-visible,
.hf-note .hf-text-link:focus-visible { outline: none; }

/* The overlay must sit above the card's content, or clicking the headline —
   the most likely target — does nothing. */

/* ── Social accounts ────────────────────────────────────────────────────────
   Verified live: the previous site linked the Facebook page from all 1,060 of
   its pages, and the foundation's own magazine lists the same handle for
   Instagram.
   ────────────────────────────────────────────────────────────────────────── */
.hf-social {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.hf-social a {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: 50%;
  color: var(--sage);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.hf-social a:hover {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--white);
}

/* The chairman's account is personal, not a foundation channel, so it is set
   slightly apart from the two organisation links. */
.hf-social-person { margin-left: .35rem; opacity: .82; }
/* Labelled pill so it doesn't read as a second copy of the foundation's
   Instagram icon. */
.hf-social a.hf-social-person {
  width: auto;
  gap: .45rem;
  padding: 0 .9rem 0 .75rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
}
.hf-social-person:hover { opacity: 1; }

/* ── Prose lists ────────────────────────────────────────────────────────────
   A bare <ul> keeps the browser's ~40px inline padding, so its items sat well
   to the right of the heading they belong to while every other block in the
   column stayed flush. The list box is flush here and the marker is drawn at
   the column edge, so the heading, its paragraphs and the bullets share one
   line, and wrapped text stays under the text above it rather than under the
   marker.
   ────────────────────────────────────────────────────────────────────────── */
.hf-prose-list {
  display: grid;
  gap: .6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.hf-prose-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.hf-prose-list li::before {
  position: absolute;
  top: .62em;
  left: .1rem;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--amber);
  content: '';
}

/* ── Ledger cards as links ──────────────────────────────────────────────────
   Each ledger entry now opens the archive story behind it. The anchor fills
   the card so the whole tile is the target, and the headline keeps the card's
   own colour rather than inheriting link styling — the hover state carries the
   affordance instead.
   ────────────────────────────────────────────────────────────────────────── */
.hf-ledger-list article { position: relative; transition: box-shadow .2s ease, transform .2s ease; }
.hf-ledger-list article > a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.hf-ledger-list article > a::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
}
.hf-ledger-list article:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.hf-ledger-list article:hover h3 { text-decoration: underline; text-underline-offset: .18em; }
.hf-ledger-list article:focus-within {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* Client refinement: a clear, photographic programme introduction and one
   consistent family of line icons. All motion is progressive enhancement. */
.hf-icon { display: block; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; }
.hf-program-icon .hf-icon { width: 1.75rem; height: 1.75rem; }
.hf-program-card .hf-program-icon { color: var(--white); }
.hf-contact-detail { gap: .75rem; }
.hf-footer address .hf-contact-detail { align-items: flex-start; padding-block: .35rem; }
.hf-contact-detail .hf-icon { width: 1.125rem; height: 1.125rem; margin-top: .25rem; color: var(--amber-light); }
.hf-contact-detail span { min-width: 0; overflow-wrap: anywhere; }
.hf-footer { color: var(--sage); }
.hf-footer nav a, .hf-footer address a { color: var(--sage); font-size: var(--fs-base); }
.hf-footer-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.4fr); }
.hf-desktop-nav a::before {
  position: absolute; inset: auto 0 .35rem; height: 2px;
  background: var(--amber-light); content: ''; transform: scaleX(0);
  transform-origin: left; transition: transform .25s ease;
}
.hf-desktop-nav a:hover::before, .hf-desktop-nav a:focus-visible::before { transform: scaleX(1); }
.hf-care-hero { padding-block: var(--section-tight) 2rem; }
.hf-care-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 2rem; }
.hf-care-heading h1 { margin-bottom: 0; color: var(--forest); font-size: var(--fs-6xl); }
.hf-care-heading .hf-lede { max-width: 32rem; margin: 0 0 0 auto; }
.hf-care-heading .hf-kicker { color: var(--amber-ink); }
.hf-care-collage {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, clamp(6rem, 10vw, 9rem)); gap: .75rem;
}
.hf-care-photo { min-width: 0; overflow: hidden; border-radius: var(--r-sm); background: var(--cream-dark); }
.hf-care-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.hf-care-photo--1 { grid-column: 1; grid-row: 1; }
.hf-care-photo--2 { grid-column: 2; grid-row: 1; }
.hf-care-photo--3 { grid-column: 3; grid-row: 1; }
.hf-care-photo--4 { grid-column: 4; grid-row: 1; }
.hf-care-photo--5 { grid-column: 1; grid-row: 2; }
.hf-care-photo--6 { grid-column: 4; grid-row: 2; }
.hf-care-photo--7 { grid-column: 1 / span 2; grid-row: 3; }
.hf-care-photo--8 { grid-column: 3 / span 2; grid-row: 3; }
.hf-care-message {
  grid-column: 2 / span 2; grid-row: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 1rem;
  border-radius: var(--r-sm); background: var(--cream-dark); color: var(--forest); text-align: center;
}
.hf-care-hash { font-size: var(--fs-7xl); font-weight: 600; letter-spacing: -.055em; line-height: 1.1; }
.hf-care-message p { margin: .5rem 0 0; font-size: var(--fs-sm); }
.hf-program-nav .hf-wrap { gap: .5rem; padding-block: 1rem; }
.hf-program-nav a {
  display: flex; align-items: center; justify-content: center; flex: 1 1 11rem;
  gap: .5rem; min-height: 3.5rem; padding: .75rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: transparent; font-size: var(--fs-base);
  line-height: 1.4; transition: background .2s ease, border-color .2s ease;
}
.hf-program-nav a:hover, .hf-program-nav a:focus-visible { border-color: var(--amber-ink); }
.hf-program-nav a[aria-current='location'] { background: var(--amber-pale); border-color: var(--amber-ink); }
.hf-program-nav .hf-icon { width: 1.25rem; height: 1.25rem; color: var(--amber-ink); }
.hf-chapter { position: relative; scroll-margin-top: 9rem; }
.hf-chapter + .hf-chapter { padding-top: 2rem; border-top: 1px solid var(--line); }
.hf-chapter-label { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; color: var(--muted); font-size: var(--fs-sm); }
.hf-chapter-label .hf-program-icon { margin: 0; color: var(--forest); background: var(--cream-dark); }
.hf-chapter-copy h2 { margin-bottom: 1rem; }
.hf-chapter-copy > p { max-width: 35rem; font-size: var(--fs-lg); line-height: 1.75; }
.hf-fragment-alias { position: absolute; top: 0; scroll-margin-top: 9rem; }
.hf-contact-grid--simple { display: block; }
.hf-contact-grid--simple .hf-contact-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.hf-contact-grid--simple article { padding: 2rem; border: 1px solid var(--line); box-shadow: none; }
.hf-contact-icon { width: 3rem; height: 3rem; padding: .65rem; border-radius: var(--r-sm); background: var(--amber-pale); color: var(--amber-ink); margin-bottom: 1.5rem; }
.hf-contact-actions .hf-kicker { font-family: var(--body); font-size: var(--fs-base); color: var(--forest); letter-spacing: .04em; }
.hf-contact-grid--simple .hf-contact-link { font-family: var(--body); font-size: var(--fs-xl); line-height: 1.65; }
.hf-contact-grid--simple .hf-contact-link--email { font-size: var(--fs-base); }
.hf-contact-grid--simple article p:last-child { font-size: var(--fs-base); }
.hf-contact-actions article, .hf-program-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hf-contact-actions article:focus-within { border-color: var(--amber-ink); }

/* Desktop header: the "Contact us" button stays in both languages. On narrower
   desktops the menu tightens (smaller text, then no icons) instead of hiding it. */
@media (min-width: 1121px) and (max-width: 1365px) {
  .hf-desktop-nav { gap: 1rem; }
  .hf-desktop-nav a { font-size: var(--fs-base); }
  .hf-desktop-nav .hf-icon { display: none; }
}
@media (min-width: 1121px) and (max-width: 1599px) {
  html[lang='te'] .hf-desktop-nav { gap: .9rem; }
  html[lang='te'] .hf-desktop-nav a { font-size: var(--fs-base); }
}
@media (min-width: 1121px) and (max-width: 1365px) {
  html[lang='te'] .hf-desktop-nav { gap: .7rem; }
  html[lang='te'] .hf-desktop-nav a { font-size: var(--fs-sm); }
}
@media (max-width: 1120px) {
  .hf-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-program-nav a { flex-basis: 28%; }
  .hf-contact-grid--simple article { padding: 1.5rem; }
}
@media (max-width: 860px) {
  .hf-care-heading { grid-template-columns: 1fr; gap: 1rem; }
  .hf-care-heading .hf-lede { margin: 0; max-width: 40rem; }
  .hf-contact-grid--simple .hf-contact-actions { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hf-header-row { gap: .5rem; padding-block: .75rem; }
  .hf-header-actions { display: none; }
  .hf-language { margin-left: auto; }
  .hf-care-hero { padding-bottom: 1.5rem; }
  .hf-care-heading { margin-bottom: 1.5rem; }
  .hf-care-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, 6.5rem); gap: .5rem; }
  .hf-care-photo--1 { grid-column: 1; grid-row: 1; }
  .hf-care-photo--2 { grid-column: 2; grid-row: 1; }
  .hf-care-message { grid-column: 1 / span 2; grid-row: 2; }
  .hf-care-photo--3 { grid-column: 1; grid-row: 3; }
  .hf-care-photo--4 { grid-column: 2; grid-row: 3; }
  .hf-care-photo--5 { grid-column: 1; grid-row: 4; }
  .hf-care-photo--6 { grid-column: 2; grid-row: 4; }
  .hf-care-photo--7 { grid-column: 1; grid-row: 5; }
  .hf-care-photo--8 { grid-column: 2; grid-row: 5; }
  .hf-program-nav a { flex-basis: 42%; justify-content: flex-start; font-size: var(--fs-sm); }
  .hf-program-nav a:last-child { flex-basis: 100%; }
  .hf-footer-grid { grid-template-columns: 1fr; }
  .hf-chapter-copy > p { font-size: var(--fs-base); }
  .hf-chapter { scroll-margin-top: 7rem; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hf-care-photo:hover img { transform: scale(1.045); }
  .hf-contact-actions article:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .hf-care-photo img, .hf-contact-actions article, .hf-desktop-nav a::before { transition: none; }
}

.hf-gallery-open { position: absolute; inset: 0; width: 100%; border: 0; padding: 1rem; background: transparent; color: var(--white); cursor: zoom-in; }
.hf-gallery-open svg { position: absolute; top: .75rem; right: .75rem; width: 2.5rem; height: 2.5rem; padding: .5rem; background: var(--forest-deep); border-radius: var(--r-sm); }
.hf-gallery-open:focus-visible { outline: 3px solid var(--amber-light); outline-offset: -4px; }
.hf-lightbox { width: min(100% - 2rem, 70rem); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--forest-mid); border-radius: var(--r-card); background: var(--forest-deep); color: var(--cream); }
.hf-lightbox::backdrop { background: rgb(5 15 10 / .85); backdrop-filter: blur(5px); }
.hf-lightbox-content { position: relative; padding: 1rem; }
.hf-lightbox-image { width: 100%; height: min(72dvh, 48rem); object-fit: contain; }
.hf-lightbox button { display: grid; place-items: center; flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 1px solid var(--sage); border-radius: var(--r-pill); background: var(--forest-deep); color: var(--white); font-size: var(--fs-2xl); cursor: pointer; }
.hf-lightbox-close { position: absolute; top: 1rem; right: 1rem; }
.hf-lightbox-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; text-align: center; }
.hf-lightbox-footer p { margin: 0 0 .25rem; font-size: var(--fs-base); }
.hf-lightbox-footer span { font-size: var(--fs-sm); color: var(--sage); }
.hf-lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hf-lightbox[open] { animation: hf-rise .2s ease-out; }
}

.hf-footer nav a { display: flex; align-items: flex-start; gap: .65rem; }
.hf-latest-grid .hf-event-card > a { display: flex; flex-direction: column; height: 100%; }
.hf-latest-grid .hf-event-card img { aspect-ratio: 3 / 2; object-fit: contain; height: auto; background: #eae5da; }
.hf-latest-grid .hf-event-card > a > div { display: flex; flex-direction: column; flex: 1; }
.hf-latest-grid .hf-event-card p:first-child { flex-wrap: wrap; }
.hf-card-read { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--forest); }
.hf-card-read > :last-child { font-size: 1.4rem; }
#latest-updates { scroll-margin-top: 8rem; }
.hf-footer nav .hf-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; margin-top: .25rem; color: var(--amber-light); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .hf-gallery figure { transition: box-shadow .25s ease, transform .25s ease; }
  .hf-gallery figure:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(15 36 25 / .10); }
  .hf-footer nav .hf-icon { transition: transform .2s ease; }
  .hf-footer nav a:hover .hf-icon { transform: translateX(2px); }
}

.hf-media-library-card time { display: block; margin-top: .5rem; font-size: var(--fs-xs); color: var(--muted); }

/* Keep the programme controls in reach, with room for the sticky header. */
.hf-program-nav { position: sticky; top: var(--hf-header-height); z-index: 30; box-shadow: 0 5px 16px rgb(15 36 25 / .06); }
.hf-chapter .hf-photo { background: var(--white); }
.hf-chapter .hf-photo { box-shadow: none; background: transparent; overflow: visible; border-radius: 0; }
.hf-chapter .hf-photo img { aspect-ratio: auto; object-fit: contain; border-radius: var(--r-sm); }
.hf-chapter .hf-photo figcaption { position: static; padding: .75rem 0 0; background: transparent; color: var(--forest); font-size: var(--fs-sm); }
.hf-gallery[data-visible-count='1'] { grid-template-columns: minmax(0, 640px); justify-content: center; }
.hf-gallery[data-visible-count='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .hf-gallery[data-visible-count='2'] { grid-template-columns: minmax(0, 1fr); } }
.hf-program-tabs { display: flex; flex: 1; gap: .5rem; }
.hf-program-select { display: none; width: 100%; }
.hf-program-select > span { display: block; margin-bottom: .35rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.hf-program-select select { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--forest); font-weight: 600; }
.hf-program-nav a { min-width: 0; }
.hf-chapter, .hf-fragment-alias { scroll-margin-top: calc(var(--hf-header-height) + var(--hf-program-nav-height) + 24px); }
@media (max-width: 860px) {
  .hf-program-nav .hf-wrap { padding-block: .55rem .7rem; }
  .hf-program-tabs { display: none; }
  .hf-program-select { display: block; }
}
/* Photo previews are decorative; the complete destination remains in the label. */
.hf-story-step { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; column-gap: 1rem; }
.hf-story-step:has(img) { grid-template-columns: minmax(0, 1fr) min(44%, 200px); }
.hf-story-step img { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); border: 1px solid rgb(255 255 255 / .2); background: var(--forest-deep); }
.hf-story-step:has(img) > span, .hf-story-step:has(img) > strong { grid-column: 1; }
.hf-story-step:has(img) > span { align-self: end; }
.hf-story-step:has(img) > strong { align-self: start; }
@media (max-width: 720px) {
  .hf-story-step { padding: 1rem; column-gap: .8rem; }
}
.hf-story-step:hover strong, .hf-story-step:focus-visible strong { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hf-story-step img { transition: transform .2s ease; }
  .hf-story-step:hover img, .hf-story-step:focus-visible img { transform: scale(1.04); }
}
.hf-involved-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 2.25rem; color: var(--white); }
.hf-involved-contact a { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; max-width: 100%; padding-block: .35rem; }
.hf-involved-contact .hf-icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--amber-light); }
.hf-involved-contact a span { min-width: 0; overflow-wrap: anywhere; }
.hf-involved-contact a[href^="tel:"] span { white-space: nowrap; }
@media (max-width: 560px) { .hf-involved-contact { flex-direction: column; gap: .35rem; } }

/* ── Enhancements ───────────────────────────────────────────────────────────
   Finishing touches on top of the approved design: an entrance for each
   page's opening lines, cross-fades between pages, softer image loading,
   livelier cards, a back-to-top control, story sharing and a photo viewer for
   story photographs. All motion stops for visitors who ask for less motion.
   ────────────────────────────────────────────────────────────────────────── */

/* Pages cross-fade into each other in browsers that support it. */
@view-transition { navigation: auto; }

@keyframes hf-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hf-reference-hero-content > *,
  .hf-page-hero-grid > div > *,
  .hf-story-copy:not([hidden]) > * {
    animation: hf-enter .7s cubic-bezier(.2, .7, .2, 1) both;
  }
  .hf-reference-hero-content > :nth-child(2),
  .hf-page-hero-grid > div > :nth-child(2),
  .hf-story-copy:not([hidden]) > :nth-child(2) { animation-delay: .08s; }
  .hf-reference-hero-content > :nth-child(3),
  .hf-page-hero-grid > div > :nth-child(3),
  .hf-story-copy:not([hidden]) > :nth-child(3) { animation-delay: .16s; }
  .hf-reference-hero-content > :nth-child(n+4),
  .hf-page-hero-grid > div > :nth-child(n+4),
  .hf-story-copy:not([hidden]) > :nth-child(n+4) { animation-delay: .24s; }
  .hf-page-hero-photo { animation: hf-enter .9s .12s cubic-bezier(.2, .7, .2, 1) both; }

  /* Photographs settle gently inside their frames on hover. */
  .hf-event-card img,
  .hf-gallery > figure img,
  .hf-story-media img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .hf-event-card:hover img,
  .hf-gallery > figure:hover img,
  .hf-zoomable:hover img { transform: scale(1.035); }

  /* Programme icons respond to the card they sit on. */
  .hf-program-icon { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .hf-program-card:hover .hf-program-icon { transform: scale(1.1) rotate(-6deg); }
}

/* A calm tone behind images while they load, instead of an empty white box. */
.hf-event-card img,
.hf-record-thumb,
.hf-related-grid img,
.hf-story-media,
.hf-gallery > figure img { background-color: var(--cream-dark, #f0e9db); }
.hf-event-card a, .hf-gallery > figure, .hf-zoomable { overflow: hidden; }
.hf-zoomable { position: relative; }
.hf-zoomable img { cursor: zoom-in; }

/* Back to top. */
.hf-to-top {
  position: fixed;
  z-index: 50;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--amber, #e07b2a);
  box-shadow: 0 10px 24px rgb(15 36 25 / .22);
  color: var(--white, #fff);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background .18s ease;
}
.hf-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.hf-to-top:hover { background: var(--forest, #1b3a2d); }
.hf-to-top:focus-visible { outline: 3px solid var(--amber-light, #f5a55a); outline-offset: 3px; }
.hf-lightbox-open .hf-to-top { display: none; }

/* Story sharing. */
.hf-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(15 36 25 / .1);
}
.hf-share-label {
  margin-right: .25rem;
  color: var(--muted, #5b6b62);
  font-size: var(--fs-xs, .75rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[lang='te'] .hf-share-label { letter-spacing: 0; text-transform: none; }
.hf-share-button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 30px;
  padding: .25rem .7rem;
  border: 1px solid rgb(15 36 25 / .14);
  border-radius: 999px;
  background: var(--white, #fff);
  color: var(--forest, #1b3a2d);
  font: inherit;
  font-size: var(--fs-xs, .75rem);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.hf-share-button:hover { border-color: var(--forest, #1b3a2d); background: var(--forest, #1b3a2d); color: var(--white, #fff); }
.hf-share-mark {
  --mark: none; /* set per button by site.js */
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
/* WhatsApp and Facebook in their own colours, so they read at a glance. */
.hf-share-button[data-share='whatsapp'] { border-color: #25d366; background: #25d366; color: #fff; }
.hf-share-button[data-share='whatsapp']:hover { border-color: #1da851; background: #1da851; color: #fff; }
.hf-share-button[data-share='facebook'] { border-color: #1877f2; background: #1877f2; color: #fff; }
.hf-share-button[data-share='facebook']:hover { border-color: #0f5fcc; background: #0f5fcc; color: #fff; }
.hf-share-button.is-done { border-color: var(--forest-mid, #3d7a58); background: var(--forest-mid, #3d7a58); color: var(--white, #fff); }
.hf-share-button svg { width: 14px; height: 14px; }
@media (max-width: 420px) { .hf-share-label { display: none; } }
.hf-share-button:focus-visible { outline: 3px solid var(--amber, #e07b2a); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .hf-to-top { transition: none; }
}
@media print {
  .hf-to-top, .hf-share { display: none !important; }
}

/* ── Home hero: founder in front of the community photograph ────────────────
   Approved by the owner (Option B, Oct 2026). The photograph stays as the
   backdrop; Konda Vijay Kumar stands in front of it on the right. A warm glow
   and a local darkening behind him separate the portrait from the busy crowd,
   and the foot of the cut-out fades into the hero's bottom wash.
   ────────────────────────────────────────────────────────────────────────── */
/* The introduction sits in the middle of the hero, straight under the logo,
   instead of sinking to the foot of the photograph and leaving its upper half
   empty. The hero is a little shorter, so it reads as one block. */
.hf-reference-hero--founder {
  align-items: center;
  min-height: min(80vh, 40rem);
  padding-block: clamp(7rem, 10vw, 8rem) clamp(3rem, 5vw, 4rem);
}
.hf-reference-hero--founder .hf-reference-hero-content > * { max-width: min(46rem, 56%); }
.hf-reference-hero--founder .hf-reference-hero-shade {
  background:
    radial-gradient(42% 70% at 82% 78%, rgb(15 36 25 / .62) 0%, rgb(15 36 25 / .28) 55%, transparent 100%),
    linear-gradient(90deg, rgb(15 36 25 / .88) 0%, rgb(15 36 25 / .76) 32%, rgb(15 36 25 / .46) 52%, rgb(15 36 25 / .16) 74%, rgb(15 36 25 / .22) 100%),
    linear-gradient(180deg, rgb(15 36 25 / .70) 0%, rgb(15 36 25 / .10) 20%, rgb(15 36 25 / .12) 52%, rgb(15 36 25 / .86) 100%);
}
.hf-hero-founder-overlay {
  position: absolute;
  z-index: 1;
  right: max(1rem, calc((100vw - 76rem) / 2));
  bottom: 0;
  /* The vh cap keeps his head clear of the navigation on short laptop screens. */
  width: min(37vw, 30rem, 56vh);
  margin: 0;
}
.hf-hero-founder-glow {
  position: absolute;
  inset: 6% -12% 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(245 165 90 / .34), rgb(245 165 90 / .12) 55%, transparent 100%);
  filter: blur(8px);
  pointer-events: none;
}
.hf-hero-founder-overlay img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 34px rgb(5 15 10 / .6));
  /* Fade the foot and the cropped right shoulder so neither edge reads as a cut. */
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%), linear-gradient(270deg, transparent 0%, #000 9%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 88%, transparent 100%), linear-gradient(270deg, transparent 0%, #000 9%);
  mask-composite: intersect;
}
.hf-hero-founder-overlay figcaption {
  position: absolute;
  z-index: 2;
  bottom: clamp(1.25rem, 3.5vw, 2.5rem);
  left: -16%;
  display: grid;
  gap: .15rem;
  padding: .75rem 1.1rem .8rem;
  border: 1px solid rgb(245 165 90 / .28);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-sm);
  background: rgb(15 36 25 / .84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgb(5 15 10 / .35);
  color: var(--white);
  white-space: nowrap;
}
.hf-hero-founder-overlay figcaption strong { font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; }
.hf-hero-founder-overlay figcaption span { color: var(--amber-light); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
html[lang='te'] .hf-hero-founder-overlay figcaption span { letter-spacing: 0; text-transform: none; }

@media (max-width: 860px) {
  /* Bottom padding equals the portrait's height, so he stands directly under the text. */
  .hf-reference-hero--founder { align-items: flex-end; min-height: 0; padding-top: 8rem; padding-bottom: calc(min(48vw, 24rem) * 1.05); }
  .hf-reference-hero--founder .hf-reference-hero-content > * { max-width: 100%; }
  .hf-reference-hero--founder .hf-reference-hero-shade {
    background:
      linear-gradient(180deg, rgb(15 36 25 / .78) 0%, rgb(15 36 25 / .62) 45%, rgb(15 36 25 / .40) 70%, rgb(15 36 25 / .88) 100%);
  }
  .hf-hero-founder-overlay { right: 0; width: min(48vw, 24rem); }
  .hf-hero-founder-overlay figcaption { left: auto; right: 60%; bottom: 1rem; padding: .6rem .85rem; }
  .hf-hero-founder-overlay figcaption strong { font-size: var(--fs-base); }
}
/* Phones: the founder sits straight under the introduction and the two
   buttons close the hero, side by side, below his portrait. Everything fits
   on the first screen. */
@media (max-width: 560px) {
  .hf-reference-hero--founder { min-height: 0; padding-top: 7rem; padding-bottom: calc(clamp(13rem, 62vw, 15rem) + 5rem); }
  .hf-reference-hero--founder .hf-reference-hero-content { position: static; }
  .hf-reference-hero--founder h1 { margin-bottom: .9rem; font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
  .hf-reference-hero--founder .hf-reference-pill { margin-bottom: 1rem; }
  .hf-reference-hero--founder .hf-reference-hero-lede { margin-bottom: 0; font-size: var(--fs-base); line-height: 1.6; }
  .hf-reference-hero--founder .hf-reference-hero-content > .hf-actions {
    position: absolute;
    z-index: 3;
    right: calc((100% - var(--wrap)) / 2);
    bottom: 1.25rem;
    left: calc((100% - var(--wrap)) / 2);
    flex-wrap: nowrap;
    gap: .6rem;
    max-width: none;
    margin: 0;
  }
  .hf-reference-hero--founder .hf-actions .hf-button { flex: 1 1 0; width: auto; min-width: 0; padding-inline: .75rem; font-size: var(--fs-sm); white-space: nowrap; }
  .hf-hero-founder-overlay { bottom: 4.75rem; width: min(60vw, 16rem); }
  .hf-hero-founder-overlay figcaption { right: 58%; bottom: .9rem; padding: .5rem .75rem; }
  .hf-hero-founder-overlay figcaption strong { font-size: var(--fs-sm); }
  .hf-hero-founder-overlay figcaption span { font-size: .65rem; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: no-preference) {
  .hf-hero-founder-overlay img { animation: hf-enter 1s .2s cubic-bezier(.2, .7, .2, 1) both; }
  .hf-hero-founder-overlay figcaption { animation: hf-enter .8s .5s cubic-bezier(.2, .7, .2, 1) both; }
}

/* Contact page: message form (WordPress theme). */
.hf-enquiry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  scroll-margin-top: calc(var(--hf-header-height) + 1rem);
}
.hf-enquiry-intro h2 { margin-block: .35rem .9rem; font-size: var(--fs-4xl); }
.hf-enquiry-intro p:last-child { color: var(--body-copy); }
.hf-enquiry-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; align-content: start; }
.hf-enquiry-form label { display: flex; flex-direction: column; gap: .4rem; color: var(--forest); font-size: var(--fs-sm); font-weight: 600; }
.hf-enquiry-form input,
.hf-enquiry-form textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
  color: var(--charcoal);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 400;
}
.hf-enquiry-form textarea { min-height: 9rem; resize: vertical; }
.hf-enquiry-form input:focus-visible,
.hf-enquiry-form textarea:focus-visible { outline: 3px solid var(--amber-light); outline-offset: 1px; border-color: var(--amber-ink); background: var(--white); }
.hf-enquiry-form .hf-enquiry-wide { grid-column: 1 / -1; }
.hf-enquiry-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hf-enquiry-send { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.hf-enquiry-send .hf-button[disabled] { opacity: .7; cursor: progress; }
.hf-enquiry-note { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.hf-enquiry-status { margin: 0; padding: .9rem 1rem; border-radius: var(--r-sm); font-size: var(--fs-base); }
.hf-enquiry-status--ok { border: 1px solid var(--forest-light); background: #eaf4ee; color: var(--forest); }
.hf-enquiry-status--error { border: 1px solid var(--amber-ink); background: var(--amber-pale); color: var(--amber-ink); }
@media (max-width: 860px) {
  .hf-enquiry { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hf-enquiry-form { grid-template-columns: 1fr; }
  .hf-enquiry-send .hf-button { width: 100%; justify-content: center; }
}

/* Call / WhatsApp buttons on phones (WordPress theme, Theme Options). */
.hf-quick-contact { display: none; }
@media (max-width: 760px) {
  .hf-quick-contact {
    position: fixed;
    z-index: 50;
    left: max(1rem, env(safe-area-inset-left));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: flex;
    gap: .6rem;
  }
  .hf-quick-contact a {
    display: inline-flex;
    min-width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: var(--r-pill);
    box-shadow: 0 10px 24px rgb(15 36 25 / .22);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
  }
  .hf-quick-call { width: 48px; border: 1px solid var(--line); background: var(--white); color: var(--forest) !important; }
  .hf-quick-whatsapp { width: 48px; background: #25d366; }
  .hf-quick-whatsapp .hf-share-mark { width: 24px; height: 24px; }
  .hf-quick-contact a:focus-visible { outline: 3px solid var(--amber-light); outline-offset: 3px; }
  body:has(.hf-quick-contact) .hf-footer-bottom { padding-bottom: 5rem; }
  .hf-lightbox-open .hf-quick-contact, .hf-menu-open .hf-quick-contact { display: none; }
}
@media print { .hf-quick-contact { display: none !important; } }

/* Page not found: a search box. */
.hf-notfound-search { display: flex; flex-wrap: wrap; gap: .75rem; max-width: 36rem; margin-block: 1.5rem 1rem; }
.hf-notfound-search input {
  flex: 1 1 16rem;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--charcoal);
  font-family: inherit;
  font-size: var(--fs-base);
}
.hf-notfound-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }

/* ══ Spacing pass, 18 Oct 2026 ═══════════════════════════════════════════
   Cards fill their photo frame edge to edge, and phones and tablets lose the
   extra padding that made every section feel spaced out. One set of rules for
   every page, so the rhythm is the same everywhere. */
.hf-latest-grid .hf-event-card img { object-fit: cover; object-position: center 35%; }
.hf-card-read { padding-top: 1.1rem; }

@media (max-width: 860px) {
  :root { --section: 3rem; --section-tight: 2.25rem; }
  .hf-page-hero { padding-top: 2rem; }
}
@media (max-width: 620px) {
  :root { --section: 2.5rem; --section-tight: 2rem; --fs-lg: 1.0625rem; }
  .hf-lede { line-height: 1.6; }
  .hf-event-card > a > div,
  .hf-note > div { padding: 1.1rem 1.15rem 1.2rem; }
  .hf-card-read { padding-top: .85rem; }
  .hf-event-grid,
  .hf-featured-notes,
  .hf-related-grid { gap: 1rem; }
  .hf-page-hero { padding-top: 1.5rem; }
  .hf-section-heading,
  .hf-events-heading,
  .hf-archive-heading { margin-bottom: 1.5rem; }
}
/* Phones: the footer's two link lists sit side by side instead of one long column. */
@media (max-width: 620px) {
  .hf-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .hf-footer-intro,
  .hf-footer-grid > div:last-child { grid-column: 1 / -1; }
}

/* Desktop menu reads as clean text; the icons stay in the phone menu's list. */
.hf-desktop-nav .hf-icon { display: none; }
.hf-desktop-nav { gap: clamp(1.1rem, 1.6vw, 1.75rem); }
/* Gallery thumbnails fill their frame (the viewer still opens the whole photo). */
.hf-gallery img { object-fit: cover; object-position: center 35%; }
@media (max-width: 860px) {
  /* The page's headline figure becomes one compact line instead of a big box. */
  .hf-page-aside { justify-self: start; display: inline-flex; align-items: baseline; gap: .65rem; padding: .85rem 1.15rem; }
  .hf-page-aside strong { font-size: 2rem; }
  .hf-page-aside span { margin-top: 0; }
}
@media (max-width: 560px) {
  .hf-gallery,
  .hf-gallery[data-visible-count='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .hf-gallery figcaption { padding: .6rem .7rem .7rem; font-size: var(--fs-xs); }
  .hf-gallery-category { margin-bottom: .2rem; }
}
/* Quieter "open photo" mark on gallery thumbnails. */
.hf-gallery-open svg { top: .6rem; right: .6rem; width: 2rem; height: 2rem; padding: .4rem; background: rgb(15 36 25 / .7); }
@media (max-width: 560px) { .hf-gallery-open svg { top: .45rem; right: .45rem; width: 1.6rem; height: 1.6rem; padding: .3rem; } }

/* ══ Desktop balance pass, 18 Oct 2026 ═══════════════════════════════════
   With the wider page, tall photos next to short text left big empty
   blocks. Photos are shaped to sit beside their text, text starts at the
   top of its photo, and headings stay with their labels. */
@media (min-width: 861px) {
  /* Photos beside text: landscape and no taller than the text needs. */
  .hf-about-story-photo img { aspect-ratio: 4 / 3; }
  .hf-page-hero-photo img { aspect-ratio: 16 / 10; max-height: 26rem; }
  .hf-proof-context .hf-photo img,
  .hf-manifesto .hf-photo img,
  .hf-chapter .hf-photo img { aspect-ratio: 16 / 10; }
  /* Short text next to a photo starts level with the photo's top edge. */
  .hf-proof-context > :first-child,
  .hf-manifesto > :first-child,
  .hf-covid-story > :first-child,
  .hf-evidence-ledger > :first-child,
  .hf-story-intro > :first-child,
  .hf-expectations > :first-child,
  .hf-timeline-layout > :first-child { align-self: start; }
  .hf-evidence-ledger .hf-photo img { aspect-ratio: 16 / 10; }

  /* A page's headline figure sits at the right, level with the intro text. */
  .hf-page-hero-grid:has(> .hf-page-aside) { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .hf-page-hero-grid > .hf-page-aside { justify-self: end; display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 12rem; }
}
/* A label and its heading stay together on the left. */
.hf-section-heading:has(> .hf-kicker + h2) { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .35rem; }

/* Contact form: one centred column, no empty half beside it. */
.hf-enquiry { grid-template-columns: minmax(0, 1fr); max-width: 56rem; margin-inline: auto; gap: 1.5rem; }
.hf-enquiry-intro { max-width: 40rem; }
.hf-enquiry-intro h2 { margin-block: .3rem .6rem; }
.hf-enquiry-form textarea { min-height: 7.5rem; }
/* Logged-in editors: keep the sticky header below WordPress's admin bar. */
/* (The homepage header sits over the photo below the top bar; it only moves
   when it becomes fixed on scroll.) */
body:has(#wpadminbar) .hf-header:not(.hf-header--overlay),
body:has(#wpadminbar) .hf-header--overlay.is-scrolled { top: 32px; }
@media (max-width: 782px) {
  body:has(#wpadminbar) .hf-header:not(.hf-header--overlay),
  body:has(#wpadminbar) .hf-header--overlay.is-scrolled { top: 46px; }
}
@media (max-width: 600px) {
  body:has(#wpadminbar) .hf-header:not(.hf-header--overlay),
  body:has(#wpadminbar) .hf-header--overlay.is-scrolled { top: 0; }
}
/* Founder's message: photo and name sit under the quote as its signature,
   so no empty block is left beside them. */
.hf-founder-grid { align-items: center; }
.hf-founder-copy .hf-founder-person { margin-block: 1.5rem 1.5rem; }
.hf-founder-copy .hf-founder-photo { width: 88px; flex-basis: 88px; }
@media (max-width: 620px) { .hf-founder-copy .hf-founder-photo { width: 72px; flex-basis: 72px; } }
@media (min-width: 861px) {
  .hf-founder-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .hf-founder-heading h2 { max-width: 18ch; font-size: var(--fs-5xl); }
}
/* Logged-in editors on the homepage: the header over the photo also clears the admin bar. */
@media (min-width: 861px) {
  body:has(#wpadminbar) .hf-utility + .hf-header--overlay:not(.is-scrolled) { top: calc(1.1rem + 24px + 32px); }
}

/* ── About: a decade of work, read left to right ────────────────────────────
   The heading leads the section, the four dated photographs follow, and the
   four milestones sit directly under the photograph of the same period, on a
   horizontal rail. Nothing is left as an empty column beside a long list.
   Phones and tablets keep the vertical rail.
   ────────────────────────────────────────────────────────────────────────── */
.hf-decade-head { display: grid; gap: .35rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hf-decade-head h2 { margin: 0; }
.hf-decade-head p:not(.hf-kicker) { margin: .25rem 0 0; color: var(--muted); max-width: 68ch; }
.hf-timeline-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {
  .hf-decade-strip { margin-bottom: 0; }
  .hf-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 2.25rem 0 0; }
  .hf-timeline::before {
    top: .95rem; bottom: auto; left: 1.5rem; right: 1.5rem;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--amber), rgb(224 123 42 / .18));
  }
  .hf-timeline li::before { top: -1.6rem; left: 1.5rem; }
}

/* ── About: founder ─────────────────────────────────────────────────────────
   Portrait on the left with his name on it, the words on the right — the
   band is used edge to edge instead of one narrow column on the left.
   ────────────────────────────────────────────────────────────────────────── */
.hf-leader {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
}
.hf-leader-portrait img { aspect-ratio: 4 / 5; object-position: center 25%; }
.hf-leader figcaption strong {
  display: block;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.hf-leader figcaption span { display: block; color: var(--sage); font-size: var(--fs-xs); font-weight: 500; }
.hf-leader h2 { max-width: 18ch; }
.hf-leader .hf-lede { margin-block: 1.25rem 1.75rem; }
@media (max-width: 860px) {
  .hf-leader { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .hf-leader figure { max-width: 15rem; }
}
@media (max-width: 620px) {
  .hf-leader figure { max-width: 12.5rem; }
}
/* Wide screens: heading and words side by side beside the portrait. */
@media (min-width: 1200px) {
  .hf-leader > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: end;
  }
  .hf-leader > div > .hf-kicker { grid-column: 1; grid-row: 1; }
  .hf-leader > div > h2 { grid-column: 1; grid-row: 2; margin: 0; }
  .hf-leader > div > .hf-lede { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .hf-leader > div > .hf-button { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 1.5rem; }
}

/* ── What we do: programmes as a card grid ──────────────────────────────────
   Five alternating rows left a wide empty strip beside each short text.
   The main programme (food) is a wide feature card; the rest are cards of
   equal size — two rows that fill the width on desktop, a clean stack on
   phones.
   ────────────────────────────────────────────────────────────────────────── */
.hf-chapters { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.hf-chapter,
.hf-chapter + .hf-chapter {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.hf-chapter .hf-photo,
.hf-chapter--reverse .hf-photo { order: 0; margin: 0; }
.hf-chapter .hf-photo img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 0; }
.hf-chapter .hf-photo figcaption { padding: .7rem 1.5rem 0; color: var(--muted); font-size: var(--fs-xs); }
.hf-chapter-copy { display: flex; flex: 1; flex-direction: column; padding: 1rem 1.5rem 1.5rem; }
.hf-chapter-label { margin-bottom: .75rem; }
.hf-chapter-copy h2 { margin: 0 0 .6rem; font-size: var(--fs-2xl); }
.hf-chapter-copy > p { margin: 0 0 1.25rem; font-size: var(--fs-base); line-height: 1.7; }
.hf-chapter-copy .hf-text-link { margin-top: auto; }
@media (min-width: 700px) {
  .hf-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-chapter:first-child { grid-column: 1 / -1; }
}
@media (min-width: 861px) {
  .hf-chapter:first-child { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .hf-chapter:first-child .hf-photo { display: flex; flex-direction: column; }
  .hf-chapter:first-child .hf-photo img { flex: 1; height: 100%; min-height: 20rem; aspect-ratio: auto; }
  .hf-chapter:first-child .hf-photo figcaption { padding-bottom: .9rem; }
  .hf-chapter:first-child .hf-chapter-copy { justify-content: center; padding: clamp(1.5rem, 3vw, 3rem); }
  .hf-chapter:first-child .hf-chapter-copy h2 { font-size: var(--fs-4xl); }
  .hf-chapter:first-child .hf-chapter-copy > p { font-size: var(--fs-lg); }
  .hf-chapter:first-child .hf-chapter-copy .hf-text-link { margin-top: 0; }
}
@media (min-width: 1200px) {
  .hf-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hf-chapter:first-child { grid-column: span 2; }
}

/* ── News search: no empty slot when the category box is hidden ─────────── */
.hf-archive-controls:has(> label[hidden]) { grid-template-columns: minmax(0, 3fr) minmax(12rem, 1fr); }
@media (max-width: 860px) { .hf-archive-controls:has(> label[hidden]) { grid-template-columns: minmax(0, 1fr); } }

/* ── Social service: meals ─────────────────────────────────────────────────
   The four dated services sit under the heading, beside the photograph, so
   the left column carries content instead of empty space.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
  .hf-evidence-ledger { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 1.75rem; }
  .hf-evidence-ledger > #meals { position: static; grid-column: 1; grid-row: 1; align-self: start; }
  .hf-evidence-ledger > .hf-photo { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .hf-evidence-ledger > .hf-photo img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .hf-evidence-ledger > .hf-ledger-list { grid-column: 1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: end; }
}

/* ── Social service: about these photographs — text centred on the photo ── */
@media (min-width: 861px) {
  .hf-proof-context { align-items: center; }
  .hf-proof-context > :first-child { align-self: center; }
  .hf-proof-context > :first-child p:not(.hf-kicker) { font-size: var(--fs-lg); }
  .hf-proof-context .hf-photo img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
}

/* ── Contact: details on the left, message form on the right ───────────────
   The three cards and the form used two narrow centred bands; side by side
   they use the full width and the visitor sees every way to reach us at once.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1000px) {
  .hf-contact-grid--simple:has(.hf-enquiry) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: start;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .hf-contact-grid--simple:has(.hf-enquiry) .hf-contact-actions { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .hf-contact-grid--simple:has(.hf-enquiry) article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.1rem;
    align-content: start;
    padding: 1.5rem;
  }
  .hf-contact-grid--simple:has(.hf-enquiry) article > .hf-contact-icon { grid-row: 1 / span 6; margin: 0; }
  .hf-contact-grid--simple:has(.hf-enquiry) article > * { grid-column: 2; }
  .hf-contact-grid--simple:has(.hf-enquiry) article > .hf-contact-icon { grid-column: 1; }
  .hf-contact-grid--simple:has(.hf-enquiry) .hf-enquiry { max-width: none; margin: 0; }
}
@media (min-width: 861px) {
  .hf-chapter:first-child .hf-photo img { flex: 1 1 0; height: auto; min-height: 20rem; object-fit: cover; }
}
@media (min-width: 861px) { .hf-chapter:first-child { align-items: stretch; } }

/* ── Homepage programmes: one even row on wide screens ──────────────────── */
@media (min-width: 1280px) {
  .hf-program-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hf-program-grid > *,
  .hf-program-grid > :nth-child(4),
  .hf-program-grid > :nth-child(5) { grid-column: auto; }
}

/* ── Photo bands: the photograph shows through ──────────────────────────────
   At 20% the picture turned into a muddy green wash. It now shows at half
   strength, with a soft darker centre that keeps the words easy to read.
   ────────────────────────────────────────────────────────────────────────── */
.hf-involved-cta > img { opacity: .5; }
.hf-involved-cta-shade { background: radial-gradient(ellipse 60% 75% at 50% 50%, rgb(15 36 25 / .82), rgb(15 36 25 / .5)); }
/* The back-to-top button no longer sits on "We Are One" when the footer runs
   close to the screen edge (laptops, tablets). */
@media (max-width: 1700px) { .hf-footer-bottom { padding-right: 4.5rem; } }
@media (max-width: 860px) { .hf-footer-bottom { padding-right: 0; padding-bottom: 4rem; } }

/* ── Vertical rhythm: no doubled gaps ───────────────────────────────────────
   Two plain sections in a row each added their own top and bottom padding,
   leaving a 140px empty band between them (Events, COVID-19). The second one
   now starts straight after the first. The first section under a page
   heading starts closer to it, and the general section spacing is a little
   tighter on large screens.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 861px) { :root { --section: clamp(2rem, 2.8vw, 3.25rem); --section-tight: clamp(1.75rem, 2.2vw, 2.5rem); } }
.hf-section:not(.hf-section--mist):not(.hf-section--ink):not(.hf-section--deep)
  + .hf-section:not(.hf-section--mist):not(.hf-section--ink):not(.hf-section--deep) { padding-top: 0; }
.hf-page-hero + .hf-section:not(.hf-section--mist):not(.hf-section--ink):not(.hf-section--deep) { padding-top: clamp(1.75rem, 2.6vw, 2.75rem); }
/* The one milestone with a story link no longer makes all four cards taller:
   on the horizontal rail the link sits in the card's top corner, beside the date. */
@media (min-width: 1200px) {
  .hf-timeline li .hf-text-link { position: absolute; top: 1rem; right: 1.25rem; margin: 0; font-size: var(--fs-sm); }
}

/* ── Site footer: one compact section ───────────────────────────────────────
   The homepage's separate "Good things begin with a conversation" photo band
   and the four-column footer were two tall blocks at the bottom of the page.
   They are now one dark section on every page: an invitation row with the
   button, then the logo, every page link (three across) and the contact
   details side by side, then the copyright line.
   ────────────────────────────────────────────────────────────────────────── */
.hf-footer { padding-block: clamp(2rem, 3vw, 2.75rem) 1.25rem; }
.hf-footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  border-bottom: 1px solid rgb(255 255 255 / .1);
}
.hf-footer-cta .hf-kicker { margin: 0 0 .35rem; }
.hf-footer .hf-footer-cta-title {
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}
.hf-footer-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 4rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgb(255 255 255 / .1);
}
.hf-footer-intro img { height: 64px; margin-bottom: .75rem; }
.hf-footer-intro p { margin: 0; max-width: 22rem; }
.hf-footer .hf-social { margin-top: 1rem; }
.hf-footer h2 { margin-bottom: .75rem; }
.hf-footer-links nav { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: .35rem clamp(1.25rem, 2.5vw, 2.5rem); }
.hf-footer nav a, .hf-footer address a { font-size: var(--fs-sm); }
.hf-footer nav a { padding-block: .3rem; }
.hf-footer address { gap: .15rem; }
.hf-footer address .hf-contact-detail { padding-block: .3rem; }
.hf-footer-bottom { padding-top: 1.1rem; }
@media (max-width: 1000px) {
  .hf-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hf-footer-links { grid-column: 1 / -1; grid-row: 2; }
  .hf-footer-links nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .hf-footer-cta { flex-direction: column; align-items: stretch; text-align: left; }
  .hf-footer-cta .hf-button { justify-content: center; }
  .hf-footer .hf-footer-cta-title { font-size: var(--fs-2xl); }
  .hf-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .hf-footer-links { grid-row: auto; }
  .hf-footer-links nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-footer address a { min-height: 44px; display: flex; align-items: center; }
  .hf-footer-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .hf-footer-intro img { grid-row: 1 / span 2; height: 56px; margin: 0; }
  .hf-footer .hf-social { margin-top: .5rem; }
}

/* ── Contact: both columns end on the same line; Send sits on the right ─── */
@media (min-width: 1000px) {
  .hf-contact-grid--simple:has(.hf-enquiry) { align-items: stretch; }
  .hf-contact-grid--simple:has(.hf-enquiry) .hf-contact-actions { display: flex; flex-direction: column; }
  .hf-contact-grid--simple:has(.hf-enquiry) .hf-contact-actions > article { flex: 1 1 auto; }
  .hf-contact-grid--simple:has(.hf-enquiry) .hf-enquiry { align-content: start; }
}
.hf-enquiry-send { justify-content: space-between; flex-direction: row-reverse; }
@media (max-width: 560px) { .hf-enquiry-send { flex-direction: column; align-items: stretch; } }

/* ── Section headings sit closer to what they introduce ─────────────────── */
@media (min-width: 861px) {
  .hf-events-heading, .hf-programmes-heading, .hf-archive-heading, .hf-section-heading { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
}

/* ── Contact: smaller boxes ─────────────────────────────────────────────────
   Tighter padding, inputs and type on the cards and the form, so the whole
   contact block reads in one glance on a laptop screen.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1000px) {
  .hf-contact-grid--simple:has(.hf-enquiry) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.25rem; }
  .hf-contact-grid--simple:has(.hf-enquiry) .hf-contact-actions { gap: .75rem; }
  .hf-contact-grid--simple:has(.hf-enquiry) article { padding: 1rem 1.25rem; column-gap: .9rem; }
  .hf-contact-grid--simple:has(.hf-enquiry) .hf-contact-icon { width: 2.4rem; height: 2.4rem; padding: .5rem; }
  .hf-contact-grid--simple:has(.hf-enquiry) article .hf-kicker { margin: 0 0 .2rem; }
  .hf-contact-grid--simple:has(.hf-enquiry) .hf-contact-link { font-size: var(--fs-lg); line-height: 1.5; }
  .hf-contact-grid--simple:has(.hf-enquiry) .hf-contact-link--email { font-size: var(--fs-base); }
  .hf-contact-grid--simple:has(.hf-enquiry) article p,
  .hf-contact-grid--simple:has(.hf-enquiry) article p:last-child,
  .hf-contact-grid--simple:has(.hf-enquiry) address { margin: .35rem 0 0; font-size: var(--fs-sm); line-height: 1.6; }
  .hf-contact-grid--simple:has(.hf-enquiry) article .hf-text-link { margin-top: .5rem; }
}
.hf-enquiry { padding: clamp(1.25rem, 2.5vw, 1.75rem); gap: 1rem; }
.hf-enquiry-intro h2 { margin-block: .2rem .4rem; font-size: var(--fs-3xl); }
.hf-enquiry-intro p:last-child { margin: 0; font-size: var(--fs-sm); }
.hf-enquiry-form { gap: .75rem 1rem; }
.hf-enquiry-form label { gap: .3rem; font-size: var(--fs-xs); }
.hf-enquiry-form input, .hf-enquiry-form textarea { min-height: 42px; padding: .55rem .8rem; font-size: var(--fs-sm); }
.hf-enquiry-form textarea { min-height: 6.5rem; }
.hf-enquiry-send { margin-top: .25rem; }
@media (min-width: 1000px) {
  .hf-contact-grid--simple:has(.hf-enquiry) article { align-content: center; }
}

/* ── Footer, refined to the reviewed design ─────────────────────────────────
   Larger, easier-to-read type (16–18px links and contact details), a bolder
   invitation heading, roomier link rows and 48px social buttons.
   ────────────────────────────────────────────────────────────────────────── */
.hf-footer { padding-block: clamp(2.25rem, 3.6vw, 3.25rem) 1.5rem; }
.hf-footer-cta { padding-bottom: clamp(1.5rem, 2.4vw, 2.25rem); margin-bottom: clamp(1.75rem, 2.6vw, 2.5rem); }
.hf-footer-cta .hf-kicker { color: var(--sage); letter-spacing: .2em; margin-bottom: .5rem; }
.hf-footer .hf-footer-cta-title { font-size: var(--fs-4xl); }
.hf-footer-cta .hf-button { min-height: 3.25rem; padding-inline: 2rem; font-size: var(--fs-base); }
.hf-footer h2 { margin-bottom: 1rem; font-size: var(--fs-base); letter-spacing: .12em; }
.hf-footer-intro img { height: 72px; margin-bottom: 1rem; }
.hf-footer-intro p,
.hf-footer nav a,
.hf-footer address a { font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.6; }
.hf-footer-intro p { max-width: 28rem; }
.hf-footer nav a { gap: .8rem; padding-block: .45rem; }
.hf-footer nav .hf-icon,
.hf-footer address .hf-icon { width: 1.35rem; height: 1.35rem; flex-basis: 1.35rem; margin-top: .1rem; opacity: 1; }
.hf-footer-links nav { column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: .5rem; }
.hf-footer address { gap: .5rem; }
.hf-footer address .hf-contact-detail { gap: .9rem; }
.hf-footer .hf-social { margin-top: 1.25rem; }
.hf-footer .hf-social a { width: 48px; height: 48px; }
.hf-footer .hf-social a.hf-social-person { width: auto; padding: 0 1.1rem 0 .9rem; font-size: var(--fs-sm); }
.hf-footer-grid { padding-bottom: clamp(1.5rem, 2.4vw, 2.25rem); }
.hf-footer-bottom { padding-top: 1.25rem; font-size: var(--fs-sm); }
@media (max-width: 620px) {
  .hf-footer .hf-footer-cta-title { font-size: var(--fs-3xl); }
  .hf-footer-cta .hf-button { width: 100%; }
  .hf-footer-intro img { height: 60px; }
}
/* When both filters are hidden (COVID-19: one category, one year), search takes the row. */
.hf-archive-controls:has(> label[hidden] ~ label[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* Archive page picker next to Previous / Next. */
.hf-page-picker { min-height: 40px; margin-inline: .25rem; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--charcoal); font: inherit; }
/* Gallery captions stay readable on phones. */
@media (max-width: 620px) { .hf-gallery figcaption { font-size: var(--fs-sm); } }
/* Media library: Search, Media type and Year in one row; readable captions. */
.hf-media-controls { grid-template-columns: minmax(0, 3fr) minmax(10rem, 1fr) minmax(10rem, 1fr); }
@media (max-width: 860px) { .hf-media-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hf-media-controls > label:first-child { grid-column: 1 / -1; } }
.hf-media-library-grid figcaption { font-size: var(--fs-sm); }
.hf-media-library-grid figcaption strong { color: var(--forest); font-weight: 600; }
.hf-media-library-grid figcaption > a { text-decoration: none; }
/* Newest or oldest story: the single neighbour card takes the whole row. */
.hf-story-nav .hf-story-step.is-empty { display: none; }
.hf-story-nav:has(> .hf-story-step.is-empty) > .hf-story-step:not(.is-empty) { grid-column: 1 / -1; }
/* Footer email: wrap only when it truly cannot fit, and never mid-word on phones. */
.hf-footer address .hf-contact-detail span { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 400px) { .hf-footer address a[href^="mailto:"] { font-size: .875rem; } }
/* Story share buttons: proper tap targets; the row can always scroll clear of
   the floating call button on phones. */
.hf-share-button { min-height: 40px; padding: .4rem .95rem; font-size: var(--fs-sm); }
.hf-share-button svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .hf-share { gap: .6rem; }
  .hf-share-button { min-height: 44px; }
}
.hf-media-controls:has(> label[hidden]) { grid-template-columns: minmax(0, 3fr) minmax(10rem, 1fr); }
@media (max-width: 860px) { .hf-media-controls:has(> label[hidden]) { grid-template-columns: minmax(0, 1fr); } }
/* Breadcrumb links: bigger tap area, same look. */
.hf-breadcrumb a { display: inline-block; padding: .55rem .35rem; margin: -.55rem -.35rem; }

/* ── Design consistency pass (Codex F-48 onward) ─────────────────────────── */
/* Photo captions share one readable size on phones (Gallery/Media already 14px). */
@media (max-width: 620px) {
  .hf-photo figcaption,
  .hf-page-hero-photo figcaption,
  .hf-decade-shot figcaption,
  .hf-chapter .hf-photo figcaption,
  .hf-story-media figcaption,
  .hf-about-story-photo figcaption { font-size: var(--fs-sm); line-height: 1.5; }
}
/* Archive figures: a compact three-across grid on phones, search reached sooner. */
@media (max-width: 620px) {
  .hf-archive-summary { margin-block: 1rem .5rem; }
  .hf-archive-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem .5rem; padding: 1rem .75rem; }
  .hf-archive-figures strong { font-size: var(--fs-xl); }
  .hf-archive-figures span { display: block; font-size: .75rem; line-height: 1.35; }
}
/* Media library: two cards across on phones, like the Gallery. */
@media (max-width: 620px) {
  .hf-media-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .hf-media-library-grid figcaption { padding: .55rem .6rem .65rem; }
  .hf-media-library-grid video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
}
/* What We Do hero on phones: a compact mosaic, so the programme links show in the first screen. */
@media (max-width: 620px) {
  .hf-care-collage { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 5.25rem auto 5.25rem; gap: .4rem; }
  .hf-care-photo--1 { grid-column: 1; grid-row: 1; }
  .hf-care-photo--2 { grid-column: 2; grid-row: 1; }
  .hf-care-photo--3 { grid-column: 3; grid-row: 1; }
  .hf-care-photo--4 { grid-column: 4; grid-row: 1; }
  .hf-care-message { grid-column: 1 / span 4; grid-row: 2; flex-direction: row; gap: .75rem; padding: .6rem .9rem; }
  .hf-care-message .hf-care-hash { font-size: var(--fs-3xl); }
  .hf-care-message p { margin: 0; }
  .hf-care-photo--5 { grid-column: 1; grid-row: 3; }
  .hf-care-photo--6 { grid-column: 2; grid-row: 3; }
  .hf-care-photo--7 { grid-column: 3; grid-row: 3; }
  .hf-care-photo--8 { grid-column: 4; grid-row: 3; }
}
/* One date style on every story and media card (F-54). */
.hf-event-card time, .hf-note time, .hf-record time, .hf-media-library-card time, .hf-related-copy time { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
/* Filters: one text style on every listing page; 16px on phones so iPhones do not zoom (F-55). */
.hf-archive-controls input, .hf-archive-controls select,
.hf-media-controls input, .hf-media-controls select { font-weight: 400; }
@media (max-width: 620px) {
  .hf-archive-controls input, .hf-archive-controls select,
  .hf-media-controls input, .hf-media-controls select { font-size: 1rem; }
}
.hf-page-picker { min-height: 44px; }
/* Featured story cards: two across on tablets, not one 720px-wide card each (F-56). */
@media (min-width: 621px) and (max-width: 860px) {
  .hf-event-grid, .hf-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-event-grid > :nth-child(3):last-child { grid-column: 1 / -1; }
  .hf-event-grid > :nth-child(3):last-child > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hf-event-grid > :nth-child(3):last-child img { height: 100%; aspect-ratio: auto; }
}
/* Story lists on phones: compact rows — small photo beside the text — so the
   page controls are reached after a short scroll (F-57). */
@media (max-width: 620px) {
  .hf-record { flex-direction: row; align-items: stretch; }
  .hf-record-thumb { flex: 0 0 34%; aspect-ratio: auto; min-height: 7.5rem; }
  .hf-record-body { padding: .8rem .9rem .9rem; gap: .2rem; min-width: 0; }
  .hf-record h3 { font-size: var(--fs-sm); line-height: 1.35; }
  .hf-record p { -webkit-line-clamp: 2; line-clamp: 2; font-size: .8125rem; }
  .hf-record-list { gap: .6rem; }
}
@media (max-width: 620px) {
  /* The whole card is the tap target, so the "Read full story" line can be short. */
  .hf-record-body > a { min-height: 0; margin-top: .25rem; }
}

/* ── Icon beside its title, no numbering ─────────────────────────────────────
   Programme cards (homepage) and programme chapters (What We Do) set the icon
   on the left with the programme name on the same line; the description runs
   full width underneath. The "01 / 05" counters are gone.
   ────────────────────────────────────────────────────────────────────────── */
.hf-program-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: .9rem;
  row-gap: .8rem;
  align-items: center;
}
.hf-program-card > .hf-program-icon { grid-column: 1; grid-row: 1; width: 2.75rem; height: 2.75rem; margin: 0; }
.hf-program-card > h3 { grid-column: 2; grid-row: 1; margin: 0; line-height: 1.25; }
.hf-program-card > p { grid-column: 1 / -1; grid-row: 2; align-self: start; margin: 0; }
.hf-program-card > a, .hf-program-card > .hf-program-link { grid-column: 1 / -1; grid-row: 3; align-self: end; margin: 0; }
.hf-chapter-label { gap: .9rem; margin-bottom: .75rem; }
.hf-chapter-label > h2 { margin: 0; line-height: 1.2; }
.hf-chapter-label .hf-program-icon { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; }
@media (min-width: 861px) {
  .hf-chapter:first-child .hf-chapter-label .hf-program-icon { width: 3.25rem; height: 3.25rem; }
}

/* ── Phones: slimmer side margins and card padding ───────────────────────────
   The page edge was 24px each side and cards added another ~20px inside, so
   text sat ~44px in from the screen edge. Now 14px outside and ~16px inside.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  :root { --wrap: calc(100% - 1.75rem); }
  .hf-event-card > a > div, .hf-note > div { padding: .95rem 1rem 1.05rem; }
  .hf-chapter-copy { padding: .9rem 1rem 1.1rem; }
  .hf-chapter .hf-photo figcaption { padding: .6rem 1rem 0; }
  .hf-program-card { padding: 1.15rem 1rem; }
  .hf-timeline li { padding: 1rem; }
  .hf-vision-grid article, .hf-ledger-list article { padding: 1rem; }
  .hf-contact-grid--simple article { padding: 1.1rem 1rem; }
  .hf-enquiry { padding: 1.1rem 1rem; }
}
/* Phone footer intro: logo and line of text side by side, top-aligned;
   social buttons on their own row starting at the page edge. */
@media (max-width: 620px) {
  .hf-footer-intro { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 1rem; row-gap: 1rem; }
  .hf-footer-intro img { grid-row: 1; grid-column: 1; height: 52px; margin: .15rem 0 0; }
  .hf-footer-intro p { grid-row: 1; grid-column: 2; align-self: center; }
  .hf-footer-intro .hf-social { grid-row: 2; grid-column: 1 / -1; margin: 0; }
}

/* ── Icons beside titles: a little smaller so the title leads ───────────────
   Programme cards (Home), programme chapters (What We Do) and the Contact
   cards: the icon disc drops from 44px to 38px (36px on phones) with the mark
   scaled to match, and sits centred on the title's line.
   ────────────────────────────────────────────────────────────────────────── */
.hf-program-card > .hf-program-icon,
.hf-chapter-label .hf-program-icon { width: 2.375rem; height: 2.375rem; flex: 0 0 2.375rem; align-self: center; }
.hf-program-card > .hf-program-icon .hf-icon,
.hf-chapter-label .hf-program-icon .hf-icon,
.hf-program-card > .hf-program-icon img,
.hf-chapter-label .hf-program-icon img { width: 1.3rem; height: 1.3rem; }
.hf-program-card { column-gap: .75rem; }
.hf-chapter-label { gap: .75rem; }
@media (min-width: 861px) {
  .hf-chapter:first-child .hf-chapter-label .hf-program-icon { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; }
  .hf-chapter:first-child .hf-chapter-label .hf-program-icon .hf-icon { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 620px) {
  .hf-program-card > .hf-program-icon,
  .hf-chapter-label .hf-program-icon { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; }
  .hf-program-card > .hf-program-icon .hf-icon,
  .hf-chapter-label .hf-program-icon .hf-icon { width: 1.2rem; height: 1.2rem; }
}
@media (min-width: 1000px) {
  .hf-contact-grid--simple:has(.hf-enquiry) .hf-contact-icon { width: 2.125rem; height: 2.125rem; padding: .45rem; }
}
@media (max-width: 999px) {
  .hf-contact-grid--simple .hf-contact-icon { width: 2.25rem; height: 2.25rem; padding: .5rem; margin-bottom: .75rem; }
}
/* Cards side by side: titles take the same two-line height so every
   description starts on the same line across the row. */
@media (min-width: 861px) {
  .hf-program-card > h3 { min-height: 2.5em; display: flex; align-items: center; }
}
/* Two cards per row (tablet/small laptop): the fifth card fills its row instead of leaving half of it empty. */
@media (min-width: 621px) and (max-width: 1120px) {
  .hf-program-grid > :nth-child(5):last-child { grid-column: 1 / -1; }
}

/* ── Homepage hero, Look 1 ─────────────────────────────────────────────────
   Founding line is a small label instead of a chip; the founder's photo is a
   head-to-waist cut-out in the same box; his name sits beside him, not on him.
   Hero text gets its own layer so it can never fall behind the photograph
   (it relied on an animation for that before, which reduced-motion phones skip).
   ────────────────────────────────────────────────────────────────────────── */
.hf-reference-hero--founder .hf-reference-hero-content > * { position: relative; z-index: 2; }
.hf-reference-hero--founder .hf-reference-pill {
  padding: 0; border: 0; border-radius: 0; background: none; min-height: 0;
  margin-bottom: .6rem; color: var(--amber-light); font-size: .75rem; letter-spacing: .16em;
  text-shadow: 0 1px 8px rgb(15 36 25 / .9);
}
@media (min-width: 861px) {
  .hf-hero-founder-overlay figcaption { left: -24%; bottom: 2.25rem; }
}
@media (max-width: 560px) {
  .hf-reference-hero--founder { padding-top: 6.25rem; padding-bottom: calc(min(72vw, 18.5rem) + 5.25rem); }
  .hf-hero-founder-overlay { width: min(72vw, 18.5rem); bottom: 5rem; right: -.5rem; }
  .hf-hero-founder-overlay figcaption {
    right: auto; left: -38%; bottom: auto; top: 44%; width: 42%;
    display: grid; gap: .2rem; padding: 0; border: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; white-space: normal; text-align: left;
  }
  .hf-hero-founder-overlay figcaption::before { content: ''; display: block; width: 1.75rem; height: 2px; margin-bottom: .35rem; background: var(--amber); }
  .hf-hero-founder-overlay figcaption strong { font-size: 1.05rem; line-height: 1.2; text-shadow: 0 1px 10px rgb(15 36 25 / .95); }
  .hf-hero-founder-overlay figcaption span { font-size: .62rem; text-shadow: 0 1px 8px rgb(15 36 25 / .95); }
}

/* ── Homepage founder section: words on the left, portrait standing at right ─ */
.hf-founder-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}
.hf-founder:has(.hf-founder-split) { padding-bottom: 0; }
.hf-founder-text { min-width: 0; padding-bottom: var(--section); }
.hf-founder-text h2 { max-width: 34ch; margin: 0 0 1.5rem; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.12; text-wrap: balance; }
.hf-founder-text .hf-founder-quote { max-width: 46rem; margin: 0 0 1.1rem; font-size: var(--fs-lg); }
.hf-founder-sign { display: grid; justify-items: end; max-width: 46rem; margin: 0 0 1.5rem; text-align: right; }
.hf-founder-sign strong { color: var(--white); font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.hf-founder-sign span { color: var(--sage); font-size: var(--fs-sm); }
.hf-founder-text > p:not([class]) { max-width: 46rem; color: var(--sage); }
.hf-founder-portrait { position: relative; display: flex; align-self: stretch; margin: 0; }
.hf-founder-portrait::before {
  content: ''; position: absolute; inset: 12% 2% 0; border-radius: 50% 50% 0 0;
  background: radial-gradient(circle at 50% 42%, rgb(224 123 42 / .34), rgb(224 123 42 / 0) 64%);
}
.hf-founder-portrait img {
  position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  -webkit-mask-image: linear-gradient(#000 84%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(#000 84%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
@media (max-width: 1100px) {
  .hf-founder-split { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: 1.25rem; }
  .hf-founder-text h2 { font-size: 1.75rem; max-width: 30ch; }
}
@media (max-width: 700px) {
  .hf-founder:has(.hf-founder-split) { padding-top: 1rem; }
  .hf-founder-split { grid-template-columns: minmax(0, 1fr); }
  .hf-founder-portrait { order: -1; display: block; justify-self: center; width: min(100%, 21rem); margin-bottom: .75rem; }
  .hf-founder-portrait img { height: auto; }
  .hf-founder-text h2 { font-size: 1.625rem; max-width: none; margin-bottom: 1.1rem; }
  .hf-founder-text .hf-founder-quote { font-size: 1.0625rem; }
}
/* Founder portrait: whole picture shown (zoomed out), hands fully visible; only a short fade at the foot. */
.hf-founder-portrait img {
  object-fit: contain; object-position: center bottom;
  -webkit-mask-image: linear-gradient(#000 93%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(#000 93%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.hf-founder-sign { margin-bottom: 1.25rem; }
@media (min-width: 701px) {
  .hf-founder:has(.hf-founder-split) { padding-top: clamp(1.5rem, 2.5vw, 2.5rem); }
  .hf-founder-text { align-self: center; padding-block: 1rem; }
}
/* Hero portrait on tablets and laptops: he fills the hero from just under the
   menu down to its foot (not shrunk on short screens), and his name sits in
   the clear space to his left at the very bottom, never across his body. */
@media (min-width: 861px) {
  .hf-hero-founder-overlay { top: clamp(7rem, 15vh, 8.75rem); bottom: 0; width: auto; display: flex; align-items: flex-end; }
  .hf-hero-founder-overlay img { width: auto; height: 100%; max-width: min(46vw, 40rem); object-fit: contain; object-position: right bottom; }
  .hf-hero-founder-overlay figcaption { left: auto; right: 86%; bottom: 1.5rem; }
}

/* Founder's message on phones: portrait beside the heading (not stacked on
   top); the quote, signature and link run full width underneath. */
@media (max-width: 700px) {
  .hf-founder:has(.hf-founder-split) { padding-top: 1.5rem; }
  .hf-founder-split { grid-template-columns: minmax(0, 1fr) minmax(0, 50%); column-gap: .5rem; align-items: end; }
  .hf-founder-text { display: contents; }
  .hf-founder-text > .hf-kicker { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: .5rem; }
  .hf-founder-text > h2 { grid-column: 1; grid-row: 2; align-self: start; font-size: 1.375rem; line-height: 1.18; margin: 0; }
  .hf-founder-portrait { order: 0; grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; align-self: end; }
  .hf-founder-text > .hf-founder-quote { grid-column: 1 / -1; grid-row: 3; margin-top: 1.25rem; }
  .hf-founder-text > .hf-founder-sign { grid-column: 1 / -1; grid-row: 4; }
  .hf-founder-text > a { grid-column: 1 / -1; grid-row: 5; justify-self: start; margin-bottom: 2.25rem; }
}

/* Hero on tablets and laptops: name card centred under him, across the foot
   of the portrait. */
@media (min-width: 861px) {
  .hf-hero-founder-overlay figcaption {
    right: auto; left: 54%; transform: translateX(-50%); bottom: 1rem;
    justify-items: center; text-align: center; padding: .8rem 2rem .85rem;
    border-left: 1px solid rgb(245 165 90 / .4); border-bottom: 3px solid var(--amber);
  }
  .hf-hero-founder-overlay figcaption strong { font-size: var(--fs-xl); }
  .hf-hero-founder-overlay figcaption span { font-size: var(--fs-sm); }
  .hf-hero-founder-overlay img { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%), linear-gradient(270deg, transparent 0%, #000 9%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%), linear-gradient(270deg, transparent 0%, #000 9%); }
}