/* ============================================================
   KAFOU COLECTIVO — design system tokens (from styles.css)
   ============================================================ */
:root{
  --radius: 0.5rem;

  --background: oklch(0.08 0.012 300);
  --foreground: oklch(0.96 0.005 300);
  --card: oklch(0.10 0.015 300);

  --primary: oklch(0.62 0.23 350);
  --primary-foreground: oklch(0.08 0 0);

  --muted-foreground: oklch(0.65 0.03 300);
  --border: oklch(0.20 0.02 300);
  --input: oklch(0.20 0.02 300);

  --kafou-pink: oklch(0.62 0.23 350);
  --kafou-pink-glow: oklch(0.65 0.28 350);

  --font-display: "Space Grotesk", "Reem Kufi", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-arabic: "Reem Kufi", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; border-color: var(--border); }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); }
a{ text-decoration:none; }

/* ---- utilities from the design system ---- */
.glow-border{
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--kafou-pink) 30%, transparent),
    0 0 30px -10px color-mix(in oklab, var(--kafou-pink) 40%, transparent);
}
.glow-button{
  box-shadow: 0 0 24px -4px color-mix(in oklab, var(--kafou-pink) 55%, transparent);
}
/* Static soft haze — approximates the old blurred blobs without any
   live filter() (much cheaper to paint). */
.bg-smoke{
  background:
    radial-gradient(62vw 62vh at 6% 2%,  color-mix(in oklab, var(--kafou-pink) 5%, transparent), transparent 70%),
    radial-gradient(56vw 56vh at 96% 92%, color-mix(in oklab, var(--kafou-pink) 4%, transparent), transparent 72%),
    radial-gradient(46vw 46vh at 50% 44%, color-mix(in oklab, var(--kafou-pink-glow) 3%, transparent), transparent 78%),
    var(--background);
}

/* ---- scroll-reveal (fires once per section) ---- */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.reveal.in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ---- shared layout ---- */
/* Fluid spacing: scales smoothly with the viewport instead of snapping. */
section{ position:relative; padding: clamp(64px, 10vw, 128px) clamp(20px, 5vw, 40px); }
.container{ max-width: 1280px; margin: 0 auto; }

.eyebrow{
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--primary);
}
.section-title{
  font-size: clamp(28px, 4vw, 48px); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.025em; margin-top: 16px;
}
.section-head{ margin-bottom: 48px; }
.section-head p.lead{
  max-width: 672px; color: var(--muted-foreground); margin-top: 16px; font-size: 16px;
}

/* ============================================================
   SMOKE LAYER
   ============================================================ */
.smoke-layer{ position:fixed; inset:0; z-index:-10; pointer-events:none; }
.smoke-layer .base{ position:absolute; inset:0; }

/* ============================================================
   NAV
   ============================================================ */
header.topnav{
  position: sticky; top:0; z-index:50;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  background: color-mix(in oklab, var(--background) 84%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .35s ease;
  will-change: transform;
}
/* Hide on scroll-down, reveal on scroll-up (toggled from JS). */
header.topnav.nav-hidden{ transform: translateY(-100%); }
/* Logo at the far left, everything else (links, hamburger, Stay Kafou)
   grouped on the right — standard nav layout, logo doubles as the
   home link. */
.topnav-inner{
  max-width: 1280px; margin: 0 auto; height: 92px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding: 0 40px;
}
.topnav-right{ display:flex; align-items:center; gap:32px; min-width:0; }

/* ---- hamburger (mobile fallback only — see breakpoint below): opens
   the full-screen nav overlay ---- */
.hamburger-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:40px; height:40px; padding:0; flex-shrink:0;
  background:none; border:none; cursor:pointer;
}
.hamburger-btn span{
  display:block; width:22px; height:2px; background: var(--foreground);
  transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
}
.hamburger-btn:hover span{ background: var(--primary); }
.hamburger-btn.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2){ opacity:0; }
.hamburger-btn.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---- desktop inline links: hidden by default (mobile relies on the
   hamburger + overlay instead), shown from 1340px up — full labels
   need right at the 1280px container's full width, so the breakpoint
   sits a bit above that for a safety margin against overflow. ---- */
.nav-links-desktop{ display:none; align-items:center; gap:32px; }
.nav-links-desktop a{
  position:relative; display:inline-flex; align-items:center;
  padding-top:13px;
  font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:14.5px; line-height:1; letter-spacing:0.07em; text-align:center;
  white-space:nowrap;
  color: color-mix(in oklab, var(--muted-foreground) 72%, var(--foreground));
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  transition: color .2s;
}
.nav-links-desktop a:hover{ color: var(--primary); }
.nav-links-desktop a.is-current{ color: var(--primary); }
/* Hover: a pink line fans out from the center of the word, rather than
   sweeping in flatly from one side. */
.nav-links-desktop a::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background: var(--primary);
  transform: scaleX(0); transform-origin:center;
  transition: transform .3s ease;
}
.nav-links-desktop a:hover::after{ transform: scaleX(1); }
/* Active page: a small diamond above the label — a quiet visual echo
   of the diamond mark over the ك in the Kafou logo — instead of just
   a color change or underline. */
.nav-marker{
  position:absolute; top:0; left:50%;
  width:6px; height:6px; background: var(--primary);
  transform: translateX(-50%) rotate(45deg) scale(0);
  transition: transform .25s ease;
}
.nav-links-desktop a.is-current .nav-marker{
  transform: translateX(-50%) rotate(45deg) scale(1);
}
@media (min-width: 1340px){
  .hamburger-btn{ display:none; }
  .nav-links-desktop{ display:flex; }
}

/* ---- logo (left): links home, small always-on pink neon glow via
   drop-shadow — box-shadow would draw a visible rectangle around the
   transparent PNG, drop-shadow follows the actual كفو/COLECTIVO glyph
   shapes instead ---- */
.header-logo-link{ display:flex; flex-shrink:0; }
.header-logo{
  height: clamp(34px, 5vw, 50px); width:auto; display:block;
  filter:
    drop-shadow(0 0 6px rgba(226,47,153,0.9))
    drop-shadow(0 0 16px rgba(226,47,153,0.6))
    drop-shadow(0 0 32px rgba(226,47,153,0.35));
  animation: logo-pulse 4.5s ease-in-out infinite;
}
@keyframes logo-pulse{
  0%, 100%{
    filter:
      drop-shadow(0 0 6px rgba(226,47,153,0.9))
      drop-shadow(0 0 16px rgba(226,47,153,0.6))
      drop-shadow(0 0 32px rgba(226,47,153,0.35));
  }
  50%{
    filter:
      drop-shadow(0 0 10px rgba(226,47,153,1))
      drop-shadow(0 0 26px rgba(226,47,153,0.75))
      drop-shadow(0 0 48px rgba(226,47,153,0.45));
  }
}
@media (prefers-reduced-motion: reduce){
  .header-logo{ animation:none; }
}

/* ---- Stay Kafou (right): its own visible button. Same display font as
   the nav links (was falling back to the body font) and near-black text
   on the pink fill (was falling back to the browser's default link
   blue — no color was ever set here). ---- */
.nav-cta{
  border-radius: 6px; background: var(--primary);
  padding: 10px 24px; font-family: var(--font-display);
  font-size:12px; font-weight:700; color: var(--primary-foreground);
  text-transform:uppercase; letter-spacing:0.2em;
  transition: all .2s; flex-shrink:0;
}
.nav-cta:hover{ background: color-mix(in oklab, var(--primary) 90%, transparent); }

/* Narrow screens: shrink the logo and Stay Kafou so both header ends
   comfortably fit next to the hamburger with room to spare. */
@media (max-width: 480px){
  .header-logo{ height: 26px; }
  .nav-cta{ padding: 8px 14px; font-size: 10px; letter-spacing: 0.12em; }
}

/* ---- full-screen nav overlay: opened by the hamburger, holds the
   links that used to sit in the bar itself ---- */
.nav-overlay{
  position:fixed; top:92px; left:0; right:0; bottom:0; z-index:45;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in oklab, var(--background) 97%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.nav-overlay.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.nav-overlay-links{
  display:flex; flex-direction:column; align-items:center;
  gap: clamp(18px, 4vh, 34px);
}
.nav-overlay-links a{
  font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size: clamp(26px, 6vw, 52px); letter-spacing:0.01em;
  color: var(--foreground);
  transition: color .2s ease;
}
.nav-overlay-links a:hover{ color: var(--primary); }
@media (prefers-reduced-motion: reduce){
  .nav-overlay{ transition:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  /* Sized to fit one screen (minus the 92px nav) — no scroll needed to see the CTAs. */
  min-height: calc(100vh - 92px);
  min-height: calc(100dvh - 92px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding: clamp(40px, 6vh, 80px) clamp(20px, 5vw, 40px);
  overflow: hidden;
}
/* Hero background: the still frame is the base layer and is visible
   immediately (no gap while the clip loads — a slow connection used to
   mean a plain black hero for several seconds, which read as "no video
   at all"). The clip plays once on load and crossfades in on top of the
   still; if it never manages to start, the still just stays put. */
.hero-bg{
  position:fixed; inset:0; z-index:-3;
  overflow:hidden;
  background: var(--background);
}
/* Homepage only: the header bar has no video of its own, so let the
   fixed hero video (above) show straight through it instead of sitting
   behind an opaque bar — the clip genuinely runs edge-to-edge, logo row
   included. Every other page keeps the normal frosted header. A
   permanent dark gradient (not a blur, not a floating panel) keeps the
   nav readable no matter how bright/busy the video frame behind it is. */
body[data-page="home"] header.topnav{
  background: linear-gradient(to bottom, rgba(2,1,3,0.75), rgba(2,1,3,0.4) 80%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.hero-video,
.hero-endframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;   /* mobile default: native-portrait clip, cover fills the screen cleanly since its aspect already matches a phone */
}
/* Desktop/landscape (matches the mobile-vs-desktop matchMedia() check in
   main.js's heroVideo() exactly): cover cropped a different slice of the video
   on every screen depending on its aspect ratio — a 1920x1080 monitor,
   a 1366x768 laptop, and a 2560x1080 ultrawide each showed visibly
   different framing of the same clip. contain always shows the whole
   frame, identically, just scaled differently; the letterboxing (top/
   bottom on close-to-square screens, sides on ultrawide) fills with
   #020103 to match the rest of the site's near-black surfaces instead
   of showing a hard edge. */
@media (min-width: 769px) and (orientation: landscape){
  .hero-video,
  .hero-endframe{
    object-fit: contain;
    background: #020103;
  }
}
.hero-endframe{ z-index:0; opacity:1; transition: opacity .6s ease; }
.hero-video{ z-index:1; opacity:0; transition: opacity .9s ease, filter .18s ease; }
.hero-video.is-playing{ opacity:1; }
.hero-video--loop{ transition: opacity .18s ease, filter .18s ease; }
/* Blur kicks in at the 14s mark of the main clip (main.js), well before
   the loop hand-off — full-bleed, the whole background, not just a patch
   behind the text — so the event title/date/CTA are already readable
   long before the clip settles into its endless loop. Once triggered it
   stays applied through the loop too, via the same .hero-bg class. */
.hero-bg.is-blurred .hero-video,
.hero-bg.is-blurred .hero-video--loop{ filter: blur(11.34px); }
@media (prefers-reduced-motion: reduce){
  .hero-video,
  .hero-video--loop{ transition: opacity .18s ease; }
}
.hero-video-tint{
  position:absolute; inset:0;
  background: linear-gradient(to bottom,
    rgba(2,1,3,0.48), rgba(2,1,3,0.64) 55%, rgba(2,1,3,0.82));
}
.hero-mute{
  position:absolute; right:16px; bottom:20px; z-index:2;
  width:38px; height:38px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in oklab, var(--background) 80%, transparent);
  border:1px solid color-mix(in oklab, var(--foreground) 22%, transparent);
  color: color-mix(in oklab, var(--foreground) 78%, transparent);
  cursor:pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.hero-mute:hover{
  color: var(--foreground);
  border-color: color-mix(in oklab, var(--foreground) 45%, transparent);
}
.hero-mute svg{ width:16px; height:16px; display:block; }
@media (prefers-reduced-motion: reduce){
  header.topnav{ transition: none; }
  .hero-video{ display:none; }          /* no autoplaying footage — the still stands in */
}
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; border:1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  background:transparent; padding: 16px 34px;
  font-family: var(--font-display);
  font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--primary); transition: all .2s; cursor:pointer;
}
.btn-outline:hover{ background: color-mix(in oklab, var(--primary) 10%, transparent); }
.btn-solid{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; background: var(--primary); border:none;
  padding: 16px 34px;
  font-family: var(--font-display);
  font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--primary-foreground); transition: all .2s; cursor:pointer;
}
.btn-solid:hover{ background: color-mix(in oklab, var(--primary) 90%, transparent); }
/* Hero centerpiece — just the three equal-weight CTA blocks, vertically
   centered in the hero via .hero's own flex centering (no headline/
   subline above them any more, no other markup to center them against).
   No longer tied to FEATURED_EVENT (see main.js) — edit this markup by
   hand whenever the "next event" messaging itself changes. */
.hero-event{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
/* Four equal-width/height blocks (not auto-sized to each one's own text)
   so none reads as more important than the others — 2x2 on desktop,
   stacks to one column when that won't fit comfortably. */
.hero-event-ctas{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  width: 100%;
  max-width: 640px;
}
@media (max-width: 560px){
  .hero-event-ctas{ grid-template-columns: 1fr; }
}
/* Tighter side padding than a lone hero CTA needs — these sit in
   equal-width grid columns now, and the longer labels ("Your Skill.
   Our Next Stage.") need the room to wrap onto a second line cleanly. */
.hero-event-ctas .hero-signup-btn{ padding: 20px 24px; text-align:center; }
/* Same electric hybrid glow the old ticket badge used, carried over onto
   this bigger button so the "elektrisch" brand character stays intact. */
.hero-signup-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:#020103; border:2px solid var(--kafou-pink); border-radius:10px;
  padding: 20px 52px;
  color: var(--kafou-pink); font-weight:800; font-family:var(--font-display);
  font-size: clamp(15px, 2vw, 19px); letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  animation: hybrid 4.5s ease-in-out infinite;
}
/* Hover: stop the pulse (animation:none, not just paused — a paused
   animation still wins the cascade for whatever box-shadow it was mid-
   interpolation on, which fought this rule) and hold the same white-hot
   flash the "hybrid" animation already hits on its own. */
.hero-signup-btn:hover{
  animation: none;
  color:#ffffff; border-color:#ffffff;
  box-shadow: 0 0 34px rgba(255,255,255,0.9), 0 0 70px rgba(226,47,153,0.6);
  text-shadow: 0 0 14px rgba(255,255,255,1);
}
@media (max-width: 560px){
  .hero-signup-btn{ padding:16px 34px; font-size:14px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-signup-btn{
    animation: none;
    box-shadow: 0 0 12px rgba(226,47,153,0.45);
    text-shadow: 0 0 6px rgba(226,47,153,0.6);
  }
  .hero-signup-btn:hover{
    box-shadow: 0 0 20px rgba(226,47,153,0.75);
    text-shadow: 0 0 10px rgba(226,47,153,0.8);
  }
}
@keyframes hybrid{
  0%{
    box-shadow: 0 0 10px rgba(226,47,153,0.5), 0 0 24px rgba(226,47,153,0.2);
    text-shadow: 0 0 6px rgba(226,47,153,0.7);
  }
  38%{
    box-shadow: 0 0 26px rgba(226,47,153,0.9), 0 0 55px rgba(226,47,153,0.4);
    text-shadow: 0 0 12px rgba(226,47,153,0.9), 0 0 24px rgba(226,47,153,0.4);
  }
  52%{ opacity: 0.35; box-shadow: none; text-shadow: none; }
  55%{
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0 34px rgba(255,255,255,0.9), 0 0 70px rgba(226,47,153,0.6);
    text-shadow: 0 0 14px rgba(255,255,255,1);
  }
  58%{ opacity: 0.25; box-shadow: none; text-shadow: none; }
  62%{
    color: #e22f99;
    border-color: #e22f99;
    box-shadow: 0 0 18px rgba(226,47,153,0.7), 0 0 36px rgba(226,47,153,0.25);
    text-shadow: 0 0 8px rgba(226,47,153,0.7);
  }
  100%{
    box-shadow: 0 0 10px rgba(226,47,153,0.5), 0 0 24px rgba(226,47,153,0.2);
    text-shadow: 0 0 6px rgba(226,47,153,0.7);
  }
}
.scroll-hint{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  animation: bounce 1s infinite;
}
.scroll-hint svg{ height:24px; width:24px; color: color-mix(in oklab, var(--primary) 60%, transparent); }
@keyframes bounce{
  0%,100%{ transform: translateX(-50%) translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); }
  50%{ transform: translateX(-50%) translateY(0); animation-timing-function: cubic-bezier(0,0,.2,1); }
}

/* ============================================================
   FEATURED EVENT  (content comes from the featuredEvent object in JS)
   Poster is shown in full — framed, not cropped — next to the details.
   ============================================================ */
.featured{
  position:relative; overflow:hidden;
  padding-block: clamp(72px, 10vh, 128px);
}
.featured-layout{
  display:grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
/* No event announced yet (FEATURED_EVENT is null in main.js): the poster
   column is hidden, so collapse to one centered column instead of
   leaving its grid track as empty space. */
.featured-layout.featured-empty{
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.featured-layout.featured-empty .featured-inner{
  align-items: center;
}
.featured-poster{
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
  box-shadow: 0 0 50px -20px color-mix(in oklab, var(--kafou-pink) 45%, transparent);
}
.featured-poster img,
.featured-poster video{
  display:block; width:100%; height:auto;
}
.featured-inner{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:18px;
}
.featured-title{
  font-size: clamp(30px, 5vw, 56px); font-weight:700;
  text-transform:uppercase; line-height:1.1; letter-spacing:-0.025em;
}
.featured-formats{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
/* Shared look for every chip (linked or not) — an <a> for formats with
   an Instagram post (Music, Screening), a plain <span> otherwise (Art),
   so only the actually-clickable ones can ever match `a.format-chip`
   below. That's what keeps the hover state exclusive to the linked
   chips without a separate "is this clickable" flag anywhere. */
.format-chip{
  display:inline-flex; align-items:center; gap:4px;
  font-family: var(--font-display);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em;
  color: var(--primary);
  border:1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  border-radius:4px; padding:5px 10px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.format-chip-arrow{
  display:inline-block; opacity:0; transform: translateX(-2px);
  transition: opacity .2s ease, transform .2s ease;
}
a.format-chip:hover{
  background: var(--primary); color: var(--primary-foreground);
  border-color: var(--primary);
  transform: translateY(-2px);
}
a.format-chip:hover .format-chip-arrow{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .format-chip, .format-chip-arrow{ transition:none; }
  a.format-chip:hover{ transform:none; }
}
.featured-date{
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 20px); font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em; color: var(--foreground);
}
/* Real address now (not a placeholder) — same secondary tone used
   everywhere else for supporting info (e.g. .frame-meta). */
.featured-location{ font-size:15px; color: var(--muted-foreground); }
.featured-location a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--kafou-pink) 55%, transparent);
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.featured-location a:hover{ color: var(--primary); }
.featured-cta{ margin-top:6px; }

@media (max-width: 860px){
  .featured-layout{ grid-template-columns: 1fr; }
  .featured-poster{ max-width: 340px; margin: 0 auto; }
  .featured-inner{ align-items: center; text-align: center; }
  .featured-formats{ justify-content: center; }
}

/* ============================================================
   ABOUT — Intro (kicker + big sentence-headline + prominent subline),
   Mission/Format body copy, Stance, "Bring your..." callout, closing
   mantra, then the Values grid.
   ============================================================ */
.about-intro{ max-width: 920px; }
.about-intro > * + *{ margin-top: 20px; }
/* Shared "shout" treatment for full-sentence headline moments that
   aren't the page hero but should read with the same bold/uppercase
   weight — the intro line here and the "Bring your..." callout later
   on this page both use it. */
.about-shout{
  font-family: var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: clamp(28px, 4.5vw, 52px); line-height:1.15; letter-spacing:-0.015em;
  color: var(--foreground);
}
.about-intro-sub{
  font-size: clamp(17px, 2vw, 22px); font-weight:500; line-height:1.5;
  color: var(--foreground);
}
.about-copy{ margin-top:56px; max-width: 760px; font-size:18px; line-height:1.625; color: var(--muted-foreground); }
.about-copy > * + *{ margin-top: 24px; }
.about-copy b{ font-weight:700; color: var(--foreground); }
.about-copy em{ color: var(--primary); font-style: italic; }

/* "Bring your..." mid-page callout — same shout treatment, its own
   breathing room since it isn't part of a paragraph flow. */
.about-callout{ margin-top:72px; max-width: 760px; }

/* Closing mantra: centered, the biggest statement on the page after the
   hero itself — the "crowning" line right before Values. */
.about-mantra{
  margin-top:72px; text-align:center;
  font-family: var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: clamp(30px, 5.5vw, 60px); line-height:1.25; letter-spacing:-0.015em;
  color: var(--foreground);
}

.values-eyebrow{ margin-top: 72px; }
.values-grid{ margin-top: 24px; display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.value-card{
  border-radius:6px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--card) 50%, transparent);
  padding: 24px;
  transition: border-color .2s ease, background-color .2s ease;
}
.value-card:hover{
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  background-color: color-mix(in oklab, var(--card) 62%, transparent);
}
.value-card-title{
  font-size:18px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.025em; color: var(--foreground);
}
.value-card-desc{ margin-top:8px; font-size:14px; line-height:1.55; color: var(--muted-foreground); }

/* ============================================================
   STANCE — a second, smaller "hero moment": a loud headline plus a
   short, unambiguous list. Deliberately plainer than the hero itself
   (no glow/animation) so it reads as a statement, not a sales pitch.
   ============================================================ */
.stance-intro{ max-width: 640px; font-size:18px; line-height:1.625; color: var(--muted-foreground); }
.stance-intro + .eyebrow{ margin-top:28px; }
.stance-headline{
  margin-top:20px;
  font-family: var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: clamp(40px, 8vw, 96px); line-height:0.95; letter-spacing:-0.02em;
  color: var(--foreground);
}
.stance-list{
  list-style:none; margin:32px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.stance-list li{
  display:flex; align-items:center; gap:14px;
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(18px, 2.4vw, 26px); color: var(--foreground);
}
/* Same diamond mark used for the active-nav-link indicator (a rotated
   square, not a text glyph) — see .nav-marker. */
.stance-list li::before{
  content:""; flex-shrink:0;
  width:9px; height:9px; background: var(--kafou-pink);
  transform: rotate(45deg);
}
.stance-closing{
  margin-top:28px; font-size:16px; color: var(--muted-foreground);
}

/* ============================================================
   EVENT TIMELINE — "filmstrip" of past events, each -> its Flashback
   recap. Shared between events.html (#lastEventsList) and flashback.html
   (#flashbackGrid) via eventRecapCard() in main.js. Horizontal row
   connected by a pink rail on desktop; stacks to a vertical column with
   a vertical rail on mobile (see the max-width:760px block below).
   Each card draws its OWN rail segment (extending into the gutter on
   either side of it) rather than one absolutely-positioned line spanning
   the whole container — that way the rail still lines up correctly if
   cards ever wrap to a second row, with no JS measuring involved.
   HALF_GAP below (24px) must match the frame-card side margin and the
   frame-dot-row's overflow amount — they're written right next to each
   other so it's easy to keep them in sync if that spacing ever changes. */
.event-timeline{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:flex-start;
  padding-block: 12px;
}
.frame-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:220px; margin: 0 24px /* = HALF_GAP */; text-decoration:none;
}
.frame-box{
  position:relative;
  width:100%; aspect-ratio: 3 / 4; overflow:hidden;
  background:#020103;
  border: 3px solid #020103;
  outline: 2px solid var(--kafou-pink);
  outline-offset: -2px;
  box-shadow: 0 0 30px -12px color-mix(in oklab, var(--kafou-pink) 60%, transparent);
  transition: box-shadow .25s ease, outline-color .25s ease;
}
.frame-card:hover .frame-box{
  outline-color: #ffffff;
  box-shadow: 0 0 40px -10px color-mix(in oklab, var(--kafou-pink) 80%, transparent);
}
.frame-box img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Film-perforation strip along the top/bottom edge — a dashed line of
   "sprocket holes" poking slightly past the frame's own width, the way
   actual filmstrip perforations run past the picture area. */
.frame-box::before,
.frame-box::after{
  content:"";
  position:absolute; left:-14px; right:-14px; height:10px;
  background: repeating-linear-gradient(to right, var(--kafou-pink) 0 6px, transparent 6px 14px);
}
.frame-box::before{ top:-16px; }
.frame-box::after{ bottom:-16px; }
/* The connecting rail + the dot sitting on it. */
.frame-dot-row{
  position:relative;
  width:100%; height:28px; margin-top:24px;
  display:flex; align-items:center; justify-content:center;
}
.frame-dot-row::before{
  content:"";
  position:absolute; left:-24px /* = HALF_GAP */; right:-24px /* = HALF_GAP */; top:50%;
  height:2px; transform:translateY(-50%);
  background: color-mix(in oklab, var(--kafou-pink) 55%, transparent);
}
.frame-dot{
  position:relative; width:14px; height:14px; border-radius:50%;
  background:#050206; border:2px solid var(--kafou-pink);
}
.frame-info{ margin-top:4px; }
.frame-title{
  font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:14px; letter-spacing:0.02em; color: var(--foreground);
}
.frame-meta{ margin-top:4px; font-size:12px; color: var(--muted-foreground); }
/* Always-visible click signal (not hover-only — hover doesn't exist on
   touch), a plain small label rather than a boxed badge so it reads as
   part of the title/date caption instead of a layer on top of the frame. */
.frame-link-label{
  display:inline-block; margin-top:8px;
  font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:11px; letter-spacing:0.08em; color: var(--kafou-pink);
}
@media (prefers-reduced-motion: reduce){
  .frame-box{ transition:none; }
}
@media (max-width: 760px){
  /* The per-card rail segment above (extending left/right into the
     horizontal gutter) can't just flip to top/bottom here: on mobile the
     gap between stacked cards sits AFTER each card's title/date/label
     text, not right after the dot, so a segment anchored to the dot
     would fall well short of actually reaching the next card. Instead,
     one continuous rail runs the full height of the timeline, behind
     everything (z-index:0); each card sits above it (z-index:1) and
     naturally occludes it except where there's nothing opaque in the
     way — i.e. it shows through in the gaps between cards and faintly
     behind the text captions, same idea as the dot "sitting on" the
     rail on desktop. */
  .event-timeline{ flex-direction:column; align-items:center; position:relative; }
  .event-timeline::before{
    content:"";
    position:absolute; left:50%; top:0; bottom:0; width:2px;
    transform:translateX(-50%);
    background: color-mix(in oklab, var(--kafou-pink) 55%, transparent);
  }
  .frame-card{
    position:relative; z-index:1;
    width:100%; max-width:280px; margin: 28px 0;
  }
  .frame-dot-row::before{ content:none; }
}

/* ============================================================
   THE CREW
   ============================================================ */
.artist-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; align-items:start; }
.artist-card{
  display:flex; flex-direction:column;
  border-radius:6px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--card) 40%, transparent);
  padding:24px;
  transition: border-color .2s ease, background-color .2s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.artist-card:hover{
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  background-color: color-mix(in oklab, var(--card) 62%, transparent);
}
/* "Photo developing" reveal: cards render already in their final shuffled
   order (see shuffle(CREW) in main.js), so this is purely a staggered
   filter/opacity fade-in, not a reorder — .is-revealed is added per card
   via a short setTimeout stagger right after render.
   The blur/opacity transition lives on this INNER wrapper, deliberately
   not on .artist-card itself (the actual CSS grid item). Animating filter
   directly on a grid item made Chromium recompute the grid's auto row
   height every frame of the blur transition, which visibly scrambled
   every card's position until the transition settled. This wrapper is
   fully contained inside the grid item's fixed box, so the grid layout
   never moves during the animation. */
.artist-card-reveal{
  display:flex; flex-direction:column;
  opacity: 0;
  filter: blur(8px) grayscale(1) brightness(.4);
  transition: opacity .5s ease-out, filter .5s ease-out;
}
.artist-card-reveal.is-revealed{ opacity: 1; filter: blur(0) grayscale(0) brightness(1); }
@media (prefers-reduced-motion: reduce){
  .artist-card-reveal{ opacity: 1; filter: none; transition: none; }
}
/* Framed photo. If the file is missing the <img> hides itself (onerror) and
   this stays as a tinted placeholder — no broken-image icon. */
.artist-photo{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(226, 47, 153, 0.35);
  background: #020103;
  margin-bottom: 16px;
}
.artist-photo img{
  display:block; width:100%; height:100%;
  object-fit: cover; object-position: center;
}
.artist-name-row{ display:flex; align-items:center; gap:10px; }
.artist-name{ font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.025em; }
.artist-alias{ font-size: 0.8em; color: var(--primary); }
/* Instagram link: dezent, near-black chip so it doesn't compete with
   the discipline tag below it — a quiet color/glow shift on hover is
   the only thing that changes. */
.artist-instagram{
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; width:26px; height:26px; border-radius:6px;
  background:#020103; border:1px solid color-mix(in oklab, var(--primary) 35%, transparent);
  color: color-mix(in oklab, var(--muted-foreground) 70%, var(--foreground));
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.artist-instagram:hover{
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 14px -4px color-mix(in oklab, var(--kafou-pink) 70%, transparent);
}
.artist-instagram svg{ width:15px; height:15px; }
.artist-discipline{
  display:inline-block; margin-top:12px;
  font-family: var(--font-display);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em;
  color: var(--primary);
  border:1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  border-radius:4px; padding:4px 9px;
}
.artist-bio-wrap{ margin-top:14px; }
.artist-bio{ font-size: 14px; line-height: 1.65; color: var(--muted-foreground); }
.artist-bio + .artist-bio{ margin-top: 10px; }
.artist-bio-soon{
  margin-top:14px; font-size:13px; font-style:italic; color: var(--muted-foreground);
}

/* ============================================================
   SUPPORT
   ============================================================ */
.support-box{
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid color-mix(in oklab, var(--primary) 20%, transparent);
  background: color-mix(in oklab, var(--card) 40%, transparent);
  padding: clamp(28px, 5vw, 64px);
}
.support-box .sheen{
  pointer-events:none; position:absolute; right:-15%; top:0; height:100%; width:55%;
  background: radial-gradient(60% 80% at 100% 40%,
    color-mix(in oklab, var(--kafou-pink) 5%, transparent), transparent 70%);
}
.support-grid{ position:relative; display:grid; grid-template-columns: repeat(2,1fr); gap:64px; }
.support-left > * + *{ margin-top:24px; }
.support-headline{
  font-size: clamp(28px, 4.5vw, 48px); font-weight:700; text-transform:uppercase;
  line-height:1.25; letter-spacing:-0.025em;
}
.support-copy{ font-size:18px; line-height:1.625; color: var(--muted-foreground); }
.support-right{ display:flex; flex-direction:column; justify-content:center; }
.support-right > * + *{ margin-top: 40px; }
.impact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.impact-card{
  border-radius:6px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--background) 50%, transparent);
  padding:20px;
}
.impact-amount{ font-family: var(--font-display); font-size:24px; font-weight:700; color: var(--primary); }
.impact-label{
  margin-top:8px; font-size:12px; font-weight:700; text-transform:uppercase;
  line-height:1.375; letter-spacing:0.05em; color: var(--muted-foreground);
}
.btn-support{
  display:inline-flex; align-self:flex-start; align-items:center; justify-content:center;
  border-radius:6px; border:2px solid var(--primary); background:transparent;
  padding: 20px 48px; cursor:pointer;
  font-family: var(--font-display);
  font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--primary); transition: all .2s;
}
.btn-support:hover{ background: var(--primary); color: var(--primary-foreground); }

/* ============================================================
   FLASHBACK — overview grid + in-page detail view (main.js swaps
   [hidden] on these two sections; JS also toggles .in for the fade,
   independent of the generic .reveal scroll system since it needs to
   re-run every time a view is shown, not just once on first scroll).
   ============================================================ */
.flashback-view{
  opacity:0; transform: translateY(16px);
  transition: opacity .35s ease, transform .35s ease;
}
.flashback-view.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .flashback-view{ transition:none; }
}
.flashback-back{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:32px; padding:0; border:none; background:none; cursor:pointer;
  font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:13px; letter-spacing:0.08em; color: var(--kafou-pink);
  transition: gap .2s ease, color .2s ease;
}
.flashback-back:hover{ gap:12px; color: var(--foreground); }
.flashback-back svg{ width:16px; height:16px; flex-shrink:0; }
.flashback-detail-meta{
  margin-top:16px; font-size:14px; font-weight:600;
  letter-spacing:0.02em; color: var(--kafou-pink);
}
.flashback-venue-link{
  color:inherit;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px;
  transition: color .2s ease;
}
.flashback-venue-link:hover, .flashback-venue-link:focus-visible{ color: var(--foreground); }
.flashback-venue-link:focus-visible{ outline:2px solid var(--kafou-pink); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .flashback-venue-link{ transition:none; }
}
.flashback-detail-lineup{ margin-top:28px; }
/* Lineup/Art Shop labels only — the shared .eyebrow class elsewhere on
   the site (section heads, about.html, etc.) stays pink. */
.flashback-pill-group .eyebrow{ color:#FFFFFF; }
.flashback-pill-group + .flashback-pill-group{ margin-top:32px; }
.flashback-detail-lineup-text{
  margin-top:16px; font-size:15px; color: var(--muted-foreground);
}
.flashback-pill-wrap{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:16px;
}
.flashback-pill{
  display:inline-flex; align-items:center;
  background:transparent; border:1.5px solid var(--kafou-pink); color: var(--kafou-pink);
  border-radius:999px; padding:10px 20px;
  font-size:16px; font-weight:700; letter-spacing:-0.01em;
  text-decoration:none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.flashback-pill:hover, .flashback-pill:focus-visible{
  background: var(--kafou-pink); color: var(--primary-foreground);
  transform: translateY(-2px);
}
.flashback-pill:focus-visible{ outline:2px solid var(--kafou-pink); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .flashback-pill{ transition:none; }
  .flashback-pill:hover{ transform:none; }
}
/* Replaces the poster in the detail view — the poster stays visible only
   on the overview card (eventRecapCard() in main.js, the click hook);
   here it gives way to a short, emotional intro instead. First line
   reuses the site's bold/uppercase headline voice, the rest reads as
   normal body copy (.lead, same class the old recap text used). */
.flashback-detail-headline{
  margin-top:28px;
  font-family: var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: clamp(22px, 3vw, 30px); letter-spacing:-0.01em; color: var(--foreground);
}
.flashback-detail-meta + .lead,
.flashback-detail-lineup + .lead,
.flashback-detail-headline + .lead{ margin-top:12px; }

/* The Flashback detail view's photo gallery itself (mosaic grid +
   lightbox) now lives entirely in assets/gallery.css / assets/
   gallery.js (KafouGallery) — shared by every event automatically. */

/* ============================================================
   FORM PRIMITIVES (shared: Stay Kafou modal, Join, Talk To Us)
   ============================================================ */
.stay-form{ display:flex; flex-direction:row; gap:12px; }
.field{
  border-radius:6px; border:1px solid var(--input);
  background: var(--background); padding: 12px 16px;
  font-family: var(--font-body); font-size:14px; color: var(--foreground);
}
.field::placeholder{ color: var(--muted-foreground); }
.field:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.stay-form .field{ flex:1; }
.btn-md{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; background: var(--primary); border:none; padding: 12px 32px;
  font-family: var(--font-display);
  font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--primary-foreground); transition: all .2s; cursor:pointer;
}
.btn-md:hover{ background: color-mix(in oklab, var(--primary) 90%, transparent); }

/* ============================================================
   MODAL — Stay Kafou newsletter + support "not live yet" notice
   ============================================================ */
.dialog{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding: 0 24px; }
.dialog.open{ display:flex; }
.dialog-scrim{
  position:absolute; inset:0; border:none; cursor:pointer;
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(4px);
}
.dialog-panel{
  position:relative; width:100%; max-width: 512px;
  border-radius:12px; border:1px solid var(--border);
  background: var(--card); padding:40px; text-align:left;
}
.dialog-x{
  position:absolute; top:14px; right:16px;
  width:32px; height:32px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  font-size:24px; color: var(--muted-foreground);
}
.dialog-x:hover{ color: var(--foreground); }
.dialog-panel h3{
  margin-top:12px; font-size:30px; font-weight:700;
  text-transform:uppercase; letter-spacing:-0.025em;
}
.dialog-eyebrow{
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; color: var(--primary);
}
.dialog-panel .intro{
  margin-top:12px; font-size:14px; line-height:1.625; color: var(--muted-foreground);
}
.dialog-panel .stay-form{ margin-top:24px; }
/* Event Sign Up modal: two stacked fields + button, not the single-row
   layout the newsletter form uses. */
.event-form{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.event-form .field{ width:100%; }
.event-form .btn-md{ margin-top:4px; }
.dialog-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:8px; margin-top:24px; }
.link-btn{
  background:none; border:none; cursor:pointer;
  font-family: var(--font-display);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--muted-foreground);
}
.link-btn:hover{ color: var(--foreground); }
.dialog-sent{
  margin-top:32px; font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em; color: var(--primary);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{ position:relative; border-top:1px solid var(--border); padding: clamp(40px, 7vw, 64px) clamp(20px, 5vw, 40px); }
.footer-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:64px; }
.footer-left > * + *{ margin-top:24px; }
.footer-logo{ display:flex; align-items:baseline; gap:12px; }
.footer-logo .a{
  font-family: var(--font-display); font-size:36px; font-weight:700;
  letter-spacing:0.12em; color: var(--foreground);
}
.footer-logo .b{
  font-family: var(--font-display); font-size:36px; font-weight:700;
  letter-spacing:0.12em; color: var(--muted-foreground);
}
.footer-contact{ font-size:14px; color: var(--muted-foreground); }
.footer-contact > * + *{ margin-top:12px; }
.footer-contact .k{ color: var(--foreground); }
.footer-contact a{ color: var(--primary); }
.footer-contact a:hover{ text-decoration: underline; }
/* Email: a standalone bordered chip (icon + address) instead of a
   plain text line, so it reads as its own contact element at a
   glance rather than blending in between the other footer text. */
.footer-email-chip{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:8px; border:1px solid color-mix(in oklab, var(--primary) 35%, transparent);
  background: color-mix(in oklab, var(--card) 45%, transparent);
  padding:10px 16px;
  font-family: var(--font-display); font-size:15px; font-weight:600;
  color: var(--foreground);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.footer-email-chip:hover{
  border-color: var(--primary); color: var(--primary);
  background: color-mix(in oklab, var(--card) 65%, transparent);
}
.footer-email-chip svg{ width:17px; height:17px; color: var(--primary); flex-shrink:0; }
/* Talk-to-us: padded + bordered like a small secondary button, with an
   arrow that slides in on hover, so it reads as clickable rather than
   as a plain heading. */
.footer-talk{ margin-top:16px; }
.footer-talk a{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:8px; border:1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  padding:10px 16px;
  font-family: var(--font-display);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em;
  color: var(--foreground);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.footer-talk a:hover{
  border-color: var(--primary); color: var(--primary);
  background: color-mix(in oklab, var(--primary) 8%, transparent);
}
.footer-talk-arrow{
  display:inline-block; opacity:0; transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.footer-talk a:hover .footer-talk-arrow{ opacity:1; transform:none; }
.footer-right{ display:flex; flex-direction:column; align-items:flex-end; gap:24px; text-align:right; }
.qr-row{ display:flex; flex-direction:row-reverse; align-items:center; gap:16px; }
.qr-box{
  display:flex; height:96px; width:96px; align-items:center; justify-content:center;
  border-radius:6px; border:1px dashed color-mix(in oklab, var(--primary) 40%, transparent);
  background: color-mix(in oklab, var(--card) 40%, transparent);
  font-size:12px; color: var(--muted-foreground); flex-shrink:0;
}
.qr-note{ max-width:256px; font-size:12px; line-height:1.625; color: var(--muted-foreground); }
.footer-bottom{
  margin-top:64px; display:flex; flex-direction:row; align-items:center;
  justify-content:space-between; gap:16px;
  border-top:1px solid var(--border); padding-top:32px;
  font-size:12px; color: var(--muted-foreground);
}
.footer-bottom .tag{ text-transform:uppercase; letter-spacing:0.05em; }
.footer-legal-link{
  margin-left:6px; color: var(--foreground); font-weight:700;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--kafou-pink) 55%, transparent);
  transition: color .2s ease;
}
.footer-legal-link:hover{ color: var(--primary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .support-grid, .footer-grid{ grid-template-columns: 1fr; gap:40px; }
  .artist-grid, .values-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-right{ align-items:flex-start; text-align:left; }
  /* Tablet/mobile: skip the "photo developing" reveal entirely — cards
     render sharp and at full opacity immediately. The random shuffle
     order (shuffle(CREW) in main.js) still applies on every device; only
     this visual animation is desktop-only. */
  .artist-card-reveal{ filter:none; opacity:1; transition:none; }
}
@media (max-width: 720px){
  .topnav-inner{ padding: 0 24px; }
  .artist-grid, .values-grid, .impact-grid{ grid-template-columns: 1fr; }
  .stay-form{ flex-direction:column; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* Nav + footer are injected by main.js — reserve their height so
   nothing shifts on load. */
header.topnav{ min-height: 92px; }
footer:empty{ min-height: 260px; }

/* Current-page marker in the nav overlay */
.nav-overlay-links a.is-current{
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---- Events page: featured section flows straight into the list ---- */
.featured--lead{ padding-bottom: clamp(44px, 7vh, 80px); }
.events-list-section{ padding-top: clamp(36px, 6vh, 64px); }

.footer-logo{ text-decoration: none; }
.footer-logo:hover .a{ color: var(--primary); transition: color .2s ease; }

/* ---- Support section: honest note under the CTA ---- */
.support-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.support-note{
  max-width: 40ch;
  font-size: 13px; line-height: 1.6;
  color: var(--muted-foreground);
}
/* Amount cards are buttons now — they open the "not live yet" notice. */
.impact-card{
  width:100%; text-align:left; cursor:pointer;
  font:inherit; color:inherit; -webkit-appearance:none; appearance:none;
  display:flex; flex-direction:column; gap:8px;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.impact-card .impact-amount,
.impact-card .impact-label{ display:block; }
.impact-card .impact-label{ margin-top:0; }
.impact-note{ font-size:13px; line-height:1.6; color: var(--muted-foreground); }
.support-right > .impact-note{ margin-top:16px; }
.impact-card:hover{
  border-color: color-mix(in oklab, var(--primary) 45%, transparent);
  background-color: color-mix(in oklab, var(--background) 70%, transparent);
  transform: translateY(-2px);
}
.impact-card:focus-visible{
  outline:none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary);
}

/* ---- Join Us / Talk To Us: intro + form, side by side ---- */
.join-layout{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 72px); align-items:start;
}
.join-title{
  font-size: clamp(36px, 6vw, 68px); font-weight:700;
  text-transform:uppercase; line-height:1.05; letter-spacing:-0.03em;
  margin-top: 14px;
}
.join-copy{
  margin-top: 24px; max-width: 44ch;
  font-size: clamp(15px, 1.8vw, 18px); line-height:1.7; color: var(--muted-foreground);
}
.join-intro-cta{ margin-top: 28px; }
.join-form-wrap{
  border-radius:12px; border:1px solid var(--border);
  background: color-mix(in oklab, var(--card) 40%, transparent);
  padding: clamp(24px, 4vw, 44px);
}
.join-form .row + .row{ margin-top:20px; }
.join-form label{
  display:block; margin-bottom:8px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--foreground);
}
.join-form .field{ width:100%; }
.join-form textarea.field{ resize:vertical; min-height:120px; }
.join-form .btn-md{ margin-top:24px; }
.form-note{
  margin-top:16px; font-size:13px; line-height:1.6; color: var(--muted-foreground);
}
.form-note a{ color: var(--primary); }
/* Honeypot — kept in the DOM for bots, out of sight for people. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width: 860px){
  .join-layout{ grid-template-columns: 1fr; gap:32px; }
}

/* ---- Join Us: full application form (join.html) ---- */
.join-page{ max-width: 820px; margin: 0 auto; }
.join-intro--lead{ margin-bottom: clamp(40px, 7vw, 72px); }
.join-intro--lead .join-copy{ max-width: 54ch; }

.apply-form{ display:block; }
.apply-block{
  border:1px solid color-mix(in oklab, var(--primary) 20%, transparent);
  border-radius:16px;
  background: color-mix(in oklab, var(--card) 40%, transparent);
  padding: clamp(24px, 4vw, 40px);
  margin:0;
}
.apply-block + .apply-block{ margin-top: clamp(28px, 4vw, 44px); }
.apply-block > .eyebrow{ margin-bottom: 24px; }
.apply-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.apply-grid .row--full{ grid-column: 1 / -1; }

.apply-form .row + .row{ margin-top:20px; }
.apply-grid .row + .row{ margin-top:0; }   /* grid gap handles spacing */
.apply-form label{
  display:block; margin-bottom:8px;
  font-family: var(--font-display);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--foreground);
}
.apply-form .req{ color: var(--primary); }
.apply-form .field{ width:100%; }
.apply-form textarea.field{ resize:vertical; min-height:120px; }
.apply-form select.field{
  appearance:none; -webkit-appearance:none;
  padding-right: 40px; cursor:pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23e22f99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center;
}

/* Toggle chips for "areas of interest" */
.chip-set{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family: var(--font-display);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color: var(--primary);
  background: transparent;
  border:1px solid color-mix(in oklab, var(--primary) 45%, transparent);
  border-radius:999px; padding:8px 16px; cursor:pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover{ border-color: var(--primary); }
.chip.is-on{
  background: var(--primary); color: var(--primary-foreground); border-color: var(--primary);
}

.apply-submit{ margin-top: clamp(28px, 4vw, 40px); padding: 14px 40px; }
.apply-form .form-note{
  color: color-mix(in oklab, var(--foreground) 70%, var(--primary));
}

.apply-sent{
  border:1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  border-radius:12px;
  background: color-mix(in oklab, var(--card) 40%, transparent);
  padding: clamp(36px, 6vw, 64px);
  text-align:center;
}
.apply-sent-title{
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px); font-weight:700;
  text-transform:uppercase; letter-spacing:-0.02em; color: var(--primary);
}
.apply-sent-copy{ margin-top:12px; font-size:16px; color: var(--muted-foreground); }

@media (max-width: 640px){
  .apply-grid{ grid-template-columns: 1fr; }
  .apply-grid .row + .row{ margin-top:20px; }
}

/* ---- page arrows: fixed prev/next between the main pages ---- */
.page-arrow{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1.5px solid color-mix(in oklab, var(--kafou-pink) 55%, transparent);
  background: rgba(2,1,3,0.6);
  color: var(--kafou-pink);
  backdrop-filter: blur(6px);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.page-arrow--prev{ left: 20px; }
.page-arrow--next{ right: 20px; }
.page-arrow-icon{ width: 20px; height: 20px; }
.page-arrow-icon svg{ width: 100%; height: 100%; display: block; }
.page-arrow:hover,
.page-arrow:focus-visible{
  border-color: var(--kafou-pink);
  background: rgba(2,1,3,0.8);
  box-shadow: 0 0 22px -2px color-mix(in oklab, var(--kafou-pink) 65%, transparent);
}
.page-arrow-tip{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--foreground);
  background: rgba(2,1,3,0.88);
  border: 1px solid color-mix(in oklab, var(--kafou-pink) 35%, transparent);
  border-radius: 6px;
  padding: 6px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.page-arrow--prev .page-arrow-tip{ left: calc(100% + 12px); }
.page-arrow--next .page-arrow-tip{ right: calc(100% + 12px); }
.page-arrow:hover .page-arrow-tip,
.page-arrow:focus-visible .page-arrow-tip{ opacity: 1; }

/* Narrow viewports: side placement at mid-height would sit over form
   fields and body copy, so the arrows move to the bottom corners
   instead, smaller and out of the way of the content column. */
@media (max-width: 640px){
  .page-arrow{
    top: auto;
    bottom: 14px;
    transform: none;
    width: 40px;
    height: 40px;
  }
  .page-arrow--prev{ left: 14px; }
  .page-arrow--next{ right: 14px; }
  .page-arrow-icon{ width: 16px; height: 16px; }
  .page-arrow-tip{
    top: auto;
    bottom: calc(100% + 10px);
    transform: none;
    font-size: 11px;
  }
  .page-arrow--prev .page-arrow-tip{ left: 0; }
  .page-arrow--next .page-arrow-tip{ right: 0; }
}

@media (prefers-reduced-motion: reduce){
  .page-arrow{ transition: none; }
  .page-arrow-tip{ transition: none; }
}

/* ---- privacy page: long-form prose ---- */
.privacy-content{ max-width: 760px; }
.privacy-intro{
  margin-top: 20px;
  font-size: 18px; line-height: 1.625; color: var(--muted-foreground);
}
.privacy-content h2{
  margin-top: 40px;
  font-size: 20px; font-weight: 700; color: var(--foreground);
}
.privacy-content p{
  margin-top: 12px;
  font-size: 16px; line-height: 1.7; color: var(--muted-foreground);
}
.privacy-content ul{
  margin-top: 12px;
  padding-left: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.privacy-content li{ font-size: 16px; line-height: 1.7; color: var(--muted-foreground); }
.privacy-content li::marker{ color: var(--primary); }
.privacy-content b{ font-weight: 700; color: var(--foreground); }
.privacy-content a{ color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.privacy-content a:hover{ color: var(--foreground); }