/* ------------------------------------------------------------
   DIRECTION C: FLYER / ZINE
   Cream flyer stock, black ink, safety orange, cobalt blue.
   Big poster type, tape and stickers, duotone + halftone photos.
   ------------------------------------------------------------ */
:root{
  --paper:#F3ECDC;      /* flyer stock */
  --paper-2:#EAE1CC;    /* slightly dirtier paper */
  --ink:#15120F;        /* black ink */
  --ink-70:#4A433B;     /* muted copy */
  --orange:#F04A1C;     /* safety orange */
  --orange-ink:#C93A12; /* orange that passes AA on paper at body size */
  --blue:#1F3FBF;       /* cobalt */
  --blue-deep:#172E8C;
  --white:#FFFDF8;
  --tape:rgba(255,241,170,.75);

  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --marker:"Permanent Marker","Comic Sans MS",cursive;

  /* type scale, 1.25 ratio from 16 */
  --t-1:clamp(.8125rem,.75rem + .25vw,.875rem);
  --t0:1rem;
  --t1:1.25rem;
  --t2:clamp(1.5rem,1.3rem + 1vw,1.75rem);
  --t3:clamp(2rem,1.5rem + 2.2vw,2.75rem);
  --t4:clamp(2.75rem,2rem + 3.5vw,4.25rem);
  --t5:clamp(4rem,2rem + 10vw,8rem);
  --hero:clamp(3.4rem,.4rem + 17vw,9.25rem);

  /* spacing rhythm, 8px base */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem; --s8:8rem;
  --gutter:clamp(16px,4vw,48px);
  --max:1280px;
  --ease:cubic-bezier(.2,.9,.3,1.2);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--t0);line-height:1.5;
  font-variation-settings:"wdth" 100;
  overflow-x:hidden;
}
/* paper grain, cheap and no asset */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(21,18,15,.045) .6px,transparent .7px);
  background-size:3px 3px;opacity:.9;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
::selection{background:var(--orange);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:1}

h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.005em;margin:0}
h2{font-size:var(--t5)}
h3{font-size:var(--t2)}
p{margin:0}
.lede{font-size:var(--t1);line-height:1.45;max-width:38ch}
.kicker{
  font-family:var(--body);font-weight:800;font-size:var(--t-1);letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;
}
.kicker::before{content:"";width:1.6em;height:3px;background:currentColor}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;padding:.75em 1.3em;border:3px solid var(--ink);border-radius:4px;
  background:var(--bg);color:var(--fg);text-decoration:none;cursor:pointer;
  font-family:var(--display);font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase;line-height:1;
  box-shadow:5px 5px 0 var(--ink);
  transform:translate(0,0);transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s;
  -webkit-tap-highlight-color:transparent;
}
.btn.hot{--bg:var(--orange);--fg:var(--ink)}
.btn.ghost{--bg:transparent;--fg:var(--ink)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn .arr{font-family:var(--body);font-weight:900;font-size:1.1em;transform:translateY(-.05em)}

/* ---------- top bar ---------- */
.top{
  position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper);
  border-bottom:3px solid var(--orange);
}
.top .wrap{display:flex;align-items:center;gap:var(--s2);min-height:60px}
.wordmark{
  font-family:var(--display);font-size:1.55rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  display:inline-flex;align-items:center;gap:0;line-height:1
}
.wordmark .love{background:var(--orange);color:var(--ink);padding:.1em .18em .06em;margin-inline:.1em;border-radius:3px;transform:rotate(-4deg);position:relative;z-index:1}
.top nav{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.top nav a{font-weight:700;text-decoration:none;font-size:.95rem;letter-spacing:.02em}
.top nav a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px;text-decoration-color:var(--orange)}
.top .btn{min-height:40px;padding:.45em .9em;font-size:1.05rem;box-shadow:3px 3px 0 var(--orange);border-color:var(--paper)}
.top .btn:hover{box-shadow:5px 5px 0 var(--orange)}
.top .btn:active{box-shadow:1px 1px 0 var(--orange)}
@media (max-width:720px){.top nav .hide-m{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:var(--s5) var(--s6)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
.hero .wrap>*{min-width:0}
.hero .intro{display:block}
@media (min-width:900px){
  .hero{padding-block:var(--s6) var(--s7)}
  .hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto auto auto;gap:var(--s3) var(--s5)}
  .hero .eyebrow{grid-column:1;grid-row:1}
  .hero h1{grid-column:1/-1;grid-row:2;position:relative;z-index:3;margin-top:0}
  .hero .intro{display:block;grid-column:1;grid-row:3;position:relative;z-index:3;margin-top:var(--s2)}
  .hero .poster{grid-column:2;grid-row:1/4;align-self:start;justify-self:end;margin-top:var(--s4);z-index:2}
}
.hero .kicker{color:var(--blue)}
.hero .lede{margin-top:0}
.hero h1{font-size:var(--hero);line-height:.84;margin-top:var(--s2);letter-spacing:-.005em;min-width:0}
.hero h1 .line{display:block;white-space:nowrap}
.hero h1 .line.ink{color:var(--ink)}
.hero h1 .line.out{
  color:var(--paper);-webkit-text-stroke:2px var(--ink);
  text-shadow:4px 4px 0 var(--orange);
}
@supports not (-webkit-text-stroke:1px black){.hero h1 .line.out{color:var(--orange);text-shadow:none}}
.hero .ctas{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.hero .meta{margin-top:var(--s3);font-weight:700;font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70);display:flex;flex-wrap:wrap;gap:.6em 1.2em}
.hero .meta span::before{content:"■";color:var(--orange);margin-right:.5em;font-size:.8em}

/* the taped-up photo */
.poster{
  position:relative;max-width:560px;margin:var(--s3) auto 0;width:100%;
  transform:rotate(2.2deg);
}
@media (min-width:900px){.poster{margin-inline:0;transform:rotate(2.6deg);width:min(100%,540px)}}
.cut{
  position:relative;background:var(--orange);border:4px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);overflow:hidden;
}
.cut img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  filter:grayscale(1) contrast(1.25) brightness(1.02);
  mix-blend-mode:multiply;
}
/* halftone dots over the duotone */
.cut::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at center,var(--ink) .85px,transparent 1.15px);
  background-size:4px 4px;opacity:.28;mix-blend-mode:multiply;
}
.tape{
  position:absolute;width:120px;height:32px;background:var(--tape);
  box-shadow:0 1px 2px rgba(0,0,0,.15);z-index:3;
  -webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);
}
.tape::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.035) 6px 7px)}
.tape.tl{left:-34px;top:-12px;transform:rotate(-38deg)}
.tape.br{right:-34px;bottom:-12px;transform:rotate(-38deg)}
.tape.tr{right:-36px;top:-10px;transform:rotate(36deg)}
.tape.bl{left:-36px;bottom:-10px;transform:rotate(36deg)}

/* stickers */
.sticker{
  position:absolute;z-index:4;display:inline-grid;place-items:center;text-align:center;
  font-family:var(--display);text-transform:uppercase;line-height:.95;letter-spacing:.02em;
  padding:.5em .7em;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  transition:transform .25s var(--ease);
}
.sticker.round{border-radius:50%;aspect-ratio:1;width:118px;padding:.6em}
.sticker.blue{background:var(--blue);color:var(--white)}
.sticker.orange{background:var(--orange);color:var(--ink)}
.sticker.paper{background:var(--white);color:var(--ink)}
.sticker small{display:block;font-family:var(--body);font-weight:800;font-size:.6rem;letter-spacing:.14em;margin-bottom:.25em}
.sticker big{display:block;font-size:1.5rem}
.poster .s1{top:68px;right:-18px;transform:rotate(9deg)}
.poster .s2{top:34px;left:-14px;transform:rotate(-6deg);font-size:1.05rem}
.poster:hover .s1{transform:rotate(14deg) scale(1.06)}
.poster:hover .s2{transform:rotate(-9deg) scale(1.04)}
.caption{
  font-family:var(--marker);font-size:1.05rem;color:var(--ink-70);margin-top:var(--s3);
  transform:rotate(-1.5deg);display:block;
}
@media (min-width:900px){.caption{text-align:right;padding-left:30%}}

/* ---------- ticker ---------- */
.ticker{
  background:var(--ink);color:var(--paper);border-block:3px solid var(--ink);
  overflow:hidden;white-space:nowrap;padding:.55em 0;position:relative;z-index:1;
  font-family:var(--display);font-size:var(--t2);text-transform:uppercase;letter-spacing:.04em;
}
.ticker.orange{background:var(--orange);color:var(--ink)}
.ticker .track{display:inline-flex;gap:0;animation:slide 28s linear infinite;will-change:transform}
.ticker .track span{padding:0 .6em}
.ticker .track span::after{content:"★";color:var(--orange);margin-left:1.2em;font-size:.75em;vertical-align:.12em}
.ticker.orange .track span::after{color:var(--ink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{position:relative;z-index:1}
.sec{padding-block:var(--s7)}
@media (max-width:720px){.sec{padding-block:var(--s6)}}
.head{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.head h2 .em{color:var(--orange-ink)}
.head h2 .blue{color:var(--blue)}

/* what it is */
.what .grid{display:grid;gap:var(--s5)}
@media (min-width:900px){.what .grid{grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:start}}
.what .copy{display:grid;gap:var(--s3);font-size:var(--t1);line-height:1.5;max-width:44ch}
.what .copy strong{font-weight:800}
.who{margin-top:var(--s2)}
.who .kicker{color:var(--blue)}
.who ul{list-style:none;padding:0;margin:var(--s2) 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.who li{
  font-family:var(--display);font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;
  background:var(--white);border:3px solid var(--ink);padding:.35em .7em .28em;box-shadow:3px 3px 0 var(--ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;
  transform:rotate(var(--r,0deg));
}
.who li:nth-child(odd){--r:-1.5deg}.who li:nth-child(3n){--r:1.6deg}.who li:nth-child(4n){--r:-.8deg}
.who li:hover{background:var(--orange);transform:rotate(0deg) translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.who li.dog{background:var(--blue);color:var(--white)}
.cbg{display:grid;gap:var(--s2);position:relative}
.cbg .card{
  background:var(--ink);color:var(--paper);padding:var(--s3);border:3px solid var(--ink);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);align-items:center;
  transform:rotate(var(--r,0deg));box-shadow:6px 6px 0 var(--orange);
}
.cbg .card:nth-child(1){--r:-1deg}.cbg .card:nth-child(2){--r:.8deg;margin-left:var(--s3)}.cbg .card:nth-child(3){--r:-.6deg}
.cbg .card h3{font-size:var(--t3);color:var(--orange);line-height:.9}
.cbg .card:nth-child(2) h3{color:var(--paper)}
.cbg .card:nth-child(3) h3{color:var(--orange)}
.cbg .card p{font-size:var(--t0);line-height:1.45;max-width:32ch}
.cbg .num{font-family:var(--display);font-size:var(--t-1);letter-spacing:.1em;color:var(--paper);opacity:.6;align-self:start;grid-row:span 2}
@media (max-width:720px){.cbg .card:nth-child(2){margin-left:0}}

/* ---------- next event ---------- */
.next{background:var(--blue);color:var(--white);overflow:hidden}
.next .head h2{color:var(--white)}
.next .head .kicker{color:var(--white)}
.ticket{
  position:relative;background:var(--white);color:var(--ink);border:4px solid var(--ink);
  box-shadow:12px 12px 0 var(--ink);max-width:820px;margin-inline:auto;
  display:grid;grid-template-columns:1fr;
  transform:rotate(-1.2deg);
}
@media (min-width:760px){.ticket{grid-template-columns:1fr auto}}
.ticket .main{padding:clamp(1.5rem,4vw,3rem)}
.ticket .stub{
  border-top:4px dashed var(--ink);padding:var(--s3);display:grid;gap:var(--s1);align-content:center;
  background:var(--paper-2);font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;line-height:1;
  min-width:200px;
}
@media (min-width:760px){.ticket .stub{border-top:0;border-left:4px dashed var(--ink)}}
.ticket .stub .lab{font-family:var(--body);font-weight:800;font-size:.7rem;letter-spacing:.16em;color:var(--ink-70)}
.ticket .stub .val{font-size:1.5rem;margin-bottom:.55em}
.ticket .label{font-weight:800;font-size:var(--t-1);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.ticket .date{
  font-family:var(--display);font-size:clamp(3rem,10vw,6.5rem);line-height:.9;text-transform:uppercase;
  margin-top:.15em;color:var(--ink);
}
.ticket .date .soon{color:var(--orange-ink)}
.ticket .note{margin-top:var(--s3);font-size:var(--t1);max-width:36ch;line-height:1.45}
.ticket .btn{margin-top:var(--s3)}
.stamp{
  position:absolute;right:-6px;top:-22px;z-index:3;
  font-family:var(--display);text-transform:uppercase;font-size:1rem;letter-spacing:.1em;
  color:var(--orange-ink);border:4px solid var(--orange-ink);border-radius:8px;padding:.35em .6em;
  transform:rotate(10deg);background:rgba(255,253,248,.7);
  mask-image:radial-gradient(rgba(0,0,0,.95) 60%,rgba(0,0,0,.5));
}
@media (min-width:760px){.stamp{right:160px;top:-26px;font-size:1.25rem}}

/* ---------- recap ---------- */
.recap .head{grid-template-columns:1fr;align-items:end}
@media (min-width:900px){.recap .head{grid-template-columns:1fr auto;gap:var(--s4)}}
.recap .lede{max-width:52ch;font-size:var(--t1)}
.strip{
  display:flex;gap:var(--s3);overflow-x:auto;padding:var(--s4) var(--gutter) var(--s5);
  margin-inline:calc(var(--gutter) * -1);scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none}
.strip li{list-style:none;flex:0 0 auto;scroll-snap-align:center}
.strip li:last-child{padding-right:var(--gutter)}
.strip-hint{font-family:var(--marker);color:var(--ink-70);font-size:1rem;transform:rotate(-1deg);display:inline-block;margin-top:var(--s2)}
.strip-hint .arr{font-family:var(--body);font-weight:900}
.polaroid{
  position:relative;background:var(--white);padding:10px 10px 44px;border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);width:min(72vw,250px);
  transform:rotate(var(--r,0deg));transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.polaroid.wide{width:min(84vw,340px)}
.polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid rgba(21,18,15,.2)}
.polaroid.wide img{aspect-ratio:3/2}
.polaroid figcaption{
  position:absolute;left:12px;right:12px;bottom:10px;
  font-family:var(--marker);font-size:1rem;color:var(--ink-70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.polaroid .tape{width:92px;height:26px;left:50%;top:-12px;transform:translateX(-50%) rotate(-3deg)}
.polaroid:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:9px 11px 0 var(--ink);z-index:2}
.strip li:nth-child(1) .polaroid{--r:-3deg}.strip li:nth-child(2) .polaroid{--r:2deg}.strip li:nth-child(3) .polaroid{--r:-1.5deg}
.strip li:nth-child(4) .polaroid{--r:2.5deg}.strip li:nth-child(5) .polaroid{--r:-2deg}.strip li:nth-child(6) .polaroid{--r:1.5deg}.strip li:nth-child(7) .polaroid{--r:-2.5deg}
.recap .after{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;margin-top:var(--s2)}
.recap .after p{font-weight:700;max-width:38ch}
.recap .hint{font-family:var(--marker);color:var(--ink-70);transform:rotate(-2deg);display:inline-block}
.facts{display:grid;gap:var(--s2);margin-top:var(--s5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fact{
  border:3px solid var(--ink);background:var(--white);padding:var(--s3);
  box-shadow:5px 5px 0 var(--blue);
}
.fact b{display:block;font-family:var(--display);font-weight:400;font-size:var(--t3);line-height:.9;text-transform:uppercase;color:var(--blue)}
.fact p{margin-top:var(--s1);font-size:var(--t0);line-height:1.45}

/* ---------- sponsors ---------- */
.sponsors{background:var(--ink);color:var(--paper)}
.sponsors .head h2{color:var(--paper)}
.sponsors .head h2 .em{color:var(--orange)}
.sponsors .head .kicker{color:var(--orange)}
.sp-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.sp{
  background:var(--paper);color:var(--ink);border:3px solid var(--paper);padding:var(--s3);
  box-shadow:6px 6px 0 var(--orange);transform:rotate(var(--r,0deg));
  display:grid;gap:var(--s1);align-content:start;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.sp:nth-child(1){--r:-1.2deg}.sp:nth-child(2){--r:1deg}.sp:nth-child(3){--r:-.7deg}.sp:nth-child(4){--r:1.3deg}
.sp:hover{transform:rotate(0deg) translate(-2px,-2px);box-shadow:9px 9px 0 var(--orange)}
.sp .name{font-family:var(--display);font-size:var(--t2);text-transform:uppercase;line-height:.95;letter-spacing:.01em}
.sp .role{font-weight:800;font-size:var(--t-1);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.sp p{font-size:var(--t0);line-height:1.45;color:var(--ink-70)}
.partners{margin-top:var(--s5);display:grid;gap:var(--s3)}
@media (min-width:900px){.partners{grid-template-columns:1fr 1fr;align-items:center}}
.partners .kicker{color:var(--orange)}
.pl{list-style:none;padding:0;margin:var(--s2) 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.pl li{
  font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em;
  border:3px solid var(--paper);padding:.35em .75em .28em;color:var(--paper);
}
.pl li b{font-family:var(--body);font-weight:800;font-size:.65rem;letter-spacing:.14em;color:var(--orange);display:block;margin-bottom:.15em}
.sp-cta{font-size:var(--t1);line-height:1.45;max-width:34ch}
.sp-cta a{color:var(--orange);font-weight:800;text-decoration-thickness:2px;text-underline-offset:.2em}
.sp-cta a:hover{color:var(--paper)}

/* ---------- form ---------- */
.join{position:relative;overflow:hidden}
.join .wrap{display:grid;gap:var(--s5)}
@media (min-width:960px){.join .wrap{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}}
.join .head{margin-bottom:var(--s3)}
.join .lede{font-size:var(--t1);max-width:36ch}
.join .perks{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;gap:var(--s2);font-weight:700}
.join .perks li{display:flex;gap:.7em;align-items:flex-start}
.join .perks li::before{content:"✔";flex:0 0 auto;width:1.6em;height:1.6em;display:grid;place-items:center;background:var(--orange);border:2px solid var(--ink);border-radius:50%;font-size:.9em}
.form{
  position:relative;background:var(--white);border:4px solid var(--ink);box-shadow:12px 12px 0 var(--orange);
  padding:clamp(1.25rem,4vw,2.5rem);transform:rotate(.6deg);
}
.form .tape{width:140px;height:34px;left:50%;top:-16px;transform:translateX(-50%) rotate(-2deg)}
.form .ftitle{font-family:var(--display);font-size:var(--t3);text-transform:uppercase;line-height:.95}
.form .ftitle span{color:var(--orange-ink)}
.fields{display:grid;gap:var(--s3);margin-top:var(--s3)}
@media (min-width:600px){.fields{grid-template-columns:1fr 1fr}.fields .full{grid-column:1/-1}}
.f{display:grid;gap:.4rem}
.f label{font-weight:800;font-size:var(--t-1);letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;gap:1em}
.f label .opt{font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--ink-70)}
.f input,.f select{
  font:inherit;font-weight:600;font-size:1.05rem;color:var(--ink);background:var(--paper);
  border:3px solid var(--ink);border-radius:4px;padding:.75em .9em;min-height:52px;width:100%;
  transition:box-shadow .15s,background .15s;
}
.f input::placeholder{color:#7A7168;font-weight:500}
.f input:focus,.f select:focus{outline:none;box-shadow:0 0 0 4px var(--orange);background:var(--white)}
.f.bad input,.f.bad select{border-color:var(--orange-ink);background:#FFF2EC}
.f .err{font-size:.875rem;font-weight:700;color:var(--orange-ink);min-height:1.2em;display:flex;gap:.4em;align-items:center}
.f .err:empty{display:none}
.f.bad .err::before{content:"!";display:inline-grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;background:var(--orange-ink);color:#fff;font-family:var(--display);font-size:.8em}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form .submit{margin-top:var(--s4);display:grid;gap:var(--s2)}
.form .submit .btn{width:100%;font-size:1.5rem;min-height:60px}
.form .fine{font-size:.875rem;color:var(--ink-70);line-height:1.4}
.form.shake{animation:shake .45s var(--ease)}
@keyframes shake{10%,90%{transform:rotate(.6deg) translateX(-2px)}20%,80%{transform:rotate(.6deg) translateX(4px)}30%,50%,70%{transform:rotate(.6deg) translateX(-6px)}40%,60%{transform:rotate(.6deg) translateX(6px)}}
.done{
  display:none;text-align:center;padding:var(--s4) var(--s2);
}
.done .big{font-family:var(--display);font-size:var(--t4);line-height:.9;text-transform:uppercase;color:var(--blue)}
.done p{margin-top:var(--s2);font-size:var(--t1)}
.form.is-done .fields,.form.is-done .submit,.form.is-done .ftitle{display:none}
.form.is-done .done{display:block}
.join .corner{position:absolute;right:-30px;bottom:40px;transform:rotate(-12deg)}
@media (max-width:959px){.join .corner{display:none}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding-block:var(--s6) var(--s5);border-top:6px solid var(--orange);position:relative;z-index:1}
footer .wrap{display:grid;gap:var(--s4)}
@media (min-width:900px){footer .wrap{grid-template-columns:1fr auto;align-items:end}}
.ig{
  font-family:var(--display);font-size:var(--t4);line-height:.9;text-transform:uppercase;text-decoration:none;
  display:inline-flex;align-items:center;gap:.3em;color:var(--paper);
}
.ig .at{color:var(--orange)}
.ig:hover .at{color:var(--paper)}.ig:hover{color:var(--orange)}
footer .tag{font-family:var(--marker);font-size:1.1rem;color:var(--orange);margin-top:var(--s2);display:inline-block;transform:rotate(-1.5deg)}
footer .links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);font-weight:700;font-size:.95rem}
footer .links a{text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--orange)}
footer .links a:hover{color:var(--orange)}
footer .fine{font-size:.85rem;color:#B9B0A3;max-width:52ch;line-height:1.5}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(18px) rotate(var(--r,0deg));transition:opacity .6s ease,transform .7s var(--ease)}
.rv.in{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}
.no-js .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:rotate(var(--r,0deg))}
  .ticker .track{animation:none}
}

/* ---------- form-level error (server or network) ---------- */
.form .form-err{font-size:.95rem;font-weight:700;color:var(--orange-ink);background:#FFF2EC;border:3px solid var(--orange-ink);padding:.6em .8em;border-radius:4px}
.form .form-err:empty{display:none}
.form .submit .btn[disabled]{opacity:.7;cursor:wait;transform:none}

/* ---------- 404 ---------- */
.lost{padding-block:var(--s7) var(--s8)}
.lost h1{font-size:clamp(4rem,1rem + 14vw,11rem);line-height:.86}
.lost h1 .out{display:block;color:var(--paper);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--orange)}
@supports not (-webkit-text-stroke:1px black){.lost h1 .out{color:var(--orange);text-shadow:none}}
.lost .kicker{color:var(--blue);margin-bottom:var(--s3)}
.lost .lede{margin-top:var(--s4)}
.lost .ctas{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}