/* Local fonts (from /font) */
@font-face {
    font-family: "Anton";
    src: url("font/Anton-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Oswald";
    src: url("font/Oswald-VariableFont_wght.ttf") format("truetype");
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Work Sans";
    src: url("font/WorkSans-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Special Elite";
    src: url("font/SpecialElite-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Type — family tokens (source names) */
    --font-anton: "Anton", Impact, "Arial Narrow", sans-serif;
    --font-oswald: "Oswald", "Arial Narrow", sans-serif;
    --font-work-sans: "Work Sans", system-ui, "Segoe UI", Roboto, sans-serif;
    --font-special-elite: "Special Elite", "Courier New", Courier, monospace;
    /* Type — how we use them (Anton + Oswald + Work Sans; Special Elite = accent) */
    --font-headline: var(--font-anton);
    --font-subhead: var(--font-oswald);
    --font-body: var(--font-work-sans);
    --font-accent: var(--font-special-elite);

    /* Core palette */
    --black: #0B0B0B;
    --dirty-white: #F2F2F2;
    --crimson-red: #D7263D;
    /* Secondary / support */
    --steel-gray: #6C757D;
    --charcoal: #1F1F1F;
    --bone: #E7E2D9;
    /* Brighter red for link hover (optional tweak) */
    --link-bright: #FF4D5A;
    /* How we use them */
    --bg: var(--black);
    --fg: var(--dirty-white);
    --accent: var(--crimson-red);
    --muted: var(--steel-gray);
    --border: var(--steel-gray);
    --link: var(--bone);
    --link-hover: var(--link-bright);
    /* Grit / noise (fixed overlay) — `overlay` on #0B0B0B is almost invisible; tune with opacity + mode */
    --grit-image: url("grit.png");
    --grit-opacity: 0.5;
    /* screen / soft-light: lifts highlights; overlay: subtler, needs higher --grit-opacity on dark bgs */
    --grit-blend: soft-light;
}
* { box-sizing: border-box; }
html {
    background: var(--bg);
}
a {
    color: var(--link);
    transition: color 0.2s ease;
}
a:hover,
a:focus-visible {
    color: var(--link-hover);
}
body {
    position: relative;
    z-index: 0;
    margin: 0 auto;
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 3rem;
    max-width: 42rem;
    width: 100%;
    color: var(--fg);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.6;
    text-align: left;
}
/* Grain between page bg and in-flow content; `mix-blend` alone on top of black = nearly flat */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--grit-image) center / 100% 100% no-repeat;
    mix-blend-mode: var(--grit-blend);
    opacity: var(--grit-opacity);
    pointer-events: none;
}
/* Must sit above the ::after layer in some UAs; keeps grit visible under transparent content */
body > * {
    position: relative;
    z-index: 1;
}
header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
}
h1 {
    margin: 0 0 0.5rem;
    font-family: var(--font-headline);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
h2, h3 {
    font-family: var(--font-subhead);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tagline {
    margin: 0;
    color: var(--accent);
    font-family: var(--font-accent);
    font-size: 0.95em;
    letter-spacing: 0.04em;
}
.long-form {
    margin-top: 0;
}
.long-form p {
    margin: 0 0 1rem;
}
.long-form p:last-child {
    margin-bottom: 0;
}
.placeholder-text {
    color: var(--muted);
    font-style: italic;
}
.long-form p.placeholder:empty {
    min-height: 4.5em;
    outline: 1px dashed var(--border);
    outline-offset: 2px;
    margin-bottom: 1rem;
}