/* ─────────────────────────────────────────────
   Pakistan Rehai Tehreek
   Palette: ajrak indigo, chalk, madder red
   ───────────────────────────────────────────── */

:root {
  --indigo: #0F1A3A;
  --indigo-2: #18264F;
  --chalk: #ECEEF2;
  --ink: #121A33;
  --madder: #B5281C;
  --madder-deep: #8E1D14;
  --slate: #565E74;

  --on-dark-muted: rgba(236, 238, 242, .72);
  --rule-light: rgba(18, 26, 51, .16);
  --rule-dark: rgba(236, 238, 242, .18);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --stencil: "Big Shoulders Stencil Display", "Big Shoulders Display", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --urdu: "Gulzar", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max: 78rem;
  --h1: clamp(4.2rem, min(15.5vw, 21svh), 13.5rem);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, blockquote, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }

[lang="ur"] { font-family: var(--urdu); line-height: 2; font-weight: 400; }

:focus-visible {
  outline: 3px solid var(--madder);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible, .prisoners :focus-visible, .join :focus-visible, .footer :focus-visible, .topbar :focus-visible {
  outline-color: var(--chalk);
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--chalk); color: var(--ink);
  padding: .6rem 1rem; font-family: var(--mono); font-size: .85rem;
}
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ── shared type ── */

.eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--madder);
}
.eyebrow-light { color: var(--on-dark-muted); }

.display-2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: .92;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin-top: .6rem;
}

.section { padding-block: clamp(5rem, 11vw, 9.5rem); }
.section-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-sub {
  margin-top: 1rem;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  font-style: italic;
  color: var(--slate);
  max-width: 34ch;
}

/* ── buttons ── */

.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--mono); font-size: .85rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn-small { padding: .6rem 1rem; font-size: .75rem; }
.btn-wide { width: 100%; justify-content: center; padding-block: 1.15rem; }
.btn-red { background: var(--madder); color: var(--chalk); }
.btn-red:hover { background: var(--madder-deep); }
.btn-chalk { background: var(--chalk); color: var(--ink); }
.btn-chalk:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--chalk); border-color: var(--rule-dark); }
.btn-ghost:hover { border-color: var(--chalk); }

/* ── top bar ── */

.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--gutter);
  color: var(--chalk);
  transition: background-color .3s, box-shadow .3s;
}
.topbar.is-solid {
  background: rgba(15, 26, 58, .94);
  box-shadow: 0 1px 0 var(--rule-dark);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.brand-ur { font-size: 1.35rem; line-height: 1.6; }
.brand-en {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-dark-muted);
}
.nav { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.8rem); }
.nav a:not(.btn) {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--on-dark-muted);
}
.nav a:not(.btn):hover { color: var(--chalk); }

@media (max-width: 760px) {
  .nav a:not(.btn) { display: none; }
  .brand-en { display: none; }
}

/* ─────────────────────────────────────────────
   HERO — the barrier
   ───────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  padding: 6.5rem var(--gutter) 2.5rem;
  background:
    radial-gradient(120% 70% at 50% 45%, var(--indigo-2) 0%, var(--indigo) 65%);
  color: var(--chalk);
  overflow: hidden;
  isolation: isolate;
}
.hero::after, .prisoners::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--noise);
  opacity: .07; pointer-events: none;
}

.hero-eyebrow { color: var(--on-dark-muted); }

.hero-stage {
  position: relative;
  align-self: center;
  width: min(100%, var(--max));
  margin-inline: auto;
}

.hero-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--h1);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.hero-title .line { display: block; }
.line-hidden { color: var(--chalk); position: relative; width: fit-content; }
.line-hidden::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em;
  height: .07em; background: var(--madder);
  transform: scaleX(0); transform-origin: left;
  transform-origin: var(--start-edge, left);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1) .35s;
}
.hero.is-open .line-hidden::after { transform: scaleX(1); }

.hero-alt {
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  color: var(--on-dark-muted);
  margin-top: .4rem;
  text-align: end;
}

/* the barrier itself */
.barrier { display: none; }
.js .barrier {
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  left: calc(-1 * var(--gutter) - 6vw);
  width: calc(100vw + 12vw);
  top: calc(var(--h1) * .86 * 1.5);
  height: calc(var(--h1) * .92);
  --rx: 0px; --ry: 0px; --rot: -3.5deg;
  transform: translate(var(--rx), calc(-50% + var(--ry))) rotate(var(--rot));
  background:
    linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.28)),
    repeating-linear-gradient(-45deg, var(--madder) 0 calc(var(--h1) * .42), #F2F2EE calc(var(--h1) * .42) calc(var(--h1) * .84));
  box-shadow:
    0 calc(var(--h1) * .14) calc(var(--h1) * .22) rgba(4, 8, 22, .55),
    inset 0 0 0 1px rgba(0,0,0,.25);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  z-index: 2;
}
.js .barrier::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--noise);
  mix-blend-mode: multiply; opacity: .35; pointer-events: none;
}
.barrier.is-dragging { cursor: grabbing; }
.barrier.is-settling { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.barrier.is-gone {
  transition: transform 1s cubic-bezier(.55, 0, .25, 1), opacity .4s ease .7s;
  opacity: 0;
  pointer-events: none;
}

.barrier-plate {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 70%;
  padding-inline: 1.4em;
  background: #F2F2EE;
  color: var(--madder);
  box-shadow: 0 0 0 calc(var(--h1) * .03) var(--madder);
  font-size: calc(var(--h1) * .2);
  line-height: 1;
  white-space: nowrap;
}
.barrier-en {
  font-family: var(--stencil); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}
.barrier-ur { font-size: .62em; line-height: 1.5; margin-top: .05em; }

/* foot of the hero */
.hero-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem 3rem;
  width: min(100%, var(--max));
  margin-inline: auto;
}
.hero-prompt { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-prompt-hint { font-family: var(--mono); font-size: .75rem; color: var(--on-dark-muted); letter-spacing: .06em; }
.hero.is-open .hero-prompt { display: none; }
html:not(.js) .hero-prompt { display: none; }

.hero-reveal { max-width: 40rem; animation: rise .8s cubic-bezier(.2, .7, .2, 1) both .45s; }
.hero-reveal-title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  font-style: italic; line-height: 1.15;
}
.hero-reveal-body { margin-top: .7rem; color: var(--on-dark-muted); font-size: 1rem; max-width: 34rem; }
.hero-ctas { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 860px) {
  .hero-foot { grid-template-columns: 1fr; }
  .hero-ctas { justify-content: flex-start; }
}

/* ─────────────────────────────────────────────
   PREAMBLE
   ───────────────────────────────────────────── */

.preamble-lead {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 3vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  max-width: 22ch;
}
.preamble-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule-light);
  color: var(--slate);
  max-width: 64rem;
}
.preamble-quote {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding-inline-start: clamp(1.25rem, 3vw, 2.5rem);
  border-inline-start: 6px solid var(--madder);
  max-width: 52rem;
}
.preamble-quote p {
  font-size: clamp(1.45rem, 1rem + 1.6vw, 2.3rem);
  font-style: italic;
  line-height: 1.3;
}
@media (max-width: 760px) { .preamble-cols { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────
   DEMANDS
   ───────────────────────────────────────────── */

.demands { padding-top: 0; }
.demands .section-head { padding-top: clamp(5rem, 11vw, 9.5rem); border-top: 1px solid var(--rule-light); }

.demand-list { border-top: 2px solid var(--ink); }
.demand {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--rule-light);
}
.demand-num {
  font-family: var(--display); font-weight: 800;
  font-size: 3.6rem; line-height: .8; color: var(--madder);
}
.demand-ur { font-size: 1.35rem; color: var(--slate); line-height: 1.7; margin-bottom: .25rem; }
.demand-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  line-height: .98; text-transform: uppercase;
  max-width: 20ch;
}
.demand-summary { margin-top: 1rem; max-width: 40rem; }

.demand-full { margin-top: 1.25rem; }
.demand-full summary {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--madder); cursor: pointer; list-style: none;
}
.demand-full summary::-webkit-details-marker { display: none; }
.demand-full summary::before { content: "+"; font-size: 1.1rem; line-height: 1; width: 1ch; }
.demand-full[open] summary::before { content: "−"; }
.demand-full p { margin-top: 1rem; font-size: .98rem; color: var(--slate); max-width: 40rem; }

.demand-law {
  align-self: start;
  padding: 1.4rem 1.5rem 1.5rem;
  background: #fff;
  box-shadow: 0 1px 0 var(--rule-light);
  border-top: 3px solid var(--ink);
}
.law-label {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}
.demand-law blockquote {
  margin-top: .8rem; font-style: italic; font-size: 1.05rem; line-height: 1.45;
}
.law-cite {
  margin-top: .6rem; font-family: var(--mono); font-size: .75rem;
  color: var(--madder); letter-spacing: .04em;
}
.law-cite + blockquote { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-light); }

.source-note { margin-top: 2rem; font-family: var(--mono); font-size: .72rem; color: var(--slate); }

@media (max-width: 980px) {
  .demand { grid-template-columns: 3rem minmax(0, 1fr); }
  .demand-law { grid-column: 2; }
  .demand-num { font-size: 2.8rem; }
}
@media (max-width: 560px) {
  .demand { grid-template-columns: 1fr; gap: 1rem; }
  .demand-law { grid-column: 1; }
}

/* ─────────────────────────────────────────────
   PRISONERS
   ───────────────────────────────────────────── */

.prisoners {
  position: relative; isolation: isolate;
  background: var(--indigo);
  color: var(--chalk);
  overflow: hidden;
}
.rehai {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem clamp(2rem, 6vw, 6rem);
}
.rehai-word {
  font-size: clamp(7rem, 22vw, 19rem);
  line-height: 1.6;
  color: var(--madder);
  text-align: center;
  margin-block: -.35em -.55em;
}
.rehai-body { margin-top: 1.4rem; color: var(--on-dark-muted); max-width: 32rem; }

.roll { margin-top: clamp(4rem, 9vw, 7rem); border-top: 1px solid var(--rule-dark); }
.roll-item {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: baseline;
  gap: .4rem 2rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule-dark);
}
.roll-name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
  line-height: 1; text-transform: uppercase;
}
.roll-role { font-style: italic; color: var(--on-dark-muted); }
.roll-status { font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; color: var(--on-dark-muted); text-align: end; }
.roll-status strong { color: var(--chalk); font-weight: 500; }

.roll-coda {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.8rem);
  line-height: .95; text-transform: uppercase;
  max-width: 16ch;
}
.roll-after { margin-top: 1.25rem; color: var(--on-dark-muted); max-width: 38rem; }

@media (max-width: 860px) {
  .rehai { grid-template-columns: 1fr; }
  .rehai-word { text-align: right; order: -1; margin-block: -.4em -.7em; }
  .roll-item { grid-template-columns: 1fr; }
  .roll-status { text-align: start; }
}

/* ─────────────────────────────────────────────
   PLEDGE
   ───────────────────────────────────────────── */

.oaths {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}
.oath { padding: clamp(1.75rem, 4vw, 3rem); }
.oath-theirs {
  border: 1px solid var(--rule-light);
  display: flex; flex-direction: column; justify-content: center;
}
.oath-theirs blockquote {
  margin-top: 1.25rem;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.7rem);
  font-style: italic; line-height: 1.18;
}
.oath-ours { background: var(--ink); color: var(--chalk); }
.oath-ours .law-label { color: var(--on-dark-muted); }
.pledge-list { margin: 1.5rem 0 2rem; counter-reset: p; }
.pledge-list li {
  position: relative;
  padding-block: 1rem; padding-inline-start: 2.2rem;
  border-bottom: 1px solid var(--rule-dark);
  line-height: 1.45;
}
.pledge-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 1.45rem;
  width: 1rem; height: 2px; background: var(--madder);
}
@media (max-width: 860px) { .oaths { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────
   JOIN
   ───────────────────────────────────────────── */

.join { background: var(--madder); color: var(--chalk); }
.join .eyebrow-light { color: rgba(236, 238, 242, .8); }
.join-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.join-intro > p:not(.eyebrow) { margin-top: 1.5rem; max-width: 30rem; }
.join-org { font-size: .98rem; color: rgba(236, 238, 242, .85); }
.join-org a { color: var(--chalk); text-underline-offset: .2em; }

.join-form {
  background: var(--indigo);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  display: grid; gap: 1.4rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
}
.join-form label, .chips legend {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted);
}
.opt { text-transform: none; letter-spacing: .02em; opacity: .7; }

.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips legend { margin-bottom: .8rem; padding: 0; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-block;
  padding: .5rem .85rem;
  border: 1px solid var(--rule-dark);
  font-family: var(--serif); font-size: .95rem; letter-spacing: 0; text-transform: none;
  color: var(--chalk);
  transition: background-color .15s, border-color .15s;
}
.chips label:hover span { border-color: var(--chalk); }
.chips input:checked + span { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.chips input:focus-visible + span { outline: 3px solid var(--chalk); outline-offset: 2px; }

.field { display: grid; gap: .5rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field input, .field select {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--chalk);
  background: rgba(236, 238, 242, .06);
  border: 0; border-bottom: 1.5px solid var(--rule-dark);
  border-radius: 0;
  padding: .75rem .8rem;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--chalk) 50%), linear-gradient(135deg, var(--chalk) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 2rem; }
[dir="rtl"] .field select { background-position: 12px 55%, 18px 55%; }
.field select option { color: var(--ink); }
.field input::placeholder { color: rgba(236, 238, 242, .45); }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--chalk); background-color: rgba(236, 238, 242, .1); }
.field [aria-invalid="true"] { border-bottom-color: #FF8A7A; }

.pledge-check {
  display: flex; gap: .8rem; align-items: flex-start; cursor: pointer;
  font-family: var(--serif) !important; font-size: 1rem !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--chalk) !important;
}
.pledge-check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--madder); flex: none; }

.form-error { font-family: var(--mono); font-size: .8rem; color: #FF8A7A; }

.form-done { display: grid; gap: .6rem; }
.form-done p a { color: var(--chalk); text-underline-offset: .2em; }
.form-done:focus { outline: none; }
.form-done-title {
  font-family: var(--display); font-weight: 800; font-size: 2.4rem;
  line-height: 1; text-transform: uppercase;
}
.join-form.is-done > :not(.form-done) { display: none; }

.share-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }

@media (max-width: 860px) {
  .join-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */

.footer { background: var(--indigo); color: var(--chalk); padding-block: 4.5rem 2rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 2.5rem; align-items: start;
}
.footer-ur { font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.8; }
.footer-en { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.footer-links { display: grid; gap: .5rem; }
.footer-links a { text-decoration: none; color: var(--on-dark-muted); }
.footer-links a:hover { color: var(--chalk); text-decoration: underline; text-underline-offset: .2em; }
.footer .share-row { margin-top: 0; }
.footer-base {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark);
  font-family: var(--mono); font-size: .72rem; color: var(--on-dark-muted);
}
.footer-base [lang="ur"] { font-size: .95rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────
   MANIFESTO PAGE
   ───────────────────────────────────────────── */

.doc-hero { background: var(--indigo); color: var(--chalk); padding: 8.5rem 0 4rem; }
.doc-hero h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: .92; text-transform: uppercase;
  max-width: 18ch; margin-top: .8rem;
}
.doc-hero .doc-ur { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--on-dark-muted); margin-top: 1rem; }
.doc-hero .doc-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }

.doc { padding-block: clamp(3.5rem, 8vw, 6rem); }
.doc-body { max-width: 42rem; }
.doc-body h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1;
  margin: 3.5rem 0 1.2rem; padding-top: 1.5rem; border-top: 2px solid var(--ink);
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.25;
  margin: 2.25rem 0 .7rem;
}
.doc-body p { margin-bottom: 1.1rem; }
.doc-body ul { margin-bottom: 1.1rem; }
.doc-body li { padding-block: .55rem; padding-inline-start: 1.6rem; position: relative; border-bottom: 1px solid var(--rule-light); }
.doc-body li::before { content: ""; position: absolute; inset-inline-start: 0; top: 1.25rem; width: .8rem; height: 2px; background: var(--madder); }

@media print {
  .topbar, .footer, .doc-actions, .skip { display: none !important; }
  .doc-hero { background: none; color: #000; padding: 0 0 1.5rem; }
  .doc-hero .doc-ur, .doc-hero .eyebrow { color: #333; }
  body { background: #fff; font-size: 11pt; }
  .doc { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .barrier.is-settling, .barrier.is-gone, .line-hidden::after, .btn { transition: none; }
  .hero-reveal { animation: none; }
}

/* ─────────────────────────────────────────────
   SAFETY GUIDE
   ───────────────────────────────────────────── */

.doc-intro { margin-top: 1.25rem; max-width: 36rem; color: var(--on-dark-muted); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }

.guide {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem);
}
.guide-index {
  position: sticky; top: 5.5rem; align-self: start;
  display: grid; gap: .55rem;
}
.guide-index .law-label { margin-bottom: .4rem; }
.guide-index a {
  text-decoration: none; color: var(--slate);
  padding-inline-start: .8rem; border-inline-start: 2px solid var(--rule-light);
}
.guide-index a:hover { color: var(--ink); border-inline-start-color: var(--madder); }

.guide-body { max-width: 46rem; }

.guide-warning {
  padding: 1.4rem 1.5rem;
  background: var(--ink); color: var(--chalk);
  border-inline-start: 6px solid var(--madder);
}
.guide-warning .law-label { color: var(--on-dark-muted); margin-bottom: .5rem; }

.guide-section { padding-top: clamp(3.5rem, 7vw, 5rem); scroll-margin-top: 4.5rem; }
.guide-section h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .95;
}
.guide-ur { font-size: 1.35rem; color: var(--slate); line-height: 1.7; }
.guide-lead {
  margin-top: .9rem; font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem);
  font-style: italic; line-height: 1.35; max-width: 34ch;
}

.tips { margin-top: 2rem; border-top: 2px solid var(--ink); }
.tips li {
  padding-block: 1.15rem 1.2rem; padding-inline-start: 2rem;
  border-bottom: 1px solid var(--rule-light);
  position: relative; color: var(--slate);
}
.tips li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 1.65rem;
  width: 1rem; height: 2px; background: var(--madder);
}
.tips strong, .steps strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .2rem; }

.kit {
  margin-top: 2rem; padding: 1.4rem 1.5rem;
  border: 1px solid var(--rule-light); background: #fff;
}
.kit ul { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.kit li { padding: .4rem .75rem; border: 1px solid var(--rule-light); font-size: .95rem; }

.steps { margin-top: 2rem; counter-reset: step; border-top: 2px solid var(--ink); }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr);
  padding-block: 1.2rem; border-bottom: 1px solid var(--rule-light); color: var(--slate);
}
.steps li::before {
  content: counter(step);
  font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: .9;
  color: var(--madder); grid-row: span 2;
}

.guide-note { margin-top: 1.75rem; font-size: .95rem; color: var(--slate); }

/* the rights card */
.rights-card {
  margin-top: 2.5rem;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  max-width: 40rem;
  scroll-margin-top: 6rem;
}
.rights-card-stripe {
  height: 14px;
  background: repeating-linear-gradient(-45deg, var(--madder) 0 12px, #F2F2EE 12px 24px);
  border-bottom: 2px solid var(--ink);
}
.rights-card-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.4rem .4rem;
}
.rights-card-head h3 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: 2rem; line-height: 1;
}
.rights-card-ur-title { font-size: 1.5rem; line-height: 1.6; }
.rights-list { padding: 0 1.4rem; }
.rights-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: .25rem 1.25rem; align-items: baseline;
  padding-block: .7rem; border-top: 1px solid var(--rule-light);
}
.r-en { font-size: .98rem; line-height: 1.35; }
.r-ur { font-size: 1.02rem; line-height: 1.9; text-align: right; }
.r-cite { font-family: var(--mono); font-size: .7rem; color: var(--madder); white-space: nowrap; }
.rights-card-foot {
  display: grid; gap: .6rem;
  margin: .4rem 1.4rem 0; padding-block: 1rem;
  border-top: 2px solid var(--ink);
  font-family: var(--mono); font-size: .78rem;
}
.rights-card-foot p { display: flex; gap: .5rem; align-items: flex-end; }
.blank { flex: 1; border-bottom: 1px solid var(--ink); min-height: 1.2em; }
.rights-card-src {
  padding: .7rem 1.4rem; background: var(--ink); color: var(--on-dark-muted);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
}
.card-actions { margin-top: 2rem; }

.help-list { margin-top: 2rem; border-top: 2px solid var(--ink); }
.help-list li { display: grid; gap: .25rem; padding-block: 1.1rem; border-bottom: 1px solid var(--rule-light); }
.help-list a { font-weight: 600; color: var(--ink); text-decoration-color: var(--madder); text-underline-offset: .2em; }
.help-list span { color: var(--slate); font-size: .98rem; }

@media (max-width: 860px) {
  .guide { grid-template-columns: 1fr; }
  .guide-index { position: static; display: flex; flex-wrap: wrap; gap: .5rem; }
  .guide-index .law-label { width: 100%; }
  .guide-index a { border: 1px solid var(--rule-light); padding: .35rem .7rem; font-size: .95rem; }
}
@media (max-width: 560px) {
  .rights-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .r-ur { grid-column: 1 / -1; grid-row: 2; }
  .rights-card { box-shadow: 6px 6px 0 var(--ink); }
}

@media print {
  .guide-index, .doc-hero .doc-actions, .card-actions { display: none !important; }
  .guide { display: block; padding: 0; }
  .rights-card { box-shadow: none; break-inside: avoid; }
  .rights-card-stripe, .rights-card-src { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tips li, .steps li { break-inside: avoid; }

  /* "Print the rights card" prints only the card */
  body.print-card * { visibility: hidden; }
  body.print-card .rights-card, body.print-card .rights-card * { visibility: visible; }
  body.print-card .rights-card { position: absolute; left: 0; top: 0; width: 15cm; margin: 0; }
}

/* ─────────────────────────────────────────────
   URDU EDITION (html[lang="ur"][dir="rtl"])
   Nastaliq needs tall lines, no letter-spacing
   (it breaks the joins) and no faux italics.
   ───────────────────────────────────────────── */

html[lang="ur"] { --start-edge: right; }
html[lang="ur"] body {
  font-family: var(--urdu), var(--serif);
  font-size: clamp(1.12rem, 1rem + .4vw, 1.3rem);
  line-height: 2.1;
}
html[lang="ur"] body *:not([lang="en"]) { letter-spacing: 0 !important; font-style: normal !important; }
:where(html[lang="ur"] [lang="en"]) { font-family: var(--serif); line-height: 1.5; }

/* display type → Nastaliq */
html[lang="ur"] :is(.display-2, .demand-title, .roll-name, .roll-coda, .form-done-title,
  .doc-hero h1, .doc-body h2, .guide-section h2, .rights-card-head h3, .preamble-lead, .hero-reveal-title) {
  font-family: var(--urdu);
  font-weight: 400;
  text-transform: none;
}
html[lang="ur"] .display-2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.6; margin-top: .2rem; }
html[lang="ur"] .demand-title { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.4rem); line-height: 1.65; max-width: 24ch; }
html[lang="ur"] .roll-name { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); line-height: 1.6; }
html[lang="ur"] .roll-coda { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.6; max-width: 20ch; }
html[lang="ur"] .form-done-title { font-size: 2rem; line-height: 1.6; }
html[lang="ur"] .doc-hero h1 { font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.6; max-width: 22ch; }
html[lang="ur"] .doc-body h2, html[lang="ur"] .guide-section h2 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.6; }
html[lang="ur"] .rights-card-head h3 { font-size: 1.9rem; line-height: 1.6; }
html[lang="ur"] .preamble-lead { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.7; max-width: 26ch; }
html[lang="ur"] .preamble-quote p, html[lang="ur"] .oath-theirs blockquote { line-height: 1.9; }
html[lang="ur"] .hero-reveal-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.6; }
html[lang="ur"] .doc-body h3 { font-family: var(--urdu); font-weight: 400; font-size: 1.4rem; line-height: 1.8; }
html[lang="ur"] strong, html[lang="ur"] b { font-weight: 400; }
html[lang="ur"] :is(.tips, .steps, .guide-warning) strong { color: var(--ink); font-size: 1.08em; }
html[lang="ur"] .guide-warning strong { color: var(--chalk); }

/* mono labels → small Nastaliq */
html[lang="ur"] :is(.eyebrow, .law-label, .law-cite, .btn, .nav a, .roll-status, .source-note,
  .join-form label, .chips legend, .hero-prompt-hint, .demand-full summary, .rights-card-foot,
  .r-cite, .form-error) {
  font-family: var(--urdu);
  text-transform: none;
  line-height: 1.8;
}
html[lang="ur"] .eyebrow, html[lang="ur"] .law-label { font-size: .95rem; }
html[lang="ur"] .law-cite, html[lang="ur"] .r-cite, html[lang="ur"] .roll-status { font-size: .95rem; }
html[lang="ur"] .btn { font-size: 1.05rem; padding: .55rem 1.4rem .8rem; }
html[lang="ur"] .btn-small { font-size: .95rem; padding: .35rem .9rem .55rem; }
html[lang="ur"] .nav a:not(.btn) { font-size: 1rem; }
html[lang="ur"] .join-form label:not(.pledge-check), html[lang="ur"] .chips legend { font-size: .95rem; }
html[lang="ur"] .chips span { font-family: var(--urdu); font-size: 1rem; padding: .2rem .85rem .45rem; }
html[lang="ur"] .pledge-check { font-family: var(--urdu) !important; font-size: 1.05rem !important; }
html[lang="ur"] .demand-full summary { font-size: 1rem; }
html[lang="ur"] .demand-num, html[lang="ur"] .steps li::before { font-family: var(--urdu); font-weight: 400; line-height: 1; }
html[lang="ur"] .demand-num { font-size: 3.2rem; }
html[lang="ur"] .steps li::before { content: counter(step, urdu); font-size: 2rem; }
html[lang="ur"] .field input, html[lang="ur"] .field select { font-family: var(--urdu); padding-block: .4rem .65rem; }
html[lang="ur"] .rights-card-foot { font-size: .95rem; }

/* English alt-lines on Urdu pages (mirror of the Urdu lines on English pages) */
html[lang="ur"] :is(.demand-ur, .guide-ur)[lang="en"] {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; margin-bottom: .5rem;
  text-align: right;
}
html[lang="ur"] .doc-ur[lang="en"] { text-align: right; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.1; }
html[lang="ur"] .rights-card-ur-title[lang="en"] { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.3rem; }
html[lang="ur"] .footer-ur[lang="en"] { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1.1; }
html[lang="ur"] .rights-card { box-shadow: -10px 10px 0 var(--ink); }
html[lang="ur"] .r-en { font-size: .9rem; color: var(--slate); text-align: left; }
html[lang="ur"] .r-ur { text-align: right; font-size: 1.1rem; }

/* hero: "فوج ریاست / نہیں ہے" — the barrier covers line 2 */
html[lang="ur"] .hero-title {
  --h1: clamp(3.8rem, min(15vw, 19svh), 11rem);
  font-family: var(--urdu);
  font-weight: 400;
  text-transform: none;
  line-height: 1.5;
}
html[lang="ur"] .js .barrier,
html.js[lang="ur"] .barrier {
  --h1: clamp(3.8rem, min(15vw, 19svh), 11rem);
  top: calc(var(--h1) * 1.5 * 1.5);
  height: calc(var(--h1) * 1.25);
}
html[lang="ur"] .hero-alt[lang="en"] {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.8vw, 2.2rem); line-height: 1.1; margin-top: .8rem;
}
html[lang="ur"] .barrier-plate { flex-direction: column-reverse; }
html[lang="ur"] .barrier-ur { font-size: 1em; line-height: 1.4; }
html[lang="ur"] .barrier-en { font-size: .5em; }

/* language switch */
.lang-switch { font-family: var(--urdu) !important; font-size: 1.05rem !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--chalk) !important; line-height: 1.6; }
.lang-switch[lang="en"] { font-family: var(--mono) !important; font-size: .75rem !important; letter-spacing: .1em !important; text-transform: uppercase !important; }
@media (max-width: 760px) { .nav a.lang-switch { display: inline; } }
@media (max-width: 560px) {
  html[lang="ur"] .r-ur { grid-row: 1; grid-column: 1; }
  html[lang="ur"] .r-en { grid-row: 2; grid-column: 1 / -1; }
}

/* ═════════════════════════════════════════════
   VISUAL LAYER v2
   crowd of lights · banners · lit statement ·
   demand cards · prison bars · reveals
   ═════════════════════════════════════════════ */

:root { --lamp: #FFC979; }

/* ── crowd of lights (canvas) ── */
.crowd { position: absolute; left: 0; bottom: 0; width: 100%; z-index: -1; pointer-events: none; display: block; }
.hero .crowd { height: clamp(240px, 50%, 520px); }
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(65% 60% at 50% 100%, rgba(255, 170, 88, .34), transparent 72%),
    radial-gradient(40% 45% at 15% 100%, rgba(255, 170, 88, .16), transparent 70%),
    radial-gradient(40% 45% at 88% 100%, rgba(255, 170, 88, .16), transparent 70%);
}
.hero-foot { position: relative; }
.hero-alt { text-align: right; }
html[lang="ur"] .hero-alt { text-align: left; }
.hero-reveal, .hero-prompt-hint { text-shadow: 0 2px 14px rgba(5, 10, 30, .9); }

.join { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(12rem, 24vw, 19rem); }
.join .crowd { height: clamp(200px, 34vw, 380px); }
.join::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: -2; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 110%, rgba(255, 214, 150, .28), transparent 70%);
}

/* ── moving banners ── */
.marquee {
  position: relative; overflow: hidden; direction: ltr;
  background: var(--madder); color: var(--chalk);
  border-block: 9px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #F2F2EE 0 9px, var(--ink) 9px 18px) 9;
}
.marquee-ink { background: var(--ink); border-image: repeating-linear-gradient(-45deg, var(--madder) 0 9px, #F2F2EE 9px 18px) 9; }
.marquee-track { display: flex; width: max-content; animation: marquee 55s linear infinite; }
.marquee-ink .marquee-track { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex: none; }
.marquee-group > span {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.8vw, 2.5rem); line-height: 1.3; white-space: nowrap;
  padding-block: .85rem; padding-inline: 1.3rem;
}
.marquee-group > span[lang="ur"] { font-family: var(--urdu); font-weight: 400; text-transform: none; line-height: 1.5; padding-block: .3rem .7rem; }
.marquee-group > i {
  flex: none; width: 2.6rem; height: .7rem;
  background: repeating-linear-gradient(-45deg, #F2F2EE 0 6px, var(--madder-deep) 6px 12px);
  box-shadow: 0 0 0 1.5px rgba(242, 242, 238, .8);
}
.marquee-ink .marquee-group > i { background: repeating-linear-gradient(-45deg, #F2F2EE 0 6px, var(--madder) 6px 12px); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── statement that lights up as you scroll ── */
.lit {
  margin-top: 1.4rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 5rem);
  line-height: 1.06; letter-spacing: -.02em;
  max-width: 21ch;
}
.lit em { font-style: italic; color: var(--madder); }
.js .lit .w { color: rgba(18, 26, 51, .14); transition: color .35s ease; }
.js .lit .w.on { color: var(--ink); }
.js .lit em.w.on { color: var(--madder); }
html[lang="ur"] .lit { font-family: var(--urdu); line-height: 1.75; font-size: clamp(1.9rem, 1.1rem + 3vw, 4rem); max-width: 22ch; }

/* ── demand cards ── */
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.dcard-link {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  height: 100%; min-height: 29rem;
  padding: 2rem 1.8rem 1.5rem;
  text-decoration: none;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s;
}
.dcard-link:hover { transform: translateY(-8px); box-shadow: 0 34px 50px -30px rgba(15, 26, 58, .75); }
.dcard-link::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(-45deg, var(--madder) 0 10px, #F2F2EE 10px 20px);
  transform: scaleX(0); transform-origin: var(--start-edge, left);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.dcard-link:hover::before, .dcard-link:focus-visible::before { transform: scaleX(1); }
.dcard--red .dcard-link::before { background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, #F2F2EE 10px 20px); }

.dcard-num {
  position: absolute; z-index: -1; top: -.16em; inset-inline-end: .06em;
  font-family: var(--display); font-weight: 900; font-size: 20rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px var(--num, #ECEEF2); opacity: .22;
  transition: opacity .4s, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.dcard-link:hover .dcard-num { opacity: .34; transform: translateY(.06em); }
.dcard-icon {
  width: 104px; height: 104px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .55s cubic-bezier(.3, 1.5, .5, 1);
}
.dcard-link:hover .dcard-icon { transform: rotate(-8deg) scale(1.1); }
.dcard-ur { margin-top: auto; padding-top: 2.5rem; font-family: var(--urdu); font-size: 1.3rem; line-height: 1.7; opacity: .85; }
.dcard-title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 1.5rem + 1.1vw, 2.7rem); line-height: .94;
}
.dcard-sum { margin-top: .9rem; font-size: 1.02rem; line-height: 1.5; opacity: .88; }
.dcard-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.dcard-more { white-space: nowrap; }
.dcard-more::after { content: " →"; display: inline-block; transition: transform .3s; }
[dir="rtl"] .dcard-more::after { content: " ←"; }
.dcard-link:hover .dcard-more::after { transform: translateX(4px); }
[dir="rtl"] .dcard-link:hover .dcard-more::after { transform: translateX(-4px); }

.dcard--indigo .dcard-link { background: var(--indigo); color: var(--chalk); }
.dcard--indigo .dcard-icon { stroke: var(--lamp); }
.dcard--white .dcard-link { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-light); --num: #121A33; }
.dcard--white .dcard-icon { stroke: var(--madder); }
.dcard--red .dcard-link { background: var(--madder); color: var(--chalk); }

html[lang="ur"] .dcard-title { font-family: var(--urdu); font-weight: 400; text-transform: none; font-size: clamp(1.8rem, 1.3rem + 1vw, 2.4rem); line-height: 1.6; }
html[lang="ur"] .dcard-ur[lang="en"] { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; }
html[lang="ur"] .dcard-sum { font-size: 1.08rem; line-height: 1.95; }
html[lang="ur"] .dcard-foot { font-family: var(--urdu); font-size: .95rem; text-transform: none; }

@media (max-width: 1020px) { .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .dgrid { grid-template-columns: 1fr; }
  .dcard-link { min-height: 0; }
  .dcard-num { font-size: 14rem; }
}

/* ── the full-demand dialog ── */
.ddialog {
  width: min(100% - 2rem, 64rem); max-height: min(92vh, 56rem);
  padding: 0; border: 0;
  background: var(--chalk); color: var(--ink);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.ddialog::backdrop { background: rgba(8, 13, 32, .78); backdrop-filter: blur(5px); }
.ddialog[open] { animation: ddialog-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes ddialog-in { from { opacity: 0; transform: translateY(30px) scale(.98); } }
.ddialog-stripe { height: 14px; background: repeating-linear-gradient(-45deg, var(--madder) 0 12px, #F2F2EE 12px 24px); border-bottom: 2px solid var(--ink); }
.ddialog-inner { position: relative; padding: clamp(1.5rem, 4vw, 3.25rem); overflow: auto; max-height: calc(min(92vh, 56rem) - 14px); }
.ddialog-close {
  position: absolute; top: 1.2rem; inset-inline-end: 1.2rem;
  font: 500 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: var(--chalk); border: 0; padding: .6rem .9rem; cursor: pointer;
}
.ddialog-close:hover { background: var(--madder); }
.ddialog-title {
  margin-top: .5rem; padding-inline-end: 6rem;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); line-height: .94;
}
.ddialog-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; margin-top: 2rem; }
.ddialog-text p { color: var(--slate); }
.ddialog-text p + p { margin-top: 1rem; }
html[lang="ur"] .ddialog-title { font-family: var(--urdu); font-weight: 400; text-transform: none; line-height: 1.6; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
html[lang="ur"] .ddialog-close { font-family: var(--urdu); font-size: 1rem; text-transform: none; padding: .3rem .9rem .5rem; }
@media (max-width: 760px) { .ddialog-cols { grid-template-columns: 1fr; } }

/* ── prison bars that open as you scroll ── */
.cell { position: relative; overflow: hidden; margin-top: clamp(4rem, 9vw, 7rem); }
.cell .roll { margin-top: 0; }
.bars { display: none; }
.js .bars { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bars span {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    linear-gradient(to bottom,
      #6a7391 0 9px, #1a2140 9px 14px, transparent 14px calc(50% - 6px),
      #6a7391 calc(50% - 6px) calc(50% + 3px), #1a2140 calc(50% + 3px) calc(50% + 7px), transparent calc(50% + 7px) calc(100% - 14px),
      #1a2140 calc(100% - 14px) calc(100% - 9px), #6a7391 calc(100% - 9px)),
    repeating-linear-gradient(90deg,
      transparent 0 62px,
      #10162c 62px 64px, #5c6585 64px 67px, #a4acc4 67px 69px, #4a5273 69px 74px, #141a33 74px 77px);
  box-shadow: 0 0 40px rgba(0, 0, 0, .35);
}
.bars-l { left: 0; transform: translateX(calc(-102% * var(--open, 0))); }
.bars-r { right: 0; transform: translateX(calc(102% * var(--open, 0))); }

/* ── scroll reveals ── */
.js [data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .dcard-link, .dcard-icon, .dcard-num, .dcard-link::before { transition: none; }
  .ddialog[open] { animation: none; }
}

/* footer: keep the other-language lines aligned with their column */
html:not([lang="ur"]) .footer-links a[dir="rtl"], html:not([lang="ur"]) .footer-ur { text-align: left; }
html[lang="ur"] .footer-links a[dir="ltr"] { text-align: right; }

/* the armed forces' oath, set like an official document */
.oath-theirs {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2.1rem, rgba(18, 26, 51, .07) 2.1rem calc(2.1rem + 1px)),
    #fff;
}
.oath-theirs::before {
  content: "\201C"; position: absolute; z-index: -1; top: -.18em; inset-inline-start: .04em;
  font-family: var(--serif); font-size: 16rem; line-height: 1; color: var(--madder); opacity: .14;
}

.notfound { min-height: 100svh; }

/* honeypot: invisible to people, tempting to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.join-form button[disabled] { opacity: .7; cursor: progress; }