/* rex-nav.css — one navigation, on every page.
 *
 * There were four: the homepage rail, .nav on about/work/thoughts, a #sitenav
 * on loadout, and R.E.X.'s own header. Four implementations of one component,
 * drifting apart every time one of them was touched.
 *
 * This is R.E.X.'s header, adopted for the whole site. It is the cleanest of
 * the four and it was already the odd one out for the right reason: a wordmark
 * instead of a logo, smaller mono at tighter tracking, and a live dot against
 * the status rather than a label competing with the menu.
 *
 * The mobile panel is the one thing added to it. R.E.X. has no menu to open at
 * that width; the rest of the site does.
 */

.rail{position:sticky;top:0;z-index:43;
  background:var(--p-veil,rgba(255,255,255,.72));backdrop-filter:blur(16px);
  border-bottom:1px solid var(--p-line,#dedcd7)}
.rail-in{width:var(--page,min(92vw,1180px));margin:0 auto;display:flex;
  align-items:center;justify-content:space-between;gap:1.5rem;height:4rem}

/* the wordmark. R.E.X. never used the logo here and the page is better for it:
   at 24px the mark is a smudge, and the name is the mark at this size. */
.rail .brand{font-size:1rem;font-weight:500;letter-spacing:-.01em;
  color:var(--p-ink,#1a1a19);text-decoration:none;white-space:nowrap}

.rail nav{display:flex;gap:1.75rem;margin:0 auto}
.rail nav a{font-family:var(--mono,ui-monospace,monospace);font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--p-ink-muted,#5c5c58);
  text-decoration:none;padding:.35rem 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.rail nav a:hover{color:var(--p-ink,#1a1a19)}
.rail nav a[aria-current]{color:var(--p-ink,#1a1a19);border-bottom-color:var(--p-accent,#6f6255)}

/* the status, with R.E.X.'s live dot */
.rail .chan{display:flex;align-items:center;gap:.5rem;
  font-family:var(--mono,ui-monospace,monospace);font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--p-ink-muted,#5c5c58);
  white-space:nowrap}
.rail .chan .dot{width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--p-accent,#6f6255);animation:chanPulse 2.6s ease-in-out infinite}
.rail .chan .odd{color:var(--p-accent,#6f6255)}
@keyframes chanPulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){.rail .chan .dot{animation:none}}

/* ── the toggle ── */
.rail-toggle{display:none;width:2.25rem;height:2.25rem;padding:0;
  margin:-.4rem -.4rem -.4rem 0;background:none;border:0;cursor:pointer;
  color:var(--p-ink,#1a1a19);position:relative;z-index:2}
.rail-toggle span{display:block;width:1.15rem;height:1px;margin:.28rem 0 .28rem auto;
  background:currentColor;transition:transform .2s,opacity .2s}
.rail.is-open .rail-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.rail.is-open .rail-toggle span:nth-child(2){opacity:0}
.rail.is-open .rail-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ── the panel ──
   OUTSIDE .rail in the markup, deliberately: .rail carries backdrop-filter,
   and a filter creates a containing block for fixed descendants — nested, this
   resolved inset:0 against the 4rem rail and opened as a strip under it.
   z-index 42 sits above the page but BELOW the rail (43), so the toggle that
   closes it is never buried under the thing it opened. */
.rail-panel{position:fixed;inset:0;z-index:42;display:none;flex-direction:column;
  justify-content:center;gap:1rem;padding:2rem 6vw;
  background:var(--p-ground,#f2f1ef)}
.rail-panel.is-open{display:flex}
.rail-panel a{font-size:1.5rem;letter-spacing:-.02em;color:var(--p-ink,#1a1a19);
  text-decoration:none;padding:.35rem 0;border-bottom:1px solid var(--p-line,#dedcd7)}
.rail-panel a[aria-current]{color:var(--p-accent,#6f6255)}
.rail-panel .m{font-family:var(--mono,ui-monospace,monospace);font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--p-ink-muted,#5c5c58);
  margin:1rem 0 0}

@media(max-width:1100px){.rail .chan{display:none}}
@media(max-width:820px){.rail nav{gap:1.2rem}}
@media(max-width:620px){
  .rail nav{display:none}
  .rail-toggle{display:block}
}
/* above the breakpoint the panel must never show, whatever state a resize
   left the class in */
@media(min-width:621px){.rail-panel.is-open{display:none}}