/* ═══════════════════════════════════════════════════════════════════════
   Cali Tickets — design system
   ───────────────────────────────────────────────────────────────────────
   CONSTRAINT THAT SHAPED EVERYTHING: the private label agreement forbids
   photography of venues, stadiums, arenas, theatres or performers unless
   separately licensed. So there is no photographic layer at all. The visual
   language is type, gradient, and generated geometry — house lights, beams,
   ticket stubs and seat arcs, all vector, all inline, all free to serve.
   Side effect: the whole stylesheet is ~14KB and the LCP is a text node.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ground — white, like every major marketplace. Reading a schedule is a
     scanning task; dark type on white is the legible direction. */
  --ink:#ffffff; --ink2:#f5f8f3; --ink3:#ffffff; --ink4:#eef3ea;
  --line:rgba(16,42,10,.14); --line2:rgba(16,42,10,.28);
  /* type — near-black with a faint green cast so it sits with the brand */
  --tx:#101f0c; --tx2:#4c5c48; --tx3:#6d7c69;
  /* brand — sampled from the logo: #1b4d00 */
  --green:#1b4d00; --green2:#2a7a0c; --green3:#e8f2e2;
  --gold:#1b4d00; --coral:#2a7a0c; --violet:#1b4d00; --cyan:#2a7a0c; --lime:#2a7a0c;
  --spot:linear-gradient(103deg,#1b4d00 0%,#2a7a0c 100%);
  --spot2:linear-gradient(103deg,#2a7a0c 0%,#1b4d00 100%);
  /* metrics */
  --rad:14px; --rad-lg:22px; --pad:clamp(1.15rem,4vw,2rem);
  --wrap:1220px; --nav-h:66px;
  --shadow:0 1px 2px rgba(16,42,10,.05),0 10px 28px -14px rgba(16,42,10,.22);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--ink);color:var(--tx);font-family:var(--font);
  font-size:clamp(15.5px,.35vw + 15px,17px);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
/* SAFETY NET. An <svg> with a viewBox and no width/height resolves to 100% of
   its container, which silently blows out any layout that forgot a size rule.
   Inline icons default to text size; anything that genuinely wants to be big
   opts in with a class (.seatarc, .stage__beams) or its own width attribute. */
svg{width:1.05em;height:1.05em;flex:none}
.seatarc,.stage__beams,.logo svg,.vid svg{width:auto;height:auto}
.eyebrow svg{vertical-align:-.18em;display:inline-block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--green);color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:.7rem 1.1rem;z-index:200;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ── type scale ─────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.08;letter-spacing:-.028em;font-weight:800;text-wrap:balance}
h1{font-size:clamp(2.35rem,6.2vw,4.5rem);letter-spacing:-.04em}
h2{font-size:clamp(1.65rem,3.5vw,2.6rem);letter-spacing:-.032em}
h3{font-size:clamp(1.12rem,1.7vw,1.4rem);letter-spacing:-.02em}
h4{font-size:1.02rem;letter-spacing:-.01em}
p{margin:0 0 1.05em;text-wrap:pretty}
.lede{font-size:clamp(1.06rem,1.55vw,1.32rem);color:var(--tx2);line-height:1.58;max-width:66ch}
.small{font-size:.855rem;line-height:1.55;color:var(--tx2)}
.tiny{font-size:.775rem;line-height:1.5;color:var(--tx3)}
.eyebrow{font-size:.715rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--tx3);margin:0 0 1rem}
.grad{background:var(--spot);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--mono);font-size:.82em;letter-spacing:-.01em}

/* ── layout ─────────────────────────────────────────────────────────── */
.wrap{width:min(100% - 2*var(--pad),var(--wrap));margin-inline:auto}
.sec{padding:clamp(3.2rem,7.5vw,6.2rem) 0;position:relative}
.sec--tight{padding:clamp(2.2rem,4.5vw,3.4rem) 0}
.sec--alt{background:var(--ink2);border-block:1px solid var(--line)}
.grid{display:grid;gap:clamp(.85rem,1.7vw,1.25rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,212px),1fr))}
.split{display:grid;gap:clamp(1.6rem,4vw,3.4rem);grid-template-columns:1fr}
@media(min-width:940px){.split{grid-template-columns:1.05fr .95fr;align-items:start}
  .split--sticky>:last-child{position:sticky;top:calc(var(--nav-h) + 1.5rem)}}
.stack>*+*{margin-top:1.15rem}
.center{text-align:center}
.head{max-width:64ch;margin-bottom:clamp(1.7rem,3.4vw,2.6rem)}
.head.center{margin-inline:auto}

/* ── nav ────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:90;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line)}
.nav__links a{color:var(--tx2);font-weight:600}
.nav a{color:var(--tx)}
.nav__in{display:flex;align-items:center;gap:1.4rem;width:min(100% - 2*var(--pad),var(--wrap));margin-inline:auto}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.09rem;letter-spacing:-.035em;flex:none}
.logo svg{width:29px;height:29px;flex:none}
.logo b{font-weight:800}
.nav__links{display:none;gap:.15rem;margin-left:.4rem}
@media(min-width:1000px){.nav__links{display:flex}}
.nav__links a{padding:.5rem .72rem;border-radius:9px;font-size:.9rem;font-weight:600;color:var(--tx2);transition:color .15s,background .15s}
.nav__links a:hover{color:var(--green);background:var(--green3)}
.nav__cta{margin-left:auto;display:flex;align-items:center;gap:.55rem}
.nav__tel{display:none;font-weight:700;font-size:.87rem;color:var(--tx2);padding:.5rem .7rem;border-radius:9px}
.nav__tel:hover{color:var(--gold)}
@media(min-width:700px){.nav__tel{display:block}}
.nav__call{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line2);
  border-radius:10px;color:var(--tx)}
.nav__call:hover{color:var(--gold);border-color:var(--gold)}
@media(min-width:700px){.nav__call{display:none}}
.burger{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line2);
  background:transparent;border-radius:10px;color:var(--tx);cursor:pointer}
@media(min-width:1000px){.burger{display:none}}
.drawer{position:fixed;inset:var(--nav-h) 0 0;background:var(--ink);z-index:89;padding:1.4rem var(--pad) 3rem;
  overflow-y:auto;display:none}
.drawer[data-open]{display:block}
.drawer .navgrp{color:var(--tx3);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin:1.5rem 0 .5rem}
.drawer .navgrp:first-child{margin-top:0}
.drawer a{display:block;padding:.62rem 0;font-size:1.02rem;font-weight:600;border-bottom:1px solid var(--line)}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.35rem;border-radius:11px;font-weight:750;font-size:.945rem;
  letter-spacing:-.012em;border:1px solid transparent;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s,background .16s;white-space:nowrap}
.btn svg{width:17px;height:17px;flex:none}
.btn--go{background:var(--spot);color:#fff;box-shadow:0 8px 22px -10px rgba(27,77,0,.55)}
.btn--go:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(255,77,109,.9)}
.btn--ghost{border-color:var(--line2);color:var(--tx);background:#fff}
.btn--ghost:hover{background:var(--green3);border-color:var(--green);transform:translateY(-2px)}
.btn--sm{padding:.58rem .95rem;font-size:.86rem;border-radius:9px}
.btn--wide{width:100%}

/* ── the stage: hero ────────────────────────────────────────────────── */
.stage{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(3.2rem,8vw,6rem) 0 clamp(2.8rem,6vw,4.6rem);
  border-bottom:1px solid var(--line)}
/* The beams were house lights against black. On white they become a faint
   wash — kept for brand texture, dropped to near-nothing for legibility. */
.stage__beams{position:absolute;inset:-25% -10% auto;height:150%;z-index:-2;opacity:.07;pointer-events:none}
.stage__glow{position:absolute;left:50%;top:-35%;width:min(140vw,1500px);aspect-ratio:1;
  transform:translateX(-50%);z-index:-3;pointer-events:none;
  background:radial-gradient(closest-side,rgba(42,122,12,.13),rgba(27,77,0,.05) 42%,transparent 72%)}
.stage__grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.75;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 22%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 22%,#000 25%,transparent 78%)}
.stage h1{max-width:17ch}
.stage .lede{margin-top:.35rem}

/* ── search ─────────────────────────────────────────────────────────── */
.search{display:flex;gap:.5rem;margin:1.75rem 0 1rem;max-width:620px;flex-wrap:wrap}
/* Below ~520px a side-by-side field + button squeezes the input to about half
   the row and the placeholder truncates mid-word. The search box is the
   primary conversion element on this site; it gets the full row. */
@media(max-width:520px){
  .search{flex-direction:column}
  .search__field{width:100%}
  .search .btn{width:100%}
}
.search__field{flex:1;position:relative;display:flex;align-items:center}
.search__field svg{position:absolute;left:.95rem;width:18px;height:18px;color:var(--tx3);pointer-events:none}
.search input{width:100%;padding:.95rem 1rem .95rem 2.85rem;border-radius:12px;
  border:1px solid var(--line2);background:var(--ink3);color:var(--tx);font:inherit;font-size:.98rem}
.search input::placeholder{color:var(--tx3)}
.search input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,255,.22)}
.suggest{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:.35rem}
.suggest a{font-size:.8rem;padding:.34rem .68rem;border-radius:99px;border:1px solid var(--line);
  color:var(--tx2);background:#fff;font-weight:600}
.suggest a:hover{border-color:var(--line2);color:var(--tx)}

/* ── proof strip ────────────────────────────────────────────────────── */
.proof{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--rad-lg);overflow:hidden;grid-template-columns:repeat(2,1fr);margin-top:2.4rem}
@media(min-width:760px){.proof{grid-template-columns:repeat(4,1fr)}}
.proof>div{background:var(--ink2);padding:1.15rem 1.2rem}
.proof b{display:block;font-size:clamp(1.5rem,3vw,2.05rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.proof span{display:block;font-size:.775rem;color:var(--tx3);margin-top:.28rem;line-height:1.4}

/* ── cards ──────────────────────────────────────────────────────────── */
.card{background:var(--ink3);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow);
  padding:1.2rem 1.25rem;position:relative;transition:border-color .16s,transform .16s,background .16s}
a.card:hover{border-color:var(--green);transform:translateY(-2px);background:var(--ink4);box-shadow:0 10px 26px -12px rgba(16,42,10,.3)}
.card h3{margin-bottom:.3rem}
.card p:last-child{margin-bottom:0}
.card__meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.tag{font-size:.7rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  padding:.24rem .55rem;border-radius:6px;background:var(--green3);color:var(--green);font-weight:700}
.tag--hot{background:rgba(255,77,109,.16);color:#ff8ea3}
.tag--go{background:rgba(157,240,106,.14);color:var(--lime)}

/* ticket-stub card: the one recurring brand object */
.ticket{position:relative;background:var(--ink3);border:1px solid var(--line);
  border-radius:var(--rad);padding:1.1rem 1.2rem 1.1rem 1.55rem;overflow:hidden;
  transition:border-color .16s,transform .16s}
.ticket::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)}
.ticket::after{content:"";position:absolute;left:calc(100% - 34px);top:-9px;bottom:-9px;width:18px;
  background:radial-gradient(circle at 50% 0,var(--ink2) 9px,transparent 9px) top/18px 18px repeat-y;opacity:.9}
a.ticket:hover{border-color:var(--line2);transform:translateY(-2px)}
.ticket__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.ticket h3{font-size:1.04rem;margin:0}
.ticket .tiny{margin-top:.25rem}

/* ── mandatory resale disclosure ────────────────────────────────────────
   Required on every listing and checkout page. MUST NOT be deleted, hidden,
   or collapsed behind an accordion. Do not add `details`, `hidden`, or a
   max-height to this block — that is a first strike. */
.disclosure{border:1px solid rgba(255,194,75,.30);background:rgba(255,194,75,.055);
  border-radius:var(--rad);padding:.95rem 1.1rem;display:flex;gap:.8rem;align-items:flex-start}
.disclosure svg{width:19px;height:19px;flex:none;color:var(--gold);margin-top:.12rem}
.disclosure p{margin:0;font-size:.845rem;line-height:1.58;color:var(--tx2)}
.disclosure strong{color:var(--tx);font-weight:700}
.disclosure--inline{margin:1.4rem 0}

/* ── seat-map motif (generated, never a licensed venue map) ─────────── */
.seatarc{width:100%;height:auto;display:block;opacity:.92}

/* ── tips / list ────────────────────────────────────────────────────── */
.tips{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.tips li{display:flex;gap:.75rem;align-items:flex-start;font-size:.93rem;line-height:1.6;color:var(--tx2)}
.tips li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--spot);
  flex:none;margin-top:.55rem;transform:rotate(45deg)}
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.facts div{background:var(--ink2);padding:.75rem 1rem;display:flex;justify-content:space-between;gap:1rem;font-size:.885rem}
.facts dt,.facts span:first-child{color:var(--tx3)}
.facts b{font-weight:700;text-align:right}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.05rem 2.2rem 1.05rem 0;font-weight:700;font-size:1.01rem;
  position:relative;list-style:none;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:1.4rem;width:9px;height:9px;
  border-right:2px solid var(--tx3);border-bottom:2px solid var(--tx3);transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>div{padding:0 0 1.15rem;color:var(--tx2);font-size:.94rem;max-width:78ch}
.faq details>div p:last-child{margin-bottom:0}

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.crumb{font-size:.79rem;color:var(--tx3);padding:1rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.crumb a{color:var(--tx3)}.crumb a:hover{color:var(--tx2)}
.crumb span[aria-current]{color:var(--tx2)}
.crumb i{font-style:normal;opacity:.5}

/* ── review ─────────────────────────────────────────────────────────── */
.quote{background:var(--ink3);border:1px solid var(--line);border-radius:var(--rad);padding:1.3rem}
.quote p{font-size:.97rem;color:var(--tx);margin-bottom:.9rem}
.quote footer{font-size:.8rem;color:var(--tx3)}
.stars{display:flex;gap:2px;margin-bottom:.7rem}
.stars svg{width:15px;height:15px;color:var(--gold)}
.pending{border:1px dashed var(--line2);border-radius:var(--rad);padding:1.5rem;text-align:center;color:var(--tx3);font-size:.88rem}

/* ── table ──────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.885rem}
th,td{text-align:left;padding:.72rem .95rem;border-bottom:1px solid var(--line)}
th{background:var(--ink2);font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3)}
tr:last-child td{border-bottom:0}

/* ── prose (blog) ───────────────────────────────────────────────────── */
.prose{max-width:72ch}
.prose h2{margin-top:2.4rem;font-size:clamp(1.32rem,2.4vw,1.75rem)}
.prose h3{margin-top:1.7rem}
.prose ul,.prose ol{padding-left:1.15rem;color:var(--tx2)}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.15rem;border-left:3px solid var(--violet);color:var(--tx2);font-size:1.02rem}
.prose code{font-family:var(--mono);font-size:.87em;background:var(--ink3);padding:.14em .4em;border-radius:5px}

/* ── video ──────────────────────────────────────────────────────────── */
.vid{border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden;background:var(--ink2);position:relative}
.vid video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:var(--ink2)}

/* ── letter index ───────────────────────────────────────────────────── */
.alpha{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:1.6rem}
.alpha a{width:33px;height:33px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);
  font-size:.82rem;font-weight:700;color:var(--tx2)}
.alpha a:hover{border-color:var(--line2);color:var(--tx)}
.linkcols{columns:2;column-gap:1.6rem}
@media(min-width:760px){.linkcols{columns:3}}
@media(min-width:1060px){.linkcols{columns:4}}
.linkcols a{display:block;padding:.32rem 0;font-size:.895rem;color:var(--tx2);break-inside:avoid}
.linkcols a:hover{color:var(--gold)}

/* ── alerts opt-in (the owned-list asset) ───────────────────────────── */
.optin{background:var(--ink2);border:1px solid var(--line);border-radius:var(--rad-lg);padding:clamp(1.4rem,3.4vw,2.3rem)}
.optin form{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.optin input[type=email]{flex:1;min-width:220px;padding:.86rem 1rem;border-radius:11px;border:1px solid var(--line2);
  background:var(--ink3);color:var(--tx);font:inherit}
.optin input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,255,.22)}
.consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;font-size:.775rem;color:var(--tx3);line-height:1.5}
.consent input{margin-top:.2rem;flex:none;accent-color:var(--violet)}

/* ── footer ─────────────────────────────────────────────────────────── */
.foot{background:var(--ink2);border-top:1px solid var(--line);padding:clamp(2.6rem,5.5vw,4rem) 0 2rem;margin-top:auto}
.foot__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));margin-bottom:2.4rem}
.foot .navgrp{font-size:.71rem;letter-spacing:.17em;text-transform:uppercase;color:var(--tx3);margin-bottom:.85rem}
.foot a{display:block;padding:.24rem 0;font-size:.875rem;color:var(--tx2)}
.foot a:hover{color:var(--gold)}
.foot__bottom{border-top:1px solid var(--line);padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between;align-items:center}
.social{display:flex;gap:.5rem}
.social a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;padding:0}
.social a:hover{border-color:var(--line2);color:var(--gold)}
.social svg{width:16px;height:16px}

/* ── beam animation ─────────────────────────────────────────────────── */
@keyframes sweep{0%,100%{opacity:.34;transform:translateX(-3%) rotate(-1.2deg)}
                 50%{opacity:.72;transform:translateX(3%) rotate(1.2deg)}}
.beam{animation:sweep 11s ease-in-out infinite;transform-origin:50% 0}
.beam:nth-child(2){animation-duration:14s;animation-delay:-3s}
.beam:nth-child(3){animation-duration:17s;animation-delay:-7s}

body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
@media print{.nav,.foot,.drawer,.stage__beams,.stage__glow{display:none}
  body{background:#fff;color:#000}}

/* ── Near-you module ──────────────────────────────────────────────────────
   The marketplace entry point. Competitors open with a location chip and a
   grid of local inventory; this section is that shape, populated from the
   catalogue and upgraded to the visitor's own market by /api/near. */
.sec--near{padding-top:3.2rem;padding-bottom:3.2rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.geo{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .85rem;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:.9rem;font-weight:600;white-space:nowrap}
.geo svg{color:var(--gold);flex:none}
.geo__change{margin-left:.35rem;font-size:.8rem;font-weight:600;opacity:.7;
  text-decoration:underline;text-underline-offset:2px}
.geo__change:hover{opacity:1}
.card--mkt{display:flex;flex-direction:column;gap:.35rem}
.card--mkt h3{margin:0;font-size:1.15rem;line-height:1.25}
@media (max-width:640px){
  .head--row{align-items:flex-start;flex-direction:column}
  .sec--near{padding-top:2.4rem;padding-bottom:2.4rem}
}

/* ── Legibility pass ──────────────────────────────────────────────────────
   Marc's note was "make it EASY to read". On white that means: heavier body
   colour, a slightly larger base, and real contrast on the secondary tones —
   the old greys were tuned against black and go weak on white. */
body{font-size:clamp(16px,.35vw + 15.5px,17.5px);line-height:1.65;color:var(--tx)}
.lede{color:var(--tx2)}
.small{color:var(--tx2)}
.tiny{color:var(--tx3)}
h1,h2,h3,h4{color:var(--tx)}
.eyebrow{color:var(--green);opacity:.9}
a:hover{color:var(--green)}
.prose a,.card a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.nav{border-bottom:1px solid var(--line)}
.sec--alt{background:var(--ink2)}
/* Cards need an edge on white or the grid reads as one flat sheet. */
.card,.ticket,.quote,.optin,.vid{background:#fff}
.proof>div{background:#fff;border:1px solid var(--line)}
.facts div{background:var(--ink2)}
th{background:var(--ink2);color:var(--tx2)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ── Marketplace shell ────────────────────────────────────────────────────
   Vivid Seats' homepage is a search bar in the nav and four big cards. No
   hero, no manifesto. This is that. */
.navsearch{flex:1 1 auto;max-width:420px;display:flex;align-items:center;gap:.55rem;
  background:var(--ink2);border:1px solid var(--line);border-radius:999px;
  padding:.55rem 1.05rem;transition:border-color .15s,background .15s}
.navsearch:focus-within{background:#fff;border-color:var(--green)}
.navsearch svg{color:var(--tx3);flex:none}
.navsearch input{flex:1;border:0;background:transparent;font:inherit;font-size:.97rem;
  color:var(--tx);outline:none;min-width:0}
.navsearch input::placeholder{color:var(--tx3)}

.sec--picks{padding-top:clamp(2rem,4vw,3.2rem)}
.picks__head{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  flex-wrap:wrap;margin-bottom:1.2rem}
.picks__head h1{font-size:clamp(1.75rem,3.6vw,2.7rem);margin:0;letter-spacing:-.032em}
.picks__more{font-weight:700;color:var(--green);display:inline-flex;align-items:center;gap:.35rem;
  white-space:nowrap}
.picks__foot{margin-top:2rem;text-align:center}

.chips{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.9rem}
.chip{cursor:pointer;font-family:inherit;padding:.5rem 1.05rem;border:1px solid var(--line2);border-radius:999px;
  font-size:.9rem;font-weight:650;color:var(--tx2);background:#fff;transition:.15s}
.chip:hover{border-color:var(--green);color:var(--green)}
.chip--on{background:var(--green3);border-color:var(--green3);color:var(--green)}

/* Four big cards. Image on top, then name, then the facts under it. */
.ecards{display:grid;gap:1.5rem;grid-template-columns:repeat(4,1fr)}
.ecard{display:flex;flex-direction:column;border-radius:var(--rad);overflow:hidden;
  background:#fff;transition:transform .16s}
.ecard:hover{transform:translateY(-3px)}
.ecard:hover b{color:var(--green)}
.cardart{display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/2.4;background:var(--ink4)}
.cardart svg{width:100%;height:100%;display:block}
.ecard__b{display:flex;flex-direction:column;gap:.28rem;padding:.85rem .1rem 0}
.ecard__b b{font-size:1.06rem;font-weight:800;letter-spacing:-.018em;line-height:1.25;color:var(--tx)}
.ecard__meta{font-size:.94rem;font-weight:700;color:var(--green2)}
.ecard__v{font-size:.9rem;color:var(--tx3)}
@media (max-width:1000px){.ecards{grid-template-columns:repeat(2,1fr)}
  .navsearch{order:3;flex-basis:100%;max-width:none}}
@media (max-width:560px){.ecards{grid-template-columns:1fr}}

/* Category tiles carry a coloured, category-specific mark so a grid of them
   reads as distinct objects rather than a wall of identical boxes. */
.ticket--cat{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem}
.ticket--cat h3{margin:0 0 .15rem;font-size:1.02rem}
.ticket--cat .tiny{margin:0}
.ticket__t{min-width:0}
.catbadge{flex:none;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--cc) 13%,#fff);color:var(--cc)}
.catbadge svg{width:28px;height:28px}

/* ── Mega-menu ────────────────────────────────────────────────────────────
   CSS-only: hover or keyboard focus opens it, so it works with JS off and
   tab navigation gets it without extra code. */
.nav__links{display:flex;align-items:center;gap:.15rem}
.nav__item{position:relative}
.nav__top{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem .7rem;border:0;
  background:none;font:inherit;font-size:.95rem;font-weight:650;color:var(--tx2);
  cursor:pointer;border-radius:9px;white-space:nowrap}
.nav__top:hover{color:var(--green);background:var(--green3)}
.nav__top svg{width:.85em;height:.85em;opacity:.6;transition:transform .15s}
.nav__item:hover .nav__top svg{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:min(88vw,720px);background:#fff;border:1px solid var(--line);
  border-radius:var(--rad-lg);box-shadow:0 24px 60px -24px rgba(16,42,10,.35);
  padding:1.1rem;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;
  z-index:95}
.nav__item:hover .mega,.nav__item:focus-within .mega{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega__in{display:flex;gap:.4rem}
.mega__col{flex:1;display:flex;flex-direction:column;min-width:0}
.mega__col a{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;border-radius:10px;
  font-size:.92rem;font-weight:600;color:var(--tx2);min-width:0}
.mega__col a:hover{background:var(--ink2);color:var(--green)}
.mega__col a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega__col .catbadge{width:30px;height:30px;border-radius:8px}
.mega__col .catbadge svg{width:19px;height:19px}
.mega__all{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.7rem;
  padding:.7rem;border-radius:11px;background:var(--green);color:#fff;font-weight:700;font-size:.93rem}
.mega__all:hover{background:var(--green2);color:#fff}
@media (max-width:1180px){.nav__links{display:none}}

/* The supplied brand lockup replaces the drawn mark + wordmark in the nav. */
.logo img{height:34px;width:auto;display:block}
@media (max-width:520px){.logo img{height:28px}}

/* Specificity fixes on the mega-menu: the button label was inheriting the
   link colour (dark green on dark green), and 4 columns at 720px clipped the
   longer league names. */
.nav .mega .mega__all,.nav .mega .mega__all:hover{color:#fff}
.mega{min-width:min(94vw,880px)}
.mega__col a span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.mega__col a{align-items:center}

/* Mobile nav: the search sat in a fixed-height flex row, so "wrap to its own
   line" could not happen and it pushed 110px past the viewport instead. Let
   the bar grow and the search take a full row of its own. */
@media (max-width:1000px){
  .nav{height:auto;min-height:var(--nav-h);padding:.55rem 0}
  .nav__in{flex-wrap:wrap;row-gap:.55rem}
  .logo{order:1}
  .nav__cta{order:2;margin-left:auto}
  .navsearch{order:3;flex:1 0 100%;max-width:none}
}

/* Category tile text was running under the ticket perforation on the longer
   labels ("Premier League"). Let it wrap and keep it clear of the notches. */
.ticket--cat{padding-right:2.6rem}
.ticket--cat h3{white-space:normal;overflow-wrap:anywhere;hyphens:auto}
.ticket__t{flex:1 1 auto}

/* ── Hero search ──────────────────────────────────────────────────────────
   Marc: "smack in the middle of the page, big and bold". Ticketmaster's
   shape — one wide band, three fields, centred, the largest object above the
   fold. The nav search is redundant while this is on screen, so it hides. */
body:has(#hero-search) .navsearch{display:none}
.hsec{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(2rem,4vw,3rem);text-align:center;
  background:linear-gradient(180deg,var(--green3),#fff 82%);border-bottom:1px solid var(--line)}
.wrap--mid{width:min(100% - 2*var(--pad),980px);margin-inline:auto}
.hsec__h{font-size:clamp(2.3rem,5.4vw,3.9rem);margin:0 0 .35rem;letter-spacing:-.04em}
.hsec__s{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--tx2);margin:0 0 1.8rem}

.hsearch{display:flex;align-items:stretch;gap:0;background:#fff;border:2px solid var(--green);
  border-radius:16px;box-shadow:0 18px 44px -22px rgba(16,42,10,.45);overflow:hidden;text-align:left}
.hsearch__f{flex:1 1 0;min-width:0;padding:.72rem 1.1rem;border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:.1rem}
.hsearch__f--q{flex:1.5 1 0}
.hsearch__f label{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3)}
.hsearch__in{display:flex;align-items:center;gap:.5rem;min-width:0}
.hsearch__in svg{color:var(--green);flex:none}
.hsearch__in input{flex:1;min-width:0;border:0;background:transparent;font:inherit;
  font-size:1.03rem;font-weight:650;color:var(--tx);outline:none;padding:0}
.hsearch__in input::placeholder{color:var(--tx3);font-weight:500}
.hsearch__go{flex:none;padding:0 clamp(1.4rem,3vw,2.4rem);border:0;background:var(--green);
  color:#fff;font:inherit;font-size:1.06rem;font-weight:800;cursor:pointer;letter-spacing:-.01em}
.hsearch__go:hover{background:var(--green2)}
.hsec .suggest{justify-content:center;margin-top:1rem}
@media (max-width:760px){
  .hsearch{flex-wrap:wrap;border-radius:14px}
  .hsearch__f{flex:1 0 100%;border-right:0;border-bottom:1px solid var(--line)}
  .hsearch__go{flex:1 0 100%;padding:.95rem}
}

/* ── Header rebuild ───────────────────────────────────────────────────────
   The nav was carrying too much: brand, seven links, three dropdowns and a
   phone number, all at one weight, so nothing read as primary. Both Vivid and
   Ticketmaster solve this with a slim utility strip above the nav. */
.util{background:var(--green);color:#fff;font-size:.79rem;line-height:1}
.util__in{width:min(100% - 2*var(--pad),var(--wrap));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;height:34px}
.util__g{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;opacity:.95}
.util__g svg{width:14px;height:14px;flex:none;opacity:.9}
.util__r{display:flex;gap:1.15rem;white-space:nowrap}
.util__r a{color:#fff;opacity:.9;font-weight:600}
.util__r a:hover{opacity:1;color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.util__g{display:none}
  .util__in{justify-content:center}}

.nav{height:70px}
.nav__in{gap:1.9rem}
.logo img{height:38px}
.nav__links{gap:.35rem;margin-left:auto}
.nav__top{font-size:.98rem;font-weight:700;color:var(--tx);padding:.55rem .8rem}
.nav__cta{display:flex;align-items:center;gap:.6rem;flex:none}
.nav__tel{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;
  border:1.5px solid var(--green);border-radius:999px;color:var(--green);
  font-weight:800;font-size:.93rem;white-space:nowrap}
.nav__tel svg{width:15px;height:15px}
.nav__tel:hover{background:var(--green);color:#fff}
.nav__call{display:none}
@media (max-width:1180px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
}
@media (max-width:560px){
  .nav__tel span{display:none}
  .nav__tel{padding:.55rem .7rem}
}

/* Event artwork must fill its box — TN's tiles are not all one aspect ratio,
   so without this the card shows a strip of background under the photo. */
.cardart img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Artist pages ─────────────────────────────────────────────────────── */
.artisthero{width:100%;max-height:340px;object-fit:cover;border-radius:var(--rad-lg);
  margin-bottom:1.4rem;background:var(--ink2)}
.dates{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;background:#fff}
.drow{display:grid;grid-template-columns:130px 1fr auto;gap:1rem;align-items:center;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--line);transition:background .12s}
.drow:last-child{border-bottom:0}
.drow:hover{background:var(--green3)}
.drow b{display:block;line-height:1.25}
.drow__d b{color:var(--green2);font-weight:800}
.drow__v b{font-weight:750;overflow-wrap:anywhere}
.drow__c{display:inline-flex;align-items:center;gap:.35rem;font-weight:750;
  color:var(--green);white-space:nowrap;font-size:.9rem}
@media (max-width:640px){
  .drow{grid-template-columns:1fr;gap:.3rem}
  .drow__c{justify-content:flex-start}
}

/* Mega-menu is a text list now — the inline badges were 21KB on every page. */
.mega__col a{padding:.5rem .7rem;font-size:.94rem}
.mega__col a::after{content:"›";margin-left:auto;opacity:.35;font-size:1.05rem;line-height:1}

/* Nav-group labels: styled like the old h4s, but no outline weight. */
.navgrp{font-weight:800;margin:0 0 .85rem}

/* Feature-strip titles: heading weight, no outline weight. */
.strip__t{font-size:1rem;font-weight:800;letter-spacing:-.02em;margin:0 0 .35rem;color:var(--tx)}

/* Announcement bar under the nav. The live TN template runs one; this is the
   same message in the rebuilt type. Sits below the nav, not above it, so the
   brand and the search stay the first things on the page. */
.promo{background:var(--green3);border-bottom:1px solid var(--line);
  font-size:.88rem;line-height:1.4;color:var(--tx)}
/* NOT flex: gap treats each inline text node as its own item, which pushed
   the sentence's full stop off the end of the word ("top dollar ."). */
.promo__in{width:min(100% - 2*var(--pad),var(--wrap));margin-inline:auto;
  padding:.6rem 0;text-align:center}
.promo b{font-weight:800;color:var(--green)}
.promo a{color:var(--green);font-weight:750;text-decoration:underline;text-underline-offset:2px}
.promo a:hover{color:var(--green2)}
.promo__sep{opacity:.4;margin:0 .35rem}
@media (max-width:640px){.promo{font-size:.82rem}.promo__sep{display:none}}

/* ── chat + call dock ────────────────────────────────────────────────────
   The one interactive surface on an otherwise static 2,280-page build.
   Three jobs, in the order a nervous ticket buyer wants them: talk to
   someone now (call), ask a question (chat), or leave a number and be
   called back. Everything degrades: with JS off the dock renders as a
   plain tel: link and nothing else, which is why the call anchor is real
   markup and not a button. */
.dock{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px;pointer-events:none}
.dock>*{pointer-events:auto}
.dock__call{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:var(--green);
  border:1px solid var(--line2);border-radius:999px;padding:.62rem .95rem;font-weight:800;
  font-size:.88rem;box-shadow:var(--shadow)}
.dock__call:hover{border-color:var(--green);background:var(--green3)}
.dock__call svg{color:var(--green2)}
.dock__open{display:inline-flex;align-items:center;gap:.55rem;background:var(--spot);color:#fff;
  border:0;border-radius:999px;padding:.78rem 1.15rem;font:inherit;font-weight:800;font-size:.92rem;
  cursor:pointer;box-shadow:0 6px 22px -8px rgba(27,77,0,.55)}
.dock__open:hover{filter:brightness(1.08)}
.dock__open svg{width:1.15em;height:1.15em}
body[data-chat-open] .dock__open,body[data-chat-open] .dock__call{display:none}

.cchat{position:fixed;right:16px;bottom:16px;z-index:121;width:min(390px,calc(100vw - 32px));
  height:min(620px,calc(100vh - 32px));background:#fff;border:1px solid var(--line);
  border-radius:var(--rad-lg);box-shadow:0 24px 60px -18px rgba(16,42,10,.42);
  display:none;flex-direction:column;overflow:hidden}
.cchat[data-open="1"]{display:flex}
.cchat__hd{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;background:var(--spot);color:#fff}
.cchat__hd b{display:block;font-size:.95rem;font-weight:800;line-height:1.2}
.cchat__hd small{display:block;font-size:.75rem;opacity:.85}
.cchat__x{margin-left:auto;background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0 .25rem;opacity:.85}
.cchat__x:hover{opacity:1}
.cchat__log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;
  background:var(--ink2)}
.cmsg{max-width:86%;padding:.6rem .8rem;border-radius:14px;font-size:.9rem;line-height:1.5;
  white-space:pre-wrap;word-wrap:break-word}
.cmsg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.cmsg.me{background:var(--green);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.cmsg.sys{align-self:center;background:var(--green3);color:var(--green);font-size:.8rem;
  font-weight:700;text-align:center;border-radius:999px;padding:.42rem .85rem}
.cmsg.bot a{color:var(--green2);text-decoration:underline}
.cdots span{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;
  background:var(--tx3);animation:cbounce 1.1s infinite}
.cdots span:nth-child(2){animation-delay:.15s}.cdots span:nth-child(3){animation-delay:.3s}
@keyframes cbounce{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.cchat__quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 1rem .7rem;background:var(--ink2)}
.cchat__quick button{background:#fff;border:1px solid var(--line2);color:var(--tx2);border-radius:999px;
  padding:.36rem .7rem;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer}
.cchat__quick button:hover{border-color:var(--green);color:var(--green)}
.cchat__cta{display:flex;gap:8px;padding:.7rem 1rem;border-top:1px solid var(--line);background:#fff}
.cchat__cta a,.cchat__cta button{flex:1;text-align:center;padding:.6rem;border-radius:11px;
  font:inherit;font-weight:800;font-size:.82rem;cursor:pointer;border:1px solid var(--line2);
  background:#fff;color:var(--tx)}
.cchat__cta .c1{background:var(--green);color:#fff;border-color:var(--green)}
.cchat__cta a:hover,.cchat__cta button:hover{filter:brightness(1.06)}
.cchat__in{display:flex;gap:8px;padding:.7rem 1rem 1rem;background:#fff}
.cchat__in input{flex:1;border:1px solid var(--line2);border-radius:999px;padding:.62rem .95rem;
  font:inherit;font-size:.88rem;background:var(--ink2);color:var(--tx)}
.cchat__in input:focus{outline:none;border-color:var(--green);background:#fff}
.cchat__in button{background:var(--green);color:#fff;border:0;border-radius:50%;width:40px;height:40px;
  flex:none;cursor:pointer;display:grid;place-items:center}
.cchat__in button:disabled{opacity:.45;cursor:default}
.cform{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:.85rem;align-self:stretch}
.cform input,.cform textarea{border:1px solid var(--line2);border-radius:10px;padding:.55rem .7rem;
  font:inherit;font-size:.85rem;background:var(--ink2);color:var(--tx);width:100%}
.cform textarea{min-height:64px;resize:vertical}
.cform button{background:var(--green);color:#fff;border:0;border-radius:10px;padding:.62rem;
  font:inherit;font-weight:800;font-size:.85rem;cursor:pointer}
.cform .cnote{font-size:.7rem;color:var(--tx3);line-height:1.45}
@media (max-width:560px){
  .cchat{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0}
  .dock{right:12px;bottom:12px}
  .dock__call span{display:none}
  .dock__call{padding:.7rem}
}
@media print{.dock,.cchat{display:none!important}}