/* =========================================================
   MY LAST RIGHT — "MAXIMAL POSTER"
   Mobile-first, screenprint/riso activist poster.
   Tokens & fonts per SPEC. No build step. file:// safe.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:#12181C;  --ink-2:#2A323A;  --kraft:#DCEAF1;  --kraft-2:#C7DEEA;  --paper:#EAF3F7;
  --coral:#4FB0D6; --coral-d:#1E6F94;
  --teal:#157E97;  --yellow:#F2C53D;

  /* condensed poster display, de-stenciled for legibility */
  --stencil:'Big Shoulders Display','Archivo Narrow','Arial Narrow',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --arch:'Archivo',system-ui,sans-serif;

  --rule:5px;                 /* ink rule between bands */
  --rule-2:3px;               /* internal separators (demands/register/faq) */
  --hair:2.5px;               /* thinner ink hairline rule */
  --gut: clamp(20px, 5vw, 56px);  /* horizontal page gutter */
  --maxw: 1280px;
  --nav-h: 64px;
  --ease-snap: cubic-bezier(.2,.7,.2,1);  /* shared screenprint snap */

  /* vertical spacing scale — one rhythm, not ad-hoc values */
  --sp-1:8px;
  --sp-2:14px;
  --sp-3:clamp(18px,3vw,28px);
  --sp-4:clamp(26px,4.5vw,46px);
  --sp-5:clamp(40px,7vw,72px);
  --sp-6:clamp(54px,8.5vw,100px);

  /* hard offset-shadow scale */
  --shadow-1:5px 5px 0 var(--ink);
  --shadow-2:8px 8px 0 var(--ink);
  --shadow-3:10px 10px 0 var(--ink);
  --shadow-coral:9px 9px 0 var(--coral);

  /* modular type scale — one set of display steps, serrated tracking */
  --fs-display:clamp(56px,13.5vw,150px);  /* hero / sign climax */
  --fs-h1:clamp(46px,11vw,116px);
  --fs-h2:clamp(34px,8vw,72px);           /* band titles */
  --fs-h2-xl:clamp(40px,11vw,86px);       /* demands climax band title */
  --fs-h3:clamp(22px,4.6vw,30px);
  --fs-lead:clamp(17px,2.4vw,22px);
  --fs-mono:clamp(13px,3.4vw,15px);

  /* motion durations — three steps, all paired with --ease-snap */
  --dur-1:.12s;   /* hover card / button */
  --dur-2:.18s;   /* underline / micro */
  --dur-3:.55s;   /* reveal */
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* offset anchored sections so the sticky nav doesn't cover them */
  scroll-padding-top: calc(var(--nav-h) + 8px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--arch);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;               /* horizontal-overflow safety */
}
img,svg{max-width:100%}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--stencil);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}

/* keep the off-canvas filter helper svgs out of flow */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- A11y helpers ---------- */
.skip-link{
  position:fixed;top:8px;left:8px;z-index:400;
  background:var(--ink);color:var(--kraft);
  font-family:var(--mono);font-size:13px;font-weight:700;
  padding:10px 16px;border:3px solid var(--ink);
  transform:translateY(-160%);transition:transform .15s;
}
.skip-link:focus{transform:translateY(0)}

/* Surface-independent focus ring: ink reads on coral/kraft/paper/teal;
   overridden to yellow on ink-background contexts (footer, mobile panel, skip). */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:0;          /* squared brand — no rounding */
}
/* yellow focus on ink-backed surfaces; coral CTA reads on coral nav */
.foot a:focus-visible,
.mobile-nav a:focus-visible,
.cobrand-strip a:focus-visible,
.marquee a:focus-visible,
.hamburger:focus-visible,        /* ink-backed control needs a light ring */
.skip-link:focus-visible{outline-color:var(--yellow)}
.nav .btn:focus-visible{outline-color:var(--ink)}

/* Visually-hidden (screen-reader only) */
.sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Layout ---------- */
.wrap{
  width:100%;max-width:var(--maxw);margin:0 auto;
  /* gutter + notch safe-area in landscape (env defaults to 0 when unsupported) */
  padding-inline:calc(var(--gut) + env(safe-area-inset-left))
                 calc(var(--gut) + env(safe-area-inset-right));
}
/* content-driven bands with generous, consistent vertical rhythm */
.band{padding-block:var(--sp-6)}

/* ---------- Paper grain ---------- */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:300;
  opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
}

/* ---------- Kickers (// labels) ---------- */
.kick{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(13px,3.4vw,13.5px);letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.kick::before{content:"//";opacity:.85}
.kick-coral{color:#135A78}  /* deep celeste: AA on paper/kraft */
.kick-kraft{color:#fff}   /* white: AA on the teal principle band */
.kick-ink{color:var(--ink)}

/* ---------- Editorial section numbering (fil rouge "01 —") ---------- */
/* anchored to the band's top rule; --mono, decorative (aria-hidden in markup) */
.sec-no{
  display:block;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(13px,3.4vw,15px);letter-spacing:.08em;
  color:var(--coral-d);                 /* AA on paper/kraft */
  margin-bottom:var(--sp-2);
}
/* dark ink/teal bands: switch to yellow for contrast */
.numbers .sec-no,.principle .sec-no{color:var(--yellow)}
.sign .sec-no{color:var(--ink)}         /* coral band: ink reads strongest */

/* Top ink hairline that opens a band's inner content, with the section
   number sitting on it. Distinct from the global full-bleed .band-rule
   (the 5px ink rule between adjacent bands): this rules INSIDE the .wrap. */
.sec-rule{
  border-top:var(--rule-2) solid var(--ink);
  padding-top:var(--sp-4);
}
.numbers .sec-rule,.principle .sec-rule,.sign .sec-rule,
.band-ink .sec-rule,.band-teal .sec-rule{border-top-color:currentColor}
/* utility ruled divider between editorial blocks, anchored in the gutter */
.rule{border:0;border-top:var(--rule-2) solid var(--ink);margin:0}

/* ---------- Card lift — single hover contract for all cards ---------- */
.card-lift{transition:transform var(--dur-1) var(--ease-snap),box-shadow var(--dur-1) var(--ease-snap),background .15s ease}
.card-lift:hover,.card-lift:focus-within{transform:translate(-3px,-3px);box-shadow:var(--shadow-coral)}

/* ---------- Reusable corner stamp (✶ seal on frames) ---------- */
.stamp{
  position:absolute;z-index:3;pointer-events:none;
  font-family:var(--stencil);font-weight:900;line-height:1;color:var(--coral);
  font-size:clamp(28px,5vw,46px);transform:rotate(-8deg);
}

/* ---------- Buttons — hard screenprint blocks ---------- */
.btn{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(14px,3.6vw,14.5px);letter-spacing:.05em;text-transform:uppercase;
  border:3px solid var(--ink);background:var(--ink);color:var(--kraft);
  padding:15px 24px;min-height:50px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .08s, box-shadow .08s, background .15s, color .15s;
}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn-ink{background:var(--ink);color:var(--kraft)}
.btn-coral{background:var(--coral);color:var(--ink)}
.btn-coral:hover{background:var(--coral-d);color:var(--kraft)}
.btn-kraft{background:var(--kraft);color:var(--ink)}
.btn-kraft:hover{background:var(--ink);color:var(--kraft)}
.btn-ghost{background:var(--kraft);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--kraft)}
.btn-lg{font-size:clamp(15px,4vw,15.5px);padding:18px 30px;min-height:54px;box-shadow:6px 6px 0 var(--ink)}
.btn-lg:hover{box-shadow:4px 4px 0 var(--ink)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:200;
  background:var(--coral);
  border-bottom:var(--rule) solid var(--ink);
  transition:box-shadow .2s ease;
}
/* hard offset drop once the page has scrolled (toggled in JS) */
.nav.is-stuck{box-shadow:0 6px 0 rgba(24,20,16,.18)}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:var(--nav-h);
}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);min-height:44px}
.brand-seal{width:40px;height:40px;flex:none}
.wm{
  font-family:var(--stencil);font-weight:900;text-transform:uppercase;
  line-height:.76;font-size:clamp(17px,4.4vw,21px);color:var(--ink);
  letter-spacing:-.01em;
}
/* second line carries a static ink underline as a printed mark */
.wm em{
  font-style:normal;display:block;width:max-content;max-width:100%;
  box-shadow:inset 0 -3px 0 var(--ink);
}

/* ---- combined promoter lockup (replaces the old sun seal/wordmark) ---- */
.brand-lockup{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:2.5px solid var(--ink);padding:6px 11px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform var(--dur-1) var(--ease-snap),box-shadow var(--dur-1) var(--ease-snap);
}
.brand-lockup img{display:block;width:auto}
.bl-eumans{height:clamp(18px,4.6vw,28px)}
.bl-wfrtds{height:clamp(14px,3.6vw,22px)}
.bl-div{width:2px;align-self:stretch;background:rgba(18,24,28,.18);flex:none}
.brand:hover .brand-lockup,
.brand2:hover .brand-lockup{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.foot-lockup .bl-eumans{height:30px}
.foot-lockup .bl-wfrtds{height:23px}
@media (max-width:400px){ .brand-lockup{gap:7px;padding:5px 8px} }

.nav-links{display:none}            /* hidden on mobile */
.nav-cta{display:none}              /* CTA in hamburger panel on mobile */

/* Hamburger */
.hamburger{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex:none;
  background:var(--ink);border:3px solid var(--ink);
  box-shadow:4px 4px 0 rgba(24,20,16,.4);
  transition:transform .08s, box-shadow .08s;
}
.hamburger:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 rgba(24,20,16,.4)}
.hamburger:active{transform:translate(4px,4px);box-shadow:0 0 0 rgba(24,20,16,.4)}
.hamburger[aria-expanded="true"]{box-shadow:0 0 0 rgba(24,20,16,.4);transform:none}
.hamburger-box{position:relative;display:block;width:24px;height:18px}
.hamburger-bar,
.hamburger-bar::before,
.hamburger-bar::after{
  content:"";position:absolute;left:0;width:24px;height:3px;
  background:var(--kraft);transition:transform .2s, opacity .2s, top .2s;
}
.hamburger-bar{top:50%;transform:translateY(-50%)}
.hamburger-bar::before{top:-8px}
.hamburger-bar::after{top:8px}
.hamburger[aria-expanded="true"] .hamburger-bar{background:transparent}
.hamburger[aria-expanded="true"] .hamburger-bar::before{top:0;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] .hamburger-bar::after{top:0;transform:rotate(-45deg)}

/* Mobile panel */
.mobile-panel{
  background:var(--ink);
  border-bottom:var(--rule) solid var(--ink);
}
.mobile-panel[hidden]{display:none}
.mobile-nav{display:flex;flex-direction:column;padding:8px var(--gut) 22px}
.mobile-nav a{
  font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--kraft);
  padding:15px 0;min-height:50px;display:flex;align-items:center;
  border-bottom:1px solid rgba(235,226,206,.18);
}
.mobile-nav a:hover{color:var(--coral)}
.mobile-cta{
  margin-top:18px;border-color:var(--coral);justify-content:center;
}
.mobile-cta:hover{color:var(--kraft)}

/* ============================================================
   HERO — clean poster, two-column on desktop
   ============================================================ */
.hero{
  position:relative;
  background:var(--coral);
  border-bottom:var(--rule) solid var(--ink);
  min-height:100svh;display:flex;align-items:center;
}
.hero-inner{
  display:grid;grid-template-columns:1fr;align-items:center;
  gap:clamp(30px,5vw,52px);width:100%;
  padding-block:clamp(32px,5vw,56px);
  padding-bottom:calc(clamp(32px,5vw,56px) + env(safe-area-inset-bottom));
}
.hero-text{min-width:0}

.hero-kick{
  color:var(--ink);background:var(--kraft);align-self:flex-start;
  border:2.5px solid var(--ink);padding:8px 13px;box-shadow:3px 3px 0 var(--ink);
}

.hero-h1{
  font-size:var(--fs-display);
  color:var(--ink);margin:clamp(14px,2.6vw,22px) 0 0;
  letter-spacing:-.01em;line-height:.80;   /* serrated optical tracking on big display */
  overflow-wrap:break-word;hyphens:auto;
  text-shadow:clamp(2px,0.6vw,3px) clamp(2px,0.6vw,3px) 0 rgba(235,226,206,.85);  /* single clean offset, scaled */
}
.hero-h1 .line{display:block}

.hero-claim{
  margin-top:clamp(18px,3vw,28px);
  font-family:var(--stencil);font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,3.6vw,28px);line-height:1.04;
  color:var(--ink);max-width:20ch;
}

.hero-actions{margin-top:clamp(24px,4vw,34px);display:flex;gap:14px;flex-wrap:wrap}

/* counter — tidy kraft card */
.hero-count{
  margin-top:clamp(26px,4vw,38px);max-width:460px;
  background:var(--kraft);border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);padding:clamp(16px,3vw,22px);
}
.hero-count-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.hero-count .num{
  font-family:var(--stencil);font-weight:900;
  font-size:clamp(38px,9vw,58px);color:var(--ink);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.hero-count .lbl{
  font-family:var(--mono);font-weight:700;font-size:clamp(12.5px,3.4vw,13px);
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink);line-height:1.4;
}
.hero-count .bar{
  margin-top:14px;height:16px;width:100%;
  border:2.5px solid var(--ink);background:var(--paper);overflow:hidden;
}
.hero-count .bar i{
  display:block;height:100%;width:0%;
  background:repeating-linear-gradient(45deg,var(--ink) 0 9px,var(--coral-d) 9px 18px);
  transition:width 1.7s var(--ease-snap);
}
.hero-count-meta{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;
  padding-top:11px;border-top:var(--hair) solid var(--ink);
  font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--ink);
}
.hero-count-meta .js-pct{color:var(--coral-d)}
.hero-count-meta .js-togo{color:var(--ink-2)}

/* counter near the sign form — synced to the live total */
.sign-count{
  max-width:520px;margin:4px 0 32px;background:var(--ink);color:var(--kraft);
  border:3px solid var(--ink);box-shadow:7px 7px 0 var(--coral);padding:18px 22px;
}
.sign-count__row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:flex-start}
.sign-count__num{
  font-family:var(--stencil);font-weight:900;font-size:clamp(36px,9vw,56px);line-height:1;
  color:var(--coral);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.sign-count__lbl{
  font-family:var(--mono);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.35;color:var(--kraft);
}
.sign-count__bar{margin-top:14px;height:12px;border:2.5px solid var(--kraft);overflow:hidden}
.sign-count__bar i{
  display:block;height:100%;width:0%;
  background:repeating-linear-gradient(45deg,var(--coral) 0 9px,var(--kraft) 9px 18px);
  transition:width 1.3s var(--ease-snap);
}

/* hero photo (shown below text on mobile, beside it on desktop) */
/* bottom padding keeps the protruding photo-stamp inside the coral band */
.hero-art{display:block;padding-bottom:30px}
.hero-photo{max-width:430px;margin-inline:auto}
.photo-stamp{
  /* anchored just inside the frame's bottom-left so it never crosses the
     page gutter at 360px (no reliance on body overflow-x:hidden masking) */
  position:absolute;left:-6px;bottom:-22px;z-index:3;
  width:clamp(90px,15vw,124px);transform:rotate(-7deg);
}
.photo-stamp svg{display:block;width:100%;height:auto}

/* ============================================================
   PHOTO FRAME — brutalist duotone, hard border + offset shadow
   ============================================================ */
.photo{
  position:relative;margin:0;display:block;
  border:4px solid var(--ink);background:var(--kraft);
  box-shadow:10px 10px 0 var(--ink);
}
.photo img{display:block;width:100%;height:auto}

/* ============================================================
   PROMOTED BY — cobrand strip (ink)
   ============================================================ */
.cobrand-strip{
  background:var(--ink);color:var(--kraft);
  border-bottom:var(--rule) solid var(--ink);
}
.cobrand-inner{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,4vw,30px);flex-wrap:wrap;padding-block:18px;
}
.cobrand-label{
  font-family:var(--mono);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(235,226,206,.7);
}
.cobrand-logos{display:flex;align-items:center;gap:clamp(16px,4vw,28px);flex-wrap:wrap;list-style:none}
.cobrand-div{width:2px;height:30px;background:rgba(235,226,206,.32);flex:none}
.lg-eumans{height:36px;width:auto;display:block}
.lg-wfrtds{height:24px;width:auto;display:block}
.cobrand-logos li img{transition:transform .15s var(--ease-snap),filter .15s ease}
.cobrand-logos li:hover img{transform:translateY(-2px)}
/* dividers can land at the start of a wrapped row on narrow screens,
   creating lopsided spacing — drop them and lean on gap below 460px */
@media (max-width:459px){ .cobrand-div{display:none} }

/* ============================================================
   WHY THIS MATTERS — photo cards
   ============================================================ */
.why{background:var(--paper)}
.why-lead{margin-bottom:var(--sp-4);max-width:26ch}
.why-h{font-size:var(--fs-h2);margin-top:14px;line-height:.92;letter-spacing:-.02em}
.why-h .hi-c{color:var(--coral-d)}
.why-grid{display:grid;grid-template-columns:1fr;gap:clamp(22px,4vw,30px)}
.why-card{
  background:var(--kraft);border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);display:flex;flex-direction:column;
  padding-bottom:clamp(20px,3vw,26px);
  transition:transform .12s var(--ease-snap), box-shadow .12s var(--ease-snap);
}
.why-card:hover,
.why-card:focus-within{transform:translate(-3px,-3px);box-shadow:var(--shadow-coral)}
.why-card .photo{border:0;border-bottom:3px solid var(--ink);box-shadow:none}
.why-card h3{
  font-size:clamp(22px,4.6vw,27px);line-height:.92;letter-spacing:-.005em;
  margin:clamp(18px,3vw,22px) clamp(18px,3.4vw,24px) 0;
}
.why-card p{
  margin:10px clamp(18px,3.4vw,24px) 0;
  font-size:clamp(15px,3.6vw,16px);line-height:1.5;color:var(--ink-2);font-weight:500;
}

/* ============================================================
   PRINCIPLE / STORY — photo + ECtHR quote
   ============================================================ */
.principle-row{display:grid;grid-template-columns:1fr;gap:clamp(26px,5vw,46px);align-items:center}
.principle-media{max-width:420px;margin-inline:auto}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--ink);color:var(--kraft);
  padding:14px 0;overflow:hidden;
  border-bottom:var(--rule) solid var(--ink);
}
.marquee-track{
  display:flex;width:max-content;white-space:nowrap;
  animation:scroll 38s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{
  font-family:var(--stencil);font-weight:800;
  font-size:clamp(24px,5.5vw,38px);text-transform:uppercase;
  padding:0 clamp(14px,3vw,26px);display:inline-flex;align-items:center;gap:clamp(14px,3vw,26px);
  letter-spacing:-.01em;   /* serrated display */
}
/* star separates words but never trails the final span of a set,
   so no double marker forms at the seam where the two sets meet */
.marquee span:not(:last-child)::after{content:"✶";color:var(--yellow);font-size:.72em}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{background:var(--paper)}
.manifesto-big{
  font-size:var(--fs-h2);line-height:.92;
  max-width:20ch;color:var(--ink);margin-top:var(--sp-3);
  letter-spacing:-.02em;
}
.manifesto-big .hi-c{color:var(--coral-d)}
.manifesto-big .hi-t{color:var(--teal)}
.manifesto-foot{
  display:grid;gap:var(--sp-4);
  margin-top:var(--sp-5);
}
.manifesto-foot p{
  font-size:clamp(16.5px,4vw,19px);line-height:1.6;
  max-width:46ch;color:var(--ink-2);font-weight:500;
}
.manifesto-foot b{color:var(--ink);font-weight:700}

/* editorial asymmetry: heading left, prose column right (desktop only) */
@media (min-width:860px){
  .manifesto .sec-rule{
    display:grid;grid-template-columns:1.15fr .85fr;
    column-gap:clamp(40px,5vw,72px);align-items:start;
  }
  .manifesto .sec-no,
  .manifesto .kick{grid-column:1 / -1}
  .manifesto-big{grid-column:1;margin-top:0;align-self:start}
  .manifesto-foot{grid-column:2;margin-top:0;grid-template-columns:1fr}

  /* same editorial language: lead column left, content right */
  .why .sec-rule,
  .demands .sec-rule{
    display:grid;grid-template-columns:.9fr 2.1fr;
    column-gap:clamp(40px,5vw,72px);align-items:start;
  }
  .why-lead,
  .demands-lead{
    grid-column:1;margin-bottom:0;position:sticky;top:calc(var(--nav-h) + var(--sp-3));
    align-self:start;
  }
  .why-grid{grid-column:2;grid-template-columns:repeat(2,1fr)}
  .demand-list{grid-column:2}
}

/* ============================================================
   BY THE NUMBERS — full-bleed ink
   ============================================================ */
.numbers{
  background:var(--ink);color:var(--kraft);
  border-top:var(--rule) solid var(--ink);
  border-bottom:var(--rule) solid var(--ink);
}
/* promoted from a small kicker to a display title with a rule beneath */
.numbers-head{
  color:var(--paper);
  font-size:var(--fs-h2);line-height:.92;letter-spacing:-.02em;
  margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);
  border-bottom:var(--hair) solid rgba(235,226,206,.4);
}
.numgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,44px) 0}
.num-cell{padding-inline:clamp(14px,3vw,28px);border-left:3px solid rgba(235,226,206,.4)}
.num-cell:nth-child(odd){padding-left:0;border-left:none}
.num-cell .v{
  font-family:var(--stencil);font-weight:900;
  font-size:clamp(72px,18vw,128px);line-height:.76;letter-spacing:-.02em;
}
.num-cell:nth-child(2) .v{color:var(--yellow)}
.num-cell:nth-child(3) .v{color:#fff}
.num-cell:nth-child(4) .v{color:var(--paper)}
.num-cell .k{
  margin-top:14px;font-size:clamp(14.5px,3.6vw,15.5px);line-height:1.45;
  font-weight:500;max-width:22ch;color:var(--paper);
}

/* ============================================================
   DEMANDS
   ============================================================ */
.demands{background:var(--paper)}
.demands-lead{
  display:flex;flex-direction:column;gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
.demands-h{font-size:var(--fs-h2-xl);letter-spacing:-.02em}
.demands-h .hi-c{color:var(--coral-d)}
.demands-intro{
  font-family:var(--mono);font-size:clamp(14px,3.6vw,15px);
  color:var(--ink-2);max-width:40ch;line-height:1.6;
}
.demand{
  display:grid;grid-template-columns:auto 1fr;gap:14px 18px;
  align-items:start;
  padding-block:var(--sp-4);
  border-top:var(--rule) solid var(--ink);
}
.demand:last-child{border-bottom:var(--rule) solid var(--ink)}
.demand .ix{
  font-family:var(--stencil);font-weight:900;
  font-size:clamp(44px,12vw,84px);line-height:.9;color:var(--ink);
  grid-row:1/3;align-self:start;letter-spacing:-.02em;
  transition:color .15s ease, transform .15s var(--ease-snap);
}
.demand:hover .ix{color:var(--coral-d);transform:translateX(-2px)}
.demand:hover .em{background:var(--coral-d)}
.demand .tx{grid-column:2;grid-row:1}
.demand .tx h3{font-size:clamp(23px,5.5vw,38px);line-height:.92}
.demand .tx p{
  margin-top:12px;font-size:clamp(16px,3.8vw,17px);
  color:var(--ink-2);max-width:62ch;line-height:1.58;font-weight:500;
}
.demand .tx p em{font-style:italic}
/* tag tucks under the index in column 1 to close the vertical gap on mobile */
.demand .em{
  grid-column:1;grid-row:2;justify-self:start;
  font-family:var(--mono);font-weight:700;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--kraft);background:var(--ink);padding:9px 14px;
  white-space:nowrap;margin-top:14px;
  transition:background var(--dur-1) var(--ease-snap);
}

/* ============================================================
   PRINCIPLE — ink pull-quote band with hands ring
   ============================================================ */
.principle{
  background:var(--teal);color:var(--kraft);position:relative;overflow:hidden;
  border-top:var(--rule) solid var(--ink);
  border-bottom:var(--rule) solid var(--ink);
}
.principle .wrap{position:relative;z-index:2}
.principle-fig{
  position:relative;margin:clamp(30px,4vw,44px) 0 0;
  max-width:920px;width:100%;
  border:4px solid var(--kraft);
  padding:clamp(40px,5vw,60px) clamp(24px,4vw,52px) clamp(28px,4vw,44px);
  background:rgba(24,20,16,.12);
}
/* decorative opening quote-mark in the top-left of the frame */
.principle-fig::before{
  content:"\201C";position:absolute;left:clamp(16px,3vw,34px);top:clamp(-22px,-2.4vw,-12px);
  font-family:var(--stencil);font-weight:900;line-height:1;
  font-size:clamp(72px,10vw,128px);color:var(--yellow);pointer-events:none;
}
/* maker's seal — ✶ stamp anchored top-right of the frame (matches .thanks-mark) */
.principle-fig::after{
  content:"✶";position:absolute;right:clamp(14px,3vw,28px);top:clamp(-18px,-2vw,-10px);
  font-family:var(--stencil);font-weight:900;line-height:1;
  font-size:clamp(30px,5vw,52px);color:var(--yellow);
  transform:rotate(-8deg);pointer-events:none;
}
.principle-quote{
  font-family:var(--stencil);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,4.6vw,52px);line-height:1.02;letter-spacing:-.005em;color:var(--kraft);
}
.principle-cite{
  margin-top:clamp(20px,3vw,28px);
  font-family:var(--mono);font-weight:700;font-size:clamp(14px,3.4vw,16px);
  letter-spacing:.04em;text-transform:uppercase;color:#fff;
}

/* ============================================================
   COALITION — dense printed register
   ============================================================ */
.coalition{background:var(--kraft)}
.coalition-lead{margin-bottom:var(--sp-4)}
.coalition-h{font-size:var(--fs-h2);margin-top:14px;letter-spacing:-.02em}
.coalition-intro{
  margin-top:14px;font-family:var(--mono);font-size:clamp(14px,3.6vw,15px);
  color:var(--ink-2);max-width:46ch;line-height:1.6;
}
/* clean ruled directory — aligned grid, orderly rows */
.register{
  display:grid;grid-template-columns:1fr;
  column-gap:clamp(26px,4vw,52px);
  border-top:3px solid var(--ink);
}
.country{
  padding:clamp(15px,2.2vw,20px) 0;
  border-bottom:2px solid rgba(24,20,16,.16);
  transition:transform .12s var(--ease-snap);
}
.country:hover{transform:translateX(3px)}
.country:hover .org-list li::before{background:var(--teal)}
.country-name{
  font-family:var(--stencil);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,5vw,23px);line-height:.95;
  display:flex;align-items:center;gap:9px;color:var(--ink);
}
.country-name .flag{font-size:.92em;line-height:1;font-family:var(--arch)}
.org-list{margin-top:9px;display:flex;flex-direction:column;gap:4px}
.org-list li{
  font-family:var(--arch);font-weight:600;
  font-size:clamp(15px,3.8vw,15.5px);line-height:1.35;
  color:var(--ink);padding-left:17px;position:relative;
}
.org-list li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:7px;height:7px;background:var(--coral);border:1.5px solid var(--ink);
  transition:background .12s ease;
}

/* ============================================================
   SIGN — coral poster
   ============================================================ */
.sign{
  background:var(--coral);color:var(--ink);
  border-top:var(--rule) solid var(--ink);
  border-bottom:var(--rule) solid var(--ink);
  position:relative;overflow:hidden;
}
.sign-h{
  font-size:var(--fs-display);line-height:.80;margin-top:14px;letter-spacing:-.015em;
  overflow-wrap:break-word;hyphens:auto;
  text-shadow:clamp(2px,0.7vw,5px) clamp(2px,0.7vw,5px) 0 var(--kraft);
}
.sign-sub{
  font-family:var(--stencil);font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,4.4vw,30px);margin-top:clamp(20px,4vw,28px);
  max-width:28ch;color:var(--ink);line-height:1.05;
}
.signform{
  margin-top:clamp(30px,5vw,42px);
  display:grid;grid-template-columns:1fr;gap:14px;max-width:880px;
}
.field{display:flex;flex-direction:column;gap:7px}
.field label{
  font-family:var(--mono);font-weight:700;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.signform input,
.signform select{
  font-family:var(--mono);font-size:16px;   /* >=16px prevents iOS focus-zoom */
  padding:15px 16px;min-height:52px;
  border:3px solid var(--ink);background:var(--kraft);color:var(--ink);
  outline:none;width:100%;border-radius:0;-webkit-appearance:none;appearance:none;
  transition:background .12s ease, box-shadow .1s var(--ease-snap);
}
.signform input:hover,
.signform select:hover{background:#fff}
.signform input:user-invalid,
.signform select:user-invalid{box-shadow:3px 3px 0 var(--coral-d)}
.signform select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10'><path d='M1 1l6 7 6-7' fill='none' stroke='%23181410' stroke-width='2'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:42px;
}
.signform input::placeholder{color:var(--ink-2)}
.signform input:focus,
.signform select:focus{background:#fff;box-shadow:4px 4px 0 var(--ink)}
/* restore a visible focus ring on the coral sign band (a11y) */
.signform :focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.field-submit{justify-content:flex-end}
.field-submit .btn{width:100%}

.sign-fine{
  margin-top:18px;font-family:var(--mono);font-size:clamp(12.5px,3.2vw,13px);
  color:var(--ink);
}

/* Thank-you state */
.thanks{
  margin-top:clamp(30px,5vw,42px);max-width:560px;
  background:var(--kraft);border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
  padding:clamp(26px,5vw,40px);
}
.thanks[hidden]{display:none}
.js .thanks:not([hidden]){animation:thanks-pop .4s var(--ease-snap) both}
@keyframes thanks-pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.thanks-mark{font-size:34px;color:var(--coral-d);line-height:1}
.thanks-h{font-size:clamp(34px,9vw,56px);margin-top:10px;color:var(--ink)}
.thanks-p{
  margin-top:14px;font-size:clamp(16px,3.8vw,17px);line-height:1.55;
  color:var(--ink-2);font-weight:500;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--ink);color:var(--kraft);
  padding:clamp(56px,9vw,80px) 0 calc(34px + env(safe-area-inset-bottom));
}
.foot-top{
  display:grid;grid-template-columns:1fr;gap:clamp(34px,6vw,48px);
  padding-bottom:clamp(34px,6vw,48px);
  border-bottom:2px solid rgba(235,226,206,.2);
}
.foot-brand .brand2{display:inline-flex;align-items:center;gap:14px;min-height:44px}
.foot-seal{width:56px;height:56px;flex:none;transition:transform var(--dur-2) var(--ease-snap)}
.brand2:hover .foot-seal{transform:rotate(-4deg)}
.wm-foot{font-size:clamp(24px,7vw,30px);color:var(--kraft)}
.wm-foot em{color:var(--coral);box-shadow:inset 0 -3px 0 var(--coral)}
.foot-claim{
  font-family:var(--stencil);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,3.4vw,18px);line-height:1.0;letter-spacing:-.01em;max-width:24ch;
  margin-top:18px;color:rgba(235,226,206,.85);
}
.foot-col h4{
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--coral);margin-bottom:14px;
}
.foot-col ul{display:flex;flex-direction:column;gap:8px}
.foot-col li a{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:15px;color:rgba(235,226,206,.85);font-weight:500;line-height:1.3;
  transition:color .15s ease, transform .12s var(--ease-snap);
}
.foot-col li a::before{
  content:"";width:0;height:2px;background:var(--coral);
  transition:width .15s var(--ease-snap);flex:none;
}
.foot-col li a:hover{color:var(--yellow);transform:translateX(2px)}
.foot-col li a:hover::before{width:14px}
/* coalition column: static org names (not duplicate anchors) + one real link */
.foot-orgs li{
  font-size:15px;color:rgba(235,226,206,.85);font-weight:500;line-height:1.4;
  padding-left:14px;position:relative;
}
.foot-orgs li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;background:var(--coral);
}
.foot-orgs-link{
  display:inline-flex;align-items:center;min-height:44px;margin-top:6px;
  font-family:var(--mono);font-weight:700;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--coral);
  transition:color .15s ease, transform .12s var(--ease-snap);
}
.foot-orgs-link:hover{color:var(--yellow);transform:translateX(2px)}

.foot-cobrand{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-block:clamp(22px,4vw,30px);
  border-bottom:2px solid rgba(235,226,206,.2);
}
.foot-cobrand .cobrand-label{color:var(--coral);letter-spacing:.07em;line-height:1.5}
.cobrand-text{
  font-family:var(--mono);font-weight:700;font-size:clamp(12.5px,3.2vw,13.5px);
  letter-spacing:.04em;text-transform:uppercase;color:rgba(235,226,206,.9);
}
.foot-cobrand .cobrand-text{margin-left:auto}

.foot-bottom{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:24px;
  font-family:var(--mono);font-size:12.5px;color:rgba(235,226,206,.75);
}
.foot-note{color:rgba(235,226,206,.78)}

/* ============================================================
   SCROLL REVEALS (progressive enhancement)
   Only applied when JS has flagged support via .js on <html>.
   ============================================================ */
.js .reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .55s ease, transform .55s var(--ease-snap);
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal.is-in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE — progressive enhancement up
   ============================================================ */

/* >= 760px: demand gets index column + tag aligned right */
@media (min-width:760px){
  .demand{
    grid-template-columns:auto 1fr auto;
    gap:18px 30px;align-items:center;
  }
  .demand .ix{font-size:clamp(56px,7vw,84px);grid-row:1;align-self:center}
  .demand .em{grid-column:3;grid-row:1;margin-top:0;align-self:center}
  .signform{grid-template-columns:1fr 1fr}
  .field-full{grid-column:1 / -1}
  .field-submit{grid-column:1 / -1}
  .field-submit .btn{width:auto;justify-self:start;min-width:240px}
  .manifesto-foot{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:repeat(3,1fr)}
}

/* >= 720px (tablet): surface the kraft CTA in the bar so "Sign now" is always
   reachable without opening the menu; hamburger still owns the section links.
   Hero goes two-column early so wide tablets don't waste horizontal space. */
@media (min-width:720px){
  .nav-cta{display:inline-flex}
  .hero-inner{grid-template-columns:1.04fr .96fr;gap:clamp(30px,4vw,48px)}
  .hero-art{display:flex;align-items:center;justify-content:center}
  .hero-photo{max-width:360px}
  .hero-count{max-width:none}            /* fills column, never overflows */
  .foot-bottom{align-items:baseline}
}

/* >= 860px: numbers 4-col, blue band breathes */
@media (min-width:860px){
  .numgrid{grid-template-columns:repeat(4,1fr)}
  .num-cell:nth-child(odd){padding-left:clamp(14px,3vw,28px);border-left:3px solid rgba(235,226,206,.4)}
  .num-cell:first-child{padding-left:0;border-left:none}
  .foot-top{grid-template-columns:1.6fr minmax(150px,1fr) minmax(150px,1fr)}
  /* photo fills its column at natural aspect — never stretched */
  .principle-row{grid-template-columns:.82fr 1.18fr;align-items:center}
  .principle-media{max-width:none;margin:0}
  .principle-media img{width:100%;height:auto}
}

/* >= 940px: desktop nav, hide hamburger */
@media (min-width:940px){
  :root{--nav-h:74px}
  .nav-links{
    display:flex;gap:clamp(16px,2vw,26px);
    font-family:var(--mono);font-weight:700;font-size:13px;
    letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  }
  .nav-links a{
    position:relative;display:inline-flex;align-items:center;min-height:44px;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:13px;height:3px;
    background:var(--ink);transform:scaleX(0);transform-origin:left;
    transition:transform var(--dur-2) var(--ease-snap);
  }
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after{transform:scaleX(1)}
  .hamburger{display:none}
  .mobile-panel{display:none !important}
  .hero-inner{grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,72px)}
  .hero-photo{max-width:430px}
}

/* coalition directory: responsive aligned columns */
@media (min-width:560px){ .register{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .register{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1180px){ .register{grid-template-columns:repeat(4,1fr)} }

/* ============================================================
   REDUCED MOTION — kill marquee / reveals / smooth-scroll
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .marquee-track{animation:none;transform:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .thanks:not([hidden]){animation:none}
  .hero-count .bar i,
  .sign-count__bar i{transition:none}
}

/* ============================================================
   HOME — immagini rimosse + ogni fascia a tutto schermo
   (contenuto interamente visibile, niente scroll interno).
   La fascia "demands" resta com'è (richiesta). Per ripristinare
   le foto rimetti i markup <figure>/<img>.
   ============================================================ */
/* ogni fascia riempie lo schermo, contenuto centrato in verticale */
body.home .hero,
body.home .band:not(.demands){
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
}
body.home .hero > .wrap,
body.home .band:not(.demands) > .wrap{width:100%}

/* HERO — due colonne: testo a sinistra, contatore a destra (riempie i due lati).
   Su mobile si impila. Verticalmente centrato nella fascia a tutto schermo. */
.hero-inner{
  grid-template-columns:1fr;
  align-items:center;gap:clamp(26px,4vw,56px);
  padding-block:clamp(24px,4vw,48px);
}
.hero-text{max-width:none;width:100%;text-align:left;display:block;min-width:0}
.hero-h1{font-size:clamp(44px,9vw,150px);margin:clamp(14px,2vh,22px) 0 0}
.hero-h1 .line{white-space:nowrap}
.hero-claim{max-width:42ch;margin-top:clamp(16px,2vh,24px)}
.hero-actions{justify-content:flex-start;margin-top:clamp(20px,2.4vh,30px)}
.hero-aside{display:flex;align-items:center;min-width:0}
.hero-count{max-width:560px;width:100%;margin:0}

@media (min-width:880px){
  .hero-inner{grid-template-columns:1.1fr .9fr}
  .hero-aside{justify-content:flex-end}
  .hero-count{max-width:none}
}

/* PRINCIPLE — quote a piena larghezza */
.principle-row{grid-template-columns:1fr}
.principle-body{max-width:none;text-align:left}
.principle-fig{max-width:none}

/* FASCE EDITORIALI — stop allo split "titolo da un lato / contenuti dall'altro":
   contenuto impilato a tutta larghezza (niente elementi ammassati a dx o sx).
   'demands' resta com'è (richiesta). */
body.home .why .sec-rule,
body.home .manifesto .sec-rule{display:block}
body.home .why-lead{position:static;max-width:none;margin-bottom:var(--sp-4)}
body.home .why-grid,
body.home .manifesto-big,
body.home .manifesto-foot{grid-column:auto}