/* Festival Header and phone menu. Phone first; the desktop bar starts at 1200px. Tokens only. */
.sloff-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sloff-space-4);min-height:64px;padding:0 var(--sloff-edge);border-bottom:1px solid var(--sloff-line);background:var(--sloff-bg)}
:is(.sloff-header,.sloff-menu) .sloff-header__logo{display:flex;align-items:center;min-height:var(--sloff-tap-min);color:var(--sloff-fest-cream)}
.sloff-header .sloff-header__nav{display:none}
.sloff-header .sloff-skip-link{position:absolute;top:var(--sloff-space-2);left:var(--sloff-edge);z-index:100;padding:var(--sloff-space-2) var(--sloff-space-4);border-radius:var(--sloff-radius-pill);background:var(--sloff-fest-accent);color:var(--sloff-fest-accent-ink);font-size:var(--sloff-fs-14);font-weight:var(--sloff-fw-bold);transform:translateY(-200%)}
.sloff-header .sloff-skip-link:focus{transform:none}
.sloff-header .sloff-header__actions{display:flex;align-items:center;gap:6px}
.sloff-header .sloff-header__cta{min-height:var(--sloff-tap-min);padding:0 var(--sloff-space-4);font-size:var(--sloff-fs-13)}
:is(.sloff-header,.sloff-menu) .sloff-header__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sloff-tap-min);height:var(--sloff-tap-min);margin:0;padding:0;border:1px solid var(--sloff-line-strong);border-radius:var(--sloff-radius-pill);background:transparent;color:var(--sloff-text);font:inherit;cursor:pointer}
:is(.sloff-header,.sloff-menu) button.sloff-header__icon:hover,:is(.sloff-header,.sloff-menu) button.sloff-header__icon:focus{background:transparent;color:var(--sloff-fest-accent);border-color:var(--sloff-fest-accent)}
.sloff-header .sloff-header__account{display:flex;align-items:center;gap:var(--sloff-space-2);color:var(--sloff-text);font-size:var(--sloff-fs-14);font-weight:var(--sloff-fw-bold);letter-spacing:var(--sloff-ls-button);text-transform:uppercase}
.sloff-header .sloff-header__account:hover{color:var(--sloff-fest-accent)}
.sloff-header .sloff-header__account--desktop{display:none}
.sloff-header .sloff-header__account-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sloff-header .sloff-header__member-qr{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:var(--sloff-tap-min);min-height:var(--sloff-tap-min);padding:0 12px;border:1px solid var(--sloff-line-strong);border-radius:var(--sloff-radius-pill);color:var(--sloff-text);font-size:var(--sloff-fs-12);font-weight:var(--sloff-fw-bold);letter-spacing:var(--sloff-ls-button);text-transform:uppercase}
.sloff-header .sloff-header__member-qr[hidden]{display:none}
.sloff-header .sloff-header__member-qr:hover,.sloff-header .sloff-header__member-qr:focus-visible{border-color:var(--sloff-fest-accent);color:var(--sloff-fest-accent)}
.sloff-header .sloff-header__member-qr--desktop{display:none}
.sloff-header .sloff-header__member-qr-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sloff-header .sloff-header__cta,.sloff-header .sloff-header__account,.sloff-header .sloff-header__member-qr{white-space:nowrap}

/* Narrow phones: no sideways scroll at 320 px with the longest phase button ("See the winners") and a signed-in member's QR link.
   The button may wrap onto two lines inside its pill; the account icon gives way to the Member QR (the account stays in the phone menu). */
@media (max-width:479.98px){
.sloff-header{gap:var(--sloff-space-2)}
.sloff-header .sloff-header__actions{gap:var(--sloff-space-1);min-width:0}
.sloff-header .sloff-header__cta{min-width:0;padding:0 var(--sloff-space-3);font-size:var(--sloff-fs-12);letter-spacing:.02em;line-height:1.1;text-align:center;white-space:normal;text-wrap:balance}
.sloff-header .sloff-header__actions:has(.sloff-header__member-qr--phone:not([hidden])) .sloff-header__account--phone{display:none}
}
@media (max-width:359.98px){
.sloff-header>.sloff-header__logo .sloff-logo__svg--stacked{height:28px}
}

@media (min-width:1200px){
.sloff-header{min-height:84px;gap:var(--sloff-space-6)}
.sloff-header>.sloff-header__logo .sloff-logo__svg--stacked{display:none}
.sloff-header>.sloff-header__logo .sloff-logo__svg--wide{display:block}
.sloff-header .sloff-header__nav{display:flex;flex-wrap:wrap;align-items:center;gap:26px;font-size:var(--sloff-fs-13);font-weight:var(--sloff-fw-bold);letter-spacing:var(--sloff-ls-button);text-transform:uppercase}
.sloff-header .sloff-header__nav>a,.sloff-header .sloff-header__drop-btn{padding:6px 0;color:var(--sloff-text)}
/* Nav links keep the nav's 13 px; the site kit's link typography (16 px) was enlarging them past the About button. */
.sloff-header .sloff-header__nav a{font-size:inherit;line-height:inherit}
.sloff-header .sloff-header__drop-btn{margin:0;border:0;border-radius:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.sloff-header .sloff-header__nav>a:hover,.sloff-header .sloff-header__drop-btn:hover,.sloff-header .sloff-header__drop-btn:focus{background:transparent;color:var(--sloff-fest-accent)}
.sloff-header .sloff-header__nav>a[aria-current=page],.sloff-header .sloff-header__drop-btn.is-current,.sloff-header .sloff-header__drop-btn:has(+ .sloff-drop:popover-open){color:var(--sloff-fest-accent);box-shadow:inset 0 -2px 0 var(--sloff-fest-accent)}
.sloff-header .sloff-header__nav .sloff-header__palm,.sloff-header .sloff-header__nav .sloff-header__palm:hover{color:var(--sloff-palm-orange)}
.sloff-header .sloff-header__actions{gap:22px}
.sloff-header .sloff-header__cta{min-height:var(--sloff-button-h);padding:0 var(--sloff-space-button-x);font-size:var(--sloff-fs-14)}
.sloff-header .sloff-header__account--desktop{display:flex}
.sloff-header .sloff-header__account--phone{display:none}
.sloff-header .sloff-header__member-qr--desktop{display:inline-flex}
.sloff-header .sloff-header__member-qr--phone{display:none}
.sloff-header .sloff-header__member-qr--desktop .sloff-header__member-qr-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
.sloff-header .sloff-header__account .sloff-header__icon{width:auto;height:auto;border:0;color:inherit}
.sloff-header .sloff-header__account-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
.sloff-header .sloff-header__menu-btn{display:none}
.sloff-header .sloff-header__nav>a,.sloff-header .sloff-header__drop-btn{white-space:nowrap}
}
/* 1200–1439 px: the longest menu (Lineup & passes, 8 items) plus a signed-in account and the phase button stay on one line. */
@media (min-width:1200px) and (max-width:1439.98px){
.sloff-header{gap:var(--sloff-space-4)}
.sloff-header .sloff-header__nav{gap:var(--sloff-space-4);font-size:var(--sloff-fs-12);letter-spacing:.02em}
.sloff-header .sloff-header__actions{gap:var(--sloff-space-3)}
.sloff-header .sloff-header__cta{padding:0 var(--sloff-space-4);font-size:var(--sloff-fs-13)}
}
/* Below 1600 px the Member QR link is its icon only (its aria-label still names it). */
@media (min-width:1200px) and (max-width:1599.98px){
.sloff-header .sloff-header__member-qr--desktop .sloff-header__member-qr-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
}

/* About dropdown (093): a popover under its button; fixed under the bar where anchor positioning is missing. */
.sloff-header{anchor-scope:--sloff-drop}
.sloff-header .sloff-header__drop-btn{anchor-name:--sloff-drop}
.sloff-drop{position:fixed;inset:76px var(--sloff-edge) auto auto;width:min(560px,calc(100vw - 2 * var(--sloff-gutter)));margin:0;padding:10px;border:1px solid var(--sloff-line-strong);border-radius:16px;background:var(--sloff-surface-1);color:var(--sloff-text);font-family:var(--sloff-font);letter-spacing:normal;text-transform:none;box-shadow:0 20px 60px color-mix(in srgb,var(--sloff-bg) 60%,transparent)}
.sloff-drop:popover-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sloff-space-1)}
@supports (position-area:bottom){.sloff-drop{position-anchor:--sloff-drop;inset:auto;position-area:bottom span-right;position-try-fallbacks:flip-inline;margin-top:10px}}
.sloff-drop .sloff-drop__link{display:flex;flex-direction:column;gap:2px;padding:var(--sloff-space-3) 14px;border-radius:10px;color:var(--sloff-text)}
.sloff-drop .sloff-drop__link:hover,.sloff-drop .sloff-drop__link:focus-visible,.sloff-drop .sloff-drop__link[aria-current=page]{background:var(--sloff-surface-2);color:var(--sloff-text)}
.sloff-drop .sloff-drop__title{font-size:var(--sloff-fs-14);font-weight:var(--sloff-fw-extrabold)}
.sloff-drop .sloff-drop__desc{font-size:var(--sloff-fs-12);color:var(--sloff-text-muted)}
.sloff-drop .sloff-drop__link:focus-visible{outline:var(--sloff-focus-w) solid var(--sloff-focus);outline-offset:0}

/* Phone menu: an HTML popover, full screen. While it is open the rest of the page is hidden,
   which also takes it out of the Tab order, so focus can't move behind the menu (JS on or off). */
.sloff-menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0 0 var(--sloff-space-6);border:0;background:var(--sloff-bg);color:var(--sloff-text);font-family:var(--sloff-font);overflow-y:auto;overscroll-behavior:contain;visibility:visible}
.sloff-menu::backdrop{background:var(--sloff-bg)}
body:has(.sloff-menu:popover-open){overflow:hidden;visibility:hidden}
.sloff-menu .sloff-menu__head{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 var(--sloff-space-4);border-bottom:1px solid var(--sloff-line)}
.sloff-menu .sloff-menu__nav{display:flex;flex-direction:column;padding:var(--sloff-space-3) var(--sloff-space-4) 0}
.sloff-menu .sloff-menu__nav a{display:flex;align-items:center;justify-content:space-between;padding:var(--sloff-space-3) 0;border-top:1px solid var(--sloff-line);color:var(--sloff-text);font-size:26px;font-weight:var(--sloff-fw-black);line-height:var(--sloff-lh-snug);letter-spacing:-.01em;text-transform:uppercase}
.sloff-menu .sloff-menu__nav a span{font-size:var(--sloff-fs-18);color:var(--sloff-text-faint)}
.sloff-menu .sloff-menu__nav a:hover,.sloff-menu .sloff-menu__nav a[aria-current=page]{color:var(--sloff-fest-accent)}
.sloff-menu .sloff-menu__extras{display:flex;flex-direction:column;gap:10px;padding:var(--sloff-space-5) var(--sloff-space-4) 0}
.sloff-menu .sloff-menu__card{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 var(--sloff-space-4);border:1px solid var(--sloff-line);border-radius:var(--sloff-radius-card);font-size:var(--sloff-fs-14);font-weight:var(--sloff-fw-extrabold);text-transform:uppercase}
.sloff-menu .sloff-menu__account{justify-content:flex-start;background:var(--sloff-surface-1);color:var(--sloff-text)}
.sloff-menu .sloff-menu__hint{margin-left:auto;font-size:var(--sloff-fs-11);font-weight:var(--sloff-fw-semibold);color:var(--sloff-text-muted);text-transform:none}
.sloff-menu .sloff-menu__palm{border-color:var(--sloff-palm-orange);color:var(--sloff-palm-orange)}
.sloff-menu .sloff-menu__app{border-color:var(--sloff-fest-accent);color:var(--sloff-fest-accent)}
.sloff-menu .sloff-menu__social{margin-top:6px;gap:10px}
/* Browsers without popover support: no overlay; the footer links remain. */
@supports not selector(:popover-open){.sloff-menu,.sloff-drop,.sloff-header .sloff-header__menu-btn,.sloff-header .sloff-header__drop-btn{display:none}}
/* Signed in, desktop: "My account" + Member QR are wider than "Log in", which wrapped the nav onto two
   rows with the staff-added Merch item (live, 2026-10-31). Tighter nav; below 1440 the account link is icon-only
   (its label stays for screen readers). */
@media (min-width:1200px){.sloff-header:has(.sloff-header__member-qr--desktop:not([hidden])) .sloff-header__nav{gap:14px;font-size:var(--sloff-fs-12);letter-spacing:.02em}}
@media (min-width:1200px) and (max-width:1439.98px){.sloff-header:has(.sloff-header__member-qr--desktop:not([hidden])) .sloff-header__account--desktop .sloff-header__account-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}}