@font-face { font-family: 'DM Sans'; src: url('assets/dm-sans-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('assets/dm-sans-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

/* A restrained foundation identity, with orange from the original emblem. */
:root {
  --paper: #fff;
  --ink: #202523;
  --brick: #a33e2d;
  --brick-deep: #7b2d21;
  --muted: #5e6561;
  --line: #dce0da;
  --pale: #f3f4f0;
  --orange: #f28b29;
  --forest: #182d29;
  --dark: #6e2a1e;          /* the site's one dark ground, a deep brick */
  --sans: 'DM Sans', Arial, sans-serif;
  --serif: 'Iowan Old Style', Baskerville, Georgia, serif;
  --page-gutter: max(5.3vw, calc((100vw - 1430px) / 2));
  --band: 6rem;             /* every content band uses this */
  --band-mobile: 4rem;
  --band-tight: 4rem;       /* thin strips only */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.1; letter-spacing: -.04em; }
h2 { font-size: clamp(2.25rem, 3.7vw, 3.5rem); }
::selection { background: var(--select); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brick); outline-offset: 6px; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; background: var(--brick); color: #fff; padding: 12px 20px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { min-height: 104px; padding: 1.3rem var(--page-gutter); border-top: 4px solid var(--orange); background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: .875rem; flex-shrink: 0; }
.brand img { width: 54px; height: auto; }
.brand-name { color: var(--ink); font-size: 1.5rem; font-weight: 600; letter-spacing: -.045em; line-height: 1.05; white-space: nowrap; }
.brand-subtitle { display: block; font-size: .6875rem; font-weight: 400; letter-spacing: .17em; margin-top: .45rem; }
.site-header nav { display: flex; align-items: center; font-size: .875rem; gap: 1.9rem; }
.site-header nav>a:not(.action) { padding: .7rem 0; text-underline-offset: .4rem; }
.site-header nav>a:not(.action):hover { color: var(--brick); text-decoration: underline; }
.menu-toggle { display: none; }
.action { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; min-height: 52px; padding: .875rem 1.35rem; font-size: .875rem; font-weight: 600; border: 1px solid transparent; transition: background .2s, color .2s; }
.action>span { font-size: 1.35rem; line-height: 1; font-weight: 400; }
.action-orange { background: var(--orange); color: var(--ink); }
.action-orange:hover { background: var(--orange-bright); }
.action-brick { background: var(--brick); color: #fff; }
.action-brick:hover { background: var(--brick-deep); }
.header-action { min-height: 46px; gap: 1.5rem; padding: .6rem 1.1rem; }
.text-link { display: inline-flex; align-items: center; gap: 1.5rem; min-height: 44px; font-size: .875rem; font-weight: 600; color: var(--brick); padding: .4rem 0; border-bottom: 1px solid currentColor; line-height: 1.5; }
.text-link>span { font-size: 1.25rem; font-weight: 400; transition: transform .2s; }
.text-link:hover>span { transform: translate(2px,-2px); }
.kicker { font-size: .75rem; line-height: 1.5; letter-spacing: .12em; font-weight: 600; color: var(--brick); }
.light-kicker { color: #fff; display: flex; align-items: center; gap: .875rem; }
.light-kicker::before { content: ''; width: 2rem; height: 3px; background: var(--orange); flex: 0 0 auto; }
.section { padding: var(--band) var(--page-gutter); }
.about-copy .text-link { margin-top: 1.6rem; }
.work-introduction .kicker { padding-top: .6rem; }
.families-story .text-link { margin-top: 1rem; }
#food, #families, #frontline, #initiatives { scroll-margin-top: 2rem; }
footer { background: var(--pale); border-top: 1px solid var(--line); padding: 4.5rem var(--page-gutter) 1.5rem; }
.footer-top, .footer-bottom { width: 100%; }
.footer-top { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(28rem, 1.1fr); gap: clamp(4rem,9vw,9rem); align-items: start; padding-bottom: 4rem; }
.footer-identity { max-width: 29rem; }
.footer-details { display: grid; grid-template-columns: minmax(16rem,1.3fr) minmax(10rem,.7fr); gap: clamp(2.5rem,5vw,5rem); padding-top: .35rem; }
.footer-label { display: block; color: var(--brick); font-size: .6875rem; font-weight: 600; letter-spacing: .13em; line-height: 1; margin-bottom: 1.15rem; text-transform: uppercase; }
address { color: var(--muted); font-style: normal; font-size: .8125rem; line-height: 1.85; }
.contact-link { display: flex; align-items: center; width: fit-content; min-height: 44px; font-size: .875rem; }
.contact-link:hover { color: var(--brick); text-decoration: underline; text-underline-offset: .25rem; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .6875rem; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }

@media (min-width:1600px) {
  .site-header { padding-left: calc((100vw - 1430px)/2); padding-right: calc((100vw - 1430px)/2); }}
@media (max-width:1100px) {
  .site-header nav { gap: 1.3rem; }
  .brand-name { font-size: 1.3rem; }
  .site-header { padding-left: 5.3%; padding-right: 5.3%; }
  .section { padding-top: 5rem; padding-bottom: 5rem; }
  .footer-top { gap: 4rem; }
  .footer-details { gap: 2.5rem; }}
@media (max-width:850px) and (min-width:761px) {
  .site-header { flex-wrap: wrap; justify-content: center; gap: .75rem; }
  .site-header nav { width: 100%; justify-content: center; }
  .brand-name { font-size: 1.5rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2.75rem; }
  .footer-identity { max-width: 34rem; }
  .footer-details { max-width: 42rem; }}
@media (max-width:760px) {
  html { scroll-padding-top: 1rem; }
  .site-header { padding: 1rem 6%; min-height: 91px; gap: .75rem; }
  .brand-name { font-size: 1.25rem; letter-spacing: -.035em; }
  .brand-subtitle { font-size: .625rem; letter-spacing: .13em; }
  .brand img { width: 46px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: .625rem; padding: .625rem 0 .625rem .625rem; border: 0; background: none; color: var(--ink); font-size: .875rem; cursor: pointer; }
  .menu-lines { width: 19px; height: 13px; border-top: 1px solid; border-bottom: 1px solid; position: relative; }
  .menu-lines::after { content: ''; position: absolute; left: 0; right: 0; top: 5px; border-top: 1px solid; }
  /* The icon stays three bars whether the menu is open or closed. */
  .menu-toggle[aria-expanded="true"] { color: var(--brick); }
  .site-header nav { position: absolute; top: 100%; left: 0; right: 0; padding: 1rem 6% 1.5rem; background: var(--paper); border-bottom: 1px solid var(--line); display: none; align-items: stretch; flex-direction: column; gap: .25rem; font-size: 1rem; }
  .site-header nav.is-open { display: flex; }
  .site-header .header-action { align-self: flex-start; margin-top: .65rem; }
  .light-kicker::before { width: 1.5rem; }
  h2 { font-size: clamp(2.25rem,6.8vw,3rem); }
  .section { padding: var(--band-mobile) 6%; }
  .kicker { font-size: .6875rem; letter-spacing: .1em; }
  .about-copy .text-link { margin-top: 1.25rem; }
  footer { padding: 3.5rem 6% 1.5rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
  .footer-details { grid-template-columns: 1.25fr .75fr; gap: 2rem; padding-top: 0; }
  .footer-bottom { flex-wrap: wrap; gap: 1rem; }
  .footer-bottom>span:first-child { width: 100%; }}
@media (max-width:520px) {
  .footer-details { grid-template-columns: 1fr; gap: 2rem; }}
@media (max-width:380px) {
  .site-header, .section { padding-left: 5%; padding-right: 5%; }
  .brand { gap: .6rem; }
  .brand-name { font-size: 1.08rem; }
  .brand-subtitle { font-size: .55rem; }
  .brand img { width: 39px; }
  .menu-toggle { font-size: .8125rem; }}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none!important; transition: none!important; }}

/* ===============================================================
   Multi-page layout: home, who we are, our work, contact.
   =============================================================== */

.site-header nav>a[aria-current] { color: var(--brick); text-decoration: underline; text-underline-offset: .4rem; }
.site-header nav>a.action[aria-current] { color: #fff; text-decoration: none; }

/* --- Lead (home hero) and page heads --- */
.lead { position: relative; overflow: hidden; background: linear-gradient(115deg, var(--hero-a) 0 64%, var(--hero-b) 64% 100%); color: var(--ink-on-orange); }
.lead::after { content: ''; position: absolute; top: 50%; right: 6%; width: min(31vw, 450px); aspect-ratio: 1; transform: translateY(-50%); border: 1px solid rgba(255,241,222,.56); border-radius: 50%; background: radial-gradient(circle, var(--hero-detail) 0 3.5%, transparent 4% 28%, rgba(255,241,222,.34) 28.5% 29%, transparent 29.5% 43%, rgba(123,45,33,.32) 43.5% 44%, transparent 44.5%), repeating-conic-gradient(from 0deg, rgba(255,241,222,.24) 0 1deg, transparent 1deg 15deg); }
.lead .light-kicker, .page-head .light-kicker { color: var(--ink-on-orange); }
.lead .light-kicker::before, .page-head .light-kicker::before { background: var(--hero-detail); }
.page-head { background: linear-gradient(115deg, var(--hero-a) 0 72%, var(--hero-b) 72% 100%); color: var(--ink-on-orange); }
.lead-inner, .page-head-inner { padding: 3.75rem var(--page-gutter) 3.25rem; }
.lead-inner { position: relative; z-index: 1; min-height: 470px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-right: 39%; }
.page-head-inner { padding: 4.25rem var(--page-gutter) 3.5rem; }
.lead h1, .page-head h1 { letter-spacing: -.045em; margin: 1.5rem 0 0; }
.lead h1 { max-width: 800px; margin-top: 1.25rem; color: var(--ink); font-family: var(--serif); font-size: clamp(3.2rem,5.25vw,5rem); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.page-head h1 { color: var(--ink-on-orange); font-size: clamp(2.2rem,4.2vw,3.9rem); line-height: 1.06; }
.lead-body { max-width: 36rem; font-size: 1.075rem; line-height: 1.7; color: var(--ink-on-orange); margin: 1.5rem 0 1.85rem; }
.page-head-body { max-width: 34rem; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-on-orange); margin-top: 1.5rem; }
.lead :focus-visible { outline-color: var(--ink); }
.page-head :focus-visible { outline-color: var(--ink); }
.lead .action-orange { background: var(--dark); color: var(--on-dark); }
.lead .action-orange:hover { background: var(--dark-deep); }

.jump { display: flex; flex-wrap: wrap; gap: .6rem .5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(81,41,31,.38); }
.jump a { font-size: .8125rem; padding: .45rem .9rem; border: 1px solid rgba(81,41,31,.52); border-radius: 100px; color: var(--ink-on-orange); }
.jump a:hover { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }

/* --- Shared section furniture --- */
.section-title { font-size: .75rem; letter-spacing: .12em; font-weight: 600; color: var(--brick); text-transform: uppercase; margin-bottom: 2.5rem; }

/* --- Home: featured story --- */
.feature { background: var(--paper); border-bottom: 1px solid var(--line); }
.feature-inner { padding: var(--band) var(--page-gutter); }
.feature-figure { position: relative; margin: 0; }
.feature-figure img { width: 100%; height: auto; }
.feature-heading { max-width: 19rem; margin-bottom: 1.5rem; }
.feature-heading h2 { color: var(--ink); font-family: var(--serif); font-size: clamp(1.4rem,1.9vw,1.75rem); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; margin-top: .55rem; }
.feature-figure figcaption { display: inline-block; margin-top: 0; padding: .65rem .9rem .65rem 1rem; color: var(--brick-deep); background: var(--sand-soft); border-left: 3px solid var(--orange); font-size: .8125rem; line-height: 1.5; letter-spacing: .015em; }
.feature-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; align-items: end; margin-top: 2.5rem; }
.feature-copy-text { max-width: 48rem; }
.feature-copy-text p + p { margin-top: 1rem; }
.feature-copy p { color: var(--muted); }
.feature-copy .text-link { margin-bottom: .15rem; white-space: nowrap; }

/* --- Home: identity and a clear map of the work --- */
.home-overview { background: var(--dark); color: var(--on-dark); }
.home-overview-inner { padding: var(--band) var(--page-gutter); display: grid; grid-template-columns: minmax(17rem,.82fr) minmax(0,1.18fr); gap: clamp(4.5rem,8vw,8.5rem); align-items: start; }
.home-overview .kicker { color: var(--on-dark-accent); }
.overview-intro h2 { max-width: 32rem; margin: 1.25rem 0 1.75rem; color: var(--on-dark); font-family: var(--serif); font-size: clamp(2.4rem,4.2vw,4.4rem); font-weight: 400; line-height: 1.02; }
.overview-intro > p:not(.kicker) { max-width: 33rem; color: var(--on-dark-muted); }
.overview-intro > p + p { margin-top: 1rem; }
.overview-intro .text-link { margin-top: 1.65rem; color: var(--on-dark-accent); }
.home-overview :focus-visible, .partnership-record :focus-visible { outline-color: var(--on-dark-accent); }
.work-paths { border-top: 1px solid var(--band-rule); }
.work-path { display: grid; grid-template-columns: 2.75rem minmax(0,1fr) auto; gap: 1.25rem; align-items: start; min-height: 148px; padding: 1.75rem .35rem 1.75rem 0; border-bottom: 1px solid var(--band-rule); transition: background-color .2s, padding-left .2s; }
.work-path:hover { padding-left: .75rem; background: var(--band-hover); }
.work-path-number { padding-top: .35rem; color: var(--on-dark-accent); font-size: .72rem; font-weight: 600; letter-spacing: .1em; }
.work-path-copy { display: block; }
.work-path-copy strong { display: block; margin-bottom: .6rem; color: var(--on-dark); font-family: var(--serif); font-size: clamp(1.55rem,2.15vw,2.05rem); font-weight: 400; line-height: 1.12; letter-spacing: -.025em; }
.work-path-copy > span { display: block; max-width: 39rem; color: var(--on-dark-muted); font-size: .9375rem; line-height: 1.7; }
.work-path-arrow { color: var(--on-dark-accent); font-size: 1.35rem; line-height: 1; transition: transform .2s; }
.work-path:hover .work-path-arrow { transform: translate(2px,-2px); }

/* --- Home: culture and service through Surbhi --- */
.surbhi-feature { background: var(--sand); border-top: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm); }
.surbhi-feature-inner { padding: var(--band) var(--page-gutter); display: block; }
.surbhi-feature-figure { margin: 3rem 0 0; }
.surbhi-feature-figure img { width: 100%; height: auto; }
.surbhi-feature-figure figcaption { display: inline-block; padding: .7rem 1rem; border-left: 3px solid var(--brick); background: var(--sand-soft); color: var(--brick-deep); font-size: .8125rem; line-height: 1.5; }
.surbhi-motto { margin-bottom: 1.75rem; color: var(--brick-deep); font-family: var(--serif); font-size: clamp(1.5rem,2.4vw,2.15rem); line-height: 1.3; }
.surbhi-feature-copy h2 { max-width: 24ch; margin: 1rem 0 1.5rem; color: var(--ink); font-family: var(--serif); font-size: clamp(2.5rem,4.4vw,4.5rem); font-weight: 400; line-height: .98; }
.surbhi-feature-text { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem; max-width: 68rem; }
.surbhi-feature-text p { color: var(--muted); }

.surbhi-feature-copy .text-link { margin-top: 1.65rem; }

/* --- Home: dated records from the work --- */
.recent-records { background: var(--paper); }
.recent-records-inner { padding: var(--band) var(--page-gutter); }
.records-heading { display: grid; grid-template-columns: minmax(9rem,.55fr) minmax(18rem,1fr) auto; gap: 2rem 4rem; align-items: end; margin-bottom: 3.5rem; }
.records-heading .kicker { align-self: start; padding-top: .55rem; }
.records-heading h2 { max-width: 35rem; font-family: var(--serif); font-weight: 400; line-height: 1.02; }
.records-heading .text-link { justify-self: end; }
.records-grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); gap: 2rem; align-items: start; }
.record-card { border-top: 3px solid var(--orange); background: var(--pale); }
.record-card-image { display: block; }
.record-card-image img { width: 100%; height: auto; }
.record-card-copy { padding: 2rem 2rem 2.25rem; }
.record-meta { color: var(--brick); font-size: .75rem; font-weight: 600; line-height: 1.5; letter-spacing: .1em; }
.record-card h3 { max-width: 33rem; margin: .9rem 0 1rem; color: var(--ink); font-family: var(--serif); font-size: clamp(1.85rem,2.8vw,2.7rem); font-weight: 400; line-height: 1.05; }
.record-card h3 a:hover { color: var(--brick); }
.record-card-copy > p:not(.record-meta) { max-width: 40rem; color: var(--muted); }
.record-link { display: inline-flex; align-items: center; gap: 1.25rem; min-height: 44px; margin-top: 1.35rem; color: var(--brick); font-size: .875rem; font-weight: 600; border-bottom: 1px solid currentColor; }
.record-link span { font-size: 1.15rem; transition: transform .2s; }
.record-link:hover span { transform: translate(2px,-2px); }
.planning-card { background: var(--paper); }

/* --- Home: organisations close to the work --- */
.collaboration-strip { background: var(--pale); border-top: 1px solid var(--line); }
.collaboration-strip-inner { padding: var(--band-tight) var(--page-gutter); display: grid; grid-template-columns: minmax(18rem,.8fr) minmax(0,1.2fr); gap: clamp(4rem,8vw,8rem); align-items: start; }
.collaboration-copy h2 { max-width: 34rem; margin-top: 1rem; font-family: var(--serif); font-size: clamp(2.1rem,3.3vw,3.35rem); font-weight: 400; line-height: 1.04; }
.collaboration-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; border-top: 1px solid var(--line-strong); }
.collaboration-list li { min-height: 74px; padding: 1.45rem 0; border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: .9375rem; font-weight: 600; }

/* --- Prose pages --- */
.prose.alt { background: var(--pale); }
.prose-body { max-width: 44rem; }
.prose-lead { font-size: 1.3125rem; line-height: 1.6; letter-spacing: -.01em; margin-bottom: 1.5rem; }
.prose-body p:not(.prose-lead):not(.creed-translation) { color: var(--muted); margin-bottom: 1.1rem; }
.prose-body .text-link { margin-top: 1rem; }
.creed { margin: 2.5rem 0; padding: 2.25rem 2.5rem; border-top: 3px solid var(--orange); background: var(--pale); }
.creed p[lang="hi"] { font-family: var(--serif); font-size: clamp(1.65rem,3vw,2.4rem); line-height: 1.45; color: var(--brick-deep); margin-bottom: 1.25rem; }
.creed-translation { padding-top: 1.15rem; border-top: 1px solid var(--line-strong); font-size: 1.0625rem; line-height: 1.7; color: var(--brick-deep); }
.homepage-creed-section { background: var(--paper); border-bottom: 1px solid var(--line); }
.homepage-creed-inner { padding: 0 var(--page-gutter) var(--band); }
.creed.homepage-creed { max-width: 44rem; margin: 0; }
.trustees { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .875rem; }

/* --- Work stories --- */
.story { border-top: 1px solid var(--line); }
.story.alt { background: var(--pale); border-top-color: transparent; }
.story-featured { border-top: 0; }
.story-inner { padding: var(--band) var(--page-gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.story-inner-text { grid-template-columns: 1fr; }
.story-inner-text .story-copy { max-width: 44rem; }
.story-figure { margin: 0; }
.story-figure img { width: 100%; height: auto; }
.story-figure figcaption { display: inline-block; margin-top: 0; padding: .65rem .9rem .65rem 1rem; border-left: 3px solid var(--orange); background: var(--sand-soft); color: var(--brick-deep); font-size: .8125rem; line-height: 1.5; letter-spacing: .015em; }
.story-copy h2 { font-size: clamp(1.9rem,2.9vw,2.75rem); margin: 1.15rem 0 1.5rem; }
.story-copy p { color: var(--muted); }
.story-copy p + p { margin-top: .9rem; }
.story { scroll-margin-top: 1.5rem; }

.partners { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 2rem; max-width: 32rem; }
.partners li { font-size: .875rem; font-weight: 600; color: var(--ink); padding-top: .8rem; border-top: 1px solid var(--line); }

.partnership-record { scroll-margin-top: 1.5rem; background: var(--dark); color: #fff; }
.partnership-record-inner { padding: var(--band) var(--page-gutter); }
.partnership-intro { display: grid; grid-template-columns: .75fr 1.5fr; gap: 1rem 4rem; align-items: start; }
.partnership-intro .kicker { color: var(--on-dark-accent); padding-top: .55rem; }
.partnership-intro h2 { max-width: 48rem; color: #fff; font-family: var(--serif); font-size: clamp(2.2rem,4vw,4.25rem); font-weight: 400; line-height: 1; letter-spacing: -.045em; }
.partnership-intro > p:not(.kicker), .partnership-intro .text-link { grid-column: 2; }
.partnership-intro > p:not(.kicker) { max-width: 45rem; margin-top: .75rem; color: var(--on-dark-muted); }
.partnership-intro .text-link { width: fit-content; margin-top: .7rem; color: var(--on-dark-accent); }
.cheque-gallery { margin-top: 4rem; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1.15rem; }
.cheque-gallery figure { grid-column: span 6; margin: 0; background: var(--paper); border: 1px solid var(--line); }
.cheque-gallery figure:nth-child(n+3) { grid-column: span 4; }
.cheque-gallery img { display: block; width: 100%; height: auto; }
.cheque-gallery figcaption { min-height: 3.75rem; padding: .85rem 1rem 1rem; border-top: 2px solid var(--orange); color: var(--on-dark-muted); font-size: .8125rem; line-height: 1.5; }

.work-record { scroll-margin-top: 1.5rem; background: var(--pale); border-top: 1px solid var(--line); }
.work-record-inner { padding: var(--band) var(--page-gutter); }
.work-record-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; }
.work-record-heading .kicker { padding-top: .65rem; }
.work-record-heading h2 { max-width: 44rem; font-family: var(--serif); font-weight: 400; line-height: 1.03; }
.record-list { margin-top: 3.5rem; border-top: 1px solid var(--line-strong); }
.record-item { display: grid; grid-template-columns: minmax(13rem,.7fr) 1.3fr; gap: 4rem; padding: 1.55rem 0; border-bottom: 1px solid var(--line-strong); }
.record-item h3 { font-size: 1rem; line-height: 1.5; letter-spacing: -.015em; }
.record-item p { max-width: 47rem; color: var(--muted); }
.planning-story { background: var(--paper); border-top: 3px solid var(--orange); }
.planning-story .story-inner { grid-template-columns: minmax(18rem,.85fr) minmax(0,1.15fr); }
.planning-kicker { color: var(--brick-deep); }

/* --- Contact --- */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3.5rem; }
.contact-card h2 { font-size: .75rem; letter-spacing: .12em; font-weight: 600; color: var(--brick); text-transform: uppercase; margin-bottom: 1.25rem; }
.contact-card p { color: var(--muted); margin-bottom: 1rem; }
.contact-card address { margin-bottom: 1rem; font-size: .9375rem; }
.contact-big { display: inline-block; font-size: clamp(1.5rem,2.4vw,2.1rem); font-weight: 600; letter-spacing: -.03em; }
.contact-big:hover { color: var(--brick); }
.contact-head { background: linear-gradient(115deg, var(--hero-a) 0 72%, var(--hero-b) 72% 100%); color: var(--ink-on-orange); }
.contact-head h1 { color: var(--ink); font-family: var(--serif); font-weight: 400; }
.contact-head .light-kicker { color: var(--ink-on-orange); }
.contact-head .page-head-body { color: var(--ink-on-orange); }
.contact-head :focus-visible { outline-color: var(--ink); }

@media (max-width:1100px) {
  .lead-inner { padding-right: 28%; }
  .lead::after { right: -13%; width: min(48vw, 430px); opacity: .58; }
  .pillar-grid, .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .home-overview-inner { gap: 3.5rem; }
  .surbhi-feature-text { grid-template-columns: 1fr; gap: 1rem; }
  .records-heading { grid-template-columns: minmax(8rem,.45fr) minmax(18rem,1fr); }
  .records-heading .text-link { grid-column: 2; justify-self: start; }
  .collaboration-strip-inner { gap: 3.5rem; }
  .story-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .planning-story .story-inner { grid-template-columns: 1fr; }
  .feature-copy { grid-template-columns: 1fr; gap: 1.75rem; }
  .feature-copy .text-link { width: fit-content; }
  .partnership-intro { grid-template-columns: 1fr; gap: 1rem; }
  .partnership-intro > p:not(.kicker), .partnership-intro .text-link { grid-column: 1; }
  .work-record-heading { grid-template-columns: 1fr 2.5fr; gap: 2rem; }
  .record-item { gap: 2.5rem; }
  .story-figure { order: -1; }}
@media (max-width:760px) {
  .lead { background: radial-gradient(circle at 108% 15%, rgba(255,241,222,.2), transparent 43%), var(--hero-a); }
  .lead::after { top: 4.25rem; right: -6.5rem; width: 16rem; transform: none; opacity: .22; }
  .lead-inner { min-height: 0; padding: 3.35rem 6% 3.2rem; }
  .lead h1 { font-size: clamp(2.9rem,12.4vw,4.1rem); line-height: .98; }
  .lead-body { font-size: 1.05rem; line-height: 1.68; margin: 1.4rem 0 1.8rem; }
  .page-head-inner { padding: 3rem 6% 2.5rem; }
  .lead h1 br, .page-head h1 br { display: none; }
  .feature-inner, .story-inner { padding: var(--band-mobile) 6%; }
  .feature-heading { max-width: 17rem; }
  .feature-heading h2 { font-size: 1.35rem; }
  .feature-figure figcaption { margin-top: .5rem; }
  .feature-copy { margin-top: 2rem; gap: 1.5rem; }
  .homepage-creed-inner { padding: 0 6% 3.5rem; }
  .home-overview-inner { padding: var(--band-mobile) 6%; grid-template-columns: 1fr; gap: 3.5rem; }
  .overview-intro h2 { font-size: clamp(2.45rem,11vw,3.5rem); }
  .work-path { grid-template-columns: 2.25rem minmax(0,1fr) auto; gap: .85rem; min-height: 0; padding: 1.5rem 0; }
  .work-path:hover { padding-left: 0; background: transparent; }
  .work-path-copy strong { font-size: 1.5rem; }
  .work-path-copy > span { font-size: .9rem; }
  .surbhi-feature-inner { padding: var(--band-mobile) 6%; }
  .surbhi-feature-figure { margin-top: 2rem; }
  .surbhi-feature-copy h2 { font-size: clamp(2.4rem,10.8vw,3.4rem); }
  .recent-records-inner { padding: var(--band-mobile) 6%; }
  .records-heading { grid-template-columns: 1fr; gap: .75rem; margin-bottom: 2.5rem; }
  .records-heading .kicker { padding-top: 0; }
  .records-heading .text-link { grid-column: 1; justify-self: start; margin-top: .5rem; }
  .records-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .record-card-copy { padding: 1.6rem 1.45rem 1.85rem; }
  .record-card h3 { font-size: clamp(1.8rem,8vw,2.35rem); }
  .collaboration-strip-inner { padding: var(--band-mobile) 6%; grid-template-columns: 1fr; gap: 2.5rem; }
  .collaboration-list { grid-template-columns: 1fr; }
  .collaboration-list li { min-height: 0; padding: 1.2rem 0; }
  .work-record-inner { padding: var(--band-mobile) 6%; }
  .work-record-heading, .record-item { grid-template-columns: 1fr; gap: .65rem; }
  .work-record-heading .kicker { padding-top: 0; }
  .record-list { margin-top: 2.5rem; }
  .record-item { padding: 1.35rem 0 1.5rem; }
  .partnership-record-inner { padding: var(--band-mobile) 6%; }
  .partnership-intro h2 { font-size: clamp(2.25rem,11vw,3.25rem); }
  .cheque-gallery { margin-top: 2.5rem; grid-template-columns: 1fr; gap: 1rem; }
  .cheque-gallery figure, .cheque-gallery figure:nth-child(n+3) { grid-column: 1; }
  .cheque-gallery figcaption { min-height: 0; }
  .prose-lead { font-size: 1.1875rem; }
  .creed { padding: 1.75rem 1.4rem 2rem; }
  .creed.homepage-creed { padding: 2rem 1.5rem 2.25rem; }
  .partners { grid-template-columns: 1fr; gap: .6rem; }
  .jump { margin-top: 1.75rem; }}
/* ===============================================================
   Gallery: the handover set on the work page, and the photos page.
   Placement follows the existing bands, so a set reads the same
   wherever it appears: kicker left, heading and copy right, then a
   12-column image grid with two wide frames and three narrower ones.
   =============================================================== */

/* --- Titled gallery inside the dark partnership band --- */
.gallery-head { margin-top: 3.75rem; padding-top: 1.75rem; border-top: 1px solid var(--band-rule); }
.gallery-head h3 { color: var(--on-dark); font-family: var(--serif); font-size: clamp(1.5rem,2.3vw,2.1rem); font-weight: 400; line-height: 1.15; letter-spacing: -.03em; }
.gallery-head p { margin-top: .45rem; color: var(--on-dark-muted); font-size: .9375rem; }
.partnership-record .cheque-gallery { margin-top: 1.75rem; }

.gallery-more { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem; align-items: center; min-height: 108px; margin-top: 2.75rem; padding: 1.6rem .35rem 1.6rem 0; border-top: 1px solid var(--band-rule); border-bottom: 1px solid var(--band-rule); transition: background-color .2s, padding-left .2s; }
.gallery-more:hover { padding-left: .75rem; background: var(--band-hover); }
.gallery-more-copy strong { display: block; margin-bottom: .45rem; color: var(--on-dark); font-family: var(--serif); font-size: clamp(1.3rem,1.9vw,1.7rem); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
.gallery-more-copy > span { display: block; max-width: 39rem; color: var(--on-dark-muted); font-size: .9375rem; line-height: 1.7; }
.gallery-more-arrow { color: var(--on-dark-accent); font-size: 1.35rem; line-height: 1; transition: transform .2s; }
.gallery-more:hover .gallery-more-arrow { transform: translate(2px,-2px); }

/* --- Photographs page --- */
.photo-set { scroll-margin-top: 1.5rem; }
.photo-set.alt { background: var(--pale); }
.photo-set-inner { padding: var(--band) var(--page-gutter); }
.photo-set-head { display: grid; grid-template-columns: .75fr 1.5fr; gap: 1rem 4rem; align-items: start; }
.photo-set-head .kicker { padding-top: .55rem; }
.photo-set-head h2 { max-width: 48rem; font-family: var(--serif); font-size: clamp(2rem,3.4vw,3.4rem); font-weight: 400; line-height: 1.02; letter-spacing: -.04em; }
.photo-set-head > p:not(.kicker), .photo-set-head .text-link { grid-column: 2; }
.photo-set-head > p:not(.kicker) { max-width: 45rem; margin-top: .75rem; color: var(--muted); }
.photo-set-head .text-link { width: fit-content; margin-top: .9rem; }

.photo-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1.15rem; }
.photo-grid figure { grid-column: span 6; margin: 0; background: var(--paper); border: 1px solid var(--line); }
.photo-grid figure:nth-child(n+3) { grid-column: span 4; }
.photo-grid-wide figure, .photo-grid-wide figure:nth-child(n+3) { grid-column: span 8; }
.photo-grid img { width: 100%; height: auto; }
.photo-grid figcaption { min-height: 3.75rem; padding: .85rem 1rem 1rem; border-top: 2px solid var(--orange); color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.photo-note { max-width: 45rem; margin-top: 1.75rem; color: var(--muted); font-size: .875rem; line-height: 1.7; }

@media (max-width:1100px) {
  .photo-set-head { grid-template-columns: 1fr; gap: 1rem; }
  .photo-set-head > p:not(.kicker), .photo-set-head .text-link { grid-column: 1; }
  .photo-grid-wide figure, .photo-grid-wide figure:nth-child(n+3) { grid-column: span 12; }
}
@media (max-width:760px) {
  .photo-set-inner { padding: var(--band-mobile) 6%; }
  .photo-set-head h2 { font-size: clamp(2rem,10vw,2.9rem); }
  .photo-grid { margin-top: 2.25rem; grid-template-columns: 1fr; gap: 1rem; }
  .photo-grid figure, .photo-grid figure:nth-child(n+3), .photo-grid-wide figure { grid-column: 1; }
  .photo-grid figcaption { min-height: 0; }
  .gallery-head { margin-top: 2.5rem; }
  .gallery-more { margin-top: 2rem; min-height: 0; }
}

/* ===============================================================
   v2 — a warmer, more typographic pass over v1.
   Everything above is v1. This layer overrides it, so the two can
   be compared by swapping folders and nothing else.
   =============================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('assets/fraunces-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  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';
  src: url('assets/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- v2 colour system. Four grounds, two inks, one accent. ---- */
  --paper:      #fdfaf4;   /* default page ground */
  --pale:       #f4ece0;   /* every alternate band */
  --sand:       #f0d4b5;   /* the one warm accent band */
  --sand-soft:  #f9ecdc;   /* caption chips sitting on light */
  --dark:       #5c2117;   /* the one dark band */
  --dark-deep:  #451610;   /* pressed state on dark */

  --hero-a:     #e87b32;   /* hero gradient */
  --hero-b:     #dc682c;
  --hero-detail:#fff0da;

  --ink:        #241f1b;   /* text on light */
  --muted:      #665c53;
  --ink-on-orange: #3d1d16;

  --on-dark:        #fdf3e7;   /* text on the dark band */
  --on-dark-muted:  #d6c8bd;
  --on-dark-accent: #f3aa62;

  --line:        #e6dfd2;
  --line-strong: #d6cec0;
  --line-warm:   #dfbd99;

  --select:        #ffcf9f;
  --orange-bright: #ffad55;

  /* A real display face, self-hosted, so the page looks the same everywhere. */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --band: 7rem;
}

body { background: var(--paper); color: var(--ink); }

/* Fraunces set classically: no softening, no wonk, optical size does the work. */
h1, h2, h3, h4, .brand-name,
.lead h1, .page-head h1,
.feature-heading h2, .overview-intro h2, .work-path-copy strong,
.surbhi-motto, .surbhi-feature-copy h2, .records-heading h2, .record-card h3,
.partnership-intro h2, .photo-set-head h2, .gallery-head h3, .gallery-more-copy strong {
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-optical-sizing: auto;
}

.lead h1 { letter-spacing: -.03em; line-height: .96; font-size: clamp(3rem,5.4vw,5.4rem); }
.page-head h1 { letter-spacing: -.025em; }
.brand-name { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }
.brand-subtitle { font-family: var(--sans); font-weight: 500; }

/* Kickers become small caps on a hairline, which reads more considered. */
.kicker { font-size: .6875rem; letter-spacing: .18em; }

/* Photographs get a warm frame and a little lift. */
.story-figure img, .feature-figure img, .photo-grid img, .surbhi-feature-figure img,
.record-card-image img { border-radius: 2px; }
.photo-grid figure { border-color: var(--line); background: var(--paper); transition: transform .35s ease, box-shadow .35s ease; }
.photo-grid figure:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(58,32,20,.13); }


/* Buttons and links sit a little softer. */
.action { border-radius: 2px; }
.jump a { border-radius: 100px; transition: background-color .2s, border-color .2s, color .2s; }

/* The creed is a card wherever it appears: pale ground, an orange rule on
   top, and a hairline between the Hindi and the English. The home page uses
   the same card, centred and a size larger, as its own band. */
.creed { margin: 2.5rem 0; padding: 2.5rem 2.75rem 2.75rem; border-top: 3px solid var(--orange); background: var(--pale); }
.creed p[lang="hi"] { font-family: var(--serif); font-size: clamp(1.5rem,2.5vw,2rem); line-height: 1.5; color: var(--dark); margin-bottom: 1.25rem; }
.creed-translation { padding-top: 1.15rem; border-top: 1px solid var(--line-strong); font-size: 1.0625rem; line-height: 1.7; color: var(--muted); }

.homepage-creed-inner { padding: var(--band) var(--page-gutter); }
.creed.homepage-creed { max-width: 46rem; margin: 0 auto; padding: 3.25rem 3.25rem 3.5rem; text-align: center; }
.homepage-creed p[lang="hi"] { font-size: clamp(1.6rem,3vw,2.5rem); }
.homepage-creed .creed-translation { border-top-color: var(--line-warm); }

/* A quiet entrance, only where motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
  .reveal.is-in { opacity: 1; transform: none; }
}

@media (max-width:760px) {
  .homepage-creed-inner { padding: var(--band-mobile) 6%; }
  .lead h1 { font-size: clamp(2.6rem,10vw,3.6rem); }
}


/* ===============================================================
   Two coloured anchors and nothing else: the orange hero at the top,
   the brick footer at the bottom. Every band in between is paper,
   pale or sand, so nothing floats.
   =============================================================== */
:root {
  --band-rule:  var(--line-strong);
  --band-hover: rgba(92,33,23,.045);
  --on-brand:      #ffffff;
  --on-brand-soft: rgba(255,255,255,.82);
  --on-brand-line: rgba(255,255,255,.28);
}

/* The two former dark bands become the page's quiet alternate ground.
   Their text already reads from these tokens, so redefining the tokens
   inside the band flips every colour in one move. */
.home-overview,
.partnership-record {
  background: var(--pale);
  color: var(--ink);
  --on-dark: var(--ink);
  --on-dark-muted: var(--muted);
  --on-dark-accent: var(--brick);
}
.home-overview { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partnership-record { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-overview :focus-visible,
.partnership-record :focus-visible { outline-color: var(--brick); }
.cheque-gallery figcaption { color: var(--muted); }

/* The footer is the brick anchor. */
footer {
  background: var(--brick);
  color: var(--on-brand);
  border-top: 0;
  padding: 4.5rem var(--page-gutter) 2rem;
}
footer .brand-name, footer .brand-subtitle, footer address,
footer .contact-link, footer .footer-note, footer .footer-nav a { color: var(--on-brand); }
footer .footer-label { color: var(--on-brand-soft); }
footer .footer-note, footer .footer-nav { color: var(--on-brand-soft); }
footer .contact-link:hover, footer .footer-nav a:hover { color: var(--on-brand); text-decoration: underline; text-underline-offset: .25rem; }
footer .footer-bottom { border-top: 1px solid var(--on-brand-line); color: var(--on-brand-soft); }
footer .footer-bottom a { color: var(--on-brand); }
footer :focus-visible { outline-color: var(--on-brand); }
footer h2 { color: var(--on-brand); }
footer .brand img { filter: brightness(0) invert(1); }

/* ===============================================================
   Work page: a statement, one told story, then numbered areas of
   support with their items nested under them. Everything carries a
   dateline so the reader always knows where and when.
   =============================================================== */

.statement-band { background: var(--paper); border-bottom: 1px solid var(--line); }
.statement-inner { max-width: 62rem; margin: 0 auto; padding: var(--band) var(--page-gutter); }
.statement-hi { font-size: 1.0625rem; line-height: 1.9; color: var(--muted); padding-left: 1.25rem; border-left: 3px solid var(--orange); }
.statement-en { margin-top: 1.75rem; font-family: var(--serif); font-size: clamp(1.9rem,3.6vw,3rem); line-height: 1.25; letter-spacing: -.025em; color: var(--ink); }
.statement-en em { font-style: normal; color: var(--brick); }

.story-feature { background: var(--pale); border-bottom: 1px solid var(--line); }
.story-feature-inner { padding: var(--band) var(--page-gutter); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(3rem,6vw,5.5rem); align-items: center; }
.story-feature-copy h2 { margin: 1rem 0 1.5rem; max-width: 18ch; font-family: var(--serif); font-size: clamp(2.2rem,4vw,3.6rem); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; }
.story-feature-copy p:not(.kicker):not(.dateline) { max-width: 40rem; color: var(--muted); }
.story-feature-copy p + p:not(.dateline) { margin-top: .9rem; }
.dateline { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); font-size: .75rem; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; color: var(--brick); }
.story-feature-figure { margin: 0; }
.story-feature-figure img { width: 100%; height: auto; }
.story-feature-figure figcaption { margin-top: .85rem; font-size: .8125rem; line-height: 1.5; color: var(--muted); }

.chapter { border-bottom: 1px solid var(--line); }
.chapter.alt { background: var(--pale); }
.chapter-inner { padding: var(--band) var(--page-gutter); }
.chapter-head { display: grid; grid-template-columns: minmax(12rem,.55fr) minmax(0,1.45fr); gap: 1rem 4rem; align-items: start; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-strong); }
.chapter-index { font-size: .75rem; letter-spacing: .14em; font-weight: 600; color: var(--brick); padding-top: .6rem; }
.chapter-head h2 { font-family: var(--serif); font-size: clamp(2.2rem,4vw,3.4rem); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.chapter-def { margin-top: .75rem; max-width: 34rem; font-size: 1.0625rem; color: var(--muted); }

.item-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3rem 4rem; padding-top: 3rem; }
.item h3 { font-family: var(--serif); font-size: clamp(1.35rem,1.9vw,1.7rem); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.item-meta { margin-top: .6rem; font-size: .75rem; letter-spacing: .06em; font-weight: 600; text-transform: uppercase; color: var(--brick); line-height: 1.6; }
.item > p:not(.item-meta) { margin-top: .9rem; color: var(--muted); font-size: .9375rem; line-height: 1.75; }
.item-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2rem,4vw,3.5rem); align-items: center; padding-top: 3rem; border-top: 1px solid var(--line-strong); }
.item-figure { margin: 0; }
.item-figure img { width: 100%; height: auto; }

.garba { background: var(--sand); border-bottom: 1px solid var(--line-warm); }
.garba-inner { padding: var(--band) var(--page-gutter); }
.garba-head { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 1rem 4rem; align-items: start; }
.garba-head h2 { font-family: var(--serif); font-size: clamp(2.4rem,4.6vw,4rem); font-weight: 400; line-height: 1.15; color: var(--dark); }
.garba-head > p:not(.kicker) { grid-column: 2; max-width: 40rem; color: var(--muted); }
.garba-head > p + p { margin-top: .9rem; }
.causes { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line-warm); }
.causes-label { font-size: .75rem; letter-spacing: .14em; font-weight: 600; color: var(--brick); margin-bottom: 1.5rem; }
.causes ul { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .85rem 3rem; list-style: none; padding: 0; margin: 0 0 1.75rem; max-width: 62rem; }
.causes li { padding-bottom: .85rem; border-bottom: 1px solid var(--line-warm); font-size: .9375rem; font-weight: 600; color: var(--ink); }
.garba-gallery { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.15rem; }
.garba-gallery figure { margin: 0; background: var(--paper); border: 1px solid var(--line-warm); }
.garba-gallery img { width: 100%; height: auto; }
.garba-gallery figcaption { min-height: 3rem; padding: .8rem 1rem 1rem; border-top: 2px solid var(--orange); font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.garba .gallery-more { border-color: var(--line-warm); }
.garba .gallery-more-copy strong { color: var(--ink); }
.garba .gallery-more-copy > span { color: var(--muted); }
.garba .gallery-more-arrow { color: var(--brick); }
.garba .gallery-more:hover { background: rgba(92,33,23,.05); }

.onward { background: var(--dark); color: var(--on-dark); }
.onward-inner { padding: var(--band) var(--page-gutter); max-width: 56rem; }
.onward h2 { margin: 1.25rem 0 1.25rem; font-family: var(--serif); font-size: clamp(2.2rem,4.4vw,3.6rem); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; color: var(--on-dark); }
.onward p { max-width: 38rem; color: var(--on-dark-muted); margin-bottom: 2rem; }
.onward :focus-visible { outline-color: var(--on-dark); }

@media (max-width:1100px) {
  .story-feature-inner, .garba-head, .item-wide { grid-template-columns: 1fr; }
  .story-feature-figure { order: -1; }
  .garba-head > p:not(.kicker) { grid-column: 1; }
  .item-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .chapter-head { grid-template-columns: 1fr; }
  .chapter-index { padding-top: 0; }
}
@media (max-width:760px) {
  .statement-inner, .story-feature-inner, .chapter-inner, .garba-inner, .onward-inner { padding: var(--band-mobile) 6%; }
  .item-list, .causes ul, .garba-gallery { grid-template-columns: 1fr; }
  .item-list { gap: 2.5rem; padding-top: 2.25rem; }
  .garba-gallery figcaption { min-height: 0; }
  .item-wide { padding-top: 2.25rem; gap: 1.75rem; }
}

/* ===============================================================
   Photography system. Two frames only, both cropped, neither ever
   taller than two thirds of the screen. Captions always sit off the
   image, never flush against it.
   =============================================================== */
:root {
  --ratio-band: 16 / 9;   /* figures that run the full content width */
  --ratio-card: 3 / 2;    /* figures inside a column or a grid cell */
  --figure-max: 62vh;
  --focus: 50% 40%;
}

/* Full-width band figures */
.feature-figure img,
.surbhi-feature-figure img {
  width: 100%;
  aspect-ratio: var(--ratio-band);
  max-height: var(--figure-max);
  object-fit: cover;
  object-position: var(--focus);
}

/* Column and grid figures */
.story-feature-figure img,
.item-figure img,
.record-card-image img,
.photo-grid img,
.garba-gallery img,
.cheque-gallery img {
  width: 100%;
  aspect-ratio: var(--ratio-card);
  max-height: var(--figure-max);
  object-fit: cover;
  object-position: var(--focus);
}

/* One wide frame per photographs-page set, so a single picture still
   reads as a picture and not as a banner. */
.photo-grid-wide img { aspect-ratio: var(--ratio-band); }

/* Captions: always detached from the image, always the same treatment. */
.feature-figure figcaption,
.surbhi-feature-figure figcaption,
.story-feature-figure figcaption,
.photo-grid figcaption,
.garba-gallery figcaption,
.cheque-gallery figcaption {
  display: block;
  margin: 0;
  padding: .9rem 1.1rem 1rem;
  border-top: 2px solid var(--orange);
  border-left: 0;
  background: transparent;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.55;
}
.feature-figure figcaption,
.surbhi-feature-figure figcaption,
.story-feature-figure figcaption {
  padding-left: 0;
  padding-right: 0;
  margin-top: 1rem;
  border-top-width: 1px;
  border-top-color: var(--line-strong);
}
.photo-grid figcaption,
.garba-gallery figcaption { min-height: 0; }

@media (max-width:760px) {
  :root { --figure-max: 48vh; }
  .feature-figure img, .surbhi-feature-figure img { aspect-ratio: var(--ratio-card); }
}

/* ===============================================================
   THE PALETTE, taken from the emblem itself.
   The mark is orange (#e46c00 across most of its pixels) with a
   maroon Om (#8a0000). Those are the two brand colours, and each has
   exactly one job:

     ORANGE  #e46c00  large grounds, the button, rules. Never small text
                      (it only reaches 3.3:1 on white).
     MAROON  #8a0000  every link, kicker and small accent, and the
                      footer ground. Reaches 10:1 on white.

   Two paper tones underneath, and nothing else. No brick, no sand,
   no second dark.
   =============================================================== */
:root {
  --brand:       #e46c00;
  --brand-hi:    #f7a55c;   /* orange that still reads on maroon */
  --brand-deep:  #8a0000;
  --brand-press: #6d0000;

  --paper: #fffdf9;
  --pale:  #f6efe4;
  --ink:   #241f1b;
  --muted: #665c53;
  --line:        #eae2d4;
  --line-strong: #d8cfbd;

  /* Older names kept so every existing rule keeps resolving, all
     pointing at the four colours above. */
  --orange:        var(--brand);
  --orange-bright: #ff8419;
  --brick:         var(--brand-deep);
  --brick-deep:    var(--brand-press);
  --dark:          var(--brand-deep);
  --dark-deep:     var(--brand-press);
  --sand:          var(--pale);
  --sand-soft:     var(--pale);
  --line-warm:     var(--line-strong);
  --hero-a:        var(--brand);
  --hero-b:        var(--brand);
  --hero-detail:   rgba(255,253,249,.9);
  --ink-on-orange: #2e1403;
  --on-dark:        #fffaf2;
  --on-dark-muted:  rgba(255,250,242,.78);
  --on-dark-accent: var(--brand-hi);
  --band-rule:  var(--line-strong);
  --band-hover: rgba(138,0,0,.05);
  --select:     #ffd9a8;
}

/* The orange grounds are flat, not gradients. */
.lead, .page-head { background: var(--brand); color: var(--ink-on-orange); }
.lead h1, .page-head h1 { color: var(--ink-on-orange); }
.lead-body, .page-head-body { color: rgba(46,20,3,.86); }
.lead .light-kicker, .page-head .light-kicker { color: var(--ink-on-orange); }
.lead .light-kicker::before, .page-head .light-kicker::before { background: var(--ink-on-orange); }
.lead::after { display: none; }
.jump a { border-color: rgba(46,20,3,.42); color: var(--ink-on-orange); }
.jump a:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--paper); }

/* The button is the emblem's orange on light, and stays orange on dark. */
.action-orange { background: var(--brand); color: var(--ink-on-orange); }
.action-orange:hover { background: var(--orange-bright); }
.lead .action-orange, .page-head .action-orange { background: var(--brand-deep); color: var(--paper); }
.lead .action-orange:hover, .page-head .action-orange:hover { background: var(--brand-press); }

/* The two maroon bands. */
.onward, footer { background: var(--brand-deep); color: var(--on-dark); }
.onward .light-kicker { color: var(--on-dark); }
.onward .light-kicker::before { background: var(--brand-hi); }

/* Band figures get a deterministic frame rather than one clipped by
   the viewport, so the crop is the same on every screen. */
:root { --ratio-band: 21 / 9; }
.feature-figure img, .surbhi-feature-figure img { max-height: none; }

/* ===============================================================
   Photographs, sized down and squared up.

   Two figures side by side are now always the same size, because a
   grid holding pictures uses equal tracks. Band figures sit at a
   readable width rather than running the whole page, so nothing takes
   up more than about half the screen on a laptop.
   =============================================================== */

/* Any grid that holds pictures gets equal columns. */
.records-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem; align-items: start; }
.photo-grid, .cheque-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
.photo-grid figure, .photo-grid figure:nth-child(n+3),
.cheque-gallery figure, .cheque-gallery figure:nth-child(n+3) { grid-column: auto; }
.photo-grid-wide figure, .photo-grid-wide figure:nth-child(n+3) { grid-column: 1 / -1; }
.garba-gallery { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* Band figures: a picture on the page, not a banner across it. */
.feature-figure, .surbhi-feature-figure { max-width: 46rem; }
.feature-figure img, .surbhi-feature-figure img { aspect-ratio: 16 / 9; }
.photo-grid-wide img { aspect-ratio: 16 / 9; max-width: 46rem; }
.photo-grid-wide figure { max-width: 46rem; }

/* Column figures stay on the standard frame, capped so a tall screen
   cannot stretch them. */
.story-feature-figure img, .item-figure img,
.record-card-image img, .photo-grid img,
.garba-gallery img, .cheque-gallery img { max-height: 46vh; }

@media (max-width:1100px) {
  .records-grid, .photo-grid, .cheque-gallery, .garba-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px) {
  .records-grid, .photo-grid, .cheque-gallery, .garba-gallery { grid-template-columns: 1fr; }
  .feature-figure, .surbhi-feature-figure, .photo-grid-wide figure { max-width: none; }
  .feature-figure img, .surbhi-feature-figure img, .photo-grid-wide img { aspect-ratio: 3 / 2; max-width: none; }
}

/* ===============================================================
   Centring. Any block narrower than the content container is centred
   in it, so a picture has equal air on both sides instead of leaving
   the right half of a wide screen empty. Text inside those blocks
   stays left-aligned, which is what keeps it readable.
   =============================================================== */
:root { --band-col: 48rem; }

/* The stacked bands: heading, copy and photograph share one centred
   column, so they line up on the same left edge. */
.feature-heading, .feature-copy, .feature-figure,
.surbhi-feature-copy, .surbhi-feature-figure {
  max-width: var(--band-col);
  margin-inline: auto;
}
.surbhi-feature-text { grid-template-columns: 1fr; gap: 0; max-width: none; }
.surbhi-feature-text p + p { margin-top: .9rem; }
.surbhi-feature-copy h2 { max-width: none; }
.feature-figure img, .surbhi-feature-figure img { max-height: none; }

/* Everything else that is narrower than its band. */
.onward-inner, .statement-inner { margin-inline: auto; }
.photo-grid-wide figure { margin-inline: auto; }
.photo-set-head > p:not(.kicker) { max-width: none; }

@media (max-width:760px) {
  .feature-heading, .feature-copy, .feature-figure,
  .surbhi-feature-copy, .surbhi-feature-figure { max-width: none; }
}
/* The creed shares the same centred column as the bands. */
.creed.homepage-creed { max-width: var(--band-col); }

/* An odd last photograph spans the row and centres, so it never sits
   alone against an empty column. */
.photo-grid > figure:last-child:nth-child(odd) { grid-column: 1 / -1; width: min(46rem, 100%); justify-self: center; }

/* The handover gallery runs on six tracks so a trailing pair can sit
   centred under a full row rather than hanging off the left edge. */
.garba-gallery { grid-template-columns: repeat(6, minmax(0,1fr)); }
.garba-gallery > figure { grid-column: span 2; }
.garba-gallery > figure:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
@media (max-width:1100px) {
  .garba-gallery { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .garba-gallery > figure:nth-child(3n+1):nth-last-child(2) { grid-column: span 2; }
}
@media (max-width:760px) {
  .garba-gallery { grid-template-columns: 1fr; }
  .garba-gallery > figure { grid-column: 1; }
}