/* Only Scotts — the house style, post-reduction.
 *
 * Two typefaces, one ground, two accents. Everything else is faces.
 * Used by the three pages that are still part of the site proper:
 * /, /aboutscott and /contact. The archived wing keeps nav.css. */

:root {
    --ink:    #07070A;
    --panel:  #0D0D12;
    --tile:   #101014;
    --line:   #1E1E26;
    --bone:   #EDEAE3;
    --body:   #B6B1A8;
    --mute:   #9A958C;
    --dim:    #847F76;
    --gold:   #D4A843;
    --signal: #FF3B1F;

    --mono: 'Space Mono', 'Courier New', Courier, monospace;
    --display: 'Archivo Black', 'Helvetica Neue', Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--mono);
}

a { color: var(--gold); }
a:hover { color: var(--signal); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ── the nav, such as it is ───────────────────────────────── */

.os-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    height: 64px;
    padding: 0 clamp(16px, 4vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(180deg, rgba(7, 7, 10, 0.94) 0%, rgba(7, 7, 10, 0) 100%);
    pointer-events: none;
}

.os-bar > * { pointer-events: auto; }

.os-mark {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--bone);
    text-decoration: none;
    white-space: nowrap;
}

.os-mark:hover { color: var(--gold); }

.os-links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 34px);
}

.os-links a {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--mute);
    text-decoration: none;
    padding: 16px 0;
    white-space: nowrap;
}

.os-links a:hover,
.os-links a[aria-current="page"] { color: var(--gold); }


/* ── shared furniture ─────────────────────────────────────── */

.os-eyebrow {
    font-size: 11px;
    letter-spacing: 0.40em;
    text-transform: uppercase;
    color: var(--gold);
}

.os-rule {
    height: 1px;
    background: var(--signal);
    opacity: 0.75;
    border: 0;
    margin: 0;
}

.os-display {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 0.82;
    margin: 0;
}

/* Four links and a wordmark have to share a phone's width without a hamburger,
   so everything tightens rather than folding away. */
@media (max-width: 620px) {
    .os-bar { height: 56px; padding: 0 14px; gap: 10px; }
    .os-mark { font-size: 10px; letter-spacing: 0.16em; }
    .os-links { gap: 13px; }
    .os-links a { font-size: 10px; letter-spacing: 0.06em; padding: 14px 0; }
}

@media (max-width: 380px) {
    .os-links { gap: 10px; }
    .os-links a { font-size: 9px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}