/* ============================================================
   Main event page (JDL events and Alliance phase 0 pages).
   Loaded after event.css. Built from the approved prototype in
   prototypes/event-page; keep the two in step when the design changes.
   ============================================================ */

/* ---------- Hero additions ---------- */
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px; padding: 8px 14px; backdrop-filter: blur(6px);
}
.chip i { color: var(--accent); }
.chip--accent { background: rgba(var(--accent-rgb),.14); border-color: rgba(var(--accent-rgb),.5); }
.chip--warn { background: rgba(255,107,53,.14); border-color: rgba(255,107,53,.55); }
.chip--warn i { color: #FF7B45; }
/* The card keeps its 16:7.5 shape as a minimum height (its width is the viewport minus the
   container padding, capped at 1560px) but grows when the copy is taller: with a fixed
   aspect-ratio and overflow:hidden, the pills and the CTA were clipped around 1280px wide.
   The title size and the padding are set so the copy fits the 16:7.5 shape at common widths;
   the growth is the safety net. As a flex row the content stretches to the card height and stays vertically centred. */
@media (min-width: 769px) {
  .hero__card { display: flex; aspect-ratio: auto; min-height: min(calc((100vw - 2 * clamp(8px, 1.5vw, 20px)) * 7.5 / 16), 731px); }
  .hero__content { height: auto; padding: clamp(32px, 4vw, 72px); gap: 16px; }
}
.hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.hero__price-note { font-size: .85rem; color: var(--text-dim); }
.hero__price-note s { color: var(--text-mute); margin-right: 6px; }
.hero__price-note strong { color: #fff; font-size: 1.05rem; }

/* ---------- At a glance ---------- */
.glance { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.glance__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.glance__item { padding: 28px 24px; border-right: 1px solid var(--line); display: flex; gap: 14px; align-items: flex-start; }
.glance__item:last-child { border-right: none; }
.glance__icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--accent);
  background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.25);
}
.glance__label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); }
.glance__value { font-weight: 700; margin-top: 4px; }
.glance__sub { font-size: .8rem; color: var(--text-dim); margin-top: 2px; }
@media (max-width: 900px) {
  .glance__grid { grid-template-columns: 1fr 1fr; }
  .glance__item:nth-child(2) { border-right: none; }
  .glance__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .glance__grid { grid-template-columns: 1fr; }
  .glance__item { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ---------- Section frame ---------- */
.block { padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--line); }
.block--alt { background: var(--bg-2); }
.lead { color: var(--text-dim); max-width: 640px; line-height: 1.7; margin-top: 14px; }

/* ---------- Venue ---------- */
.venue2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: stretch; }
.venue2__map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); min-height: 380px; background: var(--surface); }
.venue2__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(.4) invert(.92) hue-rotate(180deg) contrast(.9); }
.venue2__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 36px); }
.venue2__name { font-size: 1.3rem; font-weight: 700; }
.venue2__addr { color: var(--text-dim); margin-top: 6px; line-height: 1.6; }
.venue2__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 24px; }
.btn--sm { padding: 10px 18px; font-size: .78rem; }
.btn--outline { border: 1px solid rgba(255,255,255,.18); color: #fff; }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.venue2__facts { list-style: none; border-top: 1px solid var(--line-mute); }
.venue2__facts li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-mute); font-size: .88rem; color: var(--text-dim); line-height: 1.55; }
.venue2__facts li:last-child { border-bottom: none; }
.venue2__facts i { color: var(--accent); width: 18px; margin-top: 3px; text-align: center; flex-shrink: 0; }
.venue2__facts strong { color: #fff; display: block; font-weight: 600; }
@media (max-width: 860px) { .venue2 { grid-template-columns: 1fr; } .venue2__map, .venue2__map iframe { min-height: 280px; } }

/* Online "how you join" card reuses the venue card */
.join-steps { list-style: none; counter-reset: step; }
.join-steps li { counter-increment: step; display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-mute); color: var(--text-dim); font-size: .9rem; }
.join-steps li::before { content: counter(step); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.4); }

/* ---------- Pricing ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; }
.tier--active { border-color: rgba(var(--accent-rgb),.6); box-shadow: 0 24px 60px -24px rgba(var(--accent-rgb),.55); }
.tier--vip { border-color: rgba(var(--gold-rgb),.35); }
.tier--closed { opacity: .5; }
.tier__badge { position: absolute; top: -12px; left: 26px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; background: var(--accent); color: #fff; }
.tier--vip .tier__badge { background: var(--gold); color: #1a1300; }
.tier__name { font-weight: 700; font-size: 1.1rem; }
.tier__until { font-size: .78rem; color: var(--text-mute); margin-top: 4px; }
.tier__price { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; margin: 18px 0 2px; }
.tier__price small { font-size: .9rem; font-weight: 500; color: var(--text-mute); letter-spacing: 0; }
.tier__gst { font-size: .72rem; color: var(--text-mute); }
.tier__incl { list-style: none; margin: 22px 0 26px; display: grid; gap: 10px; }
.tier__incl li { display: flex; gap: 10px; font-size: .88rem; color: var(--text-dim); line-height: 1.5; }
.tier__incl i { color: var(--accent); margin-top: 3px; }
.tier--vip .tier__incl i { color: var(--gold); }
.tier .btn { margin-top: auto; justify-content: center; width: 100%; }
.tier--vip .btn--primary { background: var(--gold); color: #1a1300; box-shadow: 0 8px 32px rgba(var(--gold-rgb),.25); }
.tier__countdown { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #FF7B45; }
.pricing__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-top: 28px; color: var(--text-dim); font-size: .85rem; }
.pricing__foot span { display: inline-flex; gap: 8px; align-items: center; }
.pricing__foot i { color: var(--accent); }
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ---------- Checkout form ---------- */
.ticket-pick { display: grid; gap: 10px; margin-bottom: 16px; }
.ticket-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); cursor: pointer; }
.ticket-opt input { accent-color: var(--accent); width: 16px; height: 16px; }
.ticket-opt__name { font-weight: 600; font-size: .9rem; }
.ticket-opt__sub { font-size: .75rem; color: var(--text-mute); }
.ticket-opt__price { margin-left: auto; font-weight: 700; }
.ticket-opt:has(input:checked) { border-color: rgba(var(--accent-rgb),.6); background: rgba(var(--accent-rgb),.07); }
.ticket-opt--disabled { opacity: .45; cursor: not-allowed; }
.qty { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); margin-bottom: 16px; }
.qty__ctrl { display: flex; align-items: center; gap: 12px; }
.qty__ctrl button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: #fff; }
.order-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-mute); margin-top: 6px; }
.order-sum strong { font-size: 1.4rem; }
.pay-badges { display: flex; justify-content: center; gap: 14px; margin-top: 14px; font-size: 1.6rem; color: var(--text-mute); }
.secure-note { display: flex; justify-content: center; gap: 8px; align-items: center; font-size: .75rem; color: var(--text-mute); margin-top: 10px; }

/* ---------- Topbar / logos ---------- */
.topbar__brand img.logo-jdl, .footer__brand img.logo-jdl { height: 30px; width: auto; }

/* ---------- Past-event notice ---------- */
.past-bar { position: relative; z-index: 5; margin-top: 76px; background: linear-gradient(90deg, rgba(255,123,69,.18), rgba(255,123,69,.06)); border-bottom: 1px solid rgba(255,123,69,.4); }
.past-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.past-bar p { color: var(--text-dim); font-size: .92rem; }
.past-bar p strong { color: #fff; }
.past-bar i { color: #FF7B45; margin-right: 8px; }

/* ---------- Hero ---------- */
.nmnk-title { font-size: clamp(2.6rem, 5.2vw, 5.2rem); font-weight: 900; line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.nmnk-title em { font-style: normal; color: var(--accent); display: block; }
.nmnk-question { font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 700; margin: 18px 0 10px; max-width: 520px; line-height: 1.35; }
.nmnk-question [data-var="hookAccent"] { color: var(--accent); }
/* JDL hero: two houses, one to own (red) and one to rent and invest (blue). The
   image sits on the right 60% of the card and fades in from the left, so the hero
   copy never covers the red house. */
/* Full card height from the top edge (not the base 115% / -8%), so Julio's head, close to
   the photo's top edge, is never cut; the hover zoom grows from the bottom for the same reason. */
.hero__bg.is-wide { left: auto !important; right: 0; top: 0; height: 100%; width: 62% !important; object-fit: cover; object-position: center top; transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%); mask-image: linear-gradient(to right, transparent 0%, #000 16%); }
.page--jdl .hero__overlay { background: linear-gradient(90deg, var(--bg) 30%, transparent 55%); }
/* Play button over Julio: it covers the photo (the right 62% of the card) and sits low, on his chest. */
.hero__play { position: absolute; z-index: 3; top: 25%; right: 0; bottom: 0; width: 62%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: none; border: 0; cursor: pointer; color: #fff; }
.hero__play-btn { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); font-size: 1.6rem; padding-left: 5px; box-shadow: 0 14px 40px rgba(0,0,0,.55); transition: transform .2s; }
.hero__play-btn::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(var(--accent-rgb),.6); animation: hero-play-pulse 2s ease-out infinite; }
.hero__play:hover .hero__play-btn, .hero__play:focus-visible .hero__play-btn { transform: scale(1.08); }
.hero__play-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 99px; background: rgba(4,10,22,.7); backdrop-filter: blur(6px); }
@keyframes hero-play-pulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__play-btn::after { animation: none; } }
@media (max-width: 768px) {
  /* On mobile the photo is a full-width banner above the copy, shown whole. */
  .hero__play { top: 0; bottom: auto; left: 0; width: 100%; aspect-ratio: 1671 / 941; padding-top: 14%; gap: 8px; }
  .hero__play-btn { width: 64px; height: 64px; font-size: 1.25rem; }
  .hero__play-label { font-size: .7rem; }
  .hero__bg.is-wide { width: 100% !important; }
  .page--jdl .hero__mobi-banner { object-position: center 45%; }
}
.hero__partner { align-self: flex-start; width: fit-content; display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 10px 16px 10px 10px; border-radius: 99px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); font-size: .88rem; color: var(--text-dim); }
.hero__partner b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; }
.hero__partner strong { color: #fff; }
.partner-invite { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb),.35); background: rgba(var(--accent-rgb),.08); margin: 4px 0 24px; font-size: .9rem; color: var(--text-dim); line-height: 1.5; }
.partner-invite i { color: var(--accent); font-size: 1.2rem; }
.partner-invite strong { color: #fff; }
.chip--past { background: rgba(255,123,69,.14); border-color: rgba(255,123,69,.55); }
.chip--past i { color: #FF7B45; }

/* ---------- Host band (fixed image) ---------- */
.host { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; border-top: 1px solid var(--line); }
.host img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.host::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 8%, rgba(1,4,12,.55) 55%, rgba(1,4,12,.15)); }
.host .container { position: relative; z-index: 1; padding-top: 140px; padding-bottom: 56px; }
.host h2 { font-size: clamp(1.8rem, 3.8vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; max-width: 820px; }
.host h2 em { font-style: normal; color: var(--accent); }
.host p { color: var(--text-dim); max-width: 640px; margin-top: 14px; line-height: 1.7; }
.host .sig { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.host .sig b { display: block; }
.host .sig span { font-size: .85rem; color: var(--text-dim); }

/* ---------- Key conversation ---------- */
.letter { max-width: 760px; margin: 0 auto; }
.letter p { color: var(--text-dim); line-height: 1.8; font-size: 1.04rem; margin-top: 18px; }
.letter p strong { color: #fff; }
.letter__lead { font-size: clamp(1.4rem, 2.6vw, 2rem) !important; color: #fff !important; font-weight: 700; line-height: 1.3 !important; letter-spacing: -.02em; }
.key { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.key__card { border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--line); background: var(--surface); }
.key__card--accent { border-color: rgba(var(--accent-rgb),.5); background: linear-gradient(160deg, rgba(var(--accent-rgb),.14), var(--surface) 60%); }
.key__label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.key__card p { color: var(--text-dim); line-height: 1.7; }
.key__card p + p { margin-top: 10px; }
.key__card strong { color: #fff; }
@media (max-width: 760px) { .key { grid-template-columns: 1fr; } }

/* ---------- Seven problems ---------- */
.problems { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.problem { position: relative; padding: 28px 28px 28px 84px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.problem__n { position: absolute; left: 26px; top: 24px; font-size: 2rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1.5px rgba(var(--accent-rgb),.6); }
.problem h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.problem p { color: var(--text-dim); font-size: .92rem; line-height: 1.7; margin-top: 8px; }
.problem:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) { .problems { grid-template-columns: 1fr; } .problem { padding-left: 70px; } .problem__n { left: 20px; } }

/* ---------- Chain Reaction ---------- */
.chain { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.chain p { color: var(--text-dim); line-height: 1.75; margin-top: 16px; }
.chain__diagram { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin: 0 auto; }
.chain__ring { position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed rgba(var(--accent-rgb),.35); animation: turn 40s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
.chain__node { position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 10px;
  background: var(--surface); border: 1px solid rgba(var(--accent-rgb),.5); box-shadow: 0 18px 50px -20px rgba(var(--accent-rgb),.6); }
.chain__node i { color: var(--accent); font-size: 1.4rem; display: block; margin-bottom: 6px; }
.chain__node strong { font-size: .95rem; line-height: 1.2; }
.chain__node small { display: block; font-size: .72rem; color: var(--text-dim); margin-top: 4px; line-height: 1.3; }
.chain__node--1 { left: 31%; top: 0; } .chain__node--2 { right: 0; bottom: 8%; } .chain__node--3 { left: 0; bottom: 8%; }
.chain__center { position: absolute; inset: 38%; display: grid; place-items: center; text-align: center; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 860px) { .chain { grid-template-columns: 1fr; } }

/* ---------- Nice Street ---------- */
.street__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.street__tag { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; border-radius: 99px; border: 1px dashed rgba(255,195,0,.6); color: #FFC300; }
.street__scene { position: relative; margin-top: 32px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 8; background: var(--surface); }
.street__scene img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.street__scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1,4,12,.55), transparent 50%); }
.street__who { position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 99px; background: rgba(1,4,12,.78); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); font-size: .8rem; color: var(--text-dim); }
.street__who b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: .72rem; }
.street__who strong { color: #fff; display: block; font-size: .85rem; }
.street__who--julio b { background: #FFC300; color: #1a1300; }
.street__interim { position: absolute; z-index: 1; right: 14px; top: 14px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; background: rgba(255,195,0,.92); color: #1a1300; }
.street { display: grid; grid-template-columns: 180px 1fr 1fr; margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.street > div { padding: 18px 22px; border-bottom: 1px solid var(--line-mute); }
.street__col { font-weight: 700; font-size: 1.05rem; background: var(--surface); display: flex; gap: 10px; align-items: center; }
.street__col i { color: var(--accent); }
.street__row { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); background: var(--bg-2); }
.street__cell { color: var(--text-dim); font-size: .9rem; display: flex; align-items: center; gap: 10px; }
.street__cell i { color: rgba(var(--accent-rgb),.6); }
.street > div:nth-last-child(-n+3) { border-bottom: none; }
.street__note { margin-top: 18px; color: var(--text-mute); font-size: .85rem; }
@media (max-width: 760px) { .street { grid-template-columns: 110px 1fr 1fr; } .street > div { padding: 14px 12px; } .street__scene { aspect-ratio: 4 / 3; } .street__who { font-size: .7rem; } }

/* ---------- Testimonials ---------- */
/* Carousel: native horizontal scroll with snap, so touch swipe works without a library. */
.stories-wrap { position: relative; }
.stories { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.stories::-webkit-scrollbar { display: none; }
.story { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.stories-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.stories-dots { display: flex; gap: 8px; }
.stories-dots button { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.2); transition: width .2s, background .2s; }
.stories-dots button.is-on { width: 24px; background: var(--accent); }
.stories-arrows { display: flex; gap: 10px; }
.stories-arrows button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; transition: border-color .2s, opacity .2s; }
.stories-arrows button:hover { border-color: var(--accent); }
.stories-arrows button:disabled { opacity: .3; cursor: default; }
.story__video { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; overflow: hidden; }
/* YouTube's hqdefault thumbnail is 4:3 with black bars; centring it at full width crops them exactly. */
.story__video img { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); opacity: .85; transition: opacity .2s; }
.story__video:hover img { opacity: 1; }
.story__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.story__play { position: absolute; inset: 0; display: grid; place-items: center; }
.story__play span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 1.2rem; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.story__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.story__quote { font-size: .95rem; line-height: 1.6; color: #fff; }
.story__quote::before { content: '“'; color: var(--accent); font-size: 1.6em; line-height: 0; vertical-align: -.3em; margin-right: 2px; }
.story__who { margin-top: auto; font-size: .82rem; color: var(--text-dim); }
.story__who strong { color: #fff; display: block; }
.story__tag { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 960px) { .stories { grid-auto-columns: calc((100% - 18px) / 2); } }
/* Phone: one card plus a peek of the next, so it reads as swipeable. */
@media (max-width: 640px) { .stories { grid-auto-columns: 86%; gap: 14px; } .stories-arrows { display: none; } .stories-nav { justify-content: center; } }

/* ---------- Bring row ---------- */
.bring-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.bring-row span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; }
.bring-row i { color: var(--accent); }

/* ---------- Venue ---------- */
.venue2__photo { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); margin-bottom: 20px; aspect-ratio: 16 / 9; }
.venue2__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Past: register replaced ---------- */
.past-card { max-width: 720px; margin: 0 auto; text-align: center; padding: clamp(28px, 5vw, 48px); border-radius: var(--r-lg); border: 1px solid rgba(255,123,69,.4); background: var(--surface); }
.past-card p { color: var(--text-dim); margin: 12px 0 24px; line-height: 1.7; }

.disclaimer { padding: 28px 0; border-top: 1px solid var(--line-mute); text-align: center; color: var(--text-mute); font-size: .8rem; line-height: 1.7; }

/* Two ticket cards side by side, centred; stacked on narrow screens. */
.tiers--two { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
@media (max-width: 760px) { .tiers--two { grid-template-columns: minmax(0, 420px); } }

/* ---------- Phone ---------- */
.stories-dots button { position: relative; }
.stories-dots button::after { content: ''; position: absolute; inset: -14px -6px; } /* 44px-ish tap target */
.street > div { min-width: 0; }
@media (max-width: 640px) {
  /* Long call-to-action labels wrap instead of widening the page. */
  .btn { white-space: normal; text-align: center; justify-content: center; max-width: 100%; }
  .hero__cta-row .btn, .letter .btn, .past-card .btn { width: 100%; }
  /* Mono labels below 11px are hard to read on a phone. */
  .glance__label, .key__label, .story__tag, .street__tag, .chain__center, .street__row, .kicker, .mono, .tier__badge { font-size: 11px !important; }
  /* Nice Street table: tighter, icons dropped so three columns fit. */
  .street { grid-template-columns: 84px 1fr 1fr; }
  .street > div { padding: 12px 10px; }
  .street__col { font-size: .85rem; gap: 6px; }
  .street__cell { font-size: .8rem; }
  .street__cell i { display: none; }
  .street__who { padding: 5px 10px 5px 5px; gap: 6px; }
  .street__who b { width: 22px; height: 22px; font-size: .6rem; }
  .street__who strong { font-size: .72rem; }
  /* Names only on a phone: with the descriptions, the two top tags overlap. */
  .street__who > span { font-size: 0; }
  .street__who > span strong { font-size: .72rem; }
  /* Host band: the photo of the full room is the point, so on a phone it sits
     above the text instead of fading behind it. */
  .host { display: block; min-height: 0; }
  .host img { position: relative; inset: auto; height: 230px; }
  .host::after { bottom: auto; height: 230px; background: linear-gradient(0deg, var(--bg) 2%, transparent 45%); }
  .host .container { padding-top: 0; padding-bottom: 44px; margin-top: -18px; }
  /* At a glance: 2 x 2 instead of one tall column. */
  .glance__grid { grid-template-columns: 1fr 1fr !important; gap: 1px; background: var(--line); }
  .glance__item { flex-direction: column; gap: 10px; padding: 18px 14px; border: none !important; background: var(--bg-2); }
  .glance__icon { width: 34px; height: 34px; border-radius: 10px; }
  .problem { padding: 22px 20px 22px 62px; }
  .problem__n { left: 16px; top: 20px; font-size: 1.6rem; }
  .key__card { padding: 22px; }
  .past-bar { margin-top: 64px; }
}


/* ---------- Event video modal ----------
   The shield covers the YouTube player and takes every click, so there is no timeline,
   no seeking and no link out to YouTube; it only plays and pauses. */
/* Above the fixed nav (9999) and the mobile sticky bar (9998). */
.vmodal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 56px 16px 16px; }
.vmodal[hidden] { display: none; }
.vmodal__backdrop { position: absolute; inset: 0; background: rgba(3,8,18,.9); backdrop-filter: blur(6px); }
.vmodal__box { position: relative; width: min(1100px, 100%, calc((100vh - 96px) * 16 / 9)); }
.vmodal__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000 center / cover no-repeat; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.vmodal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s; }
.vmodal.is-started .vmodal__frame iframe { opacity: 1; }
.vmodal__shield { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; transition: background .2s; }
.vmodal__shield span { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; padding-left: 5px; background: var(--accent); color: #fff; font-size: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; }
.vmodal.is-paused .vmodal__shield { background: rgba(3,8,18,.55); }
.vmodal.is-paused .vmodal__shield span { opacity: 1; }
.vmodal__close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.1rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); cursor: pointer; }
.vmodal__close:hover { border-color: var(--accent); }