/* ==========================================================================
   Landing page + 3-step form.

   THE ONE IDEA, because everything below follows from it:

     LOUD WHEN WE DECLARE. QUIET WHEN WE ASK.

   This page recruits, so the top of it is a poster: saffron and manganese
   fields, type set across the whole measure, no hedging. But it also asks
   Iranian Canadians for their name, phone and political interests, and
   transnational repression against this community in Canada is documented and
   real. So the page gets deliberately, structurally CALMER as it starts
   asking: the form sits on plain paper, at body size, with no field colour
   and no urgency.

   That inversion is the trust mechanism, not a compromise on the brief. A
   data-harvesting funnel is loud exactly where it takes from you. This one
   shouts its beliefs and its disclaimers, then lowers its voice to ask.

   And the disclaimers are set at the SAME poster scale as the recruiting
   line. "We are not a party" is not fine print here, it is a headline. Going
   bold and staying trustworthy is the same gesture, done once.

   RTL rule for this file: no `left`, `right`, `margin-left`, `padding-right`,
   `border-left`, `text-align: left` anywhere. Logical properties only, so the
   Farsi mirror is structural rather than a pile of [dir="rtl"] overrides.
   The only physical property permitted is the girih panel's background
   position, which is a composition crop, and its RTL flip.
   ========================================================================== */

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

/* Any class that sets `display` outbids the UA's [hidden] rule, so every
   component that JS hides needs this or it stays on screen. form.js hides
   #back, the panels, the conditional fields and the Turnstile container by
   toggling the attribute, and #back is a .btn with display:inline-flex, so
   without this the Back button shows on step 1. One global rule instead of a
   per-component workaround each time it bites. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-variation-settings: 'wdth' var(--wdth-body);
  font-synthesis: none;          /* never let the browser fake a weight */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-heading); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
/* The UA gives dd a 40px inline-start margin, which indents every definition
   away from its own label. The declaration grid and the stat blocks are both
   <dl>s, so reset it rather than fight it per component. */
dl, dd { margin: 0; }

a { color: var(--cerise-deep); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-colour);
  outline-offset: var(--focus-offset);
  /* Never animate the ring. It shows instantly or it is not a focus ring. */
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--cerise); color: var(--paper); }

/* ==========================================================================
   Display type. The load-bearing element of the whole page.

   Persian letterforms ARE the architecture: "the Arabic alphabet was
   developed by the Persians into an amazing variety of beautiful forms which
   were incorporated into every part of the mosques so that the building
   virtually becomes the word of God" (Pope). Oversized type as structure is
   the Persian move, not an imported one.
   ========================================================================== */
.d {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  overflow-wrap: anywhere;      /* long words must never force a scrollbar */
  min-width: 0;
}
/* Farsi has no capitals and no negative tracking (it breaks the joins), so
   its force has to come from weight and size instead. --fa-boost is measured,
   not guessed: at 76px Latin the matching Farsi is 86px. */
:lang(fa) .d {
  text-transform: none;
  letter-spacing: 0;
  font-size: calc(var(--_ds, 1rem) * var(--fa-boost));
  font-variation-settings: normal;
}

.d--display { --_ds: clamp(2.75rem, 1.1rem + 7.4vw, var(--t-display)); font-size: var(--_ds); }
.d--h1      { --_ds: clamp(2.1rem, 1.2rem + 4.0vw, var(--t-h1));       font-size: var(--_ds); }
.d--h2      { --_ds: clamp(1.6rem, 1.1rem + 2.2vw, var(--t-h2));       font-size: var(--_ds); }

/* The accent word. Tandem's move on the AOC poster: one word carries the
   colour, the rest carries the weight. */
.d em { font-style: normal; color: var(--cerise); }
.on-ink .d em { color: var(--cerise-lift); }       /* 6.13:1 on ink */
.on-saffron .d em { color: var(--cerise-deep); }   /* 3.66:1, large type only */

/* --- utilities ---------------------------------------------------------- */
.tnum { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; inset-inline-start: var(--s-4); inset-block-start: -100%;
  z-index: 100; background: var(--cerise); color: var(--paper);
  padding: var(--s-3) var(--s-4); font-size: var(--t-small); font-weight: 700;
}
.skip:focus { inset-block-start: var(--s-4); }

.wrap {
  inline-size: 100%;
  max-inline-size: 1220px;
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (max-width: 560px) { .wrap { padding-inline: var(--s-4); } }

/* ==========================================================================
   The fields. Haft Rang: flat colour, hard manganese keyline, no gradient.
   The keyline between fields is the entire depth strategy. No shadows exist
   on this page.
   ========================================================================== */
.field-saffron { background: var(--saffron); color: var(--ink); }
.field-ink     { background: var(--ink);     color: var(--paper); }
.field-paper   { background: var(--paper);   color: var(--ink); }

.field-saffron, .field-ink, .field-paper {
  border-block-end: var(--key-w) solid var(--key);
}
.field-ink { border-block-end-color: var(--paper); }

/* Section padding deliberately VARIES by role. Every section padded the same
   is a tell, and a poster does not have an even rhythm. */
.sec        { padding-block: var(--s-9); }
.sec--tight { padding-block: var(--s-7); }
@media (max-width: 900px) {
  .sec { padding-block: var(--s-7); }
    .sec--tight { padding-block: var(--s-6); }
}

/* ==========================================================================
   Masthead (N6). A campaign masthead, not an app nav: it carries the one
   fact that never changes (the date) and the one action (join).
   ========================================================================== */
.hdr {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: var(--ink); color: var(--paper);
  border-block-end: var(--key-w) solid var(--paper);
}
.hdr__in {
  display: flex; align-items: center; gap: var(--s-5);
  min-block-size: 62px;
}
.brand {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--paper); text-decoration: none;
  margin-inline-end: auto; min-inline-size: 0;
}
/* The mark is one tile of the system: saffron field, khatam star inlay.
   Drawn to hold down to 16px, so 26px in the masthead is comfortable. */
.brand__mark { inline-size: 26px; block-size: 26px; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 108;
  font-weight: 800; font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: 0.01em;
  line-height: 1.15;
  /* No tight character cap here. The name is still .tbc, so it has to survive a
     change of wording: the flex line does the real work (.brand shrinks because
     it has min-inline-size: 0, so the nav is never pushed off). This cap is only
     a guard against a runaway name eating the masthead, set well clear of the
     current wording so it does not force a break that the space does not need. */
  max-inline-size: 40ch;
}
:lang(fa) .brand__name {
  text-transform: none; font-variation-settings: normal; letter-spacing: 0;
}

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav a {
  color: var(--paper); text-decoration: none;
  font-size: var(--t-small); font-weight: 600;
  padding-block: var(--s-2);
  border-block-end: 2px solid transparent;
  white-space: nowrap;              /* nav links must never wrap to two lines */
}
.nav a:hover { color: var(--saffron); border-block-end-color: var(--saffron); }

/* --- the language pair --------------------------------------------------
   Both scripts are visible at all times, at the same size, on the same
   plane. On the AOC identity the two languages were set facing each other so
   they read as a conversation, because "Spanish speakers were not a
   footnote". Same principle: Farsi is not a footnote, so the toggle does not
   hide it behind a single button that only names the other language.
   The active side is marked; the inactive side is the control. */
.lang {
  display: inline-flex; align-items: stretch;
  border: 2px solid var(--paper);
  background: transparent; padding: 0; cursor: pointer;
  font-family: inherit; min-block-size: 38px;
}
.lang span {
  display: flex; align-items: center; padding-inline: var(--s-3);
  font-size: var(--t-meta); font-weight: 700; line-height: 1;
  color: var(--paper);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.lang .lang__en { font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 100; }
.lang .lang__fa { font-family: 'Estedad', 'Tahoma', sans-serif; }
/* The ACTIVE language is the filled one. */
html:lang(en) .lang .lang__en,
html:lang(fa) .lang .lang__fa { background: var(--paper); color: var(--ink); }
.lang:hover .lang__en, .lang:hover .lang__fa { color: var(--saffron); }
html:lang(en) .lang:hover .lang__en,
html:lang(fa) .lang:hover .lang__fa { background: var(--saffron); color: var(--ink); }

@media (max-width: 900px) { .nav a[data-nav-hide] { display: none; } }
@media (max-width: 460px) {
  /* Two lines, not three. The dashed .tbc rule repeats on every line it wraps
     to, so a third line reads as breakage rather than as a placeholder. */
  .brand__name { font-size: var(--t-micro); max-inline-size: 20ch; }
  .hdr__in { gap: var(--s-3); }
}

/* ==========================================================================
   Hero. The saffron field is about 50% of the fold on purpose: on the AOC poster
   the flat colour is the GROUND (49% of the surface), not an accent. That
   ratio is the difference between "movement" and "institution".

   Girih survives here, and only here, and only as an undertone at 7%: real
   {10/3} strapwork construction (assets/girih.py, kept because it is real
   geometry rather than a traced motif). It is felt, not announced. The Persian
   content of this design is the Haft Rang firing rule in tokens.css, not this
   texture.
   ========================================================================== */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/girih-panel.svg');
  background-size: 1200px auto;
  background-position: 88% -22%;     /* physical: the crop is a composition choice */
  background-repeat: no-repeat;
  color: var(--ink);
  opacity: 0.07;
  pointer-events: none;
}
[dir='rtl'] .hero::before { transform: scaleX(-1); }

/* Two columns: the statement takes the measure it needs, the countdown takes
   the rest. Baseline-aligned at the bottom so the numeral sits on the same
   line as the buttons and the whole fold reads as one poster. */
.hero__in {
  position: relative;
  padding-block: var(--s-9) var(--s-8);
  display: grid;
  /* `auto` for the countdown, not an fr fraction. An fr split has to be tuned
     to two things at once and loses both: at 1.62/0.38 the numeral column
     came out at exactly 214px and the Persian ۱۰۲ overflowed its own box.
     Sizing the numeral to its content and giving the headline the remainder
     satisfies both constraints at every width and in both scripts, without a
     magic number. Measured: the headline needs 812px, this leaves it about 864. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-7);
  align-items: end;
}
@media (max-width: 980px) {
  .hero__in {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding-block: var(--s-7) var(--s-6);
  }
}

/* Grid items default to min-width:auto, which lets a long word push the track
   wider than its share and blow out the row. */
.hero__say { min-inline-size: 0; }

.hero__date {
  display: inline-block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 100;
  font-weight: 800; font-size: var(--t-small);
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--ink); color: var(--saffron);
  padding: var(--s-2) var(--s-3);
  margin-block-end: var(--s-5);
}
:lang(fa) .hero__date {
  text-transform: none; letter-spacing: 0; font-variation-settings: normal;
}

.hero h1 { max-inline-size: 16ch; }
:lang(fa) .hero h1 { max-inline-size: 18ch; }

.hero__sub {
  font-size: var(--t-lead);
  font-weight: 500;
  color: var(--ink);
  max-inline-size: 46ch;
  margin-block-start: var(--s-5);
}
:lang(fa) .hero__sub { font-size: var(--t-body); }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-6); }

/* --- the countdown ------------------------------------------------------
   The brief asked for counters and momentum. The one number this committee
   can honestly put at poster scale is the one that is TRUE without any
   supporters: days until the city votes. Nothing here implies turnout,
   membership or momentum we have not earned. Manufacturing a supporter
   counter would be the fastest way to lose exactly the audience that has the
   best reasons to be careful. */
.count {
  padding-block-start: var(--s-4);
  border-block-start: var(--key-w-thick) solid var(--ink);
}
@media (max-width: 980px) {
  .count { margin-block-start: var(--s-6); inline-size: fit-content; }
}
.count__n {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 900;
  font-size: clamp(4rem, 1.5rem + 8.5vw, 8.5rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
:lang(fa) .count__n { font-variation-settings: normal; letter-spacing: 0; }
.count__l {
  display: block;
  font-weight: 800; font-size: var(--t-small);
  text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1.2;
  margin-block-start: var(--s-2);
  max-inline-size: 14ch;
}
:lang(fa) .count__l { text-transform: none; letter-spacing: 0; font-size: var(--t-meta); }

/* ==========================================================================
   Buttons. Oversized solid blocks. Zero radius, keyline not shadow.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-block-size: 54px;
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 105;
  font-size: var(--t-small); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: var(--radius);
  border: var(--key-w) solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
:lang(fa) .btn {
  font-family: var(--font-farsi); text-transform: none; letter-spacing: 0;
  font-variation-settings: normal; font-weight: 700;
}
.btn:active { transform: translateY(2px); }

.btn--primary { background: var(--cerise); color: var(--paper); }
.btn--primary:hover { background: var(--ink); color: var(--saffron); }
/* The ring sits BETWEEN the paper and the cerise fill, so it has to clear 3:1
   on both edges. The page's default cerise-deep ring scores 5.10:1 against
   paper but 1.20:1 against the cerise button itself: invisible exactly on the
   Join and Submit buttons, which are the two controls that matter most. Ink
   clears both (16.77:1 outer / 3.96:1 inner). */
.btn--primary { --focus-colour: var(--ink); }
/* ...except on the ink field, where an ink ring would vanish into the field.
   Saffron clears both there (12.03:1 outer / 3.04:1 inner). */
.on-ink .btn--primary { --focus-colour: var(--saffron); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.on-ink .btn--ghost { color: var(--paper); border-color: var(--paper); }
.on-ink .btn--ghost:hover { background: var(--paper); color: var(--ink); }
.on-ink .btn--primary { border-color: var(--paper); }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* Header CTA is smaller: it is a shortcut, not the ask. */
.btn--sm {
  min-block-size: 38px; padding: var(--s-2) var(--s-4);
  font-size: var(--t-meta); border-width: 2px;
}
@media (max-width: 720px) { .hdr .btn--sm { display: none; } }

/* ==========================================================================
   Declaration. The trust content, at the same scale as the recruiting line.

   This is the redesign's core bet. The previous pass whispered "not a
   political party" in a small box in the corner of the hero. A movement
   DECLARES it. Saying it at 116px is simultaneously the boldest and the most
   trustworthy thing on the page, which is why bold and trustworthy did not
   have to be traded against each other.

   The macrostructure's own note: manifestos define by refusal.
   ========================================================================== */
.decl__lead { max-inline-size: 20ch; }
:lang(fa) .decl__lead { max-inline-size: 24ch; }

.decl__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-block-start: var(--s-8);
  border-block-start: var(--key-w) solid var(--paper);
}
@media (max-width: 860px) { .decl__grid { grid-template-columns: 1fr; } }

.decl__i {
  padding: var(--s-5) var(--s-5) var(--s-6);
  border-inline-end: var(--key-w) solid var(--paper);
}
.decl__i:last-child { border-inline-end: 0; }
@media (max-width: 860px) {
  .decl__i { border-inline-end: 0; border-block-end: var(--key-w) solid var(--paper); }
  .decl__i:last-child { border-block-end: 0; }
}
.decl__t {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 100;
  font-weight: 800; font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--saffron);
  margin-block-end: var(--s-3);
}
:lang(fa) .decl__t {
  text-transform: none; letter-spacing: 0; font-size: var(--t-meta);
  font-variation-settings: normal;
}
.decl__i[data-neg] .decl__t { color: var(--cerise-lift); }
.decl__b { font-size: var(--t-body); color: var(--paper); max-inline-size: 34ch; }

/* ==========================================================================
   Why this matters. The real numbers, at poster scale.
   9.5% and 6.9% are sourced facts, so they get to be huge. The unsourced
   claims stay as prose and keep the Sources block: if we are going to claim
   numbers at a community that has good reason to check our work, we cite them.
   ========================================================================== */
.why__lead { max-inline-size: 18ch; }
.why__p {
  font-size: var(--t-lead); color: var(--ink-2);
  max-inline-size: var(--measure); margin-block-start: var(--s-5);
}
:lang(fa) .why__p { font-size: var(--t-body); }

.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--s-8);
  border: var(--key-w) solid var(--ink);
}
@media (max-width: 620px) { .stats { grid-template-columns: 1fr; } }
.stat {
  padding: var(--s-6) var(--s-5);
  border-inline-end: var(--key-w) solid var(--ink);
}
.stat:last-child { border-inline-end: 0; }
@media (max-width: 620px) {
  .stat { border-inline-end: 0; border-block-end: var(--key-w) solid var(--ink); }
  .stat:last-child { border-block-end: 0; }
}
.stat__v {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 900; font-size: clamp(3rem, 1.4rem + 6vw, 5.5rem);
  line-height: 0.85; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--cerise-deep);
}
:lang(fa) .stat__v { font-variation-settings: normal; letter-spacing: 0; }
.stat__l {
  font-weight: 700; font-size: var(--t-small);
  margin-block-start: var(--s-3); color: var(--ink);
}

.claims { margin-block-start: var(--s-6); display: grid; gap: var(--s-3); }
.claim {
  display: flex; gap: var(--s-3); align-items: baseline;
  font-size: var(--t-body); color: var(--ink-2);
  max-inline-size: var(--measure);
}
/* An eight-point star as the marker. Persian tile shapes moved from
   rectangles to four- and eight-point stars: unmistakable, and un-kitsch. */
.claim::before {
  content: ''; flex: none;
  inline-size: 11px; block-size: 11px; margin-block-start: 6px;
  background: var(--cerise);
  clip-path: polygon(50% 0%, 61% 27%, 88% 12%, 73% 39%, 100% 50%, 73% 61%, 88% 88%,
                     61% 73%, 50% 100%, 39% 73%, 12% 88%, 27% 61%, 0% 50%, 27% 39%,
                     12% 12%, 39% 27%);
}

.sources { margin-block-start: var(--s-6); font-size: var(--t-meta); color: var(--ink-3); }
.sources summary {
  cursor: pointer; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-micro);
  min-block-size: 24px; display: inline-flex; align-items: center;
}
:lang(fa) .sources summary { text-transform: none; letter-spacing: 0; font-size: var(--t-meta); }
.sources ol { margin: var(--s-3) 0 0; padding-inline-start: var(--s-5); }
.sources li + li { margin-block-start: var(--s-2); }

/* The belief. A manifesto closes on what it believes, not on a link. Set at
   h2 scale with a cerise keyline so it reads as the section's verdict rather
   than another paragraph. */
.why__belief {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: var(--key-w-thick) solid var(--cerise);
  max-inline-size: 26ch;
}
:lang(fa) .why__belief { max-inline-size: 30ch; }

/* ==========================================================================
   Who we are
   ========================================================================== */
.who__lead { max-inline-size: 16ch; }
.who__p {
  font-size: var(--t-lead); max-inline-size: var(--measure);
  margin-block-start: var(--s-5); color: var(--ink);
}
:lang(fa) .who__p { font-size: var(--t-body); }
.who__p + .who__p { margin-block-start: var(--s-4); }

/* ==========================================================================
   Privacy. On the ink field, at declaration scale, because for this audience
   "who is asking and what happens to my data" IS a headline.
   ========================================================================== */
.pv__lead { max-inline-size: 18ch; }
.pv__p {
  font-size: var(--t-lead); margin-block-start: var(--s-5);
  max-inline-size: var(--measure);
  color: color-mix(in srgb, var(--paper) 86%, transparent);
}
:lang(fa) .pv__p { font-size: var(--t-body); }

.qa {
  margin-block-start: var(--s-8);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--key-w) solid var(--paper);
}
@media (max-width: 760px) { .qa { grid-template-columns: 1fr; } }
.qa__i {
  padding: var(--s-5) var(--s-5) var(--s-6);
  border-block-end: var(--key-w) solid var(--rule-ink);
  border-inline-end: var(--key-w) solid var(--rule-ink);
}
.qa__i:nth-child(2n) { border-inline-end: 0; }
@media (max-width: 760px) { .qa__i { border-inline-end: 0; } }
.qa__q {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 106;
  font-weight: 800; font-size: var(--t-h4);
  text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--saffron); margin-block-end: var(--s-3);
}
:lang(fa) .qa__q {
  text-transform: none; letter-spacing: 0; font-variation-settings: normal;
  font-size: var(--t-body);
}
.qa__a {
  font-size: var(--t-body);
  color: color-mix(in srgb, var(--paper) 84%, transparent);
  max-inline-size: 40ch;
}
.pv__contact { margin-block-start: var(--s-6); font-size: var(--t-body); }
.on-ink a { color: var(--saffron); }
.on-ink a:hover { color: var(--paper); }

/* ==========================================================================
   Form. THE QUIET HALF.

   Everything above shouts. From here down the page is plain paper, body-size
   type, and no field colour: the register drops the moment we start asking
   for something. No urgency, no countdown, no colour pressure at the point of
   decision. That is deliberate and it is the whole trust argument.
   ========================================================================== */
.formsec { padding-block: var(--s-9); }
@media (max-width: 900px) { .formsec { padding-block: var(--s-7); } }

.form-head { max-inline-size: 60ch; margin-block-end: var(--s-7); }
.form-head__h { max-inline-size: 22ch; }
.form-head p {
  margin-block-start: var(--s-4); font-size: var(--t-body); color: var(--ink-2);
}
.reqnote {
  margin-block-start: var(--s-4); font-size: var(--t-meta); color: var(--ink-3);
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}

.formshell {
  border: var(--key-w) solid var(--ink);
  background: var(--paper);
  max-inline-size: 820px;
}

/* --- progress ----------------------------------------------------------- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-block-end: var(--key-w) solid var(--ink);
  margin: 0; padding: 0; list-style: none;
}
.step {
  padding: var(--s-4);
  border-inline-end: var(--key-w) solid var(--ink);
  color: var(--ink-3);
  display: flex; flex-direction: column; gap: var(--s-1);
  position: relative; text-align: start;
  background: var(--paper-2);
  font-family: inherit; border-block: 0; border-inline-start: 0;
  cursor: default;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.step:last-child { border-inline-end: 0; }
.step__n {
  font-family: var(--font-display); font-variation-settings: 'wdth' 100;
  font-size: var(--t-micro); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.09em;
}
:lang(fa) .step__n {
  font-variation-settings: normal; text-transform: none; letter-spacing: 0;
  font-size: var(--t-meta);
}
.step__t { font-size: var(--t-meta); font-weight: 600; line-height: 1.35; }
.step[aria-current='step'] { background: var(--ink); color: var(--paper); }
.step[aria-current='step'] .step__n { color: var(--saffron); }
.step[data-done='true'] { color: var(--ink); cursor: pointer; }
.step[data-done='true']:hover { background: var(--paper-3); }
.step[data-done='true'] .step__n::after {
  content: ' \2713'; color: var(--cerise-deep); font-weight: 900;
}
@media (max-width: 640px) {
  .step { padding: var(--s-3); }
  .step__t { font-size: var(--t-micro); }
}

.panel { padding: var(--s-7) var(--s-6); }
@media (max-width: 640px) { .panel { padding: var(--s-5) var(--s-4); } }

.panel__h {
  margin-block-end: var(--s-6); padding-block-end: var(--s-5);
  border-block-end: var(--key-w) solid var(--ink);
}
.panel__h h3 {
  font-family: var(--font-display); font-variation-settings: 'wdth' 108;
  font-weight: 800; font-size: var(--t-h3);
  text-transform: uppercase; letter-spacing: -0.02em;
}
:lang(fa) .panel__h h3 {
  text-transform: none; letter-spacing: 0; font-variation-settings: normal;
  font-size: var(--t-h4);
}
.panel__h p { margin-block-start: var(--s-2); font-size: var(--t-small); color: var(--ink-2); }

/* --- fields ------------------------------------------------------------- */
.field { margin-block-end: var(--s-6); }
.field:last-child { margin-block-end: 0; }

.label {
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--t-body); font-weight: 700; color: var(--ink);
  margin-block-end: var(--s-2);
}
.req, .opt {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.req { color: var(--alert); }
.opt { color: var(--ink-3); font-weight: 500; }
:lang(fa) .req, :lang(fa) .opt {
  text-transform: none; letter-spacing: 0; font-size: var(--t-meta);
}

.hint {
  font-size: var(--t-meta); color: var(--ink-3);
  margin-block-end: var(--s-3); max-inline-size: 62ch; line-height: 1.5;
}
:lang(fa) .hint { line-height: var(--lh-farsi); }

.input, .textarea {
  inline-size: 100%;
  font-family: var(--font-body);
  font-variation-settings: 'wdth' 100;
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  min-block-size: 52px;
  transition: background var(--dur) var(--ease-out);
}
:lang(fa) .input, :lang(fa) .textarea {
  font-family: var(--font-farsi); font-variation-settings: normal;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .textarea:hover { background: var(--paper-3); }
.input:focus, .textarea:focus { background: var(--paper); }
.textarea {
  min-block-size: 96px; resize: vertical;
  line-height: var(--lh-body); padding-block: var(--s-3);
}

/* Email and phone stay LTR even in Farsi: they are not Persian text. */
.input[type='email'], .input[type='tel'] { direction: ltr; text-align: start; }
[dir='rtl'] .input[type='email'], [dir='rtl'] .input[type='tel'] { text-align: right; }

.input[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: var(--alert);
  border-inline-start-width: 6px;
  background: var(--alert-soft);
}

/* --- choice controls ---------------------------------------------------- */
.choices { display: grid; gap: var(--s-2); }
.choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .choices--2 { grid-template-columns: 1fr; } }

.choice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  min-block-size: 52px;
  transition: background var(--dur) var(--ease-out);
}
.choice:hover { background: var(--paper-2); }
.choice__box { position: relative; flex: none; margin-block-start: 3px; }

/* The native control is kept and made invisible: it carries keyboard, focus
   and screen-reader semantics for free. The visual is drawn on top of it. */
.choice input {
  position: absolute; inset: 0; inline-size: 22px; block-size: 22px;
  margin: 0; opacity: 0; cursor: pointer;
}
.choice__mark {
  display: block; inline-size: 22px; block-size: 22px;
  border: 2px solid var(--ink);
  background: var(--paper);
  transition: background var(--dur) var(--ease-out);
}
.choice--radio .choice__mark { border-radius: 50%; }

/* Selected state is INK, not cerise. Cerise is the page's spark and the
   focus colour; keeping "selected" and "error" and "focus" on three
   different signals (fill / hue+icon / ring) means hue is never the only
   thing carrying meaning. */
.choice input:checked ~ .choice__mark { background: var(--ink); }
.choice--radio input:checked ~ .choice__mark {
  background: var(--paper);
  box-shadow: inset 0 0 0 5px var(--ink);
}
.choice--check input:checked ~ .choice__mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FBFAF8' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
  background-size: 16px; background-position: center; background-repeat: no-repeat;
}
.choice input:focus-visible ~ .choice__mark {
  outline: var(--focus-width) solid var(--focus-colour); outline-offset: var(--focus-offset);
}
.choice:has(input:checked) { background: var(--saffron); }

.choice__txt { font-size: var(--t-small); color: var(--ink); line-height: 1.45; }
:lang(fa) .choice__txt { line-height: 1.75; }
.choice__sub {
  display: block; font-size: var(--t-meta); color: var(--ink-2);
  margin-block-start: 3px;
}

fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
legend { padding: 0; }

/* --- errors ------------------------------------------------------------- */
.err {
  display: flex; align-items: flex-start; gap: var(--s-2);
  margin-block-start: var(--s-2);
  font-size: var(--t-meta); font-weight: 600; color: var(--alert);
}
.err::before {
  content: '!'; flex: none; font-weight: 900;
  inline-size: 17px; block-size: 17px; line-height: 17px; text-align: center;
  background: var(--alert); color: var(--paper); font-size: var(--t-micro);
  margin-block-start: 2px;
}

.errsum {
  border: 2px solid var(--alert);
  border-inline-start-width: 6px;
  background: var(--alert-soft);
  padding: var(--s-4);
  margin-block-end: var(--s-6);
}
.errsum h4 { font-size: var(--t-body); font-weight: 800; color: var(--alert); }
.errsum ul { margin: var(--s-2) 0 0; padding-inline-start: var(--s-5); }
.errsum li { font-size: var(--t-meta); color: var(--ink-2); }
.errsum a { color: var(--alert); }

/* --- eligibility criteria ----------------------------------------------- */
.criteria {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  padding: var(--s-4);
  margin-block-end: var(--s-3);
}
.criteria__t { font-size: var(--t-small); font-weight: 700; margin-block-end: var(--s-2); }
.criteria ul { margin: 0; padding-inline-start: var(--s-5); }
.criteria li { font-size: var(--t-meta); color: var(--ink-2); line-height: 1.6; }
:lang(fa) .criteria li { line-height: var(--lh-farsi); }

/* --- consent ------------------------------------------------------------ */
.consent { border: 2px solid var(--ink); padding: var(--s-5); background: var(--paper); }
.consent__t { font-size: var(--t-body); font-weight: 800; margin-block-end: var(--s-3); }
.consent__legal {
  font-size: var(--t-meta); color: var(--ink-2); line-height: 1.6;
  padding-block-end: var(--s-4); margin-block-end: var(--s-4);
  border-block-end: 2px solid var(--ink);
  max-inline-size: 66ch;
}
:lang(fa) .consent__legal { line-height: var(--lh-farsi); }
/* The decline option is given identical visual weight to the opt-ins.
   Anything else would be a dark pattern, and this is CASL evidence rather
   than decoration. Same size, same border, not greyed, not shamed. */
.consent__none {
  margin-block-start: var(--s-3); padding-block-start: var(--s-3);
  border-block-start: 2px dashed var(--rule-strong);
}

.review {
  margin-block-start: var(--s-6);
  border: 2px solid var(--ink);
  border-inline-start-width: 6px;
  background: var(--paper-2);
  padding: var(--s-4);
}
.review__t { font-size: var(--t-small); font-weight: 800; margin-block-end: var(--s-2); }
.review p { font-size: var(--t-meta); color: var(--ink-2); line-height: 1.6; max-inline-size: 66ch; }
:lang(fa) .review p { line-height: var(--lh-farsi); }

/* --- actions ------------------------------------------------------------ */
.actions {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-block-start: var(--key-w) solid var(--ink);
  background: var(--paper-2);
}
@media (max-width: 640px) { .actions { padding: var(--s-4); } }
.actions__sp { margin-inline-start: auto; }

/* --- done --------------------------------------------------------------- */
.done { padding: var(--s-8) var(--s-6); text-align: start; }
/* The one-colour reduction: field dropped, star kept, currentColor. */
.done__mark { inline-size: 44px; block-size: 44px; color: var(--cerise); margin-block-end: var(--s-5); }
.done h3 {
  font-family: var(--font-display); font-variation-settings: 'wdth' 108;
  font-weight: 800; font-size: var(--t-h3);
  text-transform: uppercase; letter-spacing: -0.02em;
}
:lang(fa) .done h3 {
  text-transform: none; letter-spacing: 0; font-variation-settings: normal;
  font-size: var(--t-h4);
}
.done p { margin-block-start: var(--s-3); color: var(--ink-2); max-inline-size: 56ch; }

#turnstile { margin-block-end: var(--s-5); padding-inline: var(--s-6); }
@media (max-width: 640px) { #turnstile { padding-inline: var(--s-4); } }

/* ==========================================================================
   Footer (Ft5, statement). Not four columns of links and a social row.
   ========================================================================== */
.foot { padding-block: var(--s-8) var(--s-6); }
.foot__stmt { max-inline-size: 18ch; margin-block-end: var(--s-7); }

.foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-block-start: var(--key-w) solid var(--paper);
}
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.foot__brand { display: flex; align-items: center; gap: var(--s-3); }
.foot__brand svg { inline-size: 26px; block-size: 26px; flex: none; }
.foot__brand span {
  font-family: var(--font-display); font-variation-settings: 'wdth' 108;
  font-weight: 800; font-size: var(--t-small); text-transform: uppercase;
}
:lang(fa) .foot__brand span {
  text-transform: none; font-variation-settings: normal;
}
.foot p {
  font-size: var(--t-meta); color: color-mix(in srgb, var(--paper) 76%, transparent);
  margin-block-start: var(--s-3); max-inline-size: 44ch; line-height: 1.6;
}
:lang(fa) .foot p { line-height: var(--lh-farsi); }
.foot h4 {
  font-family: var(--font-display); font-variation-settings: 'wdth' 100;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--saffron);
}
:lang(fa) .foot h4 {
  text-transform: none; letter-spacing: 0; font-size: var(--t-meta);
  font-variation-settings: normal;
}
.foot ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.foot li + li { margin-block-start: var(--s-1); }
.foot li a {
  color: var(--paper); font-size: var(--t-meta); text-decoration: none;
  display: inline-block; min-block-size: 24px; padding-block: var(--s-1);
}
.foot li a:hover { color: var(--saffron); text-decoration: underline; }
.foot__end {
  padding-block-start: var(--s-5);
  border-block-start: 2px solid var(--rule-ink);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  font-size: var(--t-micro);
}
.foot__end p {
  margin: 0; max-inline-size: 70ch; font-size: var(--t-micro);
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

/* ==========================================================================
   Placeholders the committee must replace before launch. Deliberately loud:
   nothing here should ship as invented fact. The committee NAME is still a
   placeholder, so it must not ship unnoticed.
   ========================================================================== */
.tbc {
  color: var(--alert);
  border-block-end: 2px dashed var(--alert);
  font-style: normal;
  background: var(--alert-soft);
  padding-inline: 3px;
}
.on-ink .tbc, .field-ink .tbc {
  color: var(--alert-lift); border-block-end-color: var(--alert-lift);
  background: transparent;
}
.field-saffron .tbc { background: transparent; }

/* ==========================================================================
   Motion. There is almost none, and that is the decision, not an omission.

   Two primitives, both transform/colour only, both tied to a real input:
   1. press:  .btn:active translates 2px. Confirms the tap.
   2. settle: background/colour transitions on hover and on checked state.

   Everything else was cut. Scroll-triggered reveals were built and removed:
   on a page whose entire argument is made in 116px type, a fade-up is
   decoration competing with the message, and universal scroll-fade is a tell.
   The Manifesto macrostructure's "horizontal sweep on section entry" was
   tried and cut for the same reason.

   The countdown deliberately does NOT tick, count up, or animate. An
   animated number on a political sign-up page manufactures urgency, and the
   one thing this page cannot afford to fake is urgency. It renders once.

   Reduced-motion is handled at the token level: --dur* collapse to 0.01ms in
   tokens.css, and scroll-behavior goes auto at the top of this file, so both
   primitives are covered without a second rule here.
   ========================================================================== */