/* Shared design system — white / black / blue.
   Loaded by every page and injected from nav.js so a forgotten <link>
   cannot drop the palette or the layout chrome. */

:root{
  --acid:#2563EB;
  --moss:#1D4ED8;
  --ink:#0B0D10;
  --bone:#F8FAFC;
  --line:rgba(15,23,42,.12);
  --warn:#1E40AF;
  --bad:#1E3A8A;
  --paper:#FFFFFF;
  --mist:#F1F5F9;
  --ice:#EFF6FF;
  --ease:cubic-bezier(.2,.8,.2,1);
  --nav-h:64px;
}

html{background:var(--paper);scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  background:var(--paper);color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--acid)}
::selection{background:rgba(37,99,235,.18);color:var(--ink)}
:focus-visible{outline:3px solid var(--acid);outline-offset:3px}

/* Real content sits above the wash / drifting marks. */
.vnav{z-index:40}
main,main.wrap,.band > .wrap,.hero > .wrap,.hero-in,.atelier{position:relative;z-index:2}

/* Skip — keyboard first, then hide. */
.vskip{position:absolute;left:12px;top:-48px;z-index:80;background:var(--ink);
       color:#FFFFFF;padding:10px 14px;font-weight:800;font-size:13px;
       text-decoration:none}
.vskip:focus{top:12px}

/* Shared form / action rhythm. Pages can still override; this is the floor. */
input[type="email"],input[type="password"],input[type="text"],input[type="search"],
textarea,select{
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
input[type="email"]:focus,input[type="password"]:focus,input[type="text"]:focus,
input[type="search"]:focus,textarea:focus,select:focus{
  box-shadow:0 0 0 3px rgba(37,99,235,.16);
}

.go,.btn,.dl,.pbtn,.vcta{
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease),
             box-shadow .18s var(--ease);
}
.go:hover:not([disabled]),.btn:hover:not([disabled]){transform:translateY(-1px)}

/* Loading / empty — used on account, library, invites, reset. */
.load{opacity:.7;letter-spacing:.01em}
.load::before{
  content:'';display:inline-block;width:12px;height:12px;margin-right:10px;
  border:2px solid rgba(37,99,235,.25);border-top-color:var(--acid);
  border-radius:50%;vertical-align:-2px;
  animation:veyroSpin .7s linear infinite;
}
.empty{padding:64px 22px;text-align:center;border:1px dashed var(--line);
       background:rgba(248,250,252,.55)}
.empty h2,.empty h1{margin-top:0}
.empty p{opacity:.62;margin-top:8px}
.empty .btn,.empty .go{margin-top:20px}

@keyframes veyroSpin{to{transform:rotate(360deg)}}

/* Site footer injected by nav.js when a page has none. */
.vfoot{position:relative;z-index:2;margin-top:72px;padding:28px 24px 40px;
       border-top:1px solid var(--line);display:flex;flex-wrap:wrap;
       justify-content:space-between;align-items:center;gap:14px 28px;
       font-size:13.5px;color:rgba(11,13,16,.58);max-width:1240px;
       margin-left:auto;margin-right:auto}
.vfoot a{color:inherit;text-decoration:none;font-weight:600}
.vfoot a:hover{color:var(--acid)}
.vfoot .brand{font-weight:900;letter-spacing:-.03em;color:var(--ink)}
.vfoot nav{display:flex;gap:18px;flex-wrap:wrap}
.vfoot .tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px}
.invert .vfoot{color:rgba(248,250,252,.58);border-top-color:rgba(248,250,252,.14)}
.invert .vfoot .brand{color:#F8FAFC}
.invert .vfoot a:hover{color:#93C5FD}

@media (prefers-reduced-motion:reduce){
  .go,.btn,.dl,.pbtn,.vcta,input,textarea,select{transition:none}
  .go:hover:not([disabled]),.btn:hover:not([disabled]){transform:none}
  .load::before{animation:none}
}