/*
 * base.css — Global typography, page-level primitives, site-wide utilities.
 *
 * Canonical source: docs/design-system.md §3 (Typography) and the §6
 * introduction note ("Hairlines, eyebrow, and other typographic/layout
 * primitives live in base.css alongside .grain, .hero-glow, and the
 * type scale").
 * Locked extraction origin: reference/prototype.html <style> block.
 * Rules are extracted verbatim; only file-level grouping and section
 * headers are added.
 *
 * No HTML consumes these styles yet — src/_partials/head.html is a
 * Step 2.3 placeholder and does not <link> any stylesheet.
 *
 * History (roadmap Step 2.5): the prototype did not honor
 * `prefers-reduced-motion: reduce`. §7.6 compliance is implemented
 * here (the .reveal @media block at the end of this file) and in
 * components.css (marquee, ripple, cursor blink, tile hover, edit-cell
 * pulse, AI panel transition). The runtime helper
 * window.prefersReducedMotion lives in src/scripts/main.js for the JS
 * side (hero typing, AI-panel timing).
 */

/* ========== Global type ========== */

html, body { background: var(--bg); color: var(--fg); }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-feature-settings: 'ss01','cv11';
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }

/* ========== Texture & glow ========== */

.grain {
    position: absolute; inset: 0; pointer-events: none; opacity: .04; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(700px 400px at 78% 12%, rgba(181,137,111,0.10), transparent 60%),
        radial-gradient(900px 500px at 12% 28%, rgba(120,90,70,0.06), transparent 60%);
}

/* ========== Hairlines ========== */

.hairline { background: var(--line); height: 1px; width: 100%; }
.accent-hairline {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent) 40%, var(--accent) 60%, transparent);
    opacity: .35;
}

/* ========== Headlines ========== */

.h-display {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;
}
.h-section {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ========== Global behavior ========== */

html { scroll-behavior: smooth; }
::selection { background: rgba(181,137,111,0.35); color: #fff; }

/* ========== Global utilities ========== */

/* Site-wide IntersectionObserver fade-up primitive (see design-system.md §7.1). */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease-out, transform .55s ease-out; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Section vertical-rhythm helper. */
.section { padding: 120px 0; position: relative; }
@media (max-width: 900px) { .section { padding: 80px 0; } }

/* Asymmetric six-column feature grid (children opt in via .span-N). */
.ftgrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
.ftgrid > .span-2 { grid-column: span 2; }
.ftgrid > .span-3 { grid-column: span 3; }
.ftgrid > .span-4 { grid-column: span 4; }
@media (max-width: 900px) {
    .ftgrid > * { grid-column: span 6 !important; }
}

/* Hero specs row (Mac requirements line). */
.spec-pill { color: var(--fg-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; }
.spec-dot { width: 3px; height: 3px; background: var(--fg-3); border-radius: 50%; display: inline-block; margin: 0 14px; vertical-align: middle; }

/* ========== Reduced motion (§7.6) ========== */

/* Implements docs/design-system.md §7.6 for the .reveal primitive.
   Component-level animations live in components.css and are handled by
   the @media block at the end of that file. The JS side (hero typing,
   AI-panel timing) checks window.prefersReducedMotion (defined in
   scripts/main.js) at each animation entry point. */
@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; }
}