/* 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}}