/*
 * Every page's nav and footer (src/pages/layout.tsx): the same on the landing page (home.css) and
 * on the others (site.css), in the page's own colours. Loaded before the page's stylesheet.
 */
nav.top { position: sticky; top: 0; z-index: 9000; height: 68px; display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid transparent; transition: border-color .3s; }
nav.top.scrolled { border-color: var(--line); }
nav.top .wrap { display: flex; align-items: center; gap: 28px; width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
nav.top .brand, footer.site .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -.02em; text-decoration: none; }
nav.top .brand img, footer.site .brand img { width: 30px; height: 30px; border-radius: 0; }
nav.top .links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--ink-2); }
nav.top .links a { color: inherit; text-decoration: none; }
nav.top .links a:hover { color: var(--ink); }
nav.top .theme-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
nav.top .theme-btn svg { width: 16px; height: 16px; }
nav.top .btn { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(13,13,20,.6); transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); }
nav.top .btn:hover { transform: translateY(-2px); }
nav.top .btn svg { width: 16px; height: 16px; }
@media (max-width: 760px) { nav.top .links { display: none; } nav.top .theme-btn { margin-left: auto; } }


/* The footer, as Halo's: on dark ground in either theme, the brand and its line, then the columns */
footer.site { --ground: #0f0e1a; --ground-ink: 236, 235, 246; margin-top: 90px; background: var(--ground); color: rgb(var(--ground-ink)); }
:root[data-theme="dark"] footer.site { --ground: #0a0912; box-shadow: 0 -1px 0 rgba(255,255,255,.06); }
footer.site .ft { width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 64px 0 52px; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; align-items: start; }
footer.site .brand { color: #fff; font-size: 22px; }
footer.site .brand img { width: 32px; height: 32px; }
footer.site .line { max-width: 300px; margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: rgba(var(--ground-ink), .62); }
footer.site .copy { display: block; margin-top: 22px; font-size: 14px; color: rgba(var(--ground-ink), .4); }
footer.site h4 { margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--ground-ink), .45); }
footer.site h4 ~ a { display: block; margin: 0 0 12px; font-size: 15.5px; color: rgba(var(--ground-ink), .86); text-decoration: none; transition: color .2s; }
footer.site h4 ~ a:hover { color: #a5a8ff; }
@media (max-width: 760px) { footer.site .ft { grid-template-columns: 1fr 1fr; gap: 30px; padding: 48px 0 40px; } footer.site .ft-brand { grid-column: 1 / -1; } }