/* Save Rady site chrome — the ONE definition of the header.
   Extracted from index.html so every page shares it; edit here, not per page. */

  /* nav */
  nav{position:sticky;top:0;z-index:50;background:rgba(14,18,22,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
  nav .wrap{display:flex;align-items:center;gap:26px;height:58px}
  nav .brand{font-weight:800;letter-spacing:-.03em;font-size:16px;text-transform:uppercase;white-space:nowrap;color:var(--ink);text-decoration:none}
  nav .brand span{color:var(--xd)}
  nav .by{font-size:10px;color:var(--dim);text-decoration:none;white-space:nowrap;letter-spacing:.1em;
    text-transform:uppercase;border-left:1px solid var(--rule);padding-left:22px}
  nav .by span{color:var(--xd)} nav .by:hover{color:var(--mut)}
  nav a.l{font-size:12px;color:var(--mut);text-decoration:none;white-space:nowrap;letter-spacing:.05em;text-transform:uppercase}
  nav a.l:hover,nav a.l:focus{color:var(--ink)}
  nav .spacer{flex:1}
  .btn{display:inline-block;background:var(--xd);color:#0E1216;font-weight:800;font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;padding:13px 22px;text-decoration:none;border:2px solid var(--xd);white-space:nowrap}
  .btn:hover,.btn:focus{background:transparent;color:var(--xd)}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
  .btn.ghost:hover,.btn.ghost:focus{border-color:var(--ink)}
  .btn.sm{padding:11px 16px;font-size:11px}


  /* ══ STORY-MAP NAV — horizontal chronology ══ */
  .navmap{position:static;display:inline-flex;align-items:center}
  .navmap .gt{color:var(--mut);padding:0 14px;line-height:58px;font-size:13px;
    letter-spacing:.02em;text-decoration:none;transition:color .15s;position:relative;white-space:nowrap}
  .navmap .gt.ref{color:var(--dim);font-size:12px}
  .navmap .gt:hover,.navmap .gt:focus{color:var(--ink);outline:none}
  /* ...but that outline:none is (0,3,0) and beat the global :focus-visible (0,1,0),
     so keyboard focus was invisible on every nav item. Restore it at equal
     specificity, later in the cascade. Mouse focus stays clean. */
  .navmap .gt:focus-visible{outline:2px solid var(--xd);outline-offset:3px}
  .navmap .gt::after{content:"";position:absolute;left:14px;right:14px;bottom:14px;height:2px;
    background:var(--xd);transform:scaleX(0);transform-origin:left;transition:transform .2s}
  .navmap .gt.ref::after{background:var(--dim)}
  .navmap .gt:hover::after,.navmap .gt:focus::after{transform:scaleX(1)}
  .gp{position:absolute;top:58px;left:0;right:0;background:var(--panel);
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    padding:18px 0 22px;box-shadow:0 26px 60px rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
  .navmap:hover .gp,.navmap:focus-within .gp{opacity:1;visibility:visible;transform:translateY(0)}
  .gph{max-width:1340px;margin:0 auto 15px;padding:0 34px;color:var(--dim);
    font:600 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
  .viewport{max-width:1340px;margin:0 auto;padding:0 34px;overflow:hidden;position:relative}
  .strip{display:flex;gap:16px;transition:transform .42s cubic-bezier(.22,.61,.36,1)}
  .sc{flex:0 0 268px;position:relative;padding:34px 14px 12px;border-radius:9px;
    text-decoration:none;transition:opacity .25s,background .15s}
  .sc:hover{background:var(--panel2)}
  .sc::after{content:"";position:absolute;left:0;right:-16px;top:23px;height:1px;
    background:var(--rule);z-index:1}
  .sc:last-child::after{right:0}
  .sc::before{content:"";position:absolute;left:14px;top:19px;width:9px;height:9px;border-radius:50%;
    background:var(--panel);border:2px solid var(--rule);transition:border-color .15s;z-index:2}
  .sc:hover::before{border-color:var(--xd)}
  .sc.isref{opacity:1}
  .sc.isref u{color:var(--gov)}
  .sc.isref::before{border-color:var(--gov);background:var(--panel)}
  /* timeline — diamond */
  .sc[href="#timeline"]::before{border-radius:2px;transform:rotate(45deg)}
  /* archive — square */
  .sc[href="#changelog"]::before{border-radius:2px}
  /* questions — ring with a centre dot */
  .sc[href="#faq"]::before{border-radius:50%;box-shadow:inset 0 0 0 2px var(--panel),inset 0 0 0 4px var(--gov)}
  /* about — hollow ring */
  .sc[href="#about"]::before{border-radius:50%;border-width:2px}
  .sc.isref:hover::before{border-color:var(--ok)}
  .ml.isref u{color:var(--gov)}
  .sc b{display:block;font:600 11px/1.4 ui-monospace,Menlo,monospace;color:var(--dim)}
  .sc u{display:block;text-decoration:none;color:var(--xd);margin-top:3px;
    font:600 10.5px/1.5 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
  .sc span{display:block;color:var(--ink);font-weight:650;font-size:15px;margin-top:4px}
  .sc em{display:block;color:var(--dim);font-style:normal;font-size:12.5px;line-height:1.4;margin-top:3px}
  .navmap[data-stage="1"] .strip{transform:translateX(-0px)}
  .navmap[data-stage="2"] .strip{transform:translateX(-568px)}
  .navmap[data-stage="3"] .strip{transform:translateX(-1420px)}
  .navmap[data-stage="4"] .strip{transform:translateX(-2272px)}
  .navmap[data-stage="5"] .strip{transform:translateX(-2840px)}
  .navmap[data-stage="6"] .strip{transform:translateX(-3408px)}
  .navmap[data-stage="1"] .sc:not(.g1) b,
  .navmap[data-stage="1"] .sc:not(.g1) u,
  .navmap[data-stage="1"] .sc:not(.g1) span,
  .navmap[data-stage="1"] .sc:not(.g1) em{opacity:.34}
  .navmap[data-stage="2"] .sc:not(.g2) b,
  .navmap[data-stage="2"] .sc:not(.g2) u,
  .navmap[data-stage="2"] .sc:not(.g2) span,
  .navmap[data-stage="2"] .sc:not(.g2) em{opacity:.34}
  .navmap[data-stage="3"] .sc:not(.g3) b,
  .navmap[data-stage="3"] .sc:not(.g3) u,
  .navmap[data-stage="3"] .sc:not(.g3) span,
  .navmap[data-stage="3"] .sc:not(.g3) em{opacity:.34}
  .navmap[data-stage="4"] .sc:not(.g4) b,
  .navmap[data-stage="4"] .sc:not(.g4) u,
  .navmap[data-stage="4"] .sc:not(.g4) span,
  .navmap[data-stage="4"] .sc:not(.g4) em{opacity:.34}
  .navmap[data-stage="5"] .sc:not(.g5) b,
  .navmap[data-stage="5"] .sc:not(.g5) u,
  .navmap[data-stage="5"] .sc:not(.g5) span,
  .navmap[data-stage="5"] .sc:not(.g5) em{opacity:.34}
  .navmap[data-stage="6"] .sc:not(.g6) b,
  .navmap[data-stage="6"] .sc:not(.g6) u,
  .navmap[data-stage="6"] .sc:not(.g6) span,
  .navmap[data-stage="6"] .sc:not(.g6) em{opacity:.34}
  .navmap[data-stage="1"] .gt:nth-of-type(1){color:var(--ink)}
  .navmap[data-stage="1"] .gt:nth-of-type(1)::after{transform:scaleX(1)}
  .navmap[data-stage="2"] .gt:nth-of-type(2){color:var(--ink)}
  .navmap[data-stage="2"] .gt:nth-of-type(2)::after{transform:scaleX(1)}
  .navmap[data-stage="3"] .gt:nth-of-type(3){color:var(--ink)}
  .navmap[data-stage="3"] .gt:nth-of-type(3)::after{transform:scaleX(1)}
  .navmap[data-stage="4"] .gt:nth-of-type(4){color:var(--ink)}
  .navmap[data-stage="4"] .gt:nth-of-type(4)::after{transform:scaleX(1)}
  .navmap[data-stage="5"] .gt:nth-of-type(5){color:var(--ink)}
  .navmap[data-stage="5"] .gt:nth-of-type(5)::after{transform:scaleX(1)}
  .navmap[data-stage="6"] .gt:nth-of-type(6){color:var(--ink)}
  .navmap[data-stage="6"] .gt:nth-of-type(6)::after{transform:scaleX(1)}

  /* ── mobile story map ── */
  .mnav{display:none;margin-left:auto}
  .mnav>summary{list-style:none;cursor:pointer;color:var(--ink);font-size:13px;
    letter-spacing:.03em;padding:9px 14px;border:1px solid var(--rule);border-radius:7px}
  .mnav>summary::-webkit-details-marker{display:none}
  .mnav[open]>summary{background:var(--panel2)}
  .mpanel{position:absolute;left:0;right:0;top:58px;background:var(--panel);
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    padding:14px 20px 20px;max-height:76vh;overflow-y:auto;z-index:60;
    box-shadow:0 26px 60px rgba(0,0,0,.6)}
  .mgh{margin:14px 0 6px;color:var(--dim);font:600 10px/1 ui-monospace,Menlo,monospace;
    letter-spacing:.14em;text-transform:uppercase}
  .ml{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:baseline;
    padding:9px 8px;border-radius:7px;text-decoration:none;border-bottom:1px solid var(--rule)}
  .ml:last-child{border-bottom:0}
  .ml b{font:600 11px/1.5 ui-monospace,Menlo,monospace;color:var(--dim)}
  .ml span{color:var(--ink);font-weight:650;font-size:15px}
  .ml u{text-decoration:none;color:var(--xd);font:600 10px/1.5 ui-monospace,Menlo,monospace;
    letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
  .ml.isref u{color:var(--dim)}
  @media(max-width:1240px){.navmap .gt{padding:0 10px;font-size:12.5px}.navmap .gt.ref{font-size:11.5px}}
  @media(max-width:1040px){.navmap{display:none}.mnav{display:block}}