/* ===================================================================
   O.J. Agrawal Charitable Trust

   One typeface, one scale, one set of surfaces.

   TYPE     Hind, self-hosted. It draws Devanagari and Latin in the same
            family, so the creed and the English above it come from one
            hand on every device. No optical-size, softness or wonk axis:
            the letterforms are the same shape at every size.

   SURFACES Four grounds, each visibly distinct from the next:
              paper 1.00   sand 1.40   clay 6.49
            (measured against paper; below about 1.25 the eye sees nothing,
            which is why the old #f6efe4 at 1.12 did no work at all.)
            No two touching bands share a ground.

   THE CLAY #994324 is the middle, and it is taken from the mark rather
            than chosen beside it. In OKLCH its hue is 39.59; the emblem
            orange is 50.39 and the Om maroon is 29.23, whose midpoint is
            39.81. It is the average of the only two colours in the
            emblem, at 62% of their saturation.

   ONE DARK  There is no brown. Every dark band, the creed, the Surbhi
            section and the footer, is the same clay as the opening band,
            so the page opens and closes on one colour.

   ORANGE   The emblem is 100% saturation. That is right for a mark and
            wrong for a page. It is a mark here: buttons, rules, the
            emblem itself. Never a ground, never body text — it reaches
            only 3.21:1 on paper and fails AA.
   =================================================================== */

/* ---------- Hind: Latin and Devanagari, one family ---------- */
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/hind-400-devanagari.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: 'Hind'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/hind-400-latin-ext.woff2') format('woff2');
  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; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/hind-400-latin.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: 'Hind'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/hind-600-devanagari.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: 'Hind'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/hind-600-latin-ext.woff2') format('woff2');
  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; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/hind-600-latin.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; }

:root {
  /* --- surfaces, lightest to darkest --- */
  --paper:  #fffdf9;
  --sand:   #f2d3ba;   /* warmer and 1.40:1 off the paper, where the old one was 1.31 */
  --fill:   #dac3a9;   /* fills only: photo mattes, chips. Never carries --muted. */
  --clay:   #994324;   /* THE MIDDLE. A dark ground: light text only. */
  --terra:  #994324;   /* the dark ground IS the clay. Kept as a token
                          name because the markup and the legacy aliases
                          still reference it. */

  /* --- ink --- */
  --ink:      #241f1b;
  --muted:    #5d5148;
  --on-dark:  #fffdf9;
  --on-dark-muted: #fff7f1;   /* 4.61:1 at the gradient's brightest stop */
  --on-clay:  #fffdf9;
  --on-clay-muted: #fff7f1;
  --on-clay-label: #fff7f1;   /* labels on the coloured bands: 4.61:1 even at the bright left end */
  --band-grad: linear-gradient(100deg, #c54720 0%, #b84323 45%, #994324 100%);
              /* lit from the left, as in the Dhabkaro poster: bright vermilion where the text sits,
                 easing into the clay on the right. White text holds 4.81:1 at the brightest stop. */

  /* --- the mark --- */
  --emblem: #e46c00;   /* the measured emblem orange. A mark, never a ground. */
  --maroon: #840000;   /* the Om's own maroon. Links, kickers, small emphasis. */
  --ember:  #f3aa62;   /* a MARK only: button fills on the clay, 4.95:1 as a
                          surface boundary. Never small text — it is 3.37:1. */

  /* --- lines --- */
  --rule:      #9e7852;   /* 3.93 on paper, 3.00 on sand: one hairline, visible on both */
  --rule-soft: rgba(36, 31, 27, .14);
  --rule-dark: rgba(253, 243, 232, .22);

  /* --- type scale: six steps, every gap at least 31% --- */
  --s-label:   .75rem;      /* 12px  kickers, datelines, meta        */
  --s-body:    1.0625rem;   /* 17px  running text                    */
  --s-lead:    1.3125rem;   /* 21px  standfirsts, the creed in English */
  --s-sub:     clamp(1.375rem, 1.2rem + .55vw, 1.75rem);     /* 22-27  card and item titles */
  --s-sec:     clamp(1.875rem, 1.68rem + .77vw, 2.375rem);   /* 30-38  every section heading */
  --s-title:   clamp(2.5rem, 2.24rem + 1.06vw, 3.1875rem);   /* 40-51  inner page headlines  */
  --s-display: clamp(2.5rem, 1.92rem + 2.31vw, 4.25rem);     /* 40-68  the home headline only */

  /* --- rhythm: one padding, one column --- */
  --band-y:  clamp(3rem, 1.6rem + 4.4vw, 6rem);
  --band-y-tight: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  --gutter:  clamp(1.25rem, .6rem + 3.1vw, 4.5rem);
  --col:     68rem;
  --measure: 64ch;

  /* --- legacy aliases, so nothing in the markup breaks --- */
  --brand: var(--emblem);      --brand-hi: var(--ember);
  --brand-deep: var(--maroon); --brand-press: var(--maroon);
  --orange: var(--emblem);     --brick: var(--terra);
  --dark: var(--terra);        --sand-legacy: var(--sand);
  --pale: var(--sand);         --line: var(--rule-soft);
  --line-strong: var(--rule);  --ink-on-orange: #2a1200;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Hind', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--s-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

p { margin: 0 0 1rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.018em; text-wrap: balance; }

a { color: var(--maroon); }

/* Hind ships no italic. A browser-slanted Hind reads as a rendering fault,
   so emphasis is carried by colour instead. */
em { font-style: normal; color: var(--maroon); }
.garba em, .homepage-creed-section em { color: var(--on-clay-label); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .8rem 1.2rem; background: var(--terra); color: var(--on-dark); text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- the one small-label style, used everywhere ---------- */
.kicker, .light-kicker, .record-meta, .item-meta, .dateline,
.chapter-index, .causes-label, .footer-label, .brand-subtitle {
  margin: 0 0 .55rem;
  font-size: var(--s-label);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--maroon);
}
.footer-label, .brand-subtitle { display: block; }

/* ============================ header ============================ */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; }
/* The source file is 82x70. At 41 CSS px a 2x screen asks for 82 real
   pixels, which is exactly what exists; any larger and it is upscaled and
   goes soft. This is a ceiling, not a design choice — a bigger file would
   lift it. */
.brand img { width: 41px; height: auto; }
.brand-name {
  font-size: 1.2rem; font-weight: 600; line-height: 1.05; letter-spacing: -.01em;
  white-space: nowrap; color: var(--ink);
}
.brand-subtitle { margin: .12rem 0 0; color: var(--muted); letter-spacing: .16em; font-size: .62rem; }

#navigation { display: flex; align-items: center; gap: 1.5rem; }
#navigation a { font-size: 1rem; color: var(--ink); text-decoration: none; }
#navigation a:hover { box-shadow: inset 0 -2px var(--emblem); }
#navigation a[aria-current] { box-shadow: inset 0 -2px var(--emblem); }

.action, .header-action {
  display: inline-block; padding: .75rem 1.4rem; border-radius: 2px;
  font-weight: 600; font-size: 1rem; text-decoration: none; line-height: 1.2;
}
.action-orange { background: var(--emblem); color: #2a1200; }
.action-orange:hover { background: #c25c00; color: #fff; }
.action-brick, .header-action { background: var(--terra); color: var(--on-dark); }
.action-brick:hover, .header-action:hover { background: #4a2f1c; box-shadow: none; }

.menu-toggle {
  display: none; align-items: center; gap: .55rem;
  padding: .5rem .2rem; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
}
.menu-lines { display: block; width: 26px; height: 14px; position: relative; }
.menu-lines::before, .menu-lines::after,
.menu-toggle > span:last-child { pointer-events: none; }
.menu-lines::before, .menu-lines::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.menu-lines::before { top: 0; box-shadow: 0 6px 0 currentColor; }
.menu-lines::after  { bottom: 0; }
.menu-toggle[aria-expanded="true"] { color: var(--maroon); }

/* ============================ bands ============================ */
.lead, .feature, .homepage-creed-section, .home-overview, .surbhi-feature,
.recent-records, .collaboration-strip, .page-head, .section, .statement-band,
.chapter, .garba, .onward, .story-feature {
  padding: var(--band-y) var(--gutter);
}
.lead-inner, .feature-inner, .homepage-creed-inner, .home-overview-inner,
.surbhi-feature-inner, .recent-records-inner, .collaboration-strip-inner,
.page-head-inner, .statement-inner, .chapter-inner, .garba-inner,
.onward-inner, .story-feature-inner, .contact-grid, .prose {
  max-width: var(--col); margin-inline: auto;
}

/* the surface rule: no two touching bands share a ground */
.lead, .page-head          { background: var(--clay); color: var(--on-clay); }
.feature, .recent-records  { background: var(--paper); }
.home-overview             { background: var(--paper); }
.homepage-creed-section    { background: var(--terra); color: var(--on-dark); }
.surbhi-feature            { background: var(--sand); }
.collaboration-strip       { background: var(--sand); }
.section.prose             { background: var(--paper); }
.section.prose.alt         { background: var(--sand); }
.section.contact-grid      { background: var(--paper); }
.statement-band            { background: var(--sand); }
.chapter                   { background: var(--paper); }
.chapter.alt               { background: var(--sand); }
.garba                     { background: var(--terra); color: var(--on-dark); }
.onward                    { background: var(--sand); }
.story-feature             { background: var(--paper); }
.story-feature.alt         { background: var(--sand); }

/* text roles on the dark grounds */
.homepage-creed-section .kicker, .garba .kicker, .garba .causes-label { color: var(--on-clay-label); }
.homepage-creed-section a, .garba a { color: var(--on-clay-label); }

/* ============================ headings ============================ */
.lead h1 { font-size: var(--s-display); line-height: 1.0; letter-spacing: -.03em; max-width: 16ch; margin-bottom: 1.15rem; color: var(--on-clay); }
.page-head h1, .contact-head h1 { font-size: var(--s-title); line-height: 1.04; max-width: 18ch; margin-bottom: 1rem; color: var(--on-clay); }

/* the clay is a dark ground, so everything on it reverses out */
.lead .kicker, .lead .light-kicker,
.page-head .kicker, .page-head .light-kicker { color: var(--on-clay-label); }
.lead .action-orange, .page-head .action-orange { background: var(--ember); color: #4a1f0c; }
.lead .action-orange:hover, .page-head .action-orange:hover { background: #fbd9bd; color: #4a1f0c; }

.feature-heading h2, .overview-intro h2, .records-heading h2,
.surbhi-feature-copy h2, .collaboration-copy h2, .chapter-head h2,
.garba-head h2, .onward h2, .story-feature-copy h2,
.section-title, .statement-en {
  font-size: var(--s-sec); line-height: 1.12; max-width: 24ch; margin-bottom: 1.1rem;
}
.section-title { text-transform: none; letter-spacing: -.018em; color: var(--ink); }

.record-card h3, .item h3, .work-path-copy strong, .contact-card h2 {
  display: block; font-size: var(--s-sub); font-weight: 600;
  line-height: 1.2; letter-spacing: -.014em; margin: 0 0 .45rem;
}

.lead-body, .page-head-body, .prose-lead, .creed-translation, .chapter-def {
  font-size: var(--s-lead); line-height: 1.5; max-width: 48ch;
}
.lead-body, .page-head-body { color: var(--on-clay-muted); }

/* ============================ home ============================ */
.feature-heading, .feature-copy, .feature-figure,
.surbhi-feature-copy, .surbhi-feature-figure { max-width: 48rem; margin-inline: auto; }

figure { margin: 0; }

/* One frame for every photograph on the site.
   height:auto is load-bearing — the markup carries width/height attributes,
   and without it those presentational hints beat aspect-ratio and the
   picture renders at its full natural height. */
main img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: 2px;
}
figcaption { margin-top: .7rem; font-size: .92rem; color: var(--muted); }
.sand figcaption, .chapter.alt figcaption, .surbhi-feature figcaption, .onward figcaption { color: #4d4136; }

.feature-figure { margin-block: 1.4rem; }
.feature-copy-text { margin-bottom: .9rem; }

.text-link, .record-link {
  display: inline-block; margin-top: .6rem;
  font-weight: 600; font-size: 1rem; color: var(--maroon); text-decoration: none;
  box-shadow: inset 0 -1px currentColor;
}
.text-link:hover, .record-link:hover { color: var(--ink); }

.creed { margin: 0; }
.creed p[lang="hi"] { font-size: var(--s-sec); line-height: 1.5; max-width: 26ch; margin-bottom: .7rem; font-weight: 400; }
.creed-translation { color: var(--on-dark-muted); margin: 0; }

.home-overview-inner { display: grid; gap: 2.5rem; }
.overview-intro p { color: var(--muted); }
.work-paths { display: grid; gap: 0; }
.work-path {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; gap: 1rem;
  align-items: start; padding: 1.15rem 0;
  border-top: 1px solid var(--rule-soft); text-decoration: none; color: inherit;
}
.work-path:last-child { border-bottom: 1px solid var(--rule-soft); }
.work-path:hover { background: rgba(228, 108, 0, .06); }
.work-path-number { margin: 0; color: var(--emblem); font-size: var(--s-label); padding-top: .45rem; }
.work-path-copy span:not(.work-path-copy) { color: var(--muted); }
.work-path-copy > span { display: block; max-width: 54ch; }
.work-path-arrow { color: var(--maroon); font-size: 1.1rem; padding-top: .35rem; }

.surbhi-motto { font-size: var(--s-sec); font-weight: 400; line-height: 1.4; color: var(--maroon); margin-bottom: .9rem; }
.surbhi-feature-text { margin-bottom: .4rem; }
.surbhi-feature-text p { color: #4d4136; }
.surbhi-feature-figure { margin-top: 1.6rem; }

.records-heading { margin-bottom: 1.8rem; }
.records-grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.record-card { display: flex; flex-direction: column; }
.record-card-image { margin-bottom: .95rem; }
.record-card-copy p { color: var(--muted); }
.planning-card { background: none; }

.collaboration-strip-inner { display: grid; gap: 1.8rem; }
.collaboration-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.collaboration-list li { padding: .85rem 0; border-top: 1px solid var(--rule-soft); font-size: 1.05rem; }
.collaboration-list li:last-child { border-bottom: 1px solid var(--rule-soft); }

/* ============================ about ============================ */
.prose-body { max-width: var(--measure); }
.prose-body p { color: var(--muted); }
.prose-lead { color: var(--ink); margin-bottom: 1.2rem; }
.trustees { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.trustees li { padding: .8rem 0; border-top: 1px solid var(--rule-soft); }
.trustees li:last-child { border-bottom: 1px solid var(--rule-soft); }

/* ==================== registration and compliance ==================== */
/* A label/value list. Two columns once there is room, so a reader scans
   the labels down one edge instead of reading prose. */
.facts { margin: 1.4rem 0 0; display: grid; gap: 0; }
.facts > div {
  display: grid; gap: .15rem;
  padding: .9rem 0; border-top: 1px solid var(--rule-soft);
}
.facts > div:last-child { border-bottom: 1px solid var(--rule-soft); }
.facts dt {
  font-size: var(--s-label); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--maroon); line-height: 1.4;
}
.facts dd { margin: 0; max-width: 52ch; }
.alt .facts dd { color: var(--ink); }
@media (min-width: 46rem) {
  .facts > div { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
  .facts dt { padding-top: .15rem; }
}

.facts-note { margin-top: 1.2rem; font-size: .95rem; color: var(--muted); max-width: 58ch; }
.alt .facts-note { color: #4d4136; }

.docs { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
@media (min-width: 52rem) { .docs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; } }
.doc {
  border-top: 3px solid var(--emblem);
  padding: 1.1rem 0 0;
  display: flex; flex-direction: column;
}
.doc .doc-meta {
  margin: 0 0 .5rem;
  font-size: var(--s-label); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.doc h3 { margin-bottom: .5rem; }
.doc p { font-size: .98rem; color: var(--muted); flex: 1; }
.alt .doc p { color: #4d4136; }
.doc .text-link { margin-top: .9rem; }

/* ============================ work ============================ */
.statement-hi { font-size: var(--s-sec); line-height: 1.5; max-width: 26ch; margin-bottom: .8rem; font-weight: 400; }
.statement-en { color: var(--ink); }

.chapter-head { margin-bottom: 2rem; }
.chapter-def { color: var(--muted); max-width: 46ch; }
.chapter.alt .chapter-def, .chapter.alt .item p { color: #4d4136; }

/* Each item carries its own rule. Without it the three columns read as
   one continuous block of text and a reader cannot tell where one thing
   ends and the next begins. */
.item-list { display: grid; gap: 2.6rem 3rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.item { min-width: 0; border-top: 3px solid var(--emblem); padding-top: 1.1rem; }
.item h3 { margin-bottom: .3rem; }
.item > p:last-child { margin-top: .7rem; }
.item p { color: var(--muted); }
.chapter.alt .item p { color: #4d4136; }
/* The line under an item heading carries real information — a venue, a
   date, a list of partners. The shared small-capitals label style suits
   two words and turns a list of names into a wall, so here it reads as
   ordinary text in a quieter colour. */
.item .item-meta {
  margin: .2rem 0 .65rem;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.chapter.alt .item .item-meta { color: #4d4136; }
.explore { margin-top: 1.5rem; }
.item-figure { margin-bottom: .9rem; }

/* the one item that carries a photograph sits on its own, full width */
.item-wide { display: grid; gap: 1.4rem; margin-top: 2.6rem; }
@media (min-width: 52rem) {
  .item-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
}
.item-wide .item-figure { margin-bottom: 0; }

.garba-head { margin-bottom: 1.8rem; }
.garba p { color: var(--on-dark-muted); }
/* One photograph at a time, scrolled sideways, so each is actually
   looked at instead of being shrunk into a tile. */
.slider { margin: 2rem 0 1.6rem; }
.slider-track {
  display: flex; gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .2rem;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > figure { flex: 0 0 min(86%, 44rem); scroll-snap-align: center; margin: 0; }
.slider-track > figure img { aspect-ratio: 3 / 2; }
.slider-bar { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.slider-btn {
  width: 2.75rem; height: 2.75rem; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--on-clay-label); background: transparent; color: var(--on-clay-label);
  font-family: inherit; font-size: 1.1rem; line-height: 1;
}
.slider-btn:hover:not(:disabled) { background: var(--on-clay-label); color: var(--clay); }
.slider-btn:disabled { opacity: .35; cursor: default; }
.slider-count {
  margin: 0; font-size: var(--s-label); font-weight: 600; letter-spacing: .1em;
  color: var(--on-clay-label); font-variant-numeric: tabular-nums;
}
.garba figcaption { color: var(--on-dark-muted); }
.causes { margin-top: 2rem; }
.causes { list-style: none; margin: .6rem 0 0; padding: 0; }
.causes li { padding: .7rem 0; border-top: 1px solid var(--rule-dark); }
.causes li:last-child { border-bottom: 1px solid var(--rule-dark); }

.onward h2 { max-width: 22ch; }
.onward p { color: #4d4136; }

.story-feature-inner { display: grid; gap: 2rem; }
.story-feature-copy p { color: var(--muted); }

/* ============================ contact ============================ */
.contact-grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.contact-card address { font-style: normal; color: var(--muted); }
.contact-big {
  display: inline-block; margin-top: .2rem;
  font-size: var(--s-sub); font-weight: 600; letter-spacing: -.014em;
  color: var(--maroon); text-decoration: none; box-shadow: inset 0 -2px currentColor;
}

/* ============================ footer ============================ */
footer { background: var(--terra); color: var(--on-dark); padding: var(--band-y) var(--gutter) var(--band-y-tight); }
footer a { color: var(--on-dark); }
.footer-top { max-width: var(--col); margin-inline: auto; display: grid; gap: 2rem; }
.footer-label { color: var(--on-clay-label); }
.footer-details { display: grid; gap: 2rem; }
footer address { font-style: normal; color: var(--on-dark-muted); }
.footer-reach { display: grid; gap: .3rem; justify-items: start; }
.contact-link { color: var(--on-dark); text-decoration: none; box-shadow: inset 0 -1px var(--on-dark-muted); }
footer .brand-name { color: var(--on-dark); }
footer .brand-subtitle { color: var(--on-dark-muted); }
.footer-bottom {
  max-width: var(--col); margin: 2.5rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem;
  font-size: .9rem; color: var(--on-dark-muted);
}
.footer-identity .brand img { width: 52px; }
.footer-identity .brand { align-items: flex-start; }

/* ============================ reveal ============================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================ wide ============================ */
@media (min-width: 62rem) {
  .home-overview-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; }
  .collaboration-strip-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 3rem; }
  .footer-details { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .story-feature-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
}

/* ============================ narrow ============================ */
@media (max-width: 47.5rem) {
  .menu-toggle { display: inline-flex; }
  #navigation {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--gutter) 1.2rem;
    background: var(--paper); border-bottom: 1px solid var(--rule-soft);
  }
  #navigation.is-open { display: flex; }
  #navigation a { padding: .85rem 0; border-top: 1px solid var(--rule-soft); }
  #navigation .header-action { margin-top: .9rem; text-align: center; border-top: none; }

  .records-grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .slider-track > figure { flex-basis: 88%; }
  .item-list { grid-template-columns: minmax(0, 1fr); }
  .work-path { grid-template-columns: 2rem minmax(0, 1fr) 1.2rem; gap: .8rem; }
  .brand img { width: 38px; }
  .brand-name { font-size: 1.05rem; }
}

/* Some photographs carry a stretch of empty room on one side. This pushes
   past it without re-exporting the file. */
/* The clip has to sit on a box holding ONLY the picture. Put it on the
   figure and the scaled image spills over the caption underneath, because
   a transform does not change the layout box it is painted from. */
.crop { overflow: hidden; border-radius: 2px; line-height: 0; }
.crop.zoom-in img { transform: scale(1.16); transform-origin: 64% 42%; }

/* Read by screen readers and search engines, not drawn on screen. */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Text Google links to from a search result: Chrome's default highlight is purple. */
::target-text { background: var(--sand); color: var(--ink); }

/* ====================== colour D: the coloured bands ====================== */
.lead, .page-head, .homepage-creed-section, .garba, footer {
  background-color: var(--clay);
  background-image: var(--band-grad);
}
/* the orange button blurred into the brighter band (2.50:1), so on these bands
   it is a pale button with deep red text: 4.51:1 edge, 8.94:1 text */
.lead .action-orange, .page-head .action-orange { background: #fff4ea; color: #7a2a12; }
.lead .action-orange:hover, .page-head .action-orange:hover { background: #ffffff; color: #7a2a12; }
.slider-btn { border-color: var(--on-clay-label); color: var(--on-clay-label); }
.slider-btn:hover:not(:disabled) { background: var(--on-clay-label); color: #994324; }