/* Atlas v2 · the page's chrome (V2.md §2.1b, Yusef 2026-10-27): the header bar, the sticky bottom bar and the spine's
   small titles. Loads after v2.css and overrides it here, so the page's own styles stay as they are. */

/* ——— the header: thicker and alive. The mark far left with the booking right after it, the pages at the far right
   (Adam's copy N1–N8, 2026-10-30). A slow frost shimmer runs along its bottom edge, the booking button breathes and a
   sheen crosses it now and then, and the page you are on is lit in the links.
   Every one of those runs on the compositor (ticket 024): it animates only transform and opacity, so it keeps moving
   while the page's main thread is busy building the hero (before, the edge's light and the sheen moved a
   background-position, the breath was a box-shadow and the mark's glow a filter, and all four stalled with every long
   task). A glow that breathes is now two still glows cross-fading; a light that slides is a still gradient carried
   across ——— */
.top { border-bottom: 0; overflow-x: clip; }   /* (the edge's light runs past both ends; clip leaves the menu below free) */
.top .wrap { min-height: 88px; padding-block: 0; gap: 0; }
.top .mark { position: relative; }
.top .mark svg { position: relative; width: 30px; height: 30px; color: var(--light-hi); filter: drop-shadow(0 0 2px rgba(127,220,255,.25)); }
/* (the mark's glow: a copy of the mark under it, from chrome.js, lit at the glow's brightest and breathing in and out) */
.top .mark svg.mark-glow { position: absolute; left: 0; top: 50%; translate: 0 -50%; filter: drop-shadow(0 0 9px rgba(127,220,255,.7));
  opacity: 0; animation: mark-glow 5.5s ease-in-out infinite; }
.top .mark b { font-size: 18px; }
.top .mark small { font-size: 9.5px; margin-top: 6px; }
.top .btn { margin-left: 34px; padding: 14px 22px; font-size: 14.5px; }
.top nav { gap: 30px; margin-left: auto; height: 26px; align-items: center; }
.top nav a { position: relative; padding-block: 6px; transition: color .25s; }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--light), transparent);
  box-shadow: 0 0 8px var(--light); transform: scaleX(0); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.top nav a:hover::after, .top nav a[aria-current="page"]::after { transform: scaleX(1); }
.top nav a[aria-current="page"] { color: var(--light-hi); }

/* ——— the menu (N8): below 1100px the links fold into a panel under the bar; the wordmark and the booking stay. On a
   phone the wordmark drops its small line and the booking wraps to two short lines, so all three fit at 390px. The bar
   keeps its 88px everywhere: the phone's chapter tag sits in its bottom edge (spine.js) ——— */
.menu-btn { display: none; }
@media (max-width: 1100px) {
  .menu-btn { display: grid; place-items: center; flex: none; width: 46px; height: 46px; margin-left: auto; padding: 0; border-radius: 8px; cursor: pointer;
    background: rgba(169,205,242,.06); border: 1px solid var(--line-hi); color: var(--ivory); transition: background .2s, border-color .2s; }
  .menu-btn:hover { background: rgba(169,205,242,.12); }
  .menu-btn i { position: relative; display: block; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px; transition: background .2s; }
  .menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .menu-btn i::before { transform: translateY(-6px); } .menu-btn i::after { transform: translateY(6px); }
  .top.open .menu-btn { border-color: var(--light); }
  .top.open .menu-btn i { background: transparent; }
  .top.open .menu-btn i::before { transform: rotate(45deg); } .top.open .menu-btn i::after { transform: rotate(-45deg); }
  .top nav { position: absolute; left: 0; right: 0; top: 100%; height: auto; margin: 0; padding: 8px var(--gut) 20px; display: grid; gap: 0;
    background: linear-gradient(180deg, #0b1117, #080d13); border-bottom: 1px solid var(--line-hi); box-shadow: 0 30px 60px rgba(0,0,0,.55);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s .3s; }
  .top.open nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1); }
  .top nav a { padding: 16px 0; font-size: 20px; letter-spacing: -.01em; color: var(--ivory); border-bottom: 1px solid var(--line); }
  .top nav a:last-child { border-bottom: 0; }
  .top nav a::after { display: none; }
  .top nav a[aria-current="page"] { color: var(--light); }
}
@media (max-width: 720px) {
  .top .mark { gap: 10px; } .top .mark b { font-size: 15px; letter-spacing: .34em; }
  .top .btn { margin-left: 14px; padding: 9px 12px; font-size: 13px; line-height: 1.15; text-align: center; max-width: 11.5em; }
  .top nav { padding-inline: 34px 16px; }
  .menu-btn { width: 42px; height: 42px; }
}
@media (max-width: 520px) { .top .mark small { display: none; } }
/* the bottom edge: a faint frost line, and a brighter stretch of it gliding along */
.top::before, .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; }
.top::before { background: linear-gradient(90deg, transparent, var(--line-hi) 20%, var(--line-hi) 80%, transparent); }
/* (the bright stretch is a third of the bar wide and slides from just off its left end to just off its right) */
.top::after { right: auto; width: 34%; background: linear-gradient(90deg, transparent 0, rgba(169,205,242,0) 38%, rgba(233,246,255,.95) 50%, rgba(169,205,242,0) 62%, transparent 100%);
  filter: drop-shadow(0 0 4px rgba(127,220,255,.9)); will-change: transform; animation: edge-run 9s linear infinite; }
/* the booking: a slow breath of light (its quiet glow and its bright one cross-fading, under the embers), and a sheen
   crossing it every few seconds (chrome.js puts the sheen's track in the button; the track clips it to the button) */
.top .btn.primary, .top .btn.primary:hover { box-shadow: none; }
.top .btn.primary::before, .top .btn.primary::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; }
.top .btn.primary::before { box-shadow: 0 0 0 1px rgba(207,232,251,.55) inset, 0 0 18px rgba(127,196,246,.35), 0 0 46px rgba(127,196,246,.12); animation: cta-breath-out 3.6s ease-in-out infinite; }
.top .btn.primary::after { box-shadow: 0 0 0 1px rgba(233,246,255,.8) inset, 0 0 32px rgba(127,196,246,.62), 0 0 80px rgba(127,196,246,.26); opacity: 0; animation: cta-breath 3.6s ease-in-out infinite; }
.top .cta-sheen { position: absolute; inset: 0; z-index: -3; border-radius: inherit; overflow: hidden; pointer-events: none; }
.top .cta-sheen i { position: absolute; top: 0; bottom: 0; left: 0; width: 250%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.7) 50%, transparent 58%);
  will-change: transform; animation: cta-sheen 6s ease-in-out infinite; }
@keyframes edge-run { from { transform: translateX(-97.06%); } to { transform: translateX(291.18%); } }
@keyframes cta-breath { 50% { opacity: 1; } }
@keyframes cta-breath-out { 50% { opacity: 0; } }
@keyframes cta-sheen { 0% { transform: translateX(-60%); } 28%, 100% { transform: none; } }
@keyframes mark-glow { 50% { opacity: 1; } }

/* ——— the bottom bar: fixed, a fade to black, "Scroll to see more" bobbing over two chevrons in the middle and the
   booking at the right (clear of the hero's left column and its own buttons). It fades away once the Book section
   is on screen (chrome.js). Under the spine's small titles, which wait in a stack beside it ——— */
.scroll-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; height: 128px; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,6,9,0) 0%, rgba(3,6,9,.62) 48%, rgba(3,6,9,.94) 100%);
  transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1); }
.scroll-bar.gone { opacity: 0; transform: translateY(24px); }
.scroll-bar .cue { position: absolute; left: 50%; bottom: 22px; display: grid; justify-items: center; gap: 8px; transform: translateX(-50%); }
.scroll-bar .cue > span { display: grid; justify-items: center; gap: 9px; animation: cue-bob 2.4s ease-in-out infinite; }
.scroll-bar .cue b { font: 400 11.5px/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--ivory); text-shadow: 0 0 14px rgba(127,220,255,.45); }
.scroll-bar .cue i { display: grid; justify-items: center; }
.scroll-bar .cue svg { display: block; width: 18px; height: 9px; color: var(--light); filter: drop-shadow(0 0 5px rgba(127,220,255,.7)); }
.scroll-bar .cue svg + svg { margin-top: -1px; opacity: .5; animation: chev-dim 2.4s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }
@keyframes chev-dim { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
/* phones (Yusef, 2026-11-01, ticket 019: the cue back on a phone): the header carries the booking (N8), so the bar is
   only the cue, smaller, with a shorter, lighter fade, and lifted clear of the iPhone's home indicator. It stays under
   the hero's film and skip buttons (their foot sits 96px up) */
@media (max-width: 720px) {
  .scroll-bar { height: calc(64px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(3,6,9,0) 0%, rgba(3,6,9,.5) 50%, rgba(3,6,9,.86) 100%); }
  .scroll-bar .cue { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .scroll-bar .cue > span { gap: 6px; }
  .scroll-bar .cue b { font-size: 9.5px; letter-spacing: .24em; }
  .scroll-bar .cue svg { width: 15px; height: 7.5px; }
}

/* ——— the spine's small titles: a timeline of the whole page (Yusef, 2026-10-28), fixed to the screen, placed every
   frame by spine.js. Passed ones close up toward the top, grey; the one you are in flickers on, grey to frost blue,
   larger, with room round it; the ones to come wait below, grey; the bonus is a real button pinned at the foot,
   always lit. Each has its own channel under it, drawn by the spine ——— */
@media (prefers-reduced-motion: no-preference) { #chapters { position: fixed; height: 100%; pointer-events: none; } }
.chap-label { pointer-events: auto; transition: opacity .5s, color .3s, text-shadow .3s; }
.chap-label.out { transform: none; white-space: normal; width: 116px; font-size: 11px; letter-spacing: .12em; line-height: 1.45; }
/* waiting and passed: tutorials, longer, so they wrap in the strip beside the spine, clear of the acts (12vw) */
.chap-label:is(.waiting, .past) { opacity: .62; transform: none; color: #6f7b89; text-shadow: none;
  white-space: normal; width: 106px; font-size: 10px; letter-spacing: .08em; line-height: 1.4; }
.chap-label.past { opacity: .5; color: #66727f; }
.chap-label:is(.waiting, .past):hover { opacity: 1; color: var(--muted); }
.chap-label:focus-visible { outline: 1px solid var(--light); outline-offset: 4px; border-radius: 3px; }
/* the bonus (the booking): a real button, always lit, whatever is on. It breathes a blue glow, embers rise off it,
   and it takes you to the booking */
.chap-label.bonus, .chap-label.bonus.out { width: 136px; padding: 10px 13px; white-space: normal; font-size: 10px; letter-spacing: .08em; line-height: 1.4;
  color: var(--light-hi); border: 1px solid rgba(127,196,246,.55); border-radius: 7px; background: linear-gradient(180deg, rgba(22,46,70,.94), rgba(8,18,30,.94));
  box-shadow: 0 0 0 1px rgba(127,220,255,.08) inset, 0 0 18px rgba(63,157,255,.28); transition: opacity .5s, border-color .25s, background .25s; }
.chap-label.bonus:is(.waiting, .out) { opacity: 1; animation: bonus-breathe 2.6s ease-in-out infinite; }
.chap-label.bonus:hover { color: #fff; border-color: rgba(191,227,251,.9); background: linear-gradient(180deg, rgba(32,64,96,.96), rgba(12,26,42,.96)); }
.chap-label.bonus:active { transform: translateY(1px); }
.chap-label.bonus:is(.waiting, .out)::before, .chap-label.bonus:is(.waiting, .out)::after { content: ""; position: absolute; left: 18%; top: -2px; width: 2px; height: 2px; border-radius: 50%; background: #bfe3fb;
  box-shadow: 0 0 6px 1px rgba(127,220,255,.9), 22px 4px 0 0 rgba(191,227,251,.8), 48px -2px 0 0 rgba(191,227,251,.7); animation: bonus-ember 2.8s ease-out infinite; pointer-events: none; }
.chap-label.bonus:is(.waiting, .out)::after { left: 46%; animation-delay: 1.4s; box-shadow: 0 0 6px 1px rgba(127,220,255,.9), -26px 3px 0 0 rgba(191,227,251,.75), 30px -1px 0 0 rgba(191,227,251,.6); }
@keyframes bonus-breathe { 0%, 100% { text-shadow: 0 0 8px rgba(127,220,255,.45); box-shadow: 0 0 0 1px rgba(127,220,255,.08) inset, 0 0 16px rgba(63,157,255,.24); }
  50% { text-shadow: 0 0 14px rgba(127,220,255,.9); box-shadow: 0 0 0 1px rgba(127,220,255,.18) inset, 0 0 30px rgba(63,157,255,.5), 0 0 60px rgba(63,157,255,.18); } }
@keyframes bonus-ember { 0% { transform: translateY(4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
.chap-label.out:not(.bonus) { animation: chap-flicker .62s linear both; }
/* a quick, uneven flicker, like a tube catching: grey, a stutter of light, then on */
@keyframes chap-flicker {
  0% { color: #6f7b89; opacity: .62; text-shadow: none; }
  12% { color: var(--light); opacity: 1; text-shadow: 0 0 12px rgba(127,220,255,.8); }
  20% { color: #6f7b89; opacity: .45; text-shadow: none; }
  34% { color: var(--light-hi); opacity: 1; text-shadow: 0 0 14px rgba(127,220,255,.9); }
  42% { color: #6f7b89; opacity: .55; text-shadow: none; }
  50% { color: var(--light); opacity: .9; text-shadow: 0 0 10px rgba(127,220,255,.6); }
  58% { color: #8aa6bf; opacity: .6; text-shadow: none; }
  100% { color: var(--light); opacity: 1; text-shadow: 0 0 10px rgba(127,220,255,.55); }
}
/* phones: only the title you are in, tucked into the header bar's bottom edge under the wordmark (so it never covers
   the one column of content), with where it falls in the page ("3 / 8"); the header's booking button carries the bonus.
   #chapters rides above the header there so the tag shows inside it */
@media (max-width: 720px) {
  #chapters { z-index: 31; }
  .chap-label.out, .chap-label.bonus.out { width: auto; max-width: calc(100vw - 40px); padding: 0; font-size: 9px; letter-spacing: .12em; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 0; border-radius: 0; background: none; box-shadow: none; }
  .chap-label.bonus.out { animation: none; color: var(--light); text-shadow: 0 0 10px rgba(127,220,255,.55); }
  .chap-label.out:not(.bonus)::before { content: attr(data-step); margin-right: 9px; color: var(--muted); letter-spacing: .08em; }
  .chap-label.bonus.out::before, .chap-label.bonus.out::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .top::after, .top .btn.primary::before, .top .btn.primary::after, .top .cta-sheen i, .top .mark-glow, .scroll-bar .cue > span, .scroll-bar .cue svg + svg, .scroll-bar .btn, .chap-label.out, .chap-label.bonus, .chap-label.bonus::before, .chap-label.bonus::after { animation: none; }
}