/* ==========================================================================
   MOSAIC — Ethno-religious minorities of the Middle East
   Design language: sanctuary dark, parchment ink, lamplight gold.
   Display: Marcellus · Body: Newsreader · Data: IBM Plex Sans
   ========================================================================== */

:root {
  /* surfaces */
  --void: #100d0b;
  --surface: #1a1410;
  --surface-2: #241c15;
  /* ink */
  --parchment: #eae0ce;
  --parchment-dim: #a89a83;
  --parchment-faint: #7a6d5a;
  --hairline: rgba(234, 224, 206, 0.14);
  --hairline-soft: rgba(234, 224, 206, 0.08);
  /* lamplight */
  --gold: #be8825;
  --gold-bright: #d9a441;
  --gold-glow: rgba(217, 164, 65, 0.16);
  /* community accents (validated for dark surface) */
  --c-yazidi: #2fa48d;
  --c-assyrian: #c75f3d;
  --c-druze: #6aa33f;
  --c-copt: #be8825;
  --c-mandaean: #4e9bd1;
  /* page accent — overridden per community page */
  --accent: var(--gold);
  --accent-bright: var(--gold-bright);
  /* type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-data: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  /* rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 7rem;
  --measure: 66ch;
  --wrap: 72rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto; /* the width/height ATTRIBUTES set aspect ratio only; any
                   rule that wants a fixed height still overrides this */
  display: block;
}

a {
  color: var(--accent-bright);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--gold);
  color: var(--void);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--parchment);
}

p {
  margin: 0 0 1.4em;
}

/* --------------------------------------------------------------------------
   Per-community accents
   -------------------------------------------------------------------------- */

body.page-yazidi {
  --accent: var(--c-yazidi);
  --accent-bright: #4fc4ac;
  --accent-glow: rgba(47, 164, 141, 0.15);
}

body.page-assyrian {
  --accent: var(--c-assyrian);
  --accent-bright: #e0805f;
  --accent-glow: rgba(199, 95, 61, 0.15);
}

body.page-druze {
  --accent: var(--c-druze);
  --accent-bright: #8cc45f;
  --accent-glow: rgba(106, 163, 63, 0.14);
}

body.page-copt {
  --accent: var(--c-copt);
  --accent-bright: #d9a441;
  --accent-glow: rgba(190, 136, 37, 0.16);
}

body.page-mandaean {
  --accent: var(--c-mandaean);
  --accent-bright: #74b6e3;
  --accent-glow: rgba(78, 155, 209, 0.15);
}

body.page-alawite   { --accent: #97a73b; --accent-bright: #b5c45c; --accent-glow: rgba(151, 167, 59, 0.14); }
body.page-jewish    { --accent: #6e86dc; --accent-bright: #93a6ea; --accent-glow: rgba(110, 134, 220, 0.15); }
body.page-armenian  { --accent: #9b7fd4; --accent-bright: #b7a0e6; --accent-glow: rgba(155, 127, 212, 0.15); }
body.page-maronite  { --accent: #45a865; --accent-bright: #6cc48a; --accent-glow: rgba(69, 168, 101, 0.14); }
body.page-kurdish   { --accent: #d9a441; --accent-bright: #e8bc68; --accent-glow: rgba(217, 164, 65, 0.16); }
body.page-alevi     { --accent: #d05f6a; --accent-bright: #e28691; --accent-glow: rgba(208, 95, 106, 0.15); }
body.page-ismaili   { --accent: #37a0ae; --accent-bright: #5fc0cd; --accent-glow: rgba(55, 160, 174, 0.15); }
body.page-bahai     { --accent: #c9629c; --accent-bright: #dc8ab6; --accent-glow: rgba(201, 98, 156, 0.15); }
body.page-turkmen   { --accent: #c97a29; --accent-bright: #e0994c; --accent-glow: rgba(201, 122, 41, 0.15); }
body.page-amazigh   { --accent: #58b7c9; --accent-bright: #82cdda; --accent-glow: rgba(88, 183, 201, 0.15); }
body.page-circassian{ --accent: #7fa6c6; --accent-bright: #a2c1da; --accent-glow: rgba(127, 166, 198, 0.15); }
body.page-samaritan { --accent: #cbb758; --accent-bright: #dccc7e; --accent-glow: rgba(203, 183, 88, 0.15); }
body.page-zoroastrian { --accent: #c4574f; --accent-bright: #da7f78; --accent-glow: rgba(196, 87, 79, 0.15); }
body.page-yarsan    { --accent: #82b54b; --accent-bright: #a0cc70; --accent-glow: rgba(130, 181, 75, 0.14); }
body.page-shabak    { --accent: #b96fc4; --accent-bright: #cf94d7; --accent-glow: rgba(185, 111, 196, 0.15); }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.kicker {
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 var(--space-2);
}

.kicker::after {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 0.9rem;
  opacity: 0.7;
}

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

.prose .lede {
  font-size: 1.28rem;
  line-height: 1.55;
  color: var(--parchment);
}

.prose .lede::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  float: left;
  line-height: 0.82;
  padding-right: 0.12em;
  color: var(--accent-bright);
}

.dim {
  color: var(--parchment-dim);
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.9, 0.3, 1),
    transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
  transition-delay: var(--d, 0s);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Site nav
   -------------------------------------------------------------------------- */

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.9rem clamp(1.25rem, 4vw, 2.5rem);
  transition: background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.site-nav.solid {
  background: rgba(16, 13, 11, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--parchment);
}

.brand-logo {
  height: 2.7rem;
  width: auto;
  display: block;
  flex: none;
}

/* two-line wordmark: "Minorities" over a small "in the Middle East" */
.brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  white-space: nowrap;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.brand-sub {
  font-family: var(--font-data);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-top: 0.32rem;
}

.site-footer .brand-logo {
  height: 3.2rem;
}

@media (max-width: 560px) {
  .brand-logo {
    height: 2.3rem;
  }

  .brand-name {
    font-size: 0.9rem;
  }

  .brand-sub {
    font-size: 0.5rem;
  }
}

.brand:hover {
  text-decoration: none;
  color: var(--gold-bright);
}

.brand .tail {
  color: var(--gold-bright);
}

.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-family: var(--font-data);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The six section links: an inline row here, a drop-down panel on phones. */
.nav-sections {
  display: flex;
  align-items: center;
  gap: inherit;
}

/* Hamburger — hidden until the panel breakpoint. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 1.05rem;
  height: 1.5px;
  margin: 0 auto;
  background: var(--gold-bright);
  transition: transform 0.28s ease, opacity 0.2s ease;
}

.site-nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.site-nav .nav-links a {
  color: var(--parchment-dim);
  padding: 0.5rem 0;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a[aria-current="page"] {
  color: var(--parchment);
  text-decoration: none;
}

/* Menu pills — refined ghost buttons: subtle glass, gentle lift, soft shadow. */
.support-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-family: var(--font-data);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-dim) !important;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline);
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
}

.support-btn svg {
  width: 0.9em;
  height: 0.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.support-btn:hover {
  color: var(--parchment) !important;
  background: rgba(217, 164, 65, 0.09);
  border-color: rgba(217, 164, 65, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  text-decoration: none !important;
}

/* Contact pill: quiet, parchment ink. */
.contact-btn { color: var(--parchment-dim) !important; }

/* Language toggle: a touch of gold to signal the switch. */
.lang-btn {
  color: var(--gold-bright) !important;
  border-color: rgba(217, 164, 65, 0.35);
}
.lang-btn:hover { color: var(--gold-bright) !important; }

/* --------------------------------------------------------------------------
   Hero — the lamp is lit
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  filter: saturate(0.82) brightness(0.85);
  will-change: transform;
}

/* dark veil */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--void) 4%, rgba(16, 13, 11, 0.72) 34%, rgba(16, 13, 11, 0.45) 62%, rgba(16, 13, 11, 0.62) 100%);
}

/* the lamplight bloom */
.hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 2;
  background: radial-gradient(
    ellipse 52% 44% at 28% 68%,
    var(--accent-glow, var(--gold-glow)),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 2.4s ease 0.5s;
  pointer-events: none;
}

body.lit .hero::after {
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
  padding-block: var(--space-5) var(--space-5);
  width: 100%;
}

.hero h1 {
  font-size: clamp(2.75rem, 8.5vw, 6.25rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

.hero .native-name {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  letter-spacing: 0.08em;
  color: var(--parchment-dim);
  margin-top: 0.8rem;
}

.hero .dek {
  max-width: 46ch;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: var(--parchment-dim);
  margin: 0;
}

/* Byline on the first-person reportage; the date lives in the footer note. */
.hero .byline {
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-faint);
  margin: var(--space-3) 0 0;
}

.hero .byline span {
  color: var(--accent-bright);
  font-weight: 600;
}

.hero-rise {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 0.9, 0.3, 1),
    transform 1.1s cubic-bezier(0.22, 0.9, 0.3, 1);
  transition-delay: var(--d, 0s);
}

body.lit .hero-rise {
  opacity: 1;
  transform: none;
}

/* Map hero — the words for Home */
.hero.hero-home {
  background: var(--void);
}

.hero-map {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-map svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* single fill, no strokes: adjacent countries merge into one landmass,
   so only the outer coastline reads as a line against the dark sea */
.hero-map .land {
  fill: #1e1712;
  stroke: none;
}

.hero-map .home-word {
  /* Display font first so the Latin and Cyrillic words match the site's
     titles; each Noto covers only its own script, so the others fall
     through to the right face automatically. */
  font-family: var(--font-display), "Noto Sans Arabic", "Noto Sans Hebrew",
    "Noto Sans Armenian", "Noto Sans Syriac", "Noto Sans Mandaic",
    "Noto Sans Samaritan", "Noto Sans Coptic", "Noto Sans Tifinagh",
    var(--font-data), serif;
  letter-spacing: .06em;
  fill: var(--gold-bright);
  paint-order: stroke;
  stroke: rgba(16, 13, 11, 0.7);
  stroke-width: 4px;
  opacity: 0;
  animation: wordflash 1.15s ease var(--wd, 0s) both;
}

@keyframes wordflash {
  0% { opacity: 0; }
  35% { opacity: 0.95; }
  75% { opacity: 0.7; }
  100% { opacity: 0; }
}

/* English "Home" is the finale: it fades in, holds a beat, then leaves —
   after which the hero map is empty (no end scene). */
.hero-map .home-last {
  animation: wordfinale 2.8s ease var(--wd, 0s) both;
}

@keyframes wordfinale {
  0% { opacity: 0; }
  22% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; }
}

.hero.hero-home::before {
  background:
    linear-gradient(to top, var(--void) 6%, rgba(16, 13, 11, 0.35) 40%, rgba(16, 13, 11, 0.15) 70%, rgba(16, 13, 11, 0.4) 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* no animation: show the scattered words as a quiet static image */
  .hero-map .home-word {
    animation: none;
    opacity: 0.3;
  }
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: 2.2rem;
  width: 1px;
  height: 64px;
  background: var(--hairline);
  overflow: hidden;
}

.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-bright);
  transform: translateY(-100%);
  animation: cue 2.4s ease-in-out infinite;
}

@keyframes cue {
  55% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* --------------------------------------------------------------------------
   At-a-glance strip
   -------------------------------------------------------------------------- */

.glance {
  border-block: 1px solid var(--hairline);
  background: var(--surface);
}

.glance dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
  margin: 0;
}

.glance .cell {
  padding: var(--space-3) var(--space-3);
  border-left: 1px solid var(--hairline-soft);
}

.glance .cell:first-child {
  border-left: 0;
}

.glance dt {
  font-family: var(--font-data);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-faint);
  margin-bottom: 0.45rem;
}

.glance dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--parchment);
}

.glance dd small {
  display: block;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--parchment-dim);
  margin-top: 0.3rem;
}

/* --------------------------------------------------------------------------
   Sections & figures
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-6);
}

.section + .section {
  padding-top: 0;
}

.split {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }

  .split.flip > .split-media {
    order: -1;
  }
}

/* The prose in these sections roughly doubled in the rewrite, and a 3:2
   photograph beside 1,400px of text left a column of nothing: centred, so the
   emptiness sat above AND below the picture. Upright photographs are tall
   enough to hold their side; landscape ones are not. Those now start at the
   top of the section and travel with the reader, so the photograph stays with
   the passage it belongs to instead of scrolling away in the first screen.
   Held back on short viewports, where a pinned figure would crowd the text. */
@media (min-width: 900px) and (min-height: 700px) {
  .split-media.landscape {
    align-self: start;
    position: sticky;
    top: 6.5rem;
  }
}

.figure {
  margin: 0;
}

.figure img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  filter: saturate(0.88);
}

.figure.portrait img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.figure.landscape img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.figure figcaption {
  font-family: var(--font-data);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--parchment-faint);
  margin-top: 0.8rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
}

.figure figcaption .credit {
  display: block;
  opacity: 0.75;
}

.full-figure {
  margin: 0;
  position: relative;
}

.full-figure img {
  width: 100%;
  height: clamp(20rem, 60vh, 34rem);
  object-fit: cover;
  filter: saturate(0.85) brightness(0.9);
}

/* For near-square originals, where the standard band would show barely a
   third of the frame and cut faces off a group portrait. */
.full-figure.tall img {
  height: clamp(24rem, 84vh, 46rem);
}

/* Upright originals are not banding material at all. A 2:3 photograph forced
   through the wide band shows about a quarter of the frame, and the quarter it
   keeps is the middle: no sky, no ground, no faces. These are shown whole
   instead, at a height that suits a page rather than a wall, with the caption
   underneath where it can be read against the page instead of over the image. */
.full-figure.portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.full-figure.portrait img {
  width: auto;
  max-width: min(100%, 30rem);
  height: auto;
  max-height: min(82vh, 42rem);
  border-radius: 3px;
}

.full-figure.portrait figcaption {
  position: static;
  left: auto; bottom: auto;
  max-width: 34rem;
  margin-top: 0.9rem;
  background: none;
  padding: 0;
  line-height: 1.5;
  text-align: start;
}

.full-figure figcaption {
  position: absolute;
  left: clamp(1.25rem, 4vw, 3rem);
  bottom: 1.2rem;
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--parchment-dim);
  background: rgba(16, 13, 11, 0.72);
  padding: 0.5rem 0.9rem;
  border-radius: 2px;
  max-width: 34rem;
}

/* Contained portrait/photo figure — shows the whole image (no crop), sits
   at a modest width so upscaling never blurs it. Caption below. */
.photo-figure {
  margin: var(--space-3) auto;
  max-width: 40rem;
  text-align: center;
}

.photo-figure img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  filter: saturate(0.92);
}

.photo-figure figcaption {
  margin-top: 0.8rem;
  font-family: var(--font-data);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--parchment-dim);
  text-align: start;
}

/* Partnership tiers */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.4rem;
  margin-top: 2.2rem;
}

.tier-card {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1.6rem 1.5rem;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
}

.tier-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0.5rem 0 0.7rem;
}

.tier-card .dim {
  flex: 1;
}

.tier-k {
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0;
}

.tier-eg {
  font-family: var(--font-data);
  font-size: 0.74rem;
  color: var(--parchment-dim);
  font-style: italic;
  margin: 0.9rem 0 1.2rem;
}

.tier-card .btn-ghost {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */

.pullquote {
  margin: 0;
  padding: var(--space-5) 0;
  text-align: center;
}

.pullquote blockquote {
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.2vw, 2.9rem);
  line-height: 1.28;
  color: var(--parchment);
}

.pullquote blockquote::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  background: var(--accent);
  margin: 0 auto var(--space-3);
}

.pullquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-data);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment-faint);
}

/* --------------------------------------------------------------------------
   Timeline — the procession
   -------------------------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 46rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--accent), var(--hairline));
}

.timeline li {
  position: relative;
  padding: 0 0 var(--space-4) 2.4rem;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 1px solid var(--accent-bright);
  background: var(--void);
  transform: rotate(45deg);
}

.timeline .when {
  font-family: var(--font-data);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-bright);
  display: block;
  margin-bottom: 0.3rem;
}

.timeline .what {
  display: block;
  max-width: 58ch;
  color: var(--parchment-dim);
}

.timeline .what strong {
  color: var(--parchment);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Charts
   -------------------------------------------------------------------------- */

.chart-block {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: 4px;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
}

.chart-block h3 {
  margin-bottom: 0.4rem;
}

.chart-block .chart-sub {
  font-family: var(--font-data);
  font-size: 0.82rem;
  color: var(--parchment-dim);
  margin: 0 0 var(--space-3);
}

.chart-block svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-block .bar {
  transform: scaleX(0);
  transform-origin: left center;
  transform-box: fill-box;
  transition: transform 1s cubic-bezier(0.22, 0.9, 0.3, 1);
  transition-delay: var(--d, 0s);
}

.chart-block.grow .bar {
  transform: scaleX(1);
}

/* diaspora bars: same accent, hollow treatment — population outside the region */
.chart-block .bar.diaspora {
  fill-opacity: 0.28;
  stroke: var(--accent-bright);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.chart-block .trend {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 2.2s ease-out 0.2s;
}

.chart-block.grow .trend {
  stroke-dashoffset: 0;
}

.chart-block .axis-label,
.chart-block .bar-label,
.chart-block .bar-value {
  font-family: var(--font-data);
  font-size: 12px;
  fill: var(--parchment-dim);
}

.chart-block .bar-label {
  fill: var(--parchment);
}

.chart-block .bar-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--parchment);
}

.chart-block .gridline {
  stroke: var(--hairline-soft);
}

.chart-block .chart-note {
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--parchment-faint);
  margin: var(--space-2) 0 0;
}

.chart-block details {
  margin-top: var(--space-2);
  font-family: var(--font-data);
  font-size: 0.85rem;
}

.chart-block summary {
  cursor: pointer;
  color: var(--parchment-dim);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chart-block table {
  width: 100%;
  margin-top: 0.8rem;
  border-collapse: collapse;
  color: var(--parchment-dim);
}

.chart-block th,
.chart-block td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--hairline-soft);
  font-variant-numeric: tabular-nums;
}

.chart-block th {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment-faint);
}

/* --------------------------------------------------------------------------
   Emblem
   -------------------------------------------------------------------------- */

/* <use> clones live in a shadow root that document selectors can't reach,
   so the line style rides on inherited SVG properties set on the svg itself. */
.emblem-svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.emblem-feature {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 800px) {
  .emblem-feature {
    grid-template-columns: minmax(14rem, 1fr) 2fr;
  }
}

.emblem-feature .emblem-svg {
  width: min(15rem, 60vw);
  margin-inline: auto;
  color: var(--accent-bright);
}

.emblem-feature .emblem-svg {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 2.6s ease 0.2s;
}

.emblem-feature.in .emblem-svg {
  stroke-dashoffset: 0;
}

/* --------------------------------------------------------------------------
   Mosaic grid (index)
   -------------------------------------------------------------------------- */

.mosaic {
  display: grid;
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.tile {
  position: relative;
  background: var(--void);
  padding: var(--space-4) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 15rem;
  color: var(--parchment);
  transition: background 0.35s ease;
}

.tile:hover {
  text-decoration: none;
  background: var(--surface);
}

a.tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--tile-accent, var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

a.tile:hover::after {
  transform: scaleX(1);
}

.tile .emblem-svg {
  width: 3.4rem;
  color: var(--tile-accent, var(--parchment-dim));
  transition: transform 0.35s ease;
}

a.tile:hover .emblem-svg {
  transform: scale(1.08);
}

.tile h3 {
  margin: 0;
  font-size: 1.35rem;
}

.tile .native {
  font-style: italic;
  color: var(--parchment-faint);
  font-size: 0.92rem;
  margin: -0.5rem 0 0;
}

.tile .blurb {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--parchment-dim);
  margin: 0;
  flex-grow: 1;
}

.tile .pop {
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--parchment-dim);
  margin: 0;
}

.tile .pop strong {
  color: var(--tile-accent, var(--gold-bright));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tile .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-faint);
}

.tile .tag {
  color: var(--gold-bright);
}

.tile.soon {
  opacity: 0.62;
}

.tile.soon .tag {
  color: var(--parchment-faint);
}

/* --------------------------------------------------------------------------
   Region maps
   -------------------------------------------------------------------------- */

.region-map {
  position: relative;
  background: #0b0908;
  border: 1px solid var(--hairline-soft);
  border-radius: 4px;
  overflow: hidden;
}

.region-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.region-map .country {
  fill: #1d1712;
  stroke: rgba(234, 224, 206, 0.1);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 0.3s ease;
}

.region-map .zone-halo {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.region-map.in .zone-halo,
.region-map.grown .zone-halo {
  opacity: 1;
}

.region-map .zone-core {
  cursor: pointer;
}

/* Settlement polygons (Gulf/2000-style redraws) */
.region-map .area-glow {
  opacity: 0;
  fill-opacity: 0.32;
  pointer-events: none;
  transition: opacity 1.6s ease;
}

.region-map .zone-area {
  opacity: 0;
  fill-opacity: 0.15;
  stroke-opacity: 0.75;
  outline: none;
  transition: opacity 1.6s ease, fill-opacity 0.3s ease;
}

.region-map.in .area-glow,
.region-map.grown .area-glow,
.region-map.in .zone-area,
.region-map.grown .zone-area {
  opacity: 1;
}

.region-map .zone-area:hover,
.region-map .zone-area:focus-visible {
  fill-opacity: 0.3;
}

.region-map .map-label {
  fill: var(--parchment);
  font-family: var(--font-data);
  font-weight: 600;
  pointer-events: none;
}

.region-map .city-dot {
  fill: var(--parchment-faint);
}

.region-map .city-label {
  fill: var(--parchment-faint);
  paint-order: stroke;
  stroke: rgba(11, 9, 8, 0.85);
  stroke-width: 3px;
  font-family: var(--font-data);
  pointer-events: none;
}

/* Small-caps gloss beneath a city name, and the label riding a route line. */
.region-map .city-sub,
.region-map .route-label {
  font-family: var(--font-data);
  font-weight: 600;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(11, 9, 8, 0.85);
  stroke-width: 3px;
  pointer-events: none;
}

.region-map .city-sub {
  fill: var(--parchment-faint);
  opacity: 0.75;
}

.region-map .route-head {
  opacity: 0;
  transition: opacity 0.9s ease 1.1s;
}

.region-map.in .route-head,
.region-map.grown .route-head {
  opacity: 1;
}

.map-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: rgba(16, 13, 11, 0.94);
  border: 1px solid var(--hairline);
  color: var(--parchment);
  font-family: var(--font-data);
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 0.45rem 0.75rem;
  border-radius: 3px;
  max-width: 16rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.map-tooltip .tt-pop {
  display: block;
  color: var(--accent-bright, var(--gold-bright));
  font-weight: 600;
  margin: 0.05rem 0 0.1rem;
}
.map-tooltip .tt-sub {
  color: var(--parchment-dim);
  display: block;
}

/* Subtle country/region names on region maps */
.region-map .map-country {
  fill: var(--parchment-faint);
  fill-opacity: 0.45;
  font-family: var(--font-data);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.map-caption {
  font-family: var(--font-data);
  font-size: 0.78rem;
  color: var(--parchment-faint);
  margin-top: 0.8rem;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.map-legend a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--parchment-dim);
  padding: 0.3rem 0.2rem;
}

.map-legend a:hover {
  color: var(--parchment);
  text-decoration: none;
}

.map-legend .swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--sw);
  flex: none;
}

/* --------------------------------------------------------------------------
   Traditions — "what makes them unique"
   -------------------------------------------------------------------------- */

.traditions {
  display: grid;
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  margin-top: var(--space-4);
}

@media (min-width: 720px) {
  .traditions {
    grid-template-columns: 1fr 1fr;
  }
}

.traditions .trad {
  background: var(--void);
  padding: var(--space-3);
}

.traditions .trad h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.traditions .trad h3::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1px;
  background: var(--accent);
  margin-bottom: 0.8rem;
}

.traditions .trad p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--parchment-dim);
}

/* --------------------------------------------------------------------------
   Prev / next footer nav
   -------------------------------------------------------------------------- */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
}

.pager a {
  padding: var(--space-4) clamp(1.25rem, 4vw, 3rem);
  color: var(--parchment);
  transition: background 0.3s ease;
}

.pager a:hover {
  background: var(--surface);
  text-decoration: none;
}

.pager a + a {
  border-left: 1px solid var(--hairline);
  text-align: right;
}

.pager .dir {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-faint);
  display: block;
  margin-bottom: 0.5rem;
}

.pager .name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
}

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

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-5);
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--parchment-dim);
}

.site-footer .brand {
  display: inline-flex;
  margin-bottom: var(--space-2);
}

.site-footer details {
  margin-top: var(--space-3);
}

.site-footer summary {
  cursor: pointer;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--parchment-faint);
}

.site-footer ul.credits {
  list-style: none;
  padding: 0.8rem 0 0;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--parchment-faint);
}

.site-footer .note {
  max-width: 60ch;
  font-size: 0.8rem;
  color: var(--parchment-faint);
}

/* --------------------------------------------------------------------------
   Reduced motion & small screens
   -------------------------------------------------------------------------- */

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

  .reveal,
  .hero-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero::after {
    opacity: 1;
    transition: none;
  }

  .hero-media img {
    transform: none !important;
  }

  .scroll-cue::after {
    animation: none;
  }

  .chart-block .bar {
    transform: scaleX(1);
    transition: none;
  }

  .chart-block .trend {
    stroke-dashoffset: 0;
    transition: none;
  }

  .emblem-feature .emblem-svg {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Looping video figures
   -------------------------------------------------------------------------- */

.figure video,
.full-figure video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  filter: saturate(0.9);
}

.full-figure video {
  height: clamp(20rem, 60vh, 34rem);
  object-fit: cover;
  border-radius: 0;
}

.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  filter: saturate(0.82) brightness(0.85);
}

/* --------------------------------------------------------------------------
   Map routes
   -------------------------------------------------------------------------- */

.region-map .route {
  fill: none;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
  opacity: 0.85;
  animation: routeflow 26s linear infinite;
}

@keyframes routeflow {
  to { stroke-dashoffset: -520; }
}

@media (prefers-reduced-motion: reduce) {
  .region-map .route {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Stories
   -------------------------------------------------------------------------- */

.btn-ghost {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment);
  border: 1px solid var(--hairline);
  padding: 0.8rem 1.6rem;
  border-radius: 2px;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.btn-ghost:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  text-decoration: none;
}

.story-feature {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
  overflow: hidden;
  border-radius: 4px;
}

@media (min-width: 900px) {
  .story-feature {
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
  }
}

.story-feature .sf-media img {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
  display: block;
  filter: saturate(0.88);
}

.story-feature .sf-body {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.story-cards {
  display: grid;
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
}

@media (min-width: 800px) {
  .story-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.story-card {
  background: var(--void);
  color: var(--parchment);
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;
}

.story-card:hover {
  background: var(--surface);
  text-decoration: none;
}

.story-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.88);
}

.story-card .sc-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.story-card h3 {
  margin: 0;
  font-size: 1.3rem;
}

.story-card .sc-dek {
  color: var(--parchment-dim);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.story-card .sc-meta {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

/* stat strip inside stories */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  margin-block: var(--space-4);
}

/* Emblem row — the seven holy beings of Yazidism, and any later set like it.
   Line figures only; the first one leads at a larger size. */
.emblem-row {
  list-style: none;
  margin: var(--space-4) 0 var(--space-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--space-3) var(--space-2);
  align-items: end;
}

.emblem-row .emblem {
  text-align: center;
  color: var(--parchment-faint);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease var(--d, 0s), transform 0.8s ease var(--d, 0s);
}

.reveal.in .emblem,
.emblem-row.in .emblem {
  opacity: 1;
  transform: none;
}

.emblem-row .emblem-svg {
  display: block;
  width: 3.1rem;
  height: 3.6rem;
  margin: 0 auto 0.6rem;
  overflow: visible;
}

.emblem-row .emblem.lead {
  color: var(--accent-bright);
}

.emblem-row .emblem.lead .emblem-svg {
  width: 4.4rem;
  height: 5.1rem;
}

.emblem-row .nm {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--parchment-dim);
  line-height: 1.2;
}

.emblem-row .emblem.lead .nm {
  color: var(--parchment);
  font-size: 1.3rem;
}

.emblem-row .sub {
  display: block;
  font-family: var(--font-data);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-top: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .emblem-row .emblem { opacity: 1; transform: none; transition: none; }
}

.stats-strip .stat {
  background: var(--surface);
  padding: var(--space-3);
}

.stats-strip .stat .big {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--accent-bright, var(--gold-bright));
  display: block;
  font-variant-numeric: tabular-nums;
}

.stats-strip .stat .small {
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  display: block;
  margin-top: 0.4rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  /* icon-only pills so Contact + Support never crowd the row */
  .support-btn .btn-label {
    display: none;
  }

  .support-btn {
    padding: 0.4rem 0.5rem;
  }

  .support-btn svg {
    width: 1.05em;
    height: 1.05em;
  }
}

@media (max-width: 720px) {
  .site-nav {
    padding-inline: 1rem;
  }

  .site-nav .nav-links {
    gap: 0.8rem;
    font-size: 0.72rem;
  }
}

/* (No links are hidden on small screens any more — they move into the
   .nav-sections panel instead. The old href-matching rules also caught the
   language toggle on /data and /timeline, hiding it entirely.) */

@media (max-width: 640px) {
  /* keep chart labels legible: charts scroll sideways instead of shrinking */
  .chart-block {
    overflow-x: auto;
  }

  .chart-block svg {
    min-width: 33rem;
  }

  .glance .cell {
    border-left: 0;
    border-top: 1px solid var(--hairline-soft);
  }

  .glance .cell:first-child {
    border-top: 0;
  }

  .pager {
    grid-template-columns: 1fr;
  }

  .pager a + a {
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }

  .site-nav .nav-links {
    gap: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Trust layer: skip link, gold hero line, footer columns, further reading,
   document pages, data tables, shared-timeline tags
   -------------------------------------------------------------------------- */

/* Skip link — visually hidden until focused */
.skip-link {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 200;
  transform: translateY(-300%);
  background: var(--void);
  color: var(--gold-bright);
  border: 1px solid var(--gold-bright);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: none;
  text-decoration: none;
}

/* Homepage hero title: "Middle East" white in the display face, "Minorities"
   below it in a gold cursive script (Newsreader italic) for a hand-set feel. */
.hero-home h1 {
  color: #ffffff;
}

.hero-home h1 .h1-gold {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.015em;
  font-size: 1.04em;
  line-height: 1.08;
  color: var(--gold-bright);
}

/* Footer link columns */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.6rem;
  margin-bottom: 2.4rem;
}

.footer-brand .note {
  max-width: 36ch;
}

.footer-col h3 {
  font-family: var(--font-data);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0.4rem 0 0.9rem;
}

.footer-col a {
  display: block;
  color: var(--parchment-dim);
  font-size: 0.92rem;
  padding: 0.26rem 0;
}

.footer-col a:hover {
  color: var(--parchment);
  text-decoration: none;
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
}

/* Further reading cards */
.fr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
  max-width: 46rem;
}

.fr-list a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.fr-list a:hover {
  border-color: var(--accent, var(--gold));
  background: rgba(217, 164, 65, 0.04);
  text-decoration: none;
}

.fr-title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--parchment);
}

.fr-src {
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

/* Document pages (about, methodology, policies, data, timeline) */
.doc-title {
  font-size: clamp(2.3rem, 5.5vw, 3.9rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

.page-doc .lede {
  max-width: 62ch;
}

.draft-note {
  color: var(--gold-bright);
  font-style: italic;
}

.bib-h {
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 2.2rem 0 0.8rem;
}

ul.bib {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.bib li {
  padding: 0.5rem 0 0.5rem 1.4rem;
  border-bottom: 1px solid var(--hairline-soft);
  position: relative;
  color: var(--parchment-dim);
}

ul.bib li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* Data tables */
.table-scroll {
  overflow-x: auto;
  margin-top: 1.6rem;
}

.data-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.data-table th {
  font-family: var(--font-data);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--hairline);
}

.data-table td {
  padding: 0.9rem 0.8rem;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: top;
  color: var(--parchment-dim);
}

.data-table td strong {
  color: var(--parchment);
  font-weight: 500;
}

.data-table .who {
  white-space: nowrap;
}

.data-table .who a {
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 1.02rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.data-table .who .swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--sw);
  flex: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--sw) 60%, transparent);
}

.chip {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.74rem;
  line-height: 1.5;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--parchment-dim);
  margin: 0.14rem 0.35rem 0.14rem 0;
}

.chip b {
  font-weight: 600;
}

.chip.st-yes { color: #a4c487; border-color: rgba(164, 196, 135, 0.45); }
.chip.st-part { color: var(--gold-bright); border-color: rgba(217, 164, 65, 0.45); }
.chip.st-no { color: var(--parchment-dim); border-color: var(--hairline); }
.chip.st-risk { color: #e08a72; border-color: rgba(224, 138, 114, 0.5); }

.chip.lv-vul { color: var(--gold-bright); border-color: rgba(217, 164, 65, 0.45); }
.chip.lv-def { color: #dfa35c; border-color: rgba(223, 163, 92, 0.5); }
.chip.lv-sev { color: #e08a72; border-color: rgba(224, 138, 114, 0.5); }
.chip.lv-crit { color: #e76f5c; border-color: rgba(231, 111, 92, 0.6); }
.chip.lv-lit { color: var(--parchment-dim); border-style: dashed; }

.chip-legend {
  margin-top: 1.2rem;
}

/* Shared-timeline community tags */
.tl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.tl-tag {
  font-family: var(--font-data);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tag);
  border: 1px solid var(--tag);
  border-color: color-mix(in srgb, var(--tag) 45%, transparent);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  transition: border-color 0.2s ease;
}

.tl-tag:hover {
  border-color: var(--tag);
  text-decoration: none;
}

/* Homepage "also in the atlas" links */
.deeper {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-data);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--parchment-dim);
}

.deeper a {
  color: var(--parchment-dim);
  width: fit-content;
}

.deeper a:hover {
  color: var(--gold-bright);
  text-decoration: none;
}

/* Wider nav needs tighter tiers with six links */
@media (max-width: 1080px) {
  .site-nav .nav-links {
    gap: 1.05rem;
    font-size: 0.74rem;
  }
}

@media (max-width: 940px) {
  /* Map + Communities are one scroll away on the homepage */
  .nav-sections a[href*="#map"],
  .nav-sections a[href*="#mosaic"] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile navigation — the section links become a drop-down panel, so nothing
   has to be hidden to make the bar fit. Contact and the language toggle stay
   in the bar as icon pills.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
  }

  /* the bar needs its own backdrop once a panel hangs off it */
  .site-nav.menu-open {
    background: rgba(16, 13, 11, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--hairline-soft);
  }

  .nav-sections {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* fully opaque: this panel sits over body copy, so no show-through */
    background: #14100c;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid var(--hairline-soft);
    padding: 0.4rem 0 0.8rem;
    /* collapsed by default; opacity+visibility so it can animate */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.34s ease, opacity 0.24s ease, visibility 0s linear 0.34s;
  }

  .site-nav.menu-open .nav-sections {
    max-height: 26rem;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.34s ease, opacity 0.24s ease, visibility 0s;
  }

  /* every row a comfortable tap target */
  .nav-sections a[href*="#map"],
  .nav-sections a[href*="#mosaic"] {
    display: block;   /* re-shown: there is room for all six in the panel */
  }

  /* .site-nav .nav-links a sets `padding: .5rem 0`, so match its specificity */
  .site-nav .nav-sections a {
    padding: 0.9rem clamp(1.25rem, 5vw, 2.5rem);
    font-size: 0.82rem;
    border-bottom: 1px solid var(--hairline-soft);
  }

  .site-nav .nav-sections a:last-child {
    border-bottom: 0;
  }

  .site-nav .nav-sections a:hover,
  .site-nav .nav-sections a:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    color: var(--gold-bright);
    text-decoration: none;
  }

  .site-nav .nav-links {
    gap: 0.55rem;
  }

  /* ---- touch targets -----------------------------------------------------
     Standalone controls get a finger-sized box. Links inside a sentence are
     deliberately left alone (WCAG 2.5.8 exempts inline links). */
  .support-btn {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0.5rem 0.85rem;
  }

  details > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .map-legend a {
    min-height: 34px;
    align-items: center;
  }

  .tl-tag {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
  }

  .deeper a {
    min-height: 34px;
    display: flex;
    align-items: center;
  }

  /* 0.72rem uppercase at 0.28em tracking is hard going on a phone */
  .kicker {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-sections,
  .nav-toggle span {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Arabic (RTL): type stack, joining-safe tracking, mirrored chrome
   -------------------------------------------------------------------------- */

html[lang="ar"] {
  --font-display: "Amiri", "Noto Naskh Arabic", serif;
  --font-body: "Noto Naskh Arabic", "Amiri", serif;
  --font-data: "IBM Plex Sans Arabic", sans-serif;
}

/* Letter-spacing disconnects joined Arabic letterforms — remove it everywhere. */
html[lang="ar"] *,
html[lang="ar"] *::before,
html[lang="ar"] *::after {
  letter-spacing: 0 !important;
}

/* Naskh needs taller lines than Newsreader. */
html[lang="ar"] p,
html[lang="ar"] .dek,
html[lang="ar"] li {
  line-height: 1.95;
}

/* Slanted Arabic reads poorly at display sizes. */
html[lang="ar"] .hero-home h1 .h1-gold,
html[lang="ar"] blockquote,
html[lang="ar"] em {
  font-style: normal;
}

[dir="rtl"] .kicker::after {
  margin-left: 0;
  margin-right: 0.9rem;
}

[dir="rtl"] .glance .cell {
  border-left: 0;
  border-right: 1px solid var(--hairline-soft);
}

[dir="rtl"] .glance .cell:first-child {
  border-right: 0;
}

[dir="rtl"] .figure figcaption {
  padding-left: 0;
  padding-right: 0.9rem;
  border-left: 0;
  border-right: 2px solid var(--accent);
}

[dir="rtl"] .full-figure figcaption {
  left: auto;
  right: clamp(1.25rem, 4vw, 3rem);
}

[dir="rtl"] .timeline::before {
  left: auto;
  right: 0.35rem;
}

[dir="rtl"] .timeline li {
  padding: 0 2.4rem var(--space-4) 0;
}

[dir="rtl"] .timeline li:last-child {
  padding-bottom: 0;
}

[dir="rtl"] .timeline li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .pager a + a {
  border-left: 0;
  border-right: 1px solid var(--hairline);
  text-align: left;
}

[dir="rtl"] .chart-block th,
[dir="rtl"] .chart-block td,
[dir="rtl"] .data-table th,
[dir="rtl"] .data-table td {
  text-align: right;
}

[dir="rtl"] .chart-block svg {
  direction: ltr;
}

[dir="rtl"] ul.bib li {
  padding: 0.5rem 1.4rem 0.5rem 0;
}

[dir="rtl"] ul.bib li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .skip-link {
  left: auto;
  right: 0.6rem;
}

@media (max-width: 640px) {
  [dir="rtl"] .glance .cell {
    border-right: 0;
  }
}

/* ==========================================================================
   Region-in-Depth prototype: layered map, charts, comparative table
   ========================================================================== */
.rl-note {
  border: 1px solid rgba(217, 164, 65, 0.3);
  background: rgba(217, 164, 65, 0.06);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-size: 0.92rem;
  color: var(--parchment-dim);
  line-height: 1.6;
}
.rl-note strong { color: var(--gold-bright); }

.region-lab { position: relative; margin-top: 1.4rem; }
.rl-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
.rl-btn {
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: 0.2s;
}
.rl-btn:hover { color: var(--parchment); border-color: rgba(217, 164, 65, 0.5); }
.rl-btn.on { color: var(--void); background: var(--gold-bright); border-color: var(--gold-bright); }
.rl-desc { font-size: 0.85rem; color: var(--parchment-dim); margin: 0 0 0.6rem; min-height: 1.2em; }

.rl-mapwrap {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0, rgba(40, 34, 28, 0.5), var(--void));
}
.rl-svg { display: block; width: 100%; height: auto; }
.rland { fill: #221d19; stroke: rgba(10, 8, 7, 0.85); stroke-width: 0.6; transition: fill 0.5s, opacity 0.2s; }
.rland:hover { opacity: 0.82; }
.rl-group { stroke: #0e0c0a; stroke-width: 1.4; cursor: pointer; transition: 0.15s; }
.rl-group:hover { r: 9; }

.rl-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin-top: 0.8rem; font-family: var(--font-data); font-size: 0.72rem; color: var(--parchment-dim);
}
.rl-lg-title { text-transform: uppercase; letter-spacing: 0.08em; color: var(--parchment); font-size: 0.66rem; }
.rl-sw { display: inline-flex; align-items: center; gap: 0.4rem; }
.rl-sw i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.rl-sw i.dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #0e0c0a; }
.rl-lg-break { flex-basis: 100%; height: 0; }

.rl-tip {
  position: absolute; z-index: 10; pointer-events: none;
  background: rgba(16, 13, 11, 0.96); border: 1px solid rgba(217, 164, 65, 0.35);
  border-radius: 8px; padding: 0.5rem 0.7rem; max-width: 220px;
  font-size: 0.8rem; color: var(--parchment); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.rl-tip strong { display: block; font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 0.15rem; }
.rl-tip span { color: var(--parchment-dim); font-size: 0.76rem; }

.rl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.rl-two h3 { font-family: var(--font-display); font-weight: 400; margin: 0.2rem 0 0.3rem; }
.rl-bars { width: 100%; height: auto; margin-top: 0.6rem; }

.rl-tablewrap { overflow-x: auto; margin-top: 1rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; }
.rl-table { border-collapse: collapse; width: 100%; min-width: 780px; font-size: 0.86rem; }
.rl-table th {
  font-family: var(--font-data); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: left; color: var(--parchment-dim); padding: 0.8rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14); white-space: nowrap;
}
.rl-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--parchment-dim); vertical-align: top; }
.rl-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.rl-name { white-space: nowrap; }
.rl-name a { color: var(--parchment); text-decoration: none; }
.rl-name a:hover { color: var(--gold-bright); }
.rl-name .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sw); margin-right: 0.5rem; vertical-align: middle; }
.rl-chip {
  display: inline-block; font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem; border-radius: 999px; color: #0e0c0a; background: var(--c, #555); white-space: nowrap; font-weight: 600;
}
.rl-lang { color: var(--parchment); min-width: 150px; }
.rl-vit { color: var(--c); font-size: 0.76rem; }

/* profile context chips */
.ctx-strip { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.4rem 0 0; }
.ctx-chip {
  flex: 1 1 200px; border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid var(--c, var(--accent-bright));
  border-radius: 8px; padding: 0.75rem 0.9rem; background: rgba(255, 255, 255, 0.02);
}
.ctx-chip .ctx-k { font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--parchment-dim); }
.ctx-chip .ctx-v { font-family: var(--font-display); font-size: 1.02rem; color: var(--parchment); margin-top: 0.2rem; }
.ctx-chip .ctx-n { font-size: 0.78rem; color: var(--parchment-dim); margin-top: 0.25rem; line-height: 1.45; }

/* Settlement-lab maps (Izady pilot): map + click-to-inspect panel */
.map-lab { display: block; }
.map-panel {
  margin-top: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-inline-start: 3px solid var(--accent-bright);
  border-radius: 12px;
  padding: 1.35rem 1.6rem;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.95rem;
  color: var(--parchment-dim);
}
.map-panel .mi-name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--parchment);
  margin: 0 0 0.35rem;
}
.map-panel .mi-pop {
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--accent-bright);
  margin: 0 0 0.25rem;
}
.map-panel .mi-towns {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  margin: 0 0 0.55rem;
}
.map-panel .mi-text { line-height: 1.65; margin: 0; }

.region-map .zone-area.has-info,
/* Interactive settlement cores: subtle hover, plus a gliding selection ring. */
.region-map .zone-core.has-info {
  cursor: pointer;
  outline: none;
  transition: filter 0.2s ease;
}
.region-map .zone-core.has-info:hover,
.region-map .zone-core.has-info:focus-visible { filter: brightness(1.4); }
.region-map .zone-core.sel { filter: brightness(1.15); }
.region-map .zone-selring {
  fill: none;
  stroke: var(--accent-bright);
  stroke-width: 0.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, cx 0.3s ease, cy 0.3s ease, r 0.3s ease;
}
.region-map .zone-selring.on { opacity: 0.8; }
.map-panel .mi-towns { margin-bottom: 0.6rem; }
.region-map .zone-area.t1 { fill-opacity: 0.24; }
.region-map .zone-area.t2 { fill-opacity: 0.1; }
.region-map .area-glow.t2 { opacity: 0.5; }
.region-map .zone-area.sel,
.region-map .zone-area.sel:hover {
  fill-opacity: 0.4;
  stroke-opacity: 1;
}

@media (max-width: 860px) {
  .map-lab { grid-template-columns: 1fr; }
  .map-panel { position: static; }
}

.region-callout {
  display: block; text-decoration: none; border: 1px solid rgba(217, 164, 65, 0.28);
  border-radius: 14px; padding: 1.5rem 1.7rem;
  background: linear-gradient(120deg, rgba(217, 164, 65, 0.08), rgba(217, 164, 65, 0.02));
  transition: border-color 0.25s, transform 0.25s;
}
.region-callout:hover { border-color: rgba(217, 164, 65, 0.6); transform: translateY(-2px); }
.region-callout h2 { font-family: var(--font-display); font-weight: 400; margin: 0.1rem 0 0.4rem; color: var(--gold-bright); }
.region-callout .kicker { color: var(--gold-bright); }
.region-callout .prose { max-width: 62ch; margin: 0; }

@media (max-width: 720px) { .rl-two { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---- Source citations -------------------------------------------------- */
/* A small superscript number at the end of a cited paragraph. Hover, focus
   or tap opens the full citation in a balloon; the same list repeats in the
   Sources section at the foot of the page. */
.cite { position: relative; display: inline-block; }
.cite-n {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .68em; line-height: 1;
  vertical-align: super;
  color: var(--accent-bright);
  padding: .1rem .22rem; margin-left: .06rem;
  opacity: .85;
}
.cite-n:hover, .cite-n:focus-visible { opacity: 1; text-decoration: underline; }
.cite-tip {
  position: absolute; bottom: calc(100% + .55rem); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: min(21rem, 82vw);
  background: #14100c;                       /* opaque: sits over body copy */
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
  padding: .6rem .8rem;
  font-size: .78rem; line-height: 1.5; text-align: left;
  color: #e8e2d6; font-style: normal;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  /* display, not visibility: a hidden tip still occupies layout, and one
     near the right margin widens the page into horizontal scroll on mobile. */
  display: none;
  z-index: 60;
}
.cite-tip em { color: #fff; font-style: italic; }
.cite-tip a { color: var(--accent-bright); white-space: nowrap; }
.cite:hover .cite-tip, .cite:focus-within .cite-tip, .cite.open .cite-tip {
  display: block;
}
/* Balloons near the viewport edge slide sideways instead of clipping. */
.cite.edge-l .cite-tip { left: 0; transform: none; }
.cite.edge-r .cite-tip { left: auto; right: 0; transform: none; }

.src-section .wrap { max-width: 46rem; }
/* Folded by default: the list is reference apparatus, not reading matter.
   The summary row is the kicker plus a count; the marker is drawn by us. */
.src-fold summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .6rem;
  min-height: 44px;                              /* touch target */
  border-top: 1px solid color-mix(in srgb, var(--accent-bright) 16%, transparent);
  padding-top: .55rem;
  transition: border-color .2s ease;
}
.src-fold summary:hover,
.src-fold[open] summary {
  border-top-color: color-mix(in srgb, var(--accent-bright) 34%, transparent);
}
.src-fold summary::-webkit-details-marker { display: none; }
.src-fold summary .kicker { margin: 0; }

/* One family of drawn marks: same 24-unit grid and hairline stroke as the
   nav icons, so the apparatus looks made rather than typed. */
.src-mark, .src-chev {
  display: inline-flex; flex: none;
  color: var(--accent-bright);
}
.src-mark svg, .src-chev svg {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.src-mark { font-size: .85rem; opacity: .5; transition: opacity .2s ease; }
.src-fold summary:hover .src-mark, .src-fold[open] .src-mark { opacity: .8; }
.src-chev {
  margin-left: auto; font-size: .95rem; opacity: .55;
  transition: transform .22s ease, opacity .2s ease;
}
.src-fold summary:hover .src-chev { opacity: .9; }
.src-fold[open] .src-chev { transform: rotate(180deg); opacity: .9; }

.src-count {
  font-family: var(--font-data);
  font-size: .68rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--accent-bright);
  border: 1px solid color-mix(in srgb, var(--accent-bright) 32%, transparent);
  border-radius: 2px; padding: .22rem .42rem;
  opacity: .8; transition: opacity .2s ease, border-color .2s ease;
}
.src-fold summary:hover .src-count {
  opacity: 1; border-color: color-mix(in srgb, var(--accent-bright) 55%, transparent);
}
.src-fold[open] .src-list { margin-top: .9rem; }
.src-list {
  margin: 0; padding-left: 1.4rem;
  font-size: .82rem; line-height: 1.75;
  color: color-mix(in srgb, var(--ink, #e8e2d6) 62%, transparent);
}
.src-list li { margin-bottom: .5rem; padding-left: .3rem; }
.src-list li::marker {
  color: color-mix(in srgb, var(--accent-bright) 60%, transparent);
  font-family: var(--font-data); font-size: .78em;
}
.src-list em { font-style: italic; }
.src-list a { color: var(--accent-bright); }

/* Outbound citation link: hostname plus a departing arrow, which distinguishes
   a citation that leaves the site from one that is a book with no URL. */
.src-link, .note-src a {
  display: inline-flex; align-items: center; gap: .22em;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-bright) 35%, transparent);
  transition: border-color .2s ease;
}
.src-link:hover, .note-src a:hover {
  border-bottom-color: var(--accent-bright);
}
.src-link svg, .note-src a svg {
  width: .82em; height: .82em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .75; transition: transform .18s ease, opacity .18s ease;
}
.src-link:hover svg, .note-src a:hover svg {
  opacity: 1; transform: translate(1px, -1px);
}

/* Community review credit. Only rendered once an organisation has actually
   checked the page, so it must read as a quiet statement of fact, not a badge. */
.reviewed {
  font-size: .82rem;
  color: color-mix(in srgb, var(--ink, #e8e2d6) 62%, transparent);
  margin: 0 0 .9rem;
  padding-left: .9rem;
  border-left: 2px solid color-mix(in srgb, var(--accent-bright) 45%, transparent);
}
.reviewed strong { color: var(--accent-bright); font-weight: 500; }

/* Inline clarification marker: a small circled i after a name the prose does
   not explain. Shares the citation balloon, but reads as part of the sentence
   rather than as apparatus, so it is round and set on the baseline.
   The mark is drawn, not typed: a letter "i" in a bordered box sits high in
   its em box and never optically centres, and the box and the glyph scale on
   different curves. One SVG on the nav icons' 24-unit grid fixes both, and
   keeps the whole family at one stroke weight. */
.cite.note .note-n {
  padding: 0; margin-left: .2em;
  border: 0; background: none;
  line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -.11em;
  color: var(--accent-bright);
  opacity: .62;
  transition: opacity .18s ease, transform .18s ease;
}
.cite.note .note-n svg {
  width: .95em; height: .95em;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;                 /* the ring must not clip at small sizes */
}
.cite.note .note-n:hover,
.cite.note .note-n:focus-visible,
.cite.note.open .note-n {
  opacity: 1; text-decoration: none;
  transform: translateY(-.5px);
}
.cite-tip .note-src { display: block; margin-top: .35rem; opacity: .8; font-size: .95em; }

@media (prefers-reduced-motion: reduce) {
  .cite.note .note-n, .src-mark, .src-chev, .src-count,
  .src-link, .src-link svg, .note-src a svg { transition: none; }
  .cite.note .note-n:hover, .cite.note .note-n:focus-visible { transform: none; }
  .src-link:hover svg, .note-src a:hover svg { transform: none; }
}