/* ==========================================================================
   Deerwalk Foundation | 2026 Central Nepal flood appeal
   Mobile first. No frameworks, no external fonts, no decorative effects.

   Palette is drawn from the foundation's brand sheet, which pairs the sky
   blue and hill green of the logo mark. Blue 0F5288 carries identity and
   information (links, focus, the progress bar). Green 237A4C carries action,
   so the donate button separates from a blue dominant hero photograph rather
   than sinking into it. Nothing else on the page is coloured.

   Contrast checked against the page background #F8FAFB:
     #1A1A1A text ............ 16.3:1  (AA, AAA)
     #4A5A66 secondary ....... 6.8:1   (AA, AAA at 18px+)
     #0F5288 link text ....... 7.7:1   (AA, AAA)
     #FFFFFF on #237A4C ...... 5.3:1   (AA)
     #FFFFFF on #046031 ...... 7.7:1   (AA, AAA)
     #0F5288 progress bar .... 7.3:1   against its track (AA non-text)
   ========================================================================== */

:root {
  --bg:            #F8FAFB;
  --bg-sunk:       #EEF3F6;   /* zebra rows, quiet panels */
  --ink:           #1A1A1A;
  --ink-muted:     #4A5A66;
  --accent:        #0F5288;   /* brand blue: links, focus, progress */
  --accent-deep:   #0B3E68;   /* blue hover / active only */
  --cta:           #237A4C;   /* brand green: primary action only */
  --cta-deep:      #046031;   /* green hover / active only */
  --rule:          #DCE5EA;
  --rule-strong:   #C3D2DA;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type scale: 14 / 16 / 20 / 28 / 40 */
  --t-sm:   0.875rem;   /* 14 */
  --t-base: 1rem;       /* 16 */
  --t-lead: 1.25rem;    /* 20 */
  --t-h2:   1.75rem;    /* 28 */
  --t-h1:   2.5rem;     /* 40 */

  --section-y: 56px;
  --measure: 34rem;
  --measure-wide: 44rem;

  --ease: cubic-bezier(0.16, 0.8, 0.34, 1);
}

@media (min-width: 768px) {
  :root { --section-y: 96px; }
}
@media (min-width: 1024px) {
  :root { --section-y: 120px; }
}
@media (min-width: 1440px) {
  :root { --section-y: 140px; }
}

/* --- reset ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul, table, dl, dt, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

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

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transition: top 150ms var(--ease);
}
.skip-link:focus { top: 16px; color: #fff; }

/* --- layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
/* Every section shares one left rail. Body copy runs the full width of the
   container; only the progress figures and the tables keep a measure, since a
   very wide table row is harder to scan than a wide paragraph. */

.table-frame { max-width: var(--measure-wide); }

@media (min-width: 768px) {
  .wrap { padding: 0 40px; }
}

.section { padding: var(--section-y) 0; }
.section + .section { border-top: 1px solid var(--rule); }

.section-title {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.section-intro {
  margin-top: 12px;
  color: var(--ink-muted);
}

.eyebrow {
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}



/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.btn-primary {
  background: var(--cta);
  border-color: var(--cta);
  color: #fff;
}
.btn-primary:hover {
  background: var(--cta-deep);
  border-color: var(--cta-deep);
  color: #fff;
}
.btn-sm {
  min-height: 44px;
  padding: 10px 18px;
  font-size: var(--t-sm);
}

/* --- header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 68px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;          /* keeps the tap area at 44px+ */
  color: var(--ink);
  text-decoration: none;
}
.wordmark-mark {
  width: 40px;
  height: 40px;
  flex: none;
}
.wordmark-text { display: block; }

/* Two campaigns means the header carries real navigation. Both links stay
   visible at every width; two items do not justify hiding anything behind a
   toggle. On narrow screens they drop to their own row under the wordmark. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  order: 3;
  width: 100%;
  margin: 0 0 8px;
  border-top: 1px solid var(--rule);
  padding-top: 4px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink-muted);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
}
.nav-link:hover { color: var(--ink); }

/* Below the desktop breakpoint the three labels cannot sit on one line at this
   size, so they share the row as equal centred columns rather than bunching to
   the left with ragged wraps. Nothing is hidden behind a toggle. */
@media (max-width: 859px) {
  .site-nav { gap: 0; }
  .nav-link {
    flex: 1;
    justify-content: center;
    text-align: center;
    padding: 4px 6px;
    line-height: 1.3;
  }
}
.nav-link[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

@media (min-width: 860px) {
  .site-nav {
    order: initial;
    flex: 1;
    width: auto;
    margin: 0 16px;
    border-top: 0;
    padding-top: 0;
  }
  /* Sits hard right, immediately left of the donate button. */
  .nav-link-end { margin-left: auto; }
}
.nav-link-end { color: var(--ink); }
.wordmark-name {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.wordmark-sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 480px;
  padding: 72px 0 64px;
  background: var(--accent);   /* shows if the photograph is missing */
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Flat, even scrim. No colour tint, no vignette. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 20, 30, 0.60);
  z-index: -1;
}
.hero-content { color: #fff; }
.hero .eyebrow { color: #DCE9F2; }
.hero h1 {
  margin-top: 16px;
  max-width: 22ch;
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero-lead {
  margin-top: 20px;
  max-width: 46ch;
  font-size: var(--t-base);
  color: #E4EDF3;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 32px;
}
.hero-note {
  margin-top: 20px;
  font-size: var(--t-sm);
  color: #C8DAE7;
}
/* Photographer credit for the hero frame. Sits under the copy on a phone and
   moves to the opposite edge on wider screens, clear of the headline block. */
.hero-credit {
  margin-top: 12px;
  font-size: var(--t-sm);
  color: #C8DAE7;
}
@media (min-width: 768px) {
  .hero-credit {
    margin-top: -20px;
    text-align: right;
  }
}

@media (min-width: 600px) {
  .hero h1 { font-size: 2.5rem; }
  .hero-lead { font-size: var(--t-lead); }
}
@media (min-width: 768px) {
  .hero {
    min-height: 620px;
    /* Deeper bottom padding lifts the copy off the base of the frame; the block
       stays bottom anchored so it does not drift as the headline rewraps. */
    padding: 112px 0 148px;
  }
  .hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }
}
@media (min-width: 1024px) {
  .hero { min-height: 680px; }
}

/* --- gallery ------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.gallery-item { margin: 0; }
.gallery-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gallery-btn img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-sunk);
  transition: opacity 160ms var(--ease);
}
.gallery-btn:hover img { opacity: 0.88; }
.gallery-caption {
  display: block;
  margin-top: 8px;
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.gallery-credit {
  margin-top: 32px;
  font-size: var(--t-sm);
  color: var(--ink-muted);
}

/* --- supplies table ------------------------------------------------------ */

.table-frame { margin-top: 32px; }

.supplies-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
}
.supplies-table th,
.supplies-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: baseline;
}
.supplies-table thead th {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule-strong);
}
.supplies-table tbody tr:nth-child(odd) { background: var(--bg-sunk); }
.supplies-table tbody td { border-bottom: 1px solid var(--rule); }
.supplies-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.supplies-table .item { font-weight: 500; }

/* Stacked cards below 560px rather than horizontal scroll. */
@media (max-width: 559px) {
  .supplies-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .supplies-table,
  .supplies-table tbody,
  .supplies-table tr,
  .supplies-table td { display: block; width: 100%; }
  .supplies-table tbody tr {
    padding: 14px 16px;
    border: 1px solid var(--rule);
    margin-bottom: 10px;
  }
  .supplies-table tbody tr:nth-child(odd) { background: var(--bg-sunk); }
  .supplies-table tbody td {
    padding: 2px 0;
    border: 0;
  }
  .supplies-table tbody td.item {
    font-size: var(--t-lead);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .supplies-table .num { text-align: left; }
  /* Quantity and unit read as one value on a card: "4,200 kg". */
  .supplies-table tbody td.num,
  .supplies-table tbody td.unit { display: inline; }
  .supplies-table tbody td.unit[data-label]::before { content: " "; }
  /* Row cells carry their header name on narrow screens. */
  .supplies-table tbody td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--ink-muted);
  }
  .supplies-table tbody td.item[data-label]::before { content: none; }
}

/* --- repeat CTA ---------------------------------------------------------- */

.section-cta { background: var(--bg-sunk); }
.cta-inner { text-align: left; }
.cta-title {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.cta-copy {
  margin-top: 16px;
  color: var(--ink-muted);
}
.section-cta .btn { margin-top: 32px; }

/* --- footer -------------------------------------------------------------- */

.site-footer {
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.footer-inner {
  display: grid;
  gap: 32px;
}
@media (min-width: 768px) {
  .site-footer { padding: 72px 0 56px; }
  .footer-inner { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}
.footer-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-mark {
  width: 32px;
  height: 32px;
  flex: none;
}
.footer-name {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
}
.footer-heading {
  font-weight: 600;
  color: var(--ink);
}
.footer-line { margin-top: 6px; }
.footer-line a { color: var(--ink-muted); }
.footer-line a:hover { color: var(--accent-deep); }

/* Standalone inline links carry a 44px tall tap area on touch sized screens. */
@media (max-width: 1023px) {
  .package-note a {
    display: inline-block;
    padding: 11px 0;
    line-height: 1.6;
  }
  .footer-line a {
    display: inline-block;
    padding: 11px 0;
    line-height: 1.6;
  }
  .footer-line { margin-top: 0; }
  .footer-heading + .footer-line { margin-top: 0; }
}

.footer-fine { margin-top: 40px; }
/* The registration and tax status carry more weight for a donor than the
   processing note below them, so they take the full ink colour. */
.footer-trust {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.footer-trust + p {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}
.footer-legal { margin-top: 20px; }
.footer-legal p { font-size: var(--t-sm); }
.footer-fine p {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

/* --- lightbox ------------------------------------------------------------ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 20, 0.93);
}
.lightbox-panel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  padding: 64px 16px;
}
/* The figure shrinks to the rendered image so the caption row lines up with
   the image edges rather than the panel edges. */
.lightbox-figure {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.lightbox-figure img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 190px);
}
.lightbox-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: var(--t-sm);
  color: #CBD9E2;
}
.lightbox-count { font-variant-numeric: tabular-nums; }

.lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-btn svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
}
.lightbox-btn:focus-visible { outline-color: #FFFFFF; }

.lightbox-close { top: 8px; right: 16px; }
.lightbox-prev  { bottom: 8px; left: 16px; }
.lightbox-next  { bottom: 8px; left: 72px; }

@media (min-width: 900px) {
  .lightbox-panel { padding: 64px 80px; }
  .lightbox-prev { top: 50%; bottom: auto; left: 8px; transform: translateY(-50%); }
  .lightbox-next { top: 50%; bottom: auto; left: auto; right: 8px; transform: translateY(-50%); }
}

body.lightbox-open { overflow: hidden; }

/* --- reveal on scroll ---------------------------------------------------- */

[data-reveal] {
  opacity: 1;
  transform: none;
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   Covid-19 campaign page
   The figures and the package list are rebuilt as real UI rather than shipped
   as pictures of a table, so they are readable on a phone, selectable, and
   available to a screen reader. The original graphics stay on the page lower
   down as campaign records.
   ========================================================================== */

.page-header {
  padding: calc(var(--section-y) * 0.75) 0 var(--section-y);
  border-bottom: 1px solid var(--rule);
}
.page-header .eyebrow { color: var(--accent); }
.page-title {
  margin-top: 16px;
  max-width: 24ch;
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.page-lead {
  margin-top: 20px;
  font-size: var(--t-lead);
  color: var(--ink-muted);
}

/* Snapshot figures, from the programme snapshot graphic. */
.section-snapshot { background: var(--bg-sunk); }
.snapshot {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 32px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.snapshot-item {
  display: flex;
  flex-direction: column-reverse;   /* figure above its label */
  justify-content: flex-end;
  background: var(--bg-sunk);
  padding: 20px;
}
.snapshot-value {
  display: block;
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.snapshot-value.is-text {
  font-size: var(--t-lead);
  line-height: 1.3;
  letter-spacing: 0;
}
.snapshot-label {
  display: block;
  margin-top: 8px;                  /* reads as space below, order is reversed */
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-muted);
}
@media (min-width: 600px) {
  .snapshot { grid-template-columns: repeat(3, 1fr); }
  .snapshot-item.is-wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .snapshot { grid-template-columns: repeat(5, 1fr); }
  .snapshot-item.is-wide { grid-column: span 1; }
}

/* Three step process, from the procurement graphic. */
.process {
  display: grid;
  gap: 24px;
  margin-top: 36px;
  counter-reset: step;
}
.process-step {
  padding-top: 20px;
  border-top: 2px solid var(--accent);
  counter-increment: step;
}
.process-step h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--t-lead);
  font-weight: 600;
}
.process-step h3::before {
  content: counter(step);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.process-step p {
  margin-top: 8px;
  font-size: var(--t-base);
  color: var(--ink-muted);
}
@media (min-width: 768px) {
  .process { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* One family package: reuses the supplies table styling. */
.package-note {
  margin-top: 20px;
  max-width: var(--measure);
  font-size: var(--t-sm);
  color: var(--ink-muted);
}

/* Campaign graphics, shown at their own aspect rather than cropped square. */
.posters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 700px) {
  .posters { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .posters { grid-template-columns: repeat(3, 1fr); }
}
.posters .gallery-btn img {
  aspect-ratio: auto;
  border: 1px solid var(--rule);
  background: #fff;
}


/* --- flood corridor map and its numbered legend --------------------------- */

.corridor {
  display: grid;
  gap: 32px;
  margin-top: 36px;
}
@media (min-width: 900px) {
  .corridor {
    grid-template-columns: minmax(320px, 480px) 1fr;
    gap: 56px;
    align-items: start;
  }
}
.corridor-map { margin: 0; }
/* The legend runs about 400px taller than the map. Rather than leave that as
   dead space, the map holds its position while the eleven points scroll past,
   so the pin a reader is looking up stays on screen. Layout only, no motion. */
@media (min-width: 900px) {
  .corridor-map {
    position: sticky;
    top: 88px;          /* clears the sticky header */
  }
}
.corridor-map img {
  width: 100%;
  border: 1px solid var(--rule);
  background: #fff;
}
.corridor-heading {
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.25;
}
.corridor-note {
  margin-top: 8px;
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.areas {
  margin-top: 20px;
  list-style: none;   /* the number is rendered as text, see script.js */
}
.area {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.area:last-child { border-bottom: 1px solid var(--rule); }
.area-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.area-body { display: block; }
.area-place {
  display: block;
  font-weight: 600;
  line-height: 1.4;
}
.area-detail {
  display: block;
  margin-top: 2px;
  font-size: var(--t-sm);
  color: var(--ink-muted);
}


/* ==========================================================================
   Other works: article list
   ========================================================================== */

.articles { display: block; }
.article + .article { border-top: 1px solid var(--rule); }
/* Keeps an anchored article clear of the sticky header, which is one row on
   desktop and two on narrow screens. */
.article { scroll-margin-top: 128px; }
@media (min-width: 860px) {
  .article { scroll-margin-top: 84px; }
}

.article-title {
  max-width: 40ch;
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.article-meta {
  margin-top: 12px;
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.article-body { margin-top: 24px; }
.article-body p + p { margin-top: 1.35em; }

.article-figure { margin: 0; }
.article-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-sunk);
  transition: opacity 160ms var(--ease);
}
.article-figure .gallery-btn:hover img { opacity: 0.88; }
.article-figure figcaption {
  margin-top: 8px;
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
/* Same grid as the flood gallery, so a tile is the same size on either page. */
.article-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .article-figures { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .article-figures { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}


/* --- article share cluster ------------------------------------------------ */

.article-head-row {
  display: grid;
  gap: 20px;
}
@media (min-width: 768px) {
  .article-head-row {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 32px;
  }
}

.share-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--ink-muted);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 160ms var(--ease), border-color 160ms var(--ease),
              background-color 160ms var(--ease);
}
.share-btn:hover {
  background: var(--bg-sunk);
  border-color: var(--accent);
  color: var(--accent);
}
.share-btn .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The brand glyphs read as solid shapes, not outlines. */
.share-btn .icon-filled {
  fill: currentColor;
  stroke: none;
}

.share-status {
  display: block;
  margin-top: 8px;
  min-height: 1.4em;
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.article-share.is-copied .share-status { color: var(--cta-deep); }

@media (min-width: 768px) {
  .share-row { justify-content: flex-end; }
  .share-status { text-align: right; }
}


/* --- embedded Givebutter giving form ------------------------------------- */

/* The widget is capped at 480px and centred, so the type above and below it is
   centred to match. margin auto centres the blocks themselves, which are still
   capped at the reading measure. */
.section-progress .section-title,
.section-progress .section-intro,
.section-progress .donate-fallback {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* The widget sizes itself, so no height is set here. Its own config caps it at
   480px wide, so it is centred rather than left aligned in the wider column.
   Its goal bar uses the theme colour set in the Givebutter dashboard, currently
   orange #FF8A00, which is the one part of the page the site CSS cannot reach. */
.donate-embed {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}
.donate-embed givebutter-widget {
  display: block;
  width: 100%;
  max-width: 480px;
}

/* The donate anchor must clear the sticky header, which is two rows on narrow
   screens and one from 860px up. */
#donate { scroll-margin-top: 120px; }
@media (min-width: 860px) {
  #donate { scroll-margin-top: 76px; }
}