/* rail.css — the split-rail site header.
 *
 * Replaces the floating pill. Name and role hard left, links hard right, one
 * hairline underneath, nothing floating over the hero.
 *
 * Built entirely from base.css tokens: no new colours, no new radii, no new
 * shadows. Logical properties throughout (inline-start/end, margin-inline) so
 * the whole thing mirrors under RTL without a single dir-specific override.
 */

/* ---- undo base.css ------------------------------------------------------
   base.css styles the BARE `nav` element as the old floating pill —
   position:fixed, centred with a transform, its own background and border —
   and injects a "~/" prefix through `nav ul a::before`. Any <nav> on the page
   inherits all of that, so the rail has to switch it off explicitly rather
   than merely add to it. Class selectors outrank the element selectors, and
   this file loads after base.css. */
.rail .rail-nav{position:static;transform:none;inset:auto;width:auto;
  max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none;
  border-radius:0;backdrop-filter:none}
.rail .rail-nav ul{background:none;border:0;padding:0;border-radius:0}
.rail .rail-nav a::before{content:none}

.rail{position:sticky;top:0;z-index:60;background:var(--bg);
  border-block-end:1px solid transparent;transition:border-color .25s,background .25s}
/* The rule appears only once the page has moved. At rest the header should not
   draw a line across a hero that has no edge there. */
.rail.is-scrolled{border-block-end-color:var(--line);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(10px)}

.rail-inner{max-width:var(--rail-max,1200px);margin-inline:auto;
  padding:var(--s3) clamp(16px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}

/* ---- identity ----------------------------------------------------------- */
.rail-id{display:inline-flex;align-items:center;gap:9px;
  color:inherit;text-decoration:none;flex:none;min-width:0}
.rail-pic{width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);background:var(--card2)}
.rail-pic img{width:100%;height:100%;object-fit:cover;display:block}
.rail-name{display:flex;flex-direction:column;min-width:0;line-height:1.15;gap:1px}
.rail-name b{font-size:14px;font-weight:650;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-name small{font-size:10.5px;color:var(--mut);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- nav ---------------------------------------------------------------- */
.rail-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);
  flex:1;min-width:0;justify-content:center}
.rail-nav ul{display:flex;align-items:center;gap:clamp(12px,1.8vw,24px);
  list-style:none;margin:0;padding:0}
.rail-nav ul a{position:relative;color:var(--mut);text-decoration:none;
  font-size:13px;font-weight:500;padding:5px 10px;border-radius:999px;
  transition:color .2s,border-color .2s;white-space:nowrap;
  border:1.5px solid transparent}
html[lang="en"] .rail-nav ul a{text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}
.rail-nav ul a:hover{color:var(--txt)}
.rail-nav ul a[aria-current="page"]{color:var(--txt);border-color:var(--ink)}

.rail-tools{display:flex;align-items:center;gap:var(--s2);flex:none;min-width:max-content}

.rail-lang,.rail-theme{display:grid;place-items:center;height:34px;
  border:1px solid var(--line);background:var(--card);color:var(--mut);
  border-radius:var(--r-sm);cursor:pointer;transition:.2s}
.rail-lang{min-width:38px;padding-inline:9px;font-family:var(--mono);
  font-size:12px;font-weight:700;letter-spacing:.04em}
.rail-theme{width:34px}
.rail-theme svg{width:16px;height:16px}
.rail-lang:hover,.rail-theme:hover{color:var(--acc);border-color:var(--acc)}

.rail-contact{flex:none;display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--line);background:var(--card);color:var(--mut);
  border-radius:50%;text-decoration:none;transition:color .2s,border-color .2s}
.rail-contact svg{width:17px;height:17px}
.rail-contact:hover{color:var(--acc);border-color:var(--acc)}

.rail-burger{display:none;width:34px;height:34px;place-items:center;
  border:1px solid var(--line);background:var(--card);color:var(--txt);
  border-radius:var(--r-sm);cursor:pointer}
.rail-burger svg{width:18px;height:18px}

.rail-scrim{position:fixed;inset:0;z-index:55;border:0;padding:0;
  background:rgba(0,0,0,.5);cursor:default}

/* ---- narrow ------------------------------------------------------------- */
/* 980px, not 640: five links plus three controls plus a two-line identity run
   out of room well before phone width. */
@media (max-width:980px){
  .rail-burger{display:grid}

  .rail-nav ul{position:fixed;inset-block-start:0;inset-inline-end:0;z-index:58;
    height:100dvh;width:min(320px,86vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:calc(var(--s8) + 10px) var(--s5) var(--s5);
    background:var(--bg);border-inline-start:1px solid var(--line);
    transform:translateX(100%);transition:transform .28s var(--ease);
    overflow-y:auto}
  html[dir="rtl"] .rail-nav ul{transform:translateX(-100%)}
  .rail-nav ul.open{transform:none}

  .rail-nav li{border-block-end:1px solid var(--line)}
  .rail-nav ul a{display:block;padding:16px 2px;font-size:16.5px;color:var(--txt)}
  .rail-nav ul a::after{display:none}
  .rail-nav ul a[aria-current="page"]{color:var(--acc)}

  .rail-contact{display:none}
}

@media (max-width:420px){
  .rail-name small{display:none}
  .rail-name b{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .rail-nav ul{transition:none}
  .rail-nav ul a::after{transition:none}
  .rail-contact:hover{border-color:var(--line)}
}
