:root {
  --ink: #08140d;
  --ink-2: #24382c;
  --paper: #f4f0e6;
  --paper-2: #e9e2d4;
  --paper-3: #dcd4c4;
  --green: #006a3a;
  --green-bright: #00b05d;
  --green-deep: #031b0e;
  --red: #d71932;
  --red-bright: #f02945;
  --blood: #730d1e;
  --gold: #d7a727;
  --white: #fff;
  --line: rgba(8, 20, 13, .16);
  --shell: 1180px;
  --body: 'Hind Siliguri', sans-serif;
  --ui: 'DM Sans', sans-serif;
  --display: 'Playfair Display', 'Hind Siliguri', serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --page-progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.65;
  overflow-x: hidden;
  isolation: isolate;
}
.top-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
html[lang='en'] body,
html[lang='de'] body { font-family: var(--ui); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--red); color: #fff; }

.section-shell {
  width: min(var(--shell), calc(100% - 48px));
  margin-inline: auto;
}
.skip {
  position: fixed;
  z-index: 3000;
  top: -90px;
  left: 18px;
  padding: 10px 16px;
  border-radius: 6px;
  background: #fff;
  color: #000;
}
.skip:focus { top: 12px; }
.read-progress {
  position: fixed;
  z-index: 2500;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, .1);
}
.read-progress span {
  display: block;
  width: calc(var(--page-progress) * 100%);
  height: 100%;
  background: linear-gradient(90deg, var(--green-bright), var(--gold) 52%, var(--red));
  box-shadow: 0 0 18px rgba(240, 41, 69, .5);
}

.archive-atmosphere {
  position: fixed;
  z-index: -10;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--paper);
}
.archive-atmosphere span { position: absolute; border-radius: 50%; filter: blur(80px); }
.atmosphere-red {
  width: 38vw;
  aspect-ratio: 1;
  right: -18vw;
  top: calc(var(--page-progress) * 55vh);
  background: rgba(215, 25, 50, .08);
}
.atmosphere-green {
  width: 45vw;
  aspect-ratio: 1;
  left: -24vw;
  bottom: calc(var(--page-progress) * 30vh);
  background: rgba(0, 106, 58, .09);
}
.archive-atmosphere .atmosphere-line {
  width: 1px;
  height: 45vh;
  left: 50%;
  top: calc(20vh + var(--page-progress) * 25vh);
  border-radius: 0;
  filter: none;
  background: linear-gradient(transparent, rgba(8, 20, 13, .13), transparent);
}

/* Header */
.site-header {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(18px, 4vw, 60px);
  color: #fff;
  background: linear-gradient(180deg, rgba(3, 14, 8, .9), rgba(3, 14, 8, .14));
  transition: background .35s, box-shadow .35s, padding .35s;
}
.site-header.scrolled {
  padding-block: 6px;
  background: rgba(3, 18, 9, .93);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 1px rgba(255, 255, 255, .08), 0 12px 40px rgba(0, 0, 0, .18);
}
.identity { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.identity img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  clip-path: none;
  scale: 1;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, .4));
  transition: scale .3s var(--ease-out), width .3s, height .3s;
}
.identity:hover img { scale: 1.06; }
.site-header.scrolled .identity img { width: 62px; height: 62px; }
.identity span { display: flex; flex-direction: column; line-height: 1.15; }
.identity b { font: 600 .9rem var(--ui); }
.identity small { margin-top: 4px; opacity: .66; font: .68rem var(--ui); letter-spacing: .03em; }
.header-actions, .language { display: flex; align-items: center; gap: 8px; }
.language {
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  backdrop-filter: blur(8px);
}
.language button, .share-top { border: 0; color: #fff; cursor: pointer; }
.language button {
  min-width: 42px;
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  font: 600 .74rem var(--ui);
}
.language button[aria-pressed='true'] { background: #fff; color: var(--ink); }
.share-top {
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--red);
  font-weight: 700;
  transition: transform .25s, background .25s;
}
.share-top:hover { transform: translateY(-2px); background: var(--red-bright); }

/* Chapter navigator */
.chapter-nav {
  position: fixed;
  z-index: 1500;
  top: 50%;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(4, 17, 10, .76);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .16);
  backdrop-filter: blur(16px);
  transform: translateY(-50%);
}
.chapter-nav a {
  display: grid;
  grid-template-columns: 26px 0fr;
  align-items: center;
  min-height: 34px;
  color: rgba(255, 255, 255, .56);
  text-decoration: none;
  transition: grid-template-columns .35s var(--ease-out), color .25s, background .25s;
}
.chapter-nav a:hover { grid-template-columns: 26px 1fr; color: #fff; }
.chapter-nav a.active { color: #fff; }
.chapter-nav a.active { border-radius: 12px; background: rgba(255, 255, 255, .09); }
.chapter-nav span { font: 700 .63rem var(--ui); text-align: center; }
.chapter-nav b {
  overflow: hidden;
  max-width: 0;
  white-space: nowrap;
  font: 600 .7rem var(--ui);
  transition: max-width .35s var(--ease-out), padding .35s;
}
.chapter-nav a:hover b { max-width: 110px; padding-right: 10px; }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  background: #041008;
  color: #fff;
}
.hero-photo {
  position: absolute;
  z-index: -4;
  inset: -5%;
  background: url('https://ncpdagermany.de/img/july/selected/august-05-parliament-afp.webp') 50% 48% / cover no-repeat;
  transform: translate3d(0, var(--hero-shift, 0), 0) scale(1.05);
  animation: hero-breathe 18s ease-in-out infinite alternate;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 10, 5, .97) 0%, rgba(2, 16, 8, .83) 44%, rgba(2, 12, 6, .22) 78%),
    linear-gradient(0deg, rgba(1, 8, 4, .96), transparent 62%);
}
.hero::after {
  content: '';
  position: absolute;
  z-index: -2;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  right: -15vw;
  top: -16vw;
  border-radius: 50%;
  background: rgba(215, 25, 50, .76);
  mix-blend-mode: multiply;
  animation: red-sun 8s ease-in-out infinite alternate;
}
.hero-grain {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.hero-blackout { position: absolute; z-index: 4; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: none; }
.hero-blackout span { background: #020805; transform-origin: top; animation: blackout-open 1.35s var(--ease-in-out) both; }
.hero-blackout span:nth-child(2) { animation-delay: .12s; transform-origin: bottom; }
.hero-blackout span:nth-child(3) { animation-delay: .24s; }
.hero-content {
  position: relative;
  width: min(var(--shell), calc(100% - 48px));
  margin-inline: auto;
  padding: 170px 0 11vh;
}
.eyebrow, .section-kicker {
  margin: 0 0 15px;
  color: var(--red);
  font: 700 .72rem var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero .eyebrow { color: #a3f1c9; }
.hero-number {
  position: absolute;
  top: 92px;
  right: 1vw;
  margin: 0;
  color: transparent;
  font: 700 clamp(3.4rem, 12vw, 10rem) / .8 var(--display);
  letter-spacing: -.08em;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .24);
  transform: rotate(-4deg);
}
.hero-number span { color: rgba(218, 25, 51, .95); text-shadow: 12px 15px 0 rgba(0, 0, 0, .18); -webkit-text-stroke: 0; }
.hero h1 {
  max-width: 1010px;
  margin: 0;
  font: 800 clamp(3.5rem, 7.8vw, 7.7rem) / .91 var(--display);
  letter-spacing: -.055em;
  text-wrap: balance;
}
.hero h1 em { color: #fff; font-style: italic; }
.hero h1 em::after {
  content: '';
  display: block;
  width: min(650px, 72%);
  height: 5px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--red), var(--red) 42%, var(--green-bright) 42%);
  transform: scaleX(0);
  transform-origin: left;
  animation: oath-line 1.2s 1.2s var(--ease-out) forwards;
}
.hero-lead { max-width: 780px; margin: 28px 0 0; color: rgba(255, 255, 255, .8); font-size: clamp(1.03rem, 1.7vw, 1.32rem); }
.hero-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s var(--ease-out), background .25s, box-shadow .25s;
}
.button.primary { background: var(--red); color: #fff; box-shadow: 0 12px 34px rgba(170, 11, 34, .28); }
.button.primary:hover { background: var(--red-bright); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(170, 11, 34, .36); }
.button.ghost { border-color: rgba(255, 255, 255, .34); background: rgba(0, 0, 0, .2); color: #fff; }
.button.ghost:hover { background: rgba(255, 255, 255, .1); transform: translateY(-3px); }
.hero-date-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(780px, 100%);
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, .24);
}
.hero-date-rail div { position: relative; padding: 16px 14px 0 0; }
.hero-date-rail div::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .08);
  animation: date-pulse 2.2s infinite;
}
.hero-date-rail div:nth-child(2)::before, .hero-date-rail div:nth-child(3)::before { background: var(--red); }
.hero-date-rail div:nth-child(4)::before { background: var(--green-bright); }
.hero-date-rail span { display: block; color: rgba(255, 255, 255, .5); font: 600 .64rem var(--ui); letter-spacing: .1em; }
.hero-date-rail b { display: block; margin-top: 4px; font-size: .84rem; }
.hero-count {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 5vw, 80px);
  bottom: 76px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: rgba(255, 255, 255, .75);
  font-family: var(--ui);
}
.hero-count strong { color: #fff; font-size: 2.1rem; }
.hero-count small { font-size: .7rem; letter-spacing: .08em; }
.scroll-cue {
  position: absolute;
  right: clamp(24px, 5vw, 80px);
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font: .7rem var(--ui);
  letter-spacing: .08em;
}
.scroll-cue span { width: 1px; height: 42px; background: #fff; animation: scroll-pulse 1.8s infinite; }

/* The people's chorus: July heard before it is explained */
.july-chorus {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 26px 0;
  isolation: isolate;
  background: #020a05;
  color: #fff;
}
.july-chorus::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 176, 93, .2), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(215, 25, 50, .22), transparent 34%);
}
.chant-band {
  width: 104%;
  margin-left: -2%;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .24);
}
.chant-green { background: var(--green); transform: rotate(-1.4deg); }
.chant-red { background: var(--red); transform: rotate(1.4deg); }
.chant-track {
  display: flex;
  width: max-content;
  align-items: center;
  padding: 13px 0 11px;
  will-change: transform;
}
.chant-track span {
  display: block;
  padding-right: 7vw;
  font: 800 clamp(1rem, 2vw, 1.55rem)/1 var(--body);
  letter-spacing: .035em;
  white-space: nowrap;
}
.chant-green .chant-track { animation: chorus-three 20s linear infinite; }
.chant-red .chant-track { animation: chorus-two 24s linear infinite reverse; }
.chorus-center {
  position: relative;
  display: grid;
  min-height: 330px;
  place-items: center;
  padding: 70px 24px;
  overflow: hidden;
}
.chorus-center::before {
  content: '';
  position: absolute;
  width: min(52vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.24) 0 1deg, transparent 1deg 10deg);
  mask: radial-gradient(circle, transparent 0 42%, #000 42.5% 44%, transparent 44.5%);
  animation: chorus-orbit 28s linear infinite;
}
.chorus-center::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 47px;
  width: min(640px, 70vw);
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--green-bright), #fff 50%, var(--red), transparent);
  transform: translateX(-50%) scaleX(.2);
  transform-origin: center;
  animation: people-line 3.4s var(--ease-in-out) infinite;
}
.chorus-center p {
  position: relative;
  z-index: 2;
  max-width: 940px;
  margin: 0;
  font: 800 clamp(2.25rem, 5.3vw, 5.4rem)/.98 var(--display);
  letter-spacing: -.045em;
  text-align: center;
  text-wrap: balance;
}
.chorus-pulse {
  position: absolute;
  color: transparent;
  font: 800 clamp(12rem, 34vw, 31rem)/1 var(--display);
  letter-spacing: -.12em;
  opacity: .11;
  -webkit-text-stroke: 1px #fff;
  animation: chorus-breathe 4.2s var(--ease-in-out) infinite;
}

/* Shared editorial structure */
section[data-section-no] { position: relative; isolation: isolate; }
section[data-section-no]::before {
  content: attr(data-section-no);
  position: absolute;
  z-index: -1;
  top: 28px;
  right: clamp(22px, 5vw, 80px);
  color: rgba(8, 20, 13, .035);
  font: 800 clamp(5rem, 13vw, 11rem) / 1 var(--display);
  letter-spacing: -.08em;
  pointer-events: none;
}
.section-heading { max-width: 840px; margin-bottom: 52px; }
.section-heading h2,
.note-grid h2,
.photo-heading h2,
.people h2,
.ncp-bridge h2,
.diaspora h2,
.legacy h2,
.sources h2,
.meaning h2,
.closing h2 {
  margin: 0;
  font: 800 clamp(2.35rem, 5vw, 5rem) / .98 var(--display);
  letter-spacing: -.045em;
}
.section-heading > p:last-child { color: #506057; font-size: 1.1rem; }
.section-kicker.light { color: #82e9b4; }

/* Editorial standard */
.editorial-note { padding: 96px 0; background: var(--paper); overflow: hidden; }
.note-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 6vw; align-items: start; }
.note-grid h2 { font-size: clamp(2.35rem, 4.4vw, 4.55rem); }
.note-grid > div { position: relative; }
.note-grid > div:last-child { padding-top: 10px; }
.note-grid p { margin: 0 0 20px; font-size: 1.12rem; }
.balance { padding: 22px 24px; border-left: 4px solid var(--red); background: rgba(255, 255, 255, .5); color: var(--ink-2); }
.verification-stamp {
  position: absolute;
  right: 5%;
  bottom: -82px;
  display: grid;
  width: 112px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(0, 106, 58, .22);
  border-radius: 50%;
  color: rgba(0, 106, 58, .38);
  transform: rotate(-12deg);
  animation: stamp-breathe 4s ease-in-out infinite;
}
.verification-stamp::before { content: ''; position: absolute; inset: 7px; border: 1px dashed currentColor; border-radius: 50%; }
.verification-stamp span { font: 700 .58rem var(--ui); letter-spacing: .16em; }
.verification-stamp b { position: absolute; top: 48px; font: 800 2.2rem/1 var(--display); }

/* Four-phase transformation */
.phase-section { padding: 104px 0; overflow: hidden; background: #fff; }
.uprising-word {
  position: absolute;
  z-index: -1;
  right: -5vw;
  bottom: -1.5vw;
  color: transparent;
  font: 800 clamp(7rem, 17vw, 16rem)/.8 var(--display);
  letter-spacing: -.07em;
  white-space: nowrap;
  opacity: .055;
  -webkit-text-stroke: 2px var(--ink);
  transform: translateX(calc((.5 - var(--page-progress)) * 18vw));
}
.phase-section::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(120deg, rgba(0, 106, 58, .035), transparent 45%, rgba(215, 25, 50, .035));
}
.phase-heading { display: grid; grid-template-columns: .82fr 1.18fr; column-gap: 7vw; max-width: none; }
.phase-heading .section-kicker { grid-column: 1; }
.phase-heading h2 { grid-column: 1; }
.phase-heading > p:last-child { grid-column: 2; grid-row: 2; margin: 0; }
.phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.phase-card {
  position: relative;
  min-height: 330px;
  padding: 30px 25px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: rgba(244, 240, 230, .4);
  transition: color .45s, background .45s, transform .45s var(--ease-out);
}
.phase-card::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: var(--phase-color, var(--green));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.phase-card:hover { z-index: 2; background: var(--green-deep); color: #fff; transform: translateY(-8px); }
.phase-card:nth-child(2), .phase-card:nth-child(3) { --phase-color: var(--red); }
.phase-card:nth-child(4) { --phase-color: var(--gold); }
.phase-card:hover::before { transform: scaleX(1); }
.phase-index { display: block; color: var(--phase-color, var(--green)); font: 800 3.4rem/1 var(--display); }
.phase-date { display: inline-block; margin-top: 24px; color: #69766e; font: 700 .68rem var(--ui); letter-spacing: .09em; text-transform: uppercase; }
.phase-card:hover .phase-date { color: rgba(255, 255, 255, .58); }
.phase-card h3 { margin: 10px 0 13px; font: 700 1.55rem/1.05 var(--display); }
.phase-card p { margin: 0; color: #46564c; font-size: .94rem; }
.phase-card:hover p { color: rgba(255, 255, 255, .75); }
.phase-sources { position: absolute; right: 18px; top: 22px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 45%; }
.phase-sources .citation { position: static; margin: 0; }
.phase-signal { position: absolute; top: 38px; left: 0; right: 0; display: flex; justify-content: space-around; opacity: .12; }
.phase-signal i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(215, 25, 50, .4); animation: signal-pulse 2.4s infinite; }
.phase-signal i:nth-child(2) { animation-delay: .4s; }.phase-signal i:nth-child(3) { animation-delay: .8s; }.phase-signal i:nth-child(4) { animation-delay: 1.2s; }

/* Facts */
.facts { padding: 100px 0; overflow: hidden; background: #06150c; color: #fff; }
.facts::after { content: '36'; position: absolute; right: -.03em; bottom: -.28em; color: rgba(255, 255, 255, .035); font: 800 min(42vw, 38rem)/1 var(--display); }
.facts h2 { max-width: 980px; margin: 0 0 50px; font: 800 clamp(2.6rem, 5.2vw, 5.3rem)/.98 var(--display); }
.fact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .14); }
.fact {
  position: relative;
  min-height: 245px;
  padding: 32px 25px;
  overflow: hidden;
  background: #06150c;
  transition: background .35s, transform .35s var(--ease-out);
}
.fact::before { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255, 255, 255, .07), transparent 46%); opacity: 0; transition: opacity .35s; }
.fact:hover { z-index: 2; background: #0a2415; transform: translateY(-6px); }
.fact:hover::before { opacity: 1; }
.fact-index { display: block; margin-bottom: 26px; color: rgba(255, 255, 255, .28); font: 700 .65rem var(--ui); letter-spacing: .12em; }
.fact strong { position: relative; display: block; color: #fff; font: 800 clamp(2.25rem, 4.2vw, 4.5rem)/1 var(--display); letter-spacing: -.06em; }
.fact:nth-child(2) strong { color: #ff4963; }.fact:nth-child(3) strong { color: #e7c255; }.fact:nth-child(4) strong { color: #69dca2; }
.fact span:not(.fact-index) { position: relative; display: block; margin: 13px 0 8px; font-weight: 700; }
.fact small { position: relative; display: block; color: rgba(255, 255, 255, .55); line-height: 1.45; }
.fact a { position: absolute; z-index: 1; right: 18px; bottom: 13px; }
.fact-note { position: relative; z-index: 1; margin: 20px 0 0; color: rgba(255, 255, 255, .55); font-size: .85rem; }

/* Timeline */
.timeline-section { padding: 104px 0; overflow: hidden; background: var(--paper); }
.timeline { --timeline-progress: 0; position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before, .timeline::after { content: ''; position: absolute; left: 172px; top: 0; width: 2px; }
.timeline::before { bottom: 0; background: rgba(8, 20, 13, .13); }
.timeline::after { height: calc(var(--timeline-progress) * 100%); background: linear-gradient(var(--green), var(--red) 55%, var(--gold)); box-shadow: 0 0 18px rgba(215, 25, 50, .18); transition: height .12s linear; }
.timeline-item { position: relative; display: grid; grid-template-columns: 140px 1fr; gap: 65px; padding: 0 0 72px; }
.timeline-item::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 164px;
  width: 17px;
  height: 17px;
  border: 4px solid var(--paper);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 1px var(--green);
  transition: scale .35s, box-shadow .35s;
}
.timeline-item.breaking::before { background: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 0 8px rgba(215, 25, 50, .1); }
.timeline-item.visible::before { scale: 1.1; }
.timeline-date { padding-top: 14px; color: #68766d; font: 700 .75rem var(--ui); letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.timeline-content { max-width: 800px; padding: 5px 0 0 16px; border-left: 0 solid transparent; transition: padding .4s var(--ease-out), border-color .4s; }
.timeline-item.visible .timeline-content { padding-left: 22px; }
.timeline-content h3 { margin: 7px 0 13px; font: 700 clamp(1.55rem, 3vw, 2.65rem)/1.08 var(--display); }
.timeline-content p { margin: 0; color: #33453a; font-size: 1.04rem; }
.timeline-tag { display: inline-block; color: var(--red); font: 700 .68rem var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.timeline-signal { position: absolute; top: 7px; right: 0; color: rgba(8, 20, 13, .06); font: 800 3.8rem/1 var(--display); }
.citation {
  display: inline-flex;
  min-width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: #dbe4dc;
  color: #284034;
  text-decoration: none;
  font: 700 .69rem var(--ui);
  vertical-align: middle;
  transition: background .2s, color .2s, transform .2s;
}
.citation:hover { background: var(--green); color: #fff; transform: translateY(-2px); }

/* Meaning of 36 July */
.meaning { padding: 104px 0; overflow: hidden; background: #730d1e; color: #fff; }
.meaning::before { color: rgba(255, 255, 255, .045) !important; }
.meaning::after { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .08), transparent 42%), linear-gradient(135deg, transparent, rgba(0, 0, 0, .24)); }
.meaning-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: start; }
.meaning-copy > p { font-size: 1.1rem; color: rgba(255, 255, 255, .8); }
.meaning-manifesto { padding: 22px 24px; border-left: 4px solid var(--gold); background: rgba(0, 0, 0, .16); color: #fff !important; font-weight: 700; }
.source-button { display: inline-block; margin-top: 12px; color: inherit; font-weight: 700; }
.calendar-run {
  display: flex;
  position: absolute;
  left: -4vw;
  right: -4vw;
  top: 50%;
  justify-content: space-around;
  transform: translateY(-50%) rotate(-7deg);
  opacity: .1;
}
.calendar-run span { color: transparent; font: 800 clamp(6rem, 15vw, 14rem)/1 var(--display); -webkit-text-stroke: 1px #fff; transform: translateY(50px); opacity: 0; }
.meaning.visible .calendar-run span { animation: calendar-rise .8s var(--ease-out) forwards; }
.meaning.visible .calendar-run span:nth-child(2) { animation-delay: .12s; }.meaning.visible .calendar-run span:nth-child(3) { animation-delay: .24s; }.meaning.visible .calendar-run span:nth-child(4) { animation-delay: .36s; }.meaning.visible .calendar-run span:nth-child(5) { animation-delay: .48s; }.meaning.visible .calendar-run span:nth-child(6) { animation-delay: .6s; }
.calendar-run .victory-day { color: rgba(255, 255, 255, .28); -webkit-text-stroke: 0; }

/* Evidence */
.evidence { padding: 104px 0; overflow: hidden; background: #3f0812; color: #fff; }
.evidence::before { color: rgba(255, 255, 255, .04) !important; }
.evidence-photo { position: absolute; z-index: -3; inset: 0; background: url('https://ncpdagermany.de/img/july/selected/july-resistance-art.webp') 8% 35% / 48% auto no-repeat; opacity: .22; filter: grayscale(.4) contrast(1.1); }
.evidence::after { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(63, 8, 18, .48), #3f0812 57%); }
.evidence-scan {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -20%;
  width: 20%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  transform: skewX(-12deg);
  animation: evidence-scan 7s 1s linear infinite;
}
.evidence-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; }
.evidence-heading h2 { font: 800 clamp(2.8rem, 5.6vw, 5.9rem)/.96 var(--display); }
.finding-card { position: relative; padding: 38px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(15, 2, 6, .32); box-shadow: 0 28px 80px rgba(0, 0, 0, .2); backdrop-filter: blur(8px); }
.finding-card::after { content: 'EVIDENCE'; position: absolute; right: 18px; bottom: 12px; color: rgba(255, 255, 255, .08); font: 800 2.8rem/1 var(--ui); letter-spacing: .1em; }
.quote-mark { position: absolute; top: -30px; left: 18px; color: rgba(255, 255, 255, .12); font: 800 8rem/1 var(--display); }
.finding-card > p { position: relative; font-size: 1.15rem; }
.finding-card .attribution { color: #f0b9c3; font-size: .83rem; }
.violation-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 50px; border-top: 1px solid rgba(255, 255, 255, .18); border-left: 1px solid rgba(255, 255, 255, .18); }
.violation { position: relative; min-height: 180px; padding: 28px; border-right: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18); overflow: hidden; transition: background .35s, transform .35s; }
.violation::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--red-bright); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.violation:hover { background: rgba(255, 255, 255, .06); transform: translateY(-5px); }
.violation:hover::before { transform: scaleX(1); }
.violation b { font-size: 1.06rem; }.violation p { margin: 7px 0 0; color: rgba(255, 255, 255, .68); font-size: .9rem; }

/* Visual memory */
.photo-essay { padding: 104px 0; overflow: hidden; background: #e7e0d2; }
.photo-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: end; max-width: none; }
.photo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 430px 430px; gap: 12px; perspective: 1100px; }
.photo-card { position: relative; margin: 0; overflow: hidden; background: #18221b; transform: translateZ(0); }
.photo-card:nth-child(1) { grid-column: 1 / 9; grid-row: 1; }
.photo-card:nth-child(2) { grid-column: 9 / 13; grid-row: 1; }
.photo-card:nth-child(3) { grid-column: 1 / 7; grid-row: 2; }
.photo-card:nth-child(4) { grid-column: 7 / 13; grid-row: 2; }
.photo-card:nth-child(2) img { object-position: 45% center; }
.photo-card:nth-child(4) img { object-position: center 25%; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .5s; }
.photo-card:hover img { transform: scale(1.055); filter: saturate(1.1) contrast(1.04); }
.photo-card::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .9)); }
.photo-index { position: absolute; z-index: 2; top: 18px; left: 20px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; color: #fff; font: 700 .72rem var(--ui); backdrop-filter: blur(7px); }
.photo-caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 28px; color: #fff; }
.photo-caption b { display: block; font: 700 1.55rem/1.08 var(--display); }.photo-caption small { display: block; margin-top: 7px; color: rgba(255, 255, 255, .7); }

/* People */
.people { padding: 104px 0; background: #fff; overflow: hidden; }
.centered { margin-inline: auto; text-align: center; }
.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.people-card { position: relative; min-height: 510px; overflow: hidden; border-top: 5px solid var(--green); background: var(--paper); box-shadow: 0 16px 45px rgba(8, 20, 13, .08); transition: transform .4s var(--ease-out), box-shadow .4s; }
.people-card:nth-child(2) { border-color: var(--red); }.people-card:nth-child(3) { border-color: var(--gold); }
.people-card:hover { transform: translateY(-10px) rotate(-.4deg); box-shadow: 0 25px 70px rgba(8, 20, 13, .12); }
.people-visual { position: relative; display: block; height: 245px; overflow: hidden; background: var(--ink); }
.people-visual::after { content: ''; position: absolute; inset: 25% 0 0; background: linear-gradient(transparent, rgba(4, 16, 9, .78)); }
.people-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); transition: transform 1s var(--ease-out), filter .5s; }
.people-card:hover .people-visual img { transform: scale(1.06); filter: saturate(1.08) contrast(1.06); }
.people-index { position: absolute; z-index: 2; right: 18px; bottom: 12px; color: rgba(255, 255, 255, .86); font: 800 3.8rem/.8 var(--display); }
.people-credit { position: absolute; z-index: 3; left: 16px; bottom: 14px; max-width: calc(100% - 100px); padding: 7px 9px; border-radius: 999px; background: rgba(3, 18, 9, .72); color: #fff !important; font: 700 .64rem/1.2 var(--ui); letter-spacing: .02em; text-decoration: none; backdrop-filter: blur(8px); transition: background .25s, transform .25s; }
.people-credit:hover { background: rgba(0, 106, 58, .94); transform: translateY(-2px); }
.people-copy { padding: 28px 30px 32px; }
.people-card h3 { margin: 0 0 12px; font: 700 1.6rem/1.08 var(--display); }.people-card p { color: #46574d; }.people-card a { font-weight: 700; color: var(--green); }

/* 2024 to 2025 bridge */
.ncp-bridge { padding: 104px 0; overflow: hidden; background: #06150c; color: #fff; }
.ncp-bridge::before { color: rgba(255, 255, 255, .035) !important; }
.bridge-number { position: absolute; right: -.02em; top: -.16em; color: rgba(255, 255, 255, .035); font: 800 min(26vw, 23rem)/1 var(--display); }
.bridge-layout { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 7vw; }
.bridge-copy > p { color: rgba(255, 255, 255, .8); font-size: 1.08rem; }
.clarification { padding: 22px 24px; border: 1px solid rgba(120, 231, 174, .28); background: rgba(0, 168, 90, .1); color: #d7f7e7 !important; }
.clarification.soft { border-color: #c9ab69; background: #fffdf6; color: #293a31 !important; }
.bridge-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }.bridge-links a { color: #91e8bb; font-weight: 700; }
.history-bridge { position: absolute; z-index: 0; left: 50%; top: 54px; display: flex; width: min(820px, 72vw); align-items: center; gap: 18px; opacity: .14; transform: translateX(-50%); }
.history-bridge b { font: 800 clamp(2.5rem, 6vw, 5.8rem)/1 var(--display); }.history-bridge span { position: relative; flex: 1; height: 1px; background: #fff; }
.history-bridge i { position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: bridge-travel 4.5s var(--ease-in-out) infinite; }

/* Diaspora */
.diaspora { padding: 76px 0 82px; overflow: visible; background: radial-gradient(circle at 12% 18%, rgba(0, 106, 58, .09), transparent 30%), #ece7dc; }
.diaspora-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .98fr); gap: clamp(34px, 4.5vw, 64px); align-items: start; }
.diaspora-layout > div:last-child { padding-top: 4px; }
.diaspora h2 { max-width: 10ch; margin-bottom: 24px; font-size: clamp(3rem, 4.7vw, 4.8rem); line-height: .92; }
.diaspora p { font-size: 1rem; line-height: 1.68; }.text-link { font-weight: 700; color: var(--green); }
.diaspora .clarification.soft { margin-top: 18px; padding: 16px 18px; }
.diaspora-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.diaspora-links .text-link { display: flex; min-height: 48px; align-items: center; padding: 10px 12px; border: 1px solid rgba(0, 106, 58, .18); border-radius: 12px; background: rgba(255, 255, 255, .55); font-size: .76rem; line-height: 1.3; text-decoration: none; transition: transform .25s var(--ease-out), border-color .25s, background .25s; }
.diaspora-links .text-link:hover { border-color: rgba(0, 106, 58, .48); background: #fff; transform: translateY(-2px); }
.diaspora-map { position: sticky; top: 112px; width: 100%; margin: 0 auto; }
.map-frame { position: relative; overflow: hidden; border: 1px solid rgba(239, 195, 90, .28); border-radius: 28px; background: radial-gradient(circle at 66% 46%, rgba(215, 25, 50, .18), transparent 22%), radial-gradient(circle at 34% 28%, rgba(0, 168, 90, .2), transparent 30%), #06150c; box-shadow: 0 30px 80px rgba(6, 21, 12, .22); }
.map-frame::before { content: ''; position: absolute; z-index: 2; inset: 0; background: linear-gradient(110deg, transparent 24%, rgba(255, 255, 255, .055) 43%, transparent 61%); transform: translateX(-100%); animation: map-scan 8s 1.5s ease-in-out infinite; pointer-events: none; }
.map-frame::after { content: ''; position: absolute; z-index: 3; inset: 0; border-radius: inherit; box-shadow: inset 0 0 70px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .035); pointer-events: none; }
.network-meta { position: absolute; z-index: 4; top: 20px; left: 22px; display: grid; gap: 3px; color: #fff; }
.network-meta span { color: #efc35a; font: 700 .64rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.network-meta strong { font: 700 .88rem/1.2 var(--ui); }
.network-year { position: absolute; z-index: 0; right: -9px; bottom: -28px; color: rgba(255, 255, 255, .035); font: 800 8rem/1 var(--display); }
.world-map { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.map-grid path { fill: none; stroke: rgba(239, 195, 90, .09); stroke-width: 1; }
.land path { fill: rgba(112, 224, 166, .08); stroke: rgba(112, 224, 166, .34); stroke-width: 1.2; }
.routes path { fill: none; stroke: url(#routeStroke); stroke-width: 2.35; stroke-dasharray: 7 9; opacity: .8; filter: drop-shadow(0 0 5px rgba(215, 25, 50, .42)); animation: route-flow 12s linear infinite; }
.routes path:nth-child(2n) { animation-duration: 15s; animation-direction: reverse; }
.city-points circle { fill: #ff4961; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(255, 73, 97, .85)); animation: city-signal-svg 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.city-points circle:nth-child(3n) { animation-delay: -.7s; }.city-points circle:nth-child(3n + 1) { animation-delay: -1.4s; }
.city-points .origin { fill: #70e0a6; stroke-width: 3; }
.dhaka-label { position: absolute; z-index: 4; left: 72%; top: 43%; padding: 5px 9px; border: 1px solid rgba(112, 224, 166, .45); border-radius: 999px; background: rgba(0, 106, 58, .92); color: #fff; font: 800 .56rem/1 var(--ui); letter-spacing: .12em; box-shadow: 0 7px 22px rgba(0, 0, 0, .35); }
.dhaka-label i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; border: 1px solid rgba(112, 224, 166, .5); border-radius: 50%; transform: translate(-50%, -50%); animation: map-ripple 2.8s ease-out infinite; }
.map-signal { position: absolute; z-index: 4; width: 8px; height: 8px; border-radius: 50%; background: #efc35a; box-shadow: 0 0 0 0 rgba(239, 195, 90, .45); animation: city-signal 2.4s infinite; }
.signal-europe { left: 49%; top: 29%; }.signal-middle-east { left: 64%; top: 40%; animation-delay: -.4s; }.signal-america { left: 25%; top: 34%; animation-delay: -.8s; }.signal-australia { right: 8%; bottom: 18%; animation-delay: -1.5s; }
.city-ledger { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 14px auto 0; }
.city-ledger span { padding: 7px 10px 6px; border: 1px solid rgba(0, 106, 58, .24); border-radius: 999px; background: rgba(255, 255, 255, .68); color: #31513f; font: 700 .55rem/1 var(--ui); letter-spacing: .08em; box-shadow: 0 6px 18px rgba(8, 35, 20, .045); }
.city-ledger .middle-east-city { border-color: rgba(215, 25, 50, .34); background: rgba(215, 25, 50, .075); color: #9d1729; }

/* Unfinished promise */
.legacy { padding: 104px 0; overflow: hidden; isolation: isolate; background: var(--green); color: #fff; }
.legacy::before { color: rgba(255, 255, 255, .04) !important; }
.legacy-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; }
.pledges { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, .24); border-left: 1px solid rgba(255, 255, 255, .24); }
.pledge { position: relative; min-height: 190px; padding: 28px; border-right: 1px solid rgba(255, 255, 255, .24); border-bottom: 1px solid rgba(255, 255, 255, .24); overflow: hidden; transition: background .35s, transform .35s; }
.pledge:hover { background: rgba(255, 255, 255, .1); transform: translateY(-5px); }
.pledge-index { display: block; margin-bottom: 24px; color: rgba(255, 255, 255, .5); font: 700 .65rem var(--ui); letter-spacing: .14em; }
.pledge b { display: block; font-size: 1.16rem; }.pledge p { margin: 7px 0 0; color: rgba(255, 255, 255, .74); font-size: .92rem; }
.legacy-word { position: absolute; z-index: 0; left: 2%; right: 2%; bottom: 58px; width: 96%; color: rgba(255, 255, 255, .075); font: 800 clamp(5.5rem, 14vw, 13rem)/.78 var(--body); letter-spacing: -.055em; text-align: center; white-space: nowrap; pointer-events: none; animation: promise-breathe 5s ease-in-out infinite; }
html[lang='en'] .legacy-word, html[lang='de'] .legacy-word { font-family: var(--ui); }
html[lang='de'] .legacy-word { font-size: clamp(4.8rem, 11vw, 10rem); }

/* Source library */
.sources { padding: 104px 0; overflow: hidden; background: var(--paper); }
.source-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.source { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; min-height: 100px; padding: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .45); text-decoration: none; transition: background .25s, transform .3s var(--ease-out), box-shadow .3s; }
.source:hover { background: #fff; transform: translateY(-4px) rotate(-.15deg); box-shadow: 0 16px 40px rgba(8, 25, 15, .08); }
.source-number { color: var(--red); font: 700 1.45rem var(--display); }.source b { display: block; }.source small { color: #647369; }.source-arrow { color: var(--green); font: 700 1.2rem var(--ui); }
.source-org { display: inline-block; margin-top: 5px; color: var(--green); font: 700 .62rem var(--ui); letter-spacing: .08em; text-transform: uppercase; }

/* Closing */
.closing { padding: 132px 0; overflow: hidden; background: #080d09; color: #fff; text-align: center; }
.closing::before { content: ''; position: absolute; z-index: -2; inset: 0; background: url('https://ncpdagermany.de/img/july/selected/august-03-march-palash-khan.webp') center/cover; opacity: .15; filter: grayscale(1); }
.closing::after { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at center, rgba(0, 106, 58, .15), rgba(8, 13, 9, .96) 68%); }
.closing-inner { position: relative; max-width: 960px; }
.closing-36 { margin: 0; color: var(--red); font: 800 clamp(7rem, 19vw, 14rem)/.65 var(--display); letter-spacing: -.1em; text-shadow: 0 20px 80px rgba(215, 25, 50, .25); }
.closing h2 { margin-top: 46px; }
.closing-inner > p:not(.closing-36):not(.section-kicker):not(.share-status) { max-width: 760px; margin: 28px auto; color: rgba(255, 255, 255, .73); font-size: 1.1rem; }
.closing .button { margin-top: 16px; }.share-status { height: 24px; color: #8ae2b5; }
.closing-wave { position: absolute; left: 8%; right: 8%; top: 50%; display: flex; height: 180px; align-items: center; justify-content: space-around; opacity: .11; }
.closing-wave i { width: 2px; height: 40%; background: #fff; animation: memory-wave 2.5s ease-in-out infinite; }.closing-wave i:nth-child(2) { animation-delay: -.2s; }.closing-wave i:nth-child(3) { animation-delay: -.4s; }.closing-wave i:nth-child(4) { animation-delay: -.6s; }.closing-wave i:nth-child(5) { animation-delay: -.8s; }.closing-wave i:nth-child(6) { animation-delay: -1s; }.closing-wave i:nth-child(7) { animation-delay: -1.2s; }.closing-wave i:nth-child(8) { animation-delay: -1.4s; }.closing-wave i:nth-child(9) { animation-delay: -1.6s; }
footer { background: var(--paper); }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; padding: 38px 0; }.footer-inner p { margin: 4px 0; color: #647369; }.footer-links { display: flex; gap: 20px; align-items: center; }.footer-links a { font-weight: 700; text-decoration: none; }

/* Reveal system */
[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].visible { opacity: 1; transform: none; }
.phase-card[data-reveal]:nth-child(2), .fact[data-reveal]:nth-child(2), .violation[data-reveal]:nth-child(2), .pledge[data-reveal]:nth-child(2) { transition-delay: .1s; }
.phase-card[data-reveal]:nth-child(3), .fact[data-reveal]:nth-child(3), .violation[data-reveal]:nth-child(3), .pledge[data-reveal]:nth-child(3) { transition-delay: .2s; }
.phase-card[data-reveal]:nth-child(4), .fact[data-reveal]:nth-child(4), .violation[data-reveal]:nth-child(4), .pledge[data-reveal]:nth-child(4) { transition-delay: .3s; }

@keyframes blackout-open { 0%, 22% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes oath-line { to { transform: scaleX(1); } }
@keyframes hero-breathe { to { transform: translate3d(-1%, calc(var(--hero-shift, 0) + 1%), 0) scale(1.09); } }
@keyframes red-sun { to { transform: scale(1.08) translate(-2%, 4%); } }
@keyframes scroll-pulse { 0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes date-pulse { 50% { box-shadow: 0 0 0 13px rgba(255, 255, 255, 0); } }
@keyframes chorus-three { to { transform: translateX(-33.333%); } }
@keyframes chorus-two { to { transform: translateX(-50%); } }
@keyframes chorus-orbit { to { transform: rotate(360deg); } }
@keyframes chorus-breathe { 50% { opacity: .2; transform: scale(1.045); } }
@keyframes people-line { 50% { transform: translateX(-50%) scaleX(1); opacity: 1; } }
@keyframes stamp-breathe { 50% { transform: rotate(-9deg) scale(1.04); } }
@keyframes signal-pulse { 50% { box-shadow: 0 0 0 17px rgba(215, 25, 50, 0); } }
@keyframes calendar-rise { to { transform: translateY(0); opacity: 1; } }
@keyframes evidence-scan { to { left: 120%; } }
@keyframes bridge-travel { 0%, 100% { left: 0; background: var(--red); } 50% { left: calc(100% - 9px); background: var(--green-bright); } }
@keyframes orbit-pulse { 50% { box-shadow: 0 0 0 24px rgba(0, 106, 58, .035); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes city-signal { 50% { box-shadow: 0 0 0 18px rgba(215, 25, 50, 0); } }
@keyframes city-signal-svg { 50% { transform: scale(1.7); opacity: .58; } }
@keyframes map-scan { 0%, 18% { transform: translateX(-115%); } 55%, 100% { transform: translateX(115%); } }
@keyframes route-flow { to { stroke-dashoffset: -160; } }
@keyframes map-ripple { 0% { opacity: .7; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
@keyframes promise-breathe { 50% { color: rgba(255, 255, 255, .11); transform: scale(.985); } }
@keyframes memory-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

@media (max-width: 1180px) {
  .chapter-nav { display: none; }
}
@media (max-width: 900px) {
  .note-grid, .phase-heading, .evidence-layout, .meaning-layout, .bridge-layout, .diaspora-layout, .legacy-layout { grid-template-columns: 1fr; }
  .phase-heading .section-kicker, .phase-heading h2, .phase-heading > p:last-child { grid-column: 1; grid-row: auto; }
  .phase-heading > p:last-child { margin-top: 14px; }
  .phase-grid { grid-template-columns: 1fr 1fr; }
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .evidence-photo { background-size: 100% auto; opacity: .11; }
  .violation-grid { grid-template-columns: 1fr 1fr; }
  .photo-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 480px 330px 330px; }
  .photo-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .photo-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .photo-card:nth-child(3) { grid-column: 2; grid-row: 2; }
  .photo-card:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
  .people-grid { grid-template-columns: 1fr; }
  .people-card, .people-card:first-child { min-height: 0; }
  .people-visual, .people-card:first-child .people-visual { height: min(58vw, 420px); }
  .diaspora-map { position: relative; top: auto; width: min(90vw, 650px); }
  .source-list { grid-template-columns: 1fr; }
  .verification-stamp { position: relative; right: auto; bottom: auto; margin: 34px 0 0; }
  .history-bridge { top: 95px; width: 90vw; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 82px; }
  .section-shell, .hero-content { width: min(calc(100% - 30px), var(--shell)); }
  .site-header { padding: 8px 12px; }
  .identity img { width: 60px; height: 60px; }
  .site-header.scrolled .identity img { width: 52px; height: 52px; }
  .identity span, .share-top { display: none; }
  .language { gap: 2px; }.language button { min-width: 36px; padding: 5px 8px; }
  .hero { min-height: 900px; }
  .hero-content { padding: 155px 0 150px; }
  .hero h1 { font-size: clamp(3rem, 14vw, 5.1rem); }
  .hero-number { top: 112px; right: 16px; font-size: 5rem; }
  .hero-lead { font-size: 1rem; }
  .hero h1 em::after { width: 100%; height: 4px; }
  .hero-date-rail { grid-template-columns: 1fr 1fr; row-gap: 22px; margin-top: 38px; }
  .hero-count { right: 16px; bottom: 86px; }
  .scroll-cue { left: 15px; right: auto; bottom: 28px; }
  .july-chorus { padding: 17px 0; }
  .chant-track { padding-block: 10px 9px; }
  .chant-track span { padding-right: 13vw; font-size: .9rem; }
  .chorus-center { min-height: 350px; padding: 72px 18px; }
  .chorus-center p { font-size: clamp(2.1rem, 11vw, 3.5rem); }
  .chorus-center::before { width: 92vw; }
  .chorus-center::after { bottom: 48px; width: 82vw; }
  .chorus-pulse { font-size: 18rem; }
  .editorial-note, .phase-section, .facts, .timeline-section, .meaning, .evidence, .photo-essay, .people, .ncp-bridge, .diaspora, .legacy, .sources { padding: 70px 0; }
  section[data-section-no]::before { top: 16px; font-size: 5.8rem; }
  .section-heading { margin-bottom: 34px; }
  .section-heading h2, .note-grid h2, .photo-heading h2, .people h2, .ncp-bridge h2, .diaspora h2, .legacy h2, .sources h2, .meaning h2, .closing h2 { font-size: clamp(2.25rem, 10vw, 3.4rem); }
  .phase-grid, .fact-grid, .violation-grid, .pledges { grid-template-columns: 1fr; }
  .phase-card { min-height: 270px; }
  .fact { min-height: 210px; }
  .timeline::before, .timeline::after { left: 8px; }
  .timeline-item { grid-template-columns: 1fr; gap: 5px; padding-left: 38px; padding-bottom: 56px; }
  .timeline-item::before { left: 0; top: 4px; }
  .timeline-date { padding: 0; text-align: left; }
  .timeline-content, .timeline-item.visible .timeline-content { padding: 6px 0 0; }
  .timeline-signal { display: none; }
  .calendar-run { left: -70vw; right: -70vw; opacity: .08; }
  .finding-card { padding: 30px 23px; }
  .finding-card::after { font-size: 1.6rem; }
  .photo-heading { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr; grid-template-rows: 390px 330px 330px 390px; }
  .photo-card:nth-child(1), .photo-card:nth-child(2), .photo-card:nth-child(3), .photo-card:nth-child(4) { grid-column: 1; grid-row: auto; }
  .photo-caption { padding: 22px; }
  .history-bridge { top: 70px; opacity: .08; }
  .diaspora-layout { gap: 36px; }
  .diaspora-map { width: 100%; }
  .map-frame { border-radius: 18px; }
  .network-meta { top: 14px; left: 15px; }
  .network-meta span { font-size: .54rem; }
  .network-meta strong { font-size: .74rem; }
  .network-year { bottom: -18px; font-size: 5.8rem; }
  .dhaka-label { font-size: .46rem; }
  .city-ledger { gap: 5px; }
  .city-ledger span { font-size: .48rem; }
  .diaspora-links { grid-template-columns: 1fr; }
  .legacy-word { bottom: 32px; font-size: clamp(4.4rem, 20vw, 8rem); }
  .source { grid-template-columns: 42px 1fr; }.source-arrow { display: none; }
  .closing { padding: 96px 0; }.closing-36 { font-size: 8rem; }.closing-wave { left: 0; right: 0; }
  .footer-inner, .footer-links { flex-direction: column; align-items: flex-start; }
  [data-reveal] { transform: translateY(24px); filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .hero-blackout { display: none; }
  .hero-photo { transform: none; }
  .hero h1 em::after { transform: none; }
  .calendar-run span { opacity: 1; transform: none; }
}