/* ==========================================================================
   The Alain Rouveure Nepal Fund — home page
   Static HTML and CSS deliverable. No framework, no build step.
   Every colour, size, space and radius below resolves to a token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — TeX Gyre Adventor (GUST e-foundry licence, see assets/fonts/)
   Regular and bold only. Italics are deliberately not loaded.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("../fonts/texgyreadventor-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("../fonts/texgyreadventor-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour. Brand primary #89A18A is a SURFACE colour: 2.63:1 on paper, so it
     never carries type. Its text-safe sibling at the same hue is --sage-deep. */
  --paper: #f9f8f5;
  --sage: #89a18a;
  --sage-deep: #355036;
  /* The brand hue lifted for use ON dark grounds, where --sage-deep disappears
     and --sage-tint reads as plain white. 9.7:1 over the hero scrim. */
  --sage-bright: #9dc49f;
  --sage-tint: #e8eee8;
  --ink: #1a1815;
  --ink-soft: #2b2822;
  --ink-muted: #6b655c;
  --rule: #e2dcd1;
  --rule-on-sage: #6e8570;

  /* Spacing — the only permitted values */
  --s-0: 0;
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  /* Type scale */
  --text-xs: 0.75rem;
  --lh-xs: 16px;
  --text-sm: 0.875rem;
  --lh-sm: 20px;
  --text-base: 1rem;
  --lh-base: 24px;
  --text-lg: 1.125rem;
  --lh-lg: 28px;
  --text-xl: 1.25rem;
  --lh-xl: 28px;
  --text-2xl: 1.5rem;
  --lh-2xl: 32px;
  --text-3xl: 1.875rem;
  --lh-3xl: 36px;
  --text-4xl: 2.25rem;
  --lh-4xl: 40px;
  --text-5xl: 3rem;
  --lh-5xl: 1.14;
  --text-6xl: 3.75rem;
  --lh-6xl: 1.1;
  --text-7xl: 4.5rem;
  --lh-7xl: 1.08;

  /* Radius */
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 700ms;
  --dur-slow: 800ms;

  /* Island nav geometry. The hero's top padding and its scrim offset are both
     derived from these, so the photograph always starts clear of the bar
     instead of relying on three hardcoded numbers agreeing with each other. */
  --nav-top: var(--s-300);
  --nav-h: 56px;

  /* Measure */
  --measure-display: 680px;
  --measure-prose: 620px;
  --container: 1200px;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: "TeX Gyre Adventor", "Century Gothic", "Questrial", sans-serif;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 400;
  letter-spacing: 0.005em;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

.arnf-design h1,
.arnf-design h2,
.arnf-design h3,
.arnf-design h4,
.arnf-footer h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.arnf-design p,
.arnf-footer p {
  margin: 0;
}

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

.arnf-nav-wrap a:not(.btn--donate):not(.arnf-nav__link):not(.arnf-nav__brand),
.arnf-sheet a:not(.btn--donate),
.arnf-design .prose a,
.arnf-design .link-arrow,
.arnf-footer a {
  color: var(--sage-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}

.arnf-nav-wrap a:not(.btn--donate):not(.arnf-nav__link):not(.arnf-nav__brand):hover,
.arnf-sheet a:not(.btn--donate):hover,
.arnf-design .prose a:hover,
.arnf-design .link-arrow:hover,
.arnf-footer a:hover {
  color: var(--ink);
}

.arnf-nav ul,
.arnf-sheet ul,
.arnf-design ul,
.arnf-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Selection is a surface the design owns too. Sage tint behind ink keeps the
   headline readable while a word is highlighted. */
::selection {
  background-color: var(--sage-tint);
  color: var(--ink);
}

/* Focus. Visible ring on every interactive element — accessibility, not decoration. */
:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: var(--r-lg);
}

/* The skip link's target. It is focused programmatically, never tabbed to, so
   it takes the focus without drawing a ring around the whole page. */
#main:focus {
  outline: none;
}

.skip-link {
  position: absolute;
  left: var(--s-300);
  top: var(--s-300);
  z-index: 100;
  padding: var(--s-100) var(--s-200);
  background-color: var(--ink);
  color: var(--paper);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  border-radius: var(--r-lg);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.arnf-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-300);
}

.section {
  padding-block: var(--s-900);
}

.section--paper {
  background-color: var(--paper);
}

.section--tint {
  background-color: var(--sage-tint);
}

.section--sage {
  background-color: var(--sage);
}

.section--sage,
.section--sage h2,
.section--sage h3 {
  color: var(--ink);
}

.eyebrow {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section--sage .eyebrow {
  color: var(--ink-soft);
}

.section-title {
  max-width: var(--measure-display);
  font-size: var(--text-5xl);
  line-height: var(--lh-5xl);
  padding-bottom: 0.08em;
}

.prose {
  max-width: var(--measure-prose);
  color: var(--ink-soft);
}

.prose p + p {
  margin-top: var(--s-300);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

/* The single action colour on the page. Nothing else uses --sage-deep as a fill. */
.btn--donate {
  background-color: var(--sage-deep);
  color: var(--paper);
}

.btn--donate:hover {
  background-color: var(--ink);
  color: var(--paper);
}

.btn--lg {
  padding: var(--s-100) var(--s-300);
}

/* The brand primary used exactly as the brand allows it: a surface, with dark
   ink on top. Only ever over a photograph, where --sage-deep goes muddy. */
.btn--brand {
  background-color: var(--sage-bright);
  color: var(--ink);
}

.btn--brand:hover {
  background-color: var(--paper);
  color: var(--ink);
}

.btn--outline {
  background-color: rgba(249, 248, 245, 0.06);
  border-color: rgba(249, 248, 245, 0.45);
  color: var(--paper);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn--outline:hover {
  background-color: rgba(249, 248, 245, 0.16);
  border-color: var(--paper);
  color: var(--paper);
}

.btn--outline svg {
  transition: transform var(--dur) var(--ease);
}

.btn--outline:hover svg {
  transform: translateX(var(--s-50));
}

.btn--ghost {
  background-color: transparent;
  border-color: var(--rule);
  color: var(--ink);
}

.btn--ghost:hover {
  background-color: var(--sage-tint);
  color: var(--ink);
}

.section--sage .btn--ghost {
  border-color: var(--rule-on-sage);
}

.section--sage .btn--ghost:hover {
  background-color: var(--sage-tint);
}

/* Text link with a moving arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 700;
  text-decoration: none;
}

.link-arrow svg {
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(var(--s-50));
}

/* --------------------------------------------------------------------------
   Island navigation
   -------------------------------------------------------------------------- */

/* Fixed, not sticky: the hero photograph runs to the very top of the page and
   the bar floats over it, so it must not occupy a strip of layout first. */
.arnf-nav-wrap {
  position: fixed;
  top: var(--nav-top);
  left: 0;
  right: 0;
  z-index: 60;
  padding-inline: max(var(--s-300), env(safe-area-inset-left, 0px))
    max(var(--s-300), env(safe-area-inset-right, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* The bar spans the content width rather than shrink-wrapping its links, so
   the brand sits on the same left edge as the headline below it and the donate
   button lands on the right edge of the photograph.

   Over the hero it is dark glass; once the page has scrolled under it, it
   becomes light glass and the ink returns. Either way there is a real ground
   behind the type: white links straight onto a photograph are a gamble on
   whatever pixel happens to be underneath. */
.arnf-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-200);
  width: 100%;
  max-width: var(--container);
  min-height: var(--nav-h);
  padding: var(--s-75) var(--s-300);
  background-color: rgba(20, 18, 15, 0.34);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(249, 248, 245, 0.2);
  border-radius: var(--r-full);
  box-shadow: 0 16px 40px -28px rgba(20, 18, 15, 0.8);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

[data-scrolled="true"] .arnf-nav {
  background-color: rgba(249, 248, 245, 0.82);
  border-color: var(--rule);
  box-shadow: 0 12px 32px -20px rgba(26, 24, 21, 0.45);
}

.arnf-nav__brand {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--s-75);
  font-size: var(--text-base);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

/* WordPress prints the badge at its file size (207x300). Lock the box so it
   cannot stretch the pill or throw the type off the centre line. */
.arnf-nav__brand img,
.arnf-nav__logo {
  width: 40px;
  height: 40px;
  max-width: none;
  object-fit: contain;
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.arnf-nav__brand:hover .arnf-nav__logo {
  transform: scale(1.06);
}

.arnf-nav__brand-text {
  padding-top: 0;
}

/* Over the hero photograph the bar is white on the image; once the page has
   scrolled it becomes the glass island and the ink returns. */
[data-scrolled="false"] .arnf-nav__brand,
[data-scrolled="false"] .arnf-nav__link,
[data-scrolled="false"] .arnf-nav__link[aria-current="page"] {
  color: var(--paper);
  text-shadow: 0 1px 10px rgba(20, 18, 15, 0.5);
}

[data-scrolled="false"] .arnf-nav__link:hover {
  color: var(--paper);
  opacity: 0.75;
}

[data-scrolled="false"] .arnf-nav__link[aria-current="page"]::after {
  background-color: var(--paper);
}

[data-scrolled="false"] .arnf-nav .btn--donate {
  background-color: var(--paper);
  color: var(--ink);
}

[data-scrolled="false"] .arnf-nav .btn--donate:hover {
  background-color: var(--sage-bright);
  color: var(--ink);
}

/* The snow on the peak is transparent in the artwork, so on the dark glass the
   mark would render a black mountain. It gets the light ground it was drawn
   for rather than being redrawn. */
[data-scrolled="false"] .arnf-nav__logo {
  padding: var(--s-25);
  background-color: rgba(249, 248, 245, 0.94);
  border-radius: var(--r-full);
}

[data-scrolled="false"] .arnf-nav__toggle {
  border-color: rgba(249, 248, 245, 0.5);
}

[data-scrolled="false"] .arnf-nav__toggle span {
  background-color: var(--paper);
}

/* With the overlay open, the bar is floating over a near-white sheet, so the
   dark-glass hero state has to be dropped whatever the scroll position is.
   Otherwise the first thing a phone user sees on opening the menu is a black
   pill and a white-on-white close button. */
.arnf-nav-wrap[data-menu-open="true"] .arnf-nav {
  background-color: rgba(249, 248, 245, 0.86);
  border-color: var(--rule);
  box-shadow: 0 12px 32px -20px rgba(26, 24, 21, 0.45);
}

.arnf-nav-wrap[data-menu-open="true"] .arnf-nav__brand {
  color: var(--ink);
  text-shadow: none;
}

.arnf-nav-wrap[data-menu-open="true"] .arnf-nav__logo {
  padding: 0;
  background-color: transparent;
}

.arnf-nav-wrap[data-menu-open="true"] .arnf-nav__toggle {
  border-color: var(--rule);
}

.arnf-nav-wrap[data-menu-open="true"] .arnf-nav__toggle span {
  background-color: var(--ink);
}

.arnf-nav-wrap[data-menu-open="true"] .arnf-nav .btn--donate {
  background-color: var(--sage-deep);
  color: var(--paper);
}

.arnf-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--s-300);
  margin: 0;
  padding: 0;
  list-style: none;
}

.arnf-nav__links li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.arnf-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--s-50);
  transition: color var(--dur) var(--ease);
}

.arnf-nav__link:hover {
  color: var(--ink);
}

/* Current page indicator. Weight alone is easy to miss at 14px, so the
   active link also carries the tint it would get on hover, made permanent. */
.arnf-nav__link[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}

.arnf-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background-color: var(--sage);
  border-radius: var(--r-full);
}

.arnf-nav .btn--donate {
  flex: none;
  padding: var(--s-75) var(--s-200);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  line-height: 1;
}

/* Hamburger — lines rotate and translate into an X, they never just vanish */
.arnf-nav__toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  cursor: pointer;
}

.arnf-nav__toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background-color: var(--ink);
  border-radius: var(--r-full);
  transition: transform var(--dur) var(--ease);
}

.arnf-nav__toggle span:nth-child(1) {
  transform: translate(-50%, calc(-50% - 4px));
}

.arnf-nav__toggle span:nth-child(2) {
  transform: translate(-50%, calc(-50% + 4px));
}

.arnf-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.arnf-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Full screen overlay menu */
.arnf-sheet {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-700) var(--s-300);
  /* A near opaque ground rather than a backdrop-filter. A full screen
     backdrop blur has to re-rasterize everything behind it every frame, and
     over a page that already has blurred reveal layers it stalls the
     compositor badly enough to starve requestAnimationFrame. At full screen
     there is nothing meaningful to see through anyway. */
  background-color: rgba(249, 248, 245, 0.97);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.arnf-sheet[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.arnf-sheet__brand {
  display: flex;
  align-items: center;
  gap: var(--s-200);
  margin-bottom: var(--s-500);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: 18ch;
}

.arnf-sheet__logo {
  width: auto;
  height: 56px;
  flex: none;
}

.arnf-sheet__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-200);
}

/* Each link sits in an invisible box and slides up out of it, staggered */
.arnf-sheet__item {
  overflow: hidden;
}

.arnf-sheet__item a {
  display: inline-block;
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  transform: translateY(48px);
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--ease),
    opacity var(--dur-slow) var(--ease);
}

.arnf-sheet[data-open="true"] .arnf-sheet__item a {
  transform: translateY(0);
  opacity: 1;
}

.arnf-sheet__item:nth-child(1) a {
  transition-delay: 100ms;
}
.arnf-sheet__item:nth-child(2) a {
  transition-delay: 150ms;
}
.arnf-sheet__item:nth-child(3) a {
  transition-delay: 200ms;
}
.arnf-sheet__item:nth-child(4) a {
  transition-delay: 250ms;
}
.arnf-sheet__item:nth-child(5) a {
  transition-delay: 300ms;
}
.arnf-sheet__item:nth-child(6) a {
  transition-delay: 350ms;
}
.arnf-sheet__item:nth-child(7) a {
  transition-delay: 400ms;
}
.arnf-sheet__item:nth-child(8) a {
  transition-delay: 450ms;
}

/* --------------------------------------------------------------------------
   Scroll reveal — heavy, blurred fade up. Driven by IntersectionObserver.
   -------------------------------------------------------------------------- */

/* DEC-020: content stays visible if JavaScript never runs. html.js is set
   in the head; only then do we hide reveal targets for the observer. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(64px);
  filter: blur(8px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease),
    filter var(--dur-slow) var(--ease);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-reveal-delay="1"] {
  transition-delay: 100ms;
}
[data-reveal-delay="2"] {
  transition-delay: 200ms;
}
[data-reveal-delay="3"] {
  transition-delay: 300ms;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.arnf-footer {
  background-color: var(--ink);
  color: var(--paper);
  padding-block: var(--s-800) var(--s-500);
}

.arnf-footer a {
  color: var(--paper);
}

.arnf-footer a:hover {
  color: var(--sage);
}

.arnf-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.8fr;
  gap: var(--s-500) var(--s-700);
  padding-bottom: var(--s-600);
  align-items: start;
}

.arnf-footer__lede {
  font-size: var(--text-2xl);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

.arnf-footer__charity {
  margin-top: var(--s-400) !important;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--sage);
}

.arnf-footer__heading {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--s-300);
}

.arnf-footer__list li + li {
  margin-top: var(--s-100);
}

.arnf-footer__list {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: rgba(249, 248, 245, 0.86);
}

.arnf-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200) var(--s-300);
  border-top: 1px solid rgba(249, 248, 245, 0.14);
  padding-top: var(--s-400);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: rgba(249, 248, 245, 0.65);
}

.arnf-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-300);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .arnf-nav__links {
    gap: var(--s-200);
  }
}

@media (max-width: 1080px) {
  .arnf-nav__links {
    display: none;
  }

  .arnf-nav__toggle {
    display: block;
  }

  .arnf-nav {
    gap: var(--s-200);
  }

  /* The links carried the auto margin that pushed Donate and the burger to the
     right edge. With them gone the bar has to say so itself, or the three
     remaining items bunch against the logo and leave half the pill empty. */
  .arnf-nav .btn--donate {
    margin-inline-start: auto;
  }
}

@media (max-width: 900px) {
  :root {
    /* Under the notch, and closer to the top edge than on desktop: a phone has
       no room to spend 24px floating a bar above a 400px photograph. */
    --nav-top: max(var(--s-200), env(safe-area-inset-top, 0px));
  }

  .arnf-nav {
    gap: var(--s-100);
    padding: var(--s-75) var(--s-75) var(--s-75) var(--s-100);
  }

  /* The bar spends its first screen over solid ink rather than over the
     photograph, where the faintest glass reads as a stray outline. */
  [data-scrolled="false"] .arnf-nav {
    background-color: rgba(20, 18, 15, 0.55);
    border-color: rgba(249, 248, 245, 0.16);
  }

  .arnf-nav__brand img,
  .arnf-nav__logo {
    width: 34px;
    height: 34px;
  }

  .arnf-nav__brand {
    gap: var(--s-50);
  }

  /* 40px is what the bar's height allows; the touch target is grown past it
     with an invisible expander rather than by making the pill taller. */
  .arnf-nav .btn--donate,
  .arnf-nav__toggle {
    position: relative;
    min-height: 40px;
  }

  .arnf-nav .btn--donate::after,
  .arnf-nav__toggle::after {
    content: "";
    position: absolute;
    inset: -3px -2px;
  }
}

@media (max-width: 340px) {
  /* At the narrowest phone width still in use, every pixel in the bar is spoken for. The wordmark is
     the first thing to go: the mark beside it already names the charity, and
     the alternative is a Donate button that will not fit. */
  .arnf-nav__brand-text {
    display: none;
  }
}

@media (max-width: 720px) {
  body {
    font-size: var(--text-base);
    line-height: var(--lh-base);
  }

  .arnf-container,
  .arnf-nav-wrap {
    padding-inline: max(var(--s-200), env(safe-area-inset-left, 0px))
      max(var(--s-200), env(safe-area-inset-right, 0px));
  }

  .section {
    padding-block: var(--s-600);
  }

  .section-title {
    font-size: var(--text-3xl);
    line-height: var(--lh-3xl);
  }

  .arnf-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--s-500);
  }

  /* The overlay is no longer a centred block: the bar stays visible above it,
     so the list starts under the bar and runs down the sheet. Centring put the
     charity line behind the bar as soon as the list grew past a phone. */
  .arnf-sheet {
    justify-content: flex-start;
    padding-block: calc(var(--nav-top) + var(--nav-h) + var(--s-500))
      calc(var(--s-600) + env(safe-area-inset-bottom, 0px));
    padding-inline: max(var(--s-300), env(safe-area-inset-left, 0px))
      max(var(--s-300), env(safe-area-inset-right, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The bar directly above already shows the mark and the name. Repeating them
     three centimetres lower is the overlay talking to itself. */
  .arnf-sheet__brand {
    display: none;
  }

  .arnf-sheet__list {
    gap: var(--s-100);
  }

  .arnf-sheet__item a {
    font-size: var(--text-3xl);
    line-height: var(--lh-3xl);
  }

  /* Donate is the page's one action, and in a plain list of eight it reads as
     the eighth destination. It keeps the action colour instead. */
  .arnf-sheet__item:last-child a {
    color: var(--sage-deep);
  }
}

/* Phone held sideways, and small tablets in landscape: eight links at 30px do
   not fit above the fold, so the list closes up rather than relying on a
   scroll the user has no reason to expect inside a menu. */
@media (max-width: 900px) and (max-height: 560px) {
  .arnf-sheet {
    padding-block: calc(var(--nav-top) + var(--nav-h) + var(--s-300)) var(--s-400);
  }

  .arnf-sheet__item a {
    font-size: var(--text-xl);
    line-height: var(--lh-xl);
  }

  .arnf-sheet__list {
    gap: var(--s-50);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* --------------------------------------------------------------------------
   1. Hero
   The photograph is the section, not an illustration beside it. Copy sits on
   the left over a scrim that is heavy where the words are and clears away
   before it reaches the girl in the centre, so the two faces that carry the
   page stay bright.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(88vh, 860px);
  padding-block: var(--s-900) var(--s-800);
  background-color: var(--ink);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    100deg,
    rgba(20, 18, 15, 0.66) 0%,
    rgba(20, 18, 15, 0.6) 28%,
    rgba(20, 18, 15, 0.5) 42%,
    rgba(20, 18, 15, 0.16) 56%,
    rgba(20, 18, 15, 0.02) 70%,
    rgba(20, 18, 15, 0) 100%
  );
}

.hero__inner {
  width: 100%;
}

.hero__copy {
  max-width: 580px;
  color: var(--paper);
}

/* The registration number is the one credential a stranger can go and check,
   so it introduces the charity's own line rather than sitting in the footer. */
.hero__eyebrow {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.16em;
  margin-bottom: var(--s-200);
  text-transform: uppercase;
  color: rgba(249, 248, 245, 0.72);
}

/* Bounded by --text-3xl and --text-5xl. The fluid middle is what holds the
   line to two at every width; a fixed size breaks it to three somewhere. */
.hero__title {
  max-width: 480px;
  margin-top: var(--s-300);
  font-size: clamp(1.875rem, 4.6vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.hero__accent {
  color: var(--sage-bright);
}

.hero__sub {
  max-width: 52ch;
  margin-top: 25px !important;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: rgba(249, 248, 245, 0.86);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-200);
  margin-top: var(--s-500);
}

@media (max-width: 1200px) {
  .hero__scrim {
    background-image: linear-gradient(
      100deg,
      rgba(20, 18, 15, 0.82) 0%,
      rgba(20, 18, 15, 0.78) 36%,
      rgba(20, 18, 15, 0.56) 52%,
      rgba(20, 18, 15, 0.2) 68%,
      rgba(20, 18, 15, 0.03) 100%
    );
  }
}

@media (max-width: 900px) {
  /* Portrait, the copy cannot sit beside the children and it cannot sit over
     them either: the three faces are in the vertical middle of this photograph,
     so anything overlaid lands on them. The photograph gets a band of its own
     and the words move underneath it. */
  /* The tallest boy's head is six percent from the top of this frame, so a bar
     floating over the photograph will always cover it at phone width. The nav
     gets a strip of ink of its own and the photograph starts underneath it.

     Both the strip and the scrim below are measured from --hero-top, which is
     the bar's own geometry plus a gap. Change the bar's height and the
     photograph moves with it. */
  .hero {
    --hero-top: calc(var(--nav-top) + var(--nav-h) + var(--s-300));
    --hero-band: clamp(240px, 40vh, 360px);
    display: block;
    min-height: 0;
    padding-block: var(--hero-top) var(--s-700);
  }

  /* The mobile source is a portrait 768x958 frame, so cover always matches the
     band to its full width (nothing left over horizontally to crop) and only
     trims top and bottom — the horizontal value below is a no-op, kept for
     the day the source changes shape. Vertically 38% centres the crop on the
     children's faces, which sit in roughly the top 60% of the frame.

     The ceiling on --hero-band is set by the donate button: the band can have
     every pixel that still leaves the first action above the fold on a 667pt
     phone, and not one more. */
  .hero__bg {
    position: relative;
    z-index: 0;
    height: var(--hero-band);
    object-position: 50% 38%;
  }

  /* The scrim now covers only the photograph: a light wash at the top so the
     nav stays readable, then a fall into the ink the copy sits on. */
  .hero__scrim {
    top: var(--hero-top);
    bottom: auto;
    height: var(--hero-band);
    background-image: linear-gradient(
      to bottom,
      rgba(20, 18, 15, 0.34) 0%,
      rgba(20, 18, 15, 0.12) 18%,
      rgba(20, 18, 15, 0) 40%,
      rgba(20, 18, 15, 0.35) 74%,
      rgba(20, 18, 15, 0.92) 94%,
      var(--ink) 100%
    );
  }

  .hero__inner {
    padding-top: var(--s-400);
  }

  /* 12px uppercase at 0.16em is a caption. This line is the charity number —
     the one claim on the page a stranger can go and verify — and the audience
     skews older. It gets read at 14px. */
  .hero__eyebrow {
    font-size: var(--text-sm);
    line-height: var(--lh-sm);
    letter-spacing: 0.12em;
  }

  /* Off the two-column layout the headline has the full column, so the desktop
     480px cap only makes it break early. The accent takes its own line by
     instruction rather than by luck, which is what lets the type grow: the
     size is now set by the longest single line, not by where the browser
     happens to wrap two. */
  .hero__title {
    max-width: none;
    font-size: clamp(1.95rem, 7.8vw, 3rem);
    letter-spacing: -0.02em;
  }

  .hero__accent {
    display: block;
  }

  .hero__sub {
    margin-top: var(--s-600);
    font-size: var(--text-base);
    line-height: var(--lh-base);
  }

  .hero__actions {
    margin-top: var(--s-400);
  }

  .hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 48px;
  }
}

@media (max-width: 560px) {
  /* Two half-width buttons at phone width give both a cramped label and
     neither any priority. Stacked, the donate button is the full width of the
     thumb and it is unambiguously first. */
  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-100);
  }
}

/* --------------------------------------------------------------------------
   2. The situation
   -------------------------------------------------------------------------- */

.situation__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-700);
  align-items: start;
}

.situation__title {
  margin-top: var(--s-200);
}

.situation__media {
  margin: var(--s-800) auto 0;
}

.situation__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-2xl);
}

.situation__media figcaption {
  max-width: var(--measure-prose);
  margin-top: var(--s-300);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .situation__grid {
    grid-template-columns: 1fr;
    gap: var(--s-400);
  }

  .situation__media {
    margin-top: var(--s-600);
  }
}

/* --------------------------------------------------------------------------
   3. Tagline reveal
   -------------------------------------------------------------------------- */

.tagline {
  padding-block: var(--s-900);
}

.tagline__block {
  max-width: var(--measure-display);
  margin: 0 auto;
}

.tagline__text {
  font-size: var(--text-6xl);
  line-height: var(--lh-6xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Words start muted only when JS can light them. Without JS they stay ink. */
.tagline__word {
  color: var(--ink);
  transition: color var(--dur-slow) var(--ease);
}

/* 0.55 is the lowest alpha that still clears 3:1 against the sage sheet behind
   this section, so the unlit words are readable before the scroll lights them
   (WCAG 1.4.3 large text). Anything dimmer looked better and failed. */
html.js .tagline__word {
  color: rgba(26, 24, 21, 0.55);
}

html.js .tagline__word.is-lit {
  color: var(--ink);
}

.tagline__cite {
  display: block;
  margin-top: var(--s-500);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .tagline__text {
    font-size: var(--text-4xl);
    line-height: var(--lh-4xl);
  }
}

/* --------------------------------------------------------------------------
   4. Three children
   -------------------------------------------------------------------------- */

.children__head {
  padding-bottom: var(--s-600);
}

.children__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-400);
}

.child__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Outer radius 16px with 8px of internal padding, so the image inside
     resolves to 8px per the nested radius formula. */
  padding: var(--s-75);
  background-color: var(--sage-tint);
  border: 1px solid transparent;
  border-radius: var(--r-2xl);
  color: var(--ink);
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.child__link:hover {
  background-color: var(--sage);
  border-color: var(--rule-on-sage);
  transform: translateY(-4px);
  color: var(--ink);
}

.child__link:active {
  transform: translateY(1px);
}

.child__media {
  margin: 0;
}

.child__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.child__name {
  margin-top: var(--s-400) !important;
  padding-inline: var(--s-200);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
}

.child__born {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.child__link:hover .child__born {
  color: var(--ink-soft);
}

.child__story {
  flex: 1;
  margin-top: var(--s-300) !important;
  padding-inline: var(--s-200);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

.child__more {
  margin-top: var(--s-400) !important;
  padding: var(--s-0) var(--s-200) var(--s-200);
  color: var(--sage-deep);
}

.child__link:hover .child__more {
  color: var(--ink);
}

.child__link:hover .child__more svg {
  transform: translateX(var(--s-50));
}

.children__all {
  margin-top: var(--s-600);
  padding-top: var(--s-400);
  border-top: 1px solid var(--rule);
}

@media (max-width: 900px) {
  .children__grid {
    grid-template-columns: 1fr;
  }
}

/* Empty state for a child whose photograph has not been supplied yet.
   A composed slot, not a blank panel, and never a photo of a different child. */

/* --------------------------------------------------------------------------
   5. What your money buys
   -------------------------------------------------------------------------- */

.give__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-300);
  margin-top: var(--s-700) !important;
}

.give__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-75);
  padding: var(--s-300);
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2xl);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.give__item:hover {
  background-color: var(--sage);
  border-color: var(--rule-on-sage);
}

.give__amount {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.give__thing {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

.give__year {
  margin-top: var(--s-600);
  padding: var(--s-600);
  background-color: var(--sage);
  /* Outer 24px with 24px of padding: the formula only applies under a 32px gap
     when the result stays above 2, so inner blocks here sit square. */
  border-radius: var(--r-3xl);
}

.give__year-title {
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
}

.give__year-list {
  margin: var(--s-400) 0 var(--s-500);
  display: grid;
  gap: var(--s-300);
  max-width: var(--measure-display);
}

.give__year-row {
  padding-top: var(--s-300);
  border-top: 1px solid var(--rule-on-sage);
}

.give__year-row dt,
.give__year-row dd {
  margin: 0;
  display: inline;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--ink);
}

@media (max-width: 900px) {
  .give__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .give__grid {
    grid-template-columns: 1fr;
  }

  .give__year {
    padding: var(--s-400);
  }
}

/* --------------------------------------------------------------------------
   6. Two programmes
   -------------------------------------------------------------------------- */

.programmes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-600);
  margin-top: var(--s-600);
}

.programme__media {
  margin: 0 0 var(--s-300);
}

.programme__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--sage-tint);
  border-radius: var(--r-2xl);
}

.programme__title {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
}

.programme__body {
  margin: var(--s-400) 0 var(--s-400) !important;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .programmes__grid {
    grid-template-columns: 1fr;
    gap: var(--s-600);
  }
}

/* --------------------------------------------------------------------------
   7. Alain
   -------------------------------------------------------------------------- */

.founder__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: var(--s-700);
  align-items: center;
}

.founder__media {
  margin: 0;
}

.founder__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-2xl);
}

.founder__title {
  margin-top: var(--s-200);
}

.founder__quote {
  max-width: var(--measure-display);
  margin: var(--s-500) 0 0;
  padding-top: var(--s-400);
  border-top: 1px solid var(--rule-on-sage);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  color: var(--ink);
}

.founder__sign {
  margin: var(--s-400) 0 var(--s-300);
}

.founder__sign img {
  width: auto;
  height: 56px;
  /* The signature scan has a white ground. Multiply drops it into the sage. */
  mix-blend-mode: multiply;
}

.founder .link-arrow {
  color: var(--sage-deep);
}

.founder .link-arrow:hover {
  color: var(--ink);
}

@media (max-width: 900px) {
  .founder__grid {
    grid-template-columns: 1fr;
    gap: var(--s-500);
  }
}

/* --------------------------------------------------------------------------
   8. FAQ
   -------------------------------------------------------------------------- */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s-700);
  align-items: start;
}

.faq__title {
  margin-top: var(--s-200);
}

.faq__item {
  border-top: 1px solid var(--rule);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq__item h3 {
  margin: 0;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-300);
  width: 100%;
  padding: var(--s-300) var(--s-0);
  background-color: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.faq__q:hover {
  color: var(--sage-deep);
}

/* A plus that rotates into a minus. Drawn in CSS so there is no icon to load. */
.faq__sign {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: currentColor;
  border-radius: var(--r-full);
  transition: transform var(--dur) var(--ease);
}

.faq__sign::before {
  width: 16px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.faq__sign::after {
  width: 1.5px;
  height: 16px;
  transform: translate(-50%, -50%);
}

.faq__q[aria-expanded="true"] .faq__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}

.faq__a[data-open="true"] {
  grid-template-rows: 1fr;
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p {
  max-width: var(--measure-prose);
  padding-bottom: var(--s-300);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .faq__grid {
    grid-template-columns: 1fr;
    gap: var(--s-400);
  }
}

/* --------------------------------------------------------------------------
   9. Final CTA
   -------------------------------------------------------------------------- */

.final__head {
  max-width: var(--measure-display);
  padding-bottom: var(--s-800);
}

.final__sub {
  margin: var(--s-500) 0 var(--s-600) !important;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--ink-soft);
}

.final__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-400);
}

.final__card {
  padding: var(--s-400);
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2xl);
}

.final__card-title {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
}

.final__card-body {
  margin-top: var(--s-200);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

.bank {
  margin: var(--s-200) 0 0;
  display: grid;
  gap: var(--s-75);
}

.bank > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-200);
  padding-top: var(--s-75);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}

.bank dt {
  color: var(--ink-muted);
  white-space: nowrap;
}

.bank dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.final__address {
  margin-top: var(--s-200);
  font-style: normal;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-soft);
}

.giftaid {
  margin: var(--s-300) 0 0;
  padding-top: var(--s-300);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .final__grid {
    grid-template-columns: 1fr;
  }

  .final__head {
    padding-bottom: var(--s-600);
  }
}

/* WordPress shell. The island nav is position:fixed, so every page except
   the full-bleed home hero needs a spacer. WordPress puts `home` on the
   front page, not `front-page`. GeneratePress's own header is replaced in
   PHP; hide it if a plugin puts it back. */
#masthead {
  display: none;
}

body:not(.home) {
  padding-top: calc(var(--nav-top) + var(--nav-h) + var(--s-400));
}

body.home {
  padding-top: 0;
}

body.home .site,
body.home .site-content,
body.home .arnf-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.home .hero {
  margin-top: 0;
}

body.admin-bar .arnf-nav-wrap {
  top: calc(var(--nav-top) + 32px);
}

@media (max-width: 782px) {
  body.admin-bar .arnf-nav-wrap {
    top: calc(var(--nav-top) + 46px);
  }
}

.arnf-nav-wrap a,
.arnf-nav-wrap a:hover,
.arnf-sheet a,
.arnf-sheet a:hover {
  text-decoration: none;
}

/* ==========================================================================
   Inner pages (Education & Health, Contact) — ported from the ARNF Design
   deliverable: education.html + contact-us.html, styles.css sections 10-12
   and contact.css. Tokens, nav, hero base and footer come from above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   10. Page header (inner pages)
   A shorter version of the hero for pages that are not the front door: same
   photograph-is-the-section language, one screen tall instead of near-full,
   one action instead of two.
   -------------------------------------------------------------------------- */

.hero--page {
  min-height: min(80vh, 760px);
  padding-block: var(--s-800) var(--s-700);
}

@media (max-width: 900px) {
  .hero--page {
    --hero-band: clamp(200px, 32vh, 300px);
  }
}

/* --------------------------------------------------------------------------
   11. Stat row
   Pulls a figure out of running prose so it reads at a glance. Sage-tint
   chips, same formula as the give-item cards but smaller and figure-led.
   -------------------------------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-200);
  max-width: var(--measure-prose);
  margin-top: var(--s-400);
}

.stat-item {
  padding: var(--s-300);
  background-color: var(--sage-tint);
  border-radius: var(--r-xl);
}

.stat-num {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sage-deep);
}

.stat-label {
  margin-top: var(--s-25);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

@media (max-width: 600px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   12. School feature
   Namo Buddha School on the education page: the same photo-beside-copy
   formula as the founder section, on a paper ground with a stat chip rather
   than a quote.
   -------------------------------------------------------------------------- */

.school__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--s-700);
  align-items: center;
}

.school__media {
  margin: 0;
}

.school__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-2xl);
}

.school__title {
  margin-top: var(--s-200);
}

.school__stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-100);
  margin-top: var(--s-500) !important;
  padding: var(--s-200) var(--s-300);
  background-color: var(--sage-tint);
  border-radius: var(--r-lg);
}

.school__stat-num {
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
  color: var(--sage-deep);
}

.school__stat-label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .school__grid {
    grid-template-columns: 1fr;
    gap: var(--s-500);
  }
}


/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-700);
  align-items: start;
}

.contact__heading {
  margin: 0 0 var(--s-300);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
}

/* --------------------------------------------------------------------------
   Form — language matches the ghost button derivation: hairline rule,
   paper ground, sage deep focus. Inputs sit on a paper section so the
   border is the separator, not a shadow.
   -------------------------------------------------------------------------- */

.form-note {
  margin: 0 0 var(--s-300);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

.field {
  margin-top: var(--s-300);
}

.field:first-of-type {
  margin-top: 0;
}

.field label {
  display: block;
  margin-bottom: var(--s-50);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 700;
  color: var(--ink);
}

.field__hint {
  margin: var(--s-25) 0 0;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--s-100) var(--s-200);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  appearance: none;
}

.field textarea {
  min-height: 168px;
  resize: vertical;
}

.field select {
  padding-right: var(--s-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6 L8 10 L12 6' stroke='%236b655c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-200) center;
  background-size: 16px 16px;
  cursor: pointer;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-muted);
}

/* Invalid: full ink stroke plus inset to reach 2px without layout shift */
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.field__error {
  display: none;
  margin: var(--s-50) 0 0;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  color: var(--ink);
}

.field[data-invalid="true"] .field__error {
  display: block;
}

/* --------------------------------------------------------------------------
   Error summary — GOV style, in system: paper ground, full 2px ink border
   all round, never a single side, list style restored for the links.
   -------------------------------------------------------------------------- */

.error-summary {
  padding: var(--s-300);
  background-color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-400);
}

.error-summary[hidden] {
  display: none !important;
}

.error-summary__title {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
}

.error-summary__list {
  margin: var(--s-200) 0 0;
  padding-left: var(--s-300);
  list-style: disc;
}

.error-summary__list li + li {
  margin-top: var(--s-75);
}

.error-summary__list a {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-200);
  margin-top: var(--s-400);
}

.form-footnote {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

/* Submit is not the donate action, so it does not use sage deep.
   Ink fill plus ink soft hover keeps the one action colour legible. */
.btn--ink {
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--ink:hover {
  background-color: var(--ink-soft);
  border-color: var(--ink-soft);
  color: var(--paper);
}

.btn--ink:disabled {
  opacity: 0.55;
  cursor: default;
}

.btn--ink:active {
  transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   Success — tinted card, paper icon chip, ink text
   -------------------------------------------------------------------------- */

.form-success {
  padding: var(--s-500);
  background-color: var(--sage-tint);
  border-radius: var(--r-2xl);
}

.form-success[hidden] {
  display: none !important;
}

.form-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  color: var(--sage-deep);
}

.form-success__title {
  margin: var(--s-300) 0 0;
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
}

.form-success__body {
  max-width: 44ch;
  margin: var(--s-200) 0 0;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

.form-success .btn {
  margin-top: var(--s-400);
}

/* --------------------------------------------------------------------------
   Details rail
   -------------------------------------------------------------------------- */

.contact__aside {
  display: grid;
  gap: var(--s-400);
  align-content: start;
}

.contact-block {
  padding-top: var(--s-300);
  border-top: 1px solid var(--rule);
}

.contact-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.contact-block__title {
  margin: 0 0 var(--s-200);
}

.contact-list {
  font-size: var(--text-base);
  line-height: var(--lh-base);
}

.contact-list li + li {
  margin-top: var(--s-75);
}

.contact-list a {
  word-break: break-word;
}

.contact-address {
  font-style: normal;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

.contact-meta {
  margin: 0;
  padding-top: var(--s-300);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Help close — every page ends at the donate handoff
   -------------------------------------------------------------------------- */

.help__inner {
  max-width: var(--measure-display);
}

.help__body {
  max-width: var(--measure-prose);
  margin: var(--s-300) 0 0;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--ink-soft);
}

.help__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-300);
  margin-top: var(--s-500);
}

/* --------------------------------------------------------------------------
   Responsive — same 900px collapse as founder and programmes
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--s-500);
  }

  .form-success {
    padding: var(--s-400);
  }

  .help__body {
    font-size: var(--text-base);
    line-height: var(--lh-base);
  }
}

@media (max-width: 560px) {
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   WordPress bridge
   The design pages are full-bleed, so they release the GeneratePress
   container the same way the home page does.
   -------------------------------------------------------------------------- */

body:has(.arnf-design) {
  padding-top: 0;
}

body:has(.arnf-design) .site,
body:has(.arnf-design) .site-content,
body:has(.arnf-design) .arnf-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

body:has(.arnf-design) .hero {
  margin-top: 0;
}

/* Fluent Forms markup wearing the design's field language. The form itself is
   P7's (validation, honeypot, SMTP notifications); only its skin is here. */
.arnf-design .fluentform .ff-el-group {
  margin: 0 0 var(--s-300);
}

.arnf-design .fluentform .ff-el-input--label label {
  display: block;
  margin-bottom: var(--s-50);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 700;
  color: var(--ink);
}

.arnf-design .fluentform .ff-el-input--label.ff-el-is-required label::after {
  content: "";
}

.arnf-design .fluentform .ff-el-form-control {
  width: 100%;
  padding: var(--s-100) var(--s-200);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: none;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  appearance: none;
}

.arnf-design .fluentform textarea.ff-el-form-control {
  min-height: 168px;
  resize: vertical;
}

.arnf-design .fluentform .ff-el-form-control:hover {
  border-color: var(--ink-muted);
}

/* Fluent Forms ships its own `outline: none` on form controls, which beats the
   global :focus-visible ring on specificity and left the whole contact form
   with no visible focus at all (P8, defect D-011). Stated here rather than
   fought elsewhere. :focus, not :focus-visible — a text field that has the
   caret should always say so. */
.arnf-design .fluentform .ff-el-form-control:focus,
.arnf-design .fluentform .ff-el-form-control:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 2px;
  border-color: var(--sage-deep);
}

.arnf-design .fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.arnf-design .fluentform .ff-el-is-error .error,
.arnf-design .fluentform .text-danger {
  margin: var(--s-50) 0 0;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  color: var(--ink);
}

.arnf-design .fluentform .ff-el-help-message {
  margin: var(--s-25) 0 0;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

/* Submit is not the donate action, so it takes the ink fill, not sage deep. */
.arnf-design .fluentform .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-200) var(--s-400);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1;
  font-weight: 700;
  color: var(--paper);
  background-color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.arnf-design .fluentform .ff-btn-submit:hover {
  background-color: var(--ink-soft);
  border-color: var(--ink-soft);
  color: var(--paper);
}

.arnf-design .fluentform .ff-message-success {
  padding: var(--s-500);
  background-color: var(--sage-tint);
  border: 0;
  border-radius: var(--r-2xl);
  color: var(--ink);
}

/* The click-to-load map keeps P7's behaviour on the redesigned page. */
.arnf-design .arnf-embed {
  border-radius: var(--r-2xl);
  overflow: hidden;
}

/* Slots the deliverable carried as inline styles, moved into the sheet so the
   values stay out of the ACF fields. */
.arnf-design .hero__sub p + p {
  margin-top: var(--s-300);
}

.school__prose {
  margin-top: var(--s-300);
}

.contact__aside > .eyebrow {
  margin: 0 0 var(--s-200);
}

/* ==========================================================================
   P6 — Letters index and single letter
   Ported from the ARNF Design deliverable (blog.css, blog.html,
   post-earthquake-25-jan-2016.html). Tokens, nav, footer, buttons and reveal
   all come from the sheet above; this section owns only the letter
   typography, the earlier-letters list and the reading rule.

   These are the only two surfaces that open on paper instead of a
   photograph: a letter arrives as words, not as a cover image.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The spine
   Both pages are read, not scanned, so everything that carries words sits on
   one centred column rather than hugging the left edge of a 1200px container.
   The column is wider than the prose measure so a heading and a photograph
   can breathe past the text without breaking the alignment.
   -------------------------------------------------------------------------- */

.spine {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Page head
   No hero band. The nav is light glass from the first pixel (data-nav-light
   on <body>), so the head only has to clear the floating bar.
   -------------------------------------------------------------------------- */

.page-head {
  padding-top: calc(var(--nav-top) + var(--nav-h) + var(--s-700));
  padding-bottom: var(--s-600);
  background-color: var(--paper);
}

.page-head__title {
  font-size: clamp(var(--text-4xl), 5.2vw, var(--text-6xl));
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.page-head__sub {
  max-width: var(--measure-prose);
  margin-top: var(--s-400) !important;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Dateline
   A hairline rule with the date at one end and what the thing is at the
   other. It replaces a decorative label above a heading: everything on this
   line is information the reader needs to place the letter in time.
   -------------------------------------------------------------------------- */

.dateline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-200);
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-100);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dateline time {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   The opened letter
   The index does not offer a menu of five links; the newest letter is
   already open on the page, at reading measure, in Alain's own words.
   -------------------------------------------------------------------------- */

.opened {
  padding-block: var(--s-500) var(--s-900);
  background-color: var(--paper);
}

.opened__inner {
  max-width: none;
}

/* The rule and the date run the spine so this section ends on the same right
   edge as the list below it; only the words are held to reading measure. */
.opened__title,
.opened__body,
.opened__more {
  max-width: var(--measure-prose);
}

.opened__title {
  margin-top: var(--s-400);
  font-size: clamp(var(--text-3xl), 3.6vw, var(--text-5xl));
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.opened__body {
  margin-top: var(--s-500);
  color: var(--ink-soft);
  line-height: 1.7;
}

.opened__body p + p {
  margin-top: var(--s-300);
}

/* The salutation is the one line that tells a stranger this is a letter and
   not a press release, so it gets to sit on its own before the prose. */
.opened__salutation {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  color: var(--ink);
}

.opened__more {
  margin-top: var(--s-500);
}

/* The photograph arrives the way one arrives in an envelope: after the words,
   not before them. It runs the spine while the prose stays at measure, which
   is the one place the two widths are meant to differ. */
.opened__media {
  margin: var(--s-500) 0 0;
  padding: var(--s-100);
  background-color: var(--sage-tint);
  border-radius: var(--r-2xl);
}

.opened__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.opened__media figcaption {
  max-width: var(--measure-prose);
  margin-top: var(--s-200);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Earlier letters
   A rule-separated list, not a card grid. Date column, title, one real
   opening line. The whole row is the link.
   -------------------------------------------------------------------------- */

.letters {
  padding-block: var(--s-800);
  background-color: var(--sage-tint);
}

.letters__title {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}

.letters__list {
  margin-top: var(--s-400);
  border-top: 1px solid var(--rule-on-sage);
}

.letters__row {
  border-bottom: 1px solid var(--rule-on-sage);
}

.letters__link {
  display: grid;
  grid-template-columns: 140px 150px minmax(0, 1fr) 40px;
  gap: var(--s-300);
  align-items: start;
  padding: var(--s-500) var(--s-200);
  margin-inline: calc(var(--s-200) * -1);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-lg);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.letters__link:hover {
  background-color: var(--sage);
  color: var(--ink);
}

.letters__link:active {
  transform: scale(0.995);
}

.letters__date {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}

.letters__link:hover .letters__date {
  color: var(--ink-soft);
}

/* The thumbnail is a mat-and-image pair on the same nested-radius formula the
   child cards use: 8px of tint around a 8px image inside a 16px container.
   It sits at a fixed 140px so four rows of different crops still line up. */
.letters__thumb {
  margin: 0;
  padding: var(--s-75);
  background-color: var(--paper);
  border-radius: var(--r-2xl);
  transition: background-color var(--dur) var(--ease);
}

.letters__link:hover .letters__thumb {
  background-color: var(--sage-tint);
}

.letters__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: var(--r-lg);
}

.letters__name {
  display: block;
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.letters__line {
  display: block;
  max-width: var(--measure-prose);
  margin-top: var(--s-100);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

/* The arrow is the only moving part in the row: it travels the width of its
   own column on hover, which is enough to read as "this opens something"
   without borrowing the lift that belongs to the child cards. */
.letters__arrow {
  justify-self: end;
  align-self: center;
  color: var(--sage-deep);
  transition: transform var(--dur) var(--ease);
}

.letters__link:hover .letters__arrow {
  transform: translateX(6px);
}

@media (max-width: 720px) {
  .letters__link {
    grid-template-columns: 88px minmax(0, 1fr) 32px;
    gap: var(--s-200);
    padding-block: var(--s-400);
  }

  .letters__date {
    grid-column: 1 / -1;
    margin-bottom: var(--s-100);
  }

  .letters__thumb {
    padding: var(--s-50);
    border-radius: var(--r-xl);
  }

  .letters__thumb img {
    aspect-ratio: 1 / 1;
  }

  .letters__name {
    font-size: var(--text-xl);
    line-height: var(--lh-xl);
  }
}

/* --------------------------------------------------------------------------
   Reading rule
   A hairline that fills as the letter is read. The letters run to several
   thousand words, so how much is left is genuinely useful, and it is the
   only thing this page animates that the reveal does not.
   -------------------------------------------------------------------------- */

.reading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 70;
  background-color: transparent;
  pointer-events: none;
}

/* Neutral, not brand. Sage-deep as a fill is reserved for the Donate action
   and a progress rule is not an echo of it, but plain sage is 2.63:1 on paper
   and a non-text indicator needs 3:1 to be seen at all. Ink-muted is 5.49:1
   and keeps the one brand colour on the one button. */
.reading__bar {
  height: 100%;
  width: 100%;
  background-color: var(--ink-muted);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {
  .reading {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Letter header
   Title first, photograph second. On the site's other pages the photograph
   is the section; here the words arrived first and the picture follows,
   because that is the order a letter is read in.
   -------------------------------------------------------------------------- */

.letter-head {
  padding-top: calc(var(--nav-top) + var(--nav-h) + var(--s-700));
  padding-bottom: var(--s-700);
  background-color: var(--paper);
}

.letter-head__title {
  margin-top: var(--s-400);
  font-size: clamp(var(--text-4xl), 5.4vw, var(--text-6xl));
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.letter-head__standfirst {
  max-width: var(--measure-prose);
  margin-top: var(--s-300);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  color: var(--ink-muted);
}

.letter-head__media {
  max-width: 660px;
  margin: var(--s-700) 0 0;
}

/* The architect's drawing is 660px of artwork. Blowing it up to the full
   column softened it and the 16:9 crop took the roofline off, so it ships at
   its own size and its own ratio, on a sage mat that gives its white sky an
   edge to stop against. */
.letter-head__media img {
  width: 100%;
  border-radius: var(--r-lg);
}

/* The drawing has its own pale sky, which would bleed into the paper ground
   with nothing to stop it. The sage mat is the same photo-mat role the system
   already gives the brand colour, and the caption sits on the mat with it. */
.letter-head__media {
  padding: var(--s-100) var(--s-100) var(--s-200);
  background-color: var(--sage-tint);
  border-radius: var(--r-2xl);
}

.letter-head__media figcaption {
  max-width: var(--measure-prose);
  margin-top: var(--s-200);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Letter body
   Alain's words, verbatim, including his l/I substitutions and his
   spelling. PRODUCT.md is explicit that this text is evidence, not copy to
   improve, so nothing here rewrites, tidies or subheads it. The only
   structure is his own: the two lines he wrote as headings, the block he
   set as a quotation, and the pauses he left between passages.
   -------------------------------------------------------------------------- */

.letter {
  padding-block: var(--s-500) var(--s-900);
  background-color: var(--paper);
}

.letter__body {
  max-width: var(--measure-prose);
  color: var(--ink-soft);
  line-height: 1.75;
}

.letter__body p + p {
  margin-top: var(--s-300);
}

.letter__salutation {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  color: var(--ink);
}

/* His own blank lines. In the original these separate one thought from the
   next; they survive as space rather than as a glyph. */
.letter__body .is-break {
  margin-top: var(--s-600);
}

/* The two lines Alain set as headings in the letter itself. They are his
   words promoted to his own structure — nothing has been written for him. */
.letter__heading {
  margin-top: var(--s-800);
  padding-top: var(--s-400);
  border-top: 1px solid var(--rule);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  color: var(--ink);
}

.letter__heading + p {
  margin-top: var(--s-400);
}

/* The passage he set in quotation marks near the close. It is lifted in
   place, not duplicated as a pull quote. */
.letter__quote {
  margin: var(--s-700) 0 0;
  padding-left: var(--s-400);
  border-left: 1px solid var(--sage);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  color: var(--ink);
}

.letter__quote p + p {
  margin-top: var(--s-300);
}

/* A photograph set into the running letter. It breaks the measure on purpose
   — the words stay at 620px, the picture takes the spine — so the page has a
   change of width to breathe on every few thousand words. */
.letter__figure {
  width: 100%;
  max-width: none;
  margin: var(--s-700) 0;
  padding: var(--s-100);
  background-color: var(--sage-tint);
  border-radius: var(--r-2xl);
}

.letter__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.letter__figure figcaption {
  max-width: var(--measure-prose);
  margin-top: var(--s-200);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

.letter__sign {
  margin-top: var(--s-600);
}

.letter__sign img {
  width: 200px;
  max-width: 60%;
  height: auto;
  mix-blend-mode: multiply;
}

.letter__sign figcaption {
  margin-top: var(--s-100);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

/* Historical note.
   The letter carries 2016 donation instructions with an address and bank
   line that are not the charity's current ones. The words stay verbatim, but
   they are boxed and dated so a donor cannot mistake them for today's
   details, and the current route sits directly underneath. */
.letter__historic {
  margin-top: var(--s-700);
  padding: var(--s-400);
  background-color: var(--sage-tint);
  border-radius: var(--r-2xl);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

.letter__historic-label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.letter__historic address {
  margin-top: var(--s-300);
  padding-top: var(--s-300);
  border-top: 1px solid var(--rule-on-sage);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-style: normal;
  color: var(--ink-muted);
}

.letter__historic .letter__historic-now {
  margin-top: var(--s-200);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Letter close — next letter, then the one action
   -------------------------------------------------------------------------- */

.close {
  padding-block: var(--s-800);
  background-color: var(--sage-tint);
}

/* On the index the close sits directly under a sage-tint section, so it
   takes the paper ground instead and the tint stays a separator. */
.close--paper {
  background-color: var(--paper);
}

.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-600);
  align-items: start;
}

.close__grid > div + div {
  padding-top: var(--s-600);
  border-top: 1px solid var(--rule-on-sage);
}

.close__label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 400;
}

.close__next {
  display: block;
  margin-top: var(--s-300);
  color: var(--ink);
  text-decoration: none;
}

.close__next-name {
  display: block;
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.close__next:hover .close__next-name {
  color: var(--sage-deep);
}

.close__ask {
  max-width: var(--measure-prose);
  margin-top: var(--s-500) !important;
  color: var(--ink-soft);
}

.close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-200);
  margin-top: var(--s-500) !important;
}

.close__all {
  margin-top: var(--s-500) !important;
}

@media (max-width: 720px) {
  .page-head,
  .letter-head {
    padding-top: calc(var(--nav-top) + var(--nav-h) + var(--s-500));
  }

  .opened,
  .letters,
  .letter,
  .close {
    padding-block: var(--s-600);
  }

  .letter-head__media img {
    border-radius: var(--r-lg);
  }

  .letter__figure {
    margin-block: var(--s-600);
  }

  .letter__figure img,
  .opened__media img {
    aspect-ratio: 4 / 3;
  }

  .letter__heading {
    margin-top: var(--s-600);
  }

  /* Header padding plus section padding stacked to 112px between the drawing
     and the first line of the letter, which is a chapter break, not a pause. */
  .letter-head {
    padding-bottom: var(--s-500);
  }
}

@media (max-width: 560px) {
  .letters__link {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  .letters__thumb {
    grid-column: 1 / -1;
    margin-bottom: var(--s-100);
  }

  .letters__thumb img {
    aspect-ratio: 4 / 3;
    object-position: 50% 24%;
  }
}

/* --------------------------------------------------------------------------
   Letter body from the editor
   the_content() emits plain <p>, <h2>, <blockquote> and <figure>; the
   deliverable hand-classed them. Mapping the elements keeps the same page
   without asking an editor to type class names (the P4 editor lock).
   -------------------------------------------------------------------------- */

.letter__body > h2,
.letter__body > h3,
.opened__body > h2 {
  margin-top: var(--s-800);
  padding-top: var(--s-400);
  border-top: 1px solid var(--rule);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  color: var(--ink);
}

.letter__body > h2 + p,
.letter__body > h3 + p {
  margin-top: var(--s-400);
}

.letter__body > blockquote {
  margin: var(--s-700) 0 0;
  padding-left: var(--s-400);
  border-left: 1px solid var(--sage);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  color: var(--ink);
}

.letter__body > blockquote p + p {
  margin-top: var(--s-300);
}

/* Images inside the running letter take the spine while the words stay at
   measure, which is the one place the two widths are meant to differ. */
.letter__body > figure,
.letter__body > .wp-block-image {
  width: 100%;
  max-width: none;
  margin: var(--s-700) 0;
  padding: var(--s-100);
  background-color: var(--sage-tint);
  border-radius: var(--r-2xl);
}

.letter__body > figure img,
.letter__body > .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

.letter__body > figure figcaption,
.letter__body > .wp-block-image figcaption {
  max-width: var(--measure-prose);
  margin-top: var(--s-200);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

.letter__body > ul,
.letter__body > ol {
  margin-top: var(--s-300);
  padding-left: var(--s-300);
  list-style: disc;
}

.letter__body > ol {
  list-style: decimal;
}

.letter__body li + li {
  margin-top: var(--s-100);
}

/* The archive list carries no thumbnail when the origin file is gone (D-003),
   so the row closes the gap rather than holding an empty mat. */
.letters__link--noimage {
  grid-template-columns: 140px minmax(0, 1fr) 40px;
}

@media (max-width: 720px) {
  .letters__link--noimage {
    grid-template-columns: minmax(0, 1fr) 32px;
  }
}

/* ==========================================================================
   P6 — Our Children listing and one child profile
   Ported from the ARNF Design deliverable (child.html, child-anish.html,
   styles.css sections 4a-4c, blog.css "Child profile"). The listing is paper
   with no photograph in the head, so the nav carries data-nav-light and stays
   light from the first pixel, the same as the letters surfaces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Listing head
   Type and chips, not a hero band. Centred, because fourteen faces follow and
   the head is a doorway rather than a column of reading.
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.children-head {
  text-align: center !important;
  padding-block: calc(var(--nav-top) + var(--nav-h) + var(--s-800)) var(--s-700);
  background-color: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.children-head__eyebrow {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.children-head__title {
  max-width: 34ch;
  margin-inline: auto;
  text-wrap: balance;
  text-align: center !important;
  margin-top: var(--s-300) !important;
  font-size: clamp(1.875rem, 4.2vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.children-head__intro {
  max-width: var(--measure-prose);
  margin-inline: auto;
  margin-top: var(--s-500) !important;
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

.children-head__intro p + p {
  margin-top: var(--s-300);
}

.children-head__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-100);
  margin-top: var(--s-500) !important;
  list-style: none;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--s-75) var(--s-200);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background-color: var(--sage-tint);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
}

.chip--accent {
  color: var(--ink);
  background-color: var(--paper);
  border-color: var(--sage);
}

/* --------------------------------------------------------------------------
   Listing grid
   One scroll, every child. 3-col > 2-col at 900px > 1-col at 600px. The card
   is the home page's child card, so only the grid and the empty portrait slot
   are new here.
   -------------------------------------------------------------------------- */

.children-listing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-400);
  list-style: none;
  padding: 0;
  margin: 0;
}

.children-listing__note {
  max-width: var(--measure-prose);
  margin-top: var(--s-700);
  padding-top: var(--s-300);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

/* D-003 leaves most profiles without a portrait. A composed slot holds the
   place so a photograph of a different child is never shown as this one. */
.child__placeholder {
  display: grid;
  place-items: center;
  place-content: center;
  gap: var(--s-75);
  aspect-ratio: 1 / 1;
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}

.child__initial {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: var(--text-5xl);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--sage-deep);
}

.child__initial-amp {
  font-size: var(--text-xl);
  line-height: 1;
  font-weight: 400;
  color: var(--ink-muted);
  margin-inline: 1px;
}

.child__placeholder-note {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  max-width: 16ch;
}

@media (max-width: 900px) {
  .children-head {
    padding-block: calc(var(--nav-top) + var(--nav-h) + var(--s-600)) var(--s-600);
  }

  .children-head__title {
    max-width: 12ch;
  }

  .children-listing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-300);
  }
}

@media (max-width: 600px) {
  .children-listing__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Child profile — head
   The reader clicked a name, so the first thing owed to them is the person,
   not a headline about him. The portrait is square and capped at 300px: at the
   full spine a face becomes a poster, and this page is not selling him.
   -------------------------------------------------------------------------- */

.profile__head {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--s-600);
  align-items: center;
  margin-top: var(--s-600);
}

.profile__portrait {
  margin: 0;
  padding: var(--s-100);
  background-color: var(--sage-tint);
  border-radius: var(--r-2xl);
}

.profile__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.profile__portrait figcaption {
  margin-top: var(--s-200);
  padding-inline: var(--s-50);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-muted);
}

/* A name is one or two words sharing the spine with a photograph, so it takes
   the head size down a step and "Pooja, Aniket and Rohan" still sets. */
.profile__title {
  margin-top: 0;
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
}

/* --------------------------------------------------------------------------
   Child profile — the next child
   Fourteen children is this charity's argument, so the end of one story is a
   door to the next one and should look like a door. The letters' archive row
   with the date column removed; the arrow travels, the row does not lift,
   because the lift stays reserved for the listing card.
   -------------------------------------------------------------------------- */

.nextchild {
  padding-block: var(--s-800);
  background-color: var(--sage-tint);
}

.nextchild__label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-muted);
}

.nextchild__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 40px;
  gap: var(--s-300);
  align-items: center;
  margin-top: var(--s-300);
  margin-inline: calc(var(--s-200) * -1);
  padding: var(--s-200);
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--rule-on-sage);
  border-radius: var(--r-lg);
  transition: background-color var(--dur) var(--ease);
}

.nextchild__row:hover {
  background-color: var(--sage);
  color: var(--ink);
}

/* On the tinted ground the mat is paper, so the thumbnail keeps an edge when
   the row itself goes sage on hover. */
.nextchild__thumb {
  display: block;
  padding: var(--s-75);
  background-color: var(--paper);
  border-radius: var(--r-xl);
  transition: background-color var(--dur) var(--ease);
}

.nextchild__row:hover .nextchild__thumb {
  background-color: var(--sage-tint);
}

.nextchild__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: var(--r-lg);
}

.nextchild__thumb .child__placeholder {
  gap: 0;
}

.nextchild__thumb .child__initial {
  font-size: var(--text-2xl);
}

.nextchild__thumb .child__placeholder-note {
  display: none;
}

.nextchild__name {
  display: block;
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nextchild__born {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.nextchild__line {
  display: block;
  max-width: var(--measure-prose);
  margin-top: var(--s-50);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-soft);
}

.nextchild__arrow {
  display: flex;
  justify-content: flex-end;
  color: var(--ink-muted);
}

.nextchild__arrow svg {
  transition: transform var(--dur) var(--ease);
}

.nextchild__row:hover .nextchild__arrow {
  color: var(--ink);
}

.nextchild__row:hover .nextchild__arrow svg {
  transform: translateX(6px);
}

.nextchild__all {
  margin-top: var(--s-400);
}

@media (max-width: 720px) {
  /* The portrait stops being a column. A 300px face beside the name in the
     ~340px left over set every longer name to three lines. */
  .profile__head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-400);
    margin-top: var(--s-500);
  }

  .profile__portrait {
    max-width: 300px;
    padding: var(--s-50);
    border-radius: var(--r-xl);
  }

  .nextchild {
    padding-block: var(--s-600);
  }

  .nextchild__row {
    grid-template-columns: 72px minmax(0, 1fr) 24px;
    gap: var(--s-200);
    align-items: start;
  }

  .nextchild__thumb {
    padding: var(--s-50);
    border-radius: var(--r-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nextchild__row,
  .nextchild__thumb,
  .nextchild__arrow,
  .nextchild__arrow svg {
    transition: none;
  }

  .nextchild__row:hover .nextchild__arrow svg {
    transform: none;
  }
}

/* ==========================================================================
   P6 — Rebuilding (renovation)
   Ported from the ARNF Design deliverable (renovation.html, styles.css
   sections 13-15). The hero, situation and section grounds are already here
   from the Education & Health port, so only Etay, the film and the close are
   new.

   The close keeps its own `rebuild-close` prefix: `.close` and `.close__grid`
   are already spoken for by the letters and the child profile, and two pages
   sharing a class name that means two different layouts is how one of them
   silently breaks later.
   ========================================================================== */

/* Alain's quoted passage takes the letters' blockquote language — a 1px sage
   hairline, the one place sage appears as a stroke and still not as text —
   rather than a card. The attribution carries the date, because a 2016
   sentence read as a 2026 one would be the most damaging thing on this page. */
.etay__quote {
	max-width: var(--measure-prose);
	margin: var(--s-500) 0 0;
	padding-left: var(--s-400);
	border-left: 1px solid var(--sage);
}

.etay__quote p {
	font-size: var(--text-xl);
	line-height: var(--lh-xl);
	color: var(--ink);
}

.etay__quote p + p {
	margin-top: var(--s-300);
}

.etay__quote figcaption {
	margin-top: var(--s-300);
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.etay__quote time {
	font-variant-numeric: tabular-nums;
}

/* The architect's drawing is line artwork with a pale sky of its own, so it
   mats in Sage Tint and the caption sits on the mat with it. */
.etay__drawing {
	max-width: 660px;
	margin: var(--s-800) auto 0;
	padding: var(--s-100) var(--s-100) var(--s-200);
	background-color: var(--sage-tint);
	border-radius: var(--r-2xl);
}

.etay__drawing img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-lg);
}

.etay__drawing figcaption {
	max-width: var(--measure-prose);
	margin-top: var(--s-200);
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--ink-muted);
}

@media (max-width: 720px) {
	.etay__quote {
		padding-left: var(--s-300);
	}

	.etay__drawing {
		margin-top: var(--s-600);
		padding: var(--s-50) var(--s-50) var(--s-100);
		border-radius: var(--r-xl);
	}
}

/* The film. Flat like everything else — a hairline and a radius, no shadow.
   The deliverable's bare iframe is P7's click-to-load embed here, so the
   frame styles `.arnf-embed` rather than a player. */
.film__title {
	max-width: var(--measure-display);
}

.film__frame {
	margin: var(--s-600) 0 0;
}

.arnf-rebuilding .film__frame .arnf-embed {
	aspect-ratio: 16 / 9;
	border: 1px solid var(--rule-on-sage);
	border-radius: var(--r-2xl);
}

.film__frame figcaption {
	max-width: var(--measure-prose);
	margin-top: var(--s-300);
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--ink-muted);
}

@media (max-width: 720px) {
	.film__frame {
		margin-top: var(--s-500);
	}
}

/* One action, beside the route to the long-form evidence. The letter block is
   a link, not decoration: it carries a real date, a real title and the first
   thing a sceptical reader wants, which is who watches the money. */
.rebuild-close__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: var(--s-700);
	align-items: start;
}

.rebuild-close__sub {
	max-width: var(--measure-prose);
	margin-top: var(--s-500) !important;
	color: var(--ink-soft);
}

.rebuild-close__head .btn {
	margin-top: var(--s-500);
}

.rebuild-close__letter {
	display: block;
	padding: var(--s-400);
	color: var(--ink);
	text-decoration: none;
	background-color: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--r-2xl);
	transition: border-color var(--dur) var(--ease);
}

.rebuild-close__letter:hover {
	border-color: var(--sage);
}

.rebuild-close__letter-date {
	display: block;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
}

.rebuild-close__letter-title {
	display: block;
	margin-top: var(--s-200);
	font-size: var(--text-2xl);
	line-height: var(--lh-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.rebuild-close__letter-body {
	display: block;
	margin-top: var(--s-200);
	font-size: var(--text-base);
	line-height: var(--lh-base);
	color: var(--ink-soft);
}

.rebuild-close__letter-cue {
	display: inline-flex;
	align-items: center;
	gap: var(--s-75);
	margin-top: var(--s-300);
	font-size: var(--text-base);
	line-height: var(--lh-base);
	font-weight: 700;
	color: var(--sage-deep);
}

.rebuild-close__letter-cue svg {
	transition: transform var(--dur) var(--ease);
}

.rebuild-close__letter:hover .rebuild-close__letter-cue svg {
	transform: translateX(6px);
}

@media (max-width: 900px) {
	.rebuild-close__grid {
		grid-template-columns: 1fr;
		gap: var(--s-500);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rebuild-close__letter,
	.rebuild-close__letter-cue svg {
		transition: none;
	}

	.rebuild-close__letter:hover .rebuild-close__letter-cue svg {
		transform: none;
	}
}

/* ==========================================================================
   P6 - Donations (/help-us/donations/)
   Ported from the ARNF Design deliverable (donations.html, donate.css).
   Everything is scoped to .arnf-give because Home already owns a .bank block
   with a different structure, and .year, .copy and .door are common words.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page head
   The lead paragraph runs at full body size rather than the muted sub used on
   the letters index: this one line carries the page's whole argument, so it is
   read, not skimmed past.
   -------------------------------------------------------------------------- */

.arnf-give .page-head__sub--lead {
	max-width: var(--measure-display);
	font-size: var(--text-xl);
	line-height: 1.6;
	color: var(--ink-soft);
}

.arnf-give .page-head--give {
	padding-bottom: var(--s-500);
}

/* --------------------------------------------------------------------------
   1. The three doors
   Not a card grid. One hairline runs across the top and the three columns hang
   off it, divided by 1px rules. Cards would make three equal containers of very
   unequal content look ragged, and a boxed cheque address always reads as the
   optional route. The three are equal in width and weight; only their material
   differs - an action, an address, a dataset.
   -------------------------------------------------------------------------- */

/* Tighter than the standard --s-900 section step. The page head and this
   section are one continuous argument, and at the full step the Donate button
   fell just below a 900px fold. */
.arnf-give .doors {
	padding-top: var(--s-500);
}

.arnf-give .doors__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-100) var(--s-400);
	align-items: baseline;
	justify-content: space-between;
}

.arnf-give .doors__grid {
	margin-top: var(--s-500);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--rule);
}

.arnf-give .door {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--s-500) var(--s-500) var(--s-600);
	border-left: 1px solid var(--rule);
}

/* The three routes have bodies of two, three and four lines, so left to
   themselves the Donate button, the address and the bank table all start at a
   different height and the row reads as three loose cards again. Subgrid puts
   the four parts on shared rows. Without subgrid the flex column still
   stands. */
@supports (grid-template-rows: subgrid) {
	.arnf-give .doors__grid {
		grid-template-rows: auto auto auto auto;
	}

	.arnf-give .door {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
	}
}

.arnf-give .door:first-child {
	padding-left: 0;
	border-left: 0;
}

.arnf-give .door:last-child {
	padding-right: 0;
}

.arnf-give .door__title {
	margin: 0;
	font-size: var(--text-2xl);
	line-height: var(--lh-2xl);
	letter-spacing: -0.02em;
}

/* Sits below the title, never above it: it is the route's own fact - how long
   it takes - not a label announcing the heading. */
.arnf-give .door__when {
	margin: var(--s-50) 0 0;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--ink-muted);
}

.arnf-give .door__body {
	margin: var(--s-300) 0 0;
	color: var(--ink-soft);
}

.arnf-give .door__action {
	margin-top: var(--s-400);
}

.arnf-give .door__cta {
	width: 100%;
}

.arnf-give .door__aside {
	margin: var(--s-200) 0 0;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--ink-muted);
}

/* The address is a thing to be copied onto an envelope, so it gets a fill of
   its own - sage tint as a surface, ink on top. */
.arnf-give .door__address {
	margin: 0;
	padding: var(--s-300);
	background-color: var(--sage-tint);
	border-radius: var(--r-lg);
	color: var(--ink);
	font-style: normal;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   2. Bank details
   A real dataset: label above value, hairline between rows, tabular numerals
   so the digit columns line up, and a copy control per row because these are
   the figures a donor retypes into a banking app.
   -------------------------------------------------------------------------- */

.arnf-give .bank {
	display: block;
	margin: 0;
}

.arnf-give .bank__row {
	/* Home's .bank lays its rows out as a flex line, label left and value
	   right. Here the label sits above its value, so the row is a block. */
	display: block;
	padding: var(--s-200) 0;
	border-top: 1px solid var(--rule);
	font-size: var(--text-base);
	line-height: var(--lh-base);
}

.arnf-give .bank__row:first-child {
	padding-top: 0;
	border-top: 0;
}

.arnf-give .bank__row dt {
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--ink-muted);
	white-space: normal;
}

.arnf-give .bank__row dd {
	margin: var(--s-25) 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-200);
	text-align: left;
	font-weight: 400;
}

.arnf-give .bank__value {
	min-width: 0;
	font-weight: 700;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.arnf-give .bank__value--num {
	font-variant-numeric: tabular-nums;
}

.arnf-give .copy {
	flex: none;
	min-height: 36px;
	padding: var(--s-50) var(--s-100);
	font: inherit;
	font-size: var(--text-xs);
	line-height: var(--lh-xs);
	color: var(--ink-muted);
	background-color: transparent;
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	cursor: pointer;
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}

.arnf-give .copy:hover {
	background-color: var(--sage-tint);
	border-color: var(--sage);
	color: var(--ink);
}

/* Confirmed state. Sage as a fill with ink on top, so the confirmation reads
   as brand rather than as a new colour. */
.arnf-give .copy[data-copied="true"] {
	background-color: var(--sage);
	border-color: var(--rule-on-sage);
	color: var(--ink);
}

.arnf-give .doors__foot {
	margin-top: var(--s-500);
	padding-top: var(--s-400);
	border-top: 1px solid var(--rule);
	color: var(--ink-soft);
}

.arnf-give .doors__foot p {
	max-width: var(--measure-display);
}

.arnf-give .link-inline {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. Gift Aid
   Alain's words, verbatim (DEC-007). The declaration is set as a quotation
   because it is one: the visitor is reading what they will be agreeing to.
   -------------------------------------------------------------------------- */

.arnf-give .gift-aid__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--s-700);
	align-items: start;
}

.arnf-give .gift-aid__say {
	margin: var(--s-400) 0 0;
	max-width: 22ch;
	font-size: var(--text-2xl);
	line-height: var(--lh-2xl);
	letter-spacing: -0.01em;
	color: var(--ink);
}

.arnf-give .gift-aid__by {
	margin: var(--s-200) 0 0;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.arnf-give .gift-aid__intro {
	margin: 0;
	color: var(--ink-soft);
}

/* Rule-on-sage rather than sage: on the tinted ground a sage hairline has no
   edge. */
.arnf-give .gift-aid__quote {
	margin: var(--s-300) 0 0;
	padding-left: var(--s-400);
	border-left: 1px solid var(--rule-on-sage);
	font-size: var(--text-base);
	/* Upright, not the theme's italic blockquote: this is a legal declaration
	   the visitor is agreeing to, so it has to read as plainly as a form. */
	font-style: normal;
	color: var(--ink-soft);
	line-height: 1.75;
}

.arnf-give .gift-aid__quote p {
	margin: 0;
}

.arnf-give .gift-aid__quote p + p {
	margin-top: var(--s-200);
}

/* --------------------------------------------------------------------------
   4. The ledger
   A price beside a thing. The education page shows these same figures as
   cards, where they illustrate; here they are the transaction, so they are set
   as an account - rule-separated rows, tabular numerals, one column of figures
   the eye can run straight down.
   -------------------------------------------------------------------------- */

.arnf-give .ledger__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-100) var(--s-400);
	align-items: baseline;
	justify-content: space-between;
}

.arnf-give .ledger__note {
	margin: 0;
	color: var(--ink-muted);
}

.arnf-give .ledger__list {
	margin: var(--s-600) 0 0;
	border-top: 1px solid var(--rule);
}

.arnf-give .ledger__row {
	display: grid;
	grid-template-columns: minmax(0, 96px) 1fr;
	gap: var(--s-400);
	align-items: baseline;
	padding: var(--s-300) 0;
	border-bottom: 1px solid var(--rule);
}

/* Left-aligned and flush with the rule that opens the table: the pound signs
   make one clean edge down the page. */
.arnf-give .ledger__amount {
	margin: 0;
	font-size: var(--text-3xl);
	line-height: var(--lh-3xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--sage-deep);
}

.arnf-give .ledger__thing {
	margin: 0;
	font-size: var(--text-lg);
	line-height: var(--lh-lg);
	color: var(--ink-soft);
}

/* The climax of the section: the one panel on the page that fills with sage. */
.arnf-give .year {
	margin-top: var(--s-700);
	padding: var(--s-700);
	background-color: var(--sage);
	border-radius: var(--r-3xl);
}

.arnf-give .year__title {
	margin: 0;
	font-size: var(--text-3xl);
	line-height: var(--lh-3xl);
	letter-spacing: -0.02em;
	color: var(--ink);
}

.arnf-give .year__list {
	margin: var(--s-500) 0 var(--s-600);
	display: grid;
	gap: var(--s-400);
	max-width: var(--measure-display);
}

.arnf-give .year__row {
	display: grid;
	grid-template-columns: minmax(150px, 0.4fr) 1fr;
	gap: var(--s-100) var(--s-300);
	align-items: baseline;
	padding-top: var(--s-400);
	border-top: 1px solid var(--rule-on-sage);
}

.arnf-give .year__amount {
	margin: 0;
	font-size: var(--text-4xl);
	line-height: var(--lh-4xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.arnf-give .year__unit {
	font-size: var(--text-base);
	font-weight: 400;
	color: var(--ink-soft);
}

.arnf-give .year__detail {
	margin: 0;
	font-size: var(--text-lg);
	line-height: var(--lh-lg);
	color: var(--ink);
}

/* Sage Deep fails 4.5:1 against a Sage fill, so the link on this panel takes
   ink and keeps its arrow travel for the affordance. */
.arnf-give .year__link,
.arnf-give .year__link:hover {
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   5. Close
   The page's only photograph. It stands on its own edges - mats belong to the
   letters, not to a giving surface.
   -------------------------------------------------------------------------- */

.arnf-give .give-close__grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--s-700);
	align-items: stretch;
}

.arnf-give .give-close__media {
	margin: 0;
	height: 100%;
}

.arnf-give .give-close__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;
	border-radius: var(--r-2xl);
}

/* No rule and no quote marks of its own: on the close the voice carries the
   emphasis, so it gets scale instead of chrome. */
.arnf-give .give-close__quote {
	margin: var(--s-400) 0 0;
	padding: 0;
	border: 0;
	font-size: var(--text-xl);
	line-height: 1.6;
	font-style: normal;
	color: var(--ink-soft);
}

.arnf-give .give-close__quote p {
	margin: 0;
}

.arnf-give .give-close__by {
	margin: var(--s-200) 0 0;
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.arnf-give .give-close__reg {
	margin: var(--s-500) 0 0;
	padding-top: var(--s-300);
	border-top: 1px solid var(--rule);
	font-size: var(--text-sm);
	line-height: var(--lh-sm);
	color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
	/* Three columns leave the IBAN about 200px and break it to three lines. One
	   column per route instead, divided by the same hairline turned. */
	.arnf-give .doors__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	/* Stacked, there is nothing left to align across, so the subgrid comes off
	   and each route goes back to a plain column. */
	.arnf-give .door {
		display: flex;
		grid-row: auto;
		padding: var(--s-500) 0;
		border-left: 0;
		border-top: 1px solid var(--rule);
	}

	.arnf-give .door:first-child {
		padding-top: var(--s-500);
		border-top: 0;
	}

	.arnf-give .door__cta {
		width: auto;
	}

	.arnf-give .door__action {
		max-width: var(--measure-prose);
	}
}

@media (max-width: 900px) {
	.arnf-give .gift-aid__grid,
	.arnf-give .give-close__grid {
		grid-template-columns: 1fr;
		gap: var(--s-500);
	}

	.arnf-give .gift-aid__say {
		max-width: var(--measure-prose);
	}
}

@media (max-width: 720px) {
	.arnf-give .page-head__sub--lead {
		font-size: var(--text-lg);
		line-height: var(--lh-lg);
	}

	.arnf-give .year {
		padding: var(--s-500) var(--s-400);
	}

	.arnf-give .year__row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	/* The 96px figure column squeezed the longer descriptions to three lines;
	   the amount takes its own line instead. */
	.arnf-give .ledger__row {
		grid-template-columns: 1fr;
		gap: var(--s-50);
	}

	.arnf-give .ledger__amount {
		font-size: var(--text-2xl);
		line-height: var(--lh-2xl);
	}

	.arnf-give .copy {
		min-height: 44px;
		padding: var(--s-75) var(--s-200);
	}
}

@media (prefers-reduced-motion: reduce) {
	.arnf-give .copy {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Target sizes (P8)

   WCAG 2.5.8 asks for 24x24 CSS pixels on anything you point at, and exempts
   links sitting inside a sentence. These are standalone links that
   measured 19-22px tall, so they get the height back without moving anything
   else: the box grows around the text, the text stays where it was.
   -------------------------------------------------------------------------- */

.arnf-nav__link,
.arnf-breadcrumbs a,
.arnf-footer__legal a,
.arnf-footer__list a,
.contact-list a,
.dateline a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}