/* ==========================================================================
   KNF — Dr. Kishor Naitam Foundation
   One stylesheet. Tokens first, base, utilities, then one block per component.
   Palette A "Classic Navy & Gold" (default until client vote).
   ========================================================================== */

/* --- Fonts (self-hosted woff2, subset; Devanagari files load only when
       Devanagari glyphs appear on the page, via unicode-range) --- */

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-italic-300-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-normal-300-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans-latin-normal-300-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mukta-devanagari-normal-400.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/mukta-latin-normal-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/mukta-devanagari-normal-500.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/mukta-latin-normal-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mukta-devanagari-normal-700.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/mukta-latin-normal-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/kalam-devanagari-normal-400.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/kalam-latin-normal-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched local fallbacks: text renders in these until the woff2
   arrives, at (almost) identical size — no layout shift on font swap. */
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia");
  size-adjust: 85%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Nunito Sans-fallback";
  src: local("Arial");
  size-adjust: 101.5%;
  ascent-override: 101%;
  descent-override: 35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Kalam-fallback";
  src: local("Comic Sans MS"), local("Arial");
  size-adjust: 90.6%;
  ascent-override: 106%;
  descent-override: 53%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Mukta-fallback";
  src: local("Nirmala UI"), local("Mangal");
  size-adjust: 85.8%;
  ascent-override: 113%;
  descent-override: 53%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette A */
  --navy: #14294A;
  --navy-deep: #0F2038;
  --gold: #F2C230;
  --gold-ink: #B8871B;      /* large type, rules, icons on light ONLY (≈2.8:1 on cream) */
  --gold-ink-deep: #8C6612; /* any text under 24px on light — 4.57:1 on cream, AA */
  --cream: #FCF6E7; /* brightened per client review (was #FAEFD3) */
  --paper: #FFFFFF; /* pure white page ground per client review */
  --white: #FFFFFF;
  --ink: #1B2733;
  --muted: #5B6B7C;
  --line: #E5E5E0;
  --error: #A6473C;
  --ember: #D4602A;      /* logo spark. ONLY: arrow glyphs, pill border, submit hover, timeline current marker */
  --ember-deep: #B04A1D; /* ember for small TEXT (pill) — 4.78:1 on cream, AA */
  --navy-mist: #C9D3E0;  /* intro text on navy heroes — 9.6:1 */

  /* Type */
  --font-heading: "Fraunces", "Fraunces-fallback", "Mukta", "Mukta-fallback", Georgia, serif;
  --font-body: "Nunito Sans", "Nunito Sans-fallback", "Mukta", "Mukta-fallback", system-ui, sans-serif;
  --font-accent: "Kalam", "Kalam-fallback", "Mukta", "Mukta-fallback", cursive;

  --fs-display: clamp(2.75rem, 5.5vw + 1rem, 4.125rem);
  --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 0.7vw + 1rem, 1.5rem);
  --fs-body: clamp(1.0625rem, 0.2vw + 1rem, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;

  /* Space */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --band-pad: clamp(64px, 10vw, 128px);

  /* Shape */
  --radius-card: 14px;
  --radius-input: 8px;
  --shadow-soft: 0 2px 24px rgba(20, 41, 74, 0.08);
  --shadow-lift: 0 10px 32px rgba(20, 41, 74, 0.12);

  --container: 1200px;
  --measure: 68ch;
}

/* Narrow screens: smaller display size so hero sentences hold one line each */
@media (max-width: 480px) {
  :root {
    --fs-display: clamp(1.875rem, 8.6vw, 2.75rem);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--navy); /* royal-blue lettering per client review */
}

/* Dark bands keep their light headings */
.band--navy h1, .band--navy h2, .band--navy h3,
.band--navy-deep h1, .band--navy-deep h2, .band--navy-deep h3,
.site-footer h3 {
  color: inherit;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p, li, blockquote {
  max-inline-size: var(--measure);
}

img, svg, video {
  display: block;
  max-inline-size: 100%;
}

::selection {
  background: var(--gold);
  color: var(--navy-deep);
}

a {
  color: var(--gold-ink-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--gold-ink) 55%, transparent);
  transition: text-decoration-color 150ms ease;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.band--navy :focus-visible,
.band--navy-deep :focus-visible {
  outline-color: var(--gold);
}

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

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.container {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.band {
  padding-block: var(--band-pad);
  background: var(--paper);
}

.band--cream { background: var(--cream); }

.band--navy {
  background: var(--navy);
  color: var(--white);
}

.band--navy-deep {
  background: var(--navy-deep);
  color: var(--white);
}

.band--navy a,
.band--navy-deep a {
  color: var(--gold);
  text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
}

.prose {
  max-inline-size: var(--measure);
}

.prose > * + * {
  margin-block-start: 1em;
}

.label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small); /* one step up from --fs-label per client review */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink-deep);
}

.band--navy .label,
.band--navy-deep .label {
  color: var(--gold);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--gold-ink-deep);
}

.arrow-link .arrow-link__glyph {
  color: var(--ember);
  transition: translate 200ms ease;
}

.arrow-link:hover .arrow-link__glyph {
  translate: 4px 0;
}

.arrow-link--accent {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

.band--navy .arrow-link,
.band--navy-deep .arrow-link {
  color: var(--gold);
}

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

.skip-link {
  position: absolute;
  inset-block-start: var(--space-8);
  inset-inline-start: var(--space-8);
  z-index: 100;
  padding: var(--space-8) var(--space-16);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-input);
  translate: 0 -300%;
  transition: translate 150ms ease;
}

.skip-link:focus {
  translate: 0 0;
}

/* Pending-content placeholder (never invented text, never stock imagery) */
.pending {
  padding: var(--space-24);
  background: color-mix(in srgb, var(--cream) 60%, var(--paper));
  border: 1px dashed color-mix(in srgb, var(--gold-ink) 40%, transparent);
  border-radius: var(--radius-card);
  color: var(--muted);
  font-size: var(--fs-small);
}

/* Photo placeholder: warm cream/navy duotone, 1px inner border. Not grey. */
.photo-ph {
  position: relative;
  display: grid;
  place-items: end start;
  border-radius: var(--radius-card);
  background:
    radial-gradient(85% 75% at 100% 100%, rgba(212, 96, 42, 0.22), transparent 60%),
    radial-gradient(120% 90% at 20% 15%, rgba(242, 194, 48, 0.38), transparent 60%),
    linear-gradient(155deg, var(--cream) 0%, color-mix(in srgb, var(--gold) 42%, var(--cream)) 55%, color-mix(in srgb, var(--navy) 20%, var(--cream)) 100%);
  box-shadow: inset 0 0 0 1px rgba(20, 41, 74, 0.18);
  overflow: hidden;
}

.photo-ph::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(20, 41, 74, 0.14);
  border-radius: calc(var(--radius-card) - 6px);
  pointer-events: none;
}

.photo-ph__note {
  margin: var(--space-16);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--navy) 72%, var(--cream));
}

.photo-ph--arch {
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
}

.photo-ph--arch::after {
  border-radius: 993px 993px calc(var(--radius-card) - 6px) calc(var(--radius-card) - 6px);
}

/* Real photos (pipeline output). Crops via aspect-ratio + object-fit. */
.photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.photo--hero {
  aspect-ratio: 4 / 5;
}

@media (max-width: 599px) {
  .photo--hero {
    aspect-ratio: 4 / 3;
  }
}

.photo--arch {
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  aspect-ratio: 4 / 5;
}

.photo--gutter {
  aspect-ratio: 4 / 5;
  max-inline-size: 280px;
}

.photo--landscape {
  aspect-ratio: 3 / 2;
  max-inline-size: 380px;
}

.photo--square {
  aspect-ratio: 1;
}

.photo--tile {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

/* Reveal on scroll — only when JS is present; instant under reduced motion */
.js .reveal {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 350ms ease, translate 350ms ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    translate: 0 0;
  }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--paper);
  border-block-end: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 1px 16px rgba(20, 41, 74, 0.07);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  min-block-size: 76px;
}

@media (min-width: 900px) {
  .site-header__bar {
    min-block-size: 84px;
  }
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  margin-inline-end: auto;
}

.logo-mark {
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.site-header__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
}

@media (min-width: 900px) {
  .logo-mark {
    inline-size: 56px;
    block-size: 56px;
    font-size: 1rem;
  }

  .site-header__name {
    font-size: 1.4rem;
  }
}

.site-footer .site-header__name {
  color: var(--white);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  list-style: none;
  padding: 0;
}

.site-nav__list a {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.site-nav__list a:hover {
  color: var(--gold-ink-deep);
}

.site-nav__list a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--gold-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lang-toggle__sep {
  color: var(--line);
}

.lang-toggle [aria-current="true"] {
  color: var(--ink);
}

.lang-toggle .lang-toggle__soon {
  color: var(--muted);
  font-weight: 600;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-input);
  padding: var(--space-8) var(--space-12);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 899px) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
  }

  .site-nav {
    inline-size: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .site-nav__list {
    inline-size: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    padding-block: var(--space-16) var(--space-24);
    border-block-start: 1px solid var(--line);
  }

  /* Language toggle lives inside the hamburger panel on mobile */
  .site-nav .lang-toggle {
    padding-block-end: var(--space-24);
  }

  .site-header__bar {
    flex-wrap: wrap;
  }

  .js .site-nav:not(.is-open) {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Hero statement
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(72px, 11vw, 140px) var(--band-pad);
}

.hero__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

@media (min-width: 800px) {
  .hero__grid--with-photo {
    grid-template-columns: 7.5fr 4.5fr;
  }

  .hero__media {
    margin-block-start: var(--space-64); /* photo sits lower: quiet asymmetry */
  }
}

/* Phones: picture above, text below (client review, 17 Sept) */
@media (max-width: 799px) {
  .hero__media {
    order: -1;
    margin-block-end: var(--space-24);
  }
}

/* Identity first: the Foundation's name is the h1, the tagline stays the
   visually dominant statement. */
.hero__name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.55rem + 1.6vw, 2.75rem);
  font-weight: 600;
  color: var(--navy);
  margin-block-end: var(--space-12);
  max-inline-size: 18ch;
}

.hero__place {
  margin-block-end: var(--space-8);
}

/* Navy hero (client review, 17 Sept): light lettering, gold accent */
.band--navy .hero__name {
  color: var(--paper);
}

.band--navy .hero__title {
  color: var(--paper);
}

.band--navy .hero__title .accent {
  color: var(--gold);
}

.band--navy .hero__intro {
  color: var(--navy-mist);
}

.hero__title {
  font-size: var(--fs-display);
  font-family: var(--font-heading);
  font-weight: 550;
  line-height: 1.1;
  text-wrap: balance;
  margin-block: var(--space-24) var(--space-32);
}

.hero__title-line {
  display: block; /* each sentence is its own line-group at every width */
}

.hero__title .accent {
  color: var(--gold-ink-deep); /* gold-ink fails 3:1 on cream at any size */
  font-style: italic;
}

.hero__intro {
  max-inline-size: 52ch;
  margin-block-end: var(--space-32);
}

.hero__media .photo-ph {
  aspect-ratio: 4 / 5;
}

/* Phones: landscape crop so the mission band arrives sooner */
@media (max-width: 599px) {
  .hero__media .photo-ph {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */

.section-heading {
  margin-block-end: var(--space-48);
}

.section-heading .label {
  margin-block-end: var(--space-12);
}

.section-heading--center {
  text-align: center;
}

.section-heading--center h2 {
  margin-inline: auto;
}

.section-heading__rule {
  inline-size: 56px;
  block-size: 3px;
  border: 0;
  background: var(--gold-ink);
  margin-block-start: var(--space-16);
  margin-inline: 0;
}

.section-heading--center .section-heading__rule {
  margin-inline: auto;
}

.band--navy .section-heading__rule,
.band--navy-deep .section-heading__rule {
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   Mission band
   -------------------------------------------------------------------------- */

.mission-band {
  position: relative;
  background:
    radial-gradient(60% 80% at 18% 20%, rgba(242, 194, 48, 0.20), transparent 60%),
    radial-gradient(55% 70% at 85% 75%, rgba(20, 41, 74, 0.10), transparent 60%),
    var(--cream);
}

.mission-band__text {
  max-inline-size: 40ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.5;
}

.mission-band__text strong {
  font-weight: 650;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   Focus cards
   -------------------------------------------------------------------------- */

.focus-cards {
  display: grid;
  gap: var(--space-24);
  list-style: none;
  padding: 0;
}

@media (min-width: 700px) {
  .focus-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.focus-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-card);
  padding: var(--space-48);
}

.focus-card__icon {
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 20%, var(--white));
  color: var(--gold-ink-deep);
  margin-block-end: var(--space-16);
}

.focus-card h3 {
  color: var(--gold-ink-deep);
  margin-block-end: var(--space-8);
}

.focus-card h3 a {
  color: inherit;
  text-decoration: none;
}

.focus-card h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.focus-card p {
  font-size: var(--fs-small);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  gap: var(--space-48);
  text-align: center;
  margin-block-start: var(--space-64);
}

@media (min-width: 700px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat__number {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Values longer than 5 characters (e.g. "56% vs 73%") step down one notch;
   min() keeps them from exceeding the narrow-screen display size. */
.stat__number--long {
  font-size: min(var(--fs-h1), var(--fs-display));
}

/* In the 3-column band below 1000px the columns are too narrow for the
   one-notch step — drop another notch so long values never wrap. */
@media (min-width: 700px) and (max-width: 999px) {
  .stat__number--long {
    font-size: var(--fs-h2);
  }
}

/* Text-length values ("More than half"): two notches down, three in the
   narrow 3-column window. */
.stat__number--xlong {
  font-size: min(var(--fs-h2), var(--fs-display));
}

@media (min-width: 700px) and (max-width: 999px) {
  .stat__number--xlong {
    font-size: var(--fs-h3);
  }
}

.stat__caption {
  margin-block-start: var(--space-12);
  margin-inline: auto;
  max-inline-size: 26ch;
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--white) 82%, var(--navy-deep));
}

.stat__caption strong {
  color: var(--white);
}

.stats-source {
  margin-block-start: var(--space-48);
  text-align: center;
  font-size: var(--fs-label);
  color: color-mix(in srgb, var(--white) 60%, var(--navy-deep));
}

/* --------------------------------------------------------------------------
   Our-work preview (Home) — magazine spread, not a card grid
   -------------------------------------------------------------------------- */

.work-preview {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
}

@media (min-width: 800px) {
  .work-preview {
    grid-template-columns: 6fr 5fr;
    align-items: start;
  }
}

.work-preview__text {
  display: grid;
  gap: var(--space-48);
}

.work-preview__item p {
  max-inline-size: 48ch;
  margin-block-end: var(--space-12);
}

/* Two photos, staggered vertically — never overlapping: side-by-side
   columns, the second starting ~40% down the first's height. */
.work-preview__media {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-24);
  align-items: start;
}

.work-preview__photo-a {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.work-preview__photo-b {
  aspect-ratio: 4 / 3;
  margin-block-start: 52%; /* ≈40% down photo-a's height, offset right */
  border-radius: var(--radius-card);
  overflow: hidden;
}

.work-preview__media picture,
.work-preview__media .photo {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Story card (carousel)
   -------------------------------------------------------------------------- */

.story-carousel {
  max-inline-size: 880px;
  margin-inline: auto;
}

.story-carousel__viewport {
  overflow: hidden;
}

.story-carousel__track {
  display: flex;
  transition: translate 300ms ease;
}

.story-card {
  flex: 0 0 100%;
  display: grid;
  gap: var(--space-32);
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 4vw, 48px);
}

@media (min-width: 700px) {
  .story-card:not(.story-card--text-only) {
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  .story-card:not(.story-card--text-only) .story-card__photo-wrap {
    grid-row: 1 / span 2;
  }

  .story-card:not(.story-card--text-only) blockquote,
  .story-card:not(.story-card--text-only) figcaption {
    grid-column: 2;
  }
}

.story-card__photo-wrap {
  inline-size: 180px;
}

.story-card__photo-img {
  border-radius: 50%;
}

.story-card__photo {
  aspect-ratio: 1;
  border-radius: 50%;
  max-inline-size: 180px;
}

.story-card__photo::after {
  border-radius: 50%;
}

.story-card blockquote {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.45;
}

.story-card figcaption {
  margin-block-start: var(--space-16);
  font-size: var(--fs-small);
  color: var(--muted);
}

.story-card figcaption strong {
  color: var(--ink);
}

.story-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-block-start: var(--space-16);
}

.story-carousel__btn {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.story-carousel__btn:hover:not(:disabled) {
  border-color: var(--gold-ink);
  color: var(--gold-ink-deep);
}

.story-carousel__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Pathway grid
   -------------------------------------------------------------------------- */

.pathway-grid {
  display: grid;
  gap: var(--space-24);
  list-style: none;
  padding: 0;
}

@media (min-width: 560px) {
  .pathway-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .pathway-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pathway-tile {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: translate 200ms ease, box-shadow 200ms ease;
}

.pathway-tile:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-lift);
}

.pathway-tile .photo-ph {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.pathway-tile .photo-ph::after {
  display: none;
}

/* No photo yet: a solid navy block under the gold caption bar. */
.pathway-tile__navy {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--navy);
}

.pathway-tile__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 800;
  font-size: var(--fs-small);
  padding: var(--space-12) var(--space-16);
}

/* --------------------------------------------------------------------------
   Quiet CTA
   -------------------------------------------------------------------------- */

.quiet-cta {
  padding-block: var(--band-pad);
  text-align: center;
}

.quiet-cta p {
  margin-inline: auto;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  margin-block-end: var(--space-16);
}

/* --------------------------------------------------------------------------
   Memorial block
   -------------------------------------------------------------------------- */

.memorial {
  max-inline-size: 720px;
  margin-inline: auto;
  text-align: center;
}

.memorial__portrait {
  inline-size: min(260px, 60vw);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  margin-block-end: var(--space-32);
}

.memorial__name {
  font-weight: 550;
}

.memorial__dates {
  margin-block-start: var(--space-8);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.memorial__text {
  margin-block-start: var(--space-48);
  text-align: start;
  margin-inline: auto;
  max-inline-size: 60ch;
}

.memorial__epigraph {
  margin-block-start: var(--space-48);
}

.memorial__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--gold-ink-deep);
  max-inline-size: 34ch;
  margin-inline: auto;
}

.memorial__quote-source {
  margin-block-start: var(--space-12);
  margin-inline: auto;
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Page hero (short) — About / Our Work / Communities openings
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block-start: clamp(72px, 10vw, 120px);
}

.page-hero__title {
  margin-block-start: var(--space-16);
  max-inline-size: 22ch;
  color: var(--paper);
}

.page-hero .section-heading__rule {
  margin-block-start: var(--space-24);
  margin-inline: 0;
}

.page-hero__intro {
  margin-block-start: var(--space-24);
  max-inline-size: 52ch;
  color: var(--navy-mist);
}

/* --------------------------------------------------------------------------
   Mission & Vision (About)
   -------------------------------------------------------------------------- */

.mv-grid {
  display: grid;
  gap: var(--space-48);
}

@media (min-width: 800px) {
  .mv-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

.mv-grid .label {
  margin-block-end: var(--space-16);
}

.mv-grid p {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.5;
}

.mv-grid strong {
  font-weight: 650;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   Values (About) — definition list, not cards
   -------------------------------------------------------------------------- */

.values {
  display: grid;
  gap: 0 clamp(32px, 5vw, 80px);
  max-inline-size: 960px;
}

@media (min-width: 700px) {
  .values {
    grid-template-columns: 1fr 1fr;
  }
}

.values__row {
  border-block-start: 1px solid var(--line);
  padding-block: var(--space-24) var(--space-32);
}

.values__row dt {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--gold-ink-deep);
}

.values__row dd {
  margin: var(--space-8) 0 0;
  color: var(--muted);
  font-size: var(--fs-small);
  max-inline-size: 44ch;
}

/* --------------------------------------------------------------------------
   Work areas (/our-work/) — prose sections with icon disc + optional pill
   -------------------------------------------------------------------------- */

.area-icon {
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold-ink-deep);
  margin-block-end: var(--space-16);
}

.band--cream .area-icon {
  background: var(--white);
}

.pill {
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  margin-inline-start: var(--space-12);
  padding: var(--space-4) var(--space-12);
  border: 1px solid var(--ember);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ember-deep); /* ember itself fails AA at this size */
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.band--cream .pill {
  background: var(--white);
}

/* --------------------------------------------------------------------------
   Team grid (About / kitchen-sink)
   -------------------------------------------------------------------------- */

.team-grid {
  display: grid;
  gap: var(--space-32);
  list-style: none;
  padding: 0;
}

@media (min-width: 700px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.team-member__photo {
  aspect-ratio: 4 / 5;
  max-inline-size: 240px;
  margin-block-end: var(--space-16);
}

.team-member__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.team-member__name--pending {
  color: var(--muted);
}

.team-member__role {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-start: var(--space-4);
}

.team-member__line {
  margin-block-start: var(--space-8);
  font-size: var(--fs-small);
  color: var(--muted);
  max-inline-size: 32ch;
}

/* --------------------------------------------------------------------------
   Prose helpers for the reading pages
   -------------------------------------------------------------------------- */

.signature {
  margin-block-start: var(--space-24);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-body);
  text-align: end;
  max-inline-size: var(--measure);
  color: var(--ink);
}

.source-note {
  margin-block-start: var(--space-16);
  font-size: var(--fs-label);
  color: var(--muted);
}

.challenge {
  max-inline-size: var(--measure);
}

.challenge + .challenge {
  margin-block-start: var(--space-48);
}

.challenge h3 {
  margin-block-end: var(--space-24);
}

/* --------------------------------------------------------------------------
   Memorial hero (/dr-kishor/ page opening) — a memoir's first page
   -------------------------------------------------------------------------- */

.memorial-hero {
  padding-block-start: clamp(96px, 14vw, 160px);
  text-align: center;
}

.memorial-hero__portrait-wrap {
  inline-size: min(280px, 64vw);
  margin-inline: auto;
  margin-block-end: var(--space-48);
}

.memorial-hero__name {
  font-size: var(--fs-display);
  font-weight: 550;
}

.memorial-hero__dates {
  margin-block-start: var(--space-16);
  margin-inline: auto;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.memorial-hero__epitaph {
  margin-block-start: var(--space-32);
  margin-inline: auto;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--gold-ink-deep);
}

/* Epigraph directly after the memorial hero: same page of the memoir */
.epigraph-band {
  padding-block-start: 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Chapters (/dr-kishor/) — prose at reading measure, wide right gutter
   -------------------------------------------------------------------------- */

[id] {
  scroll-margin-top: 96px; /* anchors clear the sticky header */
}

.chapter__grid {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
}

/* The right gutter exists only when the chapter carries a photo;
   photo-less chapters read at the full prose measure. */
@media (min-width: 900px) {
  .chapter__grid--with-photo {
    grid-template-columns: minmax(0, 62ch) 1fr;
    align-items: start;
  }
}

.chapter__label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink-deep);
  margin-block-end: var(--space-12);
}

.chapter h2,
.chapter__grid h2 {
  margin-block-end: var(--space-24); /* text never sits directly on a heading */
}

.chapter__gutter .photo-ph {
  aspect-ratio: 4 / 5;
  max-inline-size: 280px;
  outline: 1px solid var(--line);
  outline-offset: 6px;
}

.chapter__gutter .photo-ph--landscape {
  aspect-ratio: 3 / 2;
  max-inline-size: 380px;
}

@media (min-width: 900px) {
  .chapter__gutter .photo-ph {
    margin-block-start: var(--space-96); /* sits a little below the heading */
  }
}

.chapter__pull {
  margin-block: var(--space-48);
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 550;
  line-height: 1.25;
  color: var(--navy);
  max-inline-size: 26ch;
}

/* --------------------------------------------------------------------------
   Memorial strip (Home, later About) — one quiet row, not a card
   -------------------------------------------------------------------------- */

.memorial-strip__row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  justify-content: center;
}

.memorial-strip__portrait-wrap {
  inline-size: 120px;
  flex-shrink: 0;
}

.memorial-strip__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.memorial-strip__dates {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-inline-start: var(--space-8);
}

.memorial-strip__line {
  margin-block: var(--space-8) var(--space-12);
  max-inline-size: 52ch;
  font-size: var(--fs-small);
  color: var(--muted);
}

@media (max-width: 599px) {
  .memorial-strip__row {
    flex-direction: column;
    text-align: center;
  }

  .memorial-strip__line {
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */

.timeline {
  position: relative;
  max-inline-size: 720px;
  margin-inline: auto;
  padding-inline-start: 132px;
}

.timeline::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 107px;
  inline-size: 2px;
  background: var(--line);
}

.timeline__progress {
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 107px;
  inline-size: 2px;
  background: var(--gold-ink);
  transform-origin: top;
  scale: 1 var(--tl-progress, 0);
}

.no-js .timeline__progress,
.timeline--static .timeline__progress {
  scale: 1 1;
}

.timeline__entry {
  position: relative;
  padding-block-end: var(--space-64);
}

.timeline__entry:last-child {
  padding-block-end: 0;
}

.timeline__marker {
  position: absolute;
  inset-inline-start: -31px;
  inset-block-start: 6px;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--muted);
  transition: background 400ms ease, border-color 400ms ease;
}

.timeline__year {
  position: absolute;
  inset-inline-start: -132px;
  inset-block-start: 0;
  inline-size: 88px;
  text-align: end;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--muted);
  transition: color 400ms ease;
}

.timeline__entry.is-active .timeline__marker {
  background: var(--gold);
  border-color: var(--gold-ink);
}

/* The CURRENT marker — the most recently lit chapter — carries the ember.
   Pure CSS: the last .is-active entry (either followed by an inactive one,
   or the final entry). Degrades to gold where :has() is unsupported. */
.timeline__entry.is-active:has(+ .timeline__entry:not(.is-active)) .timeline__marker,
.timeline__entry.is-active:last-child .timeline__marker {
  background: var(--ember);
  border-color: var(--ember-deep);
}

.timeline__entry.is-active .timeline__year {
  color: var(--gold-ink-deep);
}

.no-js .timeline__entry .timeline__marker,
.timeline--static .timeline__entry .timeline__marker {
  background: var(--gold);
  border-color: var(--gold-ink);
}

.timeline__entry h3 {
  margin-block-end: var(--space-8);
}

.timeline__entry h3 a {
  color: inherit;
  text-decoration: none;
}

.timeline__entry h3 a:hover {
  color: var(--gold-ink-deep);
}

.timeline__entry p {
  color: var(--muted);
  font-size: var(--fs-small);
  max-inline-size: 48ch;
}

@media (max-width: 699px) {
  .timeline {
    padding-inline-start: 32px;
  }

  .timeline::before,
  .timeline__progress {
    inset-inline-start: 7px;
  }

  .timeline__marker {
    inset-inline-start: -31px;
  }

  .timeline__year {
    position: static;
    inline-size: auto;
    text-align: start;
    display: block;
    margin-block-end: var(--space-4);
    color: var(--gold-ink-deep);
  }
}

/* --------------------------------------------------------------------------
   Gallery + lightbox
   -------------------------------------------------------------------------- */

/* Uniform grid: every tile 4:3, first tile spans two columns and fills
   its row's height. No mixed aspects, no holes (use 1 + 3n tiles). */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
}

@media (min-width: 800px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery__item {
  display: block;
  border: 0;
  padding: 0;
  background: none;
}

.js .gallery__item {
  cursor: zoom-in;
}

.gallery__item:first-child {
  grid-column: span 2;
}

.gallery__item picture {
  display: block;
  block-size: 100%;
}

.gallery__item .photo {
  aspect-ratio: 4 / 3;
  inline-size: 100%;
}

.gallery__item:first-child .photo {
  aspect-ratio: auto;
  block-size: 100%;
  min-block-size: 100%;
}

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-inline-size: min(92vw, 1000px);
}

.lightbox::backdrop {
  background: rgba(15, 32, 56, 0.82);
}

.lightbox__frame img {
  display: block;
  margin-inline: auto;
  max-inline-size: min(88vw, 900px);
  max-block-size: 76vh;
  inline-size: auto;
  block-size: auto;
  border-radius: var(--radius-card);
}

.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--space-12);
  color: var(--cream);
}

.lightbox__btn {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(251, 244, 224, 0.4);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.lightbox__btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 48px);
  max-inline-size: 560px;
}

.form-card h3 {
  margin-block-end: var(--space-24);
}

.field {
  margin-block-end: var(--space-16);
}

.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  margin-block-end: var(--space-4);
}

.field input,
.field textarea,
.field select {
  inline-size: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: var(--space-12) var(--space-16);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 1px;
  border-color: var(--gold-ink);
}

.field__error {
  display: none;
  margin-block-start: var(--space-4);
  font-size: var(--fs-label);
  color: var(--error);
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--error);
}

.field input:user-invalid ~ .field__error,
.field textarea:user-invalid ~ .field__error {
  display: block;
}

.form-note {
  font-size: var(--fs-label);
  color: var(--muted);
  margin-block-end: var(--space-16);
}

.form-submit {
  font: inherit;
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--navy-deep);
  background: var(--gold);
  border: 0;
  border-radius: var(--radius-input);
  padding: var(--space-12) var(--space-32);
  cursor: pointer;
  transition: background 150ms ease;
}

.form-submit:hover {
  /* raw ember fails 4.5:1 with any text at this size; deep ember + white passes (5.46) */
  background: var(--ember-deep);
  color: var(--white);
}

.form-row {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 560px) {
  .form-row--inline {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* --------------------------------------------------------------------------
   Bank details card (Get Involved · Support Us)
   -------------------------------------------------------------------------- */

.bank-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 48px);
  max-inline-size: 720px;
  display: grid;
  gap: var(--space-32);
}

@media (min-width: 700px) {
  .bank-card--with-qr {
    grid-template-columns: 1fr 180px;
    align-items: start;
  }
}

.bank-card dl {
  display: grid;
  gap: var(--space-16);
  margin: 0;
}

.bank-card__row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 560px) {
  .bank-card__row {
    grid-template-columns: 11em 1fr auto;
    align-items: baseline;
    gap: var(--space-16);
  }
}

.bank-card dt {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.bank-card dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.copy-btn {
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--gold-ink-deep);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px var(--space-8);
  cursor: pointer;
}

.copy-btn:hover {
  border-color: var(--gold-ink);
}

.no-js .copy-btn {
  display: none;
}

.bank-card__qr {
  inline-size: 180px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
}

/* --------------------------------------------------------------------------
   Contact card (Contact page)
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--space-48);
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr minmax(0, 560px);
    gap: clamp(48px, 6vw, 96px);
  }
}

.contact-info {
  font-style: normal;
  display: grid;
  gap: var(--space-24);
  align-content: start;
}

.contact-info h2 {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink-deep);
  margin-block-end: var(--space-4);
}

/* --------------------------------------------------------------------------
   Membership (Get Involved · inside Support Us)
   -------------------------------------------------------------------------- */

.membership {
  margin-block-start: var(--space-32);
  max-inline-size: 480px;
}

.membership h3 {
  margin-block-end: var(--space-16);
}

.membership dl {
  margin: 0 0 var(--space-16);
  border-block-start: 1px solid var(--line);
}

.membership .membership__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-12);
  border-block-end: 1px solid var(--line);
}

.membership dt {
  font-weight: 700;
}

.membership dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--gold-ink-deep);
}

.membership p {
  font-size: var(--fs-small);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Poem (memorial page + Home excerpt) — Marathi, Mukta, unhurried
   -------------------------------------------------------------------------- */

.poem-band {
  text-align: center;
}

.poem__dedication {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-inline: auto;
}

.poem__title {
  margin-block-start: var(--space-12);
  margin-inline: auto;
  font-weight: 400; /* keeps Devanagari to the single Mukta 400 file */
}

.poem__poet {
  margin-block-start: var(--space-8);
  margin-inline: auto;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold-ink-deep);
}

.poem__stanzas {
  margin-block-start: var(--space-48);
  display: grid;
  gap: var(--space-24);
  justify-items: center;
}

.poem__stanza {
  margin: 0;
  max-inline-size: 34ch;
  font-family: "Mukta", var(--font-body);
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Event photo grid (uniform 4:3; 3-col desktop / 2-col mobile)
   -------------------------------------------------------------------------- */

.event-gallery {
  margin-block-start: var(--space-32);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
}

@media (min-width: 800px) {
  .event-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.event-gallery__item {
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-card);
}

.event-gallery__item .photo {
  aspect-ratio: 4 / 3;
}

.event-gallery__more {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--cream);
  color: var(--gold-ink-deep);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.event-gallery__more:hover {
  border-color: var(--gold-ink);
}

.no-js .event-gallery__more {
  display: none;
}

.event-block {
  margin-block-start: var(--space-48);
  padding-block-start: var(--space-32);
  border-block-start: 1px solid var(--line);
}

.event-block h3 {
  margin-block-end: var(--space-8);
}

.event-block__date {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink-deep);
  margin-block-end: var(--space-16);
}

/* --------------------------------------------------------------------------
   Downloads list
   -------------------------------------------------------------------------- */

.downloads {
  list-style: none;
  padding: 0;
  max-inline-size: 640px;
  border-block-start: 1px solid var(--line);
}

.downloads li {
  border-block-end: 1px solid var(--line);
}

.download-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-16);
  text-decoration: none;
  color: var(--ink);
}

.download-row:hover .download-row__title {
  color: var(--gold-ink-deep);
}

.download-row__icon {
  color: var(--gold-ink);
  flex-shrink: 0;
}

.download-row__title {
  font-weight: 700;
  font-size: var(--fs-small);
}

.download-row__meta {
  margin-inline-start: auto;
  font-size: var(--fs-label);
  color: var(--muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--white);
  padding-block: var(--space-64) var(--space-32);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-48);
}

@media (min-width: 800px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer__mission {
  margin-block-start: var(--space-16);
  max-inline-size: 34ch;
  color: color-mix(in srgb, var(--white) 82%, var(--navy));
  font-size: var(--fs-small);
}

.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: var(--space-16);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

.site-footer a {
  color: color-mix(in srgb, var(--white) 88%, var(--navy));
  text-decoration: none;
  font-size: var(--fs-small);
}

.site-footer a:hover {
  color: var(--gold);
}

.site-footer__contact {
  font-style: normal;
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--white) 70%, var(--navy));
}

.site-footer__social {
  display: flex;
  gap: var(--space-16);
  margin-block-start: var(--space-16);
}

.site-footer__social a {
  color: color-mix(in srgb, var(--white) 75%, var(--navy));
}

.site-footer__social a:hover {
  color: var(--gold);
}

.site-footer__legal {
  margin-block-start: var(--space-64);
  padding-block-start: var(--space-24);
  border-block-start: 1px solid rgba(251, 244, 224, 0.15);
  font-size: var(--fs-label);
  color: color-mix(in srgb, var(--white) 60%, var(--navy));
}

/* --------------------------------------------------------------------------
   Impact counters (built, dormant — activates in Care Plan when real data exists)
   -------------------------------------------------------------------------- */

.impact-counters {
  display: grid;
  gap: var(--space-48);
  text-align: center;
}

@media (min-width: 700px) {
  .impact-counters {
    grid-template-columns: repeat(3, 1fr);
  }
}

.impact-counter__number {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 600;
  color: var(--gold-ink);
  line-height: 1;
}

.impact-counter__caption {
  margin-block-start: var(--space-8);
  margin-inline: auto;
  font-size: var(--fs-small);
  color: var(--muted);
  max-inline-size: 22ch;
}

/* --------------------------------------------------------------------------
   Kitchen-sink page chrome (review only; not part of the site)
   -------------------------------------------------------------------------- */

.ks-label {
  padding-block: var(--space-24) var(--space-8);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ks-note {
  font-size: var(--fs-small);
  color: var(--muted);
  max-inline-size: 68ch;
  padding-block-end: var(--space-16);
}