/* =========================================================================
   ANRIA Qatar — design system
   Kerala warmth × Gulf sophistication. Ivory ground, burgundy structure,
   brass detailing. One stylesheet, no preprocessor, no runtime CSS.
   ========================================================================= */

/* -------------------------------------------------------------- 1. tokens */
:root {
  /* Surfaces */
  --ivory:        #FCFAF7;
  --ivory-warm:   #F8F3EC;
  --sand:         #F2EAE0;
  --sand-deep:    #E6D9C8;
  --paper:        #FFFFFF;

  /* Ink */
  --ink:          #241B1E;
  --ink-2:        #4B3E42;
  --ink-3:        #6E6065;
  /* --ink-4 is the lightest ink still used for real text (dates, captions,
     breadcrumbs); it is held at >= 4.5:1 on the ivory ground, not chosen by eye. */
  --ink-4:        #736569;

  /* Brand — burgundy carries both Qatar's maroon and Kerala's temple red */
  --maroon:       #7A1C34;
  --maroon-deep:  #55101F;
  --maroon-ink:   #3A0A15;
  --maroon-soft:  #9C3550;
  --maroon-wash:  #F6ECEE;

  /* Brass / gold detailing */
  --gold:         #A9812F;
  --gold-bright:  #C79E4C;
  --gold-soft:    #E3CE9E;
  --gold-wash:    #F7F0E0;

  /* Kerala backwater green — used sparingly, for category accents only */
  --green:        #1F5B4E;
  --green-wash:   #E9F1EE;

  /* Semantic */
  --bg:           var(--ivory);
  --fg:           var(--ink);
  --rule:         #E7DCCF;
  --rule-strong:  #D6C6B2;
  --focus:        #7A1C34;

  /* Type */
  /* Display — Fjalla One. One weight only, which is fine at headline sizes. */
  --font-display: "Fjalla One", "Oswald", "Arial Narrow", sans-serif;
  /* Interface — Oswald. Condensed, wide weight range, excellent uppercase. */
  --font-ui:      "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  /* Reading — Roboto Slab. The only one of the three suited to long text. */
  --font-slab:    "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-body:    var(--font-slab);
  /* Malayalam — Anek Malayalam, variable on width (75-125) and weight (100-800).
     Headlines use a condensed width to echo Fjalla One; body stays at normal. */
  --font-ml:      "Anek Malayalam", "Noto Sans Malayalam", "Manjari", sans-serif;

  --fs-hero:  clamp(2.9rem, 1.55rem + 5.6vw, 5.5rem);
  --fs-h1:    clamp(2.4rem, 1.5rem + 3.9vw, 4.2rem);
  --fs-h2:    clamp(1.95rem, 1.4rem + 2.5vw, 3.2rem);
  --fs-h3:    clamp(1.3rem, 1.14rem + 0.68vw, 1.65rem);
  --fs-h4:    clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --fs-lead:  clamp(1.04rem, 0.98rem + 0.38vw, 1.24rem);
  --fs-body:  clamp(0.97rem, 0.95rem + 0.11vw, 1.03rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* Space */
  --gutter:    clamp(1.15rem, 0.6rem + 2.4vw, 2.75rem);
  --shell:     78rem;
  --shell-wide:88rem;
  --shell-text:44rem;
  --section:   clamp(4.25rem, 2.5rem + 7vw, 8.5rem);
  --section-sm:clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Shape */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Elevation — layered, low-contrast, warm-tinted */
  --sh-1: 0 1px 2px rgba(58, 26, 36, .05), 0 2px 8px -4px rgba(58, 26, 36, .07);
  --sh-2: 0 1px 2px rgba(58, 26, 36, .05), 0 10px 26px -14px rgba(58, 26, 36, .18);
  --sh-3: 0 2px 4px rgba(58, 26, 36, .05), 0 22px 48px -22px rgba(58, 26, 36, .26);
  --sh-4: 0 4px 8px rgba(58, 26, 36, .06), 0 40px 80px -32px rgba(58, 26, 36, .34);

  /* Motion */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .18s;
  --t-mid:  .34s;
  --t-slow: .62s;

  --header-h: 84px;
}

/* --------------------------------------------------------------- 2. reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

[hidden] { display: none !important; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background-color: var(--sand); }
svg { fill: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

/* The largest type is Fjalla One in both schemes — it carries the brand voice. */
.hero__title,
.page-hero__title,
.article-hero__title,
.cta-band h2,
.error-code,
.unlisted__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.002em;
  line-height: 1.02;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: 0.005em; }
h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0.005em; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .45em; }

blockquote { margin: 0; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

button { font: inherit; color: inherit; }

::selection { background: var(--maroon); color: var(--ivory); }

/* Focus: visible, warm, never removed */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :focus-visible,
.band-dark :focus-visible { outline-color: var(--gold-soft); }

/* ------------------------------------------------------ 3. layout helpers */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: var(--shell-wide); }
.shell--text { max-width: var(--shell-text); }

.section { padding-block: var(--section); position: relative; }
.section--sm { padding-block: var(--section-sm); }
.section--tight-top { padding-top: var(--section-sm); }

.band-sand  { background: var(--sand); }
.band-warm  { background: var(--ivory-warm); }
.band-dark  { background: var(--maroon-ink); color: var(--sand); }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--ivory); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: translateY(-140%);
  z-index: 200;
  background: var(--maroon);
  color: var(--ivory);
  padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

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

/* ---------------------------------------------------- 4. editorial pieces */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 1.85rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.band-dark .eyebrow { color: var(--gold-bright); }
.band-dark .eyebrow::before { background: var(--gold); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
  letter-spacing: -0.011em;
}
.band-dark .lead { color: #DCC9CD; }

.section-head { max-width: 46rem; margin-bottom: clamp(2.4rem, 1.4rem + 3vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head > h2 + .lead { margin-top: 1.15rem; }

/* Split heading rows: title left, supporting copy right */
.head-split {
  display: grid;
  gap: clamp(1.25rem, .5rem + 2.4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(2.4rem, 1.4rem + 3vw, 4rem);
}
@media (min-width: 62rem) {
  .head-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .head-split__aside { padding-bottom: .35rem; }
}

/* ------------------------------------------------------------ 5. buttons */
.btn {
  --btn-bg: var(--maroon);
  --btn-fg: #FFF7F2;
  --btn-bd: var(--maroon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92em 1.6em;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease),
              background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
  will-change: transform;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--maroon-deep);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease-out);
}
.btn:hover { box-shadow: var(--sh-2); }
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: translateY(1px) scale(.988); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--rule-strong);
}
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover { color: var(--ivory); border-color: var(--ink); }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--ivory);
  --btn-bd: rgba(227, 206, 158, .45);
}
.btn--light::after { background: var(--gold-soft); }
.btn--light:hover { color: var(--maroon-ink); border-color: var(--gold-soft); }

.btn--gold {
  --btn-bg: var(--gold-bright);
  --btn-fg: var(--maroon-ink);
  --btn-bd: var(--gold-bright);
}
.btn--gold::after { background: var(--gold-soft); }

.btn--sm { padding: .68em 1.15em; font-size: var(--fs-micro); }
.btn--lg { padding: 1.02em 1.9em; font-size: 0.94rem; }

.btn__icon { flex: none; transition: transform var(--t-mid) var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(4px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
}

/* Text link with animated arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--maroon);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-mid) var(--ease-out), color var(--t-fast) var(--ease);
}
.link-arrow:hover, .link-arrow:focus-visible { background-size: 100% 1px; }
.link-arrow svg { transition: transform var(--t-mid) var(--ease-out); flex: none; }
.link-arrow:hover svg { transform: translateX(4px); }
.band-dark .link-arrow { color: var(--gold-bright); }

/* ------------------------------------------------- 5b. Malayalam content */
/* Malayalam needs more leading and slightly larger glyphs than Latin at the
   same nominal size, or the conjuncts collide. */
[lang="ml"] {
  font-family: var(--font-ml);
  line-height: 1.95;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}
h1[lang="ml"], h2[lang="ml"], h3[lang="ml"], .card__title[lang="ml"] {
  font-family: var(--font-ml);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.005em;
}
.prose[lang="ml"] p { font-size: 1.04em; }

/* --------------------------------------------------------- 5b2. demo bar */
.demo-bar {
  background: #2F2A28;
  color: #E9E2DC;
  font-size: var(--fs-micro);
  letter-spacing: .01em;
  padding-block: .5rem;
  text-align: center;
  position: relative;
  z-index: 102;
}
.demo-bar strong { color: var(--gold-bright); font-weight: 700; }
.demo-bar a { color: var(--gold-soft); }

/* ---------------------------------------------------- 5c. announcement bar */
.announce {
  position: relative;
  z-index: 101;
  background: var(--maroon-ink);
  color: var(--sand);
  font-size: var(--fs-small);
  border-bottom: 1px solid rgba(227, 206, 158, .16);
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  padding-block: .6rem;
  text-align: center;
}
.announce__dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 0 rgba(199, 158, 76, .6);
  animation: announcePulse 2.6s var(--ease-in-out) infinite;
}
@keyframes announcePulse {
  0%   { box-shadow: 0 0 0 0 rgba(199, 158, 76, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(199, 158, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(199, 158, 76, 0); }
}
.announce__text { margin: 0; color: #E4D3D7; }
.announce__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  color: var(--gold-bright);
  text-decoration: none;
  padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color var(--t-fast) var(--ease), background-size var(--t-mid) var(--ease-out);
}
.announce__cta:hover { color: var(--gold-soft); background-size: 0% 1px; }
.announce__cta svg { transition: transform var(--t-mid) var(--ease-out); }
.announce__cta:hover svg { transform: translate(2px, -2px); }

/* -------------------------------------------------------------- 6. header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease), backdrop-filter var(--t-mid) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header::before {
  /* Warm ivory veil that fades in on scroll — cheaper than animating filters */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(252, 250, 247, .82);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
  pointer-events: none;
}
.site-header.is-scrolled { border-bottom-color: var(--rule); box-shadow: var(--sh-1); }
.site-header.is-scrolled::before { opacity: 1; }
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { backdrop-filter: saturate(150%) blur(14px); }
  .site-header.is-scrolled::before { background: rgba(252, 250, 247, .72); }
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, .2rem + 1.6vw, 2rem);
  height: var(--header-h);
  transition: height var(--t-mid) var(--ease);
}
.site-header.is-scrolled .header-inner { height: 68px; }

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  text-decoration: none;
  color: var(--maroon-ink);
  flex: none;
  margin-right: auto;
}
.brand__mark {
  width: 46px; height: 46px;
  flex: none;
  object-fit: contain;
  background: transparent;
  transition: transform var(--t-slow) var(--ease-out), width var(--t-mid) var(--ease), height var(--t-mid) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-4deg) scale(1.05); }
.site-header.is-scrolled .brand__mark { width: 39px; height: 39px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.015em;
}
.brand__sub {
  font-size: .59rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-top: .16rem;
}

/* Desktop nav */
.nav { display: none; }
@media (min-width: 64rem) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: clamp(.4rem, -.4rem + 1.5vw, 1.4rem); list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  position: relative;
  display: block;
  padding: .5rem .15rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 1.5px;
  background: var(--maroon);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--maroon); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--maroon); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--gold); }

.header-cta { display: none; flex: none; }
@media (min-width: 64rem) { .header-cta { display: inline-flex; } }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  margin-right: -.4rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nav-toggle:hover { border-color: var(--rule-strong); background: rgba(255,255,255,.6); }
@media (min-width: 64rem) { .nav-toggle { display: none; } }
.nav-toggle__box { position: relative; width: 18px; height: 12px; }
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 5.25px; }
.nav-toggle__bar:nth-child(3) { top: 10.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out), visibility var(--t-mid);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 64rem) { .mobile-nav { display: none; } }

.mobile-nav__list { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--rule); }
.mobile-nav__list li { margin: 0; border-bottom: 1px solid var(--rule); }
.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: 1.1rem .25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(.6rem);
}
.mobile-nav.is-open .mobile-nav__link { animation: drawerIn .5s var(--ease-out) forwards; }
.mobile-nav__link[aria-current="page"] { color: var(--maroon); }
.mobile-nav__num { font-family: var(--font-body); font-size: .68rem; font-weight: 600; color: var(--gold); letter-spacing: .12em; }
@keyframes drawerIn { to { opacity: 1; transform: translateY(0); } }

.mobile-nav__foot { margin-top: auto; padding-top: 2rem; }
.mobile-nav__meta { font-size: var(--fs-small); color: var(--ink-3); margin-top: 1.25rem; }
.mobile-nav__meta a { color: var(--maroon); }

/* ---------------------------------------------------------------- 7. hero */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 6rem));
  padding-bottom: clamp(3rem, 1.5rem + 6vw, 7rem);
  overflow: hidden;
  /* Both washes fade out well before the section edge, so the band boundary
     below stays invisible rather than cutting the tint off in a straight line. */
  background:
    radial-gradient(105% 80% at 90% 6%, var(--gold-wash) 0%, transparent 58%),
    radial-gradient(72% 58% at -4% 62%, var(--maroon-wash) 0%, transparent 66%),
    var(--ivory);
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2rem, -1rem + 6vw, 5rem); }
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  font-variation-settings: "opsz" 100;
  margin-bottom: 1.6rem;
}
.hero__title span { display: block; }
.hero__title span:nth-child(2) { color: var(--maroon); }
.hero__title span:nth-child(3) { font-style: italic; font-weight: 500; }

.hero__lead { max-width: 34rem; margin-bottom: 2.1rem; }
.hero__scroll {
  margin-bottom: 0;
  display: none;
  align-items: center;
  gap: .6rem;
  margin-top: 3.25rem;
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
@media (min-width: 62rem) { .hero__scroll { display: flex; } }
.hero__scroll-line { width: 3.5rem; height: 1px; background: var(--rule-strong); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--maroon);
  transform: translateX(-100%);
  animation: scrollHint 2.6s var(--ease-in-out) infinite;
}
@keyframes scrollHint {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ------------------------------------------------------- hero backdrop
   A faded moving background behind the hero: either a self-hosted looping
   video or a four-photograph CSS cross-fade. Both sit under an ivory veil so
   the headline keeps its contrast — the motion is atmosphere, never content,
   and nothing here is readable or focusable.

   The veil is the load-bearing part. Text contrast must not depend on which
   frame of the video happens to be on screen, so the wash is opaque enough on
   the left (where the copy sits) to hold the ratio at the darkest frame. */
.hero--backdrop { --hero-bg-opacity: .22; }
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero--backdrop .shell { position: relative; z-index: 1; }
.hero--backdrop .hero__orb { z-index: 1; }

.hero__bg-media,
.hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desaturated and slightly lifted so the photography reads as a texture
     rather than competing with the hero's own photo cluster. */
  filter: saturate(.72) contrast(.94);
}
.hero__bg-media {
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
  transform: scale(1.04);
  animation: heroDrift 34s var(--ease-in-out) infinite alternate;
}
/* app.js adds this once the video can actually paint a frame, so a slow
   connection shows the ivory ground instead of a black rectangle. */
.hero__bg--video.is-ready .hero__bg-media { opacity: var(--hero-bg-opacity); }
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

/* Slideshow: four slides, one 24s cycle, each holding for 6s with a 1s
   cross-fade and a slow Ken Burns push. Timings are authored here rather than
   passed in, because a style="" attribute would cost the site its strict CSP.

   The visible window is 7s, not 6s — one second longer than the step between
   slides. That overlap is what makes it a cross-fade: with a window of exactly
   6s each slide finishes fading out before the next starts fading in, and the
   hero blinks empty for a second between every photograph. */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroSlide 24s linear infinite;
}
/* Negative delays start each slide part-way through the cycle. The first is
   offset by a full second so it is already at its held opacity on the first
   paint — starting it at 0s would fade the hero up from empty, and starting a
   *later* slide at 0s would show the wrong photograph for half a second and
   then cross-fade off it. The rest run 6s apart, in source order. */
.hero__slide:nth-child(1) { animation-delay:  -1s; }
.hero__slide:nth-child(2) { animation-delay: -19s; }
.hero__slide:nth-child(3) { animation-delay: -13s; }
.hero__slide:nth-child(4) { animation-delay:  -7s; }
@keyframes heroSlide {
  0%     { opacity: 0;                      transform: scale(1.03); }
  4.17%  { opacity: var(--hero-bg-opacity); }
  25%    { opacity: var(--hero-bg-opacity); }
  29.17% { opacity: 0;                      transform: scale(1.12); }
  100%   { opacity: 0;                      transform: scale(1.03); }
}

/* --- veil: light -------------------------------------------------------
   For a faint backdrop (opacity ~0.15–0.30) under the normal dark-on-ivory
   hero. The wash does the readability work; the copy is unchanged. */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    /* The stops are set by the contrast budget, not by eye. `--ink-4` (the
       scroll hint) is the lightest ink on the page and is held at 4.5:1; the
       worst case is a fully black video frame under the copy, and these values
       keep that above the line across the whole column the text occupies. */
    linear-gradient(100deg, var(--ivory) 4%, rgba(252, 250, 247, .88) 34%, rgba(252, 250, 247, .54) 62%, rgba(252, 250, 247, .64) 100%),
    linear-gradient(to bottom, rgba(252, 250, 247, .9) 0%, rgba(252, 250, 247, .1) 26%, rgba(252, 250, 247, .1) 74%, var(--ivory) 100%);
}
/* On phones the copy runs the full width, so the wash has to be even. */
@media (max-width: 61.99rem) {
  .hero__veil {
    background: linear-gradient(to bottom, rgba(252, 250, 247, .93) 0%, rgba(252, 250, 247, .8) 45%, rgba(252, 250, 247, .92) 100%);
  }
}
.hero__grain {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/lattice.svg");
  background-size: 340px;
  opacity: .05;
  mix-blend-mode: multiply;
}

/* --- veil: dark --------------------------------------------------------
   Once the footage is bright enough to actually watch, no amount of ivory
   wash will hold dark text over it — the frame behind any given word is
   whatever the camera was pointing at. So the hero flips: a burgundy scrim
   over the video, and the copy goes ivory.

   The stops are a contrast budget against a *fully white* frame, which is the
   worst case for light text (a stage light, a white kurta, an overexposed
   sky). Lightening them to show more footage is exactly what breaks it. */
.hero--dark {
  /* The base under the video. It must already be dark: the video fades in
     only once it can paint, and for that first moment — or forever, if the
     file 404s — this is what the ivory headline is sitting on. */
  background: var(--maroon-ink);
  color: var(--ivory);
}
/* Three layers, and the split between them is the whole point: the scrim is
   heavy only where there is actually something to read, instead of being an
   even wash over footage nobody can then see.

     1. header band  — full width, protects the ivory nav links, gone by 22%.
     2. horizontal   — heavy across the copy column, almost nothing on the
                       right, which is the strip the framed slideshow uncovers.
     3. vertical     — light through the middle, deep foot for the transition
                       into the section below.

   The stops come out of a solver (every piece of hero copy checked on a grid
   across the hero) against a worst-case frame of L=0.80. The graded clip's
   measured ceiling is L=0.71, so there is real headroom. Tightest item is the
   eyebrow at 107% of its requirement; the copy zones sit at 109-136%.

   This is only safe because the *file* was graded to bound its highlights —
   see the README in src/assets/video/. Drop an ungraded clip in and this
   scrim is no longer sufficient. */
.hero__bg--veil-dark .hero__veil {
  background:
    linear-gradient(to bottom, rgba(24, 6, 13, .66) 0%, rgba(24, 6, 13, 0) 22%),
    linear-gradient(100deg, rgba(24, 6, 13, .70) 0%, rgba(24, 6, 13, .64) 52%, rgba(24, 6, 13, .18) 78%, rgba(24, 6, 13, .13) 100%),
    linear-gradient(to bottom, rgba(24, 6, 13, .34) 0%, rgba(24, 6, 13, .06) 22%, rgba(24, 6, 13, .06) 70%, rgba(24, 6, 13, .66) 100%);
}
@media (max-width: 61.99rem) {
  /* Phones run the copy full width, so there is no quiet right-hand side to
     open up: the scrim has to be even, and therefore heavier. */
  /* Phones get no horizontal relief — the copy runs the full width, so every
     point has to carry the full budget (>= .645 at the design bound). The
     middle is a touch heavier than it used to be because the video now plays
     at full opacity; the graded footage still comes through brighter. */
  .hero__bg--veil-dark .hero__veil {
    background: linear-gradient(to bottom, rgba(24, 6, 13, .76) 0%, rgba(24, 6, 13, .67) 45%, rgba(24, 6, 13, .8) 100%);
  }
}
.hero__bg--veil-dark .hero__grain { mix-blend-mode: overlay; opacity: .08; }
/* No CSS filter on the dark treatment. The grade is baked into the file, and
   the veil above is calibrated to that file's measured highlight ceiling — a
   contrast() or brightness() here would push pixels past it and quietly
   invalidate the budget. The still slideshow fallback is ungraded, so it keeps
   the original desaturation. */
.hero__bg--veil-dark .hero__bg-media { filter: none; }
.hero__bg--veil-dark .hero__slide img { filter: saturate(.95) contrast(1.02); }

/* Hero copy on the dark treatment. */
.hero--dark .eyebrow { color: var(--gold-soft); }
.hero--dark .eyebrow::before { background: var(--gold-soft); }
.hero--dark .hero__title { color: var(--ivory); }
.hero--dark .hero__title span:nth-child(2) { color: var(--gold-bright); }
.hero--dark .hero__lead { color: rgba(252, 250, 247, .88); }
.hero--dark .hero__scroll { color: rgba(252, 250, 247, .78); }
.hero--dark .hero__scroll-line { background: rgba(252, 250, 247, .34); }
.hero--dark .hero__scroll-line::after { background: var(--gold-bright); }
.hero--dark .hero__orb--1 { border-color: rgba(227, 206, 158, .34); }

/* The outline button reads as invisible on burgundy; it takes the light
   variant's tokens rather than a different class in the markup. */
.hero--dark .btn--ghost { --btn-fg: var(--ivory); --btn-bd: rgba(227, 206, 158, .5); }
.hero--dark .btn--ghost::after { background: var(--gold-soft); }
.hero--dark .btn--ghost:hover { color: var(--maroon-ink); border-color: var(--gold-soft); }

/* The sticky header is transparent until it scrolls, so on a dark hero its
   links start out ivory and only return to ink once the ivory header veil
   has faded in underneath them. */
.has-dark-hero .site-header:not(.is-scrolled) .brand__name,
.has-dark-hero .site-header:not(.is-scrolled) .nav__link { color: rgba(252, 250, 247, .92); }
.has-dark-hero .site-header:not(.is-scrolled) .brand__sub { color: var(--gold-soft); }
.has-dark-hero .site-header:not(.is-scrolled) .nav__link::after { background: var(--gold-bright); }
.has-dark-hero .site-header:not(.is-scrolled) .nav__link:hover,
.has-dark-hero .site-header:not(.is-scrolled) .nav__link:focus-visible,
.has-dark-hero .site-header:not(.is-scrolled) .nav__link[aria-current="page"] { color: var(--gold-bright); }
.has-dark-hero .site-header:not(.is-scrolled) .nav-toggle__bar { background: var(--ivory); }

/* Paused: freeze the CSS slideshow. The <video> element is paused in script. */
.hero__bg.is-paused .hero__slide,
.hero__bg.is-paused .hero__bg-media { animation-play-state: paused; }

/* Hero media cluster */
.hero__media { position: relative; }
.hero__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-4);
  aspect-ratio: 4 / 5;
  background: var(--sand-deep);
}
@media (min-width: 62rem) { .hero__frame { aspect-ratio: 5 / 6; } }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(58, 10, 21, 0) 45%, rgba(58, 10, 21, .5) 100%);
}
.hero__inset {
  position: absolute;
  left: 1rem;
  bottom: 1.25rem;
  width: clamp(7.5rem, 5rem + 12vw, 11.5rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-4);
  border: 5px solid var(--ivory);
  background: var(--sand-deep);
}
.hero__inset img { width: 100%; height: 100%; object-fit: cover; }


/* Overlap the frame only where there is room for it to read as intentional. */
@media (min-width: 62rem) {
  .hero__inset { left: -2.5rem; bottom: 3rem; }
}

/* --- foreground cluster on the dark video hero -------------------------
   The default cluster is light-mode furniture: a white-bordered inset, a
   solid ivory badge, a soft grey shadow. Dropped straight onto footage it
   reads as three stickers laid on top of a video.

   Three things make it sit *in* the scene instead:

   1. A vignette that darkens each photo's own edges to the scrim's colour,
      so the boundary between photo and video dissolves instead of cutting.
      This is done with a gradient rather than a mask because a mask would
      also clip the box-shadow, taking the glow with it.
   2. Colour grading — a burgundy wash and slightly reduced saturation, so
      the foreground shares the background's temperature. Two images with
      different white balance never look like one photograph.
   3. Light coming from one place: a warm rim along the top edge, ambient
      shadow pooling below, matching the video's own top-lit scrim. */
.hero--dark .hero__frame {
  background: var(--maroon-ink);
  box-shadow:
    0 0 0 1px rgba(252, 250, 247, .09),
    inset 0 1px 0 rgba(252, 250, 247, .14),
    0 50px 100px -40px rgba(0, 0, 0, .85),
    0 20px 44px -28px rgba(0, 0, 0, .7);
}
.hero--dark .hero__frame img,
.hero--dark .hero__inset img { filter: saturate(.86) contrast(1.04) brightness(.97); }
.hero--dark .hero__frame::after {
  background:
    /* edge vignette → the photo fades into the scrim colour */
    radial-gradient(128% 104% at 50% 40%, rgba(24, 6, 13, 0) 46%, rgba(24, 6, 13, .5) 80%, rgba(24, 6, 13, .9) 100%),
    /* the original bottom fade, deepened to carry the caption weight */
    linear-gradient(190deg, rgba(24, 6, 13, 0) 42%, rgba(24, 6, 13, .68) 100%),
    /* flat burgundy grade tying it to the background's temperature */
    linear-gradient(rgba(90, 18, 38, .16), rgba(90, 18, 38, .16));
}

.hero--dark .hero__inset {
  /* The ivory border was the loudest "pasted on" cue in the cluster. */
  border-color: rgba(252, 250, 247, .16);
  background: var(--maroon-ink);
  box-shadow:
    0 28px 56px -22px rgba(0, 0, 0, .85),
    inset 0 1px 0 rgba(252, 250, 247, .12);
}
.hero--dark .hero__inset::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 38%, rgba(24, 6, 13, 0) 48%, rgba(24, 6, 13, .58) 100%),
    linear-gradient(rgba(90, 18, 38, .16), rgba(90, 18, 38, .16));
}


/* Floating brass shapes */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(0.5px);
  opacity: .5;
}
.hero__orb--1 {
  width: 15rem; height: 15rem;
  top: 8%; left: -6rem;
  border: 1px solid var(--gold-soft);
  animation: drift 22s var(--ease-in-out) infinite alternate;
}
.hero__orb--2 {
  width: 7rem; height: 7rem;
  bottom: 12%; right: 32%;
  background: radial-gradient(circle at 30% 30%, rgba(199,158,76,.22), transparent 68%);
  animation: drift 17s var(--ease-in-out) infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.6rem, -1.9rem, 0) scale(1.07); }
}

/* ------------------------------------------------------- 8. trust / stats */
.trust {
  border-block: 1px solid var(--rule);
  background: var(--ivory-warm);
  padding-block: 1.15rem;
  overflow: hidden;
}
.trust__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.trust:hover .trust__track,
.trust:focus-within .trust__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  white-space: nowrap;
}
.trust__item::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.stats {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 34rem) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--ivory);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  transition: background-color var(--t-mid) var(--ease);
}
.stat:hover { background: var(--paper); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--maroon);
  font-variation-settings: "opsz" 90;
  display: flex;
  align-items: baseline;
}
.stat__value { margin-bottom: 0; }
.stat__label { margin: .7rem 0 0; font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; }
.stat__detail { margin: .25rem 0 0; font-size: var(--fs-small); color: var(--ink-3); line-height: 1.5; }

/* ----------------------------------------------- 9. who / what / why cards */
.wwd { display: grid; gap: 1.1rem; }
@media (min-width: 62rem) { .wwd { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.wwd__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
.wwd__card::before {
  /* Cursor-following brass glow */
  content: "";
  position: absolute;
  z-index: -1;
  width: 22rem; height: 22rem;
  top: var(--my, 50%); left: var(--mx, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(199, 158, 76, .17), transparent 62%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
}
.wwd__card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--gold-soft); }
.wwd__card:hover::before { opacity: 1; }
.wwd__card:focus-within { border-color: var(--gold-soft); }

.wwd__kicker {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: #A38F73;
  letter-spacing: -0.04em;
  margin-bottom: 1.6rem;
  transition: color var(--t-mid) var(--ease);
}
.wwd__card:hover .wwd__kicker { color: var(--gold-soft); }
.wwd__card h3 { margin-bottom: .85rem; }
.wwd__text { color: var(--ink-2); margin-bottom: 1.25rem; }

.wwd__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-out);
  margin-top: auto;
}
.wwd__card.is-open .wwd__more { grid-template-rows: 1fr; }
.wwd__more > div { overflow: hidden; }
.wwd__more p {
  font-size: var(--fs-small);
  color: var(--ink-3);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.wwd__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  margin-top: 1.25rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--maroon);
}
.wwd__toggle svg { transition: transform var(--t-mid) var(--ease-out); }
.wwd__card.is-open .wwd__toggle svg { transform: rotate(180deg); }

/* -------------------------------------------------------- 10. pillars */
.pillars { display: grid; gap: 1.15rem; }
@media (min-width: 52rem) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  position: relative;
  padding: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--sh-3); background: var(--paper); }
.pillar__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--maroon-wash);
  color: var(--maroon);
  margin-bottom: 1.5rem;
  transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
}
.pillar:hover .pillar__icon { background: var(--maroon); color: var(--gold-soft); transform: rotate(-5deg); }
.pillar h3 { margin-bottom: .7rem; }
.pillar__text { color: var(--ink-2); font-weight: 500; margin-bottom: 0; }
.pillar__detail { margin: .8rem 0 0; font-size: var(--fs-small); color: var(--ink-3); }

/* ----------------------------------------------------- 11. activity cards */
.cards {
  display: grid;
  gap: clamp(1rem, .6rem + 1.2vw, 1.6rem);
}
.cards--2 { grid-template-columns: 1fr; }
.cards--3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .cards--2, .cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.card:hover, .card:focus-within { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--sand-deep); }

.card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sand-deep);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.card:hover .card__media img, .card:focus-within .card__media img { transform: scale(1.055); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.15rem, .9rem + .8vw, 1.6rem);
  gap: .55rem;
}
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-bottom: .15rem;
}
.card__title { font-size: 1.22rem; letter-spacing: -0.018em; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__excerpt { font-size: var(--fs-small); color: var(--ink-3); margin: 0; }
.card__foot { margin-top: auto; padding-top: 1.1rem; }
.card__foot .link-arrow { position: relative; z-index: 2; }

/* Tag / category pills — colour + label, never colour alone */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .62rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--maroon-wash);
  color: var(--maroon);
  white-space: nowrap;
}
.tag--gold  { background: var(--gold-wash); color: #7A5A18; }
.tag--green { background: var(--green-wash); color: var(--green); }
.tag--ink   { background: #EFEBEC; color: var(--ink-2); }

.meta-date {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Feature card — first item in a listing, spans wider */
@media (min-width: 64rem) {
  .card--feature { grid-column: span 2; flex-direction: row; }
  .card--feature .card__media { aspect-ratio: auto; flex: 1 1 52%; }
  .card--feature .card__body { flex: 1 1 48%; justify-content: center; padding: clamp(1.6rem, 1rem + 2vw, 2.75rem); }
  .card--feature .card__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
  .card--feature .card__excerpt { font-size: var(--fs-body); }
}

/* --------------------------------------------------------- 12. filter bar */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.filter {
  padding: .5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.filter:hover { border-color: var(--maroon-soft); color: var(--maroon); }
.filter:active { transform: scale(.97); }
.filter[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: #FFF7F2; }

.filter-status { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 1.5rem; }

.card.is-hidden, .gal__item.is-hidden { display: none; }

.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-lg);
  color: var(--ink-3);
}

/* -------------------------------------------------------- 13. news layout */
.article-hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4rem));
  padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
  background:
    radial-gradient(100% 80% at 82% 0%, var(--gold-wash) 0%, transparent 60%),
    var(--ivory-warm);
  border-bottom: 1px solid var(--rule);
}
.article-hero__title { margin: 1rem 0 1.25rem; max-width: 22ch; }
.article-hero__meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.crumbs-bar { padding-block: 1.25rem; border-bottom: 1px solid var(--rule); background: var(--ivory); }
.breadcrumbs { font-size: var(--fs-micro); color: var(--ink-4); letter-spacing: .04em; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--rule-strong); }
.breadcrumbs a { color: var(--ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--maroon); text-decoration: underline; }

.article-figure {
  margin-block: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
  background: var(--sand-deep);
}
.article-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.prose { font-size: var(--fs-body); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  margin-top: 2.4em;
  padding-top: 1.4em;
  border-top: 1px solid var(--rule);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p { color: var(--ink-2); margin-bottom: 0; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-2);
  margin-bottom: .7em;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: .1rem; top: .72em;
  width: .45rem; height: .45rem;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.prose figure { margin-block: 2em; }
.prose figure img { border-radius: var(--r-md); width: 100%; }
.prose figcaption {
  margin-top: .75rem;
  font-size: var(--fs-small);
  color: var(--ink-4);
  padding-left: .9rem;
  border-left: 2px solid var(--gold-soft);
}
.prose blockquote {
  margin-block: 2em;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--ivory-warm);
  border-left: 3px solid var(--maroon);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.prose blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: .75rem;
}
.prose blockquote cite { font-style: normal; font-size: var(--fs-small); color: var(--ink-4); }

.prose-gallery { display: grid; gap: .9rem; margin-block: 2em; }
@media (min-width: 44rem) { .prose-gallery { grid-template-columns: repeat(3, 1fr); } }
.prose-gallery figure { margin: 0; }
.prose-gallery img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); }
.prose-gallery figcaption { font-size: var(--fs-micro); }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.share__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-right: .3rem; }
.share__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.share__btn:hover { border-color: var(--maroon-soft); color: var(--maroon); background: var(--maroon-wash); }

/* English précis above a Malayalam article */
.article-hero__summary {
  max-width: 46rem;
  margin: 1.5rem 0 0;
  padding: 1.05rem 1.25rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--gold-wash);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: #5C4413;
}
.article-hero__summary-label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .35rem;
}

/* Photos & video buttons on an article */
.media-links {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--ivory-warm);
}
.media-links__title {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: .9rem;
}

.pager { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .pager { grid-template-columns: repeat(2, 1fr); } }
.pager__item {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  text-decoration: none;
  background: var(--paper);
  transition: border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease);
}
.pager__item:hover { border-color: var(--gold-soft); transform: translateY(-3px); box-shadow: var(--sh-2); }
.pager__item--next { text-align: right; align-items: flex-end; }
.pager__dir { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pager__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; }

/* ------------------------------------------------------------ 14. gallery */
/* True masonry via multi-column: tiles of differing height pack without the
   empty cells a row-based grid leaves behind, and filtering just removes items
   from the flow. */
.gal {
  --gal-gap: clamp(.9rem, .6rem + 1vw, 1.35rem);
  columns: 1;
  column-gap: var(--gal-gap);
}
@media (min-width: 40rem) { .gal { columns: 2; } }
@media (min-width: 64rem) { .gal { columns: 3; } }

.gal__item {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--gal-gap);
}
.gal__item--wide .gal__link { aspect-ratio: 5 / 4; }
.gal__item--tall .gal__link { aspect-ratio: 3 / 4.4; }

.gal__link {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand-deep);
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
}
.gal__link:hover, .gal__link:focus-visible { box-shadow: var(--sh-3); transform: translateY(-4px); }
.gal__link img {
  width: 100%; height: 100%;
  min-height: 13rem;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.gal__link:hover img, .gal__link:focus-visible img { transform: scale(1.06); }
.gal__link::after {
  content: "";
  position: absolute; inset: 0;
  /* Scrim, not decoration: guarantees caption legibility over any photograph. */
  background: linear-gradient(180deg, rgba(35, 8, 16, 0) 22%, rgba(35, 8, 16, .58) 55%, rgba(35, 8, 16, .93) 100%);
  transition: opacity var(--t-mid) var(--ease);
}
.gal__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1rem, .8rem + .6vw, 1.5rem);
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.gal__caption .tag {
  align-self: flex-start;      /* a stretched pill reads as a bar, not a tag */
  background: rgba(252, 250, 247, .18);
  color: var(--gold-soft);
}
.gal__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; }
.gal__sub {
  font-size: var(--fs-small);
  color: rgba(252, 250, 247, .86);
  line-height: 1.45;
  /* Long album descriptions must not push the caption past the tile edge. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.gal__caption .link-arrow { align-self: flex-start; color: var(--gold-soft); margin-top: .15rem; }
.gal__count {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  padding: .3rem .6rem;
  border-radius: var(--r-xs);
  background: rgba(35, 8, 16, .58);
  color: var(--ivory);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .05em;
  backdrop-filter: blur(4px);
}

/* Secondary links under an album card (video playlist, RAW folder) */
.gal__extra {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: .7rem .25rem 0;
  font-size: var(--fs-small);
}
.gal__extra a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--ink-3);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.gal__extra a:hover { color: var(--maroon); text-decoration: underline; }

/* Album photo grid */
.album-grid {
  display: grid;
  gap: clamp(.75rem, .5rem + .9vw, 1.15rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.album-grid__btn {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sand-deep);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  box-shadow: var(--sh-1);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease);
}
.album-grid__btn:nth-child(6n + 1) { aspect-ratio: 4 / 5; }
.album-grid__btn:hover, .album-grid__btn:focus-visible { transform: translateY(-4px); box-shadow: var(--sh-3); }
.album-grid__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.album-grid__btn:hover img { transform: scale(1.06); }
.album-grid__zoom {
  position: absolute;
  right: .65rem; bottom: .65rem;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(252, 250, 247, .92);
  color: var(--maroon);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
}
.album-grid__btn:hover .album-grid__zoom,
.album-grid__btn:focus-visible .album-grid__zoom { opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------- 15. lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(24, 6, 12, .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  color: rgba(252, 250, 247, .78);
  font-size: var(--fs-small);
}
.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 var(--gutter);
  min-height: 0;
}
.lightbox__img {
  max-width: min(100%, 68rem);
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: transparent;
  animation: lbIn .4s var(--ease-out);
}
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.lightbox__foot {
  padding: 1rem var(--gutter) 1.75rem;
  text-align: center;
  color: rgba(252, 250, 247, .72);
  font-size: var(--fs-small);
  min-height: 3.5rem;
}
.lb-btn {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(252, 250, 247, .22);
  background: rgba(252, 250, 247, .06);
  color: var(--ivory);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lb-btn:hover { background: rgba(252, 250, 247, .16); border-color: rgba(252, 250, 247, .4); }
.lb-btn:active { transform: scale(.94); }
.lb-btn--prev, .lb-btn--next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lb-btn--prev { left: calc(var(--gutter) * .35); }
.lb-btn--next { right: calc(var(--gutter) * .35); }
.lb-btn--prev:active, .lb-btn--next:active { transform: translateY(-50%) scale(.94); }

/* --------------------------------------------------- 16. testimonials */
.quotes { position: relative; }
.quotes__viewport { overflow: hidden; }
.quotes__track {
  display: flex;
  transition: transform var(--t-slow) var(--ease-out);
}
.quotes__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: 2px;
}
.quote-card {
  height: 100%;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.quote-card__mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: .6;
  color: var(--gold-soft);
  margin-bottom: 1rem;
  display: block;
}
.quote-card blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + .8vw, 1.65rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.75rem;
}
.quote-card__who { display: flex; align-items: center; gap: .9rem; }
.quote-card__avatar {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--maroon-wash);
  border: 1px solid var(--gold-soft);
  color: var(--maroon);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
}
.quote-card__name { font-weight: 700; font-size: .95rem; }
.quote-card__role { font-size: var(--fs-small); color: var(--ink-4); }

.quotes__controls { display: flex; align-items: center; gap: .75rem; margin-top: 1.75rem; }
.q-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.q-btn:hover { border-color: var(--maroon); color: var(--maroon); background: var(--maroon-wash); }
.q-btn:active { transform: scale(.94); }
.q-btn[disabled] { opacity: .35; cursor: not-allowed; }
.quotes__dots { display: flex; gap: .4rem; margin-left: auto; }
.q-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rule-strong);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), width var(--t-mid) var(--ease-out);
}
.q-dot[aria-current="true"] { background: var(--maroon); width: 22px; border-radius: var(--r-pill); }

/* ------------------------------------------------------------ 17. regions */
.regions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.region {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  padding: .72rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -0.01em;
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease),
              background-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.region:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--sh-2); }
.region--municipality { background: var(--maroon); border-color: var(--maroon); color: #FFF7F2; }
.region--municipality:hover { border-color: var(--gold-bright); }
.region__type { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-4); letter-spacing: .04em; }
.region--municipality .region__type { color: var(--gold-soft); }
.region__note {
  position: absolute;
  left: 50%; bottom: calc(100% + .55rem);
  transform: translate(-50%, .4rem);
  width: max-content;
  max-width: 17rem;
  padding: .6rem .8rem;
  border-radius: var(--r-sm);
  background: var(--maroon-ink);
  color: var(--sand);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease-out), visibility var(--t-fast);
  z-index: 5;
}
.region:hover .region__note, .region:focus-within .region__note {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
/* Escape dismisses the note without moving the pointer (WCAG 2.2 SC 1.4.13). */
.region.is-note-dismissed .region__note { opacity: 0; visibility: hidden; }
.region__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; align-self: center; }

.band-dark .region { background: rgba(252, 250, 247, .05); border-color: rgba(227, 206, 158, .22); color: var(--sand); }
.band-dark .region:hover { background: rgba(252, 250, 247, .1); border-color: var(--gold); }
.band-dark .region__type { color: rgba(227, 206, 158, .62); }
.band-dark .region--municipality { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--maroon-ink); }
.band-dark .region--municipality .region__type { color: rgba(58, 10, 21, .88); }
.band-dark .region__note { background: var(--ivory); color: var(--ink-2); }

/* --------------------------------------------------------- 18. value list */
.values { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 40rem) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .values { grid-template-columns: repeat(3, 1fr); } }
.value { background: var(--ivory); padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); transition: background-color var(--t-mid) var(--ease); }
.value:hover { background: var(--paper); }
.value__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: .5rem; }
.value__name::before { content: ""; display: block; width: 1.5rem; height: 2px; background: var(--gold); margin-bottom: .9rem; }
.value p { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 0; }

/* --------------------------------------------------------- 19. CTA band */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--maroon-ink);
  color: var(--sand);
  text-align: center;
  padding-block: clamp(3.75rem, 2.5rem + 6vw, 7.5rem);
}
.cta-band__motif {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/lattice.svg");
  background-size: 190px;
  opacity: .085;
  pointer-events: none;
}
.cta-band__glow {
  position: absolute;
  width: 44rem; height: 44rem;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(199, 158, 76, .17), transparent 62%);
  pointer-events: none;
  animation: pulseGlow 9s var(--ease-in-out) infinite alternate;
}
@keyframes pulseGlow {
  from { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
  to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}
.cta-band__inner { position: relative; max-width: 42rem; margin-inline: auto; }
.cta-band h2 {
  font-size: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);
  letter-spacing: -0.03em;
  color: var(--ivory);
  margin-bottom: 1.1rem;
}
.cta-band p { color: #D9C4C9; font-size: var(--fs-lead); margin-bottom: 2rem; }
.cta-band .btn-row { justify-content: center; }

/* ------------------------------------------------------------- 20. footer */
.site-footer {
  background: var(--maroon-ink);
  color: #C9B4B9;
  padding-top: clamp(3.25rem, 2rem + 4vw, 5.5rem);
  font-size: var(--fs-small);
}
.footer-grid {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 44rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(1.5rem, 0rem + 4vw, 4rem); } }

.footer-brand { display: inline-flex; align-items: center; gap: .72rem; text-decoration: none; color: var(--ivory); margin-bottom: 1.15rem; }
.footer-brand .brand__sub { color: rgba(227, 206, 158, .7); }
.footer-blurb { max-width: 26rem; line-height: 1.65; margin-bottom: 0; }

.footer-col h2 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1.15rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .7rem; }
.footer-col a {
  color: #C9B4B9;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer-col a:hover { color: var(--ivory); transform: translateX(3px); }
.footer-col a svg { flex: none; opacity: .65; }

.footer-bottom {
  border-top: 1px solid rgba(227, 206, 158, .16);
  padding-block: 1.6rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: rgba(201, 180, 185, .8);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--ivory); text-decoration: underline; }

/* -------------------------------------------------------- 21. contact page */
.contact-grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 60rem) { .contact-grid { grid-template-columns: 1.05fr .95fr; align-items: start; } }

.contact-list { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.contact-row {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: clamp(1.2rem, 1rem + .8vw, 1.7rem);
  background: var(--paper);
  transition: background-color var(--t-mid) var(--ease);
}
.contact-row:hover { background: var(--ivory-warm); }
.contact-row__icon {
  width: 42px; height: 42px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--maroon-wash);
  color: var(--maroon);
}
.contact-row__body { flex: 1; min-width: 0; }
/* These are spans (they sit inside a link-free row); make them stack. */
.contact-row__label,
.contact-row__value,
.contact-row__note { display: block; }
.contact-row__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .3rem; }
.contact-row__value { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; word-break: break-word; }
.contact-row__value a { color: var(--ink); text-decoration: none; }
.contact-row__value a:hover { color: var(--maroon); text-decoration: underline; }
.contact-row__note { font-size: var(--fs-small); color: var(--ink-3); margin-top: .3rem; line-height: 1.5; }
.contact-grid h2 { margin-bottom: .85rem; }
.contact-grid > div > .lead { margin-bottom: 1.85rem; }

.contact-aside {
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  background: var(--ivory-warm);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.contact-aside h2 { font-size: 1.5rem; margin-bottom: .9rem; }
.contact-sub { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
.rule-space { margin-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }

.social-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.social-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-2);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.social-link:hover { transform: translateY(-2px); border-color: var(--maroon); color: var(--maroon); }
.social-link svg { flex: none; }

.notice {
  display: flex;
  gap: .85rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-md);
  background: var(--gold-wash);
  font-size: var(--fs-small);
  color: #6B4E14;
  line-height: 1.6;
}
.notice svg { flex: none; margin-top: .18rem; }
.article-figure + .notice { margin-bottom: 2.25rem; }
.notice strong { color: #533C0E; }

/* ------------------------------------------------ 21b. unlisted pages */
.unlisted {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(3rem, 2rem + 4vw, 5rem);
  background:
    radial-gradient(80% 60% at 85% 0%, var(--gold-wash) 0%, transparent 60%),
    radial-gradient(60% 50% at -5% 55%, var(--maroon-wash) 0%, transparent 65%),
    var(--ivory);
}
.unlisted__glow {
  position: absolute;
  width: 34rem; height: 34rem;
  right: -10rem; top: -12rem;
  background: radial-gradient(circle, rgba(199, 158, 76, .16), transparent 65%);
  pointer-events: none;
  animation: pulseGlow 10s var(--ease-in-out) infinite alternate;
}
.unlisted__brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  text-decoration: none;
  color: var(--maroon-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
}
.unlisted__brand img { width: 44px; height: 44px; object-fit: contain; }
.unlisted__title {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  letter-spacing: -0.03em;
  margin-bottom: 1.1rem;
}
.unlisted .lead { max-width: 40rem; margin-bottom: 2rem; }
.unlisted__note { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--ink-3); }

.unlisted__embed {
  position: relative;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--sh-4);
  background: var(--sand);
  aspect-ratio: 16 / 10;
}
.unlisted__embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.unlisted__foot {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  max-width: 42rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.unlisted__foot svg { flex: none; margin-top: .2rem; }

/* --------------------------------------------------------------- 22. 404 */
.error-page {
  min-height: 74vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-sm);
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 3rem + 16vw, 13rem);
  font-weight: 600;
  line-height: .84;
  letter-spacing: -0.05em;
  color: var(--sand-deep);
  font-variation-settings: "opsz" 144;
  margin-bottom: 1.25rem;
}
.error-page h1 { max-width: 18ch; margin-inline: auto; margin-bottom: 1.1rem; }
.error-page .lead { max-width: 34rem; margin-inline: auto; margin-bottom: 2rem; }
.error-page .btn-row { justify-content: center; }
.error-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; margin-top: 2.5rem; font-size: var(--fs-small); }

/* ------------------------------------------------------- 23. page headers */
.page-hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.75rem, 1.5rem + 5vw, 5.5rem));
  padding-bottom: clamp(2.75rem, 1.5rem + 4vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(95% 85% at 88% 0%, var(--gold-wash) 0%, transparent 60%),
    radial-gradient(62% 55% at -4% 58%, var(--maroon-wash) 0%, transparent 66%),
    var(--ivory);
}
.page-hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .page-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.page-hero__title { margin-bottom: 1.25rem; }
.page-hero__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 5 / 4;
  background: var(--sand-deep);
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Editorial two-column story block */
.story { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 62rem) {
  .story { grid-template-columns: repeat(2, 1fr); }
  .story--reverse .story__media { order: -1; }
}
.story h2 { margin-bottom: 1.15rem; }
.story .btn-row { margin-top: 1.9rem; }
.story__media { position: relative; }
.story__frame {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 3;
  background: var(--sand-deep);
}
.story__frame img { width: 100%; height: 100%; object-fit: cover; }
.story__inset {
  position: absolute;
  right: .9rem;
  bottom: -1rem;
  width: clamp(7rem, 5rem + 10vw, 10.5rem);
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 5px solid var(--ivory);
  box-shadow: var(--sh-3);
  background: var(--sand-deep);
}
.story__inset img { width: 100%; height: 100%; object-fit: cover; }
.band-sand .story__inset { border-color: var(--sand); }
@media (min-width: 62rem) { .story__inset { right: -1.75rem; bottom: -2rem; } }

/* Mission / vision pair */
.mv { display: grid; gap: 1.15rem; }
@media (min-width: 52rem) { .mv { grid-template-columns: repeat(2, 1fr); } }
.mv__card {
  padding: clamp(1.7rem, 1.2rem + 2vw, 2.75rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.mv__card--dark { background: var(--maroon); border-color: var(--maroon); color: #EFD9DE; }
.mv__card--dark h2 { color: var(--ivory); }
.mv__card--dark .mv__lead { color: #F0DEE2; }
.mv__card h2 { font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); margin-bottom: .9rem; }
.mv__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); letter-spacing: -0.012em; margin-bottom: 0; }
.mv__card::after {
  content: "";
  position: absolute;
  right: -4rem; bottom: -4rem;
  width: 12rem; height: 12rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .12;
  pointer-events: none;
}

/* Difference cards */
.diff { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 44rem) { .diff { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .diff { grid-template-columns: repeat(3, 1fr); } }
.diff__item {
  background: var(--ivory);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  transition: background-color var(--t-mid) var(--ease);
}
.diff__item:hover { background: var(--paper); }
.diff__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--gold-soft);
  background: var(--gold-wash);
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.diff__item h3 { font-size: 1.16rem; margin-bottom: .55rem; }
.diff__item p { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 0; }

/* ------------------------------------------------- 23b. office bearers */
/* Photographs arrive one at a time in practice, so a card with a portrait and
   a card with an initials monogram must occupy exactly the same frame. Both
   sit in a 1:1 box; only what fills it differs. */
.team { display: grid; gap: clamp(1rem, .7rem + 1.2vw, 1.6rem); }
@media (min-width: 34rem) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 78rem) { .team { grid-template-columns: repeat(4, 1fr); } }

.team__card {
  position: relative;
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.15rem, .9rem + 1vw, 1.6rem);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
/* A brass hairline that draws itself across the top on hover. */
.team__card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--maroon), var(--gold-bright));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-slow) var(--ease-out);
}
@media (hover: hover) {
  .team__card:hover {
    transform: translateY(-6px);
    background: var(--paper);
    border-color: var(--rule-strong);
    box-shadow: var(--sh-3);
  }
  .team__card:hover::before { transform: scaleX(1); }
  .team__card:hover .team__portrait img { transform: scale(1.06); }
}

.team__portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  width: clamp(5.5rem, 4.5rem + 4vw, 7.5rem);
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: var(--sand);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
}
.team__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* passport photos sit high in the frame */
  transition: transform var(--t-slow) var(--ease-out);
}
.team__initials {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--maroon);
  background: linear-gradient(150deg, var(--maroon-wash), var(--gold-wash));
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
}

.team__role {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .3rem;
}
.team__name { font-size: 1.16rem; margin-bottom: .6rem; }
.team__text { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 0; }

.band-sand .team__card { background: var(--ivory); }
.band-sand .team__portrait { background: var(--sand-deep); }

/* ------------------------------------------------------- 24. scroll reveal */
/* The hidden start state is applied ONLY where scripting can undo it. With
   JavaScript disabled or blocked — or in a browser without `scripting` support,
   where the whole block is skipped — content renders normally. */
@media (scripting: enabled) {
  [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .78s var(--ease-out), transform .78s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  [data-reveal="fade"] { transform: none; }
  [data-reveal="right"] { transform: translate3d(-26px, 0, 0); }
  [data-reveal="scale"] { transform: scale(.965); }
  [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Hero text reveal — runs on load, not on scroll. Delays come from source
   order so no inline style attributes are needed. */
[data-hero-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  animation: heroIn .95s var(--ease-out) forwards;
  animation-delay: var(--hero-delay, 0ms);
}
[data-hero-reveal]:nth-child(1) { --hero-delay: 40ms; }
[data-hero-reveal]:nth-child(2) { --hero-delay: 140ms; }
[data-hero-reveal]:nth-child(3) { --hero-delay: 240ms; }
[data-hero-reveal]:nth-child(4) { --hero-delay: 340ms; }
[data-hero-reveal]:nth-child(5) { --hero-delay: 430ms; }
[data-hero-reveal]:nth-child(6) { --hero-delay: 510ms; }
@keyframes heroIn { to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* Parallax layers get their offset from JS via a custom property */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Pointer tilt, composed with the reveal transform so neither cancels the
   other: the card is only allowed to tilt once it has finished arriving. */
@media (hover: hover) and (pointer: fine) {
  [data-tilt].is-in {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }
  [data-tilt].is-in:hover {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px);
  }
}

/* Reading progress hairline, appended to the header by app.js. */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--maroon), var(--gold-bright));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.site-header.is-scrolled .scroll-progress { opacity: 1; }

/* ------------------------------------------------------ 25. reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-hero-reveal] { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  .trust__track { animation: none; }
  .hero__orb { animation: none; }
  .cta-band__glow { animation: none; }

  /* The global animation-duration override above would leave every slide on its
     final (invisible) keyframe, so the backdrop has to opt out explicitly and
     hold the first photograph as a still image. The <video> is paused by
     app.js, which leaves its poster frame showing — the same result. */
  .hero__slide { animation: none !important; opacity: 0; transform: none; }
  .hero__slide:nth-child(1) { opacity: var(--hero-bg-opacity); }
  .hero__bg-media { animation: none !important; transform: none; }
}

/* -------------------------------------------------------------- 26. print */
@media print {
  .site-header, .site-footer, .mobile-nav, .lightbox, .hero__orb, .cta-band__glow, .share,
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}


/* ===================================================================
   Typography assignments for the Oswald / Fjalla One / Roboto Slab set
   =================================================================== */

/* Interface layer — condensed, slightly tracked out, reads as "signage". */
.nav__link,
.mobile-nav__link,
.btn,
.filter,
.eyebrow,
.tag,
.meta-date,
.share__btn,
.social-link,
.announce,
.demo-bar,
.footer-col h2,
.stat__label,
.breadcrumbs,
.pager__dir,
.gal__count,
.contact-row__label,
.article-hero__summary-label,
.media-links__title,
.quote-card__role,
.region__type,
.hero__scroll {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.btn, .filter, .nav__link { font-weight: 600; }
.eyebrow, .tag, .meta-date, .footer-col h2, .pager__dir,
.contact-row__label, .article-hero__summary-label, .media-links__title {
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* Oswald sits high on the line; nudge optical alignment in pill controls. */
.btn, .filter, .tag { line-height: 1.35; }

/* Numerals — Fjalla One gives the statistics real presence. */
.stat__value,
.wwd__kicker,
.mobile-nav__num {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Reading layer — Roboto Slab, a touch looser than a sans needs. */
body,
.prose p,
.lead,
.card__excerpt,
.mv__lead,
.diff__item p,
.value p,
.footer-blurb,
.gal__sub {
  font-family: var(--font-slab);
}
.prose p { line-height: 1.75; }
.lead { line-height: 1.62; }

/* Pull quotes stay in the display face for contrast against the slab body. */
.quote-card blockquote p,
.prose blockquote p {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.004em;
  line-height: 1.28;
}

/* The third hero line was italic, which suited Fraunces. None of Fjalla One,
   Oswald or Roboto Slab ships an italic, so the browser was synthesising a
   slanted copy — always a giveaway. Contrast comes from weight instead: the
   line drops to light-weight Oswald against the heavy display face. */
.hero__title span:nth-child(3) {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.012em;
}

/* Brand wordmark */
.brand__name { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; }
/* Oswald is narrower than the sans it replaced, so "QATAR" needs a touch more
   size to stay legible at wordmark scale. */
.brand__sub  { font-family: var(--font-ui); font-weight: 500; letter-spacing: 0.2em; font-size: 0.66rem; }

/* Card titles step down into Roboto Slab. Section headings stay in condensed
   Oswald and read as signage; anything inside a card reads as the start of
   something you are meant to read, which is what the slab signals. */
.card__title,
.gal__title,
.value__name,
.pager__title,
.quote-card__name,
.team__name,
.wwd__card h3,
.pillar h3,
.diff__item h3 {
  font-family: var(--font-slab);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

/* The slab is wider than Oswald, so card titles need a little less size. */
.card__title { font-size: 1.14rem; }
.gal__title  { font-size: 1.12rem; }

/* ------------------------------------------------------------- Malayalam */
/* Anek Malayalam is variable: width echoes the condensed English display on
   headlines, and relaxes to normal width for body so it stays comfortable.

   These selectors are deliberately specific. The reading-layer rule above
   (.prose p) would otherwise win on specificity and put Malayalam text into
   Roboto Slab — which has no Malayalam glyphs, so the browser would fall back
   to whatever the operating system happens to provide. It looked plausible and
   was wrong. Anything carrying lang="ml" must resolve to --font-ml. */
[lang="ml"],
[lang="ml"] p,
[lang="ml"] li,
.prose[lang="ml"] p,
.prose[lang="ml"] li,
.lead[lang="ml"],
.card__excerpt[lang="ml"],
.gal__sub[lang="ml"] {
  font-family: var(--font-ml);
  font-variation-settings: "wdth" 100, "wght" 400;
  line-height: 1.85;
  letter-spacing: 0;
}

h1[lang="ml"], h2[lang="ml"], h3[lang="ml"], h4[lang="ml"],
.card__title[lang="ml"], .article-hero__title[lang="ml"] {
  font-family: var(--font-ml);
  font-variation-settings: "wdth" 85, "wght" 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.prose[lang="ml"] p { font-size: 1.06em; }