/* Self-hosted so the page needs no connection to fonts.googleapis.com or
   fonts.gstatic.com. Variable files: three requests instead of ten, and
   they cache for a year like every other asset here. */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/caveat.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('/fonts/urbanist.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* lasso site v2 (development only, not deployed)
 *
 * Built to the 4 Sep 2026 reference. Photography-led and editorial: white
 * ground, warm cream bands, four full-bleed photographic sections (hero, kind
 * of country, more than dating, manifesto, final), phones layered over the
 * page, handwritten marginalia for short brand phrases, copper for micro
 * details and CTAs. Depth comes from photography, layering and warm shadows,
 * never from borders or effects.
 *
 * Motion is quiet: load-in, short reveals, header blur, accordion.
 */

:root {
  --bg:         #FFFFFF;
  --warm:       #F7F4EF;   /* warm background */
  --warm-2:     #EEE8DE;   /* secondary warm */
  --ink:        #171717;
  --ink-2:      #56514A;   /* warm secondary text, ~7.4:1 on white */
  --line:       #E9E3D8;   /* warm hairline, used sparingly */
  --copper:     #955F27;   /* text and CTAs, 5.3:1 on white */
  --copper-2:   #7E4F20;
  --gold:       #C89B5D;   /* brand copper on dark grounds */
  --char:       #1C1611;
  --saddle:     #3A2A1F;   /* brand SADDLE, the Get the app pill */
  --saddle-2:   #2E2118;

  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover:    180ms;
  --t-reveal:   560ms;

  --radius:     18px;
  --radius-sm:  12px;
  --shell:      1180px;
  --section:    clamp(80px, 9vw, 128px);
  --header-h:   68px;

  --shadow-soft:   0 1px 2px rgba(40, 30, 20, 0.04), 0 18px 40px -18px rgba(40, 30, 20, 0.18);
  --shadow-device: 0 2px 8px rgba(40, 30, 20, 0.08), 0 44px 80px -30px rgba(40, 30, 20, 0.42), 0 16px 30px -18px rgba(40, 30, 20, 0.24);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg); color: var(--ink);
  font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; }
::selection { background: var(--copper); color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: Urbanist, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(56px, 9.2vw, 152px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.96; }
h2 { font-size: clamp(44px, 5vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; }
h3 { font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; }
.dot { color: var(--copper); }
.lead { margin-top: 16px; color: var(--ink-2); font-size: clamp(16px, 1.25vw, 18px); max-width: 42ch; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); }
.eyebrow-light { color: #fff; }
.eyebrow-gold { color: #E2B06A; }
/* Handwritten marginalia. Short brand phrases only. */
.hand { font-family: 'Caveat', 'Bradley Hand', cursive; font-weight: 700; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.3; letter-spacing: 0.01em; color: var(--ink); }
.hand-light { color: rgba(255,255,255,0.86); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; white-space: nowrap;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  transition: background var(--t-hover) var(--ease), transform 150ms var(--ease), color var(--t-hover) var(--ease);
}
.btn-sm { font-size: 15px; font-weight: 700; padding: 11px 22px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; transform: translateY(-1px); }
.btn-copper { background: var(--copper); color: #fff; }
.btn-copper:hover { background: var(--copper-2); transform: translateY(-1px); }
.btn-ghost { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--copper); }
.link i { font-size: 15px; transition: transform 200ms var(--ease); }
.link:hover i { transform: translateX(3px); }
.store-badge { display: inline-block; line-height: 0; border-radius: 8px; transition: transform 150ms var(--ease), opacity var(--t-hover) var(--ease); }
.store-badge:hover { transform: translateY(-1px); opacity: 0.92; }
.store-badge img { height: auto; width: auto; }
.store-badge img[src*="appstore"] { height: 44px; }
.store-badge img[src*="googleplay"] { width: 138px; }

/* ---------- header ---------- */
.header-sentinel { height: 24px; margin-bottom: -24px; pointer-events: none; }
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  color: #fff; background: transparent;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.header.is-stuck, .header.is-open {
  color: var(--ink); background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(40,30,20,0.06);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.header .brand-word-light { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.header .brand-mark { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.header.is-stuck .brand-mark, .header.is-open .brand-mark { filter: none; }
.brand { display: inline-flex; align-items: center; gap: 7px; line-height: 0; border-radius: 6px; }
.brand img { height: 26px; width: auto; }
.brand .brand-word { height: 23px; }
.brand-word-dark { display: none; }
.header.is-stuck .brand-word-light, .header.is-open .brand-word-light { display: none; }
.header.is-stuck .brand-word-dark, .header.is-open .brand-word-dark { display: block; }
.nav { display: flex; align-items: center; gap: 36px; }
.nav a { font-size: 16px; font-weight: 700; letter-spacing: -0.005em; opacity: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.35); transition: opacity var(--t-hover) var(--ease); }
.header.is-stuck .nav a, .header.is-open .nav a { text-shadow: none; }
.nav a:hover { opacity: 0.82; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header .btn-primary { background: var(--copper); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.header .btn-primary:hover { background: var(--copper-2); }
.header.is-stuck .btn-primary, .header.is-open .btn-primary { background: var(--copper); box-shadow: none; }
.header.is-stuck .btn-primary:hover, .header.is-open .btn-primary:hover { background: var(--copper-2); }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 999px; align-items: center; justify-content: center; font-size: 22px; background: rgba(255,255,255,0.14); }
.header.is-stuck .menu-btn, .header.is-open .menu-btn { background: var(--warm-2); }
.menu { padding: 8px 28px 24px; background: var(--bg); color: var(--ink); }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { font-family: Urbanist, system-ui, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--line); }
.menu-cta { margin-top: 18px; width: 100%; background: var(--copper); }
.menu-cta:hover { background: var(--copper-2); }
@media (max-width: 900px) { .nav, .header-actions .btn { display: none; } .menu-btn { display: inline-flex; } }

/* ---------- reveals ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger, 70ms)); }
[data-reveal="step"] { transform: translateY(18px); --stagger: 90ms; }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- 1. hero: full-bleed photograph, copy over its left ---------- */
.hero { position: relative; min-height: clamp(640px, 92vh, 880px); display: flex; align-items: center; overflow: hidden; background: var(--char); color: #fff; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16,11,7,0.92) 0%, rgba(16,11,7,0.84) 22%, rgba(16,11,7,0.62) 40%, rgba(16,11,7,0.28) 56%, rgba(16,11,7,0.06) 68%, rgba(16,11,7,0) 78%),
    linear-gradient(180deg, rgba(16,11,7,0.62) 0%, rgba(16,11,7,0.18) 18%, rgba(16,11,7,0) 32%, rgba(16,11,7,0) 70%, rgba(16,11,7,0.46) 100%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: calc(var(--header-h) + 40px); padding-bottom: 44px; }
.hero-copy { max-width: 1140px; text-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 10px 36px rgba(0,0,0,0.35); }
.hero h1 { margin-top: 0; color: #fff; }
.hero h1 .dot { color: var(--gold); }
.hero-sub { margin-top: 26px; max-width: 62ch; font-size: clamp(20px, 2vw, 30px); font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.hero-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-hand { margin-top: 30px; font-size: clamp(17px, 1.5vw, 21px); color: rgba(255,255,255,0.92); }
.hero-place { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.35; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.hero-place i { font-size: 18px; color: var(--gold); }

/* load-in */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.js .hero-copy > * { opacity: 0; animation: rise 600ms var(--ease) forwards; }
.js .hero h1 { animation: none; opacity: 1; }
.js .hero h1 .line { display: inline-block; opacity: 0; animation: rise 640ms var(--ease) forwards; }
.js .hero h1 .line:nth-child(1) { animation-delay: 140ms; }
.js .hero h1 .line:nth-child(2) { animation-delay: 220ms; }
.js .hero .eyebrow { animation-delay: 60ms; }
.js .hero-sub { animation-delay: 300ms; }
.js .hero-tag { animation-delay: 360ms; }
.js .hero-actions { animation-delay: 440ms; }
.js .hero-hand { animation-delay: 520ms; }
.js .hero-place { opacity: 0; animation: rise 600ms var(--ease) 600ms forwards; }
.js .hero-photo { opacity: 0; animation: settle 1100ms var(--ease) both; }

/* ---------- 2. your song: headline, copy, then one aligned row ---------- */
.song { background: var(--warm); padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 8vw, 112px); }
/* Two columns: the copy, then the composition, centred on each other. The
   section borrows the strip's wider container so both fit side by side. */
.song-grid { max-width: 1340px; display: grid; grid-template-columns: minmax(300px, 1fr) auto; gap: clamp(32px, 4vw, 64px); align-items: center; }
.song-head h2 { margin-top: 14px; max-width: 11ch; }
.song-head .lead { margin-top: 22px; max-width: 34ch; font-size: clamp(17px, 1.4vw, 20px); }
.song-head .btn { margin-top: 26px; }

/* The composition: card column, phone, faces column, all centred on the phone. */
.song-stage { display: flex; align-items: center; justify-content: flex-end; gap: clamp(20px, 2.4vw, 36px); }
.song-col { display: flex; flex-direction: column; gap: 14px; }
.song-col-left { align-items: flex-end; width: 300px; }
.song-col-right { align-items: flex-start; }
.song-col-phone { align-items: center; gap: 16px; }
.song-hand-a { text-align: right; white-space: nowrap; margin-bottom: 6px; }
.song-arrow { display: inline-block; font-size: 22px; color: var(--copper); vertical-align: -6px; margin-left: 6px; opacity: 0.85; }
.song-card { width: 100%; }
.song-people { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.song-device { width: 248px; }
.song-dots { display: flex; gap: 8px; }
.song-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(23,23,23,0.18); transition: background var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); }
.song-dots button[aria-current="true"] { background: var(--copper); transform: scale(1.25); }
.song-dots button:hover { background: rgba(23,23,23,0.4); }
.song-faces { display: grid; gap: 10px; width: 88px; }
.song-faces img { width: 88px; height: 92px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-soft); opacity: 0.55; transform: scale(0.96); transition: opacity 500ms var(--ease), transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.song-faces img.is-active { opacity: 1; transform: none; box-shadow: var(--shadow-soft), 0 0 0 2px var(--copper); }
.song-hand-b { white-space: nowrap; margin-top: 4px; }

/* The song card. Dark, warm, with a copper progress line. */
.song-card { position: relative; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px 14px 12px; border-radius: 16px; background: #1F1915; color: #fff; box-shadow: var(--shadow-device); overflow: hidden; }
.song-card .np-art { width: 70px; height: 70px; border-radius: 10px; object-fit: cover; }
.song-card-meta { display: grid; min-width: 0; line-height: 1.25; }
.song-card .np-who { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.song-card .np-artist { font-size: 13px; color: rgba(255,255,255,0.72); }
.song-card .np-title { font-family: Urbanist, system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.15; text-wrap: balance; }
.np-play { width: 44px; height: 44px; border-radius: 50%; background: var(--copper); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; transition: transform 150ms var(--ease), background var(--t-hover) var(--ease); }
.np-play:hover { transform: scale(1.06); background: var(--copper-2); }
.np-play .np-pause-icon { display: none; }
.np-play[aria-pressed="true"] .np-play-icon { display: none; }
.np-play[aria-pressed="true"] .np-pause-icon { display: inline-flex; }
.np-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.12); }
.np-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); }
.avatars { display: inline-flex; }
.avatars img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; border: 2px solid var(--warm); margin-left: -8px; }
.avatars img:first-child { margin-left: 0; }

/* ---------- devices ---------- */
.device { padding: 3%; border-radius: 40px; background: #111; box-shadow: var(--shadow-device), inset 0 0 0 1px rgba(255,255,255,0.08); }
.device-screen { aspect-ratio: 1320 / 2868; border-radius: 33px; overflow: hidden; background: #000; }
.device-screen { position: relative; }
.device-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Two stacked screens crossfade; the front one carries the class. */
.song-device .device-screen img { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease); }
.song-device .device-screen img.is-front { opacity: 1; }
.device-sm { width: min(100%, 228px); border-radius: 36px; padding: 2.6%; box-shadow: 0 1px 2px rgba(40, 30, 20, 0.06), 0 12px 24px -14px rgba(40, 30, 20, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.device-sm .device-screen { border-radius: 30px; }

/* ---------- 3. your kind of country: full-bleed landscape ---------- */
.kinds { position: relative; padding: clamp(80px, 9vw, 120px) 0; color: #fff; background: var(--char); overflow: hidden; }
.kinds-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; }
.kinds::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,14,9,0.78) 0%, rgba(20,14,9,0.46) 45%, rgba(20,14,9,0.74) 100%); }
.kinds-inner { position: relative; z-index: 2; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 28px rgba(0,0,0,0.30); }
.kinds h2 { margin-top: 14px; color: #fff; }
.kinds-list { margin: 44px auto 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.kinds-list li { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 32px 56px -22px rgba(0,0,0,0.7), 0 10px 22px -10px rgba(0,0,0,0.5); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.kinds-list li::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); pointer-events: none; transition: box-shadow 260ms var(--ease); }
.kinds-list li:hover { transform: translateY(-6px); box-shadow: 0 40px 64px -22px rgba(0,0,0,0.75), 0 14px 26px -10px rgba(0,0,0,0.5); }
.kinds-list li:hover::before { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); }
.kinds-list img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.05) brightness(1.04); transition: transform 600ms var(--ease); }
.kinds-list li:hover img { transform: scale(1.04); }
.kinds-list li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,0.80) 100%); }
.kinds-list span { position: absolute; left: 16px; right: 10px; bottom: 14px; z-index: 1; font-family: Urbanist, system-ui, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; line-height: 1.15; text-align: left; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.kinds-line { margin-top: 36px; font-family: Urbanist, system-ui, sans-serif; font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.01em; }
.kinds-sub { margin-top: 6px; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.92); }

/* ---------- 4. three simple steps: heading beside a row of three phones ---------- */
.how { background: var(--warm); padding: var(--section) 0 clamp(52px, 5.5vw, 78px); }
.how-grid { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
.how h2 { margin-top: 14px; }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.how-steps li { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.how-phone { width: 100%; max-width: 236px; }
.how-step h3 { display: flex; align-items: baseline; gap: 10px; font-size: 19px; }
.step-n { font-family: Urbanist, system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.12em; color: var(--copper); }

/* ---------- 5. more than dating: full-bleed campfire ---------- */
.bigger { position: relative; padding: var(--section) 0; background: var(--bg); }
.bigger-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.bigger h2 { margin-top: 14px; }
.bigger-head .lead { flex: none; max-width: 30ch; margin: 0 0 10px; }
.modes { margin-top: clamp(36px, 4vw, 52px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mode { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--warm-2); box-shadow: var(--shadow-soft); transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
.mode img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.mode::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 46%, rgba(0,0,0,0.76) 100%); }
.mode:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(40,30,20,0.05), 0 34px 60px -26px rgba(40,30,20,0.38); }
.mode:hover img { transform: scale(1.04); }
.mode-icon { position: absolute; top: 18px; left: 18px; z-index: 1; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.94); color: var(--copper); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 6px 16px -8px rgba(0,0,0,0.4); }
.mode-copy { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.mode-copy b { display: block; font-family: Urbanist, system-ui, sans-serif; font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.03em; line-height: 1; }
.mode-copy p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,0.9); max-width: 24ch; }

/* ---------- 6. the strip ---------- */
.strip { background: var(--bg); padding: var(--section) 0; }
.strip-head { text-align: center; }
.strip-head h2 { margin-top: 14px; }
.strip-head .lead { margin-left: auto; margin-right: auto; text-align: center; }
/* The row runs a little wider than the page so five phones can sit large.
   Padding inside the scroller keeps the phones' edges and shadows unclipped,
   which is what read as a grey box behind them before. */
.strip-wide { max-width: 1340px; }
.strip-row { margin: 32px -16px 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 16px 20px; scrollbar-width: none; }
.strip-row::-webkit-scrollbar { display: none; }
.strip-row li { scroll-snap-align: center; text-align: center; }
.strip-row p { margin-top: 16px; font-family: Urbanist, system-ui, sans-serif; font-weight: 700; font-size: 16px; }

/* ---------- 7. events ---------- */
.roundups { background: var(--warm); padding: var(--section) 0; }
.roundups-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.roundups-head h2 { margin-top: 12px; }
.roundups-head .lead { text-wrap: balance; }
.events { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.event-link { display: block; background: var(--bg); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.event-link:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(40,30,20,0.05), 0 28px 50px -22px rgba(40,30,20,0.26); }
.event-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.event-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.event-link:hover .event-media img { transform: scale(1.04); }
.event-date { position: absolute; left: 14px; bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.event-body { padding: 18px 20px 20px; }
.event-where { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.event-where i { font-size: 14px; color: var(--copper); }
.event-going { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.event-going i { font-size: 14px; color: var(--copper); }

/* ---------- 8. community: photograph left, chatter right ---------- */
.community { display: grid; grid-template-columns: minmax(320px, 46%) 1fr; background: var(--warm); }
.community-photo { position: relative; min-height: 520px; overflow: hidden; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.community-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; }
.community-hand { position: absolute; right: 16%; bottom: 36px; z-index: 1; color: rgba(255,255,255,0.9); text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.community-copy { padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 72px) clamp(56px, 7vw, 96px) clamp(20px, 3vw, 40px); }
.community-copy h2 { margin-top: 12px; }
.chatter { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.chatter li { display: flex; gap: 12px; align-items: stretch; padding: 16px; background: var(--bg); border-radius: 14px; box-shadow: var(--shadow-soft); }
.chatter li > div { display: flex; flex-direction: column; flex: 1; }
.chatter img { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; flex: none; }
.chatter b { font-size: 14px; }
.chatter p { margin-top: 4px; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.chatter span { display: block; margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.community-link { margin-top: 18px; float: right; }

/* ---------- 9. manifesto: full-bleed dark portrait ---------- */
.manifesto { position: relative; padding: clamp(88px, 10vw, 132px) 0; color: #fff; background: var(--char); overflow: hidden; }
.manifesto-bg { position: absolute; top: 0; bottom: 0; left: 44%; width: 56%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.manifesto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(28,22,17,1) 0%, rgba(28,22,17,1) 42%, rgba(28,22,17,0.72) 54%, rgba(28,22,17,0.18) 68%, rgba(28,22,17,0.10) 84%, rgba(28,22,17,0.42) 100%), linear-gradient(180deg, rgba(28,22,17,0.2) 0%, rgba(28,22,17,0) 30%, rgba(28,22,17,0) 70%, rgba(28,22,17,0.45) 100%); }
.manifesto-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.manifesto h2 { color: #fff; }
.manifesto-copy p { margin-top: 20px; font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.7; color: rgba(255,255,255,0.9); }
.manifesto-line { margin-top: 26px !important; font-family: Urbanist, system-ui, sans-serif; font-weight: 700; font-size: clamp(22px, 2.2vw, 28px) !important; color: #fff !important; letter-spacing: -0.02em; }
.manifesto-line .dot { color: var(--gold); }
.manifesto-hand { color: rgba(255,255,255,0.86); text-align: right; flex: none; }

/* ---------- 10. safety ---------- */
.safety { background: var(--warm); padding: var(--section) 0; }
.safety-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.safety-head h2 { margin-top: 14px; }
.safety-head .lead { flex: none; max-width: 26ch; margin: 0 0 10px; }
.safety-beats { font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; line-height: 1.5; color: var(--ink); }
.safety-grid { margin-top: clamp(36px, 4vw, 52px); display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 20px; align-items: stretch; }
.safety-photo { position: relative; display: block; min-height: 420px; border-radius: 18px; overflow: hidden; background: var(--warm-2); box-shadow: var(--shadow-soft); transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
.safety-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; transition: transform 700ms var(--ease); }
.safety-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 46%, rgba(0,0,0,0.76) 100%); }
.safety-photo:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(40,30,20,0.05), 0 34px 60px -26px rgba(40,30,20,0.38); }
.safety-photo:hover img { transform: scale(1.04); }
.safety-photo-copy { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.safety-photo-copy b { display: block; font-family: Urbanist, system-ui, sans-serif; font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.03em; line-height: 1; }
.safety-photo-copy .link { margin-top: 12px; color: #fff; font-size: 15px; }
.safety-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.safety-cards li { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--warm-2); box-shadow: var(--shadow-soft); transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
.safety-cards img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.safety-cards li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.78) 100%); }
.safety-cards li:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(40,30,20,0.05), 0 34px 60px -26px rgba(40,30,20,0.38); }
.safety-cards li:hover img { transform: scale(1.04); }
.safety-card-copy { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.safety-card-copy h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.safety-card-copy p { margin-top: 5px; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,0.9); max-width: 30ch; }

/* ---------- 11. questions ---------- */
.faq { background: var(--bg); padding: var(--section) 0; }
.faq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.faq-head h2 { margin-top: 14px; }
.faq-head .lead { flex: none; max-width: 26ch; margin: 0 0 10px; }
.faq-cards { margin-top: clamp(36px, 4vw, 52px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.faq-cards li { padding: 30px 32px 32px; background: var(--warm); border-radius: 18px; }
.faq-cards h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.faq-cards p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }

/* ---------- 12. final CTA: full-bleed golden hills ---------- */
.final { position: relative; padding: clamp(88px, 10vw, 140px) 0; color: #fff; background: var(--char); overflow: hidden; }
.final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.final::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,14,9,0.30) 0%, rgba(20,14,9,0.22) 50%, rgba(20,14,9,0.56) 100%), linear-gradient(90deg, rgba(20,14,9,0.52) 0%, rgba(20,14,9,0.14) 50%, rgba(20,14,9,0.24) 100%); }
.final-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr minmax(360px, 480px); gap: clamp(32px, 6vw, 96px); align-items: center; text-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 22px rgba(0,0,0,0.2); }
.final h2 { color: #fff; }
.final-hand { margin-top: 14px; font-size: clamp(20px, 1.9vw, 26px); color: rgba(255,255,255,0.9); }
.final-line { margin-top: 22px; max-width: 40ch; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.92); }
.final-card { background: rgba(255,255,255,0.97); color: var(--ink); border-radius: 22px; padding: 30px 30px 26px; box-shadow: 0 48px 90px -36px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.12); }
.final-card, .final-card * { text-shadow: none; }
.final-card-title { font-family: Urbanist, system-ui, sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.03em; line-height: 1; }
.final-card-sub { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.final-card .join { margin-top: 20px; }
.join-row { display: grid; gap: 10px; }
.field { display: grid; }
.field[hidden] { display: none; }
.field input { width: 100%; height: 52px; padding: 0 18px; font: inherit; font-size: 15px; color: var(--ink); background: var(--warm); border: 0; border-radius: 14px; }
.field input::placeholder { color: #8A857D; }
.field input:focus { outline: none; box-shadow: 0 0 0 3px rgba(149,95,39,0.28); }
.join .btn { height: 52px; width: 100%; border-radius: 14px; font-size: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin-top: 10px; min-height: 1.4em; font-size: 14px; color: var(--ink-2); }
.form-status.is-error { color: #B3261E; }
.join-success { margin-top: 20px; background: var(--warm); color: var(--ink); border-radius: 16px; padding: 20px; }
.join-success-title { font-family: Urbanist, system-ui, sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.join-success > p { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.join-link { margin-top: 16px; display: grid; gap: 6px; }
.join-link[hidden] { display: none; }
.join-link label { font-size: 13px; font-weight: 500; }
.join-link input { height: 42px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 0; border-radius: 12px; }
.join-link-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.join-copied { font-size: 14px; color: var(--ink-2); }

/* ---------- the ask, in the hero ----------
   The waitlist form moved above the fold: the app is not out, so a download
   badge sent people to a store with nothing in it. Email first, town second,
   same two steps as the block at the foot of the page. */
.hero-join { margin-top: 26px; max-width: 470px; }
.hero-join .join-row { grid-template-columns: 1fr auto; align-items: start; }
.hero-join .field input { background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 24px -12px rgba(20, 14, 9, 0.5); }
.hero-join .join .btn { width: auto; padding-inline: 24px; white-space: nowrap; }
.hero-join .form-status { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.hero-join .form-status.is-error { color: #FFD9D4; }
.hero-join .join-success { background: rgba(255, 255, 255, 0.97); color: var(--ink); }
.hero-more { display: inline-block; margin-top: 20px; font-size: 14.5px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.hero-more:hover { text-decoration-thickness: 2px; }

/* Trust chips. Three facts a cold visitor needs before they hand over an
   email: it costs nothing, it is theirs, and it is actually country. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips li { font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.32); padding: 5px 13px; border-radius: 999px; }
.chips-final { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.chips-final li { color: var(--ink-2); background: var(--warm); border-color: var(--line); }

.roundups-note { margin-top: 10px; max-width: 62ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 560px) {
  .hero-join .join-row { grid-template-columns: 1fr; }
  .hero-join .join .btn { width: 100%; }
}


/* ---------- 13. footer ---------- */
.footer { background: var(--bg); border-top: 1px solid var(--line); }
.footer-grid { padding-top: clamp(44px, 5vw, 64px); padding-bottom: clamp(32px, 4vw, 44px); display: grid; grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(140px, 1fr)); gap: clamp(28px, 4vw, 56px); }
.footer-brand .brand img { height: 20px; }
.footer-brand .brand img + img { height: 18px; }
.footer-brand p { margin-top: 16px; max-width: 34ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.footer-social { display: flex; gap: 8px; margin-top: 20px; }
.footer-social a { width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: var(--ink); background: var(--warm); transition: background var(--t-hover) var(--ease); }
.footer-social a:hover { background: var(--warm-2); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-col h2 { font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
.footer-col a { font-size: 14px; color: var(--ink-2); transition: color var(--t-hover) var(--ease); }
.footer-col a:hover { color: var(--copper); }
.footer-base { padding-top: 18px; padding-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.footer-base span { font-size: 12.5px; color: var(--ink-2); }
.footer-legal { padding-bottom: 30px; }
.footer-legal p { font-size: 12px; line-height: 1.55; color: var(--ink-2); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .how-grid { grid-template-columns: 1fr; gap: 40px; }
  .how-copy h2 br { display: none; }
}

@media (max-width: 1080px) {
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .song-grid { grid-template-columns: 1fr; }
  .song-head h2 { max-width: none; }
  .song-stage { flex-direction: column; justify-content: center; gap: 28px; margin-top: 8px; }
  .song-col-left { width: min(100%, 420px); align-items: stretch; }
  .song-col-phone { order: -1; }
  .song-hand-a { text-align: left; }
  .song-col-right { align-items: center; }
  .song-faces { grid-auto-flow: column; width: auto; }
  .song-faces img { width: 72px; height: 76px; }
  .song-hand-b { text-align: center; }
  .song-device { width: 240px; }
  .hero { min-height: 0; }
  .hero-inner { flex-direction: column; align-items: flex-start; padding-top: calc(var(--header-h) + 64px); padding-bottom: 36px; }
  .hero::before { background: linear-gradient(180deg, rgba(20,14,9,0.50) 0%, rgba(20,14,9,0.28) 40%, rgba(20,14,9,0.82) 100%); }
  .hero-place { align-self: flex-end; }
  .hero h1 { font-size: clamp(44px, 12.5vw, 64px); }
  h2 { font-size: clamp(40px, 11vw, 58px); }
  .song-head .lead { font-size: 17px; }
  .hero-sub { font-size: 18px; }
  .song-grid, .how-grid, .safety-grid, .faq-grid, .final-inner { grid-template-columns: 1fr; }
  .song-card { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: 100%; max-width: 420px; }
  .kinds-list { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 28px 12px; margin-left: -28px; margin-right: -28px; max-width: none; scrollbar-width: none; }
  .kinds-list::-webkit-scrollbar { display: none; }
  .kinds-list li { scroll-snap-align: center; }
  .how-steps { grid-template-columns: 1fr; gap: 22px; margin-top: 8px; }
  .how-steps li { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 20px; }
  .how-phone { width: 120px; border-radius: 22px; }
  .how-phone .device-screen { border-radius: 17px; }
    .bigger-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bigger-head h2 br { display: none; }
  .bigger-head .lead { margin: 0; }
  .modes { grid-template-columns: 1fr; gap: 16px; }
  .mode { aspect-ratio: 5 / 4; }
  .strip-row { grid-auto-columns: 64%; padding: 8px 28px 16px; margin-left: -28px; margin-right: -28px; }
  .roundups-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .events { grid-template-columns: 1fr; }
  .community { grid-template-columns: 1fr; }
  .community-photo { min-height: 320px; clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
  .community-copy { padding: 44px 28px 56px; }
  .chatter { grid-template-columns: 1fr; }
  .community-link { float: none; display: inline-flex; }
  .manifesto-inner { flex-direction: column; align-items: flex-start; }
  .manifesto-hand { text-align: left; }
  .manifesto-bg { left: 0; width: 100%; object-position: 60% 15%; }
  .manifesto::before { background: linear-gradient(180deg, rgba(28,22,17,0.92) 0%, rgba(28,22,17,0.78) 55%, rgba(28,22,17,0.55) 100%); }
  .safety-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .safety-head h2 br { display: none; }
  .safety-head .lead { margin: 0; }
  .safety-photo { min-height: 0; aspect-ratio: 5 / 4; }
  .safety-cards { grid-template-columns: 1fr; gap: 14px; }
  .faq-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .faq-head .lead { margin: 0; }
  .faq-cards { grid-template-columns: 1fr; gap: 14px; }
  .faq-cards li { padding: 24px 24px 26px; }
  .final-inner { gap: 28px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-actions { gap: 10px; }
  .store-badge img[src*="appstore"] { height: 40px; }
  .store-badge img[src*="googleplay"] { width: 125px; }
  .kinds-list { grid-auto-columns: 58%; }
  .join-row { grid-template-columns: 1fr; }
  .join .btn { width: 100%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .js .hero-copy > *, .js .hero h1 .line, .js .hero-photo, .js .hero-place { opacity: 1; }
}

/* ---------- angled joins ----------
   A section with an angled top overlaps the one above by the tilt and clips
   its own top edge, so the wedge shows the neighbour's real colour or
   photograph instead of the page behind. Each section keeps its content
   clear of the cut by adding the tilt to its top padding. */
:root { --tilt: 28px; }
.kinds, .how, .bigger, .strip, .manifesto, .safety { position: relative; margin-top: calc(-1 * var(--tilt)); }
.kinds     { clip-path: polygon(0 0, 100% var(--tilt), 100% 100%, 0 100%); padding-top: calc(clamp(80px, 9vw, 120px) + var(--tilt)); }
.how       { clip-path: polygon(0 0, 100% var(--tilt), 100% 100%, 0 100%); padding-top: calc(var(--section) + var(--tilt)); }
.bigger    { clip-path: polygon(0 var(--tilt), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--section) + var(--tilt)); }
.strip     { clip-path: polygon(0 var(--tilt), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--section) + var(--tilt)); }
.manifesto { clip-path: polygon(0 var(--tilt), 100% 0, 100% 100%, 0 100%); padding-top: calc(clamp(88px, 10vw, 132px) + var(--tilt)); }
.safety    { clip-path: polygon(0 0, 100% var(--tilt), 100% 100%, 0 100%); padding-top: calc(var(--section) + var(--tilt)); }
@media (max-width: 900px) { :root { --tilt: 16px; } }

/* ---------- policy pages, 404 ----------
   Sub-pages share the header and footer but have no hero, so the header
   ships with is-stuck already on and no .header-sentinel for main.js to
   watch. Policy bodies are rendered by policy.js from Firestore. */
.policy-main { padding: calc(var(--header-h) + clamp(48px, 6vw, 76px)) 0 clamp(72px, 8vw, 112px); background: var(--bg); }
.policy-title { color: var(--copper); padding-bottom: clamp(22px, 2.6vw, 30px); border-bottom: 1px solid var(--line); font-size: clamp(38px, 5vw, 62px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.policy-intro { margin-top: 16px; max-width: 60ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--ink-2); }
.policy-updated { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
/* A guide has no "Last updated" line, so its intro would otherwise sit right
   under the rule while the three legal pages get that line's height as
   breathing room. This buys back the same gap. */
.policy-title + .policy-intro { margin-top: clamp(34px, 3vw, 44px); }
.policy-section { margin-top: clamp(32px, 4vw, 46px); max-width: 72ch; }
.policy-section h2 { font-size: clamp(23px, 2.1vw, 30px); font-weight: 800; letter-spacing: -0.025em; }
.policy-section p { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.policy-list { margin-top: 12px; padding-left: 22px; }
.policy-list li { margin-top: 9px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.policy-list li::marker { color: var(--copper); }
.policy-guide-section { padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 32px); background: var(--warm); border-radius: 18px; }
.policy-guide-section h2 { font-size: clamp(21px, 1.9vw, 26px); }
/* Scoped to the policy body, which is the only prose here that contains
   links. It used to be `.policy-main a`, which reached every link on What's
   On too: copper text on a copper button made "Join the waitlist" invisible.
   `:not(.btn)` was the wrong repair, because :not() adds its argument's
   specificity, so (0,2,1) then beat .wo-cities a and repainted the city
   pills as underlined copper. An id keeps it where it belongs instead. */
#policy-root a { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }

.notfound { padding: calc(var(--header-h) + clamp(72px, 10vw, 128px)) 0 clamp(96px, 12vw, 150px); background: var(--bg); }
.notfound h1 { margin-top: 14px; font-size: clamp(44px, 6vw, 84px); }
.notfound .lead { margin-top: 18px; }
.notfound .btn { margin-top: 28px; }

/* ---------- cookie consent ----------
   GA4 sets cookies, so under UK GDPR and PECR nothing loads until this is
   accepted. analytics.js keeps Consent Mode denied by default and clears the
   _ga cookies if someone declines or changes their mind. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 760px; margin: 0 auto; padding: 13px 16px 13px 20px;
  background: var(--char); color: rgba(255,255,255,0.86); border-radius: 18px;
  box-shadow: 0 28px 64px -24px rgba(0,0,0,0.6);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.consent.is-in { opacity: 1; transform: none; }
/* While the chooser is up the page grows by its height, so nothing the
   banner covers is unreachable. analytics.js sets --consent-h. */
body.has-consent { padding-bottom: var(--consent-h, 0px); }
.consent p { flex: 1; min-width: 220px; font-size: 13.5px; line-height: 1.5; }
.consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.consent a:hover { color: #fff; }
.consent-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.consent button { font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 999px; border: 1px solid transparent; transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.consent-no { background: transparent; border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.82); }
.consent-no:hover { border-color: rgba(255,255,255,0.62); color: #fff; }
.consent-yes { background: var(--copper); color: #fff; }
.consent-yes:hover { background: var(--copper-2); }
@media (max-width: 600px) {
  .consent { left: 12px; right: 12px; bottom: 12px; padding: 13px; gap: 10px; }
  .consent button { padding: 8px 16px; }
  .consent-actions { width: 100%; }
  .consent button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; opacity: 1; transform: none; } }

/* Icons are an inline sprite, so the page needs no icon webfont and no
   connection to unpkg. The <i> wrapper stays so the badge rules that size
   and colour icons keep working; the glyph itself follows font-size. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.ic svg { width: 1em; height: 1em; fill: currentColor; display: block; }

/* ---------- what's on: the UK country gig listing ----------
   A reference list, not a set of cards. Date on the left so a reader can scan
   the column and stop at a weekend they are free, the act and venue in the
   middle, tickets on the right. Rows separated by the same hairline the rest
   of the site uses, because 169 shadowed cards would be 169 objects to look
   at instead of one list to read. */
.wo-cities { margin-top: clamp(28px, 3vw, 40px); }
.wo-cities h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.wo-cities ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wo-cities a { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease); }
.wo-cities a:hover { border-color: var(--copper); background: var(--warm); }
.wo-cities a span { font-size: 13px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.wo-month { margin-top: clamp(36px, 4vw, 52px); }
.wo-month h2 { font-size: clamp(20px, 2vw, 25px); font-weight: 800; letter-spacing: -0.02em; color: var(--copper); }
.wo-list { margin-top: 6px; }

.wo-event { display: grid; grid-template-columns: 168px 1fr auto; align-items: center; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.wo-date { font-size: 14.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wo-what { min-width: 0; }
.wo-what h3 { font-size: clamp(16px, 1.35vw, 18.5px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.wo-where { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 14.5px; color: var(--ink-2); }
.wo-where i { font-size: 13px; color: var(--copper); }
.wo-tickets { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 14.5px; font-weight: 600; color: var(--copper); text-decoration: none; white-space: nowrap; }
.wo-tickets:hover { color: var(--copper-2); text-decoration: underline; text-underline-offset: 3px; }
.wo-tickets i { font-size: 13px; }

.wo-cta { margin-top: clamp(52px, 6vw, 76px); padding: clamp(30px, 3.4vw, 44px); background: var(--warm); border-radius: var(--radius); }
.wo-cta h2 { max-width: 20ch; font-size: clamp(23px, 2.4vw, 31px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.wo-cta p { margin-top: 12px; max-width: 58ch; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; color: var(--ink-2); }
.wo-cta .btn { margin-top: 20px; }

.whats-on .eyebrow a { color: inherit; text-decoration: none; }
.whats-on .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  /* The date leads the row rather than sharing it, and tickets drop under the
     act, so nothing has to squeeze onto a phone. */
  .wo-event { grid-template-columns: 1fr; gap: 5px; padding: 15px 0; }
  .wo-date { order: -1; font-size: 13.5px; }
  .wo-tickets { justify-self: start; margin-top: 3px; }
}

/* ================= the quiz, as a game =================
   Not a form in a card. A stage that takes the screen: the question's
   photograph behind it, the question over it, three things to hit. One thing
   to do at a time, and it moves when you do it. */

.game {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  overflow: hidden;
  background: var(--char);
  isolation: isolate;
}

/* The photograph, cross-faded between questions and pushed back under a scrim
   so white type sits on it at full contrast whatever the picture is doing. */
.game-bg { position: absolute; inset: 0; z-index: 0; }
.game-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity 620ms var(--ease), transform 7s linear;
}
.game-bg img.is-on { opacity: 1; transform: scale(1); }
.game-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,15,11,0.72) 0%, rgba(20,15,11,0.55) 38%, rgba(20,15,11,0.88) 100%);
}

.game-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) clamp(20px, 4vw, 40px) clamp(26px, 4vw, 44px);
  display: flex; flex-direction: column; gap: clamp(14px, 2.2vw, 26px);
}
/* display:grid/flex below would otherwise win over the hidden attribute, and
   the intro, the tally and the question would all be on screen at once. */
.game [hidden] { display: none !important; }

/* ---- progress: six pips, because six is countable at a glance and a bar is
   not. The one you are on is wide and lit. ---- */
.game-pips { display: flex; gap: 7px; align-items: center; }
.game-pip { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.22); transition: background 300ms var(--ease), flex-grow 380ms var(--ease); }
.game-pip.is-done { background: var(--gold); }
.game-pip.is-now { background: #fff; flex-grow: 1.7; }

.game-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.game-count { font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72); font-variant-numeric: tabular-nums; }
.game-back { font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72); background: none; border: 0; padding: 6px 2px; cursor: pointer; }
.game-back:hover { color: #fff; }

/* ---- the question ---- */
.game-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(14px, 2vw, 22px); }
.game-emoji { font-size: clamp(44px, 6vw, 76px); line-height: 1; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4)); }
.game-q {
  max-width: 17ch; color: #fff;
  font-size: clamp(30px, 6.2vw, 68px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.03; text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0,0,0,0.35);
}
.game-q:focus { outline: none; }

/* ---- the three things to hit ---- */
.game-answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.2vw, 16px); }
.game-answer {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; height: 100%; text-align: left;
  padding: clamp(18px, 1.8vw, 26px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 18px;
  background: rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: inherit; color: #fff; cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.game-answer:hover { background: rgba(255,255,255,0.19); border-color: rgba(255,255,255,0.42); transform: translateY(-4px); }
.game-answer:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.game-answer-emoji { font-size: clamp(30px, 2.6vw, 40px); line-height: 1; }
.game-answer-text { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.35; font-weight: 600; }

/* The one you hit lights up and holds for a beat, so the tap is answered
   before the screen changes under you. */
.game-answer.is-picked { background: var(--copper); border-color: var(--copper); transform: translateY(-4px) scale(1.015); }
.game-answers.is-locked .game-answer:not(.is-picked) { opacity: 0.35; }
.game-answers.is-locked .game-answer { pointer-events: none; }

/* ---- how a question arrives and leaves ---- */
.game-stage, .game-answers { transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.game.is-leaving .game-stage, .game.is-leaving .game-answers { opacity: 0; transform: translateY(-14px); }
.game.is-entering .game-stage, .game.is-entering .game-answers { opacity: 0; transform: translateY(18px); }

/* ---- the opening screen: a game starts, it does not just begin ---- */
.game-intro { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(16px, 2vw, 24px); }
.game-intro h1 { max-width: 15ch; color: #fff; font-size: clamp(36px, 7.6vw, 86px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }
.game-intro p { max-width: 46ch; color: rgba(255,255,255,0.86); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; }
.game-start { font-size: clamp(16px, 1.3vw, 18px); padding: 16px 34px; }
.game-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.game-meta li { padding: 7px 14px; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; color: rgba(255,255,255,0.88); font-size: 13.5px; font-weight: 600; }

/* ---- working it out ---- */
.game-tally { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
.game-tally p { color: #fff; font-size: clamp(24px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; }
.game-dots { display: flex; gap: 8px; }
.game-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); animation: gameDot 1.1s var(--ease) infinite; }
.game-dots span:nth-child(2) { animation-delay: 0.14s; }
.game-dots span:nth-child(3) { animation-delay: 0.28s; }
@keyframes gameDot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-6px); } }

@media (max-width: 860px) {
  .game-answers { grid-template-columns: 1fr; gap: 9px; }
  .game-answer { flex-direction: row; align-items: center; gap: 13px; padding: 14px 15px; }
  .game-answer-emoji { flex: none; font-size: 27px; }
  .game-answer-text { font-size: 15.5px; }
  .game-inner { gap: 12px; }
  .game-emoji { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-bg img, .game-stage, .game-answers, .game-answer { transition: none; }
  .game-answer:hover, .game-answer.is-picked { transform: none; }
  .game-dots span { animation: none; opacity: 1; }
}

/* Without JavaScript there is no game, so the questions are simply a page to
   read. Still the same content, still something a crawler can index. */
.game-nojs { padding: clamp(40px, 5vw, 72px) 0; }
.js .game-nojs { display: none; }
.no-js .game { display: none; }
.game-static + .game-static { margin-top: 26px; }
.game-static h2 { font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; letter-spacing: -0.015em; }
.game-static ul { margin-top: 8px; padding-left: 18px; list-style: disc; }
.game-static li { margin-top: 4px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* The stage supplies its own padding and sits directly under the header, so
   this page does not get the policy pages' top gap. */
.quiz-game-main { padding-top: var(--header-h); }

/* ---------- the reveal: the game's last screen ----------
   Same dark stage and the genre's own photograph, with the name arriving on
   it. The reading and the form sit below on the light, where a form belongs. */
.reveal {
  position: relative; display: grid; align-items: end;
  min-height: clamp(380px, 62svh, 620px);
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 40px) clamp(30px, 4vw, 52px);
  background: var(--char); overflow: hidden; isolation: isolate;
}
.reveal-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,15,11,0.55) 0%, rgba(20,15,11,0.4) 30%, rgba(20,15,11,0.9) 100%);
}
.reveal-inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; }
.reveal-emoji { font-size: clamp(42px, 5.4vw, 68px); line-height: 1; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)); }
.reveal-eyebrow { margin-top: 16px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.reveal-name { margin-top: 8px; color: #fff; font-size: clamp(42px, 8.4vw, 96px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.96; text-wrap: balance; }
.reveal-title { margin-top: 14px; max-width: 24ch; color: #fff; font-size: clamp(20px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }

/* padding-block, not a shorthand: the shorthand zeroed .shell's side gutters
   and put the body copy flush against the edge of the screen. */
.reveal-body { padding-block: clamp(36px, 5vw, 64px) clamp(60px, 7vw, 96px); }
.reveal-body .policy-intro { margin-top: 0; }

.quiz-crowd { margin-top: 18px; max-width: 60ch; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; color: var(--copper); font-weight: 600; }

.quiz-cta { margin-top: clamp(36px, 4.4vw, 56px); padding: clamp(26px, 3.2vw, 40px); background: var(--warm); border-radius: var(--radius); }
.quiz-cta h2 { max-width: 22ch; font-size: clamp(21px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.14; text-wrap: balance; }
.quiz-cta p { margin-top: 12px; max-width: 56ch; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.6; color: var(--ink-2); }
.quiz-cta .join-block { margin-top: 20px; }

.quiz-others { margin-top: clamp(40px, 4.4vw, 56px); padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--line); }
.quiz-others h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.quiz-others ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.quiz-others a { display: inline-block; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease); }
.quiz-others a:hover { border-color: var(--copper); background: var(--warm); }
.quiz-others a span { margin-right: 2px; }
.quiz-others p { margin-top: 18px; }

/* The way through to the full listing. The head link is the quiet one for
   somebody scanning; the button under the cards catches whoever has just read
   the three examples and wants the rest. */
.roundups-all { flex: none; align-self: flex-end; white-space: nowrap; }
.roundups-all span:not(:empty) { color: var(--ink-2); font-weight: 500; }
.roundups-more { margin-top: clamp(26px, 3vw, 36px); }
@media (max-width: 860px) {
  .roundups-all { align-self: flex-start; white-space: normal; }
}