/* ════════════════════════════════════════════════════════════
   Humrahi Foundation — Shared Design System
   Extracted from the homepage so every page breathes the same air.
   Tokens, type, buttons, nav, footer, scroll reveals.
   ════════════════════════════════════════════════════════════ */

/* ─── Tokens ─── */
:root {
  --cloud:   #F0EDE6; --red:    #BB1C2A; --crimson: #7E1A20;
  --ink:     #2C2827; --sand:   #E5D9C2; --taupe:   #B8A78D;
  --whisper: #F8F6F1; --soft:   #5A4F4A;
  --taupe-dark: #6B5D45; /* AA-contrast taupe for small text on light bg */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Inter', sans-serif; background: var(--cloud); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1,h2,h3,h4 { font-family: 'Lora', serif; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 600; line-height: 1.18; }
h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.35; }
p  { color: var(--soft); line-height: 1.8; font-size: 0.96rem; }
a  { text-decoration: none; }
img, video, iframe { display: block; max-width: 100%; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe-dark); margin-bottom: 14px; }
.u-red { border-bottom: 2.5px solid var(--red); padding-bottom: 2px; }
.section { padding: 96px 0; }

/* ─── Buttons ─── */
.btn { display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 32px; border-radius: 2px; transition: all 0.25s var(--ease); cursor: pointer; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--crimson); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(187,28,42,0.3); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--taupe); padding: 13px 32px; }
.btn-outline:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); padding: 13px 32px; }
.btn-ghost:hover { border-color: #fff; transform: translateY(-2px); }

/* ─── Form status messages (forms.js) ─── */
.form-status { margin-top: 14px; padding: 12px 16px; border-radius: 3px; font-size: 0.9rem; line-height: 1.5; outline: none; }
.form-status.success { background: rgba(46,125,50,0.1); border-left: 3px solid #2e7d32; color: #1b5e20; }
.form-status.error { background: rgba(187,28,42,0.08); border-left: 3px solid var(--red); color: var(--crimson); }
.form-status a { text-decoration: underline; color: inherit; }

/* ─── Scroll animations ─── */
.reveal { opacity: 0; transform: translateY(48px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-56px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(56px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.d1 { transition-delay: 0.05s; } .d2 { transition-delay: 0.12s; } .d3 { transition-delay: 0.19s; }
.d4 { transition-delay: 0.26s; } .d5 { transition-delay: 0.33s; } .d6 { transition-delay: 0.40s; }
.d7 { transition-delay: 0.47s; } .d8 { transition-delay: 0.54s; } .d9 { transition-delay: 0.61s; }

/* ═══ NAV ════════════════════════════════ */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 300; transition: background 0.4s, box-shadow 0.4s, padding 0.4s; }
#nav.scrolled, #nav.solid { background: rgba(240,237,230,0.97); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--sand); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; max-width: 1180px; margin: 0 auto; padding: 0 28px; transition: height 0.4s; }
#nav.scrolled .nav-inner { height: 64px; }
.nav-logo img { height: 40px; width: auto; transition: height 0.4s; }
.nav-logo.on-dark img { filter: brightness(0) invert(1); }
#nav.scrolled .nav-logo img, #nav.solid .nav-logo img { height: 34px; filter: none; }
.nav-links { display: flex; flex: 1; gap: 30px; list-style: none; align-items: center; margin-left: 56px; }
.nav-links a { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; transition: color 0.2s; color: var(--soft); }
.nav-links.on-dark a { color: rgba(255,255,255,0.8); }
#nav.scrolled .nav-links a, #nav.solid .nav-links a { color: var(--soft); }
.nav-links a:hover { color: var(--red) !important; }
/* Nav CTAs. Donate is the primary action (solid --red, --crimson on hover; white on --red 6.34:1,
   on --crimson 10.22:1, both AA). It was removed on 2026-08-28 and restored on 2026-11-10 (owner
   decision after the fundraising audit). Become a Humrahi is the secondary action: an outline
   that borrows the nav link colour via currentColor (so it reads on the dark hero and on the solid
   bar) and fills red on hover. Donate takes the far-right slot (margin-left:auto in a flex:1 list). */
.nav-links .cta { background: var(--red); border: 1.5px solid var(--red); color: #fff !important; padding: 12px 18px; border-radius: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.nav-links .cta:hover, .nav-links .cta:focus-visible { background: var(--crimson); border-color: var(--crimson); color: #fff !important; transform: translateY(-1px); }
.nav-links .humrahi-signin-link { background: transparent; border: 1.5px solid currentColor;
  padding: 12px 16px; border-radius: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.nav-links .humrahi-signin-link:hover, .nav-links .humrahi-signin-link:focus-visible {
  background: var(--red); border-color: var(--red); color: #fff !important; transform: translateY(-1px); }
/* The two buttons sit together at the right: secondary outline first, primary Donate far right. */
.nav-links li:has(> .humrahi-signin-link) { margin-left: auto; }
/* Current page (aria-current set by scripts/build_chrome.py): colour plus an underline, never colour alone. */
.nav-links a[aria-current="page"]:not(.cta):not(.humrahi-signin-link) { color: var(--red); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-links.on-dark a[aria-current="page"]:not(.cta):not(.humrahi-signin-link) { color: #fff; }
#nav.scrolled .nav-links a[aria-current="page"]:not(.cta):not(.humrahi-signin-link), #nav.solid .nav-links a[aria-current="page"]:not(.cta):not(.humrahi-signin-link) { color: var(--red); }
.mobile-menu a[aria-current="page"]:not(.m-cta):not([href="account.html"]) { color: var(--red); }
.nav-links { gap: 22px; }
/* Tablet band: both buttons plus the links need the room, so tighten the gaps and keep each label on one line. */
.nav-links .cta, .nav-links .humrahi-signin-link { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 1000px) {
  .nav-inner { padding: 0 20px; } /* 5 links + 2 buttons: headroom at 769px (measured 2026-11-10) */
  .nav-links { gap: 10px; margin-left: 14px; }
  .nav-links a { white-space: nowrap; font-size: 0.74rem; }
  .nav-links .cta, .nav-links .humrahi-signin-link { padding-left: 11px; padding-right: 11px; letter-spacing: 0.03em; }
  .nav-links ~ .nav-social { margin-left: 12px; }
}
/* social icons in nav */
/* margin-left is load-bearing: .nav-links is flex:1 so it eats every spare pixel and
   the CTA's margin-left:auto parks it at the ul's right edge, flush against these
   icons. Lived only in index.html's inline <style> until 2026-09-26, so the home page
   had the gap and the other 22 pages did not. Keep it here, not per page. */
.nav-social { display: flex; gap: 14px; align-items: center; margin-left: 26px; }
.nav-social a { display: inline-flex; color: var(--soft); transition: color 0.2s, transform 0.2s; }
.nav-social.on-dark a { color: rgba(255,255,255,0.8); }
#nav.scrolled .nav-social a, #nav.solid .nav-social a { color: var(--soft); }
.nav-social a:hover { color: var(--red); transform: translateY(-2px); }
.nav-social svg { width: 18px; height: 18px; fill: currentColor; }

/* ═══ Sub-page hero band ═══ */
.page-hero { position: relative; padding: 168px 0 72px; background: var(--ink); overflow: hidden; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(187,28,42,0.18), transparent 60%); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero .eyebrow { color: var(--taupe); }
.page-hero h1 { color: #fff; max-width: 14ch; }
.page-hero h1 em { font-style: italic; color: #f8a8b0; }
.page-hero p { color: rgba(240,237,230,0.7); max-width: 60ch; margin-top: 20px; font-size: 1.05rem; }
.page-hero .crumbs { font-size: 0.74rem; letter-spacing: 0.04em; color: var(--taupe); margin-bottom: 22px; }
.page-hero .crumbs a { color: var(--taupe); }
.page-hero .crumbs a:hover { color: #fff; }

/* ═══ FOOTER ══════════════════════════════ */
footer { background: var(--ink); padding: 72px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; margin-bottom: 48px; }
.footer-logo { height: 48px; width: auto; margin-bottom: 20px; }
.footer-brand p { font-size: 0.86rem; color: var(--taupe); max-width: 280px; line-height: 1.75; }
.footer-tagline { margin-top: 22px; font-family: 'Lora', serif; font-style: italic; font-size: 0.84rem; color: rgba(184,167,141,0.5); }
.footer-col h4 { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cloud); margin-bottom: 20px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 0.86rem; color: var(--taupe); transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--cloud); }
.footer-social { display: flex; gap: 14px; margin-top: 22px; }
.footer-social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(184,167,141,0.3); border-radius: 50%; color: var(--taupe); transition: all 0.25s var(--ease); }
.footer-social a:hover { color: #fff; border-color: var(--red); background: var(--red); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }
.footer-bottom { border-top: 1px solid rgba(184,167,141,0.1); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.footer-bottom p { font-size: 0.74rem; color: rgba(184,167,141,0.5); }
.footer-bottom a { color: var(--red); }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-social { display: none; }
  #nav .nav-toggle { display: flex; } /* #nav beats base .nav-toggle{display:none} defined later at L129 — without it the hamburger stays hidden on mobile */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .page-hero { padding: 140px 0 56px; }
}

/* ═══ MOBILE MENU (shared) ════════════════ */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; z-index: 320; }
.nav-toggle span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
#nav.scrolled .nav-toggle span, #nav.solid .nav-toggle span { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* height:100vh is load-bearing, not redundant with inset:0 — #nav has backdrop-filter,
   which makes it the containing block for these position:fixed children, so inset:0 sizes
   to the ~76px nav box (not the viewport) once the nav is solid/scrolled. Explicit vh height
   keeps the drawer + backdrop full-height on every page. Don't remove. */
.nav-backdrop { position: fixed; inset: 0; height: 100vh; background: rgba(28,24,23,0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s; z-index: 305; }
.nav-backdrop.open { opacity: 1; visibility: visible; }
.mobile-menu { position: fixed; inset: 0 0 0 auto; height: 100vh; width: min(82vw, 340px); background: var(--cloud); box-shadow: -8px 0 40px rgba(28,24,23,0.18); transform: translateX(100%); visibility: hidden; transition: transform 0.35s var(--ease), visibility 0.35s; z-index: 310; display: flex; flex-direction: column; padding: 92px 32px 32px; }
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mobile-menu a { font-family: 'Lora', serif; font-size: 1.15rem; color: var(--ink); padding: 15px 0; border-bottom: 1px solid var(--sand); transition: color 0.2s; }
.mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--red); }
/* Drawer twins of the nav CTAs: .nav-links is hidden under 768px, so these are the only
   buttons on phones. Donate is solid red (white on --red 6.34:1); Become a Humrahi is the outline. */
.mobile-menu a.m-cta { margin-top: 16px; background: var(--red); color: #fff;
  border-bottom: 0; border-radius: 2px; padding: 14px 18px; text-align: center; font-weight: 700;
  transition: background 0.2s; }
.mobile-menu a.m-cta:hover, .mobile-menu a.m-cta:focus-visible { background: var(--crimson); color: #fff; }
.mobile-menu a[href="account.html"] { margin-top: 12px; background: transparent; color: var(--red);
  border: 1.5px solid var(--red); border-radius: 2px; padding: 12.5px 18px; text-align: center; font-weight: 700;
  transition: background 0.2s, color 0.2s; }
.mobile-menu a[href="account.html"]:hover, .mobile-menu a[href="account.html"]:focus-visible {
  background: var(--red); color: #fff; }
.mobile-social { display: flex; gap: 4px; margin-top: 20px; }
.mobile-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; }
.mobile-social svg { width: 22px; height: 22px; fill: var(--ink); }
body.menu-open { overflow: hidden; }

/* ═══ SDG COMMITMENT (shared) ═════════════ */
.sdg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 40px; }
.sdg { padding: 26px 24px; color: #fff; display: flex; flex-direction: column; min-height: 168px; }
.sdg .no { font-family: 'Lora', serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.9; }
.sdg h3 { font-size: 1.05rem; color: #fff; margin: 4px 0 10px; }
.sdg p { font-size: 0.83rem; color: rgba(255,255,255,0.9); line-height: 1.6; }
.sdg-2 { background: #DDA63A; } .sdg-3 { background: #4C9F38; } .sdg-4 { background: #C5192D; }
.sdg-11 { background: #FD9D24; } .sdg-12 { background: #BF8B2E; } .sdg-17 { background: #19486A; }
@media (max-width: 1024px) { .sdg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sdg-grid { grid-template-columns: 1fr; } }

/* ═══ TRUST BADGES (shared) ═══════════════ */
.trust-badges { text-align: center; padding: 28px 24px; background: var(--whisper); border: 1px solid var(--sand); border-radius: 4px; }
.trust-badges .tb-label { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe-dark); margin-bottom: 16px; }
.trust-badges .tb-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 16px; padding: 0; }
.trust-badges .tb-list li { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crimson); background: #fff; border: 1px solid var(--sand); padding: 8px 14px; border-radius: 999px; }
.trust-badges .tb-more { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.trust-badges .tb-more:hover { text-decoration: underline; }

/* ═══ COOKIE CONSENT (shared) ═════════════ */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 500; max-width: 720px; margin: 0 auto; background: var(--ink); color: var(--cloud); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; box-shadow: 0 14px 44px rgba(0,0,0,0.4); padding: 18px 22px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cookie-banner .cookie-text { font-size: 0.86rem; line-height: 1.6; color: rgba(240,237,230,0.82); flex: 1; min-width: 240px; margin: 0; }
.cookie-banner .cookie-text a { color: #f8a8b0; font-weight: 600; }
.cookie-banner .cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn { padding: 10px 22px; }
.cookie-banner .cookie-decline { color: var(--cloud); border-color: rgba(255,255,255,0.4); }
.cookie-banner .cookie-decline:hover { color: #fff; border-color: #fff; }
@media (max-width: 520px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-banner .cookie-actions { justify-content: flex-end; }
}

/* ═══ ACCESSIBILITY (shared) ══════════════ */
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 400; background: var(--red); color: #fff; padding: 10px 18px; border-radius: 2px; font-size: 0.82rem; font-weight: 600; transition: top 0.2s; }
.skip-link:focus { top: 16px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; }
html:not(.js) .reveal, html:not(.js) .reveal-left, html:not(.js) .reveal-right, html:not(.js) .reveal-scale { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE ADDITIONS (2026-07 restructure) — scoped to .home / homepage IDs.
   Appended, not woven into the rules above.
   ═══════════════════════════════════════════════════════════════════════ */
/* Ribbon highlight. Wadhwani purple is NOT a programme accent — it lives only
   inside Wadhwani's own logo image and the credit line naming them.
   #F2C57C on ink = 9.1:1, so it is safe behind the ribbon's small dark label. */
:root { --ribbon-hi: #F2C57C; }

/* ── Announcement ribbon (homepage only) ── */
#promo-ribbon { position: fixed; top: 0; left: 0; right: 0; z-index: 301; background: var(--ink); border-bottom: 1px solid rgba(255,255,255,0.08); }
#promo-ribbon a { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; padding: 6px 18px; white-space: nowrap; overflow: hidden; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(240,237,230,0.9); }
#promo-ribbon .rib-tag { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.6rem; color: var(--ink); background: var(--ribbon-hi); padding: 3px 8px; border-radius: 999px; }
#promo-ribbon .rib-sep { color: rgba(255,255,255,0.28); }
#promo-ribbon .rib-cta { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 1px; }
#promo-ribbon a:hover .rib-cta { border-color: #fff; }
/* push the fixed nav below the ribbon — homepage only, so other pages keep top:0 */
.home #nav { top: 38px; }
/* #nav is the containing block for .mobile-menu/.nav-backdrop (backdrop-filter), so their
   top:0 resolves to y:38 on .home (nav pushed down by the ribbon), leaving the ribbon strip
   uncovered when the drawer is open. Pull them back up 38px and add it to the height. */
.home .mobile-menu, .home .nav-backdrop { top: -38px; height: calc(100vh + 38px); }
@media (max-width: 600px) { #promo-ribbon .rib-mid { display: none; } #promo-ribbon a { font-size: 0.66rem; gap: 7px; } }
/* ≤480px the full ribbon copy overflows (~403px in a 375px viewport). Drop the org name and
   tighten so it stays on one line (keeps the fixed 38px nav offset valid — no wrap growth). */
@media (max-width: 480px) { #promo-ribbon .rib-org { display: none; } #promo-ribbon a { font-size: 0.62rem; gap: 6px; padding: 6px 10px; } }

/* ── The story arc: chapters 01–02 → the three branches (#work is nested inside #chapters) ── */
#chapters { background: var(--cloud); }
.arc-head { max-width: 660px; margin-bottom: 56px; }
.chapters-lede { font-size: 1rem; line-height: 1.72; color: var(--soft); margin-top: 16px; }
.chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.chapter { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; background: var(--whisper); }
/* Explicit .flip, not :nth-child(even) — .arc-seam is also an <li>, so child parity lies. */
.chapter.flip .chapter-media { order: 2; }
.chapter-media { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 4 / 3; }
.chapter-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(8%) brightness(0.94) saturate(94%); }
.chapter-stamp { position: absolute; top: 20px; right: 20px; transform: rotate(-9deg); font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #3F7E44; background: rgba(240,237,230,0.94); border: 2px solid #3F7E44; border-radius: 4px; padding: 7px 12px; box-shadow: 0 4px 14px rgba(28,24,23,0.22); }
.chapter-body { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.chapter-step { font-family: 'Inter', sans-serif; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe-dark); margin-bottom: 10px; }
.chapter-body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
.chapter-body p { font-size: 0.95rem; line-height: 1.75; color: var(--soft); }
.chapter-body p strong { color: var(--red); }
.chapter-ground { font-family: 'Lora', serif; font-style: italic; font-size: 1.02rem !important; color: var(--ink) !important; border-left: 3px solid var(--red); padding-left: 18px; margin-top: 18px; }
.chapters .work-more { margin-top: 20px; }
/* Seam between chapter 01 and 02 — the spine of the story, sand fading into red. */
.arc-seam { position: relative; display: grid; place-items: center; height: 92px; background: var(--whisper); }
.arc-seam::before { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--sand), var(--red)); }
.arc-seam span { position: relative; font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe-dark); background: var(--whisper); border: 1px solid var(--sand); border-radius: 999px; padding: 7px 16px; }
/* The hinge: the trunk fans into the three branches, then the pillar cards.
   #work is nested now (no section padding of its own), so `index.html#work` needs an
   explicit offset or the fixed ribbon+nav sits on top of the Chapter 03 label. */
#work { scroll-margin-top: 128px; }
.arc-fan { display: block; width: 100%; max-width: 560px; height: 96px; margin: 0 auto; }
.arc-fan path { fill: none; stroke: var(--red); stroke-width: 2; opacity: 0.42; vector-effect: non-scaling-stroke; }
.arc-hinge { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.arc-hinge .chapter-step { color: var(--red); }
.arc-hinge p { font-size: 1rem; line-height: 1.72; color: var(--soft); margin-top: 18px; }
/* Cards now sit on the same paper as the chapter bodies (the section itself is --cloud). */
#chapters .work-card { background: var(--whisper); }
#chapters .work-tags li { background: var(--cloud); }
#chapters .work-body h3 { font-size: 1.12rem; margin-bottom: 10px; }
#chapters .work-body p { font-size: 0.86rem; }
#chapters .work-body .chapter-step { color: var(--red); margin-bottom: 8px; }
@media (max-width: 760px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter.flip .chapter-media { order: 0; }
  .chapter-media { aspect-ratio: 16 / 9; }
  .arc-seam { height: 68px; }
  .arc-fan { max-width: 260px; height: 58px; }
  .arc-hinge { margin-bottom: 36px; }
}

/* ── SDN skilling banner — Humrahi × Skills Development Network × Wadhwani Foundation.
   Replaced the "Humrahi Bhor" spotlight on 2026-08-13 (sub-brand retired; Humrahi now
   presents as an SDN partner institute). ONE component with two homes: the homepage band
   (#sdn-banner) and the skilling-page hero (.sdn-banner.is-hero, which adds nav clearance
   and inherits everything else). Keep them in sync — that is the whole point of the class.

   Amber is a FILL-ONLY colour: #EF8B22 on white is 2.7:1, well under AA, so every piece of
   text on the warm ground stays ink / --soft / --crimson. Same discipline the retired --dawn
   accent carried. Reference artwork: SDN "Build the Skills. Embrace AI." partner banner. ── */
:root { --sdn-amber: #EF8B22; --sdn-amber-lt: #F9B15C; }

.sdn-banner { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(158deg, #FFFFFF 0%, #FFFAF3 44%, #FCEDDC 100%);
  padding: clamp(52px, 6.5vw, 78px) 0 clamp(118px, 14vw, 168px); }
.sdn-banner.is-hero { padding-top: clamp(122px, 15vw, 168px); }
.sdn-banner > .container { position: relative; z-index: 1; }
/* The artwork's warm sweep along the bottom edge. Decorative only — the section's bottom
   padding above is what keeps content clear of it, so it never needs pointer events. */
.sdn-swoosh { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0;
  width: 100%; height: clamp(78px, 11vw, 150px); pointer-events: none; }

/* ── co-brand lockup: Humrahi │ SDN + Wadhwani ── */
.sdn-lockup { display: flex; align-items: center; flex-wrap: wrap; column-gap: clamp(18px, 3vw, 34px); row-gap: 16px; margin-bottom: clamp(26px, 4vw, 40px); }
.sdn-lockup .sdn-hf { height: clamp(38px, 5vw, 52px); width: auto; display: block; }
.sdn-lockup .sdn-rule { flex: 1 1 40px; height: 1px; min-width: 24px; background: linear-gradient(90deg, transparent, #E3CDB0); }
.sdn-partners { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
.sdn-mark { display: flex; flex-direction: column; line-height: 1; }
.sdn-mark b { font-family: 'Inter', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--red); }
.sdn-mark span { font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--taupe-dark); margin-top: 4px; }
.sdn-partners .sdn-seam { width: 1px; align-self: stretch; background: #E3CDB0; }
/* Wadhwani's own orange wing mark (extracted from their supplied artwork and recoloured to
   the partner banner's orange) with the wordmark typeset beside it. The mark carries alt=""
   because .sdn-wf-name states the name in text right after it — one announcement, not two. */
.sdn-wf { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sdn-wf img { height: clamp(17px, 2vw, 22px); width: auto; display: block; }
.sdn-wf-sup { font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--taupe-dark); }
.sdn-wf-name { font-family: 'Inter', sans-serif; font-size: clamp(0.68rem, 1vw, 0.8rem); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); line-height: 1.16; text-align: center; }
.sdn-wf-name b { display: block; font-weight: 600; font-size: 0.8em; letter-spacing: 0.17em; }

/* Below 620px the lockup wraps to two lines and the connector hairline becomes a stub
   dangling off the Humrahi mark — hide it rather than leave a stray tick. */
@media (max-width: 620px) { .sdn-lockup .sdn-rule { display: none; } }

/* ── headline block + rising arrows ── */
.sdn-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.72fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.sdn-head h1, .sdn-head h2 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 1.06; letter-spacing: -0.015em; color: var(--ink); max-width: 14ch; }
.sdn-head .sdn-ai { color: var(--red); font-style: normal; }
.sdn-lede { margin-top: clamp(16px, 2.4vw, 22px); max-width: 46ch; font-size: clamp(0.97rem, 1.5vw, 1.08rem); line-height: 1.68; color: var(--soft); }
.sdn-actions .btn { min-height: 44px; display: inline-flex; align-items: center; }
.sdn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(22px, 3vw, 30px); }
.sdn-note { margin: 14px 0 0; font-size: 0.82rem; color: var(--taupe-dark); }
.sdn-art { position: relative; align-self: stretch; min-height: 200px; }
/* Filled arrows grow upward on reveal. clip-path (not stroke-dash) because the shapes are
   solid; one property, GPU-composited, and it degrades to "already drawn" without JS. */
.sdn-arrows { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 0); }
.js .sdn-arrows { clip-path: inset(100% 0 0 0); transition: clip-path 1.05s var(--ease) 0.12s; }
.js .sdn-art.visible .sdn-arrows { clip-path: inset(0 0 0 0); }
.sdn-ai-orb { position: absolute; right: 2%; top: 12%; width: clamp(74px, 9vw, 104px); height: clamp(74px, 9vw, 104px); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, #fff 0%, #FFF3E4 52%, #FBE0C4 100%); border: 1.5px solid var(--sdn-amber-lt); box-shadow: 0 14px 34px rgba(239,139,34,0.24); font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: 0.04em; color: var(--crimson); }

/* ── the 12-module rail ──
   One grid, not a scroll container: 12 items fit across on desktop and re-flow to 6 / 4 / 3
   columns down the ladder, so the page itself never scrolls sideways on a phone. The arc
   offsets are the artwork's signature curve and switch on only where all 12 sit in one row. */
.sdn-rail-wrap { margin-top: clamp(38px, 5.5vw, 60px); }
.sdn-rail-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px; margin-bottom: clamp(20px, 3vw, 28px); }
.sdn-rail-head strong { font-family: 'Lora', serif; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: var(--ink); line-height: 1; }
.sdn-rail-head span { font-size: 0.86rem; color: var(--soft); }
.sdn-rail { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; margin: 0; padding: 0; }
.sdn-mod { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 6px 2px; background: none; border: 0; border-radius: 10px; cursor: pointer; font: inherit; text-align: center; -webkit-tap-highlight-color: transparent; }
.sdn-mod:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.sdn-mod-ico { flex: none; display: grid; place-items: center; width: clamp(46px, 5.2vw, 58px); height: clamp(46px, 5.2vw, 58px); border-radius: 50%; background: var(--sdn-amber); color: #fff; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); }
.sdn-mod-ico svg { width: 48%; height: 48%; }
/* The artwork alternates orange and deep red around the arc. */
.sdn-rail > li:nth-child(even) .sdn-mod-ico { background: var(--red); }
.sdn-mod-no { font-family: 'Lora', serif; font-weight: 700; font-size: 1.02rem; line-height: 1; color: var(--red); }
.sdn-mod-name { font-size: 0.74rem; line-height: 1.32; color: var(--soft); max-width: 15ch; }
.sdn-mod:hover .sdn-mod-ico { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 24px rgba(28,24,23,0.16); }
.sdn-mod[aria-current="true"] .sdn-mod-ico { transform: translateY(-4px) scale(1.12); box-shadow: 0 12px 26px rgba(187,28,42,0.3); }
.sdn-mod[aria-current="true"] .sdn-mod-name { color: var(--ink); font-weight: 700; }

/* Detail panel. min-height is deliberate: the copy swaps on hover/focus and a growing box
   would shove the page under the reader's cursor (CLS). Sized to the longest blurb. */
.sdn-detail { margin-top: clamp(24px, 3.5vw, 34px); max-width: 760px; min-height: 126px; padding: clamp(18px, 2.6vw, 24px) clamp(20px, 3vw, 28px); background: #fff; border: 1px solid #F1DCC1; border-left: 4px solid var(--red); border-radius: 8px; }
.sdn-detail .sdn-d-tag { display: block; font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe-dark); margin-bottom: 8px; }
.sdn-detail h3 { font-family: 'Lora', serif; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink); margin-bottom: 8px; }
.sdn-detail p { font-size: 0.93rem; line-height: 1.68; color: var(--soft); margin: 0; max-width: 62ch; }

@media (min-width: 460px) { .sdn-rail { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px) { .sdn-rail { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1020px) {
  .sdn-rail { grid-template-columns: repeat(12, 1fr); gap: 6px; }
  .sdn-rail > li:nth-child(1), .sdn-rail > li:nth-child(12) { transform: translateY(26px); }
  .sdn-rail > li:nth-child(2), .sdn-rail > li:nth-child(11) { transform: translateY(12px); }
  .sdn-rail > li:nth-child(3), .sdn-rail > li:nth-child(10) { transform: translateY(2px); }
  .sdn-rail > li:nth-child(4), .sdn-rail > li:nth-child(9)  { transform: translateY(-6px); }
  .sdn-rail > li:nth-child(5), .sdn-rail > li:nth-child(8)  { transform: translateY(-12px); }
  .sdn-rail > li:nth-child(6), .sdn-rail > li:nth-child(7)  { transform: translateY(-16px); }
  .sdn-mod-name { font-size: 0.7rem; }
}
/* Below 900px the two-column head stacks and the decorative arrows earn nothing but height. */
@media (max-width: 900px) {
  .sdn-head { grid-template-columns: 1fr; }
  .sdn-head h1, .sdn-head h2 { max-width: 18ch; }
  .sdn-art { display: none; }
}


/* ═══ ON NOW strip + FLOOD RELIEF cards + PROJECTS page (2026-11-08) ═══
   Cards carrying data-until="YYYY-MM-DD" remove themselves after that day (IST). */
.onnow { background: var(--whisper); padding: 72px 0; border-bottom: 1px solid var(--sand); }
.onnow-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; }
.onnow-all { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); padding: 12px 0; }
.onnow-all:hover { color: var(--crimson); }
.onnow-list { display: grid; gap: 12px; list-style: none; }
.oncard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--sand); border-left: 3px solid var(--red); border-radius: 3px; padding: 16px 18px; color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; min-height: 44px; }
.oncard.join { border-left-color: var(--taupe-dark); }
.oncard:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(44,40,39,.08); }
.oncard:focus-visible, .relief-card a:focus-visible, .onnow-all:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.oncard-tag { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-dark); margin-bottom: 3px; }
.oncard-title { font-family: 'Lora', serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); line-height: 1.3; }
.oncard p { font-size: 0.86rem; line-height: 1.55; margin-top: 3px; }
.oncard-go { color: var(--red); font-size: 1.2rem; }
.oncard-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--cloud); display: grid; place-items: center; color: var(--red); }
.oncard.join .oncard-icon { color: var(--taupe-dark); }
.oncard-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.relief { padding: 96px 0; background: var(--cloud); }
.relief-intro { max-width: 720px; margin-bottom: 40px; }
.relief-intro p { margin-top: 14px; }
.relief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; }
.relief-card { background: #fff; border: 1px solid var(--sand); border-radius: 3px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.relief-card h3 { font-size: 1.3rem; }
.relief-meta { font-size: 0.8rem; color: var(--taupe-dark); font-weight: 600; }
.relief-card p { font-size: 0.9rem; line-height: 1.65; flex: 1; }
.relief-card .relief-go { font-size: 0.78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); padding: 10px 0 0; }
.relief-card .relief-langs { font-size: 0.85rem; color: var(--soft); }
.relief-card .relief-langs a { color: var(--red); text-decoration: underline; }
.badge-closed { align-self: flex-start; font-size: 0.64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); background: var(--cloud); border: 1px solid var(--sand); border-radius: 20px; padding: 4px 10px; }
.relief-more { margin-top: 28px; font-size: 0.92rem; color: var(--soft); }
.relief-more a { color: var(--red); text-decoration: underline; }
.page-hero .notice-closed, .notice-closed { margin-top: 22px; padding: 16px 18px; border-left: 3px solid #f8a8b0; background: rgba(255,255,255,.08); color: #fff; font-size: .95rem; line-height: 1.6; }
.notice-closed a { color: #f8a8b0; font-weight: 600; text-decoration: underline; }

.proj-section { padding: 64px 0; border-bottom: 1px solid var(--sand); }
.proj-section:last-of-type { border-bottom: 0; }
.proj-section > .container > p { max-width: 720px; margin: 10px 0 28px; }
.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; }

@media (max-width: 900px) {
  .proj-grid { grid-template-columns: 1fr; }
  .relief-grid { grid-template-columns: 1fr; }
  .onnow, .relief { padding: 56px 0; }
}
@media (max-width: 520px) {
  .oncard { grid-template-columns: 1fr auto; padding: 14px 16px; }
  .oncard-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) { .oncard, .oncard:hover { transition: none; transform: none; } }

/* ─── What's happening: event rows (scripts/cards.py) ─── */
.ev-list { list-style: none; display: grid; gap: 14px; }
.ev { display: grid; grid-template-columns: 76px 1fr auto; gap: 22px; align-items: center; background: #fff; border: 1px solid var(--sand); border-radius: 3px; padding: 20px 24px; }
.ev-date { text-align: center; font-family: 'Lora', serif; color: var(--red); line-height: 1; border-right: 1px solid var(--sand); padding-right: 18px; }
.ev-date b { display: block; font-size: 2.2rem; }
.ev-date span { display: block; margin-top: 4px; font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-dark); }
.ev-status { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); background: rgba(187,28,42,.08); border-radius: 20px; padding: 3px 10px; margin-bottom: 8px; }
.ev-status.is-soon { background: var(--red); color: #fff; }
.ev-title { font-size: 1.2rem; color: var(--ink); }
.ev-place { font-size: .82rem; font-weight: 600; color: var(--taupe-dark); margin-top: 2px; }
.ev-line { font-size: .92rem; line-height: 1.6; margin-top: 6px; max-width: 60ch; }
.ev-actions { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.ev-btn { display: block; text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 12px 18px; border-radius: 2px; border: 1.5px solid var(--taupe); color: var(--ink); min-height: 44px; transition: border-color .2s, color .2s, background .2s; }
.ev-btn:hover { border-color: var(--red); color: var(--red); }
.ev-btn.is-primary { background: var(--red); border-color: var(--red); color: #fff; }
.ev-btn.is-primary:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.ev-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.ev-empty { display: none; font-size: .95rem; }
.ev-empty a { color: var(--red); text-decoration: underline; }
.ev-box.is-empty .ev-empty { display: block; }
#on-now:has(.ev-box.is-empty) { display: none; }
@media (max-width: 700px) {
  .ev { grid-template-columns: 58px 1fr; gap: 16px; padding: 18px; }
  .ev-date { padding-right: 12px; }
  .ev-date b { font-size: 1.8rem; }
  .ev-actions { grid-column: 1 / -1; flex-direction: row; min-width: 0; }
  .ev-btn { flex: 1; }
}

/* ─── Homepage: themed skilling banner at reduced size + ribbon fallback (2026-11-09) ─── */
.sdn-banner.is-compact { padding: clamp(40px, 4.5vw, 56px) 0 clamp(80px, 9vw, 112px); }
.sdn-banner.is-compact .sdn-swoosh { height: clamp(56px, 7vw, 96px); }
.sdn-banner.is-compact .sdn-lockup { margin-bottom: clamp(18px, 2.4vw, 26px); }
.sdn-banner.is-compact .sdn-lockup .sdn-hf { height: clamp(30px, 3.6vw, 40px); }
.sdn-banner.is-compact .sdn-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
.sdn-banner.is-compact .sdn-lede { margin-top: 12px; font-size: .95rem; }
.sdn-banner.is-compact .sdn-actions { margin-top: 18px; }
.sdn-banner.is-compact .sdn-note { margin-top: 10px; }
.sdn-banner.is-compact .sdn-art { min-height: 160px; max-height: 260px; }
#promo-ribbon a + a { display: none; }
/* Newsletter box (same markup as index.html's "Stay in the loop"; used at the foot of the field-report and donate pages) */
.news-section .news-box { max-width: 720px; margin: 0 auto; }
.news-box { background: var(--ink); color: var(--cloud); padding: 36px 32px; border-radius: 4px; }
.news-box h3 { color: #fff; font-size: 1.2rem; margin-bottom: 8px; }
.news-box p { color: rgba(240,237,230,0.62); font-size: 0.88rem; margin-bottom: 20px; }
.news-box .news-field { display: flex; gap: 8px; flex-wrap: wrap; }
.news-box input { flex: 1; min-width: 180px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; border-radius: 2px; padding: 12px 14px; font-size: 0.9rem; }
.news-box input::placeholder { color: rgba(240,237,230,0.5); }
.news-box input:focus-visible { outline: 3px solid #f8a8b0; outline-offset: 2px; }

/* Photo gallery (index: one row; about.html#gallery: four rows + filters). Shared, so it lives here. */
/* ═══ STORY: cinematic marquee gallery ═══ */
.story-gal { background: var(--ink); padding: 96px 0 84px; overflow: hidden; border-bottom: 1px solid rgba(240,237,230,0.08); }
.story-intro { text-align: center; max-width: 760px; margin: 0 auto 46px; padding: 0 24px; }
.story-intro .eyebrow { color: var(--taupe); }
.story-intro h2 { font-family: 'Lora', serif; font-weight: 600; line-height: 1.06; color: var(--cloud); font-size: clamp(2.3rem, 5.4vw, 3.9rem); letter-spacing: -0.01em; }
.story-lede { font-size: 1.0rem; line-height: 1.72; color: rgba(240,237,230,0.6); max-width: 56ch; margin: 20px auto 0; }
.mgal { display: flex; flex-direction: column; gap: 12px; }
.mrow { overflow: hidden; height: 208px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mrow:nth-child(even) { height: 150px; }
.mrow-track { display: flex; gap: 12px; width: max-content; height: 100%; align-items: stretch; will-change: transform; animation: mscroll 90s linear infinite; }
.mrow.rev .mrow-track { animation-direction: reverse; }
.mrow-track:hover, .mrow-track:focus-within { animation-play-state: paused; }
.mgal.is-paused .mrow-track { animation-play-state: paused; }
@keyframes mscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.m-card { position: relative; height: 100%; flex: 0 0 auto; padding: 0; border: 0; overflow: hidden; border-radius: 8px; background: #3a3434; cursor: pointer; }
.m-card img { height: 100%; width: auto; max-width: none; display: block; object-fit: cover; filter: sepia(8%) brightness(0.86) saturate(92%); transition: filter 0.4s var(--ease), transform 0.5s var(--ease); }
.m-card:hover { z-index: 3; }
.m-card:hover img, .m-card:focus-visible img { filter: sepia(0%) brightness(1.02) saturate(108%); transform: scale(1.06); }
.m-card:focus-visible { outline: 3px solid #f8a8b0; outline-offset: 2px; }
.m-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px; font-family: 'Inter', sans-serif; font-size: 0.7rem; line-height: 1.35; color: #fff; background: linear-gradient(to top, rgba(15,12,11,0.88), transparent); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.m-card:hover .m-cap, .m-card:focus-visible .m-cap { opacity: 1; }
@media (hover: none) { .m-cap { opacity: 1; padding-top: 18px; } }
/* filter chips + motion control */
.mfilter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; }
.mfilter .chip { min-height: 44px; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.01em; padding: 8px 16px; border-radius: 40px; border: 1px solid rgba(240,237,230,0.26); background: transparent; color: rgba(240,237,230,0.78); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.mfilter .chip:hover { border-color: #f8a8b0; color: #f8a8b0; }
.mfilter .chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.mfilter .chip:focus-visible { outline: 2px solid #f8a8b0; outline-offset: 2px; }
.gal-pause { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; border-radius: 40px; border: 1px solid rgba(240,237,230,0.26); background: transparent; color: rgba(240,237,230,0.78); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.gal-pause:hover { border-color: #f8a8b0; color: #f8a8b0; }
.gal-pause:focus-visible { outline: 2px solid #f8a8b0; outline-offset: 2px; }
.gal-pause svg { width: 11px; height: 11px; fill: currentColor; }
.gal-pause .gp-play { display: none; }
.gal-pause[aria-pressed="true"] .gp-pause { display: none; }
.gal-pause[aria-pressed="true"] .gp-play { display: block; }
/* lightbox */
#gal-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(18,15,14,0.94); display: none; align-items: center; justify-content: center; padding: 4vh 4vw; opacity: 0; transition: opacity 0.25s; }
#gal-lightbox.open { display: flex; opacity: 1; }
body.gglb-open #nav, body.gglb-open .cookie-banner { display: none !important; }
#gal-lightbox figure { margin: 0; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
#gal-lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,0.6); }
#gal-lightbox figcaption { color: rgba(240,237,230,0.86); font-family: 'Inter', sans-serif; font-size: 0.86rem; letter-spacing: 0.02em; margin-top: 16px; text-align: center; }
#gal-lightbox .lb-close { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 0.2s; }
#gal-lightbox .lb-close:hover { background: rgba(255,255,255,0.26); }
@media (prefers-reduced-motion: reduce) { .mrow-track { animation: none !important; } }


@media (max-width: 1024px) { .mrow { height: 176px; } .mrow:nth-child(even) { height: 128px; } }
@media (max-width: 768px) { .mrow { height: 146px; } .mrow:nth-child(even) { height: 110px; } }
@media (max-width: 480px) { .mrow { height: 122px; } .mrow:nth-child(even) { height: 96px; } .mgal { gap: 8px; } }

/* Compact Donate beside the hamburger: the nav links are hidden at this width, so Donate would sit inside the drawer. */
.nav-donate-compact { display: none; }
@media (max-width: 768px) {
  .nav-donate-compact { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; margin-right: 6px; padding: 0 16px; background: var(--red); color: #fff; border-radius: 2px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transition: background 0.2s; }
  .nav-donate-compact:hover, .nav-donate-compact:focus-visible { background: var(--crimson); color: #fff; }
}
/* Focus ring: red fails on dark bands, so use white inside them. */
#hero :is(a, button):focus-visible, footer :is(a, button):focus-visible, .story-gal :is(a, button):focus-visible,
#media-teaser :is(a, button):focus-visible, .about-hero :is(a, button):focus-visible { outline-color: #fff; }
/* Reduced motion freezes the photo rows; let them scroll sideways so every card stays reachable. */
@media (prefers-reduced-motion: reduce) {
  .mrow { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}