/* =========================================================================
   header.css — the top bar: PELEG mark, Rings/Row toggle, main menu.
   The letter-roll hover is set up by js/components/nav.js.
   ========================================================================= */

header{position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"mark modes nav";align-items:center;column-gap:16px;row-gap:14px;
  padding:calc(22px + env(safe-area-inset-top,0px)) var(--gutter) 0}
.mark{grid-area:mark;justify-self:start;font-family:var(--display);font-size:26px;letter-spacing:.06em;line-height:1}

/* ---------- main menu ---------- */
nav{grid-area:nav;justify-self:end;display:flex;gap:clamp(16px,3.2vw,46px)}
nav a{position:relative;padding:6px 0;font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;letter-spacing:.01em;line-height:1;white-space:nowrap}

/* hover: each letter rolls up and is replaced by its twin from below, one by one, left to right.
   The twin waits just under the word, and the mask is trimmed so it never peeks out at rest. */
/* (the PELEG mark uses the same roll — nav.js splits it too) */
nav .ch,.mark .ch{display:inline-block;height:1em;vertical-align:top;clip-path:inset(-.06em -.4em .14em -.4em)}
nav .ch i,.mark .ch i{display:block;line-height:1;font-style:inherit;transition:transform .6s cubic-bezier(.22,.8,.24,1);transition-delay:calc(var(--i) * 50ms)}
nav .ch i::after,.mark .ch i::after{content:attr(data-c);display:block;margin-top:-.06em}
nav a:hover .ch i,nav a:focus-visible .ch i,.mark:hover .ch i,.mark:focus-visible .ch i{transform:translateY(-.94em)}

/* the current page gets a small dot under its name */
nav a::after{content:"";position:absolute;left:50%;bottom:-3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor;opacity:0;transform:scale(0);transition:opacity .3s,transform .3s}
nav a[aria-current="page"]::after{opacity:1;transform:none}

/* ---------- Rings / Row toggle (hidden while Row mode is switched off in config.js) ---------- */
.modes{grid-area:modes;justify-self:center;display:flex;gap:4px;padding:6px;background:#fff;box-shadow:0 10px 30px -12px rgba(30,60,120,.35);transition:opacity .6s,transform .6s}
.modes button{font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;color:#8a8e95;transition:background .4s,color .4s}
.modes button:hover{color:#111}
.modes button[aria-pressed="true"]{background:#eceef1;color:#111}
.modes :focus-visible{outline-color:#111;outline-offset:-2px}
body.away .modes{transform:translateY(-8px)}

@media (max-width:760px){
  header{grid-template-columns:auto 1fr;grid-template-areas:"mark nav" "modes modes"}
}
@media (max-width:560px){
  nav{gap:14px}
  nav a{font-size:16px}
  .mark{font-size:22px}
  .modes button{padding:8px 12px}
}