/* Omni-Science — Core Brand Styles */

/* ======= Design Tokens ======= */
:root {
    /* Base */
    --bg: #0a0a0a;              /* obsidian */
    --surface: #101010;         /* panel background */
    --text: #e8e8e8;            /* primary text */
    --muted: #b0b0b0;           /* secondary text */
    --stroke: rgba(255,255,255,.12);
    --stroke-soft: rgba(255,255,255,.08);

    /* Accents: precision + energy */
    --accentA: #22d3ee;         /* electric cyan */
    --accentB: #7c3aed;         /* violet / spectral */
    --accentHot: #ff2d55;       /* infrared punch */
    /* Media accents (overridden per-page) */
    --media-accent-1: #d7ff00;  /* cyber yellow */
    --media-accent-2: #39ff14;  /* neon signal green */

    /* Metal tones */
    --metal-1: #88909a;         /* gunmetal */
    --metal-2: #a5adb8;         /* iridium */

    /* Layout */
    --container: 1100px;
    --radius: 16px;
}

/* ======= Base ======= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ======= Buttons ======= */
.btn {
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: #121212;
    font-weight: 700;
}
.btn.primary {
    background: linear-gradient(90deg, rgba(124,58,237,.18), rgba(34,211,238,.18));
}

/* ======= Cards ======= */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
    background: #151515;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 22px;
}
.card h3 { margin: 6px 0; }
.card p { margin: 0; color: #cfcfcf; }
.card .link {
    display: inline-block;
    margin-top: 12px;
    font-weight: 700;
    background: linear-gradient(90deg, var(--accentB), var(--accentA));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ======= Sections / Typographic Helpers ======= */
section { padding: 60px 0; }
.kicker { display: inline-block; text-transform: uppercase; font-size: 12px; letter-spacing: .18em; color: var(--muted); margin-bottom: 8px; }
h1, h2 { letter-spacing: -0.02em; }
h2 { margin: 0 0 10px; }
.subtitle { color: var(--muted); margin-bottom: 20px; }

/* ======= Typography Utilities ======= */
.italic { font-style: italic; }
.condensed { font-stretch: condensed; letter-spacing: .02em; }
.tagline { font-weight: 800; letter-spacing: .02em; }

/* ======= Footer ======= */
footer { border-top: 1px solid var(--stroke); color: var(--muted); padding: 30px 0; }

/* ======= Nav (Component) ======= */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(0,0,0,.6); border-bottom: 1px solid var(--stroke); backdrop-filter: blur(10px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-weight: 800; letter-spacing: .3px; display: flex; align-items: center; gap: 10px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(90deg, var(--accentB), var(--accentA)); }
.links { display: flex; gap: 20px; }
.links a { opacity: .9; font-weight: 600; }

/* ======= Fallback nav for simple pages using <nav> only ======= */
nav { background: #0f0f0f; border-bottom: 1px solid var(--stroke); }
nav ul { list-style: none; margin: 0; padding: 0 16px; display: flex; gap: 12px; align-items: center; }
nav ul li a { display: block; padding: 12px 10px; color: #eaeaea; }
nav ul li a:hover { color: var(--accentA); }

/* ======= Generic header hero for child pages (records, media) ======= */
header {
    background: radial-gradient(1000px 420px at 50% -10%, rgba(124,58,237,.22), transparent 60%),
                radial-gradient(900px 380px at 100% 10%, rgba(34,211,238,.18), transparent 58%),
                linear-gradient(#0b0b0b, #0c0c0f);
    color: #fff;
    text-align: center;
    padding: 60px 0;
}
header h1 { margin: 0 0 8px; font-size: clamp(36px, 5.4vw, 64px); }
header p { margin: 0; color: #d0d0d0; }

/* ======= Subscribe button id used on Records ======= */
#subscribe-btn { background: linear-gradient(90deg, rgba(124,58,237,.24), rgba(34,211,238,.24)); border: 1px solid var(--stroke); color: #fff; padding: 14px 22px; border-radius: 12px; cursor: pointer; }
#subscribe-btn:hover { box-shadow: 0 0 0 3px rgba(124,58,237,.12); }

/* ======= Responsive ======= */
@media (max-width: 640px) { .links { display: none; } }