/* The Dark Tides global header.
   ═══════════════════════════════════════════════════════════════════════

   One header for every public Dark Tides page. Brick World is deliberately
   NOT included: it keeps its own navigation and its own identity.

   ── why fixed and not sticky ──

   This site already had a contract: `.topbar` was fixed and pages reserved
   its height with `calc(var(--bar) + …)`. Six stylesheets pad against that
   variable. Switching to `position:sticky` would take the header out of the
   overlay and leave a 66px hole at the top of every one of those pages. So
   the header stays fixed, `--bar` is raised to the new height, and every
   page that already reserved space keeps reserving the right amount without
   being touched. The scroll state gives the same effect sticky was wanted
   for.

   ── the height ──

   88px on desktop, 76px once scrolled, 64px on phones. The logo is sized
   from the header height rather than the other way round, so the mark can
   never push the bar taller than the pages have reserved for it. */

:root{
  --bar: 88px;
  --dts-nav-gold: #C89B3C;
  --dts-nav-gold-lt: #E3BE72;
  --dts-nav-parch: #EFE3C8;
}
@media (max-width:1023px){ :root{ --bar: 72px; } }
@media (max-width:719px){  :root{ --bar: 64px; --dts-shrink: 6px; } }

.dts-skip{position:absolute;left:-9999px;top:0;z-index:120;
  padding:12px 18px;background:#050709;color:var(--dts-nav-gold-lt);
  font:600 13px/1 var(--display,Georgia,serif);letter-spacing:.1em;text-transform:uppercase}
.dts-skip:focus{left:8px;top:8px}

/* ── the bar ─────────────────────────────────────────────────────────── */

.dts-nav{
  position:fixed;inset:0 0 auto;z-index:90;height:var(--bar);
  display:flex;align-items:center;
  background:
    linear-gradient(180deg,rgba(6,10,16,.72),rgba(4,7,11,.80));
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  border-bottom:1px solid rgba(200,155,60,.28);
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  transition:height .22s ease,background .22s ease,
             backdrop-filter .22s ease,box-shadow .22s ease}

/* The nautical texture. Two painted layers at low opacity rather than a
   photograph: a compass rose bloom off-centre and a cold moon glow at the
   far end, so the bar reads as a place rather than a plate. Both are drawn
   in CSS, so they cost nothing to load and never block the header. */
.dts-nav::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 190% at 22% 50%, rgba(200,155,60,.085), transparent 70%),
    radial-gradient(30% 170% at 88% 40%, rgba(150,180,215,.075), transparent 72%),
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.012) 0 2px, transparent 2px 7px)}

.dts-nav.is-scrolled{
  height:calc(var(--bar) - var(--dts-shrink, 12px));
  background:linear-gradient(180deg,rgba(4,7,11,.94),rgba(3,5,8,.97));
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 12px 34px rgba(0,0,0,.5)}

.dts-nav__in{display:flex;align-items:center;gap:clamp(12px,2vw,30px);
  width:min(1480px,100%);height:100%;margin:0 auto;
  padding-inline:clamp(14px,2.4vw,36px)}

/* ── brand ───────────────────────────────────────────────────────────── */

.dts-nav__brand{display:flex;align-items:center;flex:none;
  height:100%;text-decoration:none}
.dts-nav__brand img{display:block;width:auto;height:min(64%, 58px);
  max-width:clamp(150px,19vw,246px);object-fit:contain;
  transition:height .22s ease,filter .22s ease}
.dts-nav__brand:hover img{filter:brightness(1.09) drop-shadow(0 0 12px rgba(200,155,60,.3))}
.dts-nav.is-scrolled .dts-nav__brand img{height:min(64%,50px)}

/* ── the links ───────────────────────────────────────────────────────── */

.dts-nav__links{display:flex;align-items:center;justify-content:center;
  flex:1 1 auto;min-width:0;gap:clamp(8px,1.5vw,26px)}
.dts-nav__links a{position:relative;flex:none;display:flex;align-items:center;
  min-height:44px;padding:0 2px;
  color:var(--dts-nav-parch);text-decoration:none;
  font-family:var(--display,Georgia,serif);font-weight:500;
  font-size:clamp(13px,1.05vw,16px);letter-spacing:.015em;white-space:nowrap;
  transition:color .18s ease}
.dts-nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:9px;
  height:1px;background:linear-gradient(90deg,transparent,var(--dts-nav-gold),transparent);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .2s ease}
.dts-nav__links a:hover{color:var(--dts-nav-gold-lt)}
.dts-nav__links a:hover::after{transform:scaleX(.7)}

/* Active: gold text, a thin gold rule, and a glow small enough that you only
   notice it when you look for it. No box. */
.dts-nav__links a[aria-current="page"]{color:var(--dts-nav-gold-lt);
  text-shadow:0 0 14px rgba(200,155,60,.38)}
.dts-nav__links a[aria-current="page"]::after{transform:scaleX(1)}

/* ── actions ─────────────────────────────────────────────────────────── */

.dts-nav__actions{display:flex;align-items:center;flex:none;gap:clamp(6px,.9vw,14px)}

.dts-nav__icon{display:grid;place-items:center;width:44px;height:44px;
  padding:0;border:0;background:none;cursor:pointer;
  color:var(--dts-nav-parch);transition:color .18s ease}
.dts-nav__icon:hover{color:var(--dts-nav-gold-lt)}
.dts-nav__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* The gold dot is a signed-in signal, not decoration: site-nav.js only adds
   is-member once Supabase has confirmed a session. */
.dts-nav__acct{position:relative}
.dts-nav__acct::after{content:'';position:absolute;right:7px;bottom:9px;
  width:6px;height:6px;border-radius:50%;background:var(--dts-nav-gold);
  box-shadow:0 0 7px rgba(200,155,60,.85);opacity:0;transition:opacity .25s ease}
.dts-nav__acct.is-member::after{opacity:1}

.dts-nav__cta{display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:11px clamp(13px,1.3vw,20px);
  border:1px solid rgba(200,155,60,.72);
  background:linear-gradient(180deg,rgba(10,16,24,.9),rgba(5,8,12,.95));
  color:var(--dts-nav-gold-lt);text-decoration:none;
  font-family:var(--display,Georgia,serif);font-weight:600;
  font-size:clamp(11px,.85vw,13px);letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;min-height:44px;
  transition:border-color .2s ease,background .2s ease,
             color .2s ease,box-shadow .2s ease}
.dts-nav__cta:hover{border-color:var(--dts-nav-gold-lt);
  background:linear-gradient(180deg,rgba(28,22,10,.92),rgba(12,9,5,.96));
  color:#F7EBD2;box-shadow:0 0 18px rgba(200,155,60,.26)}
.dts-nav__cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}

.dts-nav__burger{display:none}

/* ── narrowing down ──────────────────────────────────────────────────── */

/* Tighten the row before giving up on it: spacing first, then size.

   The numbers below are measured, not guessed: the row was rendered at
   1920/1700/1600/1500/1440/1366/1280 and the clearance either side of the
   link block checked. Nine items ride here now, so the gaps and the wordmark
   give up a little width before the type does. */
@media (min-width:1280px){
  .dts-nav__in{gap:clamp(10px,1.35vw,20px)}
  .dts-nav__links{gap:clamp(5px,1.05vw,17px)}
  .dts-nav__brand img{max-width:clamp(140px,15vw,222px)}
}
@media (max-width:1439px){
  .dts-nav__links a{font-size:13px;letter-spacing:0}
}

/* Below 1280px the links cannot hold a single honest row, so they move into
   the drawer rather than being crushed or wrapped.

   This threshold was 1000px when the row held eight links and no LIVE pill.
   It was already a little optimistic — measured, the first link overlapped
   the wordmark by about 30px between 1024 and 1100 — and the pill made that
   worse rather than causing it. 1280 is where the nine items, the two icons
   and the Join button genuinely clear each other; below it the burger is the
   honest answer. js/site-nav.js closes the drawer at the same number, so if
   this moves, move that with it. */
@media (max-width:1279px){
  .dts-nav__links{display:none}
  .dts-nav__burger{display:grid;place-items:center;width:44px;height:44px;
    padding:0;border:0;background:none;cursor:pointer;color:var(--dts-nav-parch)}
  .dts-nav__burger span{display:block;width:21px;height:1.5px;margin:2.5px 0;
    background:currentColor;transition:transform .2s ease,opacity .2s ease}
  .dts-nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .dts-nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .dts-nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
}
/* The phone keeps the icons and the burger; the CTA is the first thing in
   the drawer, where there is room to press it properly. */
@media (max-width:599px){
  .dts-nav__cta{display:none}
}

/* ── the drawer ──────────────────────────────────────────────────────── */

.dts-drawer{position:fixed;inset:0;z-index:100;display:grid;
  grid-template-columns:1fr min(340px,86vw)}
.dts-drawer[hidden]{display:none}
.dts-drawer__scrim{border:0;padding:0;cursor:pointer;
  background:rgba(2,4,7,.72);opacity:0;transition:opacity .22s ease}
.dts-drawer__panel{
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;
  padding:calc(var(--bar) + 16px) 22px 32px;
  background:linear-gradient(180deg,#070C13,#04060A);
  border-left:1px solid rgba(200,155,60,.3);
  box-shadow:-18px 0 44px rgba(0,0,0,.6);
  transform:translateX(100%);transition:transform .24s ease}
.dts-drawer.is-open .dts-drawer__scrim{opacity:1}
.dts-drawer.is-open .dts-drawer__panel{transform:none}

.dts-drawer__panel a{display:block;padding:14px 4px;min-height:44px;
  color:var(--dts-nav-parch);text-decoration:none;
  font-family:var(--display,Georgia,serif);font-size:17px;
  border-bottom:1px solid rgba(255,255,255,.06)}
.dts-drawer__panel a:hover{color:var(--dts-nav-gold-lt)}
.dts-drawer__panel a[aria-current="page"]{color:var(--dts-nav-gold-lt)}
.dts-drawer__cta{margin-top:16px;text-align:center;border-bottom:0 !important;
  padding:15px 18px !important;
  border:1px solid rgba(200,155,60,.72) !important;
  color:var(--dts-nav-gold-lt) !important;
  font-size:13px !important;letter-spacing:.13em;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  .dts-nav,.dts-nav__brand img,.dts-nav__links a::after,
  .dts-drawer__panel,.dts-drawer__scrim{transition:none}
}

/* ── pages whose content starts in the flow ──────────────────────────── */

/* The header is fixed, so a page whose first element sits at y=0 needs the
   bar's height reserved. Which pages those are is decided in
   tools/stamp-nav.mjs, from measurement rather than instinct: the home page
   and the shop have full-bleed heroes that are MEANT to run under the bar,
   and several stylesheets already reserve it themselves. */
body.dts-offset{padding-top:var(--bar)}

/* ── the LIVE item ───────────────────────────────────────────────────── */

/* It lives in the actions row, not the link list. The eight links already
   tighten at 1100 and move into the drawer at 1000; a ninth would vanish
   exactly when an event is on. Here it survives down to the phone, where
   only the burger and the two icons remain beside it.

   The red state is stamped, not scripted: tools/stamp-nav.mjs reads
   `status` out of js/live-event.js and writes `is-live` into all 38 pages,
   so the dot costs no JavaScript and cannot disagree with /live itself. */

.dts-nav__live{display:inline-flex;align-items:center;gap:7px;flex:none;
  min-height:44px;padding:9px 13px;
  border:1px solid rgba(239,227,200,.22);border-radius:3px;
  background:rgba(255,255,255,.03);
  color:rgba(239,227,200,.82);text-decoration:none;
  font-family:var(--display,Georgia,serif);font-weight:600;
  font-size:clamp(11px,.85vw,13px);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease}
.dts-nav__live i{width:7px;height:7px;border-radius:50%;flex:none;
  background:#8d3438;box-shadow:0 0 0 0 rgba(224,58,58,0)}
.dts-nav__live:hover{color:#f6ece0;border-color:rgba(239,227,200,.4);
  background:rgba(255,255,255,.06)}
.dts-nav__live[aria-current="page"]{color:#fbeee0;border-color:rgba(224,58,58,.55)}

/* On air. */
.dts-nav__live.is-live{color:#ffeaea;border-color:rgba(224,58,58,.7);
  background:linear-gradient(180deg,rgba(142,29,34,.92),rgba(93,18,22,.95))}
.dts-nav__live.is-live:hover{border-color:#ff6b6b;
  box-shadow:0 0 18px rgba(224,58,58,.34)}
.dts-nav__live.is-live i{background:#fff;animation:dts-live-pulse 2.2s ease-in-out infinite}
@keyframes dts-live-pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.5)}
  50%    {opacity:.5;box-shadow:0 0 0 5px rgba(255,255,255,0)}
}

.dts-live-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Below 600px the Join CTA leaves the bar; the pill stays, a little tighter,
   because an event in progress is the one thing worth a tap from here. */
@media (max-width:599px){
  .dts-nav__live{padding:9px 10px;letter-spacing:.1em;font-size:11px}
}

/* In the drawer it reads as a row like the others, with its dot. */
.dts-drawer__live{display:flex!important;align-items:center;gap:9px}
.dts-drawer__live i{width:7px;height:7px;border-radius:50%;flex:none;background:#8d3438}
.dts-drawer__live.is-live{color:#ff9d9d!important}
.dts-drawer__live.is-live i{background:#e03a3a;
  animation:dts-live-pulse 2.2s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .dts-nav__live i,.dts-drawer__live i{animation:none}
}