/* ============================================================
   Bill's Archive — brand layer (Oct 2026)
   The design language of the BA holo-card logo (assets/logos/ba/ba-mark.svg):
   sparkle gold, a thin holo-foil edge, cards tilted -5deg, heavy geometric
   type. Two font families only: Montserrat (the logo's type) for headlines,
   DM Sans for everything else. Link it LAST in <head>, after the page's own styles.
   Used by index.html and calendar.html.

   1. Tokens and small primitives
   2. The site header (pages with <body class="has-hdr"> and a <header class="hdr">)
   3. The shared nav rail, restyled (gold active link, no status line, no blur)
   ============================================================ */

/* ---- 1. tokens + primitives ---- */
:root{
    --gold:#E8C547;--gold-2:#F0A030;
    --holo:linear-gradient(135deg,#3BC4BA 0%,#B06CFF 28%,#F06090 52%,#E8C547 76%,#3BC4BA 100%);
    --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -40 80 80'%3E%3Cpath d='M0-40Q8-8 40 0Q8 8 0 40Q-8 8-40 0Q-8-8 0-40Z'/%3E%3C/svg%3E");
    --tilt:-5deg;
    --brand-bg:#09090E;--brand-bg-2:#12121C;--brand-bg-3:#1A1A26;
    --brand-ink:#F4F4F2;--brand-ink-2:#D2D2DA;--brand-ink-3:#A2A2AE;
    --brand-rule:#272733;--brand-rule-2:#3F3F4E;
    --brand-display:'Montserrat','DM Sans',sans-serif;
    --brand-text:'DM Sans',system-ui,sans-serif;
}
/* the logo's four-point sparkle, as an inline glyph */
.spark{display:inline-block;width:.95em;height:.95em;vertical-align:-.12em;background:linear-gradient(135deg,var(--gold),var(--gold-2));-webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat}

/* ---- 2. site header (desktop; phones get the shared nav's top bar) ----
   Full width: it runs over the shared rail (body is padded 230px for it), its
   brand cell caps the rail column, and --ba-top starts the rail below it. The
   rail's own brand block is hidden on these pages. `header.hdr` beats pages
   that style the bare <header> element. */
header.hdr{display:none}
.hdr kbd{font-family:inherit}
@media (min-width:920px){
    body.has-hdr{--ba-top:64px}
    body.has-hdr #ba-nav-root .side .brand{display:none}
    header.hdr{display:block;position:sticky;top:0;z-index:110;margin:0 0 0 -230px;padding:0;background:var(--brand-bg);border:0;border-bottom:1px solid var(--brand-rule)}
    header.hdr::before,header.hdr::after{content:none;display:none}
    .hdr__in{display:flex;align-items:center;gap:24px;height:64px;padding:0 clamp(16px,3.2vw,44px) 0 0;max-width:none}
    .hdr__brand{display:inline-flex;align-items:center;gap:10px;flex:none;align-self:stretch;width:230px;padding:0 20px;background:#0E0D17;border-right:1px solid #29273A;font:900 17px/1 var(--brand-display);letter-spacing:-.02em;color:var(--brand-ink);text-decoration:none}
    .hdr__brand img{width:27px;height:36px}
    /* some pages still carry a bare `nav{position:sticky;background:...;backdrop-filter:...}` rule */
    .hdr__nav{display:flex;align-items:center;gap:0;flex:1;min-width:0;position:static;z-index:auto;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none}
    /* links divided by slashes, after The Verge's section bar */
    .hdr__nav a{position:relative;padding:9px 13px;font:600 15px/1 var(--brand-text);color:var(--brand-ink-2);white-space:nowrap;text-decoration:none}
    .hdr__nav a+a::before{content:"/";position:absolute;left:-3px;top:9px;font-weight:400;color:var(--brand-rule-2);pointer-events:none}
    .hdr__nav a:hover{color:var(--brand-ink)}
    .hdr__nav a[aria-current="page"]{color:var(--brand-ink);box-shadow:inset 0 -2px 0 var(--gold);border-radius:0}
    .hdr__search{display:inline-flex;align-items:center;gap:10px;flex:none;padding:9px 10px 9px 12px;border:1px solid var(--brand-rule-2);border-radius:3px;font:500 14px/1 var(--brand-text);color:var(--brand-ink-2);text-decoration:none;transition:border-color .15s,color .15s}
    .hdr__search:hover{border-color:var(--gold);color:var(--brand-ink)}
    .hdr__search svg{width:15px;height:15px}
    .hdr__search kbd{font:500 12px/1 var(--brand-text);border:1px solid var(--brand-rule-2);border-radius:2px;padding:2px 6px;color:var(--brand-ink-3)}
}
@media (min-width:920px) and (max-width:1199px){.hdr__nav .hdr__opt{display:none}}

/* ---- 3. shared nav rail ---- */
/* its section labels, foot line and phone tab bar use --ba-mono (Space Mono): DM Sans here, so these pages need two families */
#ba-nav-root{--ba-mono:var(--brand-text)}
/* buttons don't inherit the page font, and the 30th icon draws its "30" in generic sans-serif */
#ba-nav-root button,.has-hdr button{font-family:inherit}
#ba-nav-root svg text{font-family:var(--brand-display);font-weight:800}
#ba-nav-root .side-nav a.active{background:none;color:var(--gold)}
#ba-nav-root .side-nav a.active::after{color:var(--gold)}
#ba-nav-root .topbar{background:var(--brand-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
#ba-nav-root .tabbar a.active,#ba-nav-root .mobile-menu a.active{color:var(--gold)}