/* bearonahill.com shared foundation.
   Tokens, base type, masthead and footer, used by the landing page
   (css/style.css) and the legal sub pages (css/legal.css). Page specific
   rules live in those files, never here. */

/* ── Tokens ───────────────────────────────────────────────
   Light is a clear morning on the hill, dark is dusk. The scene tokens
   (--sky-*, --ridge-*, --sun) are read by the inline SVG in the hero. */

:root {
    --paper: #FBF9F5;
    --paper-raised: #FFFFFF;
    --ink: #14181A;
    --ink-soft: #3C464B;
    --muted: #6B7880;
    --rule: #E3DED4;
    --rule-strong: #CFC8BB;
    --accent: #00889A;
    --accent-ink: #FFFFFF;

    --sky-top: #B9D2DE;
    --sky-mid: #DCE4E2;
    --sky-low: #F6E3C6;
    --sun: #F6C878;
    --sun-glow: rgba(246, 200, 120, .55);
    --haze: rgba(255, 255, 255, .45);
    --star: rgba(255, 255, 255, 0);
    --ridge-a: #A9BAC0;
    --ridge-b: #7E959A;
    --ridge-c: #536A6D;
    --ridge-d: #33474A;
    --ridge-e: #1B2A2C;
    --ground: #1B2A2C;
    --ground-ink: #D8E2E1;
    --ground-muted: #8FA3A3;
    --ground-rule: rgba(216, 226, 225, .16);

    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", ui-monospace, Menlo, "Roboto Mono", monospace;

    /* Which face the theme toggle wears: the mode a click would take you to. */
    --icon-sun: 0;
    --icon-moon: 1;

    --gap: clamp(1.25rem, 5vw, 2.5rem);
    --section: clamp(4.5rem, 11vw, 9rem);
    --measure: 1120px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #101416;
        --paper-raised: #171D20;
        --ink: #E9EFF0;
        --ink-soft: #B6C2C5;
        --muted: #889699;
        --rule: #252D31;
        --rule-strong: #333D42;
        --accent: #4CC6D6;
        --accent-ink: #04191D;

        --sky-top: #101828;
        --sky-mid: #24293A;
        --sky-low: #5A3F44;
        --sun: #E8A45B;
        --sun-glow: rgba(232, 164, 91, .38);
        --haze: rgba(120, 140, 170, .16);
        --star: rgba(233, 239, 240, .9);
        --ridge-a: #2C3648;
        --ridge-b: #222A39;
        --ridge-c: #19202B;
        --ridge-d: #12171F;
        --ridge-e: #0B0E13;
        --ground: #0B0E13;
        --ground-ink: #D3DCDE;
        --ground-muted: #7E8C90;
        --ground-rule: rgba(211, 220, 222, .13);

        --icon-sun: 1;
        --icon-moon: 0;
    }
}

:root[data-theme="dark"] {
    --paper: #101416;
    --paper-raised: #171D20;
    --ink: #E9EFF0;
    --ink-soft: #B6C2C5;
    --muted: #889699;
    --rule: #252D31;
    --rule-strong: #333D42;
    --accent: #4CC6D6;
    --accent-ink: #04191D;

    --sky-top: #101828;
    --sky-mid: #24293A;
    --sky-low: #5A3F44;
    --sun: #E8A45B;
    --sun-glow: rgba(232, 164, 91, .38);
    --haze: rgba(120, 140, 170, .16);
    --star: rgba(233, 239, 240, .9);
    --ridge-a: #2C3648;
    --ridge-b: #222A39;
    --ridge-c: #19202B;
    --ridge-d: #12171F;
    --ridge-e: #0B0E13;
    --ground: #0B0E13;
    --ground-ink: #D3DCDE;
    --ground-muted: #7E8C90;
    --ground-rule: rgba(211, 220, 222, .13);

    --icon-sun: 1;
    --icon-moon: 0;
}

* { box-sizing: border-box; }

html {
    height: auto;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; }

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
}

.wrap {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gap);
}

.eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: var(--gap);
    top: 1rem;
    z-index: 10;
    background: var(--paper-raised);
    color: var(--ink);
    padding: .6rem 1rem;
    border-radius: 4px;
}

/* ── Masthead ─────────────────────────────────────────── */

.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: clamp(1.25rem, 3vw, 2rem);
}

.masthead__brand {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
}

/* media/logo.svg, inlined so the lockup takes the theme ink. */
.masthead__logo {
    display: block;
    width: 138px;
    height: auto;
}

.logo__word { fill: currentColor; }
.logo__bear { fill: currentColor; opacity: 1; }
.logo__hill { fill: currentColor; opacity: .24; }

.masthead__nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.masthead__nav a {
    color: var(--muted);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}

.masthead__nav a:hover,
.masthead__nav a:focus {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* ── Theme toggle ─────────────────────────────────────
   Sits at the end of the nav. It carries the face of the mode a click
   would take you to, and both faces are driven by --icon-sun/--icon-moon
   so the button follows the system setting until someone overrides it. */

.theme-toggle {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -6px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, background-color 160ms ease;
}

.theme-toggle[hidden] { display: none; }

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--ink);
    background: var(--rule);
}

.theme-toggle svg {
    grid-area: 1 / 1;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 240ms ease, transform 240ms ease;
}

.theme-toggle .icon--sun {
    opacity: var(--icon-sun);
    transform: rotate(calc(var(--icon-moon) * -80deg)) scale(calc(.55 + .45 * var(--icon-sun)));
}

.theme-toggle .icon--moon {
    opacity: var(--icon-moon);
    transform: rotate(calc(var(--icon-sun) * 80deg)) scale(calc(.55 + .45 * var(--icon-moon)));
}

/* ── Footer ───────────────────────────────────────────── */

.footer {
    padding-top: 2rem;
    padding-bottom: 3rem;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.footer a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}

.footer a:hover,
.footer a:focus {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.footer .sep {
    padding: 0 .5rem;
    color: var(--rule-strong);
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 620px) {
    body { font-size: 16px; }
    .masthead__logo { width: 112px; }
    .masthead__nav a:not(.is-key) { display: none; }
    .masthead__nav { gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .theme-toggle svg { transition: none; }
}