/* Homepage refresh (live 28 Oct 2026, loaded after home.css; remove the link in page 718 to undo).
   Two typefaces: Brush Up Too for anything that should shout, Familjen Grotesk for everything else.
   Veneer, DM Mono and Big Shoulders are gone. Remapping the tokens moves every old use in one go;
   the rules below then tune sizes, tracking and rhythm for the new pairing. */
:root {
  --f-display: "Brush Up Too", Impact, sans-serif;
  --f-mono: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
}
body { font-variant-numeric: lining-nums tabular-nums; }

/* Small text was set in mono with tracking. In the grotesk it reads better tight, a touch heavier */
.eyebrow, .chip__date, .count, .ruler__month, .ruler__fest small, .world__idx, .world__status, .world__place,
.world__acts li b, .world__terms, .stat span, .stat--tbc i, .tab b, .rows .where, .rows .when, .rows .pill,
.aerial figcaption, .venue small, .stage i, .stage span, .partners .src, .beat label, .beat .note, footer .meta,
.deck__label small, .worlds__nav, .look button { letter-spacing: 0 !important; }
.eyebrow { font: 600 15px/1.3 var(--f-body); color: var(--muted); }
.world__place { font-size: 17px; font-weight: 500; }
.rows .where, .rows .when { font-size: 15px; }

/* Display type: Brush Up Too is caps-only and set at weight 400 */
h1, .world__date, .marquee li { font-weight: 400 !important; letter-spacing: .005em; }
/* Brush digits are hard to read at a glance (its 7 looks like a 1), so numbers use the grotesk, set big and tight */
.stat b, .count strong { font: 600 clamp(56px, 6.2vw, 96px)/.9 var(--f-body) !important; letter-spacing: -.045em !important; font-variant-numeric: lining-nums tabular-nums; }
.stat--tbc b { -webkit-text-stroke: 2px var(--sun); }
.hero h1 { font-family: var(--f-brush); line-height: .9; }
.hero h1 em { font-size: 1em; }

/* Section titles join the hero: Brush, upper case, generous size, then breathing room */
h2 { font: 400 clamp(52px, 6.6vw, 104px)/.9 var(--f-brush); text-transform: uppercase; letter-spacing: .005em; }
h3 { letter-spacing: -.02em; }

/* One colour per festival, everywhere: the same as the hero word (Bay yellow, Dunes orange, Gardens green, Park green) */
.ruler__fest[href="#bay"] { --c: #fcbc04 !important; }
.ruler__fest[href="#dunes"] { --c: #fd4d01 !important; }
.ruler__fest[href="#wild"] { --c: #60b549 !important; }
.ruler__fest[href="#park"] { --c: #22843b !important; }

/* Hero labels: one calm pill and a plain line, no tracking, no code-style type */
.hero__kicker { gap: 10px 16px; margin-bottom: 26px; }
.hero__kicker .eyebrow { font: 600 15px/1 var(--f-body); }
.hero__kicker .eyebrow:first-child { display: inline-flex; align-items: center; padding: 9px 14px 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, .6); }
.hero__kicker .eyebrow:not(:first-child) { opacity: .75; font-weight: 500; }

/* ---------- Mobile menu (phones and tablets, where the nav is hidden) ---------- */
.burger { display: none; }
.menu { display: none; }
@media (max-width: 980px) {
  /* My tickets moves into the menu so the header is logo, Tickets and the menu button */
  .top__end .btn--ghost { display: none; }
  /* Same menu on every page that uses this header (home, Our story, Ticket terms) */
  .top nav { display: none; }
  .burger {
    all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid currentColor; color: inherit; -webkit-tap-highlight-color: transparent; position: relative;
  }
  .burger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  .burger__lines { position: relative; width: 18px; height: 12px; display: block; }
  .burger__lines i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
  .burger__lines i:nth-child(1) { top: 0; } .burger__lines i:nth-child(2) { top: 5px; } .burger__lines i:nth-child(3) { top: 10px; }
  .menu-open .burger__lines i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .menu-open .burger__lines i:nth-child(2) { opacity: 0; }
  .menu-open .burger__lines i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .burger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Sticky header: always on screen, on a frosted strip of the page blue once you've scrolled */
  .top { position: fixed; z-index: 40; padding-bottom: 12px; transition: background-color .25s, box-shadow .25s; }
  .top.is-fixed, .menu-open .top { color: var(--ink); }
  .top.is-fixed { background: rgba(98, 210, 222, .9); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
  .menu-open .top, .menu-open .top.is-fixed { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 60; }
  .menu-open { overflow: hidden; }

  /* The menu: Tunes yellow, opening as a circle from the button */
  .menu {
    display: block; position: fixed; inset: 0; z-index: 50; background: #ffb21e; color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
    clip-path: circle(0 at var(--x, 90%) var(--y, 40px)); visibility: hidden;
    transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .6s;
  }
  .menu-open .menu { clip-path: circle(150vmax at var(--x, 90%) var(--y, 40px)); visibility: visible; transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
  /* Park-style composition: one centred column, vertically centred, nothing boxed */
  .menu__inner { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; text-align: center; padding: calc(max(18px, env(safe-area-inset-top, 0px)) + 80px) var(--gutter-r, 16px) calc(36px + env(safe-area-inset-bottom, 0px)) var(--gutter, 16px); }
  .menu ul { list-style: none; margin: 0; padding: 0; }
  .menu__links { display: grid; gap: 4px; }
  .menu__links a { display: inline-block; padding: 4px 8px; font: 400 clamp(38px, 11vw, 60px)/1 var(--f-brush); text-transform: uppercase; text-decoration: none; color: var(--ink); }
  .menu__links a:active { color: #c93a06; }
  .menu__links li:last-child a { color: #c93a06; }
  .menu__foot { display: grid; justify-items: center; gap: 18px; }
  .menu__foot p { margin: 0; font: 600 15px/1.45 var(--f-body); letter-spacing: -.01em; }
  .menu__social { display: flex; gap: 22px; }
  .menu__social a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); }
  .menu__social svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }

  /* The theme paints every <button> pink on hover and focus: keep the menu button clean */
  .tunes-root .burger, .tunes-root .burger:hover, .tunes-root .burger:focus, .tunes-root .burger:active, .burger:hover, .burger:focus, .burger:active { background: transparent !important; color: inherit !important; box-shadow: none !important; border: 1.5px solid currentColor !important; }

  /* Links rise in one after another once the circle has opened */
  .menu__links li, .menu__foot { opacity: 0; transform: translateY(18px); transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); }
  .menu-open .menu__links li, .menu-open .menu__foot { opacity: 1; transform: none; }
  .menu-open .menu__links li { transition-delay: calc(.18s + var(--i) * .05s); }
  .menu-open .menu__foot { transition-delay: .5s; }
}
/* Ticket terms: its section chips stick just under the fixed header, and jump links land below both */
@media (max-width: 860px) {
  .tunes-terms .jumps { top: 68px; }
  html:has(.tunes-terms) { scroll-padding-top: 140px; }
}
/* Short phones (iPhone SE size): tighten so the whole menu fits without scrolling */
@media (max-width: 980px) and (max-height: 640px) {
  .menu__inner { gap: 26px; padding-top: calc(max(18px, env(safe-area-inset-top, 0px)) + 70px); }
  .menu__links a { font-size: clamp(32px, 6.4vh, 44px); }
}