/* =============================================================
   Unmarked Navigation — design system
   Pure CSS. No JavaScript. Native document scrolling throughout.

   Identity: asphalt gray + concrete white + US centerline yellow.
   Yellow is separated from the background by LUMINANCE, not hue,
   so it remains distinguishable under all common forms of color
   blindness — and no meaning is ever carried by color alone.

   Accessibility provisions:
   - Light & dark schemes via prefers-color-scheme
   - prefers-contrast: more supported
   - Windows High Contrast / forced-colors supported
   - prefers-reduced-motion respected (smooth anchor scrolling is
     opt-in only; there are no animations to disable)
   - All sizes in rem: respects the user's browser font-size setting
   - Text contrast meets WCAG AAA (7:1) for body text in both schemes
   - Links are always underlined (never color-only)
   - Visible, high-contrast :focus-visible indicators
   - Navigation links have ≥44px touch/click targets
   ============================================================= */

/* ---------- 1. Tokens ---------- */

:root {
    color-scheme: light dark;

    /* Light scheme: concrete & ink, paint used for rules only.
     ink on paper ≈ 16:1 · ink-2 on paper ≈ 7.6:1 (both AAA) */
    --paper: #fafaf8; /* concrete white */
    --ink: #1a1b1e; /* asphalt black */
    --ink-2: #4c4e53; /* secondary text */
    --paint: #c79100; /* centerline yellow, darkened for light bg */
    --edge: #b9b8b3; /* fog-line / road-edge line, weathered-white on light pavement */
    --hairline: #d8d7d2;
    --focus: #1a1b1e;

    --font-display: "Overpass", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Overpass", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono:
        "Overpass Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas,
        monospace;

    --measure: 62ch; /* max line length for comfortable reading */
    --gutter: clamp(1.25rem, 5vw, 3rem);
    --line-h: 3px; /* shared stroke weight: fog lines match the centerline's stripe height */
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark scheme: worn asphalt at night.
       ink on paper ≈ 14:1 · ink-2 ≈ 7.2:1 · paint ≈ 9.5:1 */
        --paper: #1b1c1e;
        --ink: #ededea;
        --ink-2: #adafb4;
        --paint: #f2c230; /* full lane-paint yellow reads well on asphalt */
        --edge: #edede8; /* fog-line white, bright against dark asphalt */
        --hairline: #34363a;
        --focus: #f2c230;
    }
}

/* Users who ask for more contrast get pure poles and heavier rules. */
@media (prefers-contrast: more) {
    :root {
        --paper: #ffffff;
        --ink: #000000;
        --ink-2: #000000;
        --hairline: #000000;
        --edge: #000000;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --paper: #000000;
            --ink: #ffffff;
            --ink-2: #ffffff;
            --hairline: #ffffff;
            --edge: #ffffff;
        }
    }
}

/* ---------- 2. Base ---------- */

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

html {
    /* Smooth scrolling ONLY for same-page anchor jumps (citations),
     ONLY when the user has not requested reduced motion, and it
     never alters normal wheel/keyboard/touch scrolling. */
    scroll-behavior: auto;
}
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 300;
    /* rem/percentage sizing respects user font-size preferences. */
    font-size: 1.0625rem;
    line-height: 1.65; /* ≥1.5 per WCAG 1.4.12 */
    -webkit-text-size-adjust: 100%;
}

/* Reading measure applied to content containers, not the viewport,
   so the page still uses the full window and scrolls natively. */
.site-header,
main,
.site-footer {
    max-width: calc(var(--measure) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

/* ---------- 3. Links & focus ---------- */

a {
    color: inherit; /* color never carries meaning */
    text-decoration: underline; /* underline always present   */
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.2em;
}
a:hover {
    text-decoration-thickness: 0.14em;
}

/* Visible keyboard focus, high contrast in both schemes. */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Skip link: hidden until keyboard focus reaches it. */
.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -100%;
    z-index: 10;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    text-decoration: none;
}
.skip-link:focus-visible {
    top: 0.75rem;
}

/* ---------- 4. Header ---------- */

.site-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 1.5rem 2rem;
}

/* Fog line: the solid edge marking at the very start of the road,
   right where the page begins. Fades left-to-right, same as every
   other line on the page. */
.site-header::after {
    content: "";
    position: absolute;
    left: 2.25rem;
    right: 0;
    bottom: 0;
    height: var(--line-h);
    background-image: linear-gradient(
        to right,
        var(--edge) 0%,
        var(--edge) 55%,
        transparent 96%
    );
}
@media (prefers-contrast: more) {
    .site-header::after {
        background-image: none;
        background-color: var(--edge);
    }
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    min-height: 44px; /* touch target */
}
.wordmark-text {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
}
.wordmark-text b {
    font-weight: 800;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* WCAG 2.5.8 target size */
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

/* ---------- 5. Hero ---------- */

.hero {
    padding-block: clamp(3rem, 10vh, 6.5rem) clamp(2.5rem, 7vh, 4.5rem);
}

/* Status tag: honest about stage, promises nothing. */
.tag {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 1.75rem;
}

h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 1.2rem + 5.5vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin: 0 0 1.5rem;
    text-wrap: balance;
}

.lede {
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.35rem);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 48ch;
    text-wrap: pretty;
}

/* ---------- 6. Signature: the vanishing double yellow ----------
   A solid no-passing double line, sitting directly under the hero
   heading (#hero-heading) for emphasis, that fades out to the right:
   the markings end, the system continues. This is the one bold move
   on the page — every other rule/divider stays quiet by comparison.
   Purely decorative, so it carries no semantic information and is
   safe to hide from assistive technology. */

.centerline {
    --gap: 4px;
    height: calc(var(--line-h) * 2 + var(--gap));
    margin-block: 1.25rem 1.75rem;
    background-image:
        linear-gradient(var(--paint), var(--paint)),
        linear-gradient(var(--paint), var(--paint));
    background-repeat: no-repeat;
    background-size:
        100% var(--line-h),
        100% var(--line-h);
    background-position:
        top left,
        bottom left;
    -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 88%);
    mask-image: linear-gradient(to right, #000 30%, transparent 88%);
}

/* ---------- 7. Sections ---------- */

.section {
    position: relative;
    padding-block: clamp(2.25rem, 6vh, 3.75rem);
}

/* Dashed lane separator: the broken white line between travel lanes,
   standing in as the section-to-section rule. Same stroke weight as
   the centerline's stripes, fading left-to-right in the same
   direction as everything else on the page — one road, fading away. */
.section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--line-h);
    background-image: repeating-linear-gradient(
        to right,
        var(--edge) 0 1.5rem,
        transparent 1.5rem 2.5rem
    );
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 96%);
    mask-image: linear-gradient(to right, #000 55%, transparent 96%);
}
.section:first-of-type::before {
    content: none;
}

/* Full-strength, solid, non-dashed rule when the user has asked for
   more contrast — a broken, faded line is a weaker structural cue
   at exactly the moment more structure is being requested. */
@media (prefers-contrast: more) {
    .section::before {
        background-image: none;
        -webkit-mask-image: none;
        mask-image: none;
        background-color: var(--edge);
    }
}

h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}

/* ---------- 8. Architecture modules (definition list) ---------- */

.modules {
    margin: 1.75rem 0;
    display: grid;
    gap: 1.5rem;
}

.module {
    border-left: 4px solid var(--paint);
    padding-left: 1.25rem;
}

.module dt {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.module dd {
    margin: 0;
    color: var(--ink-2);
}

.section-more {
    margin-top: 1.5rem;
}

/* ---------- 9. Citations ---------- */

.fn a {
    font-family: var(--font-mono);
    font-size: 0.72em;
    padding: 0.1em 0.15em; /* enlarges the click target */
    text-decoration-thickness: 0.05em;
}

/* Highlight a reference when jumped to, without color being the
   only cue — the jump itself and the list position also convey it. */
:target {
    background: color-mix(in srgb, var(--paint) 18%, transparent);
    outline: 2px dashed var(--paint);
    outline-offset: 4px;
}

.ref-list {
    margin: 0;
    padding-left: 1.5rem;
    font-size: 0.95rem;
    color: var(--ink-2);
}
.ref-list li {
    margin-bottom: 0.8rem;
    padding-left: 0.35rem;
}
.ref-list::marker,
.ref-list li::marker {
    font-family: var(--font-mono);
}

.backref {
    font-family: var(--font-mono);
    text-decoration: none;
    padding: 0.15em 0.35em;
    border: 1px solid var(--hairline);
    border-radius: 3px;
    margin-left: 0.35rem;
}
.backref:hover {
    border-color: var(--ink);
}

/* ---------- 10. Footer ---------- */

.site-footer {
    position: relative;
    padding-block: 2.5rem 3rem;
    margin-top: 2rem;
}

/* Fog line: the solid edge marking at the very start of the road,
   right where the page begins. Fades left-to-right, same as every
   other line on the page. */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2.25rem;
    right: 0;
    height: var(--line-h);
    background-image: linear-gradient(
        to right,
        var(--edge) 0%,
        var(--edge) 55%,
        transparent 96%
    );
}

@media (prefers-contrast: more) {
    .site-footer::before {
        background-image: none;
        background-color: var(--edge);
    }
}

.colophon {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ink-2);
    margin-top: 1.25rem;
}

/* ---------- 11. Forced colors (Windows High Contrast) ----------
   Backgrounds and gradients are stripped by the OS; keep structure
   legible with system colors and real borders. */

@media (forced-colors: active) {
    .tag::before,
    .eyebrow::before {
        background: CanvasText;
        forced-color-adjust: none;
    }
    .centerline {
        background-image: none;
        background-color: CanvasText;
        -webkit-mask-image: none;
        mask-image: none;
        height: 3px;
        forced-color-adjust: none;
    }
    .site-header::after,
    .section::before,
    .site-footer::before {
        background-image: none;
        -webkit-mask-image: none;
        mask-image: none;
        background-color: CanvasText;
        forced-color-adjust: none;
    }
    .module {
        border-left-color: CanvasText;
    }
    :target {
        outline: 2px dashed Highlight;
        background: transparent;
    }
}

/* ---------- 12. Print ---------- */

@media print {
    .skip-link,
    .centerline {
        display: none;
    }
    body {
        color: #000;
        background: #fff;
    }
    a {
        text-decoration: none;
    }
    .ref-list a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }
}