:root {
    /* Warm Earth Palette (Authoritative ground: Oat #E8DFD0) */
    --bg-ground: #e8dfd0;
    --bg-surface: #dfd5c4;
    --bg-card: #f3ece1;
    --bg-card-hover: #faf5ed;
    --bg-dark: #211c18;
    --bg-dark-surface: #2c2621;
    --bg-dark-card: #352f29;


    --ink: #211c18;
    --ink-muted: #5c5248;
    --ink-subtle: #7a6f64;
    --ink-on-dark: #ede4d8;
    --ink-muted-on-dark: #b3a798;


    --accent: #9e3e12;
    --accent-hover: #83320d;
    --accent-active: #672608;
    --accent-ochre: #d9822b;
    --accent-ochre-tint: rgba(192, 125, 43, 0.14);
    --accent-tint: rgba(196, 85, 34, 0.12);


    --border: #c8bdae;
    --border-strong: #a89c8c;
    --border-subtle: rgba(92, 82, 72, 0.18);
    --border-on-dark: rgba(237, 228, 216, 0.16);


    --status-active: #3e7a43;
    --status-pending: #c07d2b;
    --status-alert: #b83a2e;


    --rici-220: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --rici-06e: 'Crimson Pro', Georgia, Cambria, "Times New Roman", serif;
    --rici-ed5: "IBM Plex Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;


    /* Type Scale — Fluid via clamp() */
    --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
    --text-base: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
    --text-md: clamp(1.1875rem, 1.12rem + 0.45vw, 1.375rem);
    --text-lg: clamp(1.375rem, 1.25rem + 0.75vw, 1.75rem);
    --text-xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.375rem);
    --text-2xl: clamp(2.125rem, 1.8rem + 1.9vw, 3.125rem);
    --text-3xl: clamp(2.625rem, 2.1rem + 2.8vw, 4.25rem);


    /* Spacing Scale */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3.25rem;
    --space-2xl: 5rem;
    --space-3xl: 7.5rem;


    --content-max: 1320px;
    --content-narrow: 880px;
    --header-height: 4.75rem;
    --header-height-condensed: 3.75rem;


    /* Motion Tokens */
    --duration-fast: 140ms;
    --duration-norm: 220ms;
    --duration-slow: 380ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);


    /* Elevation / Hard Shadows */
    --shadow-hud: 0 1px 0 rgba(33, 28, 24, 0.08), 0 4px 16px rgba(33, 28, 24, 0.06);
    --shadow-overlay: 0 12px 32px rgba(33, 28, 24, 0.22);
}



*, *::before, *::after {
    box-sizing: border-box;

}


html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    background-color: var(--bg-ground);
    color: var(--ink);
}


body {
    margin: 0;
    padding: 0;
    font-family: var(--rici-06e);
    font-size: var(--text-base);
    line-height: 1.62;
    font-weight: 400;
    color: var(--ink);
    background-color: var(--bg-ground);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}


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


p {
    margin-top: 0;
    margin-bottom: var(--space-md);
    max-width: 72ch;
}


p:last-child {
    margin-bottom: 0;
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--rici-220);
    font-weight: 600;
    line-height: 1.18;
    color: var(--ink);
    margin-top: 0;
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
    text-wrap: balance;
}


h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}


h2 {
    font-size: var(--text-2xl);
    line-height: 1.16;
}


h3 {
    font-size: var(--text-xl);
    line-height: 1.22;
}


h4 {
    font-size: var(--text-lg);
    line-height: 1.28;
}


h5 {
    font-size: var(--text-md);
    font-weight: 600;
}


h6 {
    font-size: var(--text-base);
    font-family: var(--rici-ed5);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* Lists */
ul, ol {
    margin-top: 0;
    margin-bottom: var(--space-md);
    padding-left: 1.4em;
}


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


li:last-child {
    margin-bottom: 0;
}


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


em, i {
    font-style: italic;
}


small {
    font-size: var(--text-sm);
    line-height: 1.4;
}


code, kbd, samp, pre {
    font-family: var(--rici-ed5);
    font-size: 0.9em;
}


mark {
    background-color: var(--accent-ochre-tint);
    color: var(--ink);
    padding: 0 0.2em;
}


a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--border-strong);
    transition: color var(--duration-fast) var(--ease-standard),
                            text-decoration-color var(--duration-fast) var(--ease-standard);
}


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


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


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


/* Form Controls Reset (font: inherit strictly for form elements) */
button, input, select, textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}


button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}


table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}



.tabular-nums,
.num,
.stat-value,
.price-figure,
.price-tag,
.telemetry-val {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}


.mono-tag {
    font-family: var(--rici-ed5);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}


.bg-dark .mono-tag,
.fit-tool-output .mono-tag {
    color: var(--ink-muted-on-dark);
}



main {
    flex: 1 0 auto;
    position: relative;
    width: 100%;
}


.shell-container {
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);

    padding-right: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
}


.shell-container-narrow {
    width: 100%;
    max-width: var(--content-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
    padding-right: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
}


.section-pad {
    padding-top: clamp(3rem, 2rem + 4vw, 6.5rem);
    padding-bottom: clamp(3rem, 2rem + 4vw, 6.5rem);
}


.section-pad-sm {
    padding-top: clamp(2rem, 1.4rem + 2.5vw, 4rem);
    padding-bottom: clamp(2rem, 1.4rem + 2.5vw, 4rem);
}


.bg-ground {
    background-color: var(--bg-ground);
    color: var(--ink);
}


.bg-surface {
    background-color: var(--bg-surface);
    color: var(--ink);
}


.bg-dark {
    background-color: var(--bg-dark);
    color: var(--ink-on-dark);
}


.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark strong {
    color: var(--ink-on-dark);
}


.bg-dark p,
.bg-dark li {
    color: var(--ink-muted-on-dark);
}


/* Grid & Flex Utilities */
.grid-flow {
    display: grid;
    gap: var(--space-lg);
}


.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
}


.flex-wrap {
    flex-wrap: wrap;
}


.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.full-width-figure {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-color: var(--bg-surface);
    overflow: hidden;
}


.full-width-figure img {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}


.full-width-figure figcaption {
    font-family: var(--rici-ed5);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    padding: var(--space-xs) clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
}



.hud-panel {
    position: relative;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
    min-width: 0;
    overflow-wrap: break-word;
}


@media (max-width: 480px) {
    .hud-panel {
        padding: 1rem 0.85rem;
    }
}


.hud-panel-dark {
    background-color: var(--bg-dark-card);
    border: 1px solid var(--border-on-dark);
    color: var(--ink-on-dark);
}


.bracket-frame {
    position: relative;
}


.bracket-frame::before,
.bracket-frame::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    pointer-events: none;
    z-index: 2;
}


.bracket-frame::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--accent);
    border-left: 2px solid var(--accent);
}


.bracket-frame::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
}


.hud-grid-texture {
    background-image: 
        linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
    background-size: 32px 32px;
}



.asymmetric-lockup {
    position: relative;
    display: inline-block;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-lg);
}


.asymmetric-lockup .lockup-top {
    display: block;
    font-family: var(--rici-220);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
    transform: translateX(0);
}


.asymmetric-lockup .lockup-cut {
    display: block;
    position: relative;
    height: 2px;
    background-color: var(--accent);
    margin: var(--space-xs) 0;
    width: calc(100% + clamp(20px, 4vw, 60px));
    max-width: 100vw;
    transform: translateX(-10px);
}


.asymmetric-lockup .lockup-cut::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-ochre);
}


.asymmetric-lockup .lockup-bottom {
    display: block;
    font-family: var(--rici-220);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--accent);
    padding-left: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}


.bg-dark .asymmetric-lockup .lockup-top {
    color: var(--ink-on-dark);
}



.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;
}


.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--ink);
    color: var(--bg-ground);
    padding: 0.75rem 1.25rem;
    z-index: 1000;
    font-family: var(--rici-ed5);
    font-size: var(--text-xs);
    text-decoration: none;
    font-weight: 600;
    transition: top var(--duration-fast) var(--ease-out);
}


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


/* Icon glyphs sizing */
.icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    vertical-align: -0.18em;
    flex-shrink: 0;
}


/* 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;
    }
}