:root {
    --ground:#a8503c;
    --ink:#fff;
    --ink-muted:#f8f5f2;
    --surface-oxide:#5a2115;
    --surface-soot:#201412;
    --accent-sage:#e5f4e7;
    --accent-amber:#ffe6cc;
    --hairline:rgba(245, 239, 235, 0.18);
    --hairline-strong:rgba(245, 239, 235, 0.40);
    --hairline-dark:rgba(32, 20, 18, 0.35);

    --color-ground:var(--ground);
    --color-surface-oxide:var(--surface-oxide);
    --color-surface-soot:var(--surface-soot);
    --color-ink:var(--ink);
    --color-ink-muted:var(--ink-muted);
    --color-accent-sage:var(--accent-sage);
    --color-accent-amber:var(--accent-amber);
    --color-border:var(--hairline);
    --color-border-strong:var(--hairline-strong);

    --mofi-09a:'Big Shoulders Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mofi-0e0:'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mofi-8c2:'Space Mono', Consolas, 'Liberation Mono', Menlo, monospace;

    --step--2:clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
    --step--1:clamp(0.84rem, 0.80rem + 0.20vw, 0.95rem);
    --mofi-c08:clamp(1.00rem, 0.95rem + 0.28vw, 1.14rem);
    --mofi-84b:clamp(1.22rem, 1.14rem + 0.45vw, 1.48rem);
    --mofi-5d9:clamp(1.50rem, 1.36rem + 0.76vw, 1.95rem);
    --mofi-c5a:clamp(1.88rem, 1.62rem + 1.25vw, 2.58rem);
    --mofi-2d9:clamp(2.35rem, 1.95rem + 2.05vw, 3.48rem);

    --mofi-1b8:clamp(2.95rem, 2.30rem + 3.10vw, 4.80rem);

    --space-3xs:clamp(0.25rem, 0.22rem + 0.12vw, 0.35rem);
    --space-2xs:clamp(0.50rem, 0.45rem + 0.22vw, 0.65rem);
    --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.75vw, 1.95rem);
    --space-l:clamp(2.00rem, 1.78rem + 1.10vw, 2.70rem);
    --space-xl:clamp(2.75rem, 2.40rem + 1.75vw, 3.90rem);
    --space-2xl:clamp(3.75rem, 3.10rem + 2.80vw, 5.50rem);

    /* Concrete Industrial Geometry & Hard Edges */
    --radius-0:0px;
    --hairline-width:1px;

    --ease-industrial:cubic-bezier(0.2, 0, 0, 1);
    --ease-spring:cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:140ms;
    --dur-base:220ms;
    --dur-deliberate:380ms;

    --measure-narrow:42ch;
    --measure-prose:64ch;
    --measure-wide:80ch;

    --header-mark-size:56px;
    --header-height:70px;
}

*, *::before, *::after {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html {
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--mofi-0e0);
    font-size:100%;
    line-height:1.58;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    scroll-behavior:smooth;
    scroll-padding-block-start:var(--header-mark-size);
}

body {
    min-height:100vh;
    background-color:var(--ground);
    color:var(--ink);
    overflow-x:hidden;
    position:relative;
    letter-spacing:-0.005em;
    /* Utilitarian layout: subtle painted-line baseline grid visible in spacing */
    background-image:linear-gradient(to bottom, rgba(245, 239, 235, 0.05) 1px, transparent 1px);

    background-size:100% 32px;
}

img, picture, svg, video, canvas {
    display:block;
    max-width:100%;
    height:auto;
}

input, button, textarea, select {
    font:inherit;
    color:inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family:var(--mofi-09a);
    font-weight:900;
    line-height:0.98;
    color:var(--ink);
    text-transform:uppercase;
    letter-spacing:0.01em;
    text-wrap:balance;

    margin-block-end:0.45em;
}

h1 {
    font-size:var(--mofi-1b8);
    line-height:0.94;
    letter-spacing:0.02em;
}

h2 {
    font-size:var(--mofi-c5a);
    line-height:1.02;
}

h3 {
    font-size:var(--mofi-5d9);
    line-height:1.08;
}

h4 {
    font-size:var(--mofi-84b);
    font-weight:700;
    line-height:1.15;
}

h5, h6 {
    font-size:var(--mofi-c08);
    font-weight:700;
    line-height:1.2;
}

p {
    max-width:var(--measure-prose);
    margin-block-end:1.25em;
    color:var(--ink);
    font-size:var(--mofi-c08);
    line-height:1.58;
}

p.lead {
    font-size:var(--mofi-84b);
    line-height:1.42;
    color:var(--ink);
    max-width:var(--measure-wide);
}

small, .text-small {
    font-size:var(--step--1);
    line-height:1.45;
    color:var(--ink-muted);
}

.text-mono {
    font-family:var(--mofi-8c2);
}

.text-meta {
    font-family:var(--mofi-8c2);
    font-size:var(--step--1);
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink-muted);
}

.text-sage {
    color:var(--accent-sage);
}

.text-amber {
    color:var(--accent-amber);
}

.text-oxide {
    color:var(--surface-oxide);
}

.text-soot {
    color:var(--surface-soot);
}

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

em, i {
    font-style:italic;
}

a {
    color:var(--ink);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    text-decoration-color:var(--hairline-strong);
    transition:color var(--dur-fast) var(--ease-industrial),
                            text-decoration-color var(--dur-fast) var(--ease-industrial);
    overflow-wrap:break-word;
}

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

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

ul, ol {
    margin-block-end:1.4em;
    padding-inline-start:1.35em;
    max-width:var(--measure-prose);
}

li {
    margin-block-end:0.4em;
}

li::marker {
    color:var(--accent-amber);
    font-family:var(--mofi-8c2);
}

blockquote {
    border-inline-start:4px solid var(--accent-amber);
    padding-inline-start:var(--space-s);
    padding-block:var(--space-xs);
    margin-block:var(--space-m);
    background-color:var(--surface-oxide);
    color:var(--ink);
    max-width:var(--measure-prose);
    font-size:var(--mofi-c08);
}

code, kbd, samp {
    font-family:var(--mofi-8c2);
    font-size:0.88em;
    background-color:var(--surface-soot);
    color:var(--accent-sage);
    padding:0.12em 0.4em;
    border:1px solid var(--hairline);
}

pre {
    font-family:var(--mofi-8c2);
    font-size:var(--step--1);
    background-color:var(--surface-soot);
    color:var(--ink);
    padding:var(--space-s);
    border:1px solid var(--hairline-strong);
    overflow-x:auto;
    margin-block-end:1.4em;
}

pre code {
    background:none;
    border:none;
    padding:0;
    color:inherit;
}

hr {
    border:none;
    border-block-start:1px solid var(--hairline);
    margin-block:var(--space-l);
    width:100%;
}

.skip-link {
    position:fixed;
    top:8px;
    left:8px;
    z-index:9999;
    background-color:var(--surface-soot);
    color:var(--ink);
    padding:0.75rem 1.25rem;
    font-family:var(--mofi-8c2);
    font-size:var(--step--1);
    text-decoration:none;
    border:2px solid var(--accent-amber);
    transform:translateY(-180%);
    transition:transform var(--dur-fast) var(--ease-industrial);
}

.skip-link:focus {
    transform:translateY(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;
}

/* Off-Center Layout Primitives */
.site-wrapper {
    display:flex;
    flex-direction:column;
    min-height:100vh;
    position:relative;
}

.site-main {
    flex:1 0 auto;
    min-width:0;
    width:100%;
}

.container {
    width:100%;
    max-width:1320px;
    padding-inline:clamp(1.2rem, 3.8vw, 3.8rem);
    margin-inline:0 auto; /* Deliberately off-center aligned to left */
}

.container--full {
    max-width:100%;
    padding-inline:clamp(1.2rem, 3.8vw, 3.8rem);
}

.container--prose {
    max-width:860px;
}

/* Section Composition — The Number Comes First */
.section-measure-lead {
    font-family:var(--mofi-8c2);
    font-size:var(--mofi-2d9);
    font-weight:700;
    line-height:1.05;
    color:var(--accent-amber);
    letter-spacing:-0.01em;
    margin-block-end:0.3em;
    display:block;
}

.section-measure-lead .unit {
    font-size:0.55em;
    color:var(--ink-muted);
    font-weight:400;
    letter-spacing:0.05em;
    text-transform:uppercase;
    margin-left:0.35rem;
}

.section-measure-desc {
    font-size:var(--mofi-84b);
    line-height:1.45;
    color:var(--ink);
    max-width:var(--measure-prose);
    margin-block-end:var(--space-m);
}

/* Full-width image between figures */
.section-full-figure {
    width:100%;
    margin-block:var(--space-l);
    border:1px solid var(--hairline-strong);
    background-color:var(--surface-soot);
}

.section-full-figure img {
    width:100%;
    height:auto;
    aspect-ratio:21 / 9;
    object-fit:cover;
    display:block;
}

@media (max-width: 768px) {
    .section-full-figure img {
        aspect-ratio:16 / 9;
    }
}

.figure-caption-strip {
    padding:0.6rem 1rem;
    background-color:var(--surface-soot);
    border-block-start:1px solid var(--hairline);
    font-family:var(--mofi-8c2);
    font-size:var(--step--2);
    color:var(--ink-muted);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:var(--space-2xs);
}

.icon {
    width:1.15em;
    height:1.15em;
    display:inline-block;
    vertical-align:-0.16em;
    stroke-width:0;
    stroke:currentColor;
    fill:currentColor;
    flex-shrink:0;
}

/* Reduced motion guards */
@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;
    }
    .svg-scroll-draw path,
    .svg-scroll-draw line,
    .svg-scroll-draw polyline {
        stroke-dashoffset:0 !important;
    }
}

:root {
    --ink:#fff;
    --ink-muted:#f8f5f2;
    --accent-amber:#ffe6cc;
}
strong, b {
    color:#fff;
}