/* Site theme: color tokens and the site header.
   Shared by every page (styles.css imports it) and linked directly by the standalone article pages in articles/,
   so header or color changes here reach the articles too. Keep this file to tokens and header rules only. */

:root {
    --bg: #080a0f;
    --bg-soft: #0d1119;
    --panel: #111722;
    --panel-2: #151d2a;
    --text: #f7f8fb;
    --muted: #a7afbc;
    --line: rgba(255,255,255,.11);
    --red: #ff2b2f;
    --red-2: #d90f1b;
    --red-soft: rgba(255,43,47,.16);
    --white: #ffffff;
    --max: 1220px;
    --radius: 24px;
}

/* Header rules are scoped so they also render correctly on pages that do not load styles.css */
.site-header, .site-header * { box-sizing: border-box; }
.site-header { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; color: var(--text); }
.site-header a { color: inherit; text-decoration: none; }

.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(8,10,15,.78);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    font-size: 20px;
}
.brand-mark {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    align-self: center;
    background: url("assets/logo_silhouette.webp") center / contain no-repeat;
    filter: drop-shadow(0 0 12px rgba(255,43,47,.35));
}
.brand-sub { color: var(--red); font-weight: 800; }
/* Raise ® without growing the line box, so INCISOR stays on the same baseline as 2.0 CRIMSON */
.brand sup { font-size: .6em; line-height: 0; vertical-align: baseline; position: relative; top: -.75em; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
    padding: 10px 12px;
    color: #d9dde5;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
}
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,.08); color: white; }
.nav-cta { border: 1px solid rgba(255,43,47,.5); color: white !important; }

@media (max-width: 960px) {
    /* Header links drop to a slim second row; Get Incisor stays beside the brand */
    .nav { height: auto; flex-wrap: wrap; justify-content: flex-start; gap: 0 12px; padding-top: 12px; }
    .nav::after { content: ""; flex-basis: 100%; order: 2; }
    .nav-links { display: contents; }
    .nav-cta { order: 1; margin-left: auto; }
    .nav-links a:not(.nav-cta) { order: 3; padding: 6px 10px; font-size: 13px; margin: 6px -8px 8px 0; }
    .nav-links a:not(.nav-cta):first-child { margin-left: -10px; }
}

@media (max-width: 640px) {
    .container { width: min(100% - 24px, var(--max)); }
    .nav { padding-top: 10px; }
    .brand { font-size: 16px; }
    .brand-mark { width: 30px; height: 30px; }
    .nav-cta { padding: 8px 10px !important; font-size: 12px !important; }
}

@media (max-width: 400px) {
    .brand { gap: 8px; }
    .brand-sub { font-size: 13px; }
}
@media (max-width: 380px) {
    .nav-long { display: none; }
}