:root {
      --cream: #FAF4EF;
      --cream-deep: #F4EDD9;
      --ink: #1B1C15;
      --ink-soft: #3a3a32;
      --brown: #A7623B;
      --brown-dark: #8a4f2e;
      --tan: #C99668;
      --pink: #F238C3;
      --pink-deep: #D81FA8;
      --plum: #79185B;
      --orange: #FD8D03;
      --mustard: #D4A017;
      --mustard-deep: #B8860B;
      --yellow: #F2C744;
      --border: rgba(27, 28, 21, 0.08);
      --shadow-sm: 0 1px 2px rgba(27, 28, 21, 0.06);
      --shadow-md: 0 8px 24px rgba(27, 28, 21, 0.08);
      --shadow-lg: 0 20px 60px rgba(27, 28, 21, 0.12);
      --radius: 14px;
      --radius-lg: 24px;
      --radius-pill: 999px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }
    html, body { overflow-x: hidden; max-width: 100vw; }
    img { max-width: 100%; height: auto; display: block; }

    body {
      font-family: 'Inter', -apple-system, system-ui, sans-serif;
      font-size: 15px;
      line-height: 1.65;
      color: var(--ink);
      background: var(--cream);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ===== NAV (floating cream pill, Littlebird style) ===== */
    .nav-wrap {
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 20px 32px;
      pointer-events: none;
    }

    .nav {
      max-width: 1280px;
      margin: 0 auto;
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      padding: 12px 20px 12px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      box-shadow: var(--shadow-sm);
      pointer-events: auto;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--plum);
      font-family: 'Montserrat', system-ui, sans-serif;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    @media (max-width: 760px) {
      .nav-brand { font-size: 13px; gap: 8px; }
    }

    .nav-brand svg {
      width: 28px;
      height: 28px;
      color: var(--brown);
    }

    .nav-brand img {
      width: 34px;
      height: 34px;
      object-fit: contain;
      border-radius: 6px;
    }

    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
    }

    .nav-links a {
      color: var(--ink-soft);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s ease;
    }

    .nav-links a:hover { color: var(--brown); }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
      color: #fff;
      padding: 10px 18px;
      border-radius: var(--radius-pill);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      box-shadow: 0 2px 8px rgba(242, 56, 195, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
      transition: transform 0.15s ease, box-shadow 0.2s ease;
    }

    .nav-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(242, 56, 195, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    }

    .nav-cta::before {
      content: "";
      display: inline-block;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--yellow);
      box-shadow: 0 0 10px rgba(242, 199, 68, 0.85);
    }

    @media (max-width: 760px) {
      .nav-links { display: none; }
      .nav-wrap { padding: 12px 16px; }
    }

    /* ===== BURGER MENU (always visible) ===== */
    .burger-btn {
      appearance: none;
      background: transparent;
      border: 1.5px solid var(--border);
      border-radius: 999px;
      width: 44px; height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease;
      flex-shrink: 0;
    }
    .burger-btn:hover { border-color: var(--plum); background: rgba(121,24,91,0.04); }
    .burger-btn .burger-icon {
      position: relative;
      width: 18px; height: 12px;
      display: block;
    }
    .burger-btn .burger-icon span {
      position: absolute;
      left: 0; right: 0;
      height: 2px;
      background: var(--plum);
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
    }
    .burger-btn .burger-icon span:nth-child(1) { top: 0; }
    .burger-btn .burger-icon span:nth-child(2) { top: 5px; }
    .burger-btn .burger-icon span:nth-child(3) { top: 10px; }
    body.menu-open .burger-btn .burger-icon span:nth-child(1) { top: 5px; transform: rotate(45deg); }
    body.menu-open .burger-btn .burger-icon span:nth-child(2) { opacity: 0; }
    body.menu-open .burger-btn .burger-icon span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

    .menu-drawer {
      position: fixed;
      inset: 0;
      background: rgba(27, 28, 21, 0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 200;
    }
    body.menu-open .menu-drawer { opacity: 1; pointer-events: auto; }

    .menu-panel {
      position: absolute;
      top: 0; right: 0;
      width: min(420px, 92vw);
      height: 100%;
      background: var(--cream);
      box-shadow: -20px 0 60px rgba(27, 28, 21, 0.18);
      padding: 88px 40px 40px;
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
      display: flex;
      flex-direction: column;
      gap: 36px;
    }
    body.menu-open .menu-panel { transform: translateX(0); }

    .menu-section h4 {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--brown);
      margin-bottom: 14px;
    }
    .menu-section ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
    .menu-section a {
      display: block;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 600;
      font-size: 22px;
      letter-spacing: -0.015em;
      color: var(--ink);
      text-decoration: none;
      padding: 10px 0;
      border-bottom: 1px solid transparent;
      transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
    }
    .menu-section a:hover {
      color: var(--plum);
      padding-left: 6px;
    }
    .menu-section a em {
      font-style: italic;
      font-weight: 400;
      color: var(--plum);
    }
    .menu-section.primary a { font-size: 28px; font-weight: 700; }
    .menu-section.primary a strong { font-weight: 900; color: var(--plum); }

    /* Sister-brand block at the bottom of the BGMM drawer (sole link out to BGA) */
    .menu-section.sister {
      margin-top: 8px;
      padding-top: 18px;
      border-top: 1px dashed var(--border);
    }
    .menu-section.sister h4 { color: var(--plum); }
    .menu-section.sister a {
      font-size: 18px;
      font-weight: 600;
      font-style: italic;
      color: var(--plum);
    }
    .menu-section.sister a:hover { color: var(--pink-deep); }

    /* Current-page indicator in BGMM drawer */
    .menu-section a[aria-current="page"] {
      color: var(--plum);
      border-bottom-color: var(--pink);
      padding-left: 6px;
    }

    .menu-cta-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .menu-cta-row a {
      flex: 1 1 auto;
      min-width: 140px;
      text-align: center;
      padding: 12px 18px;
      border-radius: 999px;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-decoration: none;
      border: 1.5px solid var(--plum);
      color: var(--plum);
      transition: background 0.2s ease, color 0.2s ease;
    }
    .menu-cta-row a.is-primary {
      background: var(--plum);
      color: var(--cream);
    }
    .menu-cta-row a:hover { background: var(--plum); color: var(--cream); }
    .menu-cta-row a.is-primary:hover { background: #5a1244; }

    body.menu-open { overflow: hidden; }

    /* ===== HERO ===== */
    .hero {
      padding: 80px 24px 60px;
      text-align: center;
      max-width: 1100px;
      margin: 0 auto;
    }

    .hero-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: var(--ink-soft);
      letter-spacing: 0.01em;
      margin-bottom: 28px;
    }

    .hero h1 {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 400;
      font-size: clamp(56px, 9vw, 120px);
      line-height: 0.96;
      letter-spacing: -0.025em;
      color: var(--brown);
      margin-bottom: 28px;
    }

    .hero h1 em {
      font-style: italic;
      font-weight: 400;
      color: var(--brown-dark);
    }

    .hero-subtitle {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 400;
      font-style: italic;
      font-size: clamp(28px, 4vw, 44px);
      color: var(--brown);
      letter-spacing: -0.01em;
      margin-bottom: 28px;
      display: inline-block;
      background-image: linear-gradient(transparent 78%, rgba(212, 160, 23, 0.45) 78%, rgba(212, 160, 23, 0.45) 92%, transparent 92%);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 0 6px;
    }

    .hero-body {
      font-family: 'Inter', sans-serif;
      font-size: clamp(16px, 1.4vw, 18px);
      line-height: 1.6;
      color: var(--ink);
      max-width: 620px;
      margin: 0 auto 36px;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    .btn-primary {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
      color: #fff;
      padding: 16px 30px;
      border-radius: var(--radius-pill);
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      box-shadow:
        0 4px 14px rgba(242, 56, 195, 0.32),
        0 0 0 3px rgba(242, 199, 68, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.18);
      transition: transform 0.15s ease, box-shadow 0.25s ease;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow:
        0 10px 24px rgba(242, 56, 195, 0.42),
        0 0 0 4px rgba(242, 199, 68, 0.32),
        inset 0 1px 0 rgba(255,255,255,0.22);
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: var(--brown-dark);
      padding: 16px 28px;
      border-radius: var(--radius-pill);
      font-size: 15px;
      font-weight: 500;
      text-decoration: none;
      border: 1.5px solid var(--mustard);
      transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .btn-secondary:hover {
      border-color: var(--mustard-deep);
      background: rgba(212, 160, 23, 0.08);
      color: var(--brown);
    }

    .btn-tertiary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--cream);
      color: var(--plum);
      padding: 16px 26px;
      border-radius: var(--radius-pill);
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      border: 1.5px solid var(--plum);
      transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    .btn-tertiary:hover {
      background: var(--plum);
      color: var(--cream);
      transform: translateY(-2px);
    }

    .hero-watch {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      color: var(--brown);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      opacity: 0.85;
      transition: opacity 0.15s ease;
    }

    .hero-watch:hover { opacity: 1; text-decoration: underline; }

    .hero-waitlist {
      display: block;
      margin-top: 14px;
      color: var(--plum);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-decoration: none;
      border-bottom: 1px dashed var(--plum);
      padding-bottom: 2px;
      width: max-content;
      margin-left: auto;
      margin-right: auto;
    }

    .hero-waitlist:hover { color: var(--pink-deep); border-color: var(--pink-deep); }

    .hero-microcopy {
      font-size: 13px;
      color: var(--ink-soft);
      opacity: 0.7;
    }

    /* ===== HERO IMAGE (full-bleed painterly) ===== */
    .hero-image-wrap {
      max-width: 1480px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .hero-image {
      width: 100%;
      height: auto;
      max-height: 720px;
      object-fit: cover;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      display: block;
    }

    /* ===== SECTIONS ===== */
    .section {
      padding: 120px 24px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-eyebrow {
      text-align: center;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: var(--brown);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .section-title {
      text-align: center;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 400;
      font-size: clamp(40px, 5vw, 64px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--ink);
      max-width: 880px;
      margin: 0 auto 24px;
    }

    .section-intro {
      text-align: center;
      font-size: clamp(16px, 1.3vw, 18px);
      color: var(--ink);
      max-width: 640px;
      margin: 0 auto 64px;
      line-height: 1.6;
    }

    /* ===== TRIFECTA CARDS (Capital · Community · Culture) ===== */
    .trifecta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }

    .trifecta-card {
      background: var(--cream-deep);
      border-radius: var(--radius-lg);
      padding: 40px 32px;
      text-align: center;
      border: 1px solid var(--border);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .trifecta-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--accent, var(--brown));
      opacity: 0.85;
    }

    .trifecta-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .trifecta-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--cream);
      border-radius: 14px;
      color: var(--accent, var(--brown));
      box-shadow: var(--shadow-sm);
    }

    .trifecta-card h3 .accent-dot {
      display: inline-block;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--accent, var(--brown));
      margin-left: 6px;
      vertical-align: middle;
      transform: translateY(-4px);
    }

    .trifecta-icon svg { width: 28px; height: 28px; }

    .trifecta-card h3 {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 400;
      font-size: 32px;
      letter-spacing: -0.01em;
      color: var(--brown);
      margin-bottom: 12px;
    }

    .trifecta-card p {
      font-size: 15px;
      color: var(--ink);
      line-height: 1.6;
    }

    /* ===== JOIN THE CHAAT — link directory ===== */
    .join {
      max-width: 1280px;
      margin: 80px auto 40px;
      padding: 0 32px;
    }
    .join-intro {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 48px;
    }
    .join-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .join-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .join-group-label {
      font-family: var(--font-brand);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--brown);
      margin-bottom: 4px;
      font-weight: 600;
    }
    .join-link {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 18px 22px;
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      text-decoration: none;
      color: var(--ink);
      transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;
      position: relative;
    }
    .join-link:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--plum);
      background: #fff;
    }
    .join-link::after {
      content: "→";
      position: absolute;
      top: 18px;
      right: 22px;
      color: var(--brown);
      font-size: 16px;
      opacity: 0.5;
      transition: opacity 200ms ease, transform 200ms ease;
    }
    .join-link:hover::after {
      opacity: 1;
      transform: translateX(3px);
    }
    .join-link-title {
      font-family: var(--font-brand);
      font-weight: 600;
      font-size: 15px;
      line-height: 1.35;
      color: var(--ink);
      padding-right: 24px;
    }
    .join-link-sub {
      font-family: var(--font-brand);
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink);
      opacity: 0.72;
    }
    .join-link.primary {
      background: var(--plum);
      border-color: var(--plum);
    }
    .join-link.primary .join-link-title,
    .join-link.primary .join-link-sub { color: var(--cream); }
    .join-link.primary .join-link-sub { opacity: 0.85; }
    .join-link.primary::after { color: var(--cream); opacity: 0.85; }
    .join-link.primary:hover {
      background: #5e1247;
      border-color: #5e1247;
    }
    .join-tiktok {
      margin-top: 40px;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }
    .join-link.tiktok {
      background: linear-gradient(135deg, #79185B 0%, #F238C3 100%);
      border-color: transparent;
    }
    .join-link.tiktok .join-link-title,
    .join-link.tiktok .join-link-sub { color: var(--cream); }
    .join-link.tiktok .join-link-sub { opacity: 0.9; }
    .join-link.tiktok::after { color: var(--cream); opacity: 0.9; }
    .join-link.tiktok:hover {
      filter: brightness(1.08);
      border-color: transparent;
    }

    /* ===== SOCIAL ICON ROW (footer) ===== */
    .social-row {
      display: flex;
      gap: 12px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    .social-row a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--cream);
      border: 1px solid var(--border);
      color: var(--plum);
      transition: background 200ms ease, color 200ms ease, transform 200ms ease, border-color 200ms ease;
    }
    .social-row a:hover {
      background: var(--plum);
      color: var(--cream);
      border-color: var(--plum);
      transform: translateY(-2px);
    }
    .social-row svg { width: 16px; height: 16px; }

    /* ===== MANIFESTO — editorial slide stack ===== */
    .manifesto {
      max-width: 1280px;
      margin: 80px auto 40px;
      padding: 0 32px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }
    .manifesto-intro {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 12px;
    }
    .slide {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      transform: translateY(20px);
      opacity: 0;
      transition: opacity 800ms ease, transform 800ms ease, box-shadow 400ms ease;
    }
    .slide.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .slide:hover { box-shadow: var(--shadow-lg); }
    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Tone-specific subtle outline so plum-on-cream slides have a clean edge */
    .slide[data-tone="plum"] { box-shadow: 0 12px 32px rgba(121, 24, 91, 0.18); }
    .slide[data-tone="plum"]:hover { box-shadow: 0 20px 60px rgba(121, 24, 91, 0.28); }
    .slide[data-tone="cream"] { box-shadow: 0 8px 28px rgba(27, 28, 21, 0.10); border: 1px solid var(--border); }

    /* ===== FOOTER ===== */
    /* ===== BGA IN THE WILD — real event photos ===== */
    .wild {
      max-width: 1280px;
      margin: 100px auto 60px;
      padding: 0 32px;
    }
    .wild-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }
    .wild-eyebrow {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--brown);
      margin-bottom: 12px;
    }
    .wild-title {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-size: clamp(36px, 5.4vw, 64px);
      font-weight: 400;
      line-height: 1.02;
      letter-spacing: -0.02em;
      color: var(--brown);
      max-width: 720px;
    }
    .wild-title em {
      font-style: italic;
      color: var(--ink);
      background-image: linear-gradient(to bottom, transparent 65%, rgba(212, 160, 23, 0.32) 65%, rgba(212, 160, 23, 0.32) 92%, transparent 92%);
      background-repeat: no-repeat;
      padding: 0 4px;
    }
    .wild-sub {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink-soft);
      max-width: 340px;
    }
    .wild-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 160px;
      gap: 14px;
    }
    .wild-tile {
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--cream-deep);
      position: relative;
      box-shadow: var(--shadow-sm);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .wild-tile:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .wild-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 25%;  /* default: bias toward upper third so faces don't get cut */
      display: block;
      transition: transform 0.6s ease;
    }
    .wild-tile:hover img { transform: scale(1.04); }

    /* Per-tile object-position overrides for face-aware framing */
    .wild-tile.face-top img { object-position: center top; }
    .wild-tile.face-upper img { object-position: center 20%; }
    .wild-tile.face-center img { object-position: center center; }
    .wild-tile.scene img { object-position: center center; }

    /* Placeholder badge — for TV-screen photos that will be swapped for originals */
    .wild-tile.placeholder::after {
      content: "Placeholder — original photo coming";
      position: absolute;
      bottom: 10px;
      left: 10px;
      right: 10px;
      background: rgba(27, 28, 21, 0.78);
      color: var(--cream);
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 6px 10px;
      border-radius: 6px;
      text-align: center;
      pointer-events: none;
    }

    /* Tag for which event the photo came from — subtle, hover-revealed */
    .wild-tile .event-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(250, 244, 239, 0.92);
      color: var(--brown);
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 9px;
      border-radius: 999px;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
    }
    .wild-tile:hover .event-tag {
      opacity: 1;
      transform: translateY(0);
    }

    /* Mosaic layout — 12-col grid, varied row spans for visual rhythm */
    .t1 { grid-column: span 6; grid-row: span 2; }   /* hero group of 7 diverse — tall wide */
    .t2 { grid-column: span 3; grid-row: span 2; }   /* IA panel laugh — portrait */
    .t3 { grid-column: span 3; grid-row: span 1; }   /* IA poker portrait — short */
    .t4 { grid-column: span 3; grid-row: span 1; }   /* IA placeholder quote screen */
    .t5 { grid-column: span 6; grid-row: span 2; }   /* Poker wide room (no faces, scene) */
    .t6 { grid-column: span 3; grid-row: span 2; }   /* IA panel white top — portrait */
    .t7 { grid-column: span 3; grid-row: span 1; }   /* IA panel pink tweed */
    .t8 { grid-column: span 3; grid-row: span 1; }   /* Pure joy candid */
    .t9 { grid-column: span 4; grid-row: span 1; }   /* Three arm in arm */
    .t10 { grid-column: span 4; grid-row: span 1; }  /* Poker LED wall scene */
    .t11 { grid-column: span 4; grid-row: span 1; }  /* IA placeholder newsletter screen */
    .wild-credit {
      margin-top: 22px;
      font-size: 12px;
      color: var(--ink-soft);
      opacity: 0.7;
      letter-spacing: 0.01em;
    }
    @media (max-width: 900px) {
      .manifesto { margin: 60px auto 30px; padding: 0 20px; gap: 18px; }
      .slide { border-radius: var(--radius); }
      .join { margin: 60px auto 30px; padding: 0 20px; }
      .join-intro { margin-bottom: 32px; }
      .join-grid { grid-template-columns: 1fr; gap: 32px; }
      .join-link { padding: 16px 18px; }
      .join-link::after { top: 16px; right: 18px; }
      .wild { margin: 70px auto 40px; padding: 0 20px; }
      .wild-grid { grid-auto-rows: 130px; gap: 10px; }
      .t1, .t5 { grid-column: span 6; grid-row: span 2; }
      .t2, .t6 { grid-column: span 6; grid-row: span 2; }
      .t3, .t4, .t7, .t8, .t9, .t10, .t11 { grid-column: span 6; grid-row: span 1; }
    }
    @media (max-width: 520px) {
      .wild-grid { grid-auto-rows: 110px; }
      .t1, .t5 { grid-column: span 12; grid-row: span 2; }
      .t2, .t6 { grid-column: span 12; grid-row: span 2; }
      .t3, .t4, .t7, .t8, .t9, .t10, .t11 { grid-column: span 6; grid-row: span 1; }
    }

    footer {
      background: var(--cream-deep);
      padding: 100px 24px 0;
      margin-top: 80px;
      border-top: 1px solid var(--border);
    }

    .footer-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 80px;
    }

    @media (max-width: 760px) {
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }

    .footer-col h4 {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--brown);
      margin-bottom: 18px;
    }

    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: 10px; }
    .footer-col a {
      color: var(--ink);
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s ease;
    }
    .footer-col a:hover { color: var(--brown); }

    .footer-desc {
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.6;
      max-width: 360px;
      margin-bottom: 20px;
    }

    .footer-tag {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 700;
      font-size: 22px;
      color: var(--brown);
      letter-spacing: -0.01em;
      font-style: italic;
      margin-bottom: 12px;
    }

    /* ===== GIANT WORDMARK (Littlebird signature) ===== */
    .wordmark {
      max-width: 100%;
      margin: 0 auto;
      padding: 60px 0 40px;
      overflow: hidden;
      text-align: center;
    }

    .wordmark-text {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      /* Tuned so text fits 1440px viewport without clipping */
      font-size: clamp(40px, 11vw, 170px);
      line-height: 0.92;
      letter-spacing: -0.035em;
      color: var(--brown);
      white-space: nowrap;
      display: inline-block;
      padding: 0 24px;
    }

    /* On narrow screens, stack 'brown girl' over 'angels' so it never clips */
    @media (max-width: 760px) {
      .wordmark-text { white-space: normal; line-height: 0.95; font-size: clamp(56px, 18vw, 110px); }
      .wordmark-text .wm-break { display: block; }
    }

    .footer-bottom {
      border-top: 1px solid var(--border);
      padding: 24px;
      text-align: center;
      font-size: 12px;
      color: var(--ink-soft);
    }

    /* ===== SCROLL FADE-IN (with safety fallback) ===== */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* If JS fails or IntersectionObserver isn't ready, never leave content invisible */
    @media (prefers-reduced-motion: reduce) {
      .fade-in { opacity: 1; transform: none; }
    }

    /* =========================================================
       CANVA POSTER MOMENTS — selective, additive
       Pink full-bleed bg + oversized cropped yellow circle +
       big stacked DM Sans headline. Used sparingly: BGA home
       "Spilling the chai" + BGMM "Join the chaat" + footer
       "Desi table". Does NOT change site-wide palette or fonts.
       ========================================================= */
    .poster {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      padding: clamp(56px, 9vw, 120px) clamp(24px, 6vw, 96px);
      margin: clamp(40px, 6vw, 80px) 0;
      font-family: 'DM Sans', 'Montserrat', system-ui, sans-serif;
    }
    .poster--pink {
      background: #E6839C;
      color: #2A0F12;
    }
    .poster--parchment {
      background: #F4E8D6;
      color: #562A2D;
    }
    .poster__circle {
      position: absolute;
      width: clamp(420px, 60vw, 820px);
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      right: clamp(-260px, -18vw, -120px);
      top: 50%;
      transform: translateY(-50%);
      z-index: 0;
      pointer-events: none;
    }
    .poster--pink .poster__circle { background: #FFE290; }
    .poster--parchment .poster__circle { background: #E6839C; opacity: 0.85; }
    .poster__inner {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(20px, 3vw, 36px);
    }
    .poster__eyebrow {
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-size: 12px;
      margin: 0;
      opacity: 0.7;
    }
    .poster__headline {
      font-family: 'DM Sans', sans-serif;
      font-weight: 800;
      font-size: clamp(48px, 8vw, 124px);
      line-height: 0.92;
      letter-spacing: -0.02em;
      margin: 0;
      max-width: 14ch;
    }
    .poster__headline em {
      font-style: italic;
      font-weight: 800;
    }
    .poster__headline .period {
      color: #562A2D;
    }
    .poster--pink .poster__headline .period { color: #2A0F12; }
    .poster__body {
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
      font-size: clamp(16px, 1.4vw, 19px);
      line-height: 1.55;
      max-width: 52ch;
      margin: 0;
    }
    .poster__cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-decoration: none;
      color: #2A0F12;
      padding: 16px 28px;
      background: #FFE290;
      border-radius: 999px;
      margin-top: 12px;
      transition: transform 0.2s ease;
      width: fit-content;
    }
    .poster--parchment .poster__cta { background: #562A2D; color: #F4E8D6; }
    .poster__cta:hover { transform: translateX(4px); }

    @media (max-width: 640px) {
      .poster__circle {
        width: 380px;
        right: -180px;
        top: auto;
        bottom: -120px;
        transform: none;
        opacity: 0.85;
      }
    }