/* ==========================================================================
   Base — element typography, page scaffolding and shared layout primitives.
   ========================================================================== */

body {
    background-color: var(--color-bg);
    overflow-x: hidden;
}

/* Film grain over the whole page: fixed, non-interactive, no request. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    background-image: var(--texture-grain);
    opacity: var(--grain-opacity);
    filter: invert(var(--grain-invert));
}

h1,
h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
}

h3,
h4 {
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

/* --- Page scaffolding --------------------------------------------------- */
.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The header is fixed, so ordinary pages start below it. Pages whose top is
   a dark stage let the stage run underneath the transparent header. */
.site-main {
    flex: 1;
    padding-top: var(--header-height);
}

.has-stage-hero .site-main {
    padding-top: 0;
}

.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
}

.shell-narrow {
    max-width: 52rem;
}

.section {
    padding-block: var(--section-pad);
    border-top: var(--border-width) solid var(--color-border);
}

/* --- Section heading: eyebrow + display title + hairline rule ----------- */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3) var(--space-6);
    margin-bottom: var(--space-7);
}

.section-head-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

.section-title {
    margin: 0;
    font-size: var(--text-display-md);
}

.section-rule {
    flex: 1 1 8rem;
    height: var(--border-width);
    margin-bottom: 0.9em;
    background: var(--color-border);
}

.section-lede {
    flex-basis: 100%;
    max-width: 60ch;
    margin: 0;
    font-size: var(--text-md);
    color: var(--color-text-secondary);
}

/* --- Small shared pieces ------------------------------------------------- */
.link {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.link:hover {
    color: var(--color-text-primary);
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-to-content {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: calc(var(--z-overlay) + 2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-on-accent);
    background: var(--color-accent-fill);
}

.skip-to-content:focus {
    top: var(--space-4);
    color: var(--color-on-accent);
}