/* deepananda.com. See DESIGN.md for the idea and the tokens. The brand's three colours (Shreya Saxena's palette,
   4 November 2026): olive green, off-white and golden; everything else on the page is a tint or a shade of them. */

@font-face { font-family: "Fraunces"; src: url(/assets/fonts/Fraunces-Variable.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/assets/fonts/Fraunces-VariableItalic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url(/assets/fonts/Lora-Variable.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url(/assets/fonts/Lora-Italic-Variable.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/assets/fonts/DMSans-Variable.woff2) format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }

:root {
  /* the brand */
  --olive: #4F5B2B;        /* olive green: headings, navigation, buttons, the Foundation's and the invitation's bands */
  --cream: #FEFDFB;        /* off-white: the page */
  --gold: #CD9E2C;         /* golden: the accent, the primary button, rules and marks */
  /* shades and tints of the three */
  --ink: #2C3318;          /* olive, darkened: reading text */
  --ink-2: #66703F;        /* olive, lightened: secondary text */
  --olive-deep: #3E4722;   /* olive, darkened a little: hover on olive buttons */
  --gold-ink: #86620F;     /* golden, darkened: small golden text on cream */
  --gold-light: #E9CB72;   /* golden, lightened: small golden text on olive */
  --sand: #F8F2E3;         /* golden at a tenth over off-white: the alternate band */
  --sand-2: #F1E6C9;       /* golden at a quarter: the glow behind the founder, soft boxes */
  --on-olive: rgba(254, 253, 251, .82);
  --rule: rgba(79, 91, 43, .18);
  --rule-light: rgba(254, 253, 251, .22);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--cream); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.125rem/1.65 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; border-radius: 2px; }
.foundation--home :focus-visible, .close :focus-visible, .cta :focus-visible, .menu-open .nav :focus-visible { outline-color: var(--gold); }
::selection { background: var(--gold); color: var(--ink); }
[id] { scroll-margin-top: 1.5rem; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: .6rem 1rem; background: var(--gold); color: var(--ink);
  font: 500 1rem var(--sans); text-decoration: none; border-radius: 999px;
}
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section__head { margin-bottom: 3rem; }

/* ---- Type ---- */
.hero__title, .h2, .h3, .route__name, .pull, .hero__tag {
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 0;
  font-weight: 340;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--olive);
}
.h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.12; max-width: 24ch; margin-bottom: 1.25rem; text-wrap: balance; }
.h2--wide { max-width: 28ch; margin-bottom: 3rem; }
.h3 { font-size: clamp(1.5rem, 2.1vw, 1.8rem); line-height: 1.2; margin-bottom: .75rem; font-weight: 380; }
.kicker { font: 500 .9375rem/1.4 var(--sans); color: var(--ink-2); margin: 0 0 1rem; }
.kicker--light { color: var(--gold-light); }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; max-width: 60ch; color: var(--ink); }
.muted { color: var(--ink-2); }
.facts { font: 450 .9375rem/1.5 var(--sans); color: var(--ink-2); margin: 0; max-width: 62ch; }
.sig { margin: 1.75rem 0 .35rem; font-family: var(--sans); line-height: 1.4; }
.sig__name { display: block; font-weight: 600; font-size: 1rem; }
.sig__role { display: block; color: var(--ink-2); font-size: .9375rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.pull { font-style: italic; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.35; max-width: 34ch; margin: 1.5rem 0 0; }

.link {
  font: 500 1rem/1.4 var(--sans);
  color: var(--olive);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .3em;
  text-decoration-color: var(--gold);
  transition: text-decoration-color .2s, color .2s;
}
.link:hover { color: var(--ink); text-decoration-color: currentColor; }
.link--light { color: var(--cream); text-decoration-color: var(--gold); }
.link--light:hover { color: #fff; text-decoration-color: var(--gold-light); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .7rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 1rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--sun { background: var(--gold); color: var(--ink); }
.btn--sun:hover { background: #D9AA37; }
.btn--ink { background: var(--olive); color: var(--cream); }
.btn--ink:hover { background: var(--olive-deep); }
.btn--ghost { border-color: var(--olive); color: var(--olive); }
.btn--ghost:hover { background: var(--olive); color: var(--cream); }

/* plain lists: a short golden line as the bullet */
.plain li { position: relative; padding-left: 1.75rem; margin-bottom: .45rem; font-size: 1.0625rem; }
.plain li::before { content: ""; position: absolute; left: 0; top: .85em; width: 1.1rem; height: 1.5px; background: var(--gold); }
.plain--row { display: flex; flex-wrap: wrap; gap: .5rem 2.25rem; }
.plain--row li { margin-bottom: 0; }

/* ---- Header ---- */
.top { position: relative; z-index: 5; background: var(--cream); border-bottom: 1px solid var(--rule); }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--olive); min-width: 0; }
.brand__mark { width: 58px; height: auto; flex: none; }
.brand__name { font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: .005em; white-space: nowrap; }
.nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.3vw, 1.15rem); }
.nav__list a:not(.btn) { font: 500 .9375rem/1 var(--sans); color: var(--ink); text-decoration: none; padding: .5rem 0; border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; }
.nav__list a:not(.btn):hover { color: var(--olive); border-bottom-color: var(--rule); }
.nav__list a[aria-current="page"] { color: var(--olive); border-bottom-color: var(--gold); }
.nav__donate { margin-left: .5rem; }
.nav__donate .btn { min-height: 2.6rem; padding: .55rem 1.2rem; }
.nav__toggle { display: none; }

/* ---- Hero: the Foundation's opening beside the schoolchildren photograph (Anand, 4 November) ---- */
.hero { background: var(--cream); padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__title {
  font-size: clamp(2.7rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 11ch;
  text-wrap: balance;
}
.hero__tag { font-style: italic; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.3; color: var(--ink); max-width: 24ch; margin: 0 0 1.1rem; text-wrap: balance; }
.hero__lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 34rem; margin: 0 0 2.1rem; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hero__photo { margin: 0; border-radius: 6px; overflow: hidden; }
.hero__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 0%; }   /* 3:2, cut from the bottom, drops the mat the children sit on */

/* the one moment of motion: the opening settles in when the page opens. main.js adds .dawn once the page is
   visible, so the page is complete without JavaScript, in a background tab, and when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .dawn .hero__content { animation: settle 1.1s var(--ease-out) backwards; }
  .dawn .hero__photo { animation: settle 1.3s var(--ease-out) .15s backwards; }
  @keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}

/* ---- The Foundation, on olive ground ---- */
.foundation--home { background: var(--olive); color: var(--cream); }
.foundation--home .h2, .foundation--home .h3 { color: var(--cream); }
.foundation--home .kicker { color: var(--gold-light); }
.foundation--home p:not(.kicker) { color: var(--on-olive); }
.foundation--home .lede--big { color: var(--cream); }
.foundation--home .plain li::before { background: var(--gold); }
.foundation--home .plain li { color: var(--cream); }
.foundation__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.foundation__text p:not(.kicker) { max-width: 54ch; }
.work { margin: .5rem 0 0; }
.foundation__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.photo { border-radius: 6px; overflow: hidden; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo--wide { grid-column: 1 / -1; }
.photo--wide img { aspect-ratio: 16 / 10; }

/* ---- Pathways: three columns, divided by hairlines ---- */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col { padding: 0 clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--rule); }
.col:first-child { padding-left: 0; border-left: 0; }
.col:last-child { padding-right: 0; }
.col p { font-size: 1.0625rem; margin-bottom: 1.25rem; }
.col__sub { font: 500 1rem/1.4 var(--sans); margin: -.25rem 0 1rem; }

/* ---- Routes: one row per stage or programme ---- */
.routes { border-top: 1px solid var(--rule); }
.route {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 3fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 4rem);
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.route__for { font: 500 1rem/1.5 var(--sans); color: var(--ink-2); margin: .35rem 0 0; }
.route__name { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; margin-bottom: .5rem; }
.route__sub { font: 500 1rem/1.4 var(--sans); color: var(--gold-ink); margin: 0 0 .9rem; }
.route__body p:not(.facts):not(.route__sub) { max-width: 58ch; }
.route__body .facts { margin-top: .25rem; }
.route__action { justify-self: end; padding-top: .35rem; }
.soon { display: inline-flex; align-items: center; min-height: 3rem; padding: .7rem 1.25rem; border: 1px dashed color-mix(in srgb, var(--ink-2) 55%, transparent); border-radius: 999px; font: 500 1rem/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.route--soon .route__name, .route--soon .route__body p:not(.route__sub) { color: var(--ink-2); }
/* who each programme is for, at a glance (the old site's "Ideal for / Format / For you if" lines) */
.fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1.75rem; margin: 1.25rem 0 1.4rem; padding: 1rem 0 1.05rem; border-block: 1px solid var(--rule); max-width: 62ch; }
.fit dt { font: 500 .875rem/1.4 var(--sans); color: var(--gold-ink); margin-bottom: .3rem; }
.fit dd { font-size: 1rem; line-height: 1.45; }
.route--soon .fit dd { color: var(--ink-2); }
.how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 1.25rem 0 1.25rem; max-width: 60ch; }
.how dt { font: 500 1rem/1.4 var(--sans); margin-bottom: .25rem; }
.how dd { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

/* ---- Text beside the film ---- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split .section__head { margin-bottom: 0; }

/* ---- The launch film: a play button over the poster; the browser's own controls take over once it plays ---- */
.film { margin: 0; }
.film__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--ink); }
.film__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.film__play {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-end;   /* bottom right: the poster's car and Traveller stay in view */
  padding: clamp(.75rem, 2vw, 1.25rem);
  border: 0; cursor: pointer; color: var(--cream);
  background: linear-gradient(to top, rgba(44, 51, 24, .45), rgba(44, 51, 24, 0) 45%);
}
.film__play[hidden] { display: none; }
.film__cue {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .4rem 1.2rem .4rem .4rem; border-radius: 999px;
  background: rgba(44, 51, 24, .84); box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
  font: 500 1rem/1 var(--sans); white-space: nowrap;
}
.film__icon {
  position: relative; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--gold); transition: transform .2s ease, background-color .2s ease;
}
.film__icon::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: .55rem 0 .55rem .9rem; border-color: transparent transparent transparent var(--ink);
}
.film__len { color: var(--gold-light); font-weight: 400; }
.film__play:hover .film__icon { transform: scale(1.08); background: #D9AA37; }
.film__play:focus-visible { outline: 3px solid var(--gold); outline-offset: -6px; border-radius: 6px; }
.film__caption { margin-top: .85rem; }

/* ---- The Life Manual ---- */
.tlm__intro { margin-bottom: 3.5rem; }
.tlm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(2rem, 5vw, 5rem); margin-top: 3.5rem; }
.tlm__cell p { max-width: 50ch; font-size: 1.0625rem; }
.tlm__cell--wide { grid-column: 1 / -1; padding-top: 3rem; border-top: 1px solid var(--rule); }
.audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; margin-top: 1.5rem; max-width: 56rem; }
.audience li { display: flex; flex-direction: column; gap: .1rem; padding: .85rem 0; border-top: 1px solid var(--rule); }
.audience__who { font: 500 1.0625rem/1.4 var(--sans); }
.audience__note { font: 400 .9375rem/1.4 var(--sans); color: var(--ink-2); }

/* ---- Coaching and programmes ---- */
.programmes__why { max-width: 62ch; margin-bottom: 3rem; }
.programmes__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); padding-top: 2.75rem; }
.programmes__gains p { max-width: 52ch; margin-bottom: 1.25rem; }
.programmes__org p { font-size: 1.0625rem; margin-bottom: 1.5rem; }

/* ---- The founder, in a golden light ---- */
.anand { overflow-x: clip; }  /* the glow behind the photo is wider than a phone */
.anand__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.anand__figure { position: relative; max-width: 420px; margin-inline: auto; }
.anand__figure::before {
  content: ""; position: absolute; left: 50%; bottom: 6%; z-index: 0;
  width: 150%; height: 70%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 80%, rgba(205, 158, 44, .42) 0%, rgba(205, 158, 44, .16) 40%, rgba(205, 158, 44, 0) 70%);
  pointer-events: none;
}
.anand__figure img { position: relative; z-index: 1; width: 100%; }
.anand__text .h2 { max-width: 16ch; margin-bottom: 1.5rem; }
.anand__text p:not(.kicker):not(.sig):not(.facts) { max-width: 54ch; }
.anand__more { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.anand__bio p { max-width: 58ch; }
.books li { padding: .7rem 0; border-top: 1px solid var(--rule); font-size: 1.0625rem; font-style: italic; }
.books li:last-child { border-bottom: 1px solid var(--rule); }
.books a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; text-decoration: none; }
.books__where { flex: none; font: 400 .8125rem/1.3 var(--sans); color: var(--ink-2); }
.books__where::after { content: " \2197"; }
.books a:hover .books__title, .books a:focus-visible .books__title { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.books a:hover .books__where { color: var(--ink); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.founders { margin-top: var(--section); padding-top: 3rem; border-top: 1px solid var(--rule); }
.founders__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; margin-bottom: 2rem; }
.founders__head .h3 { margin: 0; }
.founders__head p { margin: 0; font-size: 1.0625rem; }
.founders__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.founder a { display: block; text-decoration: none; color: inherit; }
.founder img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; margin-bottom: .8rem; transition: filter .25s; }
.founder a:hover img { filter: brightness(1.06); }
.founder__name { display: block; font: 500 1rem/1.35 var(--sans); }
.founder__role { display: block; font: 400 .9rem/1.4 var(--sans); color: var(--ink-2); }
.founder a:hover .founder__name { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: var(--gold); }

/* ---- The invitation to take part, on olive ---- */
.close { position: relative; background: var(--olive); color: var(--cream); padding-block: var(--section); }
.close .h2, .close .h3 { color: var(--cream); }
.close__head { max-width: 46rem; margin-bottom: 3.5rem; }
.close .h2 { max-width: 20ch; }
.close .lede { color: var(--on-olive); }
.cols3--light .col { border-left-color: var(--rule-light); }
.cols3--light p { color: var(--on-olive); }
.cols3--light .col__sub { color: var(--gold-light); }
.cols3--light .btn, .cols3--light .link { margin-top: .25rem; }
.close__note { font: 400 .875rem/1.55 var(--sans); color: var(--on-olive); max-width: 72ch; margin: 3.5rem 0 0; }

/* ---- Footer, with the whole logo ---- */
.footer { background: var(--cream); color: var(--ink-2); padding: clamp(4rem, 8vw, 6rem) 0 2rem; font-family: var(--sans); font-size: .9375rem; line-height: 1.55; border-top: 1px solid var(--rule); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.footer__logo { width: min(250px, 100%); height: auto; margin: 0 0 1.25rem -4px; }
.footer__h { font: 500 .9375rem/1.4 var(--sans); color: var(--olive); margin: 0 0 .75rem; }
.footer p { margin: 0 0 .75rem; }
.footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .2s, color .2s; }
.footer a:hover { color: var(--olive); border-bottom-color: var(--gold); }
.footer__links li { margin-bottom: .45rem; }
.footer__contact { font-size: 1rem; margin-bottom: .35rem; }
.footer__legal { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .875rem; }
.footer__legal p { margin: 0; }

/* ---- Tablet and phone ---- */
@media (max-width: 1040px) {
  .route { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .route__action { grid-column: 2; justify-self: start; padding-top: 0; }
  .brand__name { font-size: 1rem; }
  .nav__list a:not(.btn) { font-size: .875rem; }
}

/* the menu folds into a button where the full bar would not fit */
@media (max-width: 1239px) {
  .nav__toggle {
    display: inline-flex; align-items: center; gap: .6rem;
    background: none; border: 1px solid var(--olive); color: var(--olive);
    border-radius: 999px; padding: .55rem 1rem; font: 500 .9375rem/1 var(--sans); cursor: pointer;
  }
  .nav__toggle-bars { position: relative; width: 16px; height: 10px; }
  .nav__toggle-bars::before, .nav__toggle-bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .25s var(--ease-out), top .25s var(--ease-out); }
  .nav__toggle-bars::before { top: 0; }
  .nav__toggle-bars::after { top: 8.5px; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { top: 4px; transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { top: 4px; transform: rotate(-45deg); }
  .nav__list {
    display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + .25rem);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border: 1px solid var(--rule); border-radius: 12px; padding: .5rem 0;
    box-shadow: 0 24px 60px rgba(44, 51, 24, .22);
  }
  .menu-open .nav__list { display: flex; }
  .nav__list a:not(.btn) { display: block; padding: .9rem 1.25rem; border-bottom: 0; font-size: 1.0625rem; }
  .nav__list a[aria-current="page"] { background: var(--sand); }
  .nav__donate { margin: .5rem 1.25rem .75rem; }
  .nav__donate .btn { width: 100%; min-height: 3rem; }
}

@media (max-width: 879px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo { order: -1; }   /* on a phone the landing leads with the photograph */
  .hero__title { font-size: clamp(2.4rem, 10vw, 3.4rem); max-width: 12ch; }
  .anand__grid, .anand__more, .foundation__grid, .tlm__grid, .programmes__foot, .split { grid-template-columns: 1fr; }
  .anand__figure { max-width: 300px; margin-inline: 0; }
  .tlm__cell--wide { padding-top: 0; border-top: 0; }
  .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
  .how { grid-template-columns: 1fr; }
  .fit { grid-template-columns: 1fr; gap: .6rem; }
  .fit div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
  .fit dt { margin: .1rem 0 0; }
  .cols3 { grid-template-columns: 1fr; }
  .col { padding: 2rem 0; border-left: 0; border-top: 1px solid var(--rule); }
  .col:first-child { padding-top: 0; border-top: 0; }
  .col:last-child { padding-bottom: 0; }
  .cols3--light .col { border-top-color: var(--rule-light); }
  .route { grid-template-columns: 1fr; gap: .75rem; padding: 2.25rem 0; }
  .route__for { margin: 0; }
  .route__action { grid-column: auto; margin-top: .5rem; }
  .founders__list { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: thin; }
  .founder { flex: 0 0 42vw; max-width: 14rem; scroll-snap-align: start; }
}

@media (max-width: 480px) {
  .brand__name { display: none; }
  .brand__mark { width: 62px; }
  .actions .btn, .hero__actions .btn, .cols3--light .btn, .programmes__org .btn, .route__action .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .audience { grid-template-columns: 1fr; }
  .film__word { display: none; }   /* the button and the running time only, so the poster's car stays clear */
  .film__cue { gap: .6rem; padding-right: .95rem; }
}

@media print {
  .top, .skip, .nav { display: none; }
  .foundation--home, .close, .cta { background: none; color: #000; }
  .foundation--home .h2, .close .h2, .cta .h2, .foundation--home p, .close p, .cta p { color: #000; }
}

/* ---- Inner pages ---- */
.h1 { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 0; font-weight: 320; letter-spacing: -0.016em; font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.05; max-width: 16ch; margin: 0 0 1rem; text-wrap: balance; color: var(--olive); }
.phero { background: var(--cream); padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.phero__photo { border-radius: 6px; overflow: hidden; }
.phero__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.phero__photo--tall { max-width: 440px; justify-self: end; }
.phero__photo--tall img { aspect-ratio: 4 / 5; }
.phero--text .lede { max-width: 56ch; }
.phero__jump { margin-top: 1.5rem; }
.phero__jump li::before { display: none; }
.phero__jump li { padding-left: 0; }
.phero--profile { text-align: center; padding-bottom: 0; }
.phero--profile .h1, .phero--profile .lede { margin-inline: auto; }
.phero--profile .kicker a { color: inherit; text-decoration: none; }
.phero--profile .kicker a:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--gold); }
.arch { width: min(340px, 72vw); margin: 2.5rem auto -2.5rem; padding: 10px; border: 1.5px solid var(--gold); border-radius: 999px 999px 10px 10px; background: var(--cream); position: relative; z-index: 1; }
.arch img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 4px 4px; }
.arch--small { width: min(300px, 60vw); margin: 0; }
.page--profile .band { padding-top: calc(var(--section) + 2.5rem); }
.band { background: var(--sand); }
.section + .section:not(.band) { border-top: 1px solid var(--rule); }
.band + .section, .foundation--home + .section, .section + .band { border-top: 0; }
.lede--big { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 0; font-weight: 340; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; letter-spacing: -0.01em; max-width: 30ch; margin-bottom: 1.25rem; color: var(--olive); }
.twocol { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.twocol .pull { margin-top: .25rem; }
.plain--big li { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 0; font-weight: 380; font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin-bottom: .6rem; padding-left: 2rem; color: var(--olive); }
.plain--big li::before { width: 1.25rem; top: .8em; }
.profile__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: start; }
.profile__grid--single { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.profile__bio p { max-width: 60ch; }
.highlights li { padding: .8rem 0; border-top: 1px solid var(--rule); }
.highlights li:last-child { border-bottom: 1px solid var(--rule); }
.highlights__t { display: block; font: 500 1.0625rem/1.4 var(--sans); }
.highlights__s { display: block; font: 400 .9375rem/1.45 var(--sans); color: var(--ink-2); margin-top: .1rem; }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem; }
.people a { display: block; padding: 1rem 0; border-top: 1px solid var(--rule); text-decoration: none; color: inherit; }
.people a:hover .people__name { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: var(--gold); }
.people__name { display: block; font: 500 1.0625rem/1.4 var(--sans); }
.people__role { display: block; font: 400 .9375rem/1.4 var(--sans); color: var(--ink-2); }
.founders__list--page img { aspect-ratio: 3 / 4; }
.about-anand { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: center; }
.about-anand p:not(.kicker) { max-width: 58ch; }
.way { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: center; }
.way--flip .way__text { order: 2; }
.way__text p:not(.kicker):not(.note) { max-width: 52ch; }
.way__photo { border-radius: 6px; overflow: hidden; }
.way__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.note { font: 400 .875rem/1.55 var(--sans); color: var(--ink-2); max-width: 60ch; margin: 1.5rem 0 0; }
.cta { background: var(--olive); color: var(--cream); padding-block: var(--section); }
.cta .h2 { color: var(--cream); }
.cta__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.cta .h2 { max-width: 18ch; margin-bottom: .75rem; }
.cta p { color: var(--on-olive); max-width: 48ch; margin: 0; }
.cta__text { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; }
.cta .actions { margin-top: 0; justify-content: flex-end; }
.contact { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: start; }
.form { max-width: 34rem; }
.form .h3 { margin-bottom: 1.5rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font: 500 .9375rem/1.4 var(--sans); margin-bottom: .4rem; }
.field input, .field textarea { width: 100%; font: 400 1rem/1.45 var(--sans); color: var(--ink); background: #fff; border: 1px solid rgba(79, 91, 43, .35); border-radius: 8px; padding: .8rem 1rem; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(205, 158, 44, .4); }
.field textarea { resize: vertical; min-height: 9rem; }
.form .actions { margin-top: 1.5rem; }
.form .btn { cursor: pointer; }
.form__note { margin-top: 1.25rem; }
.details div { padding: .9rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem; }
.details div:last-child { border-bottom: 1px solid var(--rule); }
.details dt { font: 500 .9375rem/1.5 var(--sans); color: var(--ink-2); }
.details dd { font: 400 1.0625rem/1.5 var(--sans); }
.details a { text-decoration: none; border-bottom: 1px solid var(--gold); }
.details a:hover { border-bottom-color: currentColor; }

@media (max-width: 879px) {
  .phero__grid, .twocol, .profile__grid, .profile__grid--single, .about-anand, .way, .cta__inner, .contact { grid-template-columns: 1fr; }
  .phero__photo--tall { justify-self: start; max-width: 100%; }
  .way--flip .way__text { order: 0; }
  .cta .actions { justify-content: flex-start; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
  .arch--small { margin-inline: 0; }
}
@media (max-width: 480px) {
  .people { grid-template-columns: 1fr; }
  .details div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---- Resources: the article series, the talks and podcasts ---- */
.shelf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: start; }
.shelf__head p:not(.kicker) { max-width: 46ch; }
.shelf__head .actions { margin-top: 1.5rem; }
.series { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.series a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.series__n { font: 500 .875rem/1.4 var(--sans); color: var(--gold-ink); }
.series__title { font: 380 1.25rem/1.3 var(--display); font-variation-settings: "SOFT" 40, "WONK" 0; color: var(--olive); }
.series__time { font: 400 .875rem/1.4 var(--sans); color: var(--ink-2); white-space: nowrap; }
.series a:hover .series__title, .series a:focus-visible .series__title { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.section--tight { padding-top: 0; }
.section--tight .series { max-width: 46rem; }

.media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.25rem, 2.5vw, 2rem); margin: 0 0 1rem; }
.media--upright { grid-template-columns: repeat(3, minmax(0, 15rem)); }
.media__group { margin: 2.5rem 0 1.25rem; }
.media__group:first-of-type { margin-top: .5rem; }
.media a { display: block; text-decoration: none; color: inherit; }
.media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin-bottom: .8rem; background: var(--sand-2); transition: filter .25s; }
.media--upright img { aspect-ratio: 9 / 16; }
.media a:hover img { filter: brightness(1.06); }
.media__title { display: block; font: 500 1.0625rem/1.35 var(--sans); }
.media__src { display: block; font: 400 .9rem/1.4 var(--sans); color: var(--ink-2); margin-top: .15rem; }
.media__src::after { content: " · YouTube \2197"; }
.media a:hover .media__title { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; text-decoration-color: var(--gold); }
#clips .note a { color: var(--olive); text-decoration-color: var(--gold); text-underline-offset: .2em; }

/* one article: a reading column */
.article__col { max-width: 44rem; }
.article__head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.article__head .kicker a { color: inherit; text-decoration: none; }
.article__head .kicker a:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--gold); }
.article__title { max-width: 20ch; }
.article__by { font: 500 1rem/1.4 var(--sans); color: var(--ink); margin: 0 0 .3rem; }
.article__by a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.article__meta { font: 400 .9375rem/1.4 var(--sans); color: var(--ink-2); margin: 0; }
.article__body { padding-bottom: var(--section); }
.article__body > p { max-width: 64ch; }
.article__h { font: 380 clamp(1.45rem, 2vw, 1.7rem)/1.25 var(--display); font-variation-settings: "SOFT" 40, "WONK" 0; color: var(--olive); margin: 2.4rem 0 .8rem; text-wrap: balance; }
.article__key { font: italic 400 clamp(1.2rem, 1.7vw, 1.35rem)/1.5 var(--serif); color: var(--olive); border-left: 2px solid var(--gold); padding-left: 1.25rem; margin: 1.75rem 0; }
.verse { margin: 1.75rem 0; padding: 1.25rem 1.5rem; background: var(--sand); border-radius: 6px; }
.verse__sa { font-size: 1.15rem; line-height: 1.8; color: var(--olive); margin: 0 0 .6rem; }
.verse__en { font-style: italic; margin: 0; }
.article__next { margin-top: 1.75rem; }
.article__next a { font: 500 1rem/1.4 var(--sans); color: var(--olive); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.article__refs { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.article__refs-h { font: 500 1rem/1.4 var(--sans); color: var(--ink); margin: 0 0 .75rem; }
.article__refs li { position: relative; padding-left: 1.25rem; margin-bottom: .55rem; font: 400 .9375rem/1.55 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.article__refs li::before { content: ""; position: absolute; left: 0; top: .75em; width: .6rem; height: 1.5px; background: var(--gold); }
.article__refs a { color: var(--olive); text-decoration-color: var(--gold); text-underline-offset: .2em; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.pager a { text-decoration: none; color: inherit; }
.pager__next { text-align: right; }
.pager__dir { display: block; font: 500 .875rem/1.4 var(--sans); color: var(--gold-ink); }
.pager__title { display: block; font: 380 1.1rem/1.3 var(--display); color: var(--olive); }
.pager a:hover .pager__title { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .25em; text-decoration-thickness: 1px; }
.pager__all { font: 500 .9375rem/1.4 var(--sans); color: var(--olive) !important; text-decoration: underline !important; text-decoration-color: var(--gold) !important; text-underline-offset: .3em; align-self: center; }

@media (max-width: 879px) {
  .shelf { grid-template-columns: 1fr; }
  .media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media--upright { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .media { grid-template-columns: 1fr; }
  .media--upright { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .series a { grid-template-columns: 1fr auto; gap: .1rem 1rem; }
  .series__n { grid-column: 1 / -1; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager__all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* ---- Activities: one entry per activity (the film, the session in chapters, the photograph) ---- */
.activity__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.activity__head .lede { margin: 0; }
.chapters { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.chapters li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: 1rem; padding: 1.1rem 0 1.25rem; border-bottom: 1px solid var(--rule); }
.chapters__t {
  grid-row: 1 / span 2; align-self: start; justify-self: start;
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .2rem;
  font: 500 .9375rem/1.4 var(--sans); color: var(--gold-ink); text-decoration: none; font-variant-numeric: tabular-nums;
}
.chapters__t::before { content: ""; border-style: solid; border-width: .35rem 0 .35rem .55rem; border-color: transparent transparent transparent currentColor; }
.chapters__t:hover { color: var(--olive); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .25em; }
.chapters__h { grid-column: 2; font: 380 1.25rem/1.3 var(--display); font-variation-settings: "SOFT" 40, "WONK" 0; color: var(--olive); margin: 0 0 .35rem; }
.chapters p { grid-column: 2; margin: 0; max-width: 58ch; }
.activity__photo { margin: 0; }
.activity__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--sand-2); }
.activity__photo figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-top: 1.25rem; }
.activity__line { font: 340 clamp(1.5rem, 2.6vw, 2.1rem)/1.3 var(--display); font-variation-settings: "SOFT" 40, "WONK" 0; letter-spacing: -0.01em; color: var(--olive); }

@media (max-width: 560px) {
  .chapters li { grid-template-columns: 1fr; }
  .chapters__t { grid-row: auto; margin: 0 0 .35rem; }
  .chapters__h, .chapters p { grid-column: 1; }
}