/* =========================================================
   ZCLUB — visual system
   Bootstrap 5 handles the grid + offcanvas; everything else is here.
   Change colours / fonts in :root and the whole site follows.
   ========================================================= */

:root {
  --ink: #0b0a1c;
  --ink-2: #16143a;
  --paper: #f4f0e6;
  --purple: #6b2bff;
  --pink: #ff2e88;
  --lime: #c6ff3d;
  --cyan: #2ee6d6;
  --yellow: #ffe14d;
  --orange: #ff5a1f;
  --lilac: #0e3a3c;

  --f-display: "Anton", "Impact", sans-serif;
  --f-chunk: "Archivo Black", "Arial Black", sans-serif;
  --f-body: "Bricolage Grotesque", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;
  --f-hand: "Permanent Marker", cursive;

  --ease: cubic-bezier(.2, .75, .2, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --nav-h: 84px;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* print-like grain over everything */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--pink); color: var(--paper); }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.hand { font-family: var(--f-hand); font-weight: 400; text-transform: none; letter-spacing: 0; }
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10001;
  background: var(--lime); color: var(--ink); padding: .6rem 1rem; font-family: var(--f-mono); font-weight: 700;
}
.skip-link:focus { top: 1rem; }
.container-xxl { padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }

/* ---------- buttons ---------- */
.btn-z {
  --sh: var(--ink);
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px;
  padding: .7rem 1.15rem;
  font-family: var(--f-chunk);
  font-size: .9rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--sh);
  cursor: pointer;
  transition: translate .3s var(--ease), box-shadow .3s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  will-change: transform;
}
.btn-z { position: relative; }
.invite-note { margin: 1.1rem 0 0; font-family: var(--f-mono); font-size: .74rem; color: rgba(244, 240, 230, .72); }
.invite-note b { color: var(--lime); margin-right: .3rem; }
.mm-invite { color: var(--ink); }
.mm-invite b { color: var(--pink); }
.btn-z .arr { display: inline-block; transition: rotate .3s var(--bounce), translate .3s var(--bounce); }
.btn-z:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--sh); }
.btn-z:hover .arr { rotate: 45deg; }
.btn-z:active { translate: 2px 2px; box-shadow: 0 0 0 var(--sh); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { color: var(--ink); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--paper); --sh: transparent; }
.btn-ghost:hover { background: var(--paper); color: var(--ink); --sh: var(--pink); }
.btn-ink { background: var(--ink); color: var(--paper); --sh: rgba(11, 10, 28, .35); }
.btn-ink:hover { background: var(--paper); color: var(--ink); }
.btn-lg { padding: 1rem 1.25rem; font-size: .92rem; }
.btn-xl { padding: 1.1rem 1.5rem; font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: .01em; }

/* ---------- navbar ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(11, 10, 28, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(244, 240, 230, .1);
  transition: height .3s var(--ease), background .3s;
}
.site-nav.scrolled { height: 72px; background: rgba(11, 10, 28, .92); }
.site-nav .container-xxl { width: 100%; }
.logo-img { display: block; height: 52px; width: auto; transition: rotate .4s var(--bounce), scale .4s var(--bounce); }
.logo:hover .logo-img { rotate: -6deg; scale: 1.06; }
.site-nav.scrolled .logo-img { height: 44px; }
.mobile-menu .logo-img { filter: brightness(0); opacity: .9; }
.footer-bottom .logo-img { height: 34px; }
@media (max-width: 767.98px) { .logo-img { height: 38px; } }
.logo { display: inline-flex; align-items: center; gap: .15rem; text-decoration: none; color: var(--paper); position: relative; }
.logo-z {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  background: var(--lime); color: var(--ink);
  font-family: var(--f-chunk); font-size: 1.35rem;
  rotate: -8deg;
  transition: rotate .4s var(--bounce);
}
.logo:hover .logo-z { rotate: 8deg; }
.logo-word { font-family: var(--f-chunk); font-size: 1.45rem; letter-spacing: -.02em; margin-left: .25rem; }
.logo-sticker {
  font-family: var(--f-mono); font-weight: 700; font-size: .58rem;
  background: var(--pink); color: var(--paper);
  padding: .1rem .3rem; margin-left: .35rem; rotate: 10deg; translate: 0 -.55rem;
}
.nav-links { gap: 2.2rem; }
.nav-links a {
  position: relative;
  font-family: var(--f-mono); font-weight: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: .3rem 0;
}
.nav-links a i { font-style: normal; color: var(--lime); font-size: .62rem; vertical-align: super; margin-right: .3rem; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--pink); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: 0 .9rem;
  background: transparent; color: var(--paper);
  border: 2px solid var(--paper); border-radius: 0;
  font-family: var(--f-mono); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
}
.menu-dots { display: grid; gap: 4px; }
.menu-dots b { display: block; width: 18px; height: 2px; background: currentColor; }
.menu-dots b:last-child { width: 11px; }

.mobile-menu.offcanvas-top { height: 100dvh; background: var(--lime); color: var(--ink); border: 0; }
.mobile-menu .offcanvas-header { height: var(--nav-h); padding: 0 16px; }
.mobile-menu .logo { color: var(--ink); }
.mobile-menu .logo-z { background: var(--ink); color: var(--lime); }
.menu-close {
  min-height: 44px; padding: 0 .9rem; background: var(--ink); color: var(--lime);
  border: 0; font-family: var(--f-mono); font-weight: 700; font-size: .78rem; text-transform: uppercase;
}
.mm-links { display: flex; flex-direction: column; border-top: 3px solid var(--ink); }
.mm-links a {
  font-family: var(--f-display); font-size: clamp(3.2rem, 15vw, 5.5rem); line-height: 1;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  padding: .5rem 0; border-bottom: 3px solid var(--ink);
  display: flex; align-items: baseline; gap: .8rem;
}
.mm-links a i { font-family: var(--f-mono); font-style: normal; font-size: .8rem; font-weight: 700; }
.mm-links a:active { background: var(--ink); color: var(--lime); }
.mm-foot { font-family: var(--f-mono); font-size: .75rem; margin-top: 1.25rem; text-transform: uppercase; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; display: flex; user-select: none; }
.marquee-track {
  display: flex; flex-shrink: 0; align-items: center; gap: 1.6rem;
  padding-right: 1.6rem;
  animation: marquee 32s linear infinite;
}
.marquee.reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { white-space: nowrap; }
.marquee-track i { font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

.band {
  position: relative; z-index: 5;
  width: 106vw; margin-left: -3vw;
  padding: .85rem 0;
  border-block: 3px solid var(--ink);
  font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 2.3rem);
  text-transform: uppercase; line-height: 1;
  rotate: -2deg;
}
.band-flip { rotate: 1.6deg; }
.band-pink { background: var(--pink); color: var(--ink); }
.band-pink i { color: var(--paper); }
.band-yellow { background: var(--yellow); color: var(--ink); }
.band-yellow i { color: var(--pink); }

/* ---------- reveal on scroll ---------- */
/* :where() keeps this at single-class weight so cards that also reveal keep their own hover transitions */
:where(.js) .reveal { opacity: 0; transform: translateY(42px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
:where(.js) .reveal.in { opacity: 1; transform: none; }

/* ---------- section scaffolding ---------- */
.sec { position: relative; padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.sec-paper  { background: var(--paper); color: var(--ink); }
.sec-ink    { background: var(--ink); color: var(--paper); }
.sec-lime   { background: var(--lime); color: var(--ink); }
.sec-purple { background: var(--purple); color: var(--paper); }
.sec-pink   { background: var(--pink); color: var(--ink); }
.sec-yellow { background: var(--yellow); color: var(--ink); }
/* doodle pattern (images/doodles.svg) — swap or tweak the file to change it */
.sec-yellow.about { background-image: url("../images/doodles.svg"); background-size: 360px 360px; animation: doodle-drift 70s linear infinite; }
@keyframes doodle-drift { to { background-position: 360px -360px; } }
@media (max-width: 767.98px) { .sec-yellow.about { background-size: 260px 260px; } }
.sec-cyan   { background: var(--cyan); color: var(--ink); }

.sec-head {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--f-mono); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: clamp(2rem, 4.5vw, 3.75rem);
}
.sec-num { font-family: var(--f-chunk); font-size: .9rem; background: var(--ink); color: var(--lime); padding: .3rem .55rem; letter-spacing: 0; }
.sec-head.on-dark .sec-num { background: var(--lime); color: var(--ink); }
.sec-pink .sec-head.on-dark { color: var(--ink); }
.sec-pink .sec-head.on-dark .sec-num { background: var(--ink); color: var(--pink); }
.sec-rule { flex: 1; height: 1px; opacity: .5; background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px); }
.sec-side { opacity: .65; font-weight: 400; }
.join .sec-side {
  opacity: 1; font-weight: 700;
  background: var(--ink); color: var(--yellow);
  padding: .45rem .75rem; rotate: -2deg;
  box-shadow: 3px 3px 0 var(--paper);
}
@media (max-width: 767.98px) { .join .sec-side { display: inline-block; } .join .sec-head { flex-wrap: wrap; } .join .sec-head .sec-side { order: 3; margin-top: .4rem; font-size: .6rem; letter-spacing: .04em; white-space: nowrap; } }

.display-x {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.8rem, 5.8vw, 5.9rem);
  line-height: .9; letter-spacing: -.005em;
  text-transform: uppercase; margin: 0;
}
.outline { color: transparent; -webkit-text-stroke: 2px currentColor; }
.sec-ink .outline, .sec-purple .outline { -webkit-text-stroke-color: var(--paper); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(4.5rem, 8vw, 6.5rem);
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(244, 240, 230, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 240, 230, .045) 1px, transparent 1px);
  background-size: 88px 88px;
}
.hero-bgnum {
  position: absolute; right: -4vw; top: -6vw;
  font-family: var(--f-display); font-size: 46vw; line-height: .8;
  color: transparent; -webkit-text-stroke: 2px rgba(198, 255, 61, .09);
  pointer-events: none; user-select: none;
}
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 240, 230, .7);
  padding-bottom: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(244, 240, 230, .18);
}
.hero-meta .dot { width: 8px; height: 8px; background: var(--lime); }
.hero-copy { position: relative; z-index: 3; padding-right: 1rem; }
.hero-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(4.6rem, 9vw, 8.6rem);
  line-height: .9; letter-spacing: -.005em;
  text-transform: uppercase; margin: 0;
}
.hero-title .line { display: block; }
.hero-title .ht-small { font-size: .44em; line-height: 1; margin-bottom: .14em; color: var(--paper); }
.ht-small em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--lime); }
.hero-title .word { display: inline-block; animation: rise 1s var(--ease) both; }
.hero-title .line:nth-child(2) .word { animation-delay: .1s; }
.hero-title .line:nth-child(3) .word { animation-delay: .2s; }
.hero-title .hl {
  position: relative;
  background: var(--lime); color: var(--ink);
  padding: .02em .12em 0;
  margin-top: .08em;
  rotate: -2deg;
  box-shadow: .07em .07em 0 var(--pink);
}
.hero-note {
  position: absolute; right: -1.6rem; bottom: -1.1rem;
  font-size: clamp(1rem, 1.6vw, 1.45rem); line-height: 1;
  color: var(--paper); background: var(--purple);
  padding: .3rem .55rem; rotate: -7deg;
  animation: pop .6s .9s var(--bounce) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(60%) skewY(6deg); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }

.hero-sub { font-size: clamp(1.05rem, 1.35vw, 1.28rem); max-width: 31rem; margin: 2.1rem 0 1.9rem; color: rgba(244, 240, 230, .85); }
.hero-sub em { font-style: normal; color: var(--ink); background: var(--yellow); padding: 0 .25em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-ctas .btn-lg { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 1400px) { .hero-ctas { flex-wrap: nowrap; } .hero-copy { padding-right: 0; } }
.hero-proof { display: flex; align-items: center; gap: 1rem; margin-top: 2.2rem; }
.faces { display: flex; flex-shrink: 0; }
.faces img { width: 42px; height: 42px; object-fit: cover; border: 2px solid var(--ink); border-radius: 50%; margin-left: -12px; }
.faces img:first-child { margin-left: 0; }
.hero-proof p { margin: 0; font-family: var(--f-mono); font-size: .72rem; line-height: 1.5; color: rgba(244, 240, 230, .7); }
.hero-proof strong { color: var(--lime); }

/* collage — positions are % of the box so it scales */
.collage { position: relative; height: clamp(500px, 47vw, 690px); margin-top: 1rem; }
.collage > * { position: absolute; transition: translate .6s var(--ease); }
.c-img {
  margin: 0;
  border: 4px solid var(--paper);
  background: var(--paper);
  box-shadow: 12px 12px 0 rgba(0, 0, 0, .45);
  animation: drop .9s var(--ease) both;
}
.c-img.c1 { animation: none; } /* LCP image: paint immediately. */
.c-img img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease), filter .4s; }
.c-img:hover { z-index: 20 !important; }
.c-img:hover img { scale: 1.06; }
.c1 { left: 30%; top: 3%;   width: 40%; height: 74%; rotate: -3deg; z-index: 4; animation-delay: .25s; }
.c2 { left: 0;   top: 9%;   width: 41%; height: 33%; rotate: 4deg;  z-index: 3; animation-delay: .4s; }
.c3 { right: 0;  top: 0;    width: 30%; height: 39%; rotate: 5deg;  z-index: 5; animation-delay: .5s; }
.c4 { right: 3%; bottom: 3%; width: 45%; height: 33%; rotate: -4deg; z-index: 6; animation-delay: .65s; }
.c5 { left: 3%;  bottom: 5%; width: 29%; height: 38%; rotate: -7deg; z-index: 5; animation-delay: .55s; }
.c2, .c4 { border-color: var(--ink); }
@keyframes drop { from { opacity: 0; transform: translateY(40px) scale(.92); } to { opacity: 1; transform: none; } }

.c-block { z-index: 1; animation: drop .9s .1s var(--ease) both; }
.cb-purple { left: 18%; top: 34%; width: 32%; height: 40%; background: var(--purple); rotate: 6deg; }
.cb-lime { right: 14%; top: 30%; width: 22%; height: 26%; background: var(--lime); rotate: -10deg; }

.tag {
  position: absolute; left: 12px; bottom: -14px;
  font-family: var(--f-mono); font-weight: 700; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .32rem .55rem; rotate: -3deg; white-space: nowrap;
}
.tag-pink { background: var(--pink); color: var(--paper); }
.tag-cyan { background: var(--cyan); color: var(--ink); }

.sticker { z-index: 8; animation: pop .7s 1s var(--bounce) both; }
.sticker-star {
  left: 15%; top: 50%;
  width: 138px; height: 138px;
  display: grid; place-items: center; text-align: center;
  background: var(--yellow); color: var(--ink);
  font-family: var(--f-chunk); font-size: .82rem; line-height: 1.05; text-transform: uppercase;
  clip-path: polygon(50% 0, 61% 14%, 79% 7%, 80% 26%, 98% 30%, 88% 46%, 100% 61%, 82% 69%, 84% 88%, 65% 85%, 54% 100%, 43% 86%, 24% 94%, 21% 75%, 3% 70%, 13% 54%, 2% 38%, 20% 31%, 19% 12%, 38% 15%);
  rotate: -12deg;
}
.sticker-star span { rotate: 0deg; display: block; }
.tape { z-index: 10; width: 92px; height: 26px; background: rgba(244, 240, 230, .72); mix-blend-mode: screen; }
.tape.t1 { left: 45%; top: 0; rotate: -9deg; }
.tape.t2 { right: 8%; top: -2%; rotate: 14deg; }
.c-scribble { z-index: 11; left: 2%; bottom: -3%; color: var(--lime); font-size: 1.5rem; rotate: -5deg; }



/* =========================================================
   01 — ABOUT
   ========================================================= */
.about .display-x { position: relative; }
.strike { position: relative; display: inline-block; }
.strike::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: 46%; height: .12em;
  background: var(--pink); rotate: -4deg;
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s .5s var(--ease);
}
.reveal.in .strike::after, html:not(.js) .strike::after { transform: scaleX(1); }
.about-crew { display: inline-block; font-size: clamp(1.8rem, 3vw, 2.8rem); color: var(--purple); rotate: -6deg; margin: -.4rem 0 1.5rem 2.2em; }
.lead-x { font-family: var(--f-chunk); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.12; margin: 0; }
.about-copy p { margin-bottom: .9rem; }
.about-copy em { font-style: normal; background: var(--paper); padding: 0 .2em; }

.about-visual { position: relative; height: clamp(440px, 40vw, 580px); }
.av-block { position: absolute; z-index: 0; right: -5%; top: 7%; width: 74%; height: 86%; background: var(--pink); rotate: -5deg; }
.av-dots {
  position: absolute; z-index: 0; left: -4%; top: 2%; width: 46%; height: 46%;
  background: radial-gradient(circle, var(--purple) 2.4px, transparent 2.9px) 0 0 / 15px 15px;
}
.av-label {
  position: absolute; z-index: 3; left: 4%; top: 6%;
  font-family: var(--f-mono); font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--lime); color: var(--ink); padding: .35rem .6rem; rotate: -6deg;
}
.frame { position: absolute; margin: 0; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.f-main {
  right: 0; top: 0; width: 84%; height: 80%;
  background: var(--paper); border: 2px solid var(--ink);
  padding: 10px 10px 44px; rotate: 2.5deg; z-index: 1;
  box-shadow: 12px 12px 0 var(--ink);
}
.f-main figcaption { position: absolute; right: 14px; bottom: 13px; font-family: var(--f-mono); font-size: .72rem; }
.f-small { left: 0; bottom: 0; width: 46%; height: 38%; border: 3px solid var(--ink); rotate: -7deg; box-shadow: 10px 10px 0 var(--purple); z-index: 2; }
.stamp {
  position: absolute; right: -2%; top: -4%; z-index: 3;
  width: 118px; height: 118px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-family: var(--f-chunk); font-size: .9rem; line-height: 1; text-transform: uppercase;
  color: var(--pink); border: 4px double var(--pink); background: rgba(244, 240, 230, .85);
  rotate: -14deg;
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(3rem, 7vw, 6rem); }
.stat {
  border: 3px solid var(--ink); margin-left: -3px;
  padding: clamp(1.1rem, 2vw, 1.7rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  min-height: 13rem;
  transition: rotate .4s var(--bounce), scale .4s var(--bounce);
}
.stat:first-child { margin-left: 0; }
.stat:nth-child(2) { rotate: 2deg; margin-top: -1rem; z-index: 2; }
.stat:nth-child(3) { rotate: -1.5deg; }
.stat:hover { rotate: 0deg; scale: 1.04; z-index: 3; }
.stat-num { font-family: var(--f-display); font-size: clamp(3.4rem, 7vw, 6.4rem); line-height: .85; }
.stat-num sup { font-size: .45em; top: -.9em; }
.stat-label { font-family: var(--f-mono); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1.35; }
.st-purple { background: var(--purple); color: var(--paper); }
.st-lime   { background: var(--lime); }
.st-pink   { background: var(--pink); }
.st-ink    { background: var(--ink); color: var(--lime); }

/* =========================================================
   02 — EVENTS
   ========================================================= */
.events-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.events-intro { max-width: 22rem; margin: 0; color: rgba(244, 240, 230, .8); }
.events-intro .hand { display: block; color: var(--lime); font-size: 1.35rem; rotate: -3deg; margin-top: .6rem; }

.event-row { display: flex; align-items: flex-start; }
.event-card {
  --c: var(--lime);
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0;
  margin-left: -.5rem;
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--c); color: var(--ink);
  border: 3px solid var(--ink);
  rotate: var(--rot, 0deg);
  transition: rotate .45s var(--bounce), translate .45s var(--ease), box-shadow .45s var(--ease), opacity .9s var(--ease), transform .9s var(--ease);
}
.event-card:first-child { margin-left: 0; }
.event-card:nth-child(2) { margin-top: 4.5rem; z-index: 2; }
.event-card:nth-child(3) { margin-top: 1.5rem; }
.event-card:hover { rotate: 0deg; translate: 0 -14px; z-index: 6; box-shadow: 14px 14px 0 var(--purple); }
.ev-lime { --c: var(--lime); }
.ev-pink { --c: var(--pink); }
.ev-cyan { --c: var(--cyan); }
.ev-yellow { --c: var(--yellow); }

.ev-ticket-top { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: .8rem; border-bottom: 2px dashed var(--ink); }
.ev-date { font-family: var(--f-display); text-transform: uppercase; line-height: .82; }
.ev-mon { display: block; font-size: 1.35rem; }
.ev-day { display: block; font-size: clamp(4rem, 6vw, 5.4rem); }
.ev-dow { font-family: var(--f-mono); font-size: .74rem; text-transform: uppercase; text-align: right; line-height: 1.35; }
.ev-dow b { font-size: .95rem; }
.ev-spots {
  position: absolute; top: -14px; right: 14px;
  font-family: var(--f-mono); font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  background: var(--ink); color: var(--c); padding: .3rem .55rem; rotate: 4deg;
}
.ev-img { position: relative; margin: .9rem 0; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--ink); background: var(--c); }
.ev-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25); transition: filter .6s ease, scale .7s var(--ease); }
/* colour tint as a fading overlay: blend modes can't animate, so switching them on hover snapped */
.ev-img::after { content: ""; position: absolute; inset: 0; background: var(--c); mix-blend-mode: multiply; pointer-events: none; transition: opacity .6s ease; }
.event-card:hover .ev-img img { filter: none; scale: 1.08; }
.event-card:hover .ev-img::after { opacity: 0; }
.ev-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, 3.9vw, 3.6rem); line-height: .86; text-transform: uppercase; margin: 0 0 .9rem; }
.ev-meta {
  display: flex; justify-content: space-between; gap: .5rem;
  font-family: var(--f-mono); font-weight: 700; font-size: .74rem; text-transform: uppercase;
  border-block: 2px solid var(--ink); padding: .5rem 0;
}
.ev-tags { font-family: var(--f-chunk); font-size: .8rem; text-transform: uppercase; margin: .8rem 0 .9rem; }
.ev-perf {
  height: 14px; margin: 0 -1.1rem 1rem;
  background: radial-gradient(circle at 7px 7px, var(--ink) 4.5px, transparent 5px) repeat-x;
  background-size: 18px 14px;
}

.event-more {
  flex: 0 0 12.5rem; align-self: center; min-height: 19rem;
  margin: 3rem 0 0 1.75rem; rotate: 3deg;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.4rem; border: 3px dashed rgba(244, 240, 230, .5);
  text-decoration: none; color: var(--paper);
  transition: background .35s ease, color .35s ease, border-color .35s ease, rotate .45s var(--bounce), opacity .9s var(--ease), transform .9s var(--ease);
}
.event-more:hover { rotate: 0deg; background: var(--lime); color: var(--ink); border-color: var(--lime); }
.em-num { font-family: var(--f-display); font-size: 6.5rem; line-height: .85; color: var(--lime); transition: color .3s; }
.event-more:hover .em-num { color: var(--ink); }
.em-txt { font-family: var(--f-mono); font-size: .8rem; text-transform: uppercase; }
.em-cta { font-family: var(--f-chunk); font-size: 1rem; text-transform: uppercase; margin-top: 2rem; }

/* =========================================================
   03 — INTERESTS
   ========================================================= */
.int-sticky { position: sticky; top: calc(var(--nav-h) + 2rem); }
.int-into { display: inline-block; background: var(--ink); color: var(--lime); padding: .04em .12em 0; rotate: -3deg; margin-top: .06em; }
.int-copy { max-width: 20rem; margin: 1.6rem 0 0; font-weight: 600; }
.int-picked { display: flex; align-items: center; gap: .8rem; margin-top: 2rem; }
.ip-count { font-family: var(--f-display); font-size: 4.2rem; line-height: .8; min-width: 2.2rem; }
.ip-text { font-family: var(--f-mono); font-weight: 700; font-size: .78rem; text-transform: uppercase; max-width: 12rem; line-height: 1.35; }

.int-grid { display: flex; flex-wrap: wrap; gap: .75rem; }
.int-card {
  --c: var(--pink); --fg: var(--paper); --hr: -1.5deg;
  position: relative; overflow: hidden;
  flex-grow: 1;
  height: clamp(96px, 10vw, 132px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem;
  padding: .85rem 1rem;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 0;
  text-align: left; cursor: pointer;
  transition: background .35s, color .35s, rotate .4s var(--bounce), scale .4s var(--bounce), box-shadow .35s;
}
.int-card.w-sm { flex-basis: 20%; }
.int-card.w-md { flex-basis: 28%; }
.int-card.w-lg { flex-basis: 38%; }
.int-card img {
  position: absolute; top: 0; right: 0; bottom: 0; width: 55%; height: 100%; object-fit: cover;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s var(--ease), scale .7s var(--ease);
  scale: 1.15;
}
.ic-name {
  position: relative; z-index: 2;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: .85;
  transition: letter-spacing .45s var(--ease), transform .45s var(--ease);
}
.ic-meta {
  position: relative; z-index: 2; align-self: flex-start;
  font-family: var(--f-mono); font-weight: 700; font-size: .66rem; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: .2rem .4rem; white-space: nowrap;
}
.int-card::after {
  content: "✓ in"; position: absolute; z-index: 3; left: .8rem; top: .7rem;
  font-family: var(--f-chunk); font-size: .72rem; text-transform: uppercase;
  background: var(--yellow); color: var(--ink); padding: .2rem .45rem; rotate: -6deg;
  scale: 0; transition: scale .35s var(--bounce);
}
.int-card:hover, .int-card[aria-pressed="true"] { background: var(--c); color: var(--fg); }
.int-card:hover { rotate: var(--hr); scale: 1.035; z-index: 2; box-shadow: 7px 7px 0 var(--ink); }
.int-card:hover img, .int-card[aria-pressed="true"] img { clip-path: inset(0 0 0 0); scale: 1; }
.int-card:hover .ic-name { letter-spacing: .05em; transform: skewX(-8deg); }
.int-card[aria-pressed="true"]::after { scale: 1; }
.int-card:active { scale: .97; }

/* =========================================================
   04 — COMMUNITY
   ========================================================= */
.comm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.comm-top .gt { color: var(--pink); }
.comm-intro { max-width: 24rem; color: rgba(244, 240, 230, .8); }
.comm-intro p { margin: 0 0 .8rem; }
.comm-intro .ci-push { font-family: var(--f-hand); font-size: 1.5rem; line-height: 1.3; color: var(--lime); rotate: -2deg; margin-bottom: 1.4rem; }


/* =========================================================
   05 — WHY JOIN
   ========================================================= */
.why-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.why-intro { max-width: 24rem; margin: 0; font-weight: 600; }
.why-hl { display: inline-block; background: var(--ink); color: var(--cyan); padding: .04em .12em 0; rotate: -2deg; }
@media (max-width: 991.98px) { .why-top { flex-direction: column; align-items: flex-start; gap: 1.25rem; } }
.why-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.9rem, 1.6vw, 1.4rem); }
.why-item {
  position: relative; overflow: hidden;
  border: 3px solid var(--ink);
  padding: clamp(1.3rem, 2.4vw, 2.2rem);
  min-height: clamp(19rem, 30vw, 26rem);
  transition: rotate .5s var(--bounce), opacity .9s var(--ease), transform .9s var(--ease);
}
.why-item:hover { rotate: -.6deg; }
.why-item h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.8rem, 5.2vw, 5rem); line-height: .92; text-transform: uppercase; margin: 0 0 .7rem; }
.why-item p { font-weight: 600; font-size: 1.05rem; max-width: 21rem; margin: 0; }
.why-n { font-family: var(--f-display); font-size: clamp(5.5rem, 11vw, 10.5rem); line-height: .78; display: block; }
.why-img { margin: 0; overflow: hidden; }
.why-img img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease), filter .5s; }
.why-item:hover .why-img img { scale: 1.07; }

/* 01: pink, outline number, tilted print */
.w1 { grid-column: span 7; background: var(--pink); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; }
.w1 .why-n { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.w1 .why-body { max-width: 52%; position: relative; z-index: 2; }
.w1 .why-img { position: absolute; right: 1.6rem; top: 1.6rem; width: 42%; height: 76%; border: 8px solid var(--paper); rotate: 5deg; box-shadow: 10px 10px 0 var(--ink); }

/* 02: cyan, full-bleed photo on top, number crossing the edge */
.w2 { grid-column: span 5; grid-row: span 2; background: var(--orange); color: var(--ink); padding: 0; display: flex; flex-direction: column; }
.w2 .why-img { height: 58%; flex-shrink: 0; border-bottom: 3px solid var(--ink); }
.w2 .why-n { position: absolute; right: 1rem; top: calc(58% - .62em); color: var(--ink); text-shadow: 5px 5px 0 var(--paper); }
.w2 .why-body { padding: clamp(1.3rem, 2.4vw, 2.2rem); margin-top: auto; }

/* 03: yellow, slanted photo, scribble */
.w3 { grid-column: span 7; background: var(--yellow); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; }
.w3 .why-n { color: var(--purple); }
.w3 .why-body { max-width: 50%; position: relative; z-index: 2; }
.w3 .why-img { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.w3 .scribble { display: block; width: 170px; height: 34px; margin: -.4rem 0 .6rem; fill: none; stroke: var(--pink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.2s .4s var(--ease); }
.w3.in .scribble { stroke-dashoffset: 0; }

/* 04: purple, wide, photo left */
.w4 { grid-column: span 12; background: var(--purple); color: var(--paper); display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.3rem, 3vw, 3rem); align-items: end; padding-left: 0; padding-top: 0; padding-bottom: 0; }
.w4 .why-img { grid-row: 1 / 3; height: 100%; min-height: 22rem; border-right: 3px solid var(--ink); }
.w4 .why-img img { filter: grayscale(1) contrast(1.1); }
.w4:hover .why-img img { filter: none; }
.w4 .why-n { grid-column: 2; align-self: start; padding-top: clamp(1.3rem, 2.4vw, 2.2rem); color: transparent; -webkit-text-stroke: 2px var(--lime); }
.w4 .why-body { grid-column: 2; padding-bottom: clamp(1.3rem, 2.4vw, 2.2rem); }
.w4 h3 { color: var(--lime); font-size: clamp(3.4rem, 7vw, 7rem); }
.sticker-flat {
  position: absolute; right: clamp(1rem, 3vw, 3rem); top: clamp(1rem, 3vw, 2.5rem);
  font-family: var(--f-hand); font-size: 1.35rem; background: var(--pink); color: var(--paper);
  padding: .35rem .8rem; rotate: 8deg;
}

/* =========================================================
   06 — SOCIAL PROOF
   ========================================================= */
.proof { overflow: hidden; }
.loud { display: inline-block; background: var(--lime); color: var(--ink); padding: .04em .12em 0; rotate: -3deg; animation: wobble 3.5s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { rotate: -3deg; } 50% { rotate: 2deg; } }

.chat { background: var(--ink); border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--lime); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(244, 240, 230, .12); }
.chat-head b { display: block; font-size: .95rem; }
.chat-head small { font-family: var(--f-mono); font-size: .66rem; opacity: .6; }
.chat-av { width: 40px; height: 40px; background: var(--lime); color: var(--ink); display: grid; place-items: center; font-family: var(--f-chunk); font-size: 1.2rem; }
.chat-body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem; }
.msg { margin: 0; max-width: 86%; padding: .55rem .8rem; font-size: .93rem; line-height: 1.35; background: var(--ink-2); border-left: 3px solid var(--cyan); }
.msg b { display: block; font-family: var(--f-mono); font-size: .64rem; color: var(--cyan); margin-bottom: .1rem; }
.msg:nth-child(4) b { color: var(--pink); }
.msg:nth-child(4) { border-left-color: var(--pink); }
.msg:nth-child(5) { border-left-color: var(--yellow); }
.msg:nth-child(5) b { color: var(--yellow); }
.msg.me { align-self: flex-end; background: var(--lime); color: var(--ink); font-weight: 600; border-left: 0; }
.js .chat .msg { opacity: 0; translate: 0 12px; transition: opacity .4s, translate .4s var(--ease); }
.js .chat.in .msg { opacity: 1; translate: 0 0; }
.chat.in .msg:nth-child(2) { transition-delay: .35s; }
.chat.in .msg:nth-child(3) { transition-delay: .7s; }
.chat.in .msg:nth-child(4) { transition-delay: 1.05s; }
.chat.in .msg:nth-child(5) { transition-delay: 1.4s; }
.chat.in .msg:nth-child(6) { transition-delay: 1.75s; }
.chat.in .msg:nth-child(7) { transition-delay: 2.1s; }
.msg.typing { display: flex; gap: 4px; width: fit-content; }
.msg.typing span { width: 7px; height: 7px; background: rgba(244, 240, 230, .6); animation: blink 1.2s infinite; }
.msg.typing span:nth-child(2) { animation-delay: .2s; }
.msg.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.post { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); rotate: var(--rot, 0deg); box-shadow: 12px 12px 0 rgba(11, 10, 28, .45); transition: rotate .4s var(--bounce), opacity .9s var(--ease), transform .9s var(--ease); }
.post:hover { rotate: 0deg; }
.post-head { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; font-family: var(--f-mono); font-size: .76rem; }
.post-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid var(--pink); }
.post-av img { width: 100%; height: 100%; object-fit: cover; }
.post-dots { margin-left: auto; letter-spacing: -.1em; }
.post-img { aspect-ratio: 1 / 1; overflow: hidden; border-block: 2px solid var(--ink); }
.post-sm .post-img { aspect-ratio: 4 / 3; border-top: 0; }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease); }
.post:hover .post-img img { scale: 1.05; }
.post-foot { padding: .7rem .9rem .9rem; font-size: .9rem; }
.post-acts { display: block; font-size: 1.15rem; letter-spacing: .45rem; margin-bottom: .2rem; }
.post-foot p { margin: .25rem 0 0; line-height: 1.35; }
.tagx { color: var(--purple); font-weight: 700; }

.quote-card { margin-top: 1.75rem; padding: 1.4rem 1.4rem 1.2rem; border: 3px solid var(--ink); color: var(--ink); position: relative; }
.quote-card::before { content: "“"; position: absolute; right: .8rem; top: -.4rem; font-family: var(--f-display); font-size: 6rem; line-height: 1; opacity: .25; }
.quote-card p { font-family: var(--f-chunk); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.25; margin: 0 0 .9rem; }
.quote-card span { font-family: var(--f-mono); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.q-lime { background: var(--lime); rotate: 1.5deg; }
.q-pink { background: var(--pink); rotate: -1.5deg; }

.proof-stats { border-top: 2px solid rgba(244, 240, 230, .35); }
.ps { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 2px solid rgba(244, 240, 230, .35); }
.ps-n { font-family: var(--f-display); font-size: clamp(3rem, 4.4vw, 4.2rem); line-height: .9; color: var(--lime); flex-shrink: 0; min-width: 7.5rem; }
.ps-n small { font-size: .45em; }
.ps-l { font-family: var(--f-mono); font-size: .76rem; font-weight: 700; text-transform: uppercase; line-height: 1.4; }
.ps-l i { font-weight: 400; opacity: .7; text-transform: none; }
.post-sm { margin-top: 2.2rem; }
.chat-note { display: block; font-size: 1.5rem; color: var(--yellow); rotate: -4deg; margin: 2.2rem 0 0 1rem; }
.chat-note::before { content: "↑ "; }
.band-divider { position: relative; z-index: 20; height: 0; }
.band-divider .band { position: absolute; left: 0; top: 0; transform: translateY(-50%); }

/* =========================================================
   07 — JOIN
   ========================================================= */
.join { overflow: hidden; padding-bottom: clamp(5rem, 10vw, 9rem); }
.join-bg { position: absolute; inset: 0; }
.join-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3); mix-blend-mode: multiply; opacity: .28; }
.join-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(4rem, 7.4vw, 7.2rem); line-height: .9;
  text-transform: uppercase; margin: 0; color: var(--ink);
}
.join-title span { display: block; }
.join-title .jt-small { font-size: .44em; line-height: 1; margin-bottom: .12em; color: var(--ink); }
.join-title .jt-big { color: var(--paper); text-shadow: .045em .045em 0 var(--ink); }
.join-hang { font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--yellow); rotate: -4deg; display: inline-block; margin: 1.2rem 0 2rem; text-shadow: 3px 3px 0 var(--ink); }
/* intro → form → details on mobile; form spans the right column on desktop */
.join-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
.join-grid > * { min-width: 0; }
.join-grid .join-hang { margin-bottom: 0; }
@media (min-width: 992px) {
  .join-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "intro form" "details form"; column-gap: 3rem; row-gap: 2rem; align-items: start; }
  .jg-intro { grid-area: intro; } .jg-form { grid-area: form; } .jg-details { grid-area: details; }
}
@media (max-width: 991.98px) { .jg-details { margin-top: 1.5rem; } }
.join-list { list-style: none; padding: 0; margin: 0; max-width: 30rem; font-weight: 700; }
.join-list li { padding: .85rem 0; border-top: 2px solid var(--ink); display: flex; align-items: baseline; gap: .8rem; }
.join-list li:last-child { border-bottom: 2px solid var(--ink); }
.join-list b { font-family: var(--f-mono); font-size: .72rem; background: var(--ink); color: var(--pink); padding: .12rem .4rem; }

.join-card {
  position: relative;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 16px 16px 0 var(--ink);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  rotate: 1.2deg;
  transition: rotate .5s var(--bounce), opacity .9s var(--ease), transform .9s var(--ease);
}
.join-card:focus-within { rotate: 0deg; }
.join-card::before {
  content: "✦ invite only"; position: absolute; top: -22px; left: -18px; z-index: 2;
  font-family: var(--f-chunk); font-size: .9rem; text-transform: uppercase;
  background: var(--yellow); color: var(--ink); border: 2px solid var(--ink);
  padding: .55rem .8rem; rotate: -12deg;
}
.jc-head {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 3px solid var(--ink); padding-bottom: .8rem; margin-bottom: 1.4rem;
}
.jc-head span:first-child { font-weight: 700; }
.jc-fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem 1.4rem; }
.field { grid-column: span 3; min-width: 0; }
.field.f-full { grid-column: span 6; }
.field.f-third { grid-column: span 2; }
.field.f-twothird { grid-column: span 4; }
.field label, .field legend {
  display: block; float: none; width: auto;
  font-family: var(--f-mono); font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: .35rem; padding: 0;
}
.field label i, .field legend i { font-style: normal; background: var(--ink); color: var(--paper); padding: 0 .3rem; margin-right: .35rem; }
.field legend small { font-weight: 400; text-transform: none; opacity: .65; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.field input, .field select {
  width: 100%; min-height: 48px;
  border: 0; border-bottom: 3px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  font-family: var(--f-body); font-size: 1.15rem; font-weight: 600;
  padding: .45rem .1rem; outline: none;
  transition: border-color .25s, background .25s;
  -webkit-appearance: none; appearance: none;
}
.field select {
  cursor: pointer; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230b0a1c' stroke-width='2.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .3rem center;
}
.field input::placeholder { color: rgba(11, 10, 28, .32); font-weight: 400; }
.field input:focus, .field select:focus { border-color: var(--purple); background-color: rgba(107, 43, 255, .07); }
.field input.err { border-color: var(--pink); background-color: rgba(255, 46, 136, .08); }
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: inline-flex; align-items: center; min-height: 42px;
  padding: .5rem 1rem;
  border: 2px solid var(--ink); border-radius: 999px;
  font-family: var(--f-chunk); font-size: .78rem; text-transform: uppercase;
  transition: background .3s ease, color .3s ease, rotate .3s var(--bounce);
  user-select: none;
}
.pill:hover span { background: var(--yellow); }
.pill input:checked + span { background: var(--ink); color: var(--lime); rotate: -3deg; }
.pill input:checked + span::before { content: "✓"; margin-right: .4rem; }
.pill:nth-child(even) input:checked + span { rotate: 3deg; }
.pill input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px; }

.join-card .btn-xl { margin-top: 1.8rem; }
.jc-fine { font-family: var(--f-mono); font-size: .7rem; text-align: center; margin: .9rem 0 0; opacity: .7; }
.jc-success {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 2rem; background: var(--lime); color: var(--ink);
  animation: pop .6s var(--bounce) both;
}
.jc-success[hidden] { display: none; }
.jc-success .stamp { position: static; width: 170px; height: 170px; font-size: 1.6rem; background: transparent; margin-bottom: 1.5rem; }
.jc-success h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: .95; text-transform: uppercase; }
.jc-success p { font-family: var(--f-mono); font-size: .85rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--ink); color: var(--paper); padding-bottom: 2rem; }
.footer-marquee {
  background: var(--lime); color: var(--ink);
  border-block: 3px solid var(--ink);
  padding: .9rem 0;
  font-family: var(--f-display); font-size: clamp(2rem, 4.5vw, 3.6rem); text-transform: uppercase; line-height: 1;
}
.footer-marquee i { color: var(--pink); }
.footer-main { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); }
.footer-brand { position: relative; display: flex; justify-content: center; }
.footer-brand img { width: 100%; max-width: 420px; height: auto; rotate: -5deg; transition: rotate .6s var(--bounce), scale .6s var(--bounce); }
.footer-brand img:hover { rotate: 3deg; scale: 1.03; }
.fb-sticker { position: absolute; right: 8%; bottom: 6%; background: var(--yellow); color: var(--ink); font-size: 1.3rem; padding: .3rem .8rem; rotate: 10deg; }

.footer-big {
  display: block; width: fit-content; text-decoration: none; color: var(--paper);
  font-family: var(--f-display); font-size: clamp(4.2rem, 9.5vw, 10rem); line-height: .86; text-transform: uppercase;
  transition: color .3s;
}
.footer-big span { color: transparent; -webkit-text-stroke: 2px var(--lime); transition: color .3s; }
.footer-big b { display: inline-block; font-weight: 400; color: var(--pink); transition: rotate .45s var(--bounce), color .3s ease; }
.footer-big:hover { color: var(--lime); }
.footer-big:hover span { color: var(--lime); }
.footer-big:hover b { rotate: 45deg; }


.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.8rem; }
.footer-links a { font-family: var(--f-mono); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: rgba(244, 240, 230, .75); padding: .3rem 0; transition: color .25s; }
.footer-links a:hover { color: var(--lime); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 240, 230, .15);
  font-family: var(--f-mono); font-size: .72rem;
}
.footer-bottom a { text-decoration: none; transition: color .25s ease; }
.footer-bottom a:hover { color: var(--lime); }

/* =========================================================
   SECTION SEPARATORS — each seam gets its own graphic edge.
   .sep background = next section colour; ::before = previous colour, cut to a shape.
   ========================================================= */
.sep { position: relative; z-index: 2; height: 44px; margin: -1px 0; }
.sep::before { content: ""; position: absolute; inset: 0; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: left top; mask-position: left top; }

/* yellow → ink : torn paper */
.sep-torn { background: var(--ink); }
.sep-torn::before {
  background: var(--yellow);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V20L191 31 183 19 171 36 160 23 149 33 139 17 127 30 115 21 104 38 93 24 81 32 70 18 58 34 46 22 35 31 23 19 11 33 0 22Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V20L191 31 183 19 171 36 160 23 149 33 139 17 127 30 115 21 104 38 93 24 81 32 70 18 58 34 46 22 35 31 23 19 11 33 0 22Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 340px 100%; mask-size: 340px 100%;
}
.sep-torn::after { /* paper fibre shadow under the tear */
  content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 30px; z-index: -1;
  background: rgba(0, 0, 0, .35); filter: blur(6px);
}

/* ink → lime : ticket scallops */
.sep-scallop { background: var(--ink); height: 36px; }
.sep-scallop::before {
  background: var(--lime);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M0 36V22A20 20 0 0 1 40 22V36Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M0 36V22A20 20 0 0 1 40 22V36Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 40px 36px; mask-size: 40px 36px;
}

/* lime → ink : film strip (fits the photo wall below) */
.sep-film {
  height: 64px;
  border-top: 4px solid var(--ink);
  background: var(--ink);
}
.sep-film::before {
  inset: 10px 0 auto; height: 14px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 18px, transparent 18px 34px);
  -webkit-mask: none; mask: none; border-radius: 3px;
}
.sep-film::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 14px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 18px, transparent 18px 34px);
}

/* ink → cyan : pinking-shear zigzag with a pink offset line */
.sep-zig { background: var(--cyan); height: 42px; }
.sep-zig::before, .sep-zig::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 0H40V8L20 30 0 8Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 0H40V8L20 30 0 8Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 40px 30px; mask-size: 40px 30px;
}
.sep-zig::before { background: var(--ink); bottom: auto; height: 30px; z-index: 1; }
.sep-zig::after {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 30px;
  background: var(--pink); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

/* cyan → purple : racing checker strip */
.sep-checker {
  height: 52px;
  border-block: 3px solid var(--ink);
  background:
    repeating-conic-gradient(var(--ink) 0 25%, var(--paper) 0 50%) 0 0 / 46px 46px;
}

@media (max-width: 767.98px) {
  .sep-torn::before { -webkit-mask-size: 220px 100%; mask-size: 220px 100%; }
  .sep-checker { height: 40px; background-size: 34px 34px; }
}

/* =========================================================
   CURSOR (fine pointers only)
   ========================================================= */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: grid; place-items: center;
    position: fixed; left: 0; top: 0; z-index: 9999;
    width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; background: var(--lime);
    pointer-events: none;
    opacity: 0;
    transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .3s, background .3s;
  }
  .cursor.on { opacity: 1; }
  .cursor.link { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: rgba(198, 255, 61, .35); }
  .cursor.label {
    width: 88px; height: 88px; margin: -44px 0 0 -44px;
    background: rgba(11, 10, 28, .45);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1.5px var(--lime);
  }
  .cursor-label { font-family: var(--f-mono); font-weight: 700; font-size: .66rem; text-transform: uppercase; color: var(--lime); opacity: 0; transition: opacity .2s; text-align: center; line-height: 1.1; }
  .cursor.label .cursor-label { opacity: 1; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .event-more { flex-basis: 11rem; }
  .ev-title { font-size: clamp(2.2rem, 3.6vw, 3rem); }
}

@media (max-width: 991.98px) {
  .hero-copy { padding-right: 0; }
  .collage { margin-top: 3rem; height: clamp(440px, 80vw, 600px); }
  .event-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; }
  .event-card, .event-card:nth-child(2), .event-card:nth-child(3) { margin: 0; }
  .event-card:nth-child(2) { margin-top: 2.5rem; }
  .event-more { margin: 2.5rem 0 0; min-height: 14rem; }
  .int-sticky { position: static; }
  .int-picked { margin-top: 1.2rem; }
  .w1, .w3 { grid-column: span 12; }
  .w2 { grid-column: span 12; grid-row: auto; min-height: 34rem; }
  .w4 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat:nth-child(3) { margin-left: 0; margin-top: -3px; }
  .stat:nth-child(4) { margin-top: -3px; }
  .stat:nth-child(2) { margin-top: -.5rem; }
  .comm-top, .events-top { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

@media (max-width: 767.98px) {
  :root { --nav-h: 72px; }
  .sec-side { display: none; }
  .hero-title { font-size: clamp(4.2rem, 24vw, 6.4rem); }
  .hero-title .ht-small { font-size: .5em; }
  .hero-note { top: auto; bottom: -1.5rem; right: -.4rem; }
  .hero-sub { margin-top: 2.6rem; }
  .why-n { margin-bottom: .6rem; }
  .hero-ctas .btn-z { flex: 1 1 100%; justify-content: center; font-size: .86rem; gap: .5rem; padding-left: .9rem; padding-right: .9rem; }

  /* mobile collage: 4 pieces, tighter, intentional */
  .collage { height: 112vw; max-height: 520px; margin-top: 2.5rem; }
  .c1 { left: 24%; top: 6%; width: 52%; height: 66%; }
  .c2 { left: -2%; top: 0; width: 46%; height: 30%; }
  .c3 { right: -2%; top: 2%; width: 34%; height: 34%; }
  .c4 { right: 0; bottom: 4%; width: 60%; height: 30%; }
  .cb-purple { left: 4%; top: 38%; width: 34%; height: 34%; }
  .cb-lime { right: 2%; top: 38%; width: 26%; height: 22%; }
  .sticker-star { left: 0; top: 52%; width: 104px; height: 104px; font-size: .66rem; }
  .tape.t1 { left: 42%; top: 3%; width: 70px; }
  .tape.t2 { display: none; }
  .c-scribble { left: 4%; bottom: 0; font-size: 1.15rem; }

  .about-crew { margin-left: 1.2em; }
  .about-visual { height: 118vw; max-height: 520px; margin-top: 1rem; }
  .stamp { width: 100px; height: 100px; font-size: .72rem; }

  /* events: a slightly messy pile of tickets */
  .event-row { grid-template-columns: 1fr; gap: 0; }
  .event-card, .event-card:nth-child(2) { margin: 0 .5rem 2.25rem; }
  .event-card:nth-child(2) { --rot: 1.5deg !important; }
  .event-card:hover { translate: 0 -6px; }
  .event-more { margin: .5rem 0 0; min-height: 0; flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .em-num { font-size: 4rem; }
  .em-cta { margin: 0; width: 100%; }

  .int-grid { gap: .55rem; }
  .int-card { height: 84px; padding: .65rem .8rem; }
  .int-card.w-sm, .int-card.w-md { flex-basis: 40%; }
  .int-card.w-lg { flex-basis: 100%; }
  .ic-name { font-size: 2rem; }
  .int-card:hover { rotate: 0deg; scale: 1; box-shadow: none; }


  .why-item { min-height: 0; }
  .w1, .w3 { padding-bottom: 0; }
  .w1 .why-body, .w3 .why-body { max-width: none; }
  .w1 .why-img { position: relative; right: auto; top: auto; width: 82%; height: 15rem; margin: 1.5rem 0 -1rem auto; }
  .w2 { min-height: 0; }
  .w2 .why-img { height: 17rem; }
  .w2 .why-n { top: calc(17rem - .62em); }
  .w3 .why-img { position: relative; width: auto; height: 14rem; margin: 1.5rem calc(-1 * clamp(1.3rem, 2.4vw, 2.2rem)) 0; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
  .w4 { grid-template-columns: 1fr; padding: 0; }
  .w4 .why-img { grid-row: auto; min-height: 15rem; height: 15rem; border-right: 0; border-bottom: 3px solid var(--ink); }
  .w4 .why-n, .w4 .why-body { grid-column: 1; padding-left: 1.3rem; padding-right: 1.3rem; }
  .w4 .why-n { padding-top: 0; }
  .sticker-flat { top: 12.5rem; }

  .chat { box-shadow: 8px 8px 0 var(--lime); }
  .ps-n { min-width: 6rem; }

  .join-card { rotate: 0deg; box-shadow: 9px 9px 0 var(--ink); }
  .field { grid-column: span 6; }
  .join-card::before { left: auto; right: -8px; top: -20px; rotate: 10deg; }

  .footer-big { font-size: 21vw; }
  .footer-brand img { max-width: 240px; }
  .fb-sticker { right: 12%; font-size: 1rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 399.98px) {
  .hero-title { font-size: 4rem; }
  .stat-num { font-size: 3rem; }
  .ev-day { font-size: 3.8rem; }
}

/* motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none !important; }
}
.footer-links a.fl-mail { text-transform: none; color: var(--lime); }

/* footer socials: chunky colour stickers */
.footer-socials { margin-top: 2.4rem; }
.fs-handle { margin: 0 0 1rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.fs-handle span { font-family: var(--f-hand); font-size: 1.3rem; color: rgba(244, 240, 230, .7); }
.fs-handle b { font-family: var(--f-chunk); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--lime); }
.soc-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.soc {
  --bg: var(--lime);
  display: grid; place-items: center;
  width: 60px; height: 60px;
  background: var(--bg); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--paper);
  text-decoration: none;
  transition: rotate .35s var(--bounce), translate .3s var(--ease), box-shadow .3s var(--ease), color .3s ease, background .3s ease;
}
.soc:nth-child(odd) { rotate: -4deg; }
.soc:nth-child(even) { rotate: 3deg; }
.soc svg { width: 26px; height: 26px; fill: currentColor; }
.soc:hover { rotate: 0deg; translate: -2px -4px; box-shadow: 6px 8px 0 var(--paper); color: var(--ink); }
.soc-instagram { --bg: var(--pink); }
.soc-youtube   { --bg: var(--orange); }
.soc-snapchat  { --bg: var(--yellow); }
.soc-discord   { --bg: var(--cyan); }
.soc-strava    { --bg: var(--orange); }
.soc-x         { --bg: var(--paper); }
.soc-facebook  { --bg: var(--purple); color: var(--paper); }
.soc-facebook:hover { color: var(--paper); }
.soc-linkedin  { --bg: var(--lime); }

/* newsletter: "the weekly drop" ticket */
.drop {
  display: flex; margin-top: 2.6rem; max-width: 36rem;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--pink);
  rotate: -1deg;
}
.drop-stub {
  flex: 0 0 5.5rem; display: grid; place-items: center;
  background: var(--ink); color: var(--yellow);
  border-right: 3px dashed var(--yellow);
  font-family: var(--f-display); font-size: 1.15rem; line-height: .95; text-transform: uppercase; text-align: center;
}
.drop-stub span { rotate: -90deg; white-space: nowrap; }
.drop-body { flex: 1; min-width: 0; padding: 1.1rem 1.2rem 1.2rem; }
.drop-label { display: block; font-weight: 700; font-size: .95rem; line-height: 1.3; margin-bottom: .8rem; }
.drop-row { display: flex; align-items: center; gap: .9rem; }
.drop-row input {
  flex: 1; min-width: 0; min-height: 48px; padding: .3rem .1rem;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 3px solid var(--ink); border-radius: 0;
  font-family: var(--f-hand); font-size: 1.3rem; outline: none;
}
.drop-row input::placeholder { color: rgba(11, 10, 28, .4); }
.drop-row input.err { border-color: var(--pink); }
.drop-btn {
  flex: 0 0 auto; width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pink); color: var(--paper);
  border: 3px solid var(--ink);
  font-family: var(--f-chunk); font-size: .72rem; line-height: 1.05; text-transform: uppercase;
  cursor: pointer; rotate: 10deg;
  transition: rotate .4s var(--bounce), background .3s ease, color .3s ease, scale .3s var(--bounce);
}
.drop-btn:hover { rotate: -8deg; scale: 1.08; background: var(--ink); color: var(--lime); }
.nl-ok { margin: .8rem 0 0; font-family: var(--f-mono); font-weight: 700; font-size: .8rem; }
.nl-err { margin: .6rem 0 0; font-family: var(--f-mono); font-size: .75rem; color: #c8102e; }

/* reCAPTCHA: badge hidden, the required notice sits under each form instead. */
.grecaptcha-badge { visibility: hidden !important; }
.captcha-note { font-family: var(--f-mono); font-size: .7rem; text-align: center; margin: .5rem 0 0; opacity: .7; }
.captcha-note a { color: inherit; text-decoration: underline; }
.captcha-note.nl-note { text-align: left; margin-top: .7rem; }
@media (max-width: 767.98px) {
  .drop { rotate: 0deg; box-shadow: 6px 6px 0 var(--pink); }
  .drop-stub { flex-basis: 3.4rem; font-size: .95rem; }
  .soc { width: 52px; height: 52px; }
}

.proof-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.proof-intro { max-width: 24rem; margin: 0; color: rgba(244, 240, 230, .85); }
@media (max-width: 991.98px) { .proof-top { flex-direction: column; align-items: flex-start; gap: 1.25rem; } }

/* footer v3 */
.footer-big { white-space: nowrap; font-size: clamp(4rem, 14vw, 15rem); margin: clamp(3rem, 6vw, 5rem) 0 0; }
.footer-main { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem); }
.footer-main .footer-socials { margin-top: 0; }
.footer-bottom .footer-links { margin: 0; gap: .4rem 1.5rem; }
.footer-copy { margin: 1rem 0 0; font-family: var(--f-mono); font-size: .7rem; color: rgba(244, 240, 230, .5); }
.footer-marquee .marquee-track { align-items: center; }
.footer-marquee i { display: inline-flex; align-items: center; font-family: var(--f-body); font-size: .55em; line-height: 1; height: 1em; }
@media (max-width: 767.98px) { .footer-big { white-space: normal; font-size: 20vw; } }

/* footer v4 */
.footer-brand img { max-width: 336px; }
.footer-big b { color: var(--lime); }
.footer-big:hover b { color: var(--paper); }
.footer-nav { display: flex; justify-content: center; padding-bottom: 1.6rem; }
.footer-nav .footer-links { margin: 0; justify-content: center; gap: .5rem 2rem; }
.footer-bottom { margin-top: 0; }
@media (max-width: 767.98px) { .footer-nav { justify-content: flex-start; } .footer-nav .footer-links { justify-content: flex-start; gap: .4rem 1.4rem; } .footer-brand img { max-width: 200px; } }

/* join: perks + polaroids under the steps */
.join-perks { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.6rem; max-width: 34rem; }
.jp-photos { position: relative; flex: 0 0 44%; height: 210px; }
.jp-pol { position: absolute; margin: 0; width: 64%; background: var(--paper); padding: 6px 6px 26px; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: rotate .4s var(--bounce); }
.jp-pol img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.jp-pol figcaption { position: absolute; left: 8px; bottom: 5px; font-family: var(--f-hand); font-size: .8rem; color: var(--ink); }
.jp-pol.p1 { left: 0; top: 0; rotate: -8deg; z-index: 1; }
.jp-pol.p2 { right: 0; top: 34px; rotate: 6deg; z-index: 2; }
.jp-pol:hover { rotate: 0deg; z-index: 3; }
.jp-note { position: absolute; left: 2px; bottom: -40px; z-index: 3; font-size: 1.05rem; line-height: 1.05; color: var(--yellow); rotate: -6deg; text-shadow: 2px 2px 0 var(--ink); }
.jp-head { display: inline-block; font-family: var(--f-chunk); font-size: .8rem; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: .25rem .5rem; rotate: -3deg; margin-bottom: .8rem; }
@media (max-width: 575.98px) { .join-perks { flex-direction: column; align-items: stretch; } .jp-photos { flex-basis: auto; height: 250px; max-width: 280px; margin-bottom: 2.4rem; } .jp-note { bottom: -38px; } }

.comm-top .gt { display: inline-block; background: var(--pink); color: var(--ink); padding: .04em .12em 0; rotate: -3deg; }
@media (min-width: 992px) { .comm-intro { max-width: 34rem; } .comm-intro .ci-push { font-size: 1.4rem; } }

/* join: member pass */
.pass {
  position: relative; flex: 1; min-width: 0;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  rotate: 3deg; transform-origin: 50% 0;
  animation: pass-swing 5s ease-in-out infinite;
}
@keyframes pass-swing { 0%, 100% { rotate: 3deg; } 50% { rotate: -1.5deg; } }
.pass::before { /* lanyard strap */
  content: ""; position: absolute; left: 50%; top: -46px; width: 22px; height: 52px; translate: -50% 0;
  background: repeating-linear-gradient(180deg, var(--purple) 0 8px, var(--pink) 8px 16px);
  border: 2px solid var(--ink); z-index: -1;
}
.pass-hole { position: absolute; left: 50%; top: 8px; width: 34px; height: 9px; translate: -50% 0; background: var(--pink); border: 2px solid var(--ink); border-radius: 9px; }
.pass-top {
  display: flex; justify-content: space-between; align-items: flex-end; gap: .5rem;
  padding: 1.6rem 1rem .8rem;
  background: linear-gradient(115deg, var(--lime), var(--cyan) 35%, var(--pink) 65%, var(--yellow));
  border-bottom: 3px solid var(--ink);
}
.pass-kicker { font-family: var(--f-mono); font-weight: 700; font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; }
.pass-title { font-family: var(--f-display); font-size: 2rem; line-height: .85; text-transform: uppercase; text-align: right; }
.pass-perks { list-style: none; margin: 0; padding: .7rem 1rem .4rem; }
.pass-perks li { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .92rem; padding: .32rem 0; }
.pk { flex: 0 0 auto; font-family: var(--f-mono); font-size: .62rem; padding: .18rem .3rem; border: 2px solid var(--ink); }
.pk-lime { background: var(--lime); } .pk-pink { background: var(--pink); } .pk-cyan { background: var(--cyan); } .pk-yellow { background: var(--yellow); }
.pass-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem 1rem .8rem; border-top: 2px dashed var(--ink); }
.pass-code { flex: 0 0 46%; height: 26px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 8px, var(--ink) 8px 9px, transparent 9px 12px); }
.pass-no { font-family: var(--f-mono); font-size: .6rem; font-weight: 700; text-transform: uppercase; text-align: right; }
.join-perks { margin-top: 4rem; }
@media (prefers-reduced-motion: reduce) { .pass { animation: none; } }

.band .marquee-track { align-items: center; }
.band i { display: inline-flex; align-items: center; font-family: var(--f-body); font-size: .55em; line-height: 1; height: 1em; }

/* =========================================================
   03 — VIDEO REELS
   ========================================================= */
.events { padding-bottom: clamp(3rem, 6vw, 5rem); }
.reels { padding-top: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.reels-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reels-hl { display: inline-block; background: var(--pink); color: var(--ink); padding: .04em .12em 0; rotate: -2deg; }
.reels-intro { max-width: 24rem; margin: 0; color: rgba(244, 240, 230, .82); }
.reels-intro .hand { display: block; color: var(--lime); font-size: 1.35rem; rotate: -3deg; margin-top: .6rem; }
@media (max-width: 991.98px) { .reels-top { flex-direction: column; align-items: flex-start; gap: 1.25rem; } }

.reels-rail { display: flex; overflow: hidden; padding: 1.5rem 0 2.5rem; }
.reels-track { display: flex; flex-shrink: 0; gap: 1.4rem; padding-right: 1.4rem; animation: marquee 60s linear infinite; }
.reels-rail:hover .reels-track, .reels-rail.is-playing .reels-track { animation-play-state: paused; }

.reel {
  --c: var(--lime);
  position: relative; flex: 0 0 auto;
  width: clamp(200px, 17vw, 260px); aspect-ratio: 9 / 16;
  background: var(--ink-2); overflow: hidden; cursor: pointer;
  border: 3px solid var(--c); box-shadow: 8px 8px 0 var(--c);
  transition: rotate .4s var(--bounce), translate .4s var(--ease);
}
.reel:nth-child(odd) { rotate: -2deg; }
.reel:nth-child(even) { rotate: 2deg; translate: 0 18px; }
.reel:hover { rotate: 0deg; translate: 0 -8px; z-index: 2; }
.rc-lime { --c: var(--lime); } .rc-pink { --c: var(--pink); } .rc-cyan { --c: var(--cyan); }
.rc-yellow { --c: var(--yellow); } .rc-purple { --c: var(--purple); } .rc-orange { --c: var(--orange); }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,28,.45) 0, transparent 22%, transparent 55%, rgba(11,10,28,.9) 100%); pointer-events: none; }
.reel-bar { position: absolute; left: 10px; right: 10px; top: 10px; height: 3px; background: rgba(244,240,230,.3); z-index: 2; }
.reel-bar i { display: block; height: 100%; width: 0; background: var(--paper); }
.reel:hover .reel-bar i, .reel.playing .reel-bar i { width: 100%; transition: width 8s linear; }
.reel-time { position: absolute; right: 10px; top: 20px; z-index: 2; font-family: var(--f-mono); font-size: .62rem; font-weight: 700; color: var(--paper); }
.reel-play {
  position: absolute; left: 50%; top: 46%; z-index: 3; translate: -50% -50%;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 4px;
  background: var(--c); color: var(--ink); border: 3px solid var(--ink);
  font-size: 1.3rem; cursor: pointer;
  transition: scale .35s var(--bounce), opacity .25s;
}
.reel:hover .reel-play { scale: 1.12; }
.reel.playing .reel-play { opacity: 0; }
.reel-info { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; }
.reel-info b { display: inline-block; font-family: var(--f-mono); font-size: .7rem; background: var(--c); color: var(--ink); padding: .15rem .4rem; margin-bottom: .4rem; }
.reel-info p { margin: 0; font-family: var(--f-hand); font-size: 1.05rem; line-height: 1.2; color: var(--paper); }
@media (max-width: 767.98px) { .reel { width: 62vw; max-width: 240px; } .reels-track { animation-duration: 45s; } }
@media (prefers-reduced-motion: reduce) { .reels-rail { overflow-x: auto; } }

/* reels on orange */
.sec-orange { background: var(--lilac); color: var(--paper); }
.reels .reels-hl { background: var(--ink); color: var(--lime); }
.reels .reels-intro { color: rgba(244, 240, 230, .85); font-weight: 400; }
.reels .reels-intro .hand { color: var(--lime); }
.reels .sec-num { background: var(--lime); color: var(--ink); }
.reels .reels-hl { background: var(--lime); color: var(--ink); }
.reels .reel { box-shadow: 8px 8px 0 var(--ink); }
.sep-scallop { background: var(--lilac); }

/* ink → orange : paint drips */
.sep-drip { background: var(--lilac); height: 70px; }
.sep-drip::before {
  background: var(--ink);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V14C232 14 230 22 230 34C230 44 222 44 222 34V24C222 16 214 16 210 18C204 20 204 30 198 30C192 30 194 16 184 16C176 16 176 52 168 52C160 52 162 18 152 16C144 14 140 24 132 24C124 24 126 14 116 14C108 14 108 40 100 40C92 40 94 16 84 16C76 16 74 62 66 62C58 62 60 18 50 16C42 14 40 26 32 26C24 26 26 14 16 14C8 14 8 30 4 30C0 30 0 14 0 14Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V14C232 14 230 22 230 34C230 44 222 44 222 34V24C222 16 214 16 210 18C204 20 204 30 198 30C192 30 194 16 184 16C176 16 176 52 168 52C160 52 162 18 152 16C144 14 140 24 132 24C124 24 126 14 116 14C108 14 108 40 100 40C92 40 94 16 84 16C76 16 74 62 66 62C58 62 60 18 50 16C42 14 40 26 32 26C24 26 26 14 16 14C8 14 8 30 4 30C0 30 0 14 0 14Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 480px 100%; mask-size: 480px 100%;
}
@media (max-width: 767.98px) { .sep-drip::before { -webkit-mask-size: 320px 100%; mask-size: 320px 100%; } }


/* events on wine, reels on ink */
:root { --wine: #3a1430; }
.events { background: var(--wine); }
.sep-torn { background: var(--wine); }
.sec-orange { background: var(--ink); }
.sep-drip { background: var(--ink); }
.sep-drip::before { background: var(--wine); }
.sep-scallop { background: var(--ink); }


/* events on deep black */
.events { background: #050508; color: var(--paper); }
.sep-torn { background: #050508; }
.sep-drip::before { background: #050508; }

/* ---------- mobile refinements ---------- */
.deck-nav { display: none; }
@media (max-width: 767.98px) {
  /* socials on one line */
  .soc-row { flex-wrap: nowrap; gap: .45rem; }
  .soc { flex: 1 1 0; width: auto; height: auto; max-width: 42px; aspect-ratio: 1; border-width: 2px; box-shadow: 3px 3px 0 var(--paper); }
  .soc svg { width: 19px; height: 19px; }
  .fs-handle span { font-size: 1.05rem; }

  /* tighter interest pills */
  .pills { gap: .4rem; }
  .pill span { min-height: 36px; padding: .3rem .75rem; font-size: .7rem; }
  .pill input:checked + span, .pill:nth-child(even) input:checked + span { rotate: 0deg; }

  /* member pass: no polaroids, narrower card */
  .jp-photos { display: none; }
  .join-perks { justify-content: center; margin-top: 3.5rem; }
  .pass { flex: 0 1 auto; width: 86%; max-width: 310px; }
  .pass-title { font-size: 1.6rem; }
  .pass-perks li { font-size: .85rem; }

  /* events: stacked card deck */
  .event-row.deck { display: grid; grid-template-columns: 1fr; gap: 0; }
  .event-row.deck .event-card {
    grid-area: 1 / 1; margin: 0 1.6rem 0 .3rem !important;
    transition: transform .55s var(--ease), opacity .45s, rotate .55s var(--ease);
  }
  .event-row.deck .event-card[data-pos="0"] { z-index: 3; transform: none; opacity: 1; rotate: -1.5deg; }
  .event-row.deck .event-card[data-pos="1"] { z-index: 2; transform: translate(12px, 14px) scale(.96); opacity: .95; rotate: 3deg; pointer-events: none; }
  .event-row.deck .event-card[data-pos="2"] { z-index: 1; transform: translate(22px, 28px) scale(.92); opacity: .85; rotate: 6deg; pointer-events: none; }
  .event-row.deck .event-card:hover { translate: none; }
  .event-row.deck .deck-nav { grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 3rem; }
  .event-row.deck .event-more { grid-row: 3; margin-top: 1.5rem; }
  .deck-btn {
    width: 54px; height: 54px; display: grid; place-items: center;
    background: var(--lime); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--pink);
    font-family: var(--f-chunk); font-size: 1.3rem; cursor: pointer;
  }
  .deck-btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--pink); }
  .deck-count { font-family: var(--f-mono); font-weight: 700; font-size: .85rem; color: var(--paper); min-width: 3.5rem; text-align: center; }
}
@media (max-width: 767.98px) { .join-perks .pass { align-self: center; margin-left: auto; margin-right: auto; } }

/* mobile menu fixes */
.mobile-menu .offcanvas-header { justify-content: space-between; }
.mobile-menu .offcanvas-body { padding: 0 16px 2rem; overflow-x: hidden; }
.mm-links a { font-size: clamp(2.6rem, 12vw, 4.2rem); }
.mobile-menu .btn-z { width: calc(100% - 4px) !important; }
.mm-socials { margin-top: 1.6rem; flex-wrap: wrap; }
.mm-socials .soc { box-shadow: 3px 3px 0 var(--ink); border-color: var(--ink); }

/* interests title on one line (mobile) */
@media (max-width: 767.98px) {
  .interests .display-x { font-size: clamp(2.2rem, 10.4vw, 3rem); white-space: nowrap; }
  .interests .display-x br { display: none; }
  .interests .display-x .int-into { margin-top: 0; }
  .int-copy { margin-top: 1rem; }
  .int-picked { margin-top: .8rem; }
  .ip-count { font-size: 3rem; }
}

/* no sideways scroll on mobile */
html { overflow-x: hidden; }
.band-divider, .about, .community, .footer { overflow-x: clip; }
@media (max-width: 991.98px) { .footer-main { --bs-gutter-x: 1.5rem; } }

/* =========================================================
   WORDPRESS THEME ADDITIONS
   ========================================================= */
.zc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ev-title a, .ev-img { color: inherit; text-decoration: none; display: block; }
.ev-price { display: inline-block; margin-right: .6rem; padding: .12rem .45rem; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: .68rem; vertical-align: 1px; }
.ev-price.is-paid { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.btn-z.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-z.is-disabled:hover { translate: none; }
.event-card.is-past { filter: grayscale(.85); }
.events-empty { padding: 3rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.events-empty .hand { font-size: 1.6rem; color: var(--lime); margin: 0; }
.jc-error { margin: .9rem 0 0; padding: .6rem .8rem; background: var(--ink); color: var(--pink); font-family: var(--f-mono); font-size: .78rem; }
.jc-event { margin: -.4rem 0 1.2rem; padding: .55rem .8rem; background: var(--lime); border: 2px solid var(--ink); font-weight: 600; font-size: .92rem; }
.join-card.is-sending button[type=submit] { opacity: .6; pointer-events: none; }

/* page hero (inner pages): colour glow melting into ink + ghost word + ticker band on the seam */
.page-hero {
  --c: var(--lime);
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(5rem, 9vw, 7.5rem);
  background:
    radial-gradient(55% 75% at 88% 18%, color-mix(in srgb, var(--c) 42%, transparent), transparent 70%),
    radial-gradient(45% 65% at 8% 105%, color-mix(in srgb, var(--purple) 45%, transparent), transparent 70%),
    var(--ink);
}
/* dotted halftone that fades out toward the content */
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--c) 55%, transparent) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 90% at 90% 10%, #000, transparent 75%);
  mask-image: radial-gradient(70% 90% at 90% 10%, #000, transparent 75%);
  opacity: .5;
}
/* soft blob that drifts */
.page-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: clamp(260px, 38vw, 560px); aspect-ratio: 1; right: -6%; top: -18%;
  border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%;
  background: var(--c); filter: blur(70px); opacity: .35; mix-blend-mode: screen;
  animation: ph-blob 16s ease-in-out infinite alternate;
}
@keyframes ph-blob { to { translate: -12% 22%; rotate: 40deg; border-radius: 58% 42% 38% 62% / 44% 60% 40% 56%; } }
.ph-ghost {
  position: absolute; z-index: -1; right: -.03em; top: 50%; translate: 0 -50%; pointer-events: none;
  font-family: var(--f-display); text-transform: uppercase; line-height: 1.1; white-space: nowrap;
  font-size: clamp(6rem, 17vw, 17rem);
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--c) 45%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.ph-pink { --c: var(--pink); } .ph-cyan { --c: var(--cyan); } .ph-yellow { --c: var(--yellow); } .ph-purple { --c: var(--purple); } .ph-orange { --c: var(--orange); }
.band-c { background: var(--c, var(--lime)); color: var(--ink); }
.band-c i { color: var(--paper); }
.ph-purple .band-c { color: var(--paper); }
.ph-purple .band-c i { color: var(--lime); }
.ph-divider .band { rotate: -1.6deg; }
.ph-divider + .sec, .ph-divider + .city-banner + .sec { padding-top: clamp(4.5rem, 8vw, 6.5rem); }
@media (prefers-reduced-motion: reduce) { .page-hero::after { animation: none; } }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(244,240,230,.6); margin-bottom: 1.8rem; }
.crumbs a { color: inherit; text-decoration: none; transition: color .25s ease; }
.crumbs a:hover { color: var(--c, var(--lime)); }
.ph-title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(3.4rem, 9vw, 8.5rem); line-height: .9; margin: 0; color: var(--paper); }
.ph-kicker { display: block; font-size: .42em; line-height: 1; margin-bottom: .15em; color: var(--paper); }
p.ph-kicker { font-family: var(--f-display); font-size: clamp(1.1rem, 2.5vw, 1.6rem); text-transform: uppercase; }
.ph-hl { display: inline-block; background: var(--c); color: var(--ink); padding: .04em .12em 0; rotate: -2deg; box-shadow: .06em .06em 0 var(--paper); }
.ph-purple .ph-hl { color: var(--paper); }
.ph-intro { max-width: 40rem; margin: 1.8rem 0 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(244,240,230,.82); }
.ph-stats { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-top: 1.8rem; font-family: var(--f-mono); font-size: .8rem; text-transform: uppercase; color: var(--paper); }
.ph-stats b { font-family: var(--f-display); font-weight: 400; font-size: 2.4rem; color: var(--c); margin-right: .4rem; vertical-align: -6px; }
.ph-stats a { color: var(--c); text-decoration: none; border-bottom: 2px solid var(--c); }
.city-banner { height: clamp(220px, 32vw, 420px); overflow: hidden; border-bottom: 4px solid var(--ink); }
.city-banner img { width: 100%; height: 100%; object-fit: cover; }

/* event grid (archive / city / related) */
.event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.2rem; padding-top: 1rem; }
@media (max-width: 991.98px) { .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.event-grid .event-card { margin: 0 !important; rotate: 0deg; }
.event-grid .event-card:hover { rotate: 0deg; translate: 0 -8px; }
.event-grid .ev-spots { rotate: 0deg; }
.events-archive { padding-top: clamp(3rem, 5vw, 4.5rem); }
.city-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.6rem; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1rem; border: 2px solid var(--paper); color: var(--paper); text-decoration: none; font-family: var(--f-chunk); font-size: .78rem; text-transform: uppercase; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.chip:hover, .chip.is-on { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.chip-lg { font-size: 1rem; min-height: 52px; padding: .5rem 1.3rem; }
.past-list, .city-links { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.past-title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 1.2rem; }
.past-list ul, .post-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid currentColor; }
.past-list li a, .post-list li a { display: grid; grid-template-columns: 8rem 1fr auto 1.5rem; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px dashed rgba(244,240,230,.3); color: inherit; text-decoration: none; transition: color .3s ease, padding .3s var(--ease); }
.post-list li a { grid-template-columns: 8rem 1fr 1.5rem; border-bottom-color: rgba(11,10,28,.25); }
.past-list li a:hover { padding-left: .6rem; color: var(--lime); }
.post-list li a:hover { padding-left: .6rem; color: var(--purple); }
.pl-date, .pl-city { font-family: var(--f-mono); font-size: .75rem; text-transform: uppercase; opacity: .75; }
.pl-name { font-family: var(--f-chunk); font-size: 1.15rem; }

/* single event */
.ev-single { --c: var(--lime); background: var(--ink); color: var(--paper); padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem); }
.ev-single.ev-pink { --c: var(--pink); } .ev-single.ev-cyan { --c: var(--cyan); } .ev-single.ev-yellow { --c: var(--yellow); }
.ev-single .crumbs a:hover { color: var(--c); }
.ev-poster { position: relative; border: 4px solid var(--c); box-shadow: 14px 14px 0 var(--c); rotate: -1.5deg; background: var(--c); }
.ev-poster img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ev-poster-date { position: absolute; left: -14px; top: 20px; background: var(--c); color: var(--ink); border: 3px solid var(--ink); padding: .4rem .8rem .2rem; text-align: center; font-family: var(--f-display); text-transform: uppercase; line-height: .85; rotate: -6deg; }
.ev-poster-date span { display: block; font-size: 1.2rem; }
.ev-poster-date b { display: block; font-weight: 400; font-size: 3.6rem; }
.ev-poster-badge { position: absolute; right: 14px; top: -14px; background: var(--ink); color: var(--c); font-family: var(--f-mono); font-weight: 700; font-size: .72rem; text-transform: uppercase; padding: .35rem .6rem; rotate: 4deg; }
.ev-h1 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(3rem, 6.5vw, 6rem); line-height: .88; margin: 0 0 .8rem; }
.ev-vibe { font-family: var(--f-chunk); text-transform: uppercase; color: var(--c); font-size: 1rem; margin-bottom: 1.6rem; }
.ev-past-note { font-family: var(--f-mono); font-size: .8rem; color: var(--pink); }
.ev-facts { margin: 0 0 2rem; border-top: 2px solid rgba(244,240,230,.25); }
.ev-facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 2px solid rgba(244,240,230,.25); }
.ev-facts dt { font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(244,240,230,.6); padding-top: .2rem; }
.ev-facts dd { margin: 0; font-size: 1.08rem; }
.ev-facts a { color: var(--c); }
.ev-addr { font-size: .9rem; color: rgba(244,240,230,.7); }
.ev-price-big { font-family: var(--f-display); font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--c); }
.ev-cta-note { margin: .9rem 0 0; font-family: var(--f-mono); font-size: .72rem; color: rgba(244,240,230,.6); }
.ev-content { margin-top: clamp(3rem, 6vw, 4.5rem); }
.more-events { border-top: 1px dashed rgba(244,240,230,.2); }

/* prose (page / event content) */
.page-body { padding-top: clamp(3rem, 6vw, 5rem); }
.prose { font-size: 1.1rem; line-height: 1.7; }
.prose h2, .prose h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: .95; margin: 2.2rem 0 .8rem; }
.prose h2 { font-size: clamp(2rem, 4vw, 3rem); }
.prose h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.prose a { color: var(--purple); font-weight: 600; }
.ev-single .prose a, .prose-dark a { color: var(--lime); }
.prose img { height: auto; border: 3px solid currentColor; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose blockquote { margin: 2rem 0; padding: 1.2rem 1.4rem; background: var(--lime); color: var(--ink); border: 3px solid var(--ink); font-family: var(--f-chunk); }
.prose details { border-top: 2px solid currentColor; padding: 1rem 0; }
.prose details:last-of-type { border-bottom: 2px solid currentColor; }
.prose summary { cursor: pointer; font-family: var(--f-chunk); font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; font-family: var(--f-display); font-size: 1.6rem; line-height: 1; transition: rotate .3s var(--bounce); }
.prose details[open] summary::after { rotate: 45deg; }
.prose details > :not(summary) { margin-top: .7rem; }
.page-body-dark { background: var(--ink); color: var(--paper); }
.join-intro { padding: 2.5rem 0 0; }

/* WordPress core bits */
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.pager { margin-top: 2rem; font-family: var(--f-mono); }

@media (max-width: 767.98px) {
  .past-list li a, .post-list li a { grid-template-columns: 1fr auto; }
  .pl-date { grid-column: 1 / -1; }
  .pl-city { display: none; }
  .ev-poster { rotate: 0deg; box-shadow: 8px 8px 0 var(--c); margin: 0 .4rem; }
  .ev-facts > div { grid-template-columns: 1fr; gap: .2rem; }
  .event-grid { grid-template-columns: 1fr; gap: 2.4rem; padding: 0 .4rem; }
}

/* =========================================================
   THE TEA (blog): taped zine clippings on paper
   ========================================================= */
.tea-index { padding-top: clamp(4.5rem, 8vw, 6.5rem); }
.tea-lime { --c: var(--lime); } .tea-pink { --c: var(--pink); } .tea-cyan { --c: var(--cyan); } .tea-yellow { --c: var(--yellow); }
.tea-chips .chip { border-color: var(--ink); color: var(--ink); }
.tea-chips .chip:hover, .tea-chips .chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--lime); }

/* card */
.tea-card { --c: var(--lime); position: relative; display: flex; flex-direction: column; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--c); transition: translate .35s var(--ease), box-shadow .35s var(--ease), background .35s; }
.tea-card:hover { translate: -6px -6px; box-shadow: 14px 14px 0 var(--c); }
.tea-card:active { translate: -2px -2px; box-shadow: 6px 6px 0 var(--c); transition-duration: .15s; }
/* keep the scroll-reveal fade, but give hover its own smooth timing with no stagger delay */
.js .tea-card.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease), translate .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1); }
.js .tea-card.reveal.in { transition-delay: 0s !important; }
/* invisible hit area over the spot the card lifts away from, so the cursor never slips off mid-hover */
.tea-card::before { content: ""; position: absolute; inset: -3px; z-index: -1; transition: inset .5s cubic-bezier(.22, 1, .36, 1); }
.tea-card:hover::before { inset: -3px -12px -12px -3px; }
.tea-img::after { content: ""; position: absolute; inset: 0; background: var(--c); mix-blend-mode: multiply; opacity: 0; transition: opacity .5s ease; }
.tea-card:hover .tea-img::after { opacity: .35; }
.tea-read { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; background: var(--ink); color: var(--c); border: 2px solid var(--c); font-family: var(--f-chunk); font-size: .8rem; text-transform: uppercase; padding: .45rem .8rem; opacity: 0; translate: 0 12px; transition: opacity .4s ease, translate .5s cubic-bezier(.22, 1, .36, 1); }
.tea-card:hover .tea-read { opacity: 1; translate: 0 0; }
.tea-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--c); }
.tea-img img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s cubic-bezier(.22, 1, .36, 1), filter .4s; filter: saturate(1.05) contrast(1.05); }
.tea-card:hover .tea-img img { scale: 1.06; }
.tea-img-ph { display: grid; place-items: center; height: 100%; font-size: 4rem; }
.tea-tape { position: absolute; z-index: 2; top: -12px; left: 50%; width: 110px; height: 30px; translate: -50% 0; rotate: -4deg; background: color-mix(in srgb, var(--yellow) 75%, transparent); border-inline: 2px dashed rgba(11,10,28,.2); pointer-events: none; }
.tea-card .tea-tape { top: 6px; }
.tea-body { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.3rem 1.3rem 1.4rem; flex: 1; }
.tea-cat { display: inline-block; background: var(--ink); color: var(--c); font-family: var(--f-mono); font-weight: 700; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: .3rem .6rem; rotate: -3deg; transition: rotate .3s var(--bounce), color .25s ease; }
.tea-cat:hover { rotate: 3deg; color: var(--c); }
.tea-title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: .95; margin: 0; }
.tea-title a { color: inherit; text-decoration: none; background: linear-gradient(var(--c), var(--c)) 0 88% / 0 .35em no-repeat; transition: background-size .5s cubic-bezier(.22, 1, .36, 1); }
.tea-card:hover .tea-title a { background-size: 100% .35em; }
.tea-excerpt { margin: 0; font-size: 1rem; line-height: 1.5; color: rgba(11,10,28,.78); }
.tea-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: auto 0 0; padding-top: .4rem; font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(11,10,28,.6); }
.tea-meta span + span::before { content: "✦"; margin-right: 1rem; color: var(--pink); }

/* cover story (first post) */
.tea-cover { display: grid; grid-template-columns: 1.25fr 1fr; margin-bottom: clamp(4rem, 8vw, 6rem); box-shadow: 10px 10px 0 var(--c); }
.tea-cover .tea-img { aspect-ratio: auto; min-height: 420px; border-bottom: 0; border-right: 3px solid var(--ink); }
.tea-cover .tea-tape { top: 14px; left: 18%; width: 140px; rotate: -10deg; }
.tea-cover .tea-body { justify-content: center; gap: 1rem; padding: clamp(1.6rem, 3.5vw, 3rem); }
.tea-cover .tea-title { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
.tea-cover .tea-excerpt { font-size: 1.12rem; }
.tea-cover .tea-meta { margin-top: 0; }
.tea-cover .btn-z { margin-top: .6rem; }
.tea-cover:hover { translate: -6px -6px; box-shadow: 18px 18px 0 var(--c); }
.tea-flag { position: absolute; top: -18px; right: 22px; z-index: 3; background: var(--pink); color: var(--paper); border: 3px solid var(--ink); font-family: var(--f-chunk); font-size: .85rem; text-transform: uppercase; padding: .4rem .8rem; rotate: 5deg; }

.tea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 3.2rem 2.4rem; }
.tea-empty { font-size: 1.8rem; color: var(--purple); }
.tea-index .pager a, .tea-index .pager span { margin-right: 1rem; color: var(--ink); }

/* single post */
.tea-single { --c: var(--lime); }
.tea-head { position: relative; overflow: hidden; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); background: radial-gradient(55% 80% at 90% 10%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%), radial-gradient(45% 70% at 5% 110%, color-mix(in srgb, var(--purple) 45%, transparent), transparent 70%), var(--ink); }
.tea-head .crumbs a:hover { color: var(--c); }
.tea-head .tea-cat { font-size: .78rem; margin-bottom: 1.2rem; }
.tea-h1 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 6.2rem); line-height: .9; max-width: 15ch; margin: 0; }
.tea-dek { max-width: 42rem; margin: 1.4rem 0 0; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: rgba(244,240,230,.82); }
.tea-meta-lg { margin-top: 1.6rem; color: rgba(244,240,230,.65); font-size: .78rem; }
.tea-meta-lg span + span::before { color: var(--c); }
.tea-img-band { background: linear-gradient(var(--ink) 50%, var(--paper) 50%); }
.tea-head + .tea-img-band { margin-top: -1px; }
.tea-hero-img { position: relative; z-index: 2; margin: 0; border: 4px solid var(--ink); box-shadow: 14px 14px 0 var(--c); rotate: -.8deg; background: var(--c); }
.tea-hero-img img { width: 100%; max-height: 640px; object-fit: cover; }
.tea-hero-img .tea-tape { top: -16px; left: 12%; width: 150px; height: 36px; rotate: -8deg; }
.tea-content-wrap { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.tea-prose > p:first-child::first-letter { float: left; font-family: var(--f-display); font-size: 5.2em; line-height: .8; margin: .06em .12em 0 0; padding: .08em .12em 0; background: var(--c); border: 3px solid var(--ink); }
.tea-prose blockquote { background: var(--c); rotate: -1deg; box-shadow: 6px 6px 0 var(--ink); font-size: 1.25rem; }
.tea-prose h2 { position: relative; padding-left: .6em; }
.tea-prose h2::before { content: "✦"; position: absolute; left: 0; color: var(--pink); font-size: .6em; top: .2em; }
.tea-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.4rem 0 0; }
.tea-tags span { font-family: var(--f-mono); font-size: .75rem; padding: .3rem .6rem; border: 2px dashed var(--ink); }
.tea-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 3px solid var(--ink); }
.tea-end .hand { margin: 0; font-size: 1.7rem; color: var(--purple); }
.tea-more { padding-top: 0; }

@media (max-width: 991.98px) {
  .tea-cover { grid-template-columns: 1fr; }
  .tea-cover .tea-img { min-height: 0; aspect-ratio: 4 / 3; border-right: 0; border-bottom: 3px solid var(--ink); }
}
@media (max-width: 767.98px) {
  .tea-card, .tea-cover { box-shadow: 6px 6px 0 var(--c); }
  .tea-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .tea-hero-img { rotate: 0deg; box-shadow: 8px 8px 0 var(--c); }
  .tea-flag { right: 10px; }
}

/* ticker hover pop-ups (images set in Site settings → Ticker images) */
.marquee-track span.has-pop { cursor: default; transition: color .2s; }
.marquee-track span.has-pop:hover { color: var(--paper); }
.band-c .marquee-track span.has-pop:hover, .band-yellow .marquee-track span.has-pop:hover, .footer-marquee .marquee-track span.has-pop:hover { color: var(--purple); }
.tk-pop {
  position: fixed; left: 0; top: 0; z-index: 9990; pointer-events: none;
  width: clamp(180px, 16vw, 260px);
  background: var(--paper); padding: .5rem .5rem 1.6rem;
  border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  opacity: 0; scale: .6; transform-origin: 50% 100%;
  transition: opacity .2s, scale .35s var(--bounce);
}
.tk-pop.on { opacity: 1; scale: 1; }
.tk-pop img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--ink); background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tk-pop { transition: opacity .2s; scale: 1; } }

/* Membership / Request an Invite page: text + pass on the left, form beside it on ink */
.join-inline .prose > :first-child { margin-top: 0; }
.join-inline .join-perks { margin-top: clamp(3rem, 6vw, 4.5rem); }
.join-inline .join-card { box-shadow: 14px 14px 0 var(--lime); }
@media (max-width: 767.98px) { .join-inline .join-card { box-shadow: 9px 9px 0 var(--lime); } }
@media (min-width: 992px) {
  .join-inline-form { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
}

/* =========================================================
   WALL OF FAME (homepage teaser, /wall-of-fame/, story pages)
   ========================================================= */
.c-lime { --c: var(--lime); --on: var(--ink); }
.c-pink { --c: var(--pink); --on: var(--ink); }
.c-cyan { --c: var(--cyan); --on: var(--ink); }
.c-yellow { --c: var(--yellow); --on: var(--ink); }
.c-purple { --c: var(--purple); --on: var(--paper); }
.c-orange { --c: var(--orange); --on: var(--ink); }

/* award tag */
.ftag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem .34rem;
  background: var(--c, var(--lime)); color: var(--on, var(--ink));
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--f-mono); font-weight: 700; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.ftag i { font-style: normal; }
.ftag small { font-size: inherit; font-weight: 400; opacity: .75; }
.ftag-sm { font-size: .6rem; padding: .3rem .5rem .26rem; box-shadow: 2px 2px 0 var(--ink); }
.ftag-lg { font-size: .78rem; padding: .5rem .85rem .44rem; }

/* spotlight (Member of the Month etc.) */
.fame-spot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.fsp-photo { position: relative; padding: 10px 10px 2.4rem; background: var(--paper); border: 3px solid var(--ink); box-shadow: 14px 14px 0 var(--c, var(--pink)); rotate: -2deg; }
.fsp-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 3px solid var(--ink); }
.fsp-seal {
  position: absolute; right: -28px; bottom: -28px; z-index: 2;
  width: 132px; aspect-ratio: 1; padding: .9rem; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--c, var(--lime)); color: var(--on, var(--ink)); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  rotate: 12deg; animation: seal-wobble 6s ease-in-out infinite;
}
.fsp-seal::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px dashed currentColor; opacity: .5; }
.fsp-seal i { font-style: normal; font-size: 1.2rem; line-height: 1; }
.fsp-seal b { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 1.05rem; line-height: .95; }
.fsp-seal small { font-family: var(--f-mono); font-size: .58rem; text-transform: uppercase; margin-top: .25rem; }
@keyframes seal-wobble { 50% { rotate: 4deg; scale: 1.05; } }
.fsp-name { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: .86; color: var(--paper); }
.fsp-name { font-size: clamp(3.2rem, 7.5vw, 7rem); margin: 1.1rem 0 .4rem; }
.fsp-head { font-family: var(--f-chunk); font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.2; max-width: 34rem; margin: 0; }
.fsp-quote { margin: 1.4rem 0 1.8rem; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.2; color: var(--yellow); rotate: -2deg; }
.fame-stats { display: flex; flex-wrap: wrap; margin: 0 0 2rem; border-block: 2px solid rgba(244, 240, 230, .22); }
.fame-stats > div { flex: 1 1 7rem; padding: .9rem 1rem .8rem 0; }
.fame-stats > div + div { padding-left: 1rem; border-left: 2px dashed rgba(244, 240, 230, .22); }
.fame-stats dt { font-family: var(--f-mono); font-weight: 400; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.fame-stats dd { margin: 0; font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; color: var(--c); }
.fame-spot.is-compact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; }
.is-compact .fsp-name { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
.is-compact .fsp-quote { margin-bottom: 1.4rem; }

/* story cards */
.fame-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.6rem 2rem; }
.fame-story {
  --c: var(--lime);
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--c);
  transition: translate .4s var(--ease), box-shadow .4s var(--ease), opacity .9s var(--ease), transform .9s var(--ease);
}
.fame-story:hover { translate: 0 -8px; box-shadow: 14px 18px 0 var(--c); }
.fc-pink { --c: var(--pink); } .fc-cyan { --c: var(--cyan); } .fc-yellow { --c: var(--yellow); }
.fs-img { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--ink); }
.fs-img img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease); }
.fame-story:hover .fs-img img { scale: 1.06; }
.fs-img .ftag { position: absolute; left: .8rem; top: .8rem; }
.fs-body { flex: 1; display: flex; flex-direction: column; padding: 1.2rem 1.3rem 1.4rem; }
.fs-name { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 3vw, 2.6rem); line-height: .9; margin: 0 0 .6rem; }
.fs-name a { color: inherit; text-decoration: none; }
.fs-head { font-family: var(--f-chunk); font-size: 1rem; line-height: 1.25; margin: 0 0 .7rem; }
.fs-excerpt { font-size: .95rem; color: rgba(11, 10, 28, .75); margin: 0 0 1.2rem; }
/* entry button: round icon pinned on the photo, or a labelled button in the card body */
.fame-btn { text-decoration: none; transition: background .3s ease, color .3s ease, rotate .4s var(--bounce), scale .4s var(--bounce), translate .3s var(--ease), box-shadow .3s var(--ease); }
.fame-btn svg { flex: none; fill: currentColor; }
.fame-btn-round {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink); color: var(--c, var(--lime)); border: 2px solid var(--paper);
  box-shadow: 3px 3px 0 rgba(11, 10, 28, .35);
}
.fame-btn-round svg { width: 20px; height: 20px; }
.fame-btn-round:hover { background: var(--c, var(--lime)); color: var(--ink); rotate: -8deg; scale: 1.1; }
.fame-btn-round.fb-at-story, .fame-btn-round.fb-at-badge, .fame-btn-round.fb-at-pol { position: absolute; z-index: 4; }
.fame-btn-round.fb-at-story { right: .8rem; bottom: .8rem; }
.fame-btn-round.fb-at-badge { top: 1.3rem; right: 1.3rem; }
.fame-btn-round.fb-at-pol { top: 1.1rem; left: 1.1rem; }
.fame-btn-round.fb-at-spot { width: 54px; height: 54px; margin-top: 1.2rem; border-color: var(--c, var(--lime)); }
.fame-btn-round.fb-at-spot svg { width: 26px; height: 26px; }
.fame-btn-text {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  padding: .5rem .8rem; background: var(--c, var(--lime)); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--f-mono); font-weight: 700; font-size: .76rem; line-height: 1.2; text-transform: uppercase;
}
.fame-btn-text svg { width: 1.2em; height: 1.2em; }
.fame-btn-text:hover { background: var(--ink); color: var(--c, var(--lime)); translate: -2px -2px; box-shadow: 5px 5px 0 var(--ink); }
.fame-btn-text.fb-at-story { margin-top: auto; }
.fame-btn-text.fb-at-badge { margin: .8rem .2rem 0; }
.fame-btn-text.fb-at-pol { margin-top: .4rem; font-size: .66rem; padding: .35rem .6rem; }
.fame-btn-text.fb-at-spot { margin-top: 1.4rem; padding: .8rem 1.2rem; font-size: .9rem; box-shadow: 4px 4px 0 var(--c, var(--lime)); border-color: var(--paper); }
.fame-btn-text.fb-at-spot:hover { box-shadow: 7px 7px 0 var(--c, var(--lime)); }
.fame-story.is-mini { flex-direction: row; }
.is-mini .fs-img { flex: 0 0 42%; aspect-ratio: auto; border-bottom: 0; border-right: 3px solid var(--ink); }
.is-mini .fs-name { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.is-mini .fs-excerpt { display: none; }
.is-mini .fs-head { margin-bottom: 1rem; }
.is-mini .fs-img .ftag { right: .8rem; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; }

/* shout-outs: taped polaroid, photo first, award label stuck under it */
.fame-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3rem 2.2rem; padding-top: 1.2rem; }
.fame-badge {
  position: relative; container-type: inline-size;
  padding: .7rem .7rem 1.2rem; background: var(--paper); color: var(--ink);
  box-shadow: 8px 8px 0 rgba(11, 10, 28, .35);
  rotate: var(--rot, 0deg);
  transition: rotate .4s var(--bounce), translate .4s var(--ease), opacity .9s var(--ease), transform .9s var(--ease);
}
.fame-badge:hover { rotate: 0deg; translate: 0 -6px; }
.fb-tape { position: absolute; z-index: 3; left: 50%; top: -12px; width: 38%; height: 26px; translate: -50% 0; rotate: -3deg; background: rgba(244, 240, 230, .72); border: 1px solid rgba(11, 10, 28, .12); box-shadow: 0 1px 2px rgba(11, 10, 28, .15); }
.fb-photo { overflow: hidden; background: var(--ink); }
.fb-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: scale .7s var(--ease); }
.fame-badge:hover .fb-photo img { scale: 1.05; }
.fb-award {
  position: relative; z-index: 2; width: fit-content; max-width: calc(100% + .4rem);
  margin: -2.4rem -.6rem 0 -.2rem; padding: .45rem .7rem .4rem;
  background: var(--c); color: var(--on); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  rotate: -3deg;
  font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.4rem, 11cqi, 2.4rem); line-height: .88;
}
.fb-kicker { display: block; margin-bottom: .3rem; font-family: var(--f-mono); font-weight: 700; font-size: .6rem; letter-spacing: .08em; line-height: 1.2; }
.fb-name { margin: 1.1rem .2rem .25rem; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 9cqi, 1.6rem); line-height: .95; }
.fb-name a { color: inherit; text-decoration: none; transition: color .2s; }
.fb-name a span { font-size: .8em; }
.fb-name a:hover { color: var(--purple); }
.fb-what { margin: 0 .2rem; font-size: 1.02rem; line-height: 1.2; color: rgba(11, 10, 28, .78); }
.fame-badges-home { margin-top: clamp(3.5rem, 6vw, 5rem); }
.fame-badges-home .fame-badge { box-shadow: 8px 8px 0 var(--c); }

/* photo moments */
.fame-pols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2.6rem 2rem; padding: 1rem .5rem 0; }
.fame-pol {
  position: relative; margin: 0; padding: .6rem .6rem 0;
  background: var(--paper); color: var(--ink); box-shadow: 8px 8px 0 rgba(0, 0, 0, .45);
  rotate: var(--rot, 0deg);
  transition: rotate .4s var(--bounce), scale .4s var(--bounce), opacity .9s var(--ease), transform .9s var(--ease);
}
.fame-pol:hover { rotate: 0deg; scale: 1.03; z-index: 2; }
.fame-pol img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.fame-pol figcaption { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .2rem .9rem; }
.fame-pol figcaption b { font-family: var(--f-mono); font-size: .72rem; }
.fame-pol figcaption .hand { font-size: 1.05rem; line-height: 1.15; }
.fp-tag { position: absolute; top: -12px; right: -10px; rotate: 6deg; }

/* page sections */
.fame-sec.sec-ink + .fame-sec.sec-ink { padding-top: 0; }
.fame-awards-title { color: var(--ink); margin-bottom: clamp(2rem, 4vw, 3rem); }
.fame-awards-title span { display: inline-block; background: var(--ink); color: var(--yellow); padding: .04em .12em 0; rotate: -2deg; }
.fame-home { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.fh-stories { display: grid; gap: 2rem; }
.fame-all { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* "Doing something big?" call-out */
.fame-cta {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem;
  padding: clamp(1.6rem, 4vw, 3rem);
  background: var(--lime); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--pink);
}
.fame-cta .display-x { font-size: clamp(2.4rem, 4.5vw, 4rem); }
.fame-cta .display-x span { display: inline-block; background: var(--ink); color: var(--lime); padding: .04em .12em 0; rotate: -2deg; }
.fame-cta p { max-width: 34rem; margin: .9rem 0 0; font-weight: 600; }
.fc-star { font-size: clamp(4rem, 8vw, 7rem); line-height: 1; animation: fc-spin 14s linear infinite; }
@keyframes fc-spin { to { rotate: 360deg; } }


@media (max-width: 991.98px) {
  .fame-home, .fame-spot, .fame-spot.is-compact { grid-template-columns: 1fr; }
  .fsp-photo { max-width: 420px; }
  .fame-cta { grid-template-columns: 1fr; }
  .fc-star { display: none; }
}
@media (max-width: 575.98px) {
  .fsp-photo { margin-right: 18px; }
  .fsp-seal { width: 104px; right: -14px; bottom: -20px; padding: .7rem; }
  .fsp-seal b { font-size: .85rem; }
  .fame-story.is-mini { flex-direction: column; }
  .is-mini .fs-img { flex: none; aspect-ratio: 5 / 4; border-right: 0; border-bottom: 3px solid var(--ink); }
  .fame-badges { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.1rem; padding: 1rem .3rem 0; }
  .fame-badge { padding: .45rem .45rem .9rem; }
  .fb-award { margin-top: -1.8rem; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  .fb-kicker { font-size: .5rem; }
  .fb-what { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fsp-seal, .fc-star { animation: none; }
}

/* ---------- iPhone (Safari 26): no see-through gaps above the header / around the menu ---------- */
@media (max-width: 991.98px) {
  /* solid bar: Safari 26 extends its colour into the status-bar area (it skips blurred / see-through bars) */
  .site-nav, .site-nav.scrolled { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Safari 26 ignores theme-color and tints its bars from the fixed element touching each screen edge.
     A fixed, full-screen grain layer sits on top of the nav and bottom bar, so Safari picks that (transparent) layer
     and shows the page through. Pin the grain to the document instead so the ink nav / bottom bar win. */
  body { position: relative; }
  body::after { position: absolute; }
  /* keep the grain under the nav and bottom bar: over them it lightens the ink, and Safari's fill above/below is plain ink */
  body::after { z-index: 999; }
  html { background: var(--ink); }
  /* the nav stays sticky: a fixed nav lands ~18pt below the status bar on iOS 26, a sticky one sits flush against it */
  .site-nav.scrolled { height: var(--nav-h); }
  /* Safari 26 takes the bar colour from a fixed element's BORDER before its background, so the faint hairline
     tinted the status bar see-through. Draw the line as a shadow instead (Safari ignores shadows). */
  .site-nav, .site-nav.scrolled { border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(244, 240, 230, .1); }
  /* same for the bottom bar's lime top edge, so the strip under it stays ink, not lime */
  nav.bottom-bar { border-top: 0; box-shadow: inset 0 3px 0 var(--lime); padding-top: 3px; }
  /* the closed menu is a full-screen fixed layer; Safari samples it even while invisible, so take it out of the page */
  .mobile-menu.offcanvas-top:not(.show):not(.showing):not(.hiding) { display: none; }
  @starting-style { .mobile-menu.offcanvas-top.showing { opacity: 0; } }
}

/* full-screen menu: pinned to all four edges, lime spills past them behind the iOS bars; fades instead of sliding */
.mobile-menu.offcanvas-top {
  top: 0; bottom: 0; height: auto; max-height: none;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  transform: none; opacity: 0; transition: opacity .3s var(--ease), visibility .3s;
}
.mobile-menu.offcanvas-top.showing, .mobile-menu.offcanvas-top.show:not(.hiding) { transform: none; opacity: 1; }
.mobile-menu.offcanvas-top.hiding { transform: none; opacity: 0; }
.mobile-menu::before, .mobile-menu::after { content: ""; position: absolute; left: 0; right: 0; height: 200px; background: var(--lime); pointer-events: none; }
.mobile-menu::before { bottom: 100%; }
.mobile-menu::after { top: 100%; }
.mobile-menu ~ .offcanvas-backdrop { display: none; }

/* ---------- mobile bottom bar ---------- */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: var(--ink); border-top: 3px solid var(--lime);
  padding-bottom: env(safe-area-inset-bottom);
}
.bb-inner { display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: center; height: 64px; max-width: 560px; margin: 0 auto; padding: 0 6px; }
.bb-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 100%; color: rgba(244, 240, 230, .7); text-decoration: none;
  font-family: var(--f-mono); font-weight: 700; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  transition: color .2s ease;
}
.bb-link svg { transition: translate .3s var(--bounce); }
.bb-link:active svg { translate: 0 2px; }
.bb-link.is-on, .bb-link:hover { color: var(--lime); }
.bb-link.is-on span { background: var(--lime); color: var(--ink); padding: 0 .3rem; }
.bb-invite { color: var(--pink); }
.bb-home {
  justify-self: center; display: grid; place-items: center;
  width: 70px; height: 70px; margin-top: -30px;
  background: var(--lime); border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: 0 0 0 3px var(--lime);
  transition: rotate .4s var(--bounce), scale .3s var(--bounce);
}
.bb-home img { width: 50px; height: auto; filter: brightness(0); opacity: .9; }
.bb-home:active { scale: .92; }
.bb-home.is-on { rotate: -8deg; }
@media (max-width: 991.98px) {
  body.has-bottom-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .has-bottom-bar .footer { padding-bottom: 3rem; }
}
/* the menu covers the bar while it's open */
body:has(.mobile-menu.show) .bottom-bar { visibility: hidden; }