/* ─────────────────────────────────────────────────────────────────────────────
   ARCANE — SHARED PUBLIC NAVIGATION STYLES

   Owns the public header, brand lockup, desktop nav, menu button, drawer,
   backdrop and the compact action controls. NOTHING ELSE — page layout belongs
   to each page's own <style> block.

   Tokens are prefixed --pub- and declared here so this file is self-contained:
   a page including it needs no variables of its own, and nothing collides with
   a page that happens to define --red or --charcoal for its own use.

   Font families are referenced, never loaded. Each page links the Google Fonts
   it wants, so this file makes no network request and needs no @import.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --pub-charcoal:#1b1d22;
  --pub-red:#b61625;
  --pub-red-dark:#8e101c;
  --pub-panel:#ffffff;
  --pub-line:#e2e4e8;
  --pub-muted:#646872;
  --pub-ink:#17191d;
  --pub-radius:14px;
  --pub-max:1240px;
  --pub-gutter:16px;
  --pub-shadow:0 16px 34px rgba(20,23,29,.14);
}

.pub-header{position:sticky;top:0;z-index:40;background:var(--pub-charcoal);
  border-bottom:1px solid rgba(255,255,255,.06)}
.pub-header-inner{max-width:var(--pub-max);margin:0 auto;
  padding:9px var(--pub-gutter);min-height:56px;display:flex;align-items:center;gap:11px}
/* NO color:inherit here. It would be specificity (0,1,1) and would beat
   .pub-btn's own (0,1,0) colour, leaving SIGN IN dark-on-charcoal — invisible.
   Every element below states its own colour instead. */
.pub-header a{text-decoration:none}

/* Menu button — three bars from one element: the middle is the span, the outer
   two are its pseudo-elements. No icon font, no second request. */
.pub-menu-btn{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:9px;
  color:#fff;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.pub-menu-btn:hover{border-color:rgba(255,255,255,.45)}
.pub-menu-btn:focus-visible{outline:3px solid var(--pub-red);outline-offset:2px}
.pub-bars{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative}
.pub-bars::before,.pub-bars::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:currentColor;border-radius:2px}
.pub-bars::before{top:-6px}
.pub-bars::after{top:6px}

/* Brand. The logo's grey plate disappears on charcoal, so it sits on a white chip. */
.pub-brand{display:flex;align-items:center;gap:11px;min-width:0}
.pub-brand-chip{width:36px;height:36px;border-radius:9px;background:#fff;display:grid;
  place-items:center;flex-shrink:0}
.pub-brand-logo{width:30px;height:30px;display:block;object-fit:contain}
.pub-brand-copy{min-width:0}
.pub-brand-name{display:block;font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.8px;
  color:#fff;font-size:21px;line-height:1;white-space:nowrap}
.pub-brand-sub{display:block;font-family:'Barlow Condensed',Arial,sans-serif;color:#aeb3bc;
  font-size:11.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;margin-top:2px}

/* Desktop text links. Hidden on phones, where the drawer carries them. */
.pub-nav{display:none;margin-left:18px;gap:18px}
.pub-nav-link{font-family:'Barlow Condensed',Arial,sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.78);
  padding:8px 2px;border-bottom:2px solid transparent}
.pub-nav-link:hover{color:#fff}
.pub-nav-link[aria-current="page"]{color:#fff;border-bottom-color:var(--pub-red)}
.pub-nav-link:focus-visible{outline:3px solid var(--pub-red);outline-offset:3px}

/* Compact action controls. Deliberately small: the large cards belong to a
   page, and a big red button welded beside the logo on every screen reads as an
   advert rather than navigation. */
.pub-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.pub-btn{display:inline-flex;align-items:center;flex-shrink:0;min-height:36px;padding:8px 13px;
  border-radius:999px;border:1px solid transparent;white-space:nowrap;
  font-family:'Barlow Condensed',Arial,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:#fff}
.pub-btn:focus-visible{outline:3px solid var(--pub-red);outline-offset:3px}
.pub-btn-quiet{border-color:rgba(255,255,255,.28)}
.pub-btn-quiet:hover{border-color:var(--pub-red);background:var(--pub-red)}
.pub-btn-red{background:var(--pub-red);border-color:var(--pub-red)}
.pub-btn-red:hover{background:var(--pub-red-dark);border-color:var(--pub-red-dark)}

/* Drawer, anchored to the header itself (position:sticky is a containing
   block) so it sits under the bar whatever height the bar ends up being. */
.pub-backdrop{position:fixed;inset:0;z-index:41;background:rgba(12,14,17,.45)}
.pub-drawer{position:absolute;z-index:42;top:100%;left:var(--pub-gutter);
  width:min(320px,calc(100vw - (var(--pub-gutter) * 2)));background:var(--pub-panel);
  border:1px solid var(--pub-line);border-radius:var(--pub-radius);
  box-shadow:var(--pub-shadow);overflow:hidden}
.pub-drawer-item{display:block;padding:13px 15px;border-bottom:1px solid var(--pub-line);
  color:var(--pub-ink)}
.pub-drawer-item:last-child{border-bottom:0}
.pub-drawer-item:hover{background:#f3f4f6}
.pub-drawer-item:focus-visible{outline:3px solid var(--pub-red);outline-offset:-3px}
.pub-drawer-item[aria-current="page"] .pub-drawer-title{color:var(--pub-red)}
.pub-drawer-title{display:block;font-family:'Bebas Neue',Impact,sans-serif;font-size:21px;
  letter-spacing:.6px;line-height:1}
.pub-drawer-sub{display:block;margin-top:3px;color:var(--pub-muted);font-size:13.5px;line-height:1.3}

/* MEASURED, not guessed. Below 620px the wordmark plus a menu button leaves
   room for exactly ONE compact control, so GET STARTED steps out of the bar and
   lives in the drawer, which is the navigation on a phone. SIGN IN is the one
   that stays: it is the quieter of the two and the one a returning family
   needs from any screen. */
@media (max-width:619px){
  .pub-btn-red{display:none}
  .pub-btn{font-size:12px;padding:8px 11px;letter-spacing:1.2px}
}
/* OPEN PLAYER APP is a much wider label than SIGN IN — enough to push the
   wordmark onto two lines at 375px — so the collapsed control alone tightens
   here. Still 36px tall, so the tap target is untouched. */
@media (max-width:429px){
  .pub-btn-open{font-size:11px;padding:8px 9px;letter-spacing:.6px}
}
@media (min-width:620px){
  :root{--pub-gutter:22px}
  .pub-nav{display:flex}
}
@media (min-width:960px){
  :root{--pub-gutter:28px}
}
@media (prefers-reduced-motion:reduce){
  .pub-btn,.pub-nav-link,.pub-drawer-item{transition:none}
}