/* poster.css — the site as printed campaign material.
   Flat blocks of the brand's three colours, big type, grain, the mark everywhere.
   Loaded after main.css on every page and scoped to body.poster.

   Legacy components in main.css read the brand tokens (--ink for surfaces,
   --paper for type), so swapping those two on body.poster flips the dark UI
   to print in one move; the rules below then fix what the swap gets wrong.
   New landing markup uses the explicit --pi / --pp / --pc tokens instead. */

body.poster {
  --pi: #28282B; --pp: #faf4e8; --pc: #0ff0fc;
  /* the page itself sits on a warmer cream (2026-09-28, matching the town hall
     posters); --pp stays the ivory for cards, the nav pill and light text */
  --pbg: #f4e8d2;
  /* form fields and chips: the lightest cream, never pure white */
  --pfield: #fdf8ee;
  --ink: #faf4e8; --ink-2: #f3ece0; --panel: #f1eadc; --paper: #28282B;
  --mut: #625e56; --panel-edge: rgba(40, 40, 43, 0.22);
  background: var(--pbg); color: var(--pi);
}
body.poster .bg { display: none; }
body.poster a { color: var(--pi); }
body.poster :focus-visible { outline: 3px solid var(--pi); outline-offset: 3px; }
/* print grain over everything */
body.poster::before {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("../img/grain.svg") repeat; background-size: 180px 180px;
  opacity: 0.32; mix-blend-mode: multiply;
}

/* ---- type ---- */
body.poster h1, body.poster h2, body.poster h3 { letter-spacing: -0.015em; }
/* flat ink, not the grain text-fill from main.css: with Eveleth's tight
   line-height the glyph tops sit above the line box and Safari clips a
   background-clip:text fill there ("FUND THE" lost its top edge on iPhone).
   The page-wide grain overlay still textures them. */
body.poster h1, body.poster h2 {
  filter: none; color: var(--pi); background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
}
body.poster .glow {
  color: var(--pi); text-shadow: none; background: var(--pc); padding: 0 0.1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.poster .eyebrow, body.poster .sublabel {
  font-family: var(--body); font-weight: 700; font-size: 1rem; letter-spacing: 0;
  text-transform: none; color: var(--pi);
}
body.poster .fineprint { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--mut); }
body.poster .fineprint a { color: var(--pi); }

/* ---- chrome ---- */
body.poster .loader { background: var(--pbg); }
body.poster .loader-leaf { background: var(--pi); filter: none; }
body.poster .loader-track { background: rgba(40, 40, 43, 0.14); }
body.poster .loader-track span { background: var(--pi); box-shadow: none; }
body.poster .skip-link { color: var(--pi); }

body.poster .nav {
  background: var(--pp); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--pi); box-shadow: none; padding: 9px 12px 9px 16px;
}
body.poster .leaf { background: var(--pc); filter: none; }
body.poster .nav .nav-brand { color: var(--pi); gap: 11px; }
body.poster .nav .leaf { width: 34px; height: 28px; }
/* the logo lockup, built live so it stays crisp on both paper and ink */
body.poster .brand { display: grid; line-height: 1; }
body.poster .brand-top { font-family: var(--disp); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
body.poster .brand-sub {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font: 600 0.55rem var(--body); letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.7;
}
body.poster .brand-sub::before { content: ""; width: 20px; height: 3px; background: var(--pc); }
body.poster .nav-links a {
  font-family: var(--body); font-weight: 600; font-size: clamp(0.8rem, 2.4vw, 0.95rem);
  letter-spacing: 0; text-transform: none; color: var(--pi); opacity: 0.72;
}
body.poster .nav-links a:hover, body.poster .nav-links a[aria-current="page"] { color: var(--pi); opacity: 1; }
@media (max-width: 559px) {
  body.poster .nav-links { border-top-color: rgba(40, 40, 43, 0.18); }
  body.poster .nav .leaf { width: 28px; height: 23px; }
}

body.poster .btn { font-size: 0.95rem; letter-spacing: 0; text-transform: none; font-weight: 700; padding: 14px 26px; }
body.poster .nav-cta { padding: 11px 20px; font-size: 0.85rem; }
body.poster .btn-solid { background: var(--pi); color: var(--pp); box-shadow: none; }
body.poster .btn-solid:hover { background: var(--pc); color: var(--pi); box-shadow: none; }
body.poster .btn-line { color: var(--pi); background: transparent; box-shadow: inset 0 0 0 2px var(--pi); }
body.poster .btn-line:hover { background: var(--pi); color: var(--pp); box-shadow: inset 0 0 0 2px var(--pi); }
body.poster .btn-wa { color: var(--pi); box-shadow: inset 0 0 0 2px #1fae54; }
body.poster .btn-wa:hover { background: #1fae54; color: #fff; box-shadow: none; }

/* ---- shared components ---- */
body.poster .card, body.poster .qa-card, body.poster .receipt, body.poster .wa-pop {
  background: var(--pp); border: 2px solid var(--pi); border-radius: 14px;
  box-shadow: 5px 5px 0 var(--pc); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.poster .card:hover { transform: translate(-2px, -2px); border-color: var(--pi); box-shadow: 7px 7px 0 var(--pc); }
body.poster .card p, body.poster .rc-txt, body.poster .wa-pop-sub { color: var(--mut); }
body.poster .card-ico { border: 2px solid var(--pi); background: var(--pc); color: var(--pi); border-radius: 10px; }
body.poster .card-ico svg { stroke: var(--pi); }
body.poster .toast { background: var(--pc); color: var(--pi); border: 2px solid var(--pi); }
body.poster .site-banner, body.poster .site-banner a, body.poster .site-banner .sb-x { color: var(--pi); }
body.poster .wa-pop-t { color: var(--pi); }
body.poster .wa-pop-close { color: var(--mut); }
body.poster .wa-pop-close:hover { color: var(--pi); }

body.poster .capture input:not(.hp),
body.poster .field input, body.poster .field textarea, body.poster .field select {
  background: var(--pfield); color: var(--pi); border: 2px solid var(--pi); border-radius: 999px;
  padding: 14px 20px; font-size: 1rem;
}
body.poster .field textarea { border-radius: 16px; }
body.poster .capture input::placeholder, body.poster .field input::placeholder, body.poster .field textarea::placeholder { color: rgba(40, 40, 43, 0.5); }
body.poster .capture input:focus, body.poster .field input:focus, body.poster .field textarea:focus {
  border-color: var(--pi); outline: 3px solid var(--pc); outline-offset: 0;
}

/* ---- footer stays an ink block ---- */
body.poster .foot { background: var(--pi); color: var(--pp); border-top: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.poster .foot .nav-brand { color: var(--pp); }
body.poster .foot-legal, body.poster .foot-contact { color: rgba(250, 244, 232, 0.6); }
body.poster .foot-legal a, body.poster .foot-contact a, body.poster .foot-social a { color: var(--pc); }
/* the join footer sits on paper, not the dark footer: the cream above vanishes there */
body.poster .jn-foot .foot-legal { color: var(--mut); }
body.poster .foot-social a { border-color: rgba(250, 244, 232, 0.3); }
body.poster .foot-badge text { fill: var(--pp); }
body.poster .badge-leaf { background: var(--pp); }

/* ---- inner-page surfaces main.css paints with hardcoded dark rgba ---- */
body.poster .step, body.poster .contact, body.poster .jn-form, body.poster .wh-panel,
body.poster .quote, body.poster .stat, body.poster .summary, body.poster .comment {
  background: var(--pp); border: 2px solid var(--pi); box-shadow: 5px 5px 0 var(--pc);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.poster .wh-panel { opacity: 1; }
body.poster .wh-stage { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* the hub stays a dark disc, so its label keeps paper type — the token swap
   above would otherwise set it to ink on ink */
body.poster .wh-center-lab { color: var(--pp); }
body.poster .rc-bub, body.poster .amt, body.poster .pay, body.poster .chk,
body.poster .jn-chip span, body.poster .md-nav-a, body.poster .cd-unit, body.poster .qa-deck::before, body.poster .qa-deck::after {
  background: var(--pfield); border-color: var(--pi); color: var(--pi);
}
body.poster .amt.is-on, body.poster .pay.is-on, body.poster .chk.is-on, body.poster .jn-chip input:checked + span {
  background: var(--pc); border-color: var(--pi); color: var(--pi);
}
body.poster .amt-field input, body.poster .f input, body.poster .f select, body.poster .f textarea {
  background: var(--pfield); color: var(--pi); border: 2px solid var(--pi);
}
body.poster .amt-field input:focus, body.poster .f input:focus, body.poster .f select:focus, body.poster .f textarea:focus {
  border-color: var(--pi); outline: 3px solid var(--pc); outline-offset: 0;
}
body.poster .stat b, body.poster .stat strong { color: var(--pi); }
/* cyan type was written for ink surfaces; on paper it goes to ink */
body.poster .rc-head, body.poster .proof strong, body.poster .chip, body.poster .comment-user, body.poster .qg,
body.poster .amt-field span, body.poster .rebate-line, body.poster .rules li::before, body.poster .chk span b,
body.poster .summary-net b, body.poster .stat b, body.poster .stat-src, body.poster .countdown-head, body.poster .cd-num,
body.poster .card-handle, body.poster .wh-step b, body.poster .wh-panel-num, body.poster .wh-panel-stats b,
body.poster .md-hero .eyebrow a, body.poster .md-plan li::before, body.poster .md-nav-dir, body.poster .jn-reach legend i,
body.poster .jn-chip input:checked + span, body.poster .qa-btn, body.poster .reel-tag, body.poster .jn-foot a {
  color: var(--pi); text-shadow: none;
}
body.poster .step-num, body.poster .md-plan-n, body.poster .wh-num.is-on { background: var(--pc); color: var(--pi); border-color: var(--pi); }
body.poster .stat b { background: var(--pc); padding: 0 0.12em; }
/* the video phones stay a dark screen — that is what a phone looks like */
body.poster .reel-screen { border: 2px solid var(--pi); }

/* ======================================================================
   Landing page
   ====================================================================== */

/* ---- hero — paper, one full screen ---- */
/* --navh is measured by main.js so the hero fills exactly what is left under
   the sticky nav; the fallback is close enough when scripts are off */
.ph { position: relative; z-index: 1; overflow: clip; min-height: calc(100svh - var(--navh, 86px)); display: grid; }
.ph .reveal { transition: none; }
/* width: 100% because a grid item with auto margins otherwise shrinks to its
   content; z-index works on grid items without position, and staying
   unpositioned lets the portrait anchor to the section edge, not the wrap */
.ph-grid { display: grid; gap: 30px; align-items: end; padding-top: 26px; width: 100%; z-index: 1; }
/* the mark, printed faint into the paper behind everything, drifts on scroll */
.ph-bgmark {
  position: absolute; z-index: 0; left: 50%; top: 4%; width: min(78vw, 760px); aspect-ratio: 219 / 178;
  transform: translate(-42%, var(--drift, 0px)) rotate(-8deg); background: var(--pi); opacity: 0.045; pointer-events: none;
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
          mask: url("../img/mark.svg") center / contain no-repeat;
  will-change: transform;
}
[data-parallax] { will-change: transform; }
.ph-copy, .ph-fig { transform: translateY(var(--drift, 0px)); }
/* scroll cue: a short ink line that keeps ticking down until you move */
.ph-cue { position: absolute; left: 50%; bottom: 18px; width: 2px; height: 34px; background: var(--pi); opacity: 0.5; overflow: hidden; }
.ph-cue::after { content: ""; position: absolute; inset: 0; background: var(--pc); animation: cue 1.6s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
/* Eveleth is a wide caps face: ~8.1em for "NOT A CAREER", so the size is set
   so the longest line fits its column with the portrait still getting real width */
.ph h1 { font-size: clamp(2.8rem, 14vw, 6.4rem); line-height: 0.92; margin: 0; }
/* Safari drops a background-clip:text fill when the text sits in children
   that paint separately (the animated spans), leaving transparent glyphs —
   the headline vanished on iPhone. The fill lives on the spans instead. */
.ribbon-h { color: var(--pi); background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.ribbon-txt {
  color: transparent;
  background: url("../img/grain.svg") repeat, linear-gradient(180deg, var(--pi), var(--pi));
  background-size: 150px 150px, 100% 100%; background-blend-mode: multiply, normal;
  -webkit-background-clip: text; background-clip: text;
}
.ribbon { display: block; position: relative; z-index: 0; width: max-content; max-width: 100%; }
.ribbon::before {
  content: ""; position: absolute; z-index: 0; top: 14%; bottom: 6%; left: -0.12em; right: -0.45em;
  background: var(--pc); transform: scaleX(0); transform-origin: left center;
}
.ribbon-txt { position: relative; z-index: 1; display: inline-block; white-space: nowrap; clip-path: inset(-12% 100% -12% 0); }
/* one motion moment: a flat cyan bar wipes across like a print pass and the
   line is left behind it; each line follows a beat later */
.ribbon-h.in .ribbon::before { animation: sweep 1.5s cubic-bezier(0.3, 1, 0.4, 1) both; }
.ribbon-h.in .ribbon-txt { animation: unveil 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; }
.ribbon-h.in .ribbon:nth-child(2)::before { animation-delay: 0.16s; }
.ribbon-h.in .ribbon:nth-child(2) .ribbon-txt { animation-delay: 0.38s; }
.ribbon-h.in .ribbon:nth-child(3)::before { animation-delay: 0.32s; }
.ribbon-h.in .ribbon:nth-child(3) .ribbon-txt { animation-delay: 0.54s; }
@keyframes sweep {
  0%   { transform: scaleX(0); transform-origin: left center; }
  46%  { transform: scaleX(1); transform-origin: left center; }
  54%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@keyframes unveil {
  from { clip-path: inset(-12% 100% -12% 0); }
  to   { clip-path: inset(-12% -4% -12% 0); }
}
.ph-sub { font-size: clamp(1.25rem, 2.7vw, 1.75rem); font-weight: 500; line-height: 1.3; max-width: 24ch; margin: 24px 0 0; }
.ph-sub.in { animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* portrait: the plain cut-out standing on the bottom edge of the page, his
   title stuck on him as an ink label. Nothing behind him. */
.ph-fig { position: relative; z-index: 1; margin: 20px auto 0; width: min(84%, 320px); }
.ph-fig img { display: block; width: 100%; height: auto; }
.ph-title {
  position: absolute; left: -6%; bottom: 7%; transform: rotate(-4deg);
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: var(--pi); color: var(--pc); border-radius: 12px; box-shadow: 5px 5px 0 var(--pc);
  font-weight: 700; font-size: 0.95rem; line-height: 1.2; white-space: nowrap;
}
.ph-title .leaf { width: 22px; height: 18px; flex: none; }
/* the round ink sticker, turning slowly in the top-right corner of every
   poster page (injected by main.js). It sits beside the nav pill when the
   screen is wide enough and tucks under it when it is not. Absolute, not
   fixed: it belongs to the top of the page and scrolls away with the nav. */
body.poster .corner-badge {
  position: absolute; right: 22px; top: 96px; width: 96px; aspect-ratio: 1; z-index: 70;
  border-radius: 50%; background: var(--pi); box-shadow: 4px 4px 0 var(--pc); pointer-events: none;
}
@media (min-width: 1380px) { body.poster .corner-badge { top: 16px; } }
body.poster .corner-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: turn 26s linear infinite; }
/* the ring is 490 units round; at this size the full line measures ~460, so
   the whole sentence fits with a gap instead of the end being cut off */
body.poster .corner-badge text { font: 700 12px var(--body); letter-spacing: 0.13em; fill: var(--pp); }
body.poster .foot-badge text { font: 600 11px var(--mono); letter-spacing: 0.16em; }
body.poster .corner-badge .badge-leaf { width: 42%; height: 34%; background: var(--pc); }
@media (max-width: 600px) {
  body.poster .corner-badge { width: 56px; right: 10px; top: 122px; }
}
@keyframes turn { to { transform: rotate(360deg); } }
.ph-fig.in { animation: pop 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
@keyframes pop { from { opacity: 0; transform: translateY(40px); } }
/* the ink block paints above the hero so he sinks behind its edge on scroll */
.pp { position: relative; z-index: 2; }

@media (min-width: 760px) {
  .ph-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); gap: 40px; padding-top: 44px; }
  .ph-copy { align-self: center; padding-bottom: 60px; }
  .ph-fig { width: min(100%, 400px); margin: 0 2% 0 auto; }
  .ph-title { font-size: 1.05rem; left: -14%; }
}
/* wide screens: he stands as tall as the page allows, anchored to the right
   edge of the screen, the label hanging off his elbow */
@media (min-width: 1000px) {
  .ph h1 { font-size: clamp(2.8rem, 6.6vw, 6rem); }
  .ph-grid { grid-template-columns: minmax(0, 1fr); }
  .ph-fig {
    position: absolute; right: 9vw; bottom: 0; margin: 0;
    height: min(86%, 53vw); width: auto; aspect-ratio: 900 / 1141;
  }
  .ph-fig img { width: 100%; height: 100%; }
  .ph-title { font-size: 1.3rem; padding: 15px 24px; left: -16%; bottom: 6%; box-shadow: 6px 6px 0 var(--pc); }
  .ph-title .leaf { width: 28px; height: 23px; }
}
@media (max-width: 420px) { .ph-title { font-size: 0.82rem; padding: 10px 14px; left: -2%; } }

/* ---- the four policies — paper flyers pinned on the ink block ---- */
.pp { background: var(--pi); color: var(--pp); padding: clamp(76px, 9vw, 110px) 0 0; }
.pp-grid { display: grid; gap: 22px; }
.pp-item {
  position: relative; display: grid; gap: 12px; align-content: start;
  padding: 26px 26px 30px; border-radius: 16px;
  background: var(--pp); color: var(--pi); box-shadow: 6px 6px 0 var(--pc);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* each flyer sits a hair off square, like it was stuck up by hand */
.pp-item:nth-child(1) { --tilt: -1.1deg; }
.pp-item:nth-child(2) { --tilt: 0.9deg; }
.pp-item:nth-child(3) { --tilt: 0.8deg; }
.pp-item:nth-child(4) { --tilt: -0.9deg; }
.pp-item.reveal { opacity: 0; transform: translateY(28px) rotate(var(--tilt)); }
.pp-item.reveal.in { opacity: 1; transform: rotate(var(--tilt)); }
.pp-item:nth-child(2) { transition-delay: 0.1s; }
.pp-item:nth-child(3) { transition-delay: 0.2s; }
.pp-item:nth-child(4) { transition-delay: 0.3s; }
/* a flyer straightens up and lifts when you reach for it */
.pp-item.reveal.in:hover { transform: rotate(0) translateY(-5px); box-shadow: 10px 10px 0 var(--pc); transition-delay: 0s; transition-duration: 0.3s; }
/* the mark printed twice, cyan over a misregistered ink pass — the 3D look
   of a real screen print */
.pp-mark { position: relative; display: block; width: 46px; height: 37px; }
.pp-mark::before, .pp-mark::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
          mask: url("../img/mark.svg") center / contain no-repeat;
}
.pp-mark::after { background: var(--pi); transform: translate(4px, 4px); }
.pp-mark::before { background: var(--pc); z-index: 1; }
/* the way into the full strategy, sitting under the four flyers */
.pp-cta { text-align: center; margin: clamp(36px, 4vw, 52px) 0 0; }
.pp-cta.reveal { transition-delay: 0.3s; }
body.poster .pp-cta .btn-solid { background: var(--pc); color: var(--pi); padding: 16px 32px; font-size: 1.05rem; }
body.poster .pp-cta .btn-solid:hover { background: var(--pp); color: var(--pi); }
/* plain ink type: the grain fill from main.css is for ink surfaces */
.pp-item h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.02; margin: 4px 0 0;
  color: var(--pi); background: none; -webkit-background-clip: border-box; background-clip: border-box;
}
.pp-item p { margin: 0; font-size: 1.05rem; line-height: 1.5; max-width: 40ch; color: var(--mut); }
@media (min-width: 700px) {
  .pp-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .pp-item { padding: 32px 34px 36px; }
}

/* the logo runs as a strip along the bottom of the ink block */
.marq { overflow: hidden; margin-top: clamp(56px, 7vw, 88px); padding: 18px 0 22px; }
.marq-track { display: flex; width: max-content; animation: marq 38s linear infinite; }
.marq-set { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.marq-set span { font-family: var(--disp); font-size: clamp(1.1rem, 2.2vw, 1.5rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--pc); white-space: nowrap; }
.marq-set i {
  display: inline-block; width: 26px; height: 21px; flex: none; background: var(--pp);
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
          mask: url("../img/mark.svg") center / contain no-repeat;
}
@keyframes marq { to { transform: translateX(-50%); } }

/* ---- countdown + reminder — cyan block ---- */
.pc { position: relative; overflow: hidden; background: var(--pc); color: var(--pi); padding: clamp(56px, 8vw, 96px) 0; }
/* the mark, big and faint, on the right — Amjad's pick */
.pc::after {
  content: ""; position: absolute; right: -8%; top: 6%; width: min(46vw, 620px); aspect-ratio: 219 / 178;
  background: var(--pi); opacity: 0.09; transform: rotate(8deg); pointer-events: none;
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
          mask: url("../img/mark.svg") center / contain no-repeat;
}
.pc .wrap { position: relative; z-index: 1; }
.pc h2 { font-size: clamp(2rem, 5.8vw, 4rem); line-height: 0.98; max-width: 16ch; margin: 0 0 30px; }
.pc-line { font-size: clamp(1.4rem, 3.3vw, 2.2rem); font-weight: 500; line-height: 1.3; max-width: 30ch; margin: 0; }
.pc-line + .pc-line { margin-top: 8px; }
/* the number is an ink stamp inside the sentence */
.pc-days {
  display: inline-block; font-family: var(--disp); font-variant-numeric: tabular-nums;
  background: var(--pi); color: var(--pc); line-height: 1; padding: 0.06em 0.3em 0.02em;
  border-radius: 6px; transform: rotate(-2deg); margin: 0 0.05em;
}
/* name / phone / email / button as a tidy two-column card of fields */
.pc-form { max-width: 580px; margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-form input:not(.hp) { flex: none; width: 100%; min-width: 0; }
.pc-form #remind-phone, .pc-form #remind-email, .pc-form .btn, .pc-form .cf-turnstile { grid-column: 1 / -1; }
.pc-form .btn { justify-self: start; }
@media (min-width: 600px) {
  .pc-form #remind-phone, .pc-form #remind-email { grid-column: auto; }
}
/* prefixed, or the generic cyan hover wins and the button vanishes into the block */
body.poster .pc .btn-solid:hover { background: var(--pp); color: var(--pi); }
.pc .fineprint { color: rgba(40, 40, 43, 0.78); margin-top: 14px; }

/* ---- how to vote — the block's second column: a paper card level with
   the headline, flush with the right edge, the form stays on the left ---- */
.pc .wrap { display: grid; gap: 36px; align-items: stretch; }
@media (min-width: 960px) {
  .pc .wrap { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); column-gap: 56px; }
  .pc h2 { font-size: clamp(2rem, 5.8vw, 3.6rem); }
}
.pc-vote {
  --tilt: 0deg; position: relative; padding: 30px 30px 26px; border-radius: 16px;
  display: flex; flex-direction: column;
  background: var(--pp); color: var(--pi); box-shadow: 8px 8px 0 var(--pi); transform: rotate(var(--tilt));
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-vote.reveal { opacity: 0; transform: translateY(28px) rotate(var(--tilt)); }
.pc-vote.reveal.in { opacity: 1; transform: rotate(var(--tilt)); }
body.poster .pc-vote h3 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--disp); font-size: 1.8rem; letter-spacing: 0.01em; line-height: 1; margin: 0 0 22px;
  color: var(--pi); background: none; -webkit-background-clip: border-box; background-clip: border-box;
}
body.poster .pc-vote .pp-mark { width: 40px; height: 32px; }
/* the steps share the card's height with the form column, so the card runs
   from the headline's top edge to the fineprint's bottom edge */
body.poster .pc-vote ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 18px; flex: 1; align-content: space-evenly; }
body.poster .pc-vote li { position: relative; padding-left: 44px; font-size: 1.02rem; line-height: 1.45; color: var(--mut); counter-increment: step; }
body.poster .pc-vote li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 8px;
  background: var(--pi); color: var(--pc); font-family: var(--disp); font-size: 1rem; line-height: 30px; text-align: center; transform: rotate(-3deg);
}
body.poster .pc-vote li b { color: var(--pi); font-weight: 700; }
body.poster .pc-vote a { color: var(--pi); text-decoration: underline; text-decoration-color: var(--pc); text-decoration-thickness: 3px; text-underline-offset: 3px; }
body.poster .pc-vote a:hover { background: var(--pc); text-decoration: none; }
body.poster .pc-vote-src { margin: 22px 0 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--mut); }

/* ---- take action — the loudest thing on the page ---- */
.pa { padding: clamp(56px, 8vw, 96px) 0; overflow-x: clip; }
/* the headline gets the same print pass as the hero, at billboard size */
/* sized so "OUR CITY BACK." (≈8.4em in Eveleth) always fits the wrap */
.pa-h { font-size: clamp(2.4rem, 6.6vw, 5.4rem); line-height: 0.9; margin: 0 0 34px; }
.pa-h.reveal { opacity: 1; transform: none; transition: none; }
.pa-h .ribbon::before { top: 12%; bottom: 8%; }
/* three boxes, same size, same weight — socials count as much as money */
.pa-boxes { display: grid; gap: 22px; }
.pa-box {
  display: grid; gap: 18px; align-content: start; padding: 26px 24px 30px; border-radius: 18px;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* each box carries the mark big in a corner, printed twice with an offset
   pass in the box's opposite colour, so the three read as one set */
.pa-box { position: relative; overflow: hidden; }
.pa-box > * { position: relative; z-index: 1; }
/* whole mark, never cropped, sitting in the top-right corner like a sticker */
.pa-box::before, .pa-box::after {
  content: ""; position: absolute; top: 22px; right: 22px; width: clamp(64px, 24%, 96px); aspect-ratio: 219 / 178;
  transform: rotate(-8deg); pointer-events: none;
  -webkit-mask: url("../img/mark.svg") center / contain no-repeat;
          mask: url("../img/mark.svg") center / contain no-repeat;
}
.pa-box::before { transform: translate(6px, 6px) rotate(-8deg); }
.pa-box-soc::after { background: var(--pi); }   .pa-box-soc::before { background: var(--pp); }
.pa-box-sup::after { background: var(--pc); }   .pa-box-sup::before { background: var(--pp); opacity: 0.35; }
.pa-box-spr::after { background: var(--pc); }   .pa-box-spr::before { background: var(--pi); }
.pa-box.reveal { opacity: 0; transform: translateY(28px); }
.pa-box.reveal.in { opacity: 1; transform: none; }
.pa-box:nth-child(2) { transition-delay: 0.1s; }
.pa-box:nth-child(3) { transition-delay: 0.2s; }
.pa-box h3 { font-family: var(--disp); font-size: clamp(1.35rem, 2.1vw, 1.7rem); line-height: 1; margin: 0; max-width: calc(100% - 104px); }
/* socials: the cyan box, handles set as big as the buttons */
.pa-box-soc { background: var(--pc); color: var(--pi); box-shadow: 6px 6px 0 var(--pi); }
.pa-links { display: grid; gap: 10px; }
.pa-links a {
  display: flex; align-items: center; gap: 16px; color: var(--pi); text-decoration: none;
  transition: transform 0.15s ease;
}
.pa-links a:hover { transform: translateX(6px); }
.pa-links i {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--pi); color: var(--pc);
}
.pa-links svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pa-links a span { display: grid; line-height: 1.1; font-weight: 700; font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
.pa-links a small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; opacity: 0.7; }
/* support: the ink box */
.pa-box-sup { background: var(--pi); color: var(--pp); box-shadow: 6px 6px 0 var(--pc); }
/* spread the word: paper box with an ink edge */
.pa-box-spr { background: var(--pp); color: var(--pi); border: 2px solid var(--pi); box-shadow: 6px 6px 0 var(--pc); }
.pa-btns { display: grid; gap: 10px; }
body.poster .pa-box .btn { text-align: center; }
body.poster .pa-box-sup .btn-line { color: var(--pp); box-shadow: inset 0 0 0 2px var(--pp); }
body.poster .pa-box-sup .btn-line:hover { background: var(--pp); color: var(--pi); box-shadow: inset 0 0 0 2px var(--pp); }
body.poster .pa-box-sup .btn-solid { background: var(--pc); color: var(--pi); }
body.poster .pa-box-sup .btn-solid:hover { background: var(--pp); color: var(--pi); }
body.poster .pa-box-spr .btn-solid:hover { background: var(--pc); color: var(--pi); }
@media (min-width: 900px) {
  .pa-boxes { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .pa-box { padding: 30px 28px 34px; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon::before { display: none; }
  .ribbon-txt, .ribbon-h.in .ribbon-txt { clip-path: none; animation: none; }
  .ph-sub.in, .ph-fig.in { animation: none; }
  body.poster .corner-badge svg { animation: none; }
  .ph-cue::after { animation: none; }
  .marq-track { animation: none; }
  .pp-item.reveal, .pa-box.reveal, .pc-vote.reveal { opacity: 1; transform: rotate(var(--tilt, 0)); transition: none; }
  .pa-links a:hover { transform: none; }
}

/* ======================================================================
   Join page — the entrance. People land here from a card or a link with
   nothing else on screen, so the page arrives instead of just sitting there:
   the mark stamps down, the headline rises word by word, the cyan bar prints
   behind "back.", then the card slides up and its fields deal in.
   ====================================================================== */
.jn-mark-link .jn-mark { animation: jn-stamp 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s backwards; }
.jn-top .eyebrow { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.jn-w { display: inline-block; animation: jn-word 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.3s + var(--i) * 0.07s) backwards; }
/* the highlight is a background that grows left to right, then the word
   gives a small kick once it is marked */
body.poster .jn-h .glow {
  background: linear-gradient(var(--pc), var(--pc)) left center / 0% 100% no-repeat;
  animation: jn-word 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.3s + var(--i) * 0.07s) backwards,
             jn-mark-in 0.55s cubic-bezier(0.3, 1, 0.4, 1) 0.95s forwards,
             jn-kick 0.4s ease-out 1.4s;
}
.jn-real { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both; }
/* marker stroke under "simple vote" — sits on the lower half so it reads as a
   highlighter pen, not a second copy of the headline bar */
.jn-hl {
  background: linear-gradient(var(--pc), var(--pc)) left 88% / 0% 45% no-repeat;
  animation: jn-hl-in 0.6s cubic-bezier(0.3, 1, 0.4, 1) 1.45s forwards;
}
@keyframes jn-mark-in { to { background-size: 100% 100%; } }
@keyframes jn-hl-in { to { background-size: 100% 45%; } }

/* ---- unfold: a form card opens instead of just appearing ----
   The top edge draws out from the centre, then the card drops open
   downward and its contents land in order. Used on /join and /volunteer.
   Driven by .reveal/.in from main.js, so cards below the fold open as they
   scroll in. --d delays the start (the join card waits for its headline). */
.unfold.reveal { transform: none; transition: none; }
.unfold.reveal.in { animation: unfold 0.95s cubic-bezier(0.7, 0, 0.2, 1) var(--d, 0.1s) both; }
.unfold.reveal > * { opacity: 0; }
.unfold.reveal.in > * {
  opacity: 1;
  animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0.1s) + 0.6s + var(--k, 0) * 0.08s) both;
}
.unfold > :nth-child(2)  { --k: 1; }
.unfold > :nth-child(3)  { --k: 2; }
.unfold > :nth-child(4)  { --k: 3; }
.unfold > :nth-child(5)  { --k: 4; }
.unfold > :nth-child(6)  { --k: 5; }
.unfold > :nth-child(n+7) { --k: 6; }
.unfold > :nth-child(n+10) { --k: 7; }
/* step number stamps down once its card is open */
.unfold.reveal.in .step-num { animation: jn-stamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0.1s) + 0.7s) backwards; }
/* checkbox rows deal in one after another */
.unfold.reveal.in .checks .chk { animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0.1s) + 0.85s + var(--c, 0) * 0.07s) backwards; }
.unfold .checks .chk:nth-child(2) { --c: 1; }
.unfold .checks .chk:nth-child(3) { --c: 2; }
.unfold .checks .chk:nth-child(4) { --c: 3; }
.unfold .checks .chk:nth-child(5) { --c: 4; }
.unfold .checks .chk:nth-child(6) { --c: 5; }
.jn-form.unfold { --d: 0.75s; }
.donate .step.unfold:first-child { --d: 0.35s; }
@keyframes unfold {
  0%   { clip-path: inset(0 50% calc(100% - 3px) 50%); }
  38%  { clip-path: inset(0 -12px calc(100% - 3px) -12px); }
  100% { clip-path: inset(-12px -12px -12px -12px); }
}

/* once everything has landed the button keeps a slow sheen passing over it,
   so the one thing to press is the one thing still moving */
body.poster .jn-submit { position: relative; overflow: hidden; }
body.poster .jn-submit::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(15, 240, 252, 0.55), transparent);
  transform: skewX(-20deg) translateX(0); pointer-events: none;
  animation: jn-sheen 4.5s ease-in-out 2.2s infinite;
}
body.poster .jn-submit:hover::after { animation: none; opacity: 0; }

@keyframes jn-stamp {
  from { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes jn-word {
  from { opacity: 0; transform: translateY(0.55em) rotate(3deg); }
}
@keyframes jn-kick {
  0%, 100% { transform: none; }
  40%      { transform: scale(1.08) rotate(-2deg); }
}
@keyframes jn-sheen {
  0%       { transform: skewX(-20deg) translateX(0); }
  35%, 100% { transform: skewX(-20deg) translateX(600%); }
}