/* Site-wide look, shared by every page (homepage, guides, privacy, articles, /get).
   Loaded after each page's own <style> on subpages so it wins ties; the homepage
   loads it first and layers its own section styles on top. */

:root {
    --bg: #0B0907;
    --bg-elevated: #17120E;
    --sand: #F2E9DD;
    --sand-2: #A89B8B;
    --accent: #EF6C3B;
    --accent-hover: #FF7F4D;
    --accent-deep: #B94E28;
    --text-primary: #F2E9DD;
    --text-secondary: #A89B8B;
    --panel: rgba(242, 233, 221, 0.04);
    --panel-hi: rgba(242, 233, 221, 0.07);
    --hairline: rgba(242, 233, 221, 0.12);
    --hairline-strong: rgba(242, 233, 221, 0.2);
    --ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --poster: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
    --poster-lh: 0.9;
    --radius: 4px;
    --mono: var(--ui);
    color-scheme: dark;
}

/* Big Shoulders only covers Latin and Vietnamese. Every other script falls back to the
   system face, which needs real line-height or ascenders and marks collide. */
html:is([lang|="ar"], [lang|="he"], [lang|="hi"], [lang|="th"], [lang|="ja"], [lang|="ko"],
        [lang|="zh"], [lang|="ru"], [lang|="uk"], [lang|="el"]) {
    --poster: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    --poster-lh: 1.12;
}

html { background-color: var(--bg); }
body {
    font-family: var(--ui);
    background-color: var(--bg);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Poster headlines */
h1, h1[class], h2, h2[class] {
    font-family: var(--poster);
    font-weight: 900;
    text-transform: uppercase;
    line-height: var(--poster-lh);
    letter-spacing: 0;
    text-wrap: balance;
}
h1[class] { font-size: clamp(44px, 7vw, 84px); }
h2[class] { font-size: clamp(38px, 5.4vw, 68px); }
h3 { letter-spacing: -0.01em; text-wrap: balance; }

/* The wordmark stays the app's own face, not the poster type */
:is(header, nav) a > svg + span, footer svg + span {
    font-family: "Archivo", var(--ui);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.025em;
}

.muted { color: var(--text-secondary); }
.accent { color: var(--accent); }
.kicker {
    font-family: var(--ui);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cta-button, .cta-button[class] {
    background-color: var(--accent);
    color: var(--bg);
    border-radius: var(--radius);
    font-weight: 600;
}
.cta-button:hover { background-color: var(--accent-hover); }
.ghost-button, .ghost-button[class] {
    border: 1px solid rgba(242, 233, 221, 0.5);
    background: rgba(11, 9, 7, 0.3);
    color: var(--sand);
    border-radius: var(--radius);
}
.nav-link { color: var(--text-secondary); }
.nav-link:hover { color: var(--text-primary); }
.site-header { background: rgba(11, 9, 7, 0.8); }
.hairline-b { border-bottom: 1px solid var(--hairline); }
.hairline-t { border-top: 1px solid var(--hairline); }
.text-white { color: var(--sand); }

/* Cards, panels and inputs share the squared-off radius */
.warm-card, .article-cta, .related-card, .faq-item, .closer, .shot, .card, .panel {
    border-radius: var(--radius);
}
.news-input { border-radius: var(--radius); }

/* Long-form pages: guides, articles, privacy */
.article-content h2, article h2 {
    font-size: clamp(28px, 3.4vw, 38px);
    margin-top: 2.6rem;
    margin-bottom: 0.9rem;
}
.article-content h3 { font-weight: 600; }
.article-content strong { color: var(--text-primary); }
.article-content a { text-decoration-color: rgba(239, 108, 59, 0.7); }

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