/* Live placards — Back Young People Now, refreshed palette.
   Colours come from the brand refresh (violet-950 ink, yellow-200, lilac-pink, magenta, orange). */

:root {
  --ink: #0d092e;          /* violet-950: text, borders, hard shadows */
  --ink-ground: #241e61;   /* violet-900: dark buttons, bands */
  --display: #fbd000;      /* yellow-200 */
  --pink: #ed9af1;         /* lilac-300 (lilac-pink): CTAs */
  --pink-hover: #db8dde;   /* lilac-400 */
  --violet: #7166ff;       /* violet-600: brand ground, ink text only */
  --violet-700: #5148bd;
  --violet-300: #bdc2fd;
  --violet-200: #d6d9ff;
  --violet-100: #e9ebff;
  --violet-50: #f5f6ff;
  --magenta: #ff1ec8;      /* magenta-500: accent blocks, ink text */
  --magenta-400: #fc75d0;
  --orange: #fc6f01;       /* orange-500 */
  --orange-200: #fed1bc;
  --orange-300: #fdb490;
  --wood: #974001;         /* orange-700: placard sticks */
  --g-pink: #fee3ff;       /* lilac-100 */
  --g-yellow: #fff7db;     /* yellow-50 */
  --rule: #dddee2;
  --error: #9b1239;
  --grain-o: 0.2;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--display); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
.d { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 0.92; margin: 0; }
.it { font-style: italic; }
.eyebrow { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }
.small { font-size: 13px; line-height: 1.45; margin: 0; }
.textlink { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; background: none; border: 0; padding: 12px 0; cursor: pointer; }

/* logo: the campaign's refreshed artwork (bypn-logo-ink.svg, served from the Webflow site's CDN) used as a
   mask, so it takes --logo-c: ink on light grounds, white on dark. */
.logo { display: block; flex: none; width: 120px; aspect-ratio: 956 / 1080; background: var(--logo-c, var(--ink));
  -webkit-mask: url(https://cdn.prod.website-files.com/6ae329922e8a16d7c527c8e9/6aeb748e86f2ebd00cae8ab3_bypn-logo-ink.svg) center / contain no-repeat;
  mask: url(https://cdn.prod.website-files.com/6ae329922e8a16d7c527c8e9/6aeb748e86f2ebd00cae8ab3_bypn-logo-ink.svg) center / contain no-repeat; }

/* hand-drawn underline under a word */
.ul { position: relative; display: inline-block; }
.ul::after { content: ""; position: absolute; left: -1%; right: -2%; bottom: -0.17em; height: 0.2em; min-height: 6px; background: currentColor;
  -webkit-mask: url(/brand/underline.svg) center / 100% 100% no-repeat; mask: url(/brand/underline.svg) center / 100% 100% no-repeat; }

/* grain */
.grain-l, .grain-d { position: relative; isolation: isolate; }
.grain-l::before, .grain-d::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: var(--grain-o); background-repeat: repeat; background-size: 220px 220px; }
.grain-l::before { background-image: url(/brand/grain-light.svg); }
.grain-d::before { background-image: url(/brand/grain-dark.svg); opacity: calc(var(--grain-o) * 2.4); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 22px; border: 0; border-radius: 0;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: 1; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-cta { background: var(--pink); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-cta:hover:not(:disabled) { background: var(--pink-hover); }
.btn-dark { background: var(--ink-ground); color: var(--display); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; font-weight: 700; }
.btn-hot { background: var(--magenta); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.btn-block { width: 100%; }

/* ─── placards ─────────────────────────────────────────── */
.sign { display: inline-flex; flex-direction: column; align-items: center; flex: none; }
.placard { position: relative; width: var(--pw, 262px); height: var(--ph, 168px); font-size: var(--pf, 15px);
  padding: 0.9em 1.1em; background: var(--pbg, var(--display)); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 7px 8px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.12em;
  transform: rotate(var(--r, 0deg)); }
.placard .p-back, .placard .p-now { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 0.9; font-size: 1.9em; }
.placard .p-word { font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 0.88; letter-spacing: -0.02em; font-size: 3.5em; overflow-wrap: anywhere; max-width: 100%; }
.placard.w-mid .p-word { font-size: 2.75em; }
.placard.w-long .p-word { font-size: 2.1em; }
.placard .p-sign { position: absolute; bottom: 0.45em; right: 0.7em; font: italic 700 0.85em/1 var(--font-display); text-transform: uppercase; }
.placard .p-sticker { position: absolute; top: -1.7em; right: -1.6em; width: 5em; height: 5em; font-size: 1em; transform: rotate(10deg); }
.placard .p-tag { position: absolute; top: -1.1em; left: 1.6em; background: var(--ink); color: #fff; padding: 0.4em 0.7em; font: 900 1.3em/1 var(--font-display); text-transform: uppercase; transform: rotate(3deg); }
.stick { width: var(--sw, 20px); height: var(--sh, 44px); margin-top: -3px; background: var(--wood); border: 3px solid var(--ink); border-top: 0; box-shadow: 5px 0 0 var(--ink); transform: rotate(var(--r, 0deg)); }

.burst { display: grid; place-items: center; text-align: center; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 0.9; color: var(--ink); font-size: 1.1em;
  clip-path: polygon(50% 0%,59% 14%,75% 6%,76% 23%,94% 22%,86% 38%,100% 50%,86% 62%,94% 78%,76% 77%,75% 94%,59% 86%,50% 100%,41% 86%,25% 94%,24% 77%,6% 78%,14% 62%,0% 50%,14% 38%,6% 22%,24% 23%,25% 6%,41% 14%); }

/* placard sizes */
.sz-s  { --pw: 196px; --ph: 132px; --pf: 11.5px; --sw: 18px; }
.sz-m  { --pw: 268px; --ph: 180px; --pf: 15.5px; --sw: 24px; }
.sz-l  { --pw: 300px; --ph: 236px; --pf: 17px; }
.sz-xl { --pw: 880px; --ph: 480px; --pf: 52px; --sw: 44px; --sh: 260px; }
.sz-xl .placard, .placard.sz-xl { border-width: 6px; box-shadow: 16px 18px 0 var(--ink); }
.sz-xl .stick { border-width: 6px; box-shadow: 9px 0 0 var(--ink); }

/* motion — all off for reduced motion */
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-16px) rotate(calc(var(--r, 0deg) * -0.6)); } }
.bob { animation: bob 2.6s ease-in-out infinite; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker { display: inline-flex; gap: 56px; padding-left: 56px; animation: ticker 38s linear infinite; white-space: nowrap; }
@keyframes pop { 0% { transform: scale(0.55) rotate(var(--r, 0deg)); opacity: 0; } 60% { transform: scale(1.06) rotate(var(--r, 0deg)); opacity: 1; } 100% { transform: scale(1) rotate(var(--r, 0deg)); } }
.pop { animation: pop 0.8s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bob, .ticker, .pop, .pulse { animation: none !important; } }

/* form bits */
.field { display: flex; flex-direction: column; gap: 8px; }
.field input[type="text"], .field input[type="email"] { height: 56px; width: 100%; padding: 0 14px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 0; font-size: 18px; font-weight: 600; }
.field input::placeholder { color: var(--violet-700); opacity: 1; font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 48px; height: 44px; padding: 0; border: 3px solid var(--ink); border-radius: 0; background: var(--c); }
.swatch[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 3px; }
.pill { min-height: 44px; padding: 0 16px; border: 3px solid var(--ink); border-radius: 0; background: transparent; font: 800 17px/1 var(--font-display); text-transform: uppercase; }
.pill[aria-pressed="true"] { background: var(--ink-ground); border-color: var(--ink-ground); color: var(--display); }
.notice { margin: 0; padding: 12px 14px; border: 2px solid var(--ink); background: #fff; font-size: 15px; line-height: 1.4; font-weight: 600; }
.notice.is-error { border-color: var(--error); color: var(--error); }

/* QR */
.qr { flex: none; background: #fff; padding: 10px; border: 3px solid var(--ink); }
.qr canvas, .qr img { width: 100% !important; height: 100% !important; image-rendering: pixelated; }