:root {
    /* Color ladder (Authoritative computed tokens) */
    --ground: #141212;
    --surface: #1d1d1d;
    --surface-2: #2a2a2a;
    --line: #464646;
    --ink-soft: #b7b7b7;
    --ink: #e8e8e8;
    --accent: #268551;
    --accent-ink: #fff;
    --hairline: #b08d57;

    /* Semantic UI state colors */
    --error: #d94848;
    --error-bg: #2b1515;
    --success: #268551;
    --focus-ring: #b08d57;

    /* Typography families */
    --gife-4e4: 'Cinzel', 'Cinzel Fallback', serif, Georgia;
    --gife-e3c: "Spectral", 'Spectral Fallback', Georgia, serif;
    --gife-dc6: "JetBrains Mono", "JetBrains Mono Fallback", "SF Mono", Consolas, monospace;

    --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
    --gife-08e:  clamp(0.95rem, 0.90rem + 0.3vw, 1.12rem);
    --gife-901:  clamp(1.15rem, 1.05rem + 0.5vw, 1.40rem);
    --gife-b9b:  clamp(1.38rem, 1.22rem + 0.9vw, 1.78rem);
    --gife-f55:  clamp(1.68rem, 1.42rem + 1.4vw, 2.30rem);
    --gife-0b1:  clamp(2.05rem, 1.65rem + 2.1vw, 2.95rem);
    --gife-ef6:  clamp(2.45rem, 1.95rem + 3.0vw, 3.85rem);

    /* Spacing rhythm — Deliberate scale with two canonical band-spacing sizes */
    --space-3xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.35rem);
    --space-2xs: clamp(0.45rem, 0.40rem + 0.25vw, 0.60rem);
    --space-xs:  clamp(0.75rem, 0.68rem + 0.35vw, 0.95rem);
    --space-s:   clamp(1.00rem, 0.90rem + 0.50vw, 1.30rem);
    --space-m:   clamp(1.50rem, 1.35rem + 0.80vw, 2.00rem);
    --space-l:   clamp(2.20rem, 1.90rem + 1.40vw, 3.10rem);
    --space-xl:  4.5rem;
    --space-2xl: 6rem;
    --band-tight: 3.5rem;
    --band-air: 5.5rem;

    --radius-0: 0px;
    --reading-measure: 65ch;
    --container-max: 1280px;
    --container-editorial: 960px;
    --dock-height: 68px;
    --strip-height: 48px;

    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 160ms;
    --dur-med: 280ms;
    --dur-slow: 450ms;
}

/* --- RESET & BOX SIZING --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: var(--ground);
    color: var(--ink);

    font-family: var(--gife-e3c);
    font-size: 100%;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--strip-height) + 1rem);
}

body {
    min-height: 100vh;
    background-color: var(--ground);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    padding-bottom: var(--dock-height);
    overflow-x: hidden;
    position: relative;
}

@media (min-width: 1024px) {
    body {
        padding-bottom: 0;
    }
}

/* Reset form controls specifically — never inherit on body */
button, input, select, textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

/* Media elements */
img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background-color: var(--accent);
    color: var(--accent-ink);
    padding: 0.75rem 1.25rem;
    font-family: var(--gife-dc6);
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    z-index: 99999;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-0);
    transition: top var(--dur-fast) var(--ease-out-quad);
}

.skip-link:focus-visible {
    top: 1rem;
    outline: 2px solid var(--hairline);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gife-4e4);
    font-weight: 600;
    line-height: 1.18;
    color: var(--ink);
    letter-spacing: 0.015em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

h1 {
    font-size: var(--gife-0b1);
    max-width: 18ch;
}

@media (min-width: 768px) {
    h1 {
        font-size: var(--gife-ef6);
    }
}

h2 {
    font-size: var(--gife-f55);
    margin-bottom: var(--space-s);
}

h3 {
    font-size: var(--gife-b9b);
    margin-bottom: var(--space-xs);
}

h4 {
    font-size: var(--gife-901);
}

p {
    font-size: var(--gife-08e);
    max-width: var(--reading-measure);
    margin-bottom: var(--space-s);
    color: var(--ink);
}

p.lede {
    font-size: var(--gife-901);
    line-height: 1.5;
    color: var(--ink);
    font-style: normal;
    max-width: var(--reading-measure);
}

p.caption {
    font-size: var(--step--1);
    color: var(--ink-soft);
    line-height: 1.45;

    font-family: var(--gife-dc6);
}

strong, b {
    font-weight: 600;
    color: var(--ink);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--step--1);
    color: var(--ink-soft);
}

a {
    color: var(--ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease-out-quad), text-decoration-color var(--dur-fast) var(--ease-out-quad);
}

a:hover {
    color: var(--accent-ink);
    text-decoration-color: var(--hairline);
}

a:focus-visible {
    outline: 2px solid var(--hairline);

    outline-offset: 3px;
}

ul, ol {
    padding-left: var(--space-m);
    margin-bottom: var(--space-s);
    max-width: var(--reading-measure);
}

li {
    margin-bottom: var(--space-2xs);
    color: var(--ink);
}

code, kbd, samp, .mono {
    font-family: var(--gife-dc6);
    font-size: 0.9em;
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

.tabular-nums {
    font-family: var(--gife-dc6);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

hr {
    border: 0;
    height: 1px;
    background-color: var(--line);
    margin: var(--space-l) 0;
}

/* Hairline technical divider */
.hairline-rule {
    border: 0;
    height: 1px;
    background-color: var(--hairline);
    margin: var(--space-m) 0;
    opacity: 0.7;
}

/* --- LAYOUT PRIMITIVES --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-s);
}

.container-editorial {
    width: 100%;
    max-width: var(--container-editorial);
    margin-inline: auto;
    padding-inline: var(--space-s);
}

.full-measure-text {
    max-width: var(--reading-measure);
    margin-inline: auto;
}

.grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
}

@media (min-width: 768px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-l);
    }
}

.grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
}

@media (min-width: 640px) {
    .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-l);
    }
}

/* Engineering Technical Coordinate Grid Marks */
.tech-coordinate {
    font-family: var(--gife-dc6);
    font-size: var(--step--1);
    color: var(--ink-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    user-select: none;
}

.tech-coordinate::before {
    content: '+';
    color: var(--hairline);
    font-weight: 700;
}

/* SVG Icon base */
.icon {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    flex-shrink: 0;
}

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

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

    [data-speed], [data-lag] {
        transform: none !important;
    }
}