/* Base + layout. Mobile-first; 16px gutters; single centred column. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 var(--t-md)/1.55 var(--font-ui); }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s-3); letter-spacing: -.01em; }
h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s-3); }
code, .mono { font-family: var(--font-code); font-size: .86em; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; border-radius: 4px; }

.topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar-in { max-width: var(--content-w); margin: 0 auto; padding: var(--s-3) var(--s-4); display: flex; gap: var(--s-3); align-items: center; }
.brand { font-weight: 800; font-size: var(--t-lg); color: var(--ink); display: flex; gap: var(--s-2); align-items: center; }
.brand-mark { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe3a8, var(--sun) 60%, #d97c12); box-shadow: 0 0 14px color-mix(in srgb, var(--sun) 60%, transparent); }
.nav { display: flex; gap: var(--s-1); margin-left: auto; flex-wrap: wrap; }
.nav a { padding: 6px 10px; border-radius: var(--r-pill); color: var(--muted); font-weight: 600; font-size: var(--t-sm); }
.nav a[aria-current="page"] { background: var(--indigo-soft); color: var(--indigo); }
.nav a:hover { text-decoration: none; color: var(--ink); }
main { max-width: var(--content-w); margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-7); }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.stack > * + * { margin-top: var(--s-3); }
.row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: var(--t-sm); }
.grid-2 { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.footer { text-align: center; padding: 0 var(--s-4) var(--s-6); }
form.inline { display: inline; }
.login-main { max-width: 380px; padding-top: 12vh; }