/* ---------- moving between pages: a morph, not a reload (progressive: no support = a normal navigation) ---------- */
@view-transition{navigation:auto}
.nav-inner .logo{view-transition-name:io-logo}
.io-bar{view-transition-name:io-bar}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
::view-transition-group(io-role),::view-transition-group(io-phone){animation-duration:.45s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(io-role),::view-transition-new(io-role){height:100%;object-fit:none;overflow:clip}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ============================================================
   ROUTER — the "I'm a…" sheet + the phone thumb-zone bar.
   Shared by every page (see assets/router.js). Uses the page's
   own tokens (--surface, --text, --accent …) from its <style>.
   ============================================================ */

/* ---------- the sheet (native <dialog>) ---------- */
.io-sheet{margin:auto auto 0;padding:0;border:0;background:transparent;color:var(--text,#F2F0EA);width:100%;max-width:100%;max-height:92vh;overflow:visible}
.io-sheet::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.io-sheet-in{position:relative;background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(61,220,106,.14),transparent 70%),var(--surface,#141412);
  border-top:1px solid rgba(255,255,255,.12);border-radius:26px 26px 0 0;padding:10px 16px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px rgba(0,0,0,.6);max-height:92vh;overflow:auto}
.io-sheet[open] .io-sheet-in{animation:ioSheetUp .5s cubic-bezier(.34,1.3,.64,1) both}
.io-grab{width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.2);margin:0 auto 14px}
.io-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.io-sheet-head h2{font-family:var(--font-display,'Bebas Neue',sans-serif);font-weight:400;font-size:36px;letter-spacing:.03em;line-height:1;margin:0}
.io-x{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--text-2,#D0CCC2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.io-x:hover{background:var(--surface-2,#1C1C19)}
.io-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.io-role{position:relative;overflow:hidden;display:block;min-height:56px;padding:12px 13px;border-radius:14px;background:var(--surface-2,#1C1C19);border:1px solid rgba(255,255,255,.08);
  color:var(--text,#F2F0EA);text-decoration:none;transition:background .2s,border-color .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.io-sheet[open] .io-role{animation:ioSpringUp .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(120ms + var(--i) * 45ms)}
.io-sheet[open]::backdrop{animation:ioFade .25s both}
.io-rip{position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(var(--acc),.45);pointer-events:none;animation:ioRipple .6s ease-out both}
.io-role-t{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14.5px}
.io-role-t i{width:7px;height:7px;border-radius:50%;flex:none;background:rgb(var(--acc));box-shadow:0 0 8px rgb(var(--acc))}
.io-role-s{display:block;font-size:12px;color:var(--text-2,#D0CCC2);margin-top:2px}
.io-role:hover,.io-role:focus-visible,.io-role.on{background:rgba(var(--acc),.14);border-color:rgba(var(--acc),.6)}
.io-role:active{transform:scale(.97)}
.io-role:focus-visible,.io-x:focus-visible,.io-bar a:focus-visible,.io-bar button:focus-visible{outline:2px solid var(--accent,#E8A020);outline-offset:2px}
.io-sheet-note{margin:14px 0 0;font-size:12.5px;color:var(--text-3,#8A867C);text-align:center}

/* desktop: the same sheet, as a centred panel */
@media (min-width:881px){
  .io-sheet{margin:auto;width:min(760px,calc(100vw - 48px))}
  .io-sheet-in{border-radius:26px;border:1px solid rgba(255,255,255,.12);padding:22px 24px 22px}
  .io-sheet[open] .io-sheet-in{animation:ioPop .4s cubic-bezier(.16,1,.3,1) both}
  .io-grab{display:none}
  .io-roles{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .io-role{padding:14px 16px}
  .io-role:hover{transform:translateY(-3px)}
}

/* ---------- the phone thumb-zone bar ---------- */
.io-bar{display:none}
@media (max-width:880px){
  .io-bar{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:200;display:flex;gap:8px;padding:8px;border-radius:999px;
    background:rgba(20,20,18,.88);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .io-bar-who,.io-bar-go{flex:1;min-width:0;min-height:48px;border-radius:999px;font-family:var(--font-body,'DM Sans',sans-serif);font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
  .io-bar-who{border:1px solid rgba(255,255,255,.14);background:var(--surface-2,#1C1C19);color:var(--text,#F2F0EA);font-weight:600;cursor:pointer}
  .io-bar-who span{overflow:hidden;text-overflow:ellipsis}
  .io-bar-who i{display:none;width:7px;height:7px;border-radius:50%;flex:none;background:rgb(var(--acc))}
  .io-bar-who.has{border-color:rgba(var(--acc),.45)}
  .io-bar-who.has i{display:block}
  .io-bar-go{background:var(--accent,#E8A020);color:#0A0A08;font-weight:700;text-decoration:none}
  html.io-has-bar body{padding-bottom:88px}
}

@keyframes ioSheetUp{0%{transform:translateY(100%)}100%{transform:none}}
@keyframes ioPop{0%{opacity:0;transform:translateY(16px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes ioSpringUp{0%{opacity:0;transform:translateY(60px) scale(.7)}100%{opacity:1;transform:none}}
@keyframes ioFade{0%{opacity:0}100%{opacity:1}}
@keyframes ioRipple{0%{opacity:.5;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(3)}}
@media (prefers-reduced-motion:reduce){
  .io-sheet[open] .io-sheet-in,.io-sheet[open] .io-role,.io-sheet[open]::backdrop{animation:none}
  .io-rip{display:none}
  .io-role,.io-role:hover{transition:none;transform:none}
}

/* visually hidden, still read out */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}