/* Layout: one centered column; photo-led hero, a figures band, three project stories, a partner call.
   Two colour versions: dark (default, deep steppe night) and light (warm off-white). Each colour below has a role,
   so the light version only swaps values. Photos keep their dark shading in both, so text on photos stays light. */
:root {
  --ink: #0E1A2C;        /* page ground */
  --ink-raised: #16263E; /* photo slots, raised bands */
  --line: #2C3D58;       /* hairlines */
  --paper: #F3EFE6;      /* main text */
  --mist: #B9C2CF;       /* secondary text */
  --gold: #E9B10A;       /* accent fills: buttons, bands, progress line */
  --gold-ink: #E9B10A;   /* gold used as text, thin lines and focus rings (deeper in the light version) */
  --on-gold: #0E1A2C;    /* text on gold buttons, both versions */
  --on-photo: #F3EFE6;   /* text over photos and the photo viewer, both versions */
  --on-photo-muted: #B9C2CF;
  --hatch: rgba(185,194,207,0.06); /* placeholder stripes */
  --bank-card: rgba(14,26,44,0.6);
  --logo-tile: #F3EFE6;  /* light tiles so any logo colour reads */
  --font-display: "Montserrat", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "PT Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  /* Headings stop growing on narrow phones (the vw caps), so long Mongolian words fit even with A+ */
  --step-2: min(1.625rem, 7.5vw);
  --step-3: min(2.25rem, 11.25vw);
  --step-4: clamp(min(2.5rem, 12.5vw), 6vw, 4.5rem);
  --wrap: 72rem;
  color-scheme: dark;
}
/* Light version: only when the visitor chooses it with the ☀/☾ button (the head script sets data-theme).
   Everyone else gets the dark site, whatever their phone's own light/dark setting. */
:root[data-theme="light"] {
  --ink: #F7F3EA;
  --ink-raised: #EDE6D6;
  --line: #D6CCB8;
  --paper: #0E1A2C;
  --mist: #4E5C70;
  --gold-ink: #845A00;
  --hatch: rgba(14,26,44,0.07);
  --bank-card: rgba(255,255,255,0.7);
  --logo-tile: #FFFFFF;
  --khee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cpath d='M0 1H24M0 15H24M6 1V11M1 11H11M18 15V5M13 5H23' fill='none' stroke='%23B88400' stroke-width='2'/%3E%3C/svg%3E");
  color-scheme: light;
}
/* Text size chosen with A− / A+ (the head script sets data-text). Every size on the site is in rem,
   so changing the root size scales all text evenly; layout widths in px stay put. */
:root[data-text="small"] { font-size: 90%; }
:root[data-text="large"] { font-size: 112.5%; }
:root[data-text="larger"] { font-size: 125%; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}
:root:not([data-lang="en"]) [lang="en"],
:root[data-lang="en"] [lang="mn"] { display: none; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: var(--paper); }
a:hover { color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -0.01em; overflow-wrap: break-word; }
/* (break-word: a word too long for a narrow phone, e.g. from the CMS, wraps instead of spilling sideways) */
p { margin: 0; }
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink);
}

/* Header: stays at the top while the page scrolls; main.js adds .is-scrolled (soft shadow).
   Two layouts, picked by <html data-nav> (guessed by the head script, then measured by main.js):
   "full"   = brand, menu links, Donate, language flags, text size (A− / A+) and ☀/☾ in one row;
   "burger" = only the menu button and the centred brand, used whenever that one row would be crowded
              (phones, tablets, and narrow windows with the longer Mongolian labels). Everything in .menu then
              opens as a panel below the bar. Without JavaScript (no data-nav) the full header wraps onto more rows. */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--ink);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 28px -12px rgba(0, 0, 0, 0.35); }
html { scroll-padding-top: 100px; } /* in-page links (#projects, #how …) land below the header, not under it */
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; padding-block: 20px;
}
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; text-decoration: none; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-left: auto; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.nav a { text-decoration: none; font-weight: 700; padding-block: 10px; white-space: nowrap; }
.nav a[aria-current] { color: var(--gold-ink); }
.nav-give {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 22px;
  border: 1px solid var(--gold-ink); color: var(--gold-ink); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.nav-give:hover, .nav-give[aria-current] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.menu-tools { display: flex; align-items: center; gap: 12px; }
/* Language: one flag per language; the chosen one is ringed in gold, the other is dimmed until hovered */
.lang { display: flex; gap: 2px; }
.lang button {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; background: transparent; opacity: 0.6; transition: opacity 0.2s ease;
}
.lang button:hover, .lang button[aria-pressed="true"] { opacity: 1; }
.lang .flag { display: block; width: 30px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.lang button[aria-pressed="true"] .flag { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold); }
@media (prefers-reduced-motion: reduce) { .lang button { transition: none; } }
/* Text size: A− / A+ in one pill; a button that cannot go further is dimmed */
.text-size { display: flex; height: 44px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.text-size button {
  width: 42px; padding: 0; border: 0; background: transparent; color: var(--paper); cursor: pointer;
  font-family: var(--font-display); font-weight: 800; line-height: 1;
}
.text-size button + button { border-left: 1px solid var(--line); }
.text-size [data-text-step="-1"] { font-size: 0.8125rem; }
.text-size [data-text-step="1"] { font-size: 1.0625rem; }
.text-size button:hover { color: var(--gold-ink); }
.text-size button[aria-disabled="true"] { color: var(--mist); opacity: 0.45; cursor: default; }

/* One row: nothing wraps, so main.js can tell when it no longer fits */
:root[data-nav="full"] .site-header .wrap, :root[data-nav="full"] .menu, :root[data-nav="full"] .nav { flex-wrap: nowrap; }
:root[data-nav="full"] .site-header .wrap > * { flex: none; }
.site-header.is-measuring, .site-header.is-measuring * { transition: none !important; }

/* Menu button: three bars that turn into an X while the panel is open */
.menu-toggle { display: none; }
:root[data-nav="burger"] .menu-toggle {
  display: grid; place-items: center; justify-self: start; width: 44px; height: 44px; margin-left: -9px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--paper); cursor: pointer;
}
.menu-toggle:hover { color: var(--gold-ink); }
.menu-toggle svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-toggle path { transform-origin: 12px 12px; transition: transform 0.25s ease, opacity 0.2s ease; }
.menu-toggle[aria-expanded="true"] .bar-1 { transform: rotate(45deg) translateY(5px); }
.menu-toggle[aria-expanded="true"] .bar-2 { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar-3 { transform: rotate(-45deg) translateY(-5px); }

/* Burger layout: [menu button | brand, centred | empty], 64px tall; the panel fills the screen below it */
:root[data-nav="burger"] { scroll-padding-top: 80px; }
:root[data-nav="burger"] .site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; padding-block: 10px; }
:root[data-nav="burger"] .site-header .brand { justify-self: center; }
:root[data-nav="burger"] .menu {
  position: fixed; top: var(--header-h, 64px); left: 0; right: 0; bottom: 0; margin: 0;
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
  padding: 8px max(20px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: var(--ink); border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease; /* fades in on open; closing hides it at once */
}
:root[data-nav="burger"] .site-header.is-open .menu { visibility: visible; opacity: 1; transform: none; }
:root[data-nav="burger"] .menu > * { width: 100%; max-width: 32rem; margin-inline: auto; }
:root[data-nav="burger"] .nav { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
/* Same type as the one-row menu, so the panel stays calm */
:root[data-nav="burger"] .nav a { padding: 12px 2px; border-bottom: 1px solid var(--line); line-height: 1.4; }
:root[data-nav="burger"] .nav-give {
  justify-content: center; margin-top: 24px;
  background: var(--gold); border-color: var(--gold); color: var(--on-gold);
}
:root[data-nav="burger"] .menu-tools { justify-content: space-between; margin-top: 20px; }
html.menu-open { overflow: hidden; } /* the page behind the open panel does not scroll */
@media (prefers-reduced-motion: reduce) {
  :root[data-nav="burger"] .menu, .menu-toggle path { transition: none; }
}
.theme-toggle {
  width: 44px; height: 44px; border-radius: 50%; flex: none; cursor: pointer; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--paper);
}
.theme-toggle:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Shows the version you would switch to: a sun on the dark site, a moon on the light one */
.theme-toggle .i-moon, :root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Photo slots: hatched so they read as "photo goes here" */
.photo {
  position: relative; background-color: var(--ink-raised);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--hatch) 14px 15px);
  border-radius: 12px; overflow: hidden; max-width: 100%;
}
.photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%;
  object-fit: cover; display: block;
  filter: var(--photo-filter, none); /* brightness/contrast typed in Pages CMS (photoStyle() in src/worker.js) */
}
.hero .photo img { object-position: center 25%; opacity: 0; transition: opacity 1s ease; }
.hero .photo img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero .photo img { transition: none; } }
.photo-label {
  position: absolute; top: 14px; left: 14px; right: 14px;
  font-size: 0.8125rem; color: var(--mist);
}
.photo-label span { border: 1px dashed var(--line); border-radius: 4px; padding: 4px 10px; display: inline-block; }
/* Once a photo is chosen in the editor for an empty slot, the "Зураг: …" label goes away */
.photo:has(> img) > .photo-label { display: none; }
/* Wrapper the editor uses for the slideshow list; it must not take part in the photo's layout */
.slides { display: contents; }

/* Hero */
.hero { padding-block: 8px 40px; }
.hero .photo { min-height: clamp(360px, 52vw, 560px); display: flex; align-items: flex-end; }
.hero-text {
  position: relative; z-index: 1;
  width: 100%; padding: clamp(24px, 4vw, 48px);
  background: linear-gradient(0deg, rgba(14,26,44,0.95) 0%, rgba(14,26,44,0.7) 55%, rgba(14,26,44,0) 100%);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;
  color: var(--on-photo);
}
.hero-text .eyebrow { color: var(--gold); }
.hero-text > div { display: flex; flex-direction: column; gap: 14px; max-width: 46rem; min-width: 0; }
.hero h1 { font-size: var(--step-4); }
.hero-home { padding-bottom: 12px; }
/* Rotating real figures under the headline: all share one grid cell, so a wrapped line never gets clipped */
.hero-facts { display: grid; font-size: var(--step-1); color: var(--on-photo); }
.hero-facts .fact { grid-area: 1 / 1; opacity: 0; transform: translateY(0.6em); transition: opacity 0.5s ease, transform 0.5s ease; }
.hero-facts .fact.is-active { opacity: 1; transform: none; }
.hero-facts .fact.is-out { opacity: 0; transform: translateY(-0.6em); }
.hero-facts b { font-family: var(--font-display); font-weight: 800; color: var(--gold); }
/* "Scroll to discover" cue under the hero */
.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; min-height: 44px;
  margin: 10px auto 0; color: var(--mist); font-size: 0.875rem; text-decoration: none;
}
.scroll-cue:hover { color: var(--gold-ink); }
.cue-arrow { width: 16px; height: 16px; border-right: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink); transform: rotate(45deg); animation: cue-bob 1.8s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(-2px) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }
/* Slideshow progress: one line on the very top edge of the photo (.slide-progress, added by main.js). It fills over
   the 5 s a photo shows and starts again from zero for the next photo; it stops while .is-paused (mouse over the
   photo, keyboard focus, background tab). The .slide-dots buttons the Worker writes only keep track of which photo
   is showing; arrows and swipes change the photo. */
.slide-dots { display: none; }
.slide-progress {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 4px;
  background: rgba(243,239,230,0.25); pointer-events: none;
}
.slide-fill { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; }
.slide-fill.is-running { animation: slide-fill 5s linear forwards; }
.hero .photo.is-paused .slide-fill { animation-play-state: paused; }
@keyframes slide-fill { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .slide-progress { display: none; } }

/* Previous / next arrows: on computers they appear while the mouse is over the photo (or when tabbed to);
   touch screens have no hover, so there they stay hidden and a swipe changes the photo */
.slide-arrow {
  position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(14,26,44,0.6); color: var(--on-photo); cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease;
}
.slide-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.slide-prev { left: 14px; }
.slide-next { right: 14px; }
.slide-arrow:hover { background: rgba(14,26,44,0.85); }
.hero .photo:hover .slide-arrow, .slide-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .slide-arrow { display: none; } }
.button {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 26px;
  background: var(--gold); color: var(--on-gold); text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem;
}
.button:hover { color: var(--on-gold); background: #F5C531; }

/* Opening statement: large type, key phrases marked with a soft gold band behind the text, like a highlighter
   (the band sweeps in as it scrolls into view). Not an underline, so the phrases do not look like links. */
.intro { padding-block: 40px 64px; }
.intro p { max-width: 48rem; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.45; color: var(--mist); text-wrap: pretty; }
.intro mark {
  color: var(--paper); padding-inline: 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(color-mix(in srgb, var(--gold) 34%, transparent), color-mix(in srgb, var(--gold) 34%, transparent)) 0 88% / 100% 0.45em no-repeat;
  transition: background-size 0.9s ease 0.35s;
}
.intro .reveal:not(.is-visible) mark { background-size: 0% 0.45em; }
.intro .more { margin-top: 16px; }

/* Figures */
.figures { border-block: 1px solid var(--line); }
.figures .wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 32px; padding-block: 40px;
}
.figure { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.figure strong {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-3);
  line-height: 1; color: var(--gold-ink); font-variant-numeric: tabular-nums;
}
.figure span { color: var(--mist); font-size: 0.9375rem; line-height: 1.45; }

/* Projects */
.projects { padding-block: 72px 24px; }
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.section-head h2 { font-size: var(--step-3); }
.project {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-block: 40px; border-top: 1px solid var(--line);
}
.project .photo { aspect-ratio: 4 / 3; }
.project-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.project-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.project h3 { font-size: var(--step-2); }
.project p { color: var(--mist); max-width: 36rem; }
.project-figure { color: var(--paper) !important; font-weight: 700; }
.project-figure b { color: var(--gold-ink); font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.project h3 a { text-decoration: none; }
.more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; align-self: flex-start;
  font-weight: 700; color: var(--gold-ink); text-decoration: none;
}
.more:hover { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 4px; }
.more::after { content: "→"; }

/* Gallery */
.gallery { padding-block: 16px 24px; }
.gallery .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gallery .photo { aspect-ratio: 4 / 3; }
.gallery figcaption, .gallery-caption { color: var(--mist); font-size: 0.9375rem; margin-top: 12px; }

/* Call-out boxes: partner call, give band, donate steps */
.partner { padding-block: 56px 72px; }
.band { padding-block: 40px; }
.box {
  border: 1px solid var(--line); border-radius: 12px; padding: clamp(24px, 4vw, 48px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.box > div { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; min-width: 0; }
.box h2 { font-size: var(--step-2); }
.box p { color: var(--mist); }
.box-gold { border-color: var(--gold-ink); background: linear-gradient(135deg, rgba(233,177,10,0.10), rgba(233,177,10,0) 60%); }
.box .box-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.box-stack { display: grid; grid-template-columns: minmax(0, 1fr); }
.box-stack > div { max-width: none; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.button-ghost { background: transparent; color: var(--paper); border: 1px solid var(--line); }
.button-ghost:hover { background: transparent; color: var(--gold-ink); border-color: var(--gold-ink); }
.contact { font-weight: 700; color: var(--paper); user-select: all; overflow-wrap: anywhere; }
.contact a { color: inherit; text-decoration: none; }
.contact a:hover { color: var(--gold-ink); }
.box .contact-lines { gap: 4px; }

/* Inner pages */
.crumb { padding-block: 4px 12px; }
.crumb a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--mist); text-decoration: none; }
.crumb a::before { content: "←"; }
.crumb a:hover { color: var(--gold-ink); }
.page-hero .photo { min-height: clamp(300px, 40vw, 460px); }
.page-hero h1 { font-size: clamp(min(2.25rem, 11.25vw), 5vw, 3.5rem); }
.detail { padding-block: 16px 48px; }
.detail .wrap {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.lead { font-size: var(--step-1); color: var(--paper); max-width: 40rem; }
.detail-main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.detail-main h2 { font-size: var(--step-2); }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr)); gap: 16px; }
.point { border-top: 2px solid var(--gold-ink); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.point h3 { font-size: 1.0625rem; letter-spacing: 0; }
.point p { color: var(--mist); font-size: 0.9375rem; line-height: 1.5; }
.facts { border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.facts div { display: flex; flex-direction: column; gap: 2px; }
.facts dt { color: var(--mist); font-size: 0.875rem; }
.facts dd { margin: 0; font-weight: 700; }
.facts dd b { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); color: var(--gold-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Project cards (other projects, donate page) */
.cards-section { padding-block: 24px 56px; }
.cards-section h2 { font-size: var(--step-2); margin-bottom: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--paper); min-width: 0; }
.card:hover { color: var(--paper); }
.card .photo { aspect-ratio: 4 / 3; }
.card h3 { font-size: var(--step-1); }
.card:hover h3 { color: var(--gold-ink); }
.card p { color: var(--mist); font-size: 0.9375rem; line-height: 1.5; }
.card .more { min-height: 0; }

/* Donate: bank transfer details */
.bank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.bank > div {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--bank-card);
}
.bank .bank-wide { grid-column: 1 / -1; }
.bank dt { color: var(--mist); font-size: 0.875rem; }
.bank dd { margin: 0; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; overflow-wrap: anywhere; }
/* Account numbers never wrap mid-number; they shrink to fit a 320px phone instead */
.acct { font-family: var(--font-display); font-weight: 800; font-size: min(var(--step-1), 3.9vw); color: var(--gold-ink); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.copy {
  height: 40px; padding: 0 16px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--paper); font: 700 0.875rem var(--font-body);
}
.copy:hover, .copy.is-copied { border-color: var(--gold-ink); color: var(--gold-ink); }
.copy .copy-done, .copy.is-copied .copy-idle { display: none; }
.copy.is-copied .copy-done { display: inline; }
.box-actions .note { flex-basis: 100%; }

/* Donate: goal progress bar (shown by the Worker once a goal amount is set) and the bank QR code */
.goal-band[hidden] { display: none; }
.goal { border: 1px solid var(--line); border-radius: 12px; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.goal-head { display: flex; flex-direction: column; gap: 10px; }
.goal-head h2 { font-size: var(--step-2); }
.goal-track { height: 14px; border-radius: 7px; background: var(--ink-raised); border: 1px solid var(--line); overflow: hidden; }
.goal-fill {
  display: block; height: 100%; width: var(--goal, 0%); border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-ink), var(--gold)); animation: goal-grow 1.6s ease-out 0.3s both;
}
@keyframes goal-grow { from { width: 0; } }
/* Below the first screen the bar waits at zero and fills once it scrolls into view */
.goal.reveal:not(.is-visible) .goal-fill { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .goal-fill { animation: none; } }
.goal-figures { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; color: var(--mist); }
.goal-figures b { font-family: var(--font-display); font-weight: 800; color: var(--paper); font-variant-numeric: tabular-nums; }
.goal-figures .goal-pct b { font-size: var(--step-2); color: var(--gold-ink); }
.goal-note { color: var(--mist); }
.qr { margin: 0; display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.qr:not(:has(img)) { display: none; }
.qr .photo { width: 200px; aspect-ratio: 1; background: #fff; flex: none; }
.qr .photo img { object-fit: contain; padding: 10px; }
.qr figcaption { color: var(--mist); max-width: 22rem; }

/* About: timeline, side-by-side boxes */
.journey { padding-block: 24px 40px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 6px 24px;
  padding-block: 22px; border-top: 1px solid var(--line);
}
.timeline .year { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.1; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.timeline li > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.timeline h3 { font-size: var(--step-1); }
.timeline h3 a { text-decoration: none; }
.timeline p { color: var(--mist); max-width: 40rem; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 24px; }
.duo .box { align-items: flex-start; flex-direction: column; justify-content: space-between; }

/* Contact page */
.page-head { padding-block: 32px 8px; }
.page-head .wrap { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.page-head h1 { font-size: clamp(min(2rem, 10vw), 8vw, 4.5rem); }
.page-lead { color: var(--mist); font-size: var(--step-1); max-width: 40rem; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 16px; }
.contact-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0;
}
.contact-primary { border-color: var(--gold-ink); background: linear-gradient(135deg, rgba(233,177,10,0.10), rgba(233,177,10,0) 60%); }
.contact-big { font-weight: 700; font-size: min(var(--step-1), 5.4vw); color: var(--paper); overflow-wrap: anywhere; }
.contact-big a { text-decoration: none; }
.contact-note { color: var(--mist); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.contact-actions .copy { height: 52px; padding: 0 22px; border-radius: 26px; }
.topics .point .more { min-height: 36px; }

/* News: the list on /news/ and the three latest on the home page (both filled by the Worker) */
.news-home { padding-block: 56px 24px; }
.news-home:not(:has(.news-card)) { display: none; }
.news-card .eyebrow { margin-bottom: -6px; }
.news-all { margin-top: 24px; }
.news-list { display: flex; flex-direction: column; }
.news-item {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 48px);
  align-items: start; padding-block: 40px; border-top: 1px solid var(--line);
}
.news-item:first-child { border-top: 0; padding-top: 8px; }
.news-item.no-photo { grid-template-columns: minmax(0, 1fr); }
.news-item .photo { aspect-ratio: 4 / 3; }
.news-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 42rem; }
.news-body h2 { font-size: var(--step-2); }
.news-summary { font-size: var(--step-1); color: var(--paper); }
.news-text { display: flex; flex-direction: column; gap: 14px; color: var(--mist); }
.news-item:target h2 { color: var(--gold-ink); }
.news-empty { color: var(--mist); font-size: var(--step-1); padding-block: 24px 48px; }

/* Home: testimonials and the "write your story" form */
.section-sub { color: var(--mist); max-width: 40rem; }
.stories { padding-block: 56px 24px; }
.stories .section-head { margin-bottom: 32px; align-items: center; text-align: center; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 16px; margin-bottom: 24px; }
.quotes:not(:has(.quote)) { display: none; }
/* Card: round photo on top, centred quote, gold name and project at the bottom */
.quote {
  margin: 0; padding: 28px 24px; border-radius: 12px; background: var(--ink-raised);
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; min-width: 0;
}
.quote-photo {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none;
  border: 3px solid var(--paper); background: var(--ink);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; color: var(--gold-ink);
}
.quote blockquote { margin: 0; color: var(--mist); font-size: 1rem; line-height: 1.75; }
.quote blockquote::before, .quote blockquote::after {
  font-family: var(--font-display); font-weight: 800; font-size: 1.4em; line-height: 0; color: var(--gold-ink);
  position: relative; top: 0.18em;
}
.quote blockquote::before { content: "“"; margin-right: 6px; }
.quote blockquote::after { content: "”"; margin-left: 6px; }
.quote figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.quote .who { font-family: var(--font-display); font-weight: 700; color: var(--gold-ink); }
.quote .what { color: var(--mist); font-size: 0.875rem; }
/* Placeholder cards: shown until real testimonials replace them */
.quote.is-placeholder {
  background-color: transparent; border: 1px dashed var(--line);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--hatch) 14px 15px);
}
.quote.is-placeholder .quote-photo { border: 2px dashed var(--line); background: var(--ink-raised); }

.write { border: 1px solid var(--line); border-radius: 12px; background: var(--ink-raised); }
.write summary {
  list-style: none; cursor: pointer; padding: clamp(24px, 4vw, 40px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px;
}
.write summary::-webkit-details-marker { display: none; }
.write summary:focus-visible { outline-offset: -4px; border-radius: 8px; }
.write-copy { display: flex; flex-direction: column; gap: 8px; max-width: 40rem; }
.write-title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.1; }
.write-text { color: var(--mist); }
.write .when-open, .write[open] .when-closed { display: none; }
.write[open] .when-open { display: inline; }
.write[open] summary .button { background: transparent; color: var(--paper); border: 1px solid var(--line); }
.write form { padding: 0 clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px); display: grid; gap: 18px; }
.fields-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 700; font-size: 0.9375rem; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--paper); background: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; min-height: 48px; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field-hint { color: var(--mist); font-size: 0.875rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.char-count { font-variant-numeric: tabular-nums; }
.char-count.is-near { color: var(--gold-ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; border-color: var(--gold-ink); }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; color: var(--paper); }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--gold); flex: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-actions .button { border: 0; cursor: pointer; }
.form-actions .button:disabled { opacity: 0.7; cursor: progress; }
.button .when-busy, .button.is-busy .when-idle { display: none; }
.button.is-busy .when-busy { display: inline; }
.form-note { color: var(--mist); font-size: 0.875rem; max-width: 30rem; }
.form-sent { color: var(--gold-ink); font-weight: 700; }
.form-fallback { color: var(--paper); }
/* Spam trap field: kept off screen, never shown to people */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Home: partner logos (light tiles so any logo colour reads) */
.partners-logos { padding-block: 40px 8px; }
.partners-logos .section-head { margin-bottom: 24px; }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 45%), 1fr)); gap: 12px; }
.logos li { height: 96px; border-radius: 8px; background: var(--logo-tile); display: grid; place-items: center; padding: 14px 18px; min-width: 0; }
.logos img { max-width: 100%; max-height: 60px; object-fit: contain; }
.logos a { display: grid; place-items: center; width: 100%; height: 100%; }
.logos .logo-slot {
  background-color: var(--ink-raised); border: 1px dashed var(--line); color: var(--mist); font-size: 0.8125rem;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--hatch) 14px 15px);
}

/* 404 */
.not-found { padding-block: 56px 96px; }
.not-found .wrap { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.not-found h1 { font-size: var(--step-4); }
.not-found p { color: var(--mist); max-width: 36rem; font-size: var(--step-1); }
.not-found .box-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Mongolian "алхан хээ" (hammer pattern) accent: interlocking hammers between two lines, one 24×16 SVG tile */
:root {
  --khee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cpath d='M0 1H24M0 15H24M6 1V11M1 11H11M18 15V5M13 5H23' fill='none' stroke='%23E9B10A' stroke-width='2'/%3E%3C/svg%3E");
}
body::before { content: ""; display: block; height: 12px; background: var(--khee) 0 0 / 18px 12px repeat-x; opacity: 0.9; }
.section-head::after, .page-head .wrap::after {
  content: ""; display: block; width: 96px; height: 16px; margin-top: 4px;
  background: var(--khee) 0 0 / 24px 16px repeat-x;
}

/* Footer: brand + donate, menu, contact, follow; small print underneath */
.site-footer { margin-top: 48px; background: var(--ink-raised); border-top: 1px solid var(--line); }
.site-footer::before { content: ""; display: block; height: 12px; background: var(--khee) 0 0 / 18px 12px repeat-x; opacity: 0.6; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 40px; padding-block: 48px 28px; color: var(--mist); font-size: 0.9375rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 1.2fr); gap: 32px 40px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 20rem; }
.footer-brand .brand { font-size: 1.5rem; color: var(--paper); }
.footer-give { margin-top: 4px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.footer-title {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.footer-col li > a, .footer-col li > span { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--paper); text-decoration: none; overflow-wrap: anywhere; }
.footer-col li > a:hover { color: var(--gold-ink); }
.footer-contact svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 18px 8px 8px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--paper); text-decoration: none; transition: border-color 0.2s ease;
}
.social:hover { border-color: var(--gold-ink); color: var(--paper); }
.social-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; flex: none; }
.social-icon svg { width: 22px; height: 22px; fill: var(--on-gold); }
.social b { display: block; font-weight: 700; line-height: 1.25; }
.social small { display: block; color: var(--mist); font-size: 0.8125rem; }
.footer-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.875rem;
}
.footer-meta a { color: inherit; text-underline-offset: 3px; }
.footer-meta a:hover { color: var(--gold-ink); }
@media (max-width: 960px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
  .site-footer .wrap { gap: 32px; padding-block: 36px 24px; }
  /* Phones: one column; the menu links sit two by two so the footer stays short */
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  nav.footer-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

/* Plain reading pages (privacy policy) */
.prose { display: flex; flex-direction: column; gap: 14px; max-width: 42rem; padding-bottom: 32px; }
.prose h2 { font-size: var(--step-1); margin-top: 18px; }
.prose p { color: var(--mist); }
.prose a { color: var(--gold-ink); }
.portal { color: var(--paper); font-weight: 700; }
.soon { color: var(--gold-ink); }

/* Motion: fade-up on scroll (class added by main.js), slow zoom on header photos, hover lift on cards */
/* The transition lives only on the visible state, so hiding a block at load is instant (no fade-out) */
.reveal { opacity: 0; transform: translateY(18px); transition: none; }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
.card.reveal.is-visible { transition: opacity 0.6s ease, transform 0.3s ease; }
@media print { .reveal { opacity: 1; transform: none; } }
@keyframes slow-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero .photo img { animation: slow-zoom 14s ease-in-out infinite alternate; }
.card { transition: transform 0.3s ease; }
.card:hover { transform: translateY(-4px); }
.card .photo img, .photo-zoom img { transition: transform 0.5s ease; }
.card:hover .photo img, .photo-zoom:hover img, .photo-zoom:focus-visible img { transform: scale(1.04); }

/* Photo viewer */
.photo-zoom { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.photo-zoom:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 72px 16px 24px; border: 0; background: transparent; color: var(--on-photo);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(8, 14, 26, 0.97); }
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(100%, 1200px); }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 160px); border-radius: 8px; object-fit: contain; }
.lightbox figcaption { color: var(--on-photo-muted); text-align: center; font-size: 0.9375rem; max-width: 40rem; }
.lb-count { position: fixed; top: 26px; left: 24px; margin: 0; color: var(--on-photo-muted); font-variant-numeric: tabular-nums; }
.lb-btn {
  position: fixed; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(243,239,230,0.25); background: rgba(14, 26, 44, 0.85); color: var(--on-photo);
  font: 400 1.75rem/1 var(--font-body); display: grid; place-items: center;
}
.lb-btn:hover { border-color: var(--gold); color: var(--gold); }
.lb-btn[hidden] { display: none; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* First visit to the home page (html.first-visit, set in the head, removed by main.js after ~2.8 s or on the
   first scroll/tap): the хээ band draws in, the photo settles from dark, the headline rises word by word,
   then the paragraph with the buttons and the scroll cue arrive. Returning visitors never get this class. */
@keyframes fv-band { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fv-photo { from { transform: scale(1.14); filter: brightness(0.35); } to { transform: none; filter: var(--photo-filter, none); } }
@keyframes fv-word { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fv-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.first-visit body::before { animation: fv-band 1.1s ease-out both; }
.first-visit .hero-home .photo img.is-active { animation: fv-photo 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.first-visit .hero-home h1 { opacity: 0; }
.first-visit .hero-home h1.is-split { opacity: 1; }
.first-visit .hero-home h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.first-visit .hero-home h1 .w > span { display: inline-block; animation: fv-word 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(450ms + var(--i) * 110ms); }
.first-visit .hero-home .eyebrow { animation: fv-up 0.6s 0.25s both; }
.first-visit .hero-home .hero-facts, .first-visit .hero-home .hero-side { animation: fv-up 0.7s 1.2s both; }
.first-visit .scroll-cue { animation: fv-up 0.7s 1.7s both; }

/* Scroll progress: a thin gold line at the very top that fills as you read down the page (added by main.js) */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
@media print { .scroll-progress, .scroll-cue { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero .photo img { animation: none; }
  .card, .card .photo img, .photo-zoom img { transition: none; }
  .card:hover, .card:hover .photo img, .photo-zoom:hover img, .photo-zoom:focus-visible img { transform: none; }
  .cue-arrow { animation: none; }
  .hero-facts .fact { transition: none; }
}

@media (max-width: 720px) {
  .project { grid-template-columns: minmax(0, 1fr); }
  .lb-prev, .lb-next { top: auto; bottom: 20px; transform: none; }
  .detail .wrap { grid-template-columns: minmax(0, 1fr); }
  .bank { grid-template-columns: minmax(0, 1fr); }
  .bank > div { padding: 14px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .news-item { grid-template-columns: minmax(0, 1fr); padding-block: 32px; }
  .contact-card { padding: 20px; }
}

/* ==== Home page layout ====================================================================================
   One idea per section, in this order: first screen (headline + two choices) → who we are + numbers →
   the three projects as cards → photos → one gold "give" band → news → testimonials → partners.
   Sections alternate between the page ground and a raised ground so each reads as its own block,
   and every section uses the same spacing. Blocks that only hold placeholders stay hidden. */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section-alt { background: var(--ink-raised); }
.section-alt .quote, .section-alt .write, .section-alt .card .photo { background-color: var(--ink); }
.home .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
/* Heading on the left, "see all" link on the right */
.section-head-row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.section-head-row > div { display: flex; flex-direction: column; gap: 10px; }
.section-head-row::after { display: none; }
.section-head-row > div::after { content: ""; display: block; width: 96px; height: 16px; margin-top: 4px; background: var(--khee) 0 0 / 24px 16px repeat-x; }

/* 1. First screen: no text on the photo, so group photos keep every face visible. The headline, the line about
   who we are and the two buttons sit under it: headline on the left, the rest on the right on wide screens,
   one column on phones. The photo takes what is left of the first screen, but never gets thinner than a
   wide banner, so heads are not cut off on short laptop screens. */
.hero-home .photo {
  display: block; min-height: 0;
  height: clamp(300px, calc(100vh - 390px), 640px); height: clamp(300px, calc(100svh - 390px), 640px);
}
/* The right column is just wide enough for both buttons on one row; the headline shrinks with the screen so
   it stays on two lines in the column that is left */
.hero-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28.5rem); align-items: end;
  gap: 20px clamp(24px, 4vw, 48px); padding-top: clamp(20px, 3vw, 32px);
}
.hero-heading { display: flex; flex-direction: column; gap: 10px; }
.hero-home h1 { font-size: clamp(2rem, 8.3vw - 44px, 3.4rem); }
.hero-side { display: flex; flex-direction: column; gap: 16px; }
.hero-lead { font-size: var(--step-1); line-height: 1.45; color: var(--mist); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 960px) {
  .hero-intro { grid-template-columns: minmax(0, 1fr); }
  .hero-home h1 { font-size: clamp(min(2.25rem, 10vw), 5vw, 3rem); }
  .hero-home .photo { height: min(calc((100vw - 32px) * 0.75), 58vh); height: min(calc((100vw - 32px) * 0.75), 58svh); }
}

/* 2. Who we are + numbers */
.home .intro .wrap { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px); }
.mission { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 50rem; }
.home .intro .mission > p:not(.eyebrow) { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.home .intro .mission > .eyebrow { font-size: 0.8125rem; line-height: 1.4; color: var(--gold-ink); }
.home .intro .more { margin-top: 0; }
.home .figures { border: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.home .figure { background: var(--ink); border-radius: 12px; padding: 24px; gap: 10px; border-top: 3px solid var(--gold); }

/* 3. Projects as three cards */
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home .project-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--ink); transition: transform 0.3s ease, border-color 0.3s ease;
}
.home .project-card:hover { transform: translateY(-4px); border-color: var(--gold-ink); }
.home .project-card .photo { aspect-ratio: 4 / 3; border-radius: 0; }
.home .project-card .project-body { padding: 22px 22px 18px; gap: 10px; flex: 1; }
.home .project-card .project-meta { gap: 4px 14px; }
.home .project-card .project-meta .eyebrow { font-size: 0.75rem; }
.home .project-card .project-meta .eyebrow + .eyebrow { color: var(--mist); }
.home .project-card h3 { font-size: var(--step-1); }
.home .project-card p { font-size: 0.9375rem; line-height: 1.55; }
.home .project-card .project-figure { font-size: 0.9375rem; }
.home .project-card .more { margin-top: auto; min-height: 40px; }

/* 5. Gold "give" band: same in both colour versions */
.give-band { background: var(--gold); color: var(--on-gold); }
.give-band .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
  padding-block: clamp(40px, 6vw, 64px);
}
.give-copy { display: flex; flex-direction: column; gap: 10px; max-width: 40rem; }
.give-band .eyebrow { color: var(--on-gold); opacity: 0.75; }
.give-band h2 { font-size: var(--step-3); color: var(--on-gold); }
.give-band p { color: var(--on-gold); font-size: var(--step-1); }
.give-band .button { background: var(--on-gold); color: #F3EFE6; min-height: 56px; padding: 0 36px; }
.give-band .button:hover { background: #1F3354; color: #F3EFE6; }
.give-band a:focus-visible { outline-color: var(--on-gold); }

/* 6. News: always three columns, so one item is a normal card, not a giant photo */
.home .news-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home .news-all { margin-top: 0; }
.home .news-card .photo { border-radius: 12px; }

/* 7. Testimonials: the sample cards stay out of sight; with no real ones only the "write your story" box shows */
.home .quote.is-placeholder { display: none; }
.home .stories:not(:has(.quote:not(.is-placeholder))) .section-head { display: none; }
.home .stories:not(:has(.quote:not(.is-placeholder))) { padding-block: clamp(40px, 6vw, 64px); }

/* 8. Partner logos: hidden until at least one real logo is added */
.home .partners-logos:not(:has(.logos li:not(.logo-slot))) { display: none; }
.home .partner { padding-block: clamp(56px, 8vw, 96px); }
/* Once partner logos are shown, the box sits right under them as one block */
.home .partners-logos:has(.logos li:not(.logo-slot)) + .partner { padding-top: 0; }
.home .partner .box { border-radius: 12px; align-items: center; }

@media (max-width: 960px) {
  .home .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .home .news-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home .news-cards { grid-template-columns: minmax(0, 1fr); }
  .home .figure { padding: 18px; }
  .hero-actions .button { flex: 1 1 auto; justify-content: center; }
  .give-band .button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .home .project-card, .home .project-card:hover { transition: none; transform: none; } }