/* ============================================================
   Surviving Children · Yazidi Child Survivors Alliance
   Stylesheet · "quiet archive" museum aesthetic
   ------------------------------------------------------------
   Colours are defined once as CSS custom properties (tokens)
   near the top, then reused everywhere. Change a token and it
   updates across the whole site.
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  color-scheme: light dark;

  /* archival paper + ink */
  --paper:      #F4EFE4;
  --paper-2:    #EDE6D6;
  --paper-3:    #E5DCC8;
  --ink:        #1E2B29;
  --ink-soft:   #55635F;
  --ink-faint:  #8A938E;
  --line:       #D8CDB6;
  --line-soft:  #E4DBC8;

  /* one sacred accent (the Yazidi sun) + one structural cool */
  --gold:       #A9761F;
  --gold-bright:#C6952F;
  --teal:       #285863;
  --teal-deep:  #1B4049;

  /* map event colours (one per event kind) */
  --k-assault:#C9663A; --k-flight:#D69A34; --k-siege:#C08A2C; --k-massacre:#C0392B;
  --k-captivity:#8763B0; --k-liberation:#2F8F8A; --k-grave:#5B6472; --k-return:#3E8E5A; --k-memorial:#9A6DA0;

  /* emblem rainbow (only used inside the emblem itself) */
  --c1:#E04E2C; --c2:#EE9A2E; --c3:#EAC64A; --c4:#6FA85A;
  --c5:#2A9D8F; --c6:#357FBE; --c7:#5C57A0; --c8:#BE4F7C;

  --btn-bg: var(--teal);
  --btn-fg: #F7F2E7;
  --btn-bg-hover: var(--teal-deep);

  /* matte, museum-quiet shadows */
  --shadow: 0 1px 2px rgba(30,43,41,.05), 0 18px 40px -30px rgba(30,43,41,.4);
  --shadow-lift: 0 2px 6px rgba(30,43,41,.06), 0 40px 80px -40px rgba(30,43,41,.45);

  /* Text laid over the hero photograph. Fixed light values on purpose: the
     photo keeps its own brightness in both themes, so this set must not follow
     the light/dark tokens. Used by the hero AND by the header while it floats
     on the picture. --veil is R G B for rgb(var(--veil) / alpha). */
  --on-photo:#F7F2E7;
  --on-photo-soft:rgba(247,242,231,.84);
  --on-photo-gold:#E7C173;
  --veil:8 16 15;

  /* Height of the sticky header. The hero is pulled up by exactly this much so
     the photograph reaches the top of the window. script.js re-measures it, so
     the value here is only the starting guess. */
  --header-h:71px;

  --radius: 4px;
  --radius-lg: 6px;
  --maxw: 1180px;
  --measure: 60ch;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ar: "SF Arabic", "Geeza Pro", "Baghdad", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;

  --fs-hero: clamp(2.6rem, 6vw, 4.6rem);
  --fs-h2:   clamp(1.9rem, 3.4vw, 2.9rem);
  --fs-h3:   1.24rem;
  --fs-lead: clamp(1.1rem, 1.7vw, 1.28rem);
  --fs-body: 1.04rem;
  --fs-small:.9rem;
  --fs-label:.72rem;
  --track:   .22em;   /* letter-spacing for wall-label text */
}

/* Dark theme. The ground is a near-neutral charcoal, not a tinted colour:
   the paper hue belongs to the light theme, and carrying it into the dark
   one only makes the page look green rather than dark. Warmth is kept in
   the ink and the gold instead. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0D0D0C; --paper-2:#161615; --paper-3:#1F1E1C;
    --ink:#EDE8DE; --ink-soft:#ABA69C; --ink-faint:#7C7973;
    --line:#312F2B; --line-soft:#252420;
    --gold:#CFA24E; --gold-bright:#E1BC6B; --teal:#5DA0AC; --teal-deep:#4A8894;
    --k-assault:#DB7C4E; --k-flight:#E4B857; --k-siege:#D6A845; --k-massacre:#D95A4E;
    --k-captivity:#A488CE; --k-liberation:#54ABA5; --k-grave:#8791A2; --k-return:#5FB07C; --k-memorial:#B78CBC;
    --btn-bg:var(--gold); --btn-fg:#0D0D0C; --btn-bg-hover:var(--gold-bright);
    --shadow:0 1px 2px rgba(0,0,0,.35),0 18px 40px -30px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.4),0 40px 80px -40px rgba(0,0,0,.75);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --paper:#F4EFE4; --paper-2:#EDE6D6; --paper-3:#E5DCC8;
  --ink:#1E2B29; --ink-soft:#55635F; --ink-faint:#8A938E; --line:#D8CDB6; --line-soft:#E4DBC8;
  --gold:#A9761F; --gold-bright:#C6952F; --teal:#285863; --teal-deep:#1B4049;
  --k-assault:#C9663A; --k-flight:#D69A34; --k-siege:#C08A2C; --k-massacre:#C0392B;
  --k-captivity:#8763B0; --k-liberation:#2F8F8A; --k-grave:#5B6472; --k-return:#3E8E5A; --k-memorial:#9A6DA0;
  --btn-bg:var(--teal); --btn-fg:#F7F2E7; --btn-bg-hover:var(--teal-deep);
  --shadow:0 1px 2px rgba(30,43,41,.05),0 18px 40px -30px rgba(30,43,41,.4);
  --shadow-lift:0 2px 6px rgba(30,43,41,.06),0 40px 80px -40px rgba(30,43,41,.45);
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0D0D0C; --paper-2:#161615; --paper-3:#1F1E1C;
  --ink:#EDE8DE; --ink-soft:#ABA69C; --ink-faint:#7C7973; --line:#312F2B; --line-soft:#252420;
  --gold:#CFA24E; --gold-bright:#E1BC6B; --teal:#5DA0AC; --teal-deep:#4A8894;
  --k-assault:#DB7C4E; --k-flight:#E4B857; --k-siege:#D6A845; --k-massacre:#D95A4E;
  --k-captivity:#A488CE; --k-liberation:#54ABA5; --k-grave:#8791A2; --k-return:#5FB07C; --k-memorial:#B78CBC;
  --btn-bg:var(--gold); --btn-fg:#0D0D0C; --btn-bg-hover:var(--gold-bright);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 18px 40px -30px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.4),0 40px 80px -40px rgba(0,0,0,.75);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; position:relative;
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.72;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* faint paper grain over the whole page */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme: dark){ body::before{ mix-blend-mode:screen; opacity:.05; } }
:root[data-theme="dark"] body::before{ mix-blend-mode:screen; opacity:.05; }
:root[data-theme="light"] body::before{ mix-blend-mode:multiply; opacity:.5; }
main, header.site, footer.site, .progress, .to-top{ position:relative; z-index:1; }
html[dir="rtl"] body{ font-family:var(--font-ar); line-height:2; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.1; text-wrap:balance; margin:0; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{ font-family:var(--font-ar); font-weight:700; line-height:1.4; }
p{ margin:0; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
ul,ol{ margin:0; padding:0; list-style:none; }

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

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.measure{ max-width:var(--measure); }

.skip{
  position:fixed; inset-inline-start:1rem; top:-4rem; z-index:200;
  background:var(--teal); color:#fff; padding:.6rem 1rem; border-radius:3px; transition:top .18s ease;
}
.skip:focus{ top:1rem; }

/* wall-label eyebrow */
.eyebrow{
  display:inline-block; font-family:var(--font-body);
  font-size:var(--fs-label); font-weight:700; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--gold);
}
html[dir="rtl"] .eyebrow{ font-family:var(--font-ar); letter-spacing:0; }

.progress{ position:fixed; inset-block-start:0; inset-inline:0; height:2px; z-index:120; pointer-events:none; }
.progress span{ display:block; height:100%; width:0; background:var(--gold); }
html[dir="rtl"] .progress span{ margin-inline-start:auto; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.1) blur(12px); backdrop-filter:saturate(1.1) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
header.site.scrolled{ border-bottom-color:var(--line); background:color-mix(in srgb, var(--paper) 94%, transparent); }

/* ---- while the hero photograph is behind it ----
   No bar at all: the header floats on the picture in the photograph's own light
   ink. script.js adds .over-hero for as long as the hero still covers the
   header, and drops it the moment the hero has scrolled past — at which point
   the paper bar above takes over again. The blur has to go too, or a frosted
   strip appears across the photo where the bar used to be. */
header.site.over-hero{
  background:transparent;
  border-bottom-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
header.site.over-hero .brand .en,
header.site.over-hero nav.links a,
header.site.over-hero .ctrl{ color:var(--on-photo); }
header.site.over-hero .brand .ar{ color:var(--on-photo-soft); }
header.site.over-hero .brand,
header.site.over-hero nav.links a{ text-shadow:0 1px 12px rgb(var(--veil) / .6); }
header.site.over-hero nav.links a:hover{ color:#FFFDF7; }
header.site.over-hero nav.links a.active{ color:var(--on-photo-gold); }
header.site.over-hero nav.links a.active::after{ background:var(--on-photo-gold); }
header.site.over-hero .ctrl{ border-color:rgba(247,242,231,.45); background:rgb(var(--veil) / .18); }
header.site.over-hero .ctrl:hover{ border-color:var(--on-photo); color:var(--on-photo); background:rgb(var(--veil) / .34); }

/* The mobile menu panel is opaque paper, so inside it the ink goes back to
   normal — light-on-light would make the links vanish. */
header.site.over-hero nav.links.open a{ color:var(--ink); text-shadow:none; }
header.site.over-hero nav.links.open a:hover{ color:var(--ink); }
header.site.over-hero nav.links.open a.active{ color:var(--gold); }
.nav{ display:flex; align-items:center; gap:1rem; min-height:70px; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; margin-inline-end:auto; }
.brand .mark{ width:38px; height:38px; flex:0 0 auto; transition:transform .5s var(--ease); }
.brand:hover .mark{ transform:rotate(10deg); }
.brand .names{ display:flex; flex-direction:column; line-height:1.1; }
.brand .en{ font-family:var(--font-display); font-weight:600; font-size:1.12rem; letter-spacing:.01em; }
.brand .ar{ font-family:var(--font-ar); font-size:.8rem; color:var(--ink-soft); }
html[dir="rtl"] .brand .en{ font-family:var(--font-ar); }

nav.links{ display:flex; align-items:center; gap:.1rem; }
nav.links a{
  position:relative; text-decoration:none; color:var(--ink-soft);
  font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:.5rem .75rem; border-radius:3px; white-space:nowrap;
  transition:color .15s ease;
}
html[dir="rtl"] nav.links a{ letter-spacing:0; text-transform:none; font-size:.95rem; }
nav.links a:hover{ color:var(--ink); }
nav.links a.active{ color:var(--gold); }
nav.links a.active::after{ content:""; position:absolute; inset-inline:.75rem; inset-block-end:.15rem; height:1.5px; background:var(--gold); }

.controls{ display:flex; align-items:center; gap:.4rem; }
.ctrl{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  height:38px; padding-inline:.7rem; min-width:38px;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:3px;
  font-family:var(--font-body); font-size:.86rem; font-weight:600; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, transform .12s ease;
}
html[dir="rtl"] .ctrl{ font-family:var(--font-ar); }
.ctrl:hover{ border-color:var(--gold); color:var(--gold); }
.ctrl:active{ transform:scale(.96); }
.ctrl svg{ width:18px; height:18px; }
.theme-toggle .moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .moon{ display:block; }
:root[data-theme="dark"] .theme-toggle .sun{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .moon{ display:block; }
  :root:not([data-theme="light"]) .theme-toggle .sun{ display:none; }
}

.menu-btn{ display:none; }
@media (max-width: 900px){
  nav.links{
    position:fixed; inset-block-start:70px; inset-inline:0; inset-block-end:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-top:1px solid var(--line);
    padding:1rem var(--gutter); transform:translateY(-140%);
    transition:transform .34s var(--ease); overflow:auto;
  }
  nav.links.open{ transform:translateY(0); }
  nav.links a{ font-size:1.05rem; letter-spacing:.04em; padding:1rem .4rem; border-bottom:1px solid var(--line-soft); }
  nav.links a.active::after{ display:none; }
  .menu-btn{ display:inline-flex; }
}
@media (prefers-reduced-motion: reduce){ nav.links{ transition:none; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.6rem; border-radius:3px; text-decoration:none;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  letter-spacing:.02em; cursor:pointer; border:1px solid transparent;
  transition:transform .14s var(--ease), background .15s ease, border-color .15s ease, color .15s ease;
}
html[dir="rtl"] .btn{ font-family:var(--font-ar); }
.btn:hover{ transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }
.btn-primary{ background:var(--btn-bg); color:var(--btn-fg); }
.btn-primary:hover{ background:var(--btn-bg-hover); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* ============================================================
   HERO · full-bleed photograph of the memorial, copy laid over it
   ------------------------------------------------------------
   The photo keeps its own light/dark values in both themes, so the
   text over it is always the light "on-photo" set below rather than
   the page's --ink tokens.
   ============================================================ */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:0;
  display:grid; align-items:end;
  background:#0C1413;        /* holds the frame while the photo loads */
  border-block-end:1px solid var(--line);

  /* Slide up behind the sticky header so the photograph reaches the top of the
     window, then grow by the same amount so the picture's bottom edge — and the
     copy standing on it — stay exactly where they were. */
  margin-block-start:calc(-1 * var(--header-h));
  min-height:calc(clamp(28rem, 76vh, 44rem) + var(--header-h));
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media picture, .hero-media img{ width:100%; height:100%; display:block; }
.hero-media img{ object-fit:cover; object-position:50% 46%; }

/* Darkens the side the copy sits on and the foot of the frame, and leaves
   the memorial itself (centre of the photo) close to its own brightness. */
/* A short wash under the header band only. The header floats on the photograph
   with no bar of its own, so its words need something dark behind them without
   dimming the whole picture to get it. */
.hero-veil::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0;
  height:calc(var(--header-h) + 4rem); pointer-events:none;
  /* .70 is what it takes to clear 4.5:1 for the small nav type against the
     brightest part of the concrete band behind it */
  background:linear-gradient(to bottom, rgb(var(--veil) / .7), rgb(var(--veil) / 0));
}
.hero-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right,
      rgb(var(--veil) / .84) 0%,
      rgb(var(--veil) / .62) 24%,
      rgb(var(--veil) / .20) 50%,
      rgb(var(--veil) / .02) 68%,
      rgb(var(--veil) / 0)   100%),
    linear-gradient(to top,
      rgb(var(--veil) / .92) 0%,
      rgb(var(--veil) / .74) 20%,
      rgb(var(--veil) / .36) 42%,
      rgb(var(--veil) / .08) 64%,
      rgb(var(--veil) / .20) 100%);
}
html[dir="rtl"] .hero-veil{
  background:
    linear-gradient(to left,
      rgb(var(--veil) / .84) 0%,
      rgb(var(--veil) / .62) 24%,
      rgb(var(--veil) / .20) 50%,
      rgb(var(--veil) / .02) 68%,
      rgb(var(--veil) / 0)   100%),
    linear-gradient(to top,
      rgb(var(--veil) / .92) 0%,
      rgb(var(--veil) / .74) 20%,
      rgb(var(--veil) / .36) 42%,
      rgb(var(--veil) / .08) 64%,
      rgb(var(--veil) / .20) 100%);
}

.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.6rem,4vw,3.5rem); align-items:end;
  /* the header's worth of space is added back on top, so the copy never hides
     underneath it however tall the header ends up being */
  padding-block:calc(clamp(4.5rem,15vh,9rem) + var(--header-h)) clamp(2.6rem,7vh,4.2rem);
  color:var(--on-photo);
}
.hero-copy{ max-width:44rem; }
.hero .eyebrow{ color:var(--on-photo-gold); }
.hero h1{
  font-size:var(--fs-hero); margin-block:1rem .2rem;
  letter-spacing:-.015em; font-weight:600; color:var(--on-photo);
  text-shadow:0 1px 2px rgb(var(--veil) / .5), 0 14px 40px rgb(var(--veil) / .45);
}
html[dir="rtl"] .hero h1{ letter-spacing:0; }
.hero .lead{
  /* narrower than the page --measure, to keep it inside the darker side of the photo */
  font-size:var(--fs-lead); max-width:34rem; color:var(--on-photo-soft);
  margin-block-start:1.3rem; text-shadow:0 1px 14px rgb(var(--veil) / .55);
}
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-block-start:2rem; }

/* buttons read against the photograph, not against paper */
.hero .btn-primary{ background:var(--on-photo); color:#14201F; }
.hero .btn-primary:hover{ background:#fff; }
.hero .btn-ghost{
  color:var(--on-photo); border-color:rgba(247,242,231,.45);
  background:rgb(var(--veil) / .22);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.hero .btn-ghost:hover{ color:var(--on-photo); border-color:var(--on-photo); background:rgb(var(--veil) / .4); }

/* museum wall label crediting the photograph */
.hero-plate{
  max-width:21rem; text-align:end; padding-block-start:.6rem;
  border-block-start:1px solid rgba(247,242,231,.35);
  opacity:0; animation:riseIn .9s var(--ease) .5s forwards;
}
.hero-plate b{
  display:block; font-size:var(--fs-label); font-weight:700;
  letter-spacing:var(--track); text-transform:uppercase; color:var(--on-photo-gold);
}
html[dir="rtl"] .hero-plate b{ letter-spacing:0; text-transform:none; }
.hero-plate span{
  display:block; margin-block-start:.3rem; font-size:.8rem; line-height:1.55;
  color:var(--on-photo-soft); text-wrap:pretty;
  text-shadow:0 1px 10px rgb(var(--veil) / .75), 0 0 2px rgb(var(--veil) / .5);
}

.hero-copy > *{ opacity:0; transform:translateY(14px); animation:riseIn .9s var(--ease) forwards; }
.hero-copy > *:nth-child(1){ animation-delay:.05s; }
.hero-copy > *:nth-child(2){ animation-delay:.16s; }
.hero-copy > *:nth-child(3){ animation-delay:.27s; }
.hero-copy > *:nth-child(4){ animation-delay:.38s; }
@keyframes riseIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero-copy > *, .hero-plate{ opacity:1; transform:none; animation:none; }
}

@media (max-width: 860px){
  /* one column, so the scrim has to carry the whole width: mostly bottom-up */
  .hero{ min-height:clamp(30rem, 82vh, 40rem); }
  .hero-media img{ object-position:50% 42%; }
  .hero-veil, html[dir="rtl"] .hero-veil{
    background:linear-gradient(to top,
      rgb(var(--veil) / .90) 0%,
      rgb(var(--veil) / .78) 30%,
      rgb(var(--veil) / .46) 58%,
      rgb(var(--veil) / .22) 80%,
      rgb(var(--veil) / .30) 100%);
  }
  .hero-inner{ grid-template-columns:1fr; align-items:start; }
  .hero-plate{ max-width:34rem; text-align:start; margin-block-start:.6rem; }
}

/* ============================================================
   SECTIONS (gallery rhythm)
   ============================================================ */
section{ padding-block:clamp(3.6rem, 7vw, 6rem); position:relative; }
.section-head{ max-width:56ch; margin-block-end:2.8rem; }
.section-head h2{ font-size:var(--fs-h2); margin-block:.7rem; color:var(--ink); font-weight:600; }
.section-head p{ color:var(--ink-soft); font-size:var(--fs-lead); }
.band{ background:var(--paper-2); border-block:1px solid var(--line); }

/* ---- August 2014 ---- */
.background{ position:relative; }
.bg-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:900px){ .bg-grid{ grid-template-columns:1fr; } }
.bg-copy .big{ font-size:clamp(1.24rem,2.1vw,1.5rem); line-height:1.5; color:var(--ink); font-family:var(--font-display); }
html[dir="rtl"] .bg-copy .big{ line-height:1.75; font-family:var(--font-ar); }
.bg-copy p + p{ margin-block-start:1.1rem; color:var(--ink-soft); }
.bg-copy .src{
  margin-block-start:1.5rem; padding-inline-start:1.1rem; font-size:.96rem;
  border-inline-start:2px solid var(--gold); color:var(--ink-soft); font-style:italic;
}
html[dir="rtl"] .bg-copy .src{ font-style:normal; }

/* engraved figure list, like a museum stat plate */
.factboard{ display:grid; gap:0; align-content:start; border-block-start:1px solid var(--ink); }
.fact{ display:grid; gap:.2rem; padding-block:1.15rem; border-block-end:1px solid var(--line); }
.fact .num{
  font-family:var(--font-display); font-size:clamp(2rem,3.4vw,2.6rem); line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
html[dir="rtl"] .fact .num{ font-family:var(--font-ar); }
.fact span{ color:var(--ink-soft); font-size:.96rem; }
.factnote{ margin-block-start:.9rem; font-size:.8rem; color:var(--ink-faint); letter-spacing:.01em; }

/* ============================================================
   THE MAP · the exhibit
   ============================================================ */
/* The map is not a boxed panel; it floats in the page's paper field and its
   satellite imagery feathers away at every edge. No border, no frame, no seam. */
.map-exhibit{ background:var(--paper-2); }
/* kill the band hairlines that would otherwise draw a line across the map's
   top and bottom, so the section above and below flow into it */
#background{ border-block-end:0; }
#about{ border-block-start:0; }

.mapframe{ position:relative; margin-block-start:.5rem; }
.mapwrap{ position:relative; background:var(--paper-2); overflow:hidden; }
.mapcanvas{ width:100%; height:clamp(480px, 76vh, 800px); background:var(--paper-2); }
/* Feather ONLY the <canvas> pixels into the paper. Markers, place labels, the
   zoom control, the Mapbox logo/attribution and the wall label are separate
   elements, so they stay perfectly crisp while the imagery melts into the page.
   Two gradients intersected feather all four edges evenly. */
.mapcanvas .mapboxgl-canvas{
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 16%, #000 87%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 16%, #000 87%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
.mapboxgl-ctrl-logo{ opacity:.55; }
/* soften Mapbox's own chrome so it reads as paper, not a white box */
.mapboxgl-ctrl-group{
  background:color-mix(in srgb, var(--paper) 80%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius:6px; box-shadow:none !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); overflow:hidden;
}
.mapboxgl-ctrl-group button{ width:30px; height:30px; background:transparent; color:var(--ink-soft); }
.mapboxgl-ctrl-group button + button{ border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.mapboxgl-ctrl-group button:hover{ background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--gold); }
.mapboxgl-ctrl-group button:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; box-shadow:none; }
/* the reframe button is hidden until the reader has actually moved the camera,
   and `hidden` alone would lose to Mapbox's own display rule on the group */
.mapboxgl-ctrl-group[hidden]{ display:none; }
.mapctl-reframe button svg{ width:17px; height:17px; display:block; margin:auto; }
:root[data-theme="dark"] .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon{ filter:invert(1) brightness(1.6); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon{ filter:invert(1) brightness(1.6); } }
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib{
  font-size:10px; background:color-mix(in srgb, var(--paper) 70%, transparent) !important;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.mapboxgl-ctrl-attrib a, .mapboxgl-ctrl-attrib{ color:var(--ink-soft) !important; }

/* wall-label detail card: a frosted floating label, not a hard box. The frost
   blurs the map behind it for legibility; a whisper-thin ring gives it an edge
   without a border, and only the top accent line reads as a real rule. */
.mapcard{
  position:absolute; inset-block-start:1.1rem; inset-inline-start:1.1rem; z-index:3;
  width:min(340px, calc(100% - 2.2rem));
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
  border:0; border-block-start:2px solid var(--gold);
  padding:1.1rem 1.2rem 1.15rem;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 26px 52px -30px rgba(0,0,0,.5);
}
/* the accent colour of the card's top border is set inline per event kind */
.mc-index{ font-family:var(--font-display); font-size:.86rem; color:var(--gold); font-weight:700; }
.mc-date{ display:block; font-size:.7rem; font-weight:700; letter-spacing:var(--track); text-transform:uppercase; color:var(--ink-faint); margin-block-start:.5rem; }
html[dir="rtl"] .mc-date{ letter-spacing:0; }
.mc-name{ font-size:1.3rem; margin-block:.2rem .35rem; color:var(--ink); font-weight:600; }
.mc-toll{ display:block; font-weight:700; font-size:.94rem; color:var(--k-massacre); margin-block-end:.5rem; }
.mc-text{ font-size:.92rem; line-height:1.6; color:var(--ink-soft); }
html[dir="rtl"] .mc-text{ line-height:1.8; }
.mc-source{ display:block; margin-block-start:.7rem; padding-block-start:.6rem; border-block-start:1px solid var(--line-soft); font-size:.74rem; color:var(--ink-faint); letter-spacing:.02em; }

/* hide / show the wall label so the map can be seen in full */
.mc-toggle{
  position:absolute; inset-block-start:.5rem; inset-inline-end:.5rem; z-index:2;
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb, var(--paper) 92%, transparent); color:var(--ink-soft);
  border:1px solid var(--line); display:grid; place-items:center;
  transition:color .15s ease, border-color .15s ease;
}
.mc-toggle:hover{ color:var(--gold); border-color:var(--gold); }
.mc-toggle svg{ width:16px; height:16px; }
.mapcard .mc-index, .mapcard .mc-date{ padding-inline-end:2rem; }

.mapshow{
  position:absolute; inset-block-start:1.1rem; inset-inline-start:1.1rem; z-index:3;
  display:none; align-items:center; gap:.5rem;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border:1px solid var(--line); border-radius:999px; padding:.5rem .95rem;
  color:var(--ink); font-family:var(--font-body); font-size:.82rem; font-weight:600;
  cursor:pointer; box-shadow:var(--shadow); transition:border-color .15s ease, color .15s ease;
}
html[dir="rtl"] .mapshow{ font-family:var(--font-ar); }
.mapshow:hover{ border-color:var(--gold); color:var(--gold); }
.mapshow svg{ width:17px; height:17px; }
.mapwrap.label-hidden .mapcard{ display:none; }
.mapwrap.label-hidden .mapshow{ display:inline-flex; }

@media (max-width:760px){
  .mapcard{ position:static; width:auto; border:0; border-block-start:1px solid var(--line); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .mapcard[data-kind]{ border-block-start-width:3px; }
}

/* markers · numbered, matched to the timeline.
   ------------------------------------------------------------
   A marker is three pieces stacked bottom-to-top:

        (3)   .mk-badge  the number, kept small and held clear
         |    .mk-stalk  a thin line, so it is plainly a pointer
         ·    .mk-foot   a small dot ON the place itself

   The number used to be a 26px disc sitting on the coordinate,
   which covered the very village it was pointing at. Lifting it
   leaves the ground visible and still says which place is meant.
   Mapbox anchors the marker at the foot (see MK_FOOT in map.js).

   --kc is the event-kind colour, set per marker in map.js.
   .mk-wrap is the element Mapbox positions; .mk is what we animate. */
.mk-wrap{ display:grid; justify-items:center; }
.mk{
  padding:0; border:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center;
  opacity:0; transform:scale(.4);
  transform-origin:bottom center;   /* it grows up out of the ground */
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mk.is-shown{ opacity:1; transform:scale(1); }

.mk-badge{
  width:19px; height:19px; border-radius:50%; background:var(--kc, var(--gold));
  border:1.5px solid rgba(255,255,255,.94);
  box-shadow:0 1px 5px rgba(0,0,0,.55);
  display:grid; place-items:center; flex:none;
  font-family:var(--font-display); font-size:.62rem; font-weight:700;
  color:#fff; line-height:1; font-variant-numeric:tabular-nums;
  transition:width .3s var(--ease), height .3s var(--ease), font-size .3s var(--ease);
}

/* the pointer itself: a hairline, dark-edged so it reads over pale ground */
.mk-stalk{
  width:2px; height:30px; flex:none; background:var(--kc, var(--gold));
  box-shadow:0 0 0 .5px rgba(0,0,0,.45);
  transition:height .3s var(--ease);
}

.mk-foot{
  width:9px; height:9px; border-radius:50%; background:var(--kc, var(--gold));
  border:1.5px solid rgba(255,255,255,.94);
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
  position:relative; flex:none;
}
/* the pulse belongs on the place, not on the number */
.mk-ring{
  position:absolute; inset:-2px; border-radius:50%;
  border:1.5px solid var(--kc, var(--gold)); opacity:0;
}

.mk.is-active .mk-badge{ width:24px; height:24px; font-size:.75rem; }
.mk.is-active .mk-stalk{ height:38px; }
.mk.is-active .mk-ring{ opacity:1; animation:pulse 2.4s ease-out infinite; }

@keyframes pulse{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(3.4); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .mk.is-active .mk-ring{ animation:none; opacity:.5; }
  .mk, .mk-badge, .mk-stalk{ transition:none; }
}

/* legend */
.maplegend{ display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; margin-block-start:1.1rem; }
.maplegend li{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--ink-soft); letter-spacing:.02em; }
.maplegend .sw{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }

/* timeline */
.timeline{ display:flex; align-items:center; gap:1rem; margin-block-start:1.4rem; }
.tl-controls{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.tl-play{
  flex:0 0 auto; width:50px; height:50px; border-radius:50%; border:1px solid var(--ink); cursor:pointer;
  background:var(--ink); color:var(--paper); display:grid; place-items:center;
  transition:transform .14s var(--ease), background .15s ease;
}
.tl-play:hover{ transform:scale(1.05); background:var(--teal); border-color:var(--teal); }
@media (prefers-reduced-motion: reduce){ .tl-play:hover{ transform:none; } }
.tl-play svg{ width:20px; height:20px; }
/* step-by-hand buttons flanking play */
.tl-step{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--ink); border:1px solid var(--line);
  display:grid; place-items:center;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .12s var(--ease), opacity .15s ease;
}
.tl-step:hover{ border-color:var(--gold); color:var(--gold); }
.tl-step:active{ transform:scale(.94); }
.tl-step:disabled{ opacity:.32; cursor:default; pointer-events:none; }
.tl-step svg{ width:19px; height:19px; }
html[dir="rtl"] .tl-step svg{ transform:scaleX(-1); }
.tl-play .ic-pause{ display:none; }
.tl-play.playing .ic-pause{ display:block; }
.tl-play.playing .ic-play{ display:none; }
.tl-track{ position:relative; flex:1 1 auto; }
.tl-range{ width:100%; margin:0; accent-color:var(--gold); cursor:pointer; }
.tl-ticks{ position:absolute; inset-inline:7px; inset-block-start:calc(50% + 13px); display:flex; justify-content:space-between; pointer-events:none; }
.tick{ width:5px; height:5px; border-radius:50%; background:var(--line); transition:background .3s ease; }
.tick.on{ background:var(--gold); }
.tl-count{ flex:0 0 auto; font-family:var(--font-display); font-size:.9rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:5ch; text-align:end; }

.mapcaption{ display:flex; gap:.6rem; margin-block-start:1.2rem; font-size:.82rem; color:var(--ink-faint); line-height:1.5; }
.mapcaption b{ color:var(--ink-soft); font-weight:700; white-space:nowrap; }

/* loading + fallback */
.maploading{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; background:var(--paper-3); pointer-events:none; }
.maploading[hidden]{ display:none; }
.maploading span{ width:28px; height:28px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--gold); animation:spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce){ .maploading span{ animation:none; } }
.mapfallback{ padding:1.8rem; }
.mapfallback h3{ font-size:1.2rem; margin-block-end:.3rem; }
.mapfallback > p{ color:var(--ink-soft); margin-block-end:1.4rem; }
.mapfallback ol{ display:grid; gap:1.1rem; counter-reset:f; }
.mapfallback li{ padding-inline-start:1.1rem; border-inline-start:2px solid var(--line); }
.mapfallback li b{ display:block; color:var(--ink); }
.mapfallback li i{ display:block; color:var(--k-massacre); font-style:normal; font-weight:600; font-size:.92rem; }
.mapfallback li span{ display:block; color:var(--ink-soft); font-size:.92rem; }

/* ---- About ---- */
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.8rem,5vw,4rem); align-items:center; }
.about-grid p.big{ font-size:clamp(1.24rem,2.1vw,1.5rem); line-height:1.55; color:var(--ink); font-family:var(--font-display); }
html[dir="rtl"] .about-grid p.big{ line-height:1.8; font-family:var(--font-ar); }
.about-sub{ margin-block-start:1.1rem; color:var(--ink-soft); }
.quote{
  position:relative; border-inline-start:2px solid var(--gold); padding:.4rem 0 .4rem 1.6rem;
  font-family:var(--font-display); font-size:1.34rem; line-height:1.5; color:var(--ink); font-style:italic;
}
html[dir="rtl"] .quote{ font-family:var(--font-ar); font-style:normal; padding:.4rem 1.6rem .4rem 0; line-height:1.85; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }

/* ---- What we do ---- */
.grid{ display:grid; gap:0; }
.grid-3{ grid-template-columns:repeat(3,1fr); border-block-start:1px solid var(--ink); }
.grid-3 .card{ border-block-end:1px solid var(--line); border-inline-end:1px solid var(--line); }
.grid-3 .card:nth-child(3n){ border-inline-end:0; }
@media (max-width:820px){ .grid-3{ grid-template-columns:1fr; }
  .grid-3 .card{ border-inline-end:0; } }

.card{ padding:1.9rem 1.7rem 1.9rem 0; transition:background .2s ease; }
.grid-3 .card{ padding-inline:1.7rem; }
.grid-3 .card:first-child{ padding-inline-start:0; }
html[dir="rtl"] .grid-3 .card:first-child{ padding-inline-start:1.7rem; padding-inline-end:0; }
.card .ic{
  width:44px; height:44px; display:grid; place-items:center; color:var(--gold);
  border:1px solid var(--line); border-radius:50%; margin-block-end:1.2rem;
  transition:border-color .2s ease, transform .3s var(--ease);
}
.card:hover .ic{ border-color:var(--gold); transform:rotate(-4deg); }
@media (prefers-reduced-motion: reduce){ .card:hover .ic{ transform:none; } }
.card .ic svg{ width:22px; height:22px; }
.card h3{ font-size:var(--fs-h3); margin-block-end:.55rem; color:var(--ink); font-weight:600; }
html[dir="rtl"] .card h3{ font-size:1.3rem; }
.card p{ color:var(--ink-soft); font-size:.99rem; }

/* ---- Ways to help ---- */
.support{ background:var(--paper-2); border-block:1px solid var(--line); }
.sup-inner{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
@media (max-width:860px){ .sup-inner{ grid-template-columns:1fr; } }
.sup-copy h2{ font-size:clamp(1.7rem,2.8vw,2.3rem); margin-block:.5rem .5rem; font-weight:600; }
.sup-copy p{ color:var(--ink-soft); }
.sup-list{ display:grid; gap:0; border-block-start:1px solid var(--ink); }
.sup-list a{
  display:flex; align-items:baseline; gap:.9rem; text-decoration:none;
  padding:1.1rem .2rem; border-block-end:1px solid var(--line);
  transition:padding-inline-start .18s var(--ease), background .18s ease;
}
.sup-list a:hover{ padding-inline-start:1rem; }
.sup-list b{ font-family:var(--font-display); font-size:1.1rem; color:var(--ink); font-weight:600; flex:0 0 auto; }
.sup-list span{ font-size:.92rem; color:var(--ink-soft); }
.sup-list a::after{ content:"\2197"; margin-inline-start:auto; color:var(--gold); font-weight:700; transition:transform .18s var(--ease); }
html[dir="rtl"] .sup-list a::after{ content:"\2196"; }
.sup-list a:hover::after{ transform:translate(3px,-3px); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{ background:var(--paper); border-block-start:1px solid var(--ink); padding-block:clamp(2.6rem,5vw,3.4rem) 1.8rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr .8fr 1fr; gap:2rem; align-items:start; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-brand{ display:flex; gap:.9rem; align-items:flex-start; max-width:36ch; }
.foot-brand .mark{ width:44px; height:44px; flex:0 0 auto; }
.foot-brand .en{ display:block; font-family:var(--font-display); font-size:1.16rem; }
html[dir="rtl"] .foot-brand .en{ font-family:var(--font-ar); }
.foot-brand .ar{ display:block; font-family:var(--font-ar); color:var(--ink-soft); font-size:.88rem; }
.memorial{ display:block; margin-block-start:.7rem; font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:.98rem; }
html[dir="rtl"] .memorial{ font-family:var(--font-ar); font-style:normal; }
.foot-col{ display:grid; gap:.4rem; align-content:start; }
.foot-lbl{ font-size:.7rem; font-weight:700; letter-spacing:var(--track); text-transform:uppercase; color:var(--gold); }
html[dir="rtl"] .foot-lbl{ letter-spacing:0; }
.foot-hq{ color:var(--ink); }
.foot-link{ color:var(--ink-soft); text-decoration:none; font-size:.94rem; word-break:break-word; transition:color .15s ease; }
.foot-link:hover{ color:var(--gold); }
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }
.socials{ display:flex; gap:.5rem; margin-block-start:.7rem; }
.socials a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink);
  transition:transform .14s var(--ease), border-color .15s ease, color .15s ease;
}
.socials a:hover{ transform:translateY(-3px); border-color:var(--gold); color:var(--gold); }
@media (prefers-reduced-motion: reduce){ .socials a:hover{ transform:none; } }
.socials svg{ width:19px; height:19px; }
.foot-bottom{ margin-block-start:2.2rem; padding-block-start:1.4rem; border-block-start:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:space-between; align-items:center; color:var(--ink-faint); font-size:var(--fs-small); }
/* the staff door. Deliberately the quietest thing in the footer: it is for the
   handful of people who edit the site, not an invitation to the reader. */
.foot-admin{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--ink-faint); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:.3rem .8rem;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.foot-admin svg{ width:13px; height:13px; flex:0 0 auto; }
.foot-admin:hover, .foot-admin:focus-visible{ color:var(--gold); border-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, transparent); }

/* ============================================================
   BACK TO TOP + REVEAL
   ============================================================ */
.to-top{
  position:fixed; inset-block-end:1.4rem; inset-inline-end:1.4rem; z-index:60;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--paper); border:none; cursor:pointer; box-shadow:var(--shadow-lift);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .25s ease, transform .25s var(--ease), background .15s ease;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--teal); }
.to-top svg{ width:20px; height:20px; }
@media (prefers-reduced-motion: reduce){ .to-top{ transition:opacity .2s ease; transform:none; } }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.rays-anim{ transform-origin:50% 50%; animation:spin 120s linear infinite; }
@media (prefers-reduced-motion: reduce){ .rays-anim{ animation:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } }