/* ==========================================================================
   MUMFORD ENGINEERING — Design System
   World Café Synthesis: 17 expert tables, Iteration 1

   Typography: Instrument Serif (display) + Source Serif 4 (body) + IBM Plex Mono (technical)
   Palette: Warm vellum, single amber accent, restrained green/cyan
   Motif: Engineering drawings, workshop journal, technical annotations
   ========================================================================== */

/* ===== Custom Properties — Light Mode (Default) ===== */
:root {
    /* Surfaces */
    --bg-primary: #F2EDE8;       /* Vellum */
    --bg-secondary: #EAE4DD;     /* Parchment */
    --bg-card: #FDFBF8;          /* Warm white */
    --bg-card-solid: #FFFFFF;

    /* Text */
    --text-primary: #2B2926;     /* Carbon */
    --text-secondary: #5C5856;   /* Graphite */
    --text-tertiary: #706B68;    /* Darkened from #8A8581 for AA (4.52:1 on vellum) */

    /* Brand accents */
    --accent-warm: #B8860B;      /* Workshop Amber — decorative, borders, large text only */
    --accent-warm-text: #8B6508; /* Workshop Amber — AA-safe for normal text on vellum (4.56:1) */
    --accent-green: #2D5F3A;     /* Defender Green */
    --accent-cyan: #1A6B7A;      /* Blueprint Cyan */
    --accent-warm-muted: #8A6608; /* Amber muted — AA-safe (4.53:1) */

    /* Borders & rules */
    --border: rgba(43, 41, 38, 0.10);
    --border-strong: rgba(43, 41, 38, 0.20);
    --rule: rgba(43, 41, 38, 0.08);

    /* Typography */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;
    --font-nav: 'IBM Plex Mono', ui-monospace, monospace;

    /* Type scale — Perfect Fourth (1.333) */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1.0625rem; /* 17px — serif-optimized base */
    --text-md: 1.125rem;    /* 18px */
    --text-lg: 1.333rem;    /* ~21px */
    --text-xl: 1.777rem;    /* ~28px */
    --text-2xl: 2.369rem;   /* ~38px */
    --text-3xl: 3.157rem;   /* ~50px */

    /* Layout */
    --nav-height: 60px;
    --container-max: 1100px;
    --radius: 3px;
    --radius-lg: 6px;

    /* Motion */
    --ease-mechanical: cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration-fast: 0.2s;
    --duration-base: 0.35s;
    --duration-slow: 0.6s;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(43, 41, 38, 0.06);
    --shadow-md: 0 2px 8px rgba(43, 41, 38, 0.08);
    --shadow-lg: 0 4px 16px rgba(43, 41, 38, 0.10);
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #1C1A17;
        --bg-secondary: #242120;
        --bg-card: #2A2725;
        --bg-card-solid: #302D2A;
        --text-primary: #E8E4E0;
        --text-secondary: #A09890;
        --text-tertiary: #8A8177;    /* Lightened from #706860 for AA (4.54:1) */
        --accent-warm: #D4A030;
        --accent-warm-text: #D4A030; /* Already passes AA in dark mode */
        --accent-green: #45915B;     /* Lightened from #3A7A4D for AA (4.51:1) */
        --accent-cyan: #2B8E9D;      /* Lightened from #2A8B9A for AA (4.51:1) */
        --accent-warm-muted: #E8B84D;
        --border: rgba(255, 255, 255, 0.08);
        --border-strong: rgba(255, 255, 255, 0.15);
        --rule: rgba(255, 255, 255, 0.06);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.30);
    }
}

[data-theme="dark"] {
    --bg-primary: #1C1A17;
    --bg-secondary: #242120;
    --bg-card: #2A2725;
    --bg-card-solid: #302D2A;
    --text-primary: #E8E4E0;
    --text-secondary: #A09890;
    --text-tertiary: #8A8177;
    --accent-warm: #D4A030;
    --accent-warm-text: #D4A030;
    --accent-green: #45915B;
    --accent-cyan: #2B8E9D;
    --accent-warm-muted: #E8B84D;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    --rule: rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.30);
}

/* ===== Reset & Base ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--text-primary);
    background: var(--bg-primary);
    font-feature-settings: "kern" 1, "pnum" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: rgba(184, 134, 11, 0.25);
    color: var(--text-primary);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--accent-cyan);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-mechanical);
}

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

/* ===== Accessibility ===== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 1000;
    padding: 8px 16px;
    background: var(--accent-warm-text);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: var(--radius);
}

.skip-link:focus {
    top: 8px;
    color: #FFFFFF;
}

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

/* ===== Container ===== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Navigation ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    transition: background var(--duration-base) var(--ease-mechanical),
                box-shadow var(--duration-base) var(--ease-mechanical);
}

.site-header.scrolled {
    background: rgba(242, 237, 232, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--border);
}

.nav-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--accent-warm);
    transition: none;
    z-index: 1;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    height: var(--nav-height);
}

.nav-logo {
    display: flex;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    color: var(--text-primary);
    text-transform: uppercase;
}

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

.nav-logo-bold {
    font-weight: 600;
}

.nav-logo-light {
    font-weight: 400;
    color: var(--text-secondary);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 28px;
}

.nav-link {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 0;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--accent-warm);
    transition: width var(--duration-base) var(--ease-mechanical);
}

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

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Section indicator strip */
.section-indicator {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 24px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: rgba(242, 237, 232, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity var(--duration-base) var(--ease-mechanical),
                transform var(--duration-base) var(--ease-mechanical);
    pointer-events: none;
}

.section-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.hamburger-bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--text-primary);
    border-radius: 1px;
    transition: transform var(--duration-base) var(--ease-mechanical),
                opacity var(--duration-base) var(--ease-mechanical);
    transform-origin: center;
}

.hamburger.active .hamburger-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.hamburger.active .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ===== Hero ===== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(var(--nav-height) + 60px) 24px 80px;
    background: var(--bg-primary);
    overflow: hidden;
}

/* Engineering graph paper — major/minor grid + margin line */
.hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg, transparent, transparent 99px,
            rgba(43, 41, 38, 0.06) 99px, rgba(43, 41, 38, 0.06) 100px
        ),
        repeating-linear-gradient(
            90deg, transparent, transparent 99px,
            rgba(43, 41, 38, 0.06) 99px, rgba(43, 41, 38, 0.06) 100px
        ),
        repeating-linear-gradient(
            0deg, transparent, transparent 19px,
            rgba(43, 41, 38, 0.025) 19px, rgba(43, 41, 38, 0.025) 20px
        ),
        repeating-linear-gradient(
            90deg, transparent, transparent 19px,
            rgba(43, 41, 38, 0.025) 19px, rgba(43, 41, 38, 0.025) 20px
        ),
        linear-gradient(
            90deg, transparent 59px,
            rgba(184, 134, 11, 0.06) 59px, rgba(184, 134, 11, 0.06) 60px,
            transparent 60px
        );
}

/* Title block outline in bottom-right corner */
.hero-grid::after {
    content: '';
    position: absolute;
    bottom: 40px;
    right: 32px;
    width: 180px;
    height: 60px;
    border: 1px solid rgba(43, 41, 38, 0.05);
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            transparent 19px, rgba(43, 41, 38, 0.04) 19px,
            rgba(43, 41, 38, 0.04) 20px, transparent 20px),
        linear-gradient(to bottom,
            transparent 39px, rgba(43, 41, 38, 0.04) 39px,
            rgba(43, 41, 38, 0.04) 40px, transparent 40px),
        linear-gradient(to right,
            transparent 71px, rgba(43, 41, 38, 0.04) 71px,
            rgba(43, 41, 38, 0.04) 72px, transparent 72px);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 680px;
}

.hero-heading {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
    font-weight: 400;
    line-height: 1.05;
    margin-bottom: 24px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-feature-settings: "kern" 1, "onum" 1, "liga" 1;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    position: relative;
    padding-top: 20px;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12),
        0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Typographic rule above the heading */
.hero-heading::before {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background: var(--accent-warm);
    margin-bottom: 16px;
    opacity: 0.7;
}

.hero-sub {
    font-family: var(--font-body);
    font-size: clamp(var(--text-base), 2.5vw, var(--text-md));
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 40px;
    max-width: 540px;
}

.hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Engineering drawing annotation — hero accent */
.hero-annotation {
    position: absolute;
    bottom: 60px;
    right: 40px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    opacity: 0.5;
}

.hero-annotation::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--text-tertiary);
    margin-bottom: 8px;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-mechanical);
    text-decoration: none;
    text-transform: uppercase;
}

.btn-primary {
    background: var(--accent-warm-text);
    color: #FFFFFF;
    border-color: var(--accent-warm-text);
}

.btn-primary:hover {
    background: transparent;
    color: var(--accent-warm-text);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn-secondary:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* ===== Sections ===== */
.section {
    padding: 100px 0;
    position: relative;
}

.section-alt {
    background: var(--bg-secondary);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 12px;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    font-feature-settings: "kern" 1, "onum" 1, "liga" 1;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-secondary);
    max-width: 580px;
    margin-bottom: 48px;
    line-height: 1.7;
}

/* Engineering drawing dimension-line divider */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 48px;
    right: 48px;
    height: 9px;
    transform: translateY(-4px);
    background: none;
    pointer-events: none;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    background-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent 4px,
        var(--rule) 4px,
        var(--rule) 5px,
        transparent 5px
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.section:first-of-type::before {
    display: none;
}

/* Section reference number — engineering drawing style */
.section-ref {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
    font-feature-settings: "kern" 1, "tnum" 1, "liga" 0;
}

/* ===== About ===== */
.about-grid {
    display: grid;
    gap: 48px;
}

.about-text p {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.about-text p:first-child::first-line {
    color: var(--text-primary);
    font-weight: 500;
}

.about-text p:last-child {
    margin-bottom: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
    transition: border-color var(--duration-base) var(--ease-mechanical),
                background-color var(--duration-base) var(--ease-mechanical);
}

/* Gauge tick mark above number */
.stat-card::before {
    content: '';
    display: block;
    width: 1px;
    height: 10px;
    background: var(--accent-warm);
    margin: 0 auto 8px;
    opacity: 0.6;
}

.stat-card:hover {
    border-color: var(--border-strong);
}

.stat-card:hover::before {
    opacity: 1;
    transition: opacity var(--duration-fast) var(--ease-mechanical);
}

.stat-card:hover .stat-number::after {
    width: 36px;
}

.stat-number {
    font-size: var(--text-xl);
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--accent-warm);
    line-height: 1;
    margin-bottom: 6px;
    font-feature-settings: "kern" 1, "tnum" 1, "liga" 0;
    font-variant-numeric: tabular-nums;
    position: relative;
    padding-bottom: 8px;
}

/* Gauge rule under stat number */
.stat-number::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 1px;
    background: var(--border-strong);
    transition: width var(--duration-base) var(--ease-mechanical);
}

.stat-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.stat-detail {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* ===== Defender Cards — Spec Sheet Style ===== */
.defender-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

.defender-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent-green);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    transition: border-color var(--duration-base) var(--ease-mechanical),
                box-shadow var(--duration-base) var(--ease-mechanical),
                background-color var(--duration-base) var(--ease-mechanical);
}

/* Corner dimension mark — bottom-right */
.defender-card::before {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 12px;
    height: 12px;
    border-right: 1px solid var(--text-tertiary);
    border-bottom: 1px solid var(--text-tertiary);
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

.defender-card:hover {
    border-color: var(--accent-warm);
    box-shadow: var(--shadow-md);
}

.defender-card:hover::before {
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-mechanical);
}

.defender-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 160px;
    background-color: var(--bg-secondary);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 19px,
            rgba(43, 41, 38, 0.04) 19px, rgba(43, 41, 38, 0.04) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px,
            rgba(43, 41, 38, 0.04) 19px, rgba(43, 41, 38, 0.04) 20px);
    color: var(--accent-warm);
}

/* Corner dimension mark — top-left */
.defender-card-img::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 12px;
    height: 12px;
    border-left: 1px solid var(--text-tertiary);
    border-top: 1px solid var(--text-tertiary);
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

/* Data reference annotation on card */
.defender-card-img[data-ref]::after {
    content: attr(data-ref);
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    opacity: 0.6;
}

.defender-card-body {
    padding: 20px 24px;
}

.defender-card-body h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    font-feature-settings: "kern" 1, "onum" 1, "liga" 1;
}

.defender-card-body p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.65;
}

.badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 2px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge-available {
    background: rgba(45, 95, 58, 0.08);
    color: var(--accent-green);
    border: 1px solid rgba(45, 95, 58, 0.20);
}

.badge-dev {
    background: rgba(139, 101, 8, 0.08);
    color: var(--accent-warm-text);
    border: 1px solid rgba(139, 101, 8, 0.20);
}

.defender-note {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    font-style: italic;
}

/* ===== Software Cards — Blueprint Style ===== */
.software-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.software-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent-cyan);
    border-radius: var(--radius);
    color: var(--text-primary);
    position: relative;
    transition: border-color var(--duration-base) var(--ease-mechanical),
                box-shadow var(--duration-base) var(--ease-mechanical),
                background-color var(--duration-base) var(--ease-mechanical);
}

.software-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

.software-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(26, 107, 122, 0.06);
    border: 1px solid rgba(26, 107, 122, 0.12);
    border-radius: var(--radius);
    color: var(--accent-cyan);
    margin-bottom: 20px;
    position: relative;
}

/* Data plate divider rule under icon */
.software-card-icon::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 32px;
    height: 1px;
    background: var(--border-strong);
    transition: width var(--duration-base) var(--ease-mechanical),
                background var(--duration-base) var(--ease-mechanical);
}

.software-card:hover .software-card-icon::after {
    width: 48px;
    background: var(--accent-cyan);
}

.software-card h3 {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 500;
    margin-bottom: 8px;
}

.software-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 16px;
    flex-grow: 1;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-tertiary);
    letter-spacing: 0.03em;
}

.software-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--accent-cyan);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ===== Writing ===== */
.writing-content {
    max-width: 600px;
}

.writing-coming {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.topic-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
}

.pill {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 400;
    padding: 6px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    transition: border-color var(--duration-fast) var(--ease-mechanical),
                color var(--duration-fast) var(--ease-mechanical);
}

.pill:hover {
    border-color: var(--accent-warm);
    color: var(--accent-warm);
}

.writing-quote {
    border-left: 2px solid var(--accent-warm);
    padding: 20px 28px;
    background: rgba(184, 134, 11, 0.03);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.writing-quote p {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--accent-warm-muted);
    line-height: 1.5;
}

/* ===== Honeypot ===== */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* ===== Contact ===== */
.contact-grid {
    display: grid;
    gap: 48px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.form-group input,
.form-group textarea {
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-card-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--duration-fast) var(--ease-mechanical);
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent-cyan);
    outline: 2px solid var(--accent-cyan);
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(26, 107, 122, 0.10);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-tertiary);
    opacity: 0.6;
}

.btn-submit {
    align-self: flex-start;
}

#form-status {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    min-height: 24px;
}

#form-status.success {
    color: var(--accent-green);
}

#form-status.error {
    color: #C53030;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.contact-detail svg {
    flex-shrink: 0;
    color: var(--accent-warm);
}

.contact-detail a {
    color: var(--text-secondary);
}

.contact-detail a:hover {
    color: var(--accent-cyan);
}

/* ===== Footer ===== */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 28px 0;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-copy {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: var(--text-tertiary);
    transition: color var(--duration-fast) var(--ease-mechanical);
}

.footer-links a:hover {
    color: var(--accent-cyan);
}

/* ===== Scroll Side Rail ===== */
.scroll-rail {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-mechanical);
    pointer-events: none;
}

.scroll-rail--visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-rail__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: background var(--duration-fast) var(--ease-mechanical),
                transform var(--duration-fast) var(--ease-mechanical);
}

.scroll-rail__dot:hover {
    background: var(--accent-warm);
    transform: scale(1.3);
}

.scroll-rail__dot--active {
    background: var(--accent-warm);
}

/* ===== Reveal Animations ===== */
.reveal-ready {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-mechanical),
                transform var(--duration-slow) var(--ease-mechanical);
}

.reveal-ready.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for sequential reveals */
.reveal-ready:nth-child(2) { transition-delay: 0.08s; }
.reveal-ready:nth-child(3) { transition-delay: 0.16s; }
.reveal-ready:nth-child(4) { transition-delay: 0.24s; }

/* Section-specific reveal variants */
.reveal-title {
    transform: translateY(12px);
}

.reveal-title.revealed {
    transform: translateY(0);
}

/* Legacy .fade-in compat */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-mechanical),
                transform var(--duration-slow) var(--ease-mechanical);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3D tilt for cards (JS sets --tilt-x, --tilt-y, --tilt-scale) */
.defender-card,
.software-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --tilt-scale: 1;
    transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--tilt-scale));
    transform-style: preserve-3d;
    will-change: transform;
}

/* ===== Paper Grain Texture — Section-Alt ===== */
.section-alt {
    position: relative;
}

.section-alt::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        repeating-linear-gradient(135deg, transparent, transparent 3px,
            rgba(43, 41, 38, 0.012) 3px, rgba(43, 41, 38, 0.012) 4px),
        repeating-linear-gradient(45deg, transparent, transparent 2px,
            rgba(43, 41, 38, 0.008) 2px, rgba(43, 41, 38, 0.008) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 5px,
            rgba(43, 41, 38, 0.006) 5px, rgba(43, 41, 38, 0.006) 6px),
        radial-gradient(ellipse 60% 40% at 30% 50%,
            rgba(184, 134, 11, 0.012), transparent 70%),
        radial-gradient(ellipse 50% 60% at 70% 40%,
            rgba(26, 107, 122, 0.008), transparent 60%);
    mix-blend-mode: multiply;
}

.section-alt > .container {
    position: relative;
    z-index: 1;
}

/* ===== Topographic Contour Lines — About ===== */
#about {
    position: relative;
    overflow: hidden;
}

#about::after {
    content: '';
    position: absolute;
    inset: -20% -10%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 420px 380px at 15% 25%,
            transparent 58%, rgba(43, 41, 38, 0.025) 59%,
            rgba(43, 41, 38, 0.025) 60%, transparent 61%,
            transparent 72%, rgba(43, 41, 38, 0.018) 73%,
            rgba(43, 41, 38, 0.018) 74%, transparent 75%),
        radial-gradient(ellipse 350px 300px at 75% 45%,
            transparent 48%, rgba(43, 41, 38, 0.020) 49%,
            rgba(43, 41, 38, 0.020) 50%, transparent 51%,
            transparent 66%, rgba(43, 41, 38, 0.015) 67%,
            rgba(43, 41, 38, 0.015) 68%, transparent 69%),
        radial-gradient(ellipse 220px 200px at 25% 70%,
            transparent 40%, rgba(43, 41, 38, 0.022) 41%,
            rgba(43, 41, 38, 0.022) 42%, transparent 43%,
            transparent 58%, rgba(43, 41, 38, 0.016) 59%,
            rgba(43, 41, 38, 0.016) 60%, transparent 61%),
        radial-gradient(ellipse 600px 500px at 50% 55%,
            transparent 50%, rgba(43, 41, 38, 0.012) 51%,
            rgba(43, 41, 38, 0.012) 52%, transparent 53%,
            transparent 70%, rgba(43, 41, 38, 0.008) 71%,
            rgba(43, 41, 38, 0.008) 72%, transparent 73%);
    opacity: 0.9;
}

#about > .container {
    position: relative;
    z-index: 1;
}

/* ===== Hero Entrance Animations ===== */
.hero-heading {
    animation: hero-heading-enter 0.8s var(--ease-mechanical) 0.15s both;
}

.hero-sub {
    animation: hero-sub-enter 0.65s var(--ease-mechanical) 0.55s both;
}

.hero-cta {
    animation: hero-cta-enter 0.55s var(--ease-mechanical) 0.85s both;
}

.hero-annotation {
    animation: hero-annotation-enter 0.5s var(--ease-mechanical) 1.1s both;
}

@keyframes hero-heading-enter {
    from { opacity: 0; transform: translateX(-40px) rotate(-1.5deg); }
    to { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes hero-sub-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-cta-enter {
    from { opacity: 0; transform: scale(0.88); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes hero-annotation-enter {
    from { opacity: 0; }
    to { opacity: 0.5; }
}

/* ===== Scroll Hint Chevron ===== */
.hero::after {
    content: '';
    position: absolute;
    bottom: 28px;
    left: 50%;
    width: 20px;
    height: 20px;
    border-left: 1.5px solid var(--text-tertiary);
    border-bottom: 1.5px solid var(--text-tertiary);
    border-right: none;
    border-top: none;
    transform: translateX(-50%) rotate(-45deg);
    pointer-events: none;
    z-index: 2;
    animation:
        scroll-hint-appear 0.5s var(--ease-mechanical) 1.3s both,
        scroll-hint-bob 2s var(--ease-mechanical) 1.8s infinite;
    opacity: clamp(0, calc(0.45 - var(--scroll-pct, 0) * 9), 0.45);
}

@keyframes scroll-hint-bob {
    0%, 100% { transform: translateX(-50%) rotate(-45deg) translateY(0); }
    50% { transform: translateX(-50%) rotate(-45deg) translateY(6px); }
}

@keyframes scroll-hint-appear {
    from { opacity: 0; }
    to { opacity: 0.45; }
}

/* ===== Hero Annotation Title Block ===== */
.hero-annotation {
    padding: 10px 14px;
    border: 1.5px solid var(--text-tertiary);
    outline: 1px solid var(--text-tertiary);
    outline-offset: 3px;
    min-width: 180px;
    text-align: left;
    line-height: 1.5;
}

.hero-annotation::before {
    display: none;
}

/* Compass arrow */
.hero-annotation::after {
    content: '';
    position: absolute;
    top: -20px;
    right: 14px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 12px solid var(--text-tertiary);
    opacity: 0.5;
}

/* ===== Responsive: 768px+ ===== */
@media (min-width: 768px) {
    .container {
        padding: 0 40px;
    }

    .hamburger {
        display: none;
    }

    .hero-content {
        max-width: 720px;
    }

    .about-grid {
        grid-template-columns: 1.5fr 1fr;
        align-items: start;
    }

    .defender-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .software-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1.5fr 1fr;
        align-items: start;
    }
}

/* ===== Responsive: <768px ===== */
@media (max-width: 767px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(242, 237, 232, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
        transform: translateY(-120%);
        transition: transform 0.3s var(--ease-mechanical);
        z-index: 99;
    }

    .nav-menu.open {
        transform: translateY(0);
    }

    .nav-link {
        display: block;
        padding: 14px 24px;
        font-size: var(--text-sm);
    }

    .nav-link::after {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .section {
        padding: 64px 0;
    }

    .section-subtitle {
        margin-bottom: 32px;
    }

    .scroll-rail {
        display: none;
    }

    .hero-annotation {
        display: none;
    }

    .section::before {
        left: 24px;
        right: 24px;
    }

    .hero-grid::after {
        display: none;
    }

    .hero::after {
        bottom: 20px;
        width: 16px;
        height: 16px;
    }
}

/* ===== Responsive: 1024px+ ===== */
@media (min-width: 1024px) {
    .software-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== Dark Mode Supplement ===== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-input: #242120;
        --bg-input-focus: #2A2725;
    }

    :root:not([data-theme="light"]) ::selection {
        background: rgba(212, 160, 48, 0.30);
        color: #E8E4E0;
    }

    :root:not([data-theme="light"]) .site-header.scrolled {
        background: rgba(28, 26, 23, 0.88);
        backdrop-filter: blur(12px) saturate(1.2);
        -webkit-backdrop-filter: blur(12px) saturate(1.2);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    :root:not([data-theme="light"]) .section-indicator {
        background: rgba(28, 26, 23, 0.85);
        backdrop-filter: blur(8px) saturate(1.2);
        -webkit-backdrop-filter: blur(8px) saturate(1.2);
    }

    :root:not([data-theme="light"]) .nav-menu {
        background: rgba(28, 26, 23, 0.98);
    }

    :root:not([data-theme="light"]) .hero-heading {
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.04),
            0 -1px 0 rgba(0, 0, 0, 0.30);
    }

    :root:not([data-theme="light"]) .hero-grid {
        background:
            repeating-linear-gradient(0deg, transparent, transparent 99px,
                rgba(255, 255, 255, 0.045) 99px, rgba(255, 255, 255, 0.045) 100px),
            repeating-linear-gradient(90deg, transparent, transparent 99px,
                rgba(255, 255, 255, 0.045) 99px, rgba(255, 255, 255, 0.045) 100px),
            repeating-linear-gradient(0deg, transparent, transparent 19px,
                rgba(255, 255, 255, 0.018) 19px, rgba(255, 255, 255, 0.018) 20px),
            repeating-linear-gradient(90deg, transparent, transparent 19px,
                rgba(255, 255, 255, 0.018) 19px, rgba(255, 255, 255, 0.018) 20px),
            linear-gradient(90deg, transparent 59px,
                rgba(212, 160, 48, 0.05) 59px, rgba(212, 160, 48, 0.05) 60px,
                transparent 60px);
    }

    :root:not([data-theme="light"]) .hero-grid::after {
        border-color: rgba(255, 255, 255, 0.04);
    }

    :root:not([data-theme="light"]) .hero::after {
        border-color: var(--text-secondary);
    }

    :root:not([data-theme="light"]) .defender-card:hover,
    :root:not([data-theme="light"]) .software-card:hover {
        background: #302D2A;
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    :root:not([data-theme="light"]) .stat-card:hover {
        background: #302D2A;
    }

    :root:not([data-theme="light"]) .defender-card-img {
        background-image:
            repeating-linear-gradient(0deg, transparent, transparent 19px,
                rgba(255, 255, 255, 0.03) 19px, rgba(255, 255, 255, 0.03) 20px),
            repeating-linear-gradient(90deg, transparent, transparent 19px,
                rgba(255, 255, 255, 0.03) 19px, rgba(255, 255, 255, 0.03) 20px);
    }

    :root:not([data-theme="light"]) .writing-quote {
        background: rgba(212, 160, 48, 0.06);
    }

    :root:not([data-theme="light"]) .section-alt::after {
        background:
            repeating-linear-gradient(135deg, transparent, transparent 3px,
                rgba(255, 255, 255, 0.010) 3px, rgba(255, 255, 255, 0.010) 4px),
            repeating-linear-gradient(45deg, transparent, transparent 2px,
                rgba(255, 255, 255, 0.006) 2px, rgba(255, 255, 255, 0.006) 3px),
            repeating-linear-gradient(90deg, transparent, transparent 5px,
                rgba(255, 255, 255, 0.005) 5px, rgba(255, 255, 255, 0.005) 6px);
        mix-blend-mode: screen;
    }

    :root:not([data-theme="light"]) .form-group input,
    :root:not([data-theme="light"]) .form-group textarea {
        background: #242120;
        border-color: rgba(255, 255, 255, 0.10);
        color: #E8E4E0;
    }

    :root:not([data-theme="light"]) .form-group input:focus,
    :root:not([data-theme="light"]) .form-group textarea:focus {
        background: #2A2725;
        border-color: var(--accent-cyan);
        outline-color: var(--accent-cyan);
        box-shadow: 0 0 0 3px rgba(42, 139, 154, 0.15);
    }

    :root:not([data-theme="light"]) .badge-available {
        background: rgba(58, 122, 77, 0.15);
        color: #5AAE6E;
        border-color: rgba(58, 122, 77, 0.30);
    }

    :root:not([data-theme="light"]) .badge-dev {
        background: rgba(212, 160, 48, 0.12);
        color: #E8B84D;
        border-color: rgba(212, 160, 48, 0.25);
    }

    :root:not([data-theme="light"]) .tag {
        border-color: rgba(255, 255, 255, 0.10);
        color: #A09890;
    }

    :root:not([data-theme="light"]) .software-card-icon {
        background: rgba(42, 139, 154, 0.10);
        border-color: rgba(42, 139, 154, 0.20);
    }

    :root:not([data-theme="light"]) .scroll-rail__dot {
        background: rgba(255, 255, 255, 0.20);
    }

    :root:not([data-theme="light"]) .scroll-rail__dot:hover,
    :root:not([data-theme="light"]) .scroll-rail__dot--active {
        background: #D4A030;
    }

    :root:not([data-theme="light"]) .site-footer {
        border-top-color: rgba(255, 255, 255, 0.06);
    }

    :root:not([data-theme="light"]) #form-status.error {
        color: #FC8181;
    }

    :root:not([data-theme="light"]) #form-status.success {
        color: #5AAE6E;
    }

    :root:not([data-theme="light"]) .btn-primary {
        background: #D4A030;
        border-color: #D4A030;
        color: #1C1A17;
    }

    :root:not([data-theme="light"]) .btn-primary:hover {
        background: transparent;
        color: #D4A030;
    }

    :root:not([data-theme="light"]) .btn-secondary {
        border-color: rgba(255, 255, 255, 0.18);
        color: #E8E4E0;
    }

    :root:not([data-theme="light"]) .btn-secondary:hover {
        border-color: #2B8E9D;
        color: #2B8E9D;
    }

    :root:not([data-theme="light"]) .about-text p:first-child::first-line {
        color: #E8E4E0;
    }
}

/* ==========================================================================
   ITERATION 3 — World Café Synthesis
   Focus: Responsive, Focus States, Section Polish, Micro-interactions, Performance
   ========================================================================== */


/* ===== Focus States & Keyboard Navigation ===== */

/* Skip link — engineering annotation tag on focus */
.skip-link:focus {
    top: 8px;
    outline: 2px solid var(--accent-warm);
    outline-offset: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Custom focus rings — amber for interactive, cyan for form elements */
.btn:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 3px;
    box-shadow: none;
}

.nav-link:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 4px;
    border-radius: 2px;
}

.software-card:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
    border-radius: var(--radius);
}

.scroll-rail__dot:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 4px;
}

.footer-links a:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 4px;
    border-radius: 2px;
}

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

/* Form focus-within: subtle container highlight */
.form-group:focus-within {
    background: rgba(26, 107, 122, 0.02);
    border-radius: var(--radius);
    margin: -4px;
    padding: 4px;
}

.pill:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 2px;
}


/* ===== Writing Section — Engineering Aesthetic ===== */

/* Blockquote: engineer's margin note with drafting annotation */
.writing-quote {
    position: relative;
    margin-top: 0;
    border-left-width: 3px;
}

.writing-quote::after {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 3px;
    height: 8px;
    background: var(--accent-warm);
}

/* "Coming soon" text — drafting annotation feel */
.writing-coming {
    font-style: italic;
    position: relative;
    padding-left: 16px;
    border-left: 1px dashed var(--text-tertiary);
}

/* Topic pills — engineering tolerance tags */
.pill {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border-radius: 0;
    position: relative;
}

/* Small bracket marks on pills — like tolerance notation */
.pill::before {
    content: '[';
    margin-right: 2px;
    opacity: 0.4;
}

.pill::after {
    content: ']';
    margin-left: 2px;
    opacity: 0.4;
}


/* ===== Contact Section — Spec Sheet ===== */

/* Form labels — field identifiers */
.form-group label {
    position: relative;
    padding-bottom: 2px;
}

/* Thin rule under each form group */
.form-group {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
}

.form-group:last-of-type {
    border-bottom: none;
}

/* Contact info — structured info block with dividers */
.contact-info {
    padding: 20px 0;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
}

.contact-detail {
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
}

.contact-detail:last-child {
    border-bottom: none;
}


/* ===== Footer — Engineering Document End ===== */

/* Double-rule top border */
.site-footer {
    border-top: 2px solid var(--border-strong);
    outline: 1px solid var(--border);
    outline-offset: 3px;
    padding-top: 32px;
    position: relative;
}

/* Document termination annotation */
.footer-copy::before {
    content: 'SHEET 1 OF 1  ·  ';
    font-size: 0.5625rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0.5;
}

/* Footer social link hover — engineering drawing style */
.footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 0;
    transition: border-color var(--duration-fast) var(--ease-mechanical),
                color var(--duration-fast) var(--ease-mechanical),
                transform var(--duration-fast) var(--ease-mechanical);
}

.footer-links a:hover {
    border-color: var(--accent-cyan);
    transform: scale(1.08);
}


/* ===== Micro-Interactions ===== */

/* Nav underline — draws from center */
.nav-link::after {
    left: 50%;
    transform: translateX(-50%);
    transition: width var(--duration-base) var(--ease-mechanical);
}

/* Button hover depth */
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Button active state — press-in */
.btn:active {
    transform: translateY(1px);
    box-shadow: none;
    transition-duration: 0.05s;
}

/* Card hover shadow expansion */
.defender-card {
    transition: box-shadow var(--duration-base) var(--ease-mechanical);
}

.defender-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.software-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Tag hover */
.tag {
    transition: border-color var(--duration-fast) var(--ease-mechanical),
                color var(--duration-fast) var(--ease-mechanical);
}

.tag:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* Body text links — dotted to solid underline */
.about-text a,
.writing-content a,
.contact-detail a {
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--duration-fast) var(--ease-mechanical),
                color var(--duration-fast) var(--ease-mechanical);
}

.about-text a:hover,
.writing-content a:hover {
    text-decoration-style: solid;
    color: var(--accent-cyan);
}

/* Scroll progress bar gradient */
.nav-progress {
    background: linear-gradient(90deg, var(--accent-warm), var(--accent-cyan));
}

/* Section reveal stagger — cards delay based on position */
.defender-grid .reveal-ready:nth-child(2) { transition-delay: 0.08s; }
.defender-grid .reveal-ready:nth-child(3) { transition-delay: 0.16s; }
.defender-grid .reveal-ready:nth-child(4) { transition-delay: 0.24s; }
.software-grid .reveal-ready:nth-child(2) { transition-delay: 0.08s; }
.software-grid .reveal-ready:nth-child(3) { transition-delay: 0.16s; }

/* Form input transitions */
.form-group input,
.form-group textarea {
    transition: border-color var(--duration-fast) var(--ease-mechanical),
                box-shadow var(--duration-fast) var(--ease-mechanical),
                background-color var(--duration-fast) var(--ease-mechanical);
}


/* ===== Performance — Font Loading & Compositor Hints ===== */

/* Font rendering optimization */
.hero-heading,
.section-title {
    text-rendering: optimizeLegibility;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* GPU compositor layer hints — scoped to fine-pointer (mouse/trackpad) devices
   that actually use the 3D tilt hover effect. Avoids unnecessary compositor
   layers on touch devices. */
@media (pointer: fine) {
    .defender-card,
    .software-card {
        will-change: transform;
    }
}

.nav-progress {
    will-change: width;
}

/* CSS containment for card containers — limits style recalculation */
.defender-grid,
.software-grid,
.stats-grid {
    contain: layout style;
}

/* Font loading FOUT management */
.fonts-loading .hero-heading,
.fonts-loading .section-title {
    font-family: Georgia, serif;
}

.fonts-loading .form-group label,
.fonts-loading .footer-copy,
.fonts-loading .nav-logo-bold {
    font-family: ui-monospace, 'Cascadia Code', monospace;
}


/* Responsive breakpoints consolidated in RESPONSIVE ENHANCEMENT LAYER below print block */


/* ===== Iteration 3 — Dark Mode Focus & Section Additions ===== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .skip-link:focus {
        outline-color: var(--accent-warm);
    }

    :root:not([data-theme="light"]) .btn:focus-visible {
        outline-color: #D4A030;
    }

    :root:not([data-theme="light"]) .nav-link:focus-visible {
        outline-color: #D4A030;
    }

    :root:not([data-theme="light"]) .form-group:focus-within {
        background: rgba(43, 142, 157, 0.04);
    }

    :root:not([data-theme="light"]) .defender-card:hover,
    :root:not([data-theme="light"]) .software-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
    }

    :root:not([data-theme="light"]) .site-footer {
        border-top-color: var(--border-strong);
        outline-color: var(--border);
    }

    :root:not([data-theme="light"]) .contact-info {
        border-top-color: var(--border-strong);
        border-bottom-color: var(--border-strong);
    }

    :root:not([data-theme="light"]) .writing-coming {
        border-left-color: var(--text-tertiary);
    }
}

[data-theme="dark"] .skip-link:focus {
    outline-color: var(--accent-warm);
}

[data-theme="dark"] .btn:focus-visible {
    outline-color: #D4A030;
}

[data-theme="dark"] .nav-link:focus-visible {
    outline-color: #D4A030;
}

[data-theme="dark"] .form-group:focus-within {
    background: rgba(43, 142, 157, 0.04);
}

[data-theme="dark"] .defender-card:hover,
[data-theme="dark"] .software-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

[data-theme="dark"] .site-footer {
    border-top-color: var(--border-strong);
    outline-color: var(--border);
}

[data-theme="dark"] .contact-info {
    border-top-color: var(--border-strong);
    border-bottom-color: var(--border-strong);
}

[data-theme="dark"] .writing-coming {
    border-left-color: var(--text-tertiary);
}


/* ==========================================================================
   ITERATION 5 — Refinement & Polish Pass
   Content-visibility, fold marks, SVG enhancements, print updates
   ========================================================================== */


/* ===== Content-Visibility — Below-Fold Rendering Optimization ===== */
/* Defer rendering cost for sections below initial viewport */
#defender,
#software,
#writing,
#contact {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 80px;
}


/* ===== Engineering Fold Marks ===== */
/* Small tick marks at section boundaries — like fold marks on engineering prints */
.section-alt::before {
    /* Dimension line at center, fold mark tick at 25% horizontal */
    background-image:
        linear-gradient(to bottom,
            transparent 0, transparent 4px,
            var(--rule) 4px, var(--rule) 5px,
            transparent 5px),
        linear-gradient(to bottom,
            var(--rule) 0, var(--rule) 3px,
            transparent 3px);
    background-position: center top, 25% top;
    background-size: 100% 100%, 1px 3px;
    background-repeat: no-repeat, no-repeat;
}


/* ===== SVG Icon Enhancements ===== */
/* Defender card SVG icons — subtle stroke animation on hover */
.defender-card-img svg {
    transition: stroke var(--duration-base) var(--ease-mechanical),
                transform var(--duration-base) var(--ease-mechanical);
    stroke: var(--text-secondary);
}

.defender-card:hover .defender-card-img svg {
    stroke: var(--accent-green);
    transform: scale(1.05);
}

/* Software card SVG icons — blueprint line drawing effect */
.software-card-icon svg {
    transition: stroke var(--duration-base) var(--ease-mechanical),
                transform var(--duration-base) var(--ease-mechanical);
    stroke: var(--text-secondary);
}

.software-card:hover .software-card-icon svg {
    stroke: var(--accent-cyan);
    transform: scale(1.05);
}

/* Contact detail SVG icons — amber accent shift */
.contact-detail:hover svg {
    stroke: var(--accent-cyan);
    transition: stroke var(--duration-fast) var(--ease-mechanical);
}

/* Footer social SVG icons — engineering hover */
.footer-links a svg {
    transition: stroke var(--duration-fast) var(--ease-mechanical);
}

.footer-links a:hover svg {
    stroke: var(--accent-cyan);
}


/* ===== Dark Mode — Iteration 5 ===== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .defender-card-img svg {
        stroke: var(--text-tertiary);
    }

    :root:not([data-theme="light"]) .defender-card:hover .defender-card-img svg {
        stroke: var(--accent-green);
    }

    :root:not([data-theme="light"]) .software-card-icon svg {
        stroke: var(--text-tertiary);
    }

    :root:not([data-theme="light"]) .software-card:hover .software-card-icon svg {
        stroke: var(--accent-cyan);
    }
}

[data-theme="dark"] .defender-card-img svg {
    stroke: var(--text-tertiary);
}

[data-theme="dark"] .defender-card:hover .defender-card-img svg {
    stroke: var(--accent-green);
}

[data-theme="dark"] .software-card-icon svg {
    stroke: var(--text-tertiary);
}

[data-theme="dark"] .software-card:hover .software-card-icon svg {
    stroke: var(--accent-cyan);
}


/* ==========================================================================
   ITERATION 6 — HTML Co-Evolution
   Title block markup, writing cite, badge status indicators
   ========================================================================== */


/* ===== Badge Status Indicators ===== */
/* Colored dot prefix — engineering status lamp */
.badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.badge-available::before {
    background: var(--accent-green);
}

.badge-dev::before {
    background: var(--accent-warm);
    animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


/* ===== Writing — Citation & CTA ===== */
.writing-cite {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-style: normal;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    margin-top: 12px;
    opacity: 0.7;
}

.btn-writing {
    margin-top: 32px;
}


/* ===== Hero Annotation — Title Block (structured markup) ===== */

.hero-annotation .annotation-north {
    position: absolute;
    top: -32px;
    right: 11px;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-tertiary);
    opacity: 0.5;
}

.hero-annotation .annotation-label {
    font-size: 0.5625rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    opacity: 0.4;
}

.hero-annotation .annotation-dwg {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.10em;
    color: var(--text-tertiary);
}

.hero-annotation .annotation-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--text-tertiary);
    opacity: 0.25;
    margin: 4px 0;
}

.hero-annotation .annotation-value {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}


/* ==========================================================================
   ITERATION 7 — Micro-Typography, Spatial Rhythm, Dark Mode Depth
   Typography refinements, vertical rhythm harmonics, atmospheric dark mode
   ========================================================================== */


/* ===== Micro-Typography ===== */

/* Hanging punctuation on blockquotes — pull punctuation into the margin.
   font-style: italic inherited from existing rule; no need for
   font-variation-settings which would override other axes. */
.writing-quote p {
    hanging-punctuation: first;
    text-indent: -0.45em;
    padding-left: 0.45em;
}

/* Old-style figures for body text — more harmonious with serif type */
.about-text,
.writing-content,
.section-subtitle,
.defender-card-body p {
    font-variant-numeric: oldstyle-nums proportional-nums;
}

/* Tabular lining figures for data displays — alignment matters */
.stat-number,
.section-ref,
.annotation-value,
.annotation-dwg {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Word wrapping for long words to prevent overflow */
.about-text p,
.defender-card-body p {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* First paragraph — small cap lead-in for the about section */
.about-text p:first-child::first-line {
    font-variant-caps: small-caps;
    letter-spacing: 0.03em;
}

/* Hero sub — optical size adjustment for intermediate text */
.hero-sub {
    font-optical-sizing: auto;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Software card titles — tighter tracking at larger mono sizes */
.software-card h3 {
    letter-spacing: -0.01em;
}


/* ===== Spatial Rhythm ===== */

/* Vertical rhythm based on 4px/8px grid. Sub-8px values (2px, 4px)
   are intentional optical adjustments for tight element coupling. */

/* Section title group — pull title closer to section-ref */
.section-ref + .section-title {
    margin-top: -4px;
}

/* Cards — harmonize internal padding rhythm */
.defender-card-body h3 {
    margin-bottom: 4px;
}

.software-card p {
    margin-bottom: 12px;
}

/* Stats section — tighten stat element coupling */
.stat-card::before {
    margin-bottom: 4px;
}

/* Footer — tighter vertical rhythm */
.site-footer {
    padding-bottom: 24px;
}

/* Topic pills container — proportional bottom space */
.topic-pills {
    margin-bottom: 32px;
}


/* ===== Section Visual Flow ===== */

/* Gradient bleed at section-alt boundaries — softens the hard
   color transition between vellum and parchment backgrounds.
   Uses CSS vars so dark mode works automatically. */
.section-alt {
    background: linear-gradient(
        to bottom,
        var(--bg-primary) 0px,
        var(--bg-secondary) 48px,
        var(--bg-secondary) calc(100% - 48px),
        var(--bg-primary) 100%
    );
}

/* Writing section: deeper gradient for distinct feel */
#writing {
    background: linear-gradient(
        to bottom,
        var(--bg-primary) 0px,
        var(--bg-secondary) 64px,
        var(--bg-secondary) calc(100% - 64px),
        var(--bg-primary) 100%
    );
}

/* Dimension line visual connector — vertical thread linking sections */
.section-ref::before {
    content: '';
    display: block;
    width: 1px;
    height: 16px;
    background: var(--rule);
    margin: 0 auto 8px;
}


/* ===== Dark Mode — Atmospheric Depth ===== */

/* Depth and atmosphere beyond color inversion: layered shadow wells,
   inner glow on surfaces, ambient vignetting. Gradient backgrounds
   use CSS vars and don't need dark-mode overrides. */

@media (prefers-color-scheme: dark) {
    /* Inset glow on cards — simulates light leaking from screen edge */
    :root:not([data-theme="light"]) .defender-card,
    :root:not([data-theme="light"]) .software-card {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.03),
            0 1px 3px rgba(0, 0, 0, 0.20);
    }

    :root:not([data-theme="light"]) .stat-card {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.03),
            0 1px 2px rgba(0, 0, 0, 0.15);
    }

    /* Hero depth — vignette effect via radial gradient overlay */
    :root:not([data-theme="light"]) .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(
            ellipse 80% 60% at 50% 40%,
            transparent 40%,
            rgba(0, 0, 0, 0.15) 100%
        );
        pointer-events: none;
        z-index: 1;
    }

    :root:not([data-theme="light"]) .hero-content {
        z-index: 2;
    }

    /* Section-alt — deeper shadow well (gradient inherits via vars) */
    :root:not([data-theme="light"]) .section-alt {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    /* Accent warm glow on primary buttons */
    :root:not([data-theme="light"]) .btn-primary:hover {
        box-shadow: 0 0 12px rgba(212, 160, 48, 0.15);
    }

    /* Card hover — atmospheric lift with accent-tinted ring */
    :root:not([data-theme="light"]) .defender-card:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 8px 24px rgba(0, 0, 0, 0.30),
            0 0 0 1px rgba(45, 95, 58, 0.10);
    }

    :root:not([data-theme="light"]) .software-card:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 8px 24px rgba(0, 0, 0, 0.30),
            0 0 0 1px rgba(26, 107, 122, 0.10);
    }

    /* Scroll rail dots — glow on active */
    :root:not([data-theme="light"]) .scroll-rail__dot--active {
        box-shadow: 0 0 6px rgba(212, 160, 48, 0.30);
    }

    /* Blockquote — warmer glow border in dark */
    :root:not([data-theme="light"]) .writing-quote {
        border-left-color: var(--accent-warm);
    }
}

/* Manual dark theme toggle — atmospheric depth */
[data-theme="dark"] .defender-card,
[data-theme="dark"] .software-card {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 1px 3px rgba(0, 0, 0, 0.20);
}

[data-theme="dark"] .stat-card {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 60% at 50% 40%,
        transparent 40%,
        rgba(0, 0, 0, 0.15) 100%
    );
    pointer-events: none;
    z-index: 1;
}

[data-theme="dark"] .hero-content {
    z-index: 2;
}

[data-theme="dark"] .section-alt {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 0 12px rgba(212, 160, 48, 0.15);
}

[data-theme="dark"] .defender-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(45, 95, 58, 0.10);
}

[data-theme="dark"] .software-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(26, 107, 122, 0.10);
}

[data-theme="dark"] .scroll-rail__dot--active {
    box-shadow: 0 0 6px rgba(212, 160, 48, 0.30);
}

[data-theme="dark"] .writing-quote {
    border-left-color: var(--accent-warm);
}


/* ==========================================================================
   ITERATION 8 — Card Refinement, Footer Signature, Nav Polish
   ========================================================================== */


/* ===== Card Interior Refinement ===== */

/* Defender card — data plate label above card content */
.defender-card-body {
    position: relative;
}

/* Specification text hierarchy — description smaller than title */
.defender-card-body p {
    font-size: 0.8125rem;
    line-height: 1.7;
}

/* Card hover — border top accent intensifies */
.defender-card:hover {
    border-top-color: var(--accent-green);
}

.software-card:hover {
    border-top-color: var(--accent-cyan);
}

/* Tag — active/pressed state for interactivity feel */
.tag:active {
    background: rgba(26, 107, 122, 0.04);
}

/* Software link arrow — slides right on hover */
.software-link svg {
    transition: transform var(--duration-fast) var(--ease-mechanical);
}

.software-card:hover .software-link svg {
    transform: translateX(3px);
}

/* Stat card — subtle amber top accent on hover */
.stat-card:hover {
    border-top: 2px solid var(--accent-warm);
    padding-top: 19px; /* compensate: 2px border + 19px = 1px border + 20px */
}


/* ===== Footer — Engineering Document Closing ===== */

/* Revision info — styled via .footer-rev span in HTML */
.footer-rev {
    font-size: 0.5625rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0.5;
}

/* Footer links — engineering drawing crosshair markers */
.footer-links {
    gap: 16px;
}

.footer-links a {
    position: relative;
}

/* Crosshair marks on footer icon hover */
.footer-links a::before,
.footer-links a::after {
    content: '';
    position: absolute;
    background: var(--accent-cyan);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-mechanical);
}

.footer-links a::before {
    width: 1px;
    height: 6px;
    top: -4px;
    left: 50%;
}

.footer-links a::after {
    width: 6px;
    height: 1px;
    left: -4px;
    top: 50%;
}

.footer-links a:hover::before,
.footer-links a:hover::after {
    opacity: 0.4;
}


/* ===== Nav Polish ===== */

/* Section number display on nav links via data-section attribute */
.nav-link[data-section]::before {
    content: attr(data-section) '.';
    font-size: 0.5625rem;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-right: 4px;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-mechanical);
}

/* Show section number on hover and active state */
.nav-link:hover::before,
.nav-link.active::before {
    opacity: 0.6;
}

/* Active nav link — stronger visual weight */
.nav-link.active {
    font-weight: 600;
}


/* Dark mode: stat/footer use CSS vars, no overrides needed */


/* ==========================================================================
   ITERATION 10 — Visual Storytelling & Section Personality
   ========================================================================== */


/* ===== Hero → About Transition ===== */

/* Subtle gradient at hero bottom creates visual downward momentum */
.hero {
    background: linear-gradient(
        to bottom,
        var(--bg-primary) 0%,
        var(--bg-primary) 85%,
        var(--bg-secondary) 100%
    );
}

/* About section top — pick up the gradient from hero's bottom */
#about {
    background: linear-gradient(
        to bottom,
        var(--bg-secondary) 0px,
        var(--bg-primary) 80px
    );
}


/* ===== Section Personality — Distinct Characters ===== */

/* Defender section: workshop warmth — warmer parchment tint */
#defender .defender-card-img {
    background-color: color-mix(in srgb, var(--bg-secondary) 90%, var(--accent-warm) 10%);
}

/* Software section: blueprint precision — cooler tint */
#software {
    position: relative;
}

#software .software-card-icon {
    background: color-mix(in srgb, transparent 92%, var(--accent-cyan) 8%);
}

/* Writing section: intimate, journal-like */
#writing .writing-quote {
    background: color-mix(in srgb, transparent 96%, var(--accent-warm) 4%);
}

/* Contact section: open, inviting */
#contact .form-group input:focus,
#contact .form-group textarea:focus {
    background: color-mix(in srgb, var(--bg-card-solid) 97%, var(--accent-cyan) 3%);
}


/* ===== Contact Section Warmth ===== */

/* Warmer tone for the contact closing — engineering meets hospitality */
#contact .section-title {
    color: var(--text-primary);
}

/* Contact info — engineering spec sheet but warmer borders */
#contact .contact-info {
    border-color: color-mix(in srgb, var(--border-strong) 80%, var(--accent-warm) 20%);
}

/* Contact detail hover — amber accent for warmth */
#contact .contact-detail:hover {
    background: color-mix(in srgb, transparent 96%, var(--accent-warm) 4%);
    border-radius: var(--radius);
    margin: -4px;
    padding: calc(12px + 4px) 4px;
}


/* ===== Writing Section — Anticipation ===== */

/* Topic pills — subtle entrance animation tied to reveal */
#writing .pill {
    transition: border-color var(--duration-fast) var(--ease-mechanical),
                color var(--duration-fast) var(--ease-mechanical),
                opacity 0.5s var(--ease-mechanical),
                transform 0.5s var(--ease-mechanical);
}

/* Sequential pill reveal delay for narrative pacing */
#writing .topic-pills .pill:nth-child(1) { transition-delay: 0s; }
#writing .topic-pills .pill:nth-child(2) { transition-delay: 0.06s; }
#writing .topic-pills .pill:nth-child(3) { transition-delay: 0.12s; }
#writing .topic-pills .pill:nth-child(4) { transition-delay: 0.18s; }
#writing .topic-pills .pill:nth-child(5) { transition-delay: 0.24s; }

/* Writing "coming soon" — typewriter cursor blink */
.writing-coming::after {
    content: '|';
    display: inline;
    color: var(--accent-warm);
    animation: cursor-blink 1.2s step-end infinite;
    margin-left: 2px;
    font-weight: 300;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.6; }
}


/* ===== Scroll Rail — Section Color Coding ===== */

/* Active dot takes the section's accent color */
.scroll-rail__dot[data-section="Defender"].scroll-rail__dot--active {
    background: var(--accent-green);
}

.scroll-rail__dot[data-section="Software"].scroll-rail__dot--active {
    background: var(--accent-cyan);
}

/* About, Writing, Contact keep warm amber (default) */


/* Dark mode: hero/about gradients use CSS vars, no overrides needed */


/* ==========================================================================
   ITERATION 11 — Wide Screen Polish & Container Behavior
   ========================================================================== */


/* ===== Wide Desktop (1200px+) ===== */
@media (min-width: 1200px) {
    .container,
    .nav-container {
        max-width: var(--container-max);
        padding: 0 48px;
    }

    /* Defender grid: 2-col with generous gaps */
    .defender-grid {
        gap: 28px;
    }

    /* Software grid: 3-col, comfortable breathing room */
    .software-grid {
        gap: 24px;
    }

    /* About grid: wider text column ratio */
    .about-grid {
        grid-template-columns: 1.8fr 1fr;
        gap: 56px;
    }

    /* Contact grid: wider form ratio */
    .contact-grid {
        grid-template-columns: 1.6fr 1fr;
        gap: 56px;
    }

    /* Section padding: full desktop comfort */
    .section {
        padding: 112px 0;
    }

    /* Hero: constrained content width for readability */
    .hero-content {
        max-width: 740px;
    }

    /* Footer: generous padding */
    .site-footer {
        padding-top: 36px;
    }
}


/* ===== Ultra-Wide (1400px+) ===== */
@media (min-width: 1400px) {
    /* Center content more dramatically on very wide screens */
    .hero {
        padding-left: calc((100vw - var(--container-max)) / 2);
        padding-right: calc((100vw - var(--container-max)) / 2);
    }

    /* Scroll rail: push further from edge */
    .scroll-rail {
        right: calc((100vw - var(--container-max)) / 2 - 40px);
    }

    /* Hero annotation: position relative to content container */
    .hero-annotation {
        right: calc((100vw - var(--container-max)) / 2 + 24px);
    }

    /* Section divider: respect container width */
    .section::before {
        left: calc((100vw - var(--container-max)) / 2);
        right: calc((100vw - var(--container-max)) / 2);
    }
}


/* ==========================================================================
   ITERATION 12 — CSS Performance & Final Polish
   ========================================================================== */


/* ===== Critical Rendering Path ===== */

/* Above-the-fold elements: explicit containment to prevent layout shift */
.hero {
    contain: layout;
}

.site-header {
    contain: layout style;
}

/* Footer social icons: prevent CLS with explicit dimensions */
.footer-links a svg {
    width: 18px;
    height: 18px;
}


/* ===== Form Polish ===== */

/* Label color transition on focus */
.form-group:focus-within label {
    color: var(--accent-cyan);
}

/* Textarea: minimum usable height */
.form-group textarea {
    min-height: 120px;
}

/* Submit button: wider hit target */
.btn-submit {
    min-width: 180px;
    justify-content: center;
}


/* ===== Link Underline Refinements ===== */

/* Software card: whole card is a link — underline only on software-link text */
.software-card {
    text-decoration: none;
}

.software-card:hover {
    text-decoration: none;
}

.software-card:hover .software-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}


/* ===== Selection Refinements ===== */

/* Code/mono text: cyan selection instead of amber */
.nav-logo::selection,
.section-ref::selection,
.footer-copy::selection,
.badge::selection,
.tag::selection,
.stat-number::selection {
    background: rgba(26, 107, 122, 0.25);
}


/* ==========================================================================
   ITERATIONS 13-15 — Texture Depth, Typography Hierarchy, Final Harmony
   ========================================================================== */


/* ===== Iteration 13 — Texture & Material Finish ===== */

/* Hero grid: subtle depth via box-shadow inset — paper pressed into surface */
.hero-grid {
    box-shadow: inset 0 0 120px rgba(43, 41, 38, 0.015);
}

/* Defender card image area: hatching pattern overlay for workshop feel */
.defender-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(43, 41, 38, 0.015) 8px,
        rgba(43, 41, 38, 0.015) 9px
    );
    pointer-events: none;
    z-index: 0;
}

/* Override for cards that already use ::after for data-ref */
.defender-card-img[data-ref]::after {
    background: none;
}

/* Software card icon container: blueprint dot grid */
.software-card-icon {
    background-image: radial-gradient(
        circle 0.5px at center,
        rgba(26, 107, 122, 0.08) 0.5px,
        transparent 0.5px
    );
    background-size: 6px 6px;
}

/* Blockquote: paper texture behind quote */
.writing-quote {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 23px,
            rgba(184, 134, 11, 0.015) 23px,
            rgba(184, 134, 11, 0.015) 24px
        );
}


/* ===== Iteration 14 — Typography Hierarchy Refinement ===== */

/* Section title: tighter bottom margin when followed by subtitle */
.section-title + .section-subtitle {
    margin-top: -4px;
}

/* Hero heading: wider letter-spacing at smaller clamp sizes */
@media (max-width: 599px) {
    .hero-heading {
        letter-spacing: -0.01em;
    }
}

@media (min-width: 1200px) {
    .hero-heading {
        letter-spacing: -0.025em;
    }
}

/* Body text: slightly wider measure on desktop for serif readability */
@media (min-width: 1200px) {
    .about-text p {
        max-width: 65ch;
    }

    .section-subtitle {
        max-width: 60ch;
    }
}

/* Defender note: italic with leading dash */
.defender-note {
    padding-inline-start: 16px;
    position: relative;
}

.defender-note::before {
    content: '—';
    position: absolute;
    inset-inline-start: 0;
    color: var(--text-tertiary);
}


/* ===== Iteration 15 — Final Harmony & Cohesion ===== */

/* Consistent border-radius: all cards share the same radius */
.writing-quote {
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Section ref — consistent left alignment with section title */
.section-ref {
    text-align: left;
}

.section-ref::before {
    margin: 0 0 8px;
}

/* Stat cards — consistent vertical alignment */
.stat-card {
    justify-content: flex-start;
    min-height: 120px;
}

/* Software card — consistent bottom padding for link alignment */
.software-card {
    padding-bottom: 24px;
}

/* Footer — link group consistent spacing */
.footer-links {
    align-items: center;
}

/* Global: consistent transition timing on all interactive elements */
.pill,
.tag,
.badge,
.scroll-rail__dot,
.software-link,
.contact-detail a,
.footer-links a {
    transition-timing-function: var(--ease-mechanical);
}


/* ==========================================================================
   ITERATION 16 — Progressive Enhancement: Modern CSS Features
   Container queries, text-wrap, subgrid, scrollbar-gutter.
   All behind @supports — zero breakage in older browsers.
   ========================================================================== */


/* ===== Text Wrapping: Balanced Headings ===== */

/* Prevents awkward single-word last lines in headings */
@supports (text-wrap: balance) {
    .hero-heading,
    .section-title {
        text-wrap: balance;
    }
}

/* Body text: prettier wrapping avoids short orphan lines */
@supports (text-wrap: pretty) {
    .about-text p,
    .defender-note,
    .section-subtitle,
    .writing-quote p {
        text-wrap: pretty;
    }
}


/* ===== Scrollbar Gutter Stability ===== */

/* Prevent layout shift when content goes from no-scroll to scroll */
@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
    }
}


/* ===== Subgrid: Card Content Alignment ===== */

/* When browser supports subgrid, card grids align internal content rows */
@supports (grid-template-rows: subgrid) {
    .defender-grid {
        grid-template-rows: auto;
    }

    .defender-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3; /* image + body + tags */
    }

    .software-grid {
        grid-template-rows: auto;
    }

    .software-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3; /* icon + title/desc + link */
    }
}


/* ===== Container Queries: Card-Level Responsiveness ===== */

@supports (container-type: inline-size) {
    /* Establish containment on card grid parents */
    .defender-grid,
    .software-grid {
        container-type: inline-size;
    }

    /* Defender cards: adjust image height based on grid container width */
    @container (max-width: 400px) {
        .defender-card-img {
            height: 100px;
        }

        .defender-card-body {
            padding: 14px;
        }
    }

    @container (min-width: 700px) {
        .defender-card-img {
            height: 200px;
        }
    }

    /* Software cards: icon scales with container */
    @container (max-width: 300px) {
        .software-card-icon {
            width: 40px;
            height: 40px;
        }

        .software-card {
            padding: 16px;
        }
    }
}


/* ==========================================================================
   ITERATION 17 — Cross-Browser Normalization & Edge Cases
   Autofill styling, focus-within for forms, Safari-specific fixes,
   contrast preferences, logical property completion.
   ========================================================================== */


/* ===== Autofill Styling ===== */

/* Override browser autofill background to match the design system */
.form-group input:-webkit-autofill,
.form-group textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset;
    transition: background-color 5000s ease-in-out 0s;
}


/* ===== Prefers Contrast ===== */

/* Users who prefer more contrast — bump borders and text weight */
@media (prefers-contrast: more) {
    :root {
        --border: rgba(43, 41, 38, 0.25);
        --border-strong: rgba(43, 41, 38, 0.45);
    }

    .defender-card,
    .software-card,
    .stat-card {
        border-width: 2px;
    }

    .section-title {
        font-weight: 600;
    }

    .nav-link {
        font-weight: 600;
    }

    .btn {
        font-weight: 600;
    }
}

/* Users who prefer less contrast — soften edges */
@media (prefers-contrast: less) {
    .section::before {
        opacity: 0.3;
    }

    .defender-card,
    .software-card,
    .stat-card {
        border-color: transparent;
    }
}


/* ===== Safari Rendering Fixes ===== */

/* Prevent Safari from snapping scroll on anchor navigation */
@supports (-webkit-touch-callout: none) {
    html {
        -webkit-overflow-scrolling: touch;
    }

    /* Safari renders thin borders inconsistently at fractional zoom —
       force 1px minimum via border-style solid (not outline) */
    .defender-card,
    .software-card {
        -webkit-backface-visibility: hidden;
    }
}


/* ===== Remaining Logical Properties ===== */

/* Complete the RTL-safe conversion for remaining inline-direction props */
.hero-annotation {
    inset-inline-end: 40px;
}

.writing-quote {
    border-inline-start-width: 2px;
    border-inline-start-style: solid;
    border-inline-start-color: var(--accent-warm);
    padding-inline-start: 24px;
}


/* ==========================================================================
   ITERATION 18 — Micro-Interaction Polish & Loading States
   Form interactions, skeleton placeholders, focus transitions,
   button press feedback, card focus states.
   ========================================================================== */


/* ===== Form Input Focus Transition ===== */

/* Smooth label slide-up and color shift on focus */
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(26, 107, 122, 0.08);
}

/* Placeholder: fade out on focus for cleaner typing experience */
.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
    opacity: 0.4;
    transition: opacity var(--duration-fast) var(--ease-mechanical);
}


/* ===== Button Press Feedback ===== */

/* Subtle depression on active — 1px downward shift + reduced shadow */
.btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: var(--shadow-sm);
}

.btn-primary:active:not(:disabled) {
    box-shadow: none;
}


/* ===== Card Keyboard Focus States ===== */

/* Cards need visible focus for keyboard navigation */
.defender-card:focus-visible,
.software-card:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
    border-radius: var(--radius);
}

/* Stat cards: focus ring for when they contain links */
.stat-card:focus-within {
    outline: 2px dashed var(--accent-cyan);
    outline-offset: 2px;
}


/* ===== Loading / Skeleton Placeholder ===== */

/* Reusable skeleton class for image placeholders before lazy-load */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-card) 37%,
        var(--bg-secondary) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Image placeholders: match card image dimensions */
.defender-card-img.skeleton {
    background-color: var(--bg-secondary);
}


/* ===== Nav Link Active Indicator Transition ===== */

/* Smooth the active indicator transition when scrolling between sections */
.nav-link::after {
    transition: width var(--duration-base) var(--ease-mechanical),
                opacity var(--duration-fast) var(--ease-mechanical);
}


/* ==========================================================================
   ITERATION 19 — Dark Mode Depth & Surface Refinement
   Inset shadows on surfaces, card edge glow, footer depth,
   hero vignette enhancement. Only properties that genuinely differ
   from light mode — CSS vars handle color remapping automatically.
   ========================================================================== */


/* ===== Dark Mode: Surface Depth Cues ===== */

/* In dark mode, surfaces need inset shadows to create depth perception.
   Light mode uses outward shadows. Dark mode reverses — depth comes from
   the surface appearing carved into the background. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .stat-card {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                    0 1px 3px rgba(0, 0, 0, 0.20);
    }

    :root:not([data-theme="light"]) .hero-grid {
        box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.15);
    }

    :root:not([data-theme="light"]) .writing-quote {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    /* Footer: deeper recession in dark mode */
    :root:not([data-theme="light"]) .site-footer {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    /* Hero vignette: stronger radial fade for dark mode theatrics */
    :root:not([data-theme="light"]) .hero::before {
        background: radial-gradient(
            ellipse 80% 60% at 50% 40%,
            transparent 40%,
            rgba(0, 0, 0, 0.15) 100%
        );
    }
}

/* Manual dark toggle — same depth treatments */
[data-theme="dark"] .stat-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 1px 3px rgba(0, 0, 0, 0.20);
}

[data-theme="dark"] .hero-grid {
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .writing-quote {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .site-footer {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .hero::before {
    background: radial-gradient(
        ellipse 80% 60% at 50% 40%,
        transparent 40%,
        rgba(0, 0, 0, 0.15) 100%
    );
}


/* ==========================================================================
   ITERATION 20 — Final Cohesion Audit & Design System Completion
   Specificity normalization, cascade layer prep, stacking context
   documentation, transition shorthand consolidation, final edge cases.
   ========================================================================== */


/* ===== Stacking Context: Explicit Z-Index Scale ===== */

/* Document the z-index layers used throughout the system.
   Having these in one place prevents z-index wars. */
:root {
    --z-base: 0;
    --z-card-overlay: 1;        /* card pseudo-elements, badges */
    --z-scroll-rail: 50;        /* side scroll rail */
    --z-section-indicator: 99;  /* floating section indicator */
    --z-header: 100;            /* sticky header */
    --z-nav-menu: 200;          /* mobile nav overlay */
    --z-skip-link: 1000;        /* skip-to-content link */
}

/* Apply documented z-index values — replace magic numbers */
.skip-link:focus {
    z-index: var(--z-skip-link);
}


/* ===== Interaction State Consistency ===== */

/* All interactive cards: consistent transition shorthand */
.defender-card,
.software-card {
    transition: border-color var(--duration-base) var(--ease-mechanical),
                box-shadow var(--duration-base) var(--ease-mechanical);
}

/* All form inputs: consistent transition */
.form-group input,
.form-group textarea {
    transition: border-color var(--duration-fast) var(--ease-mechanical),
                box-shadow var(--duration-fast) var(--ease-mechanical);
}


/* ===== Content Security: Overflow Guards ===== */

/* Prevent any content from breaking the viewport — safety net */
.container {
    overflow-wrap: break-word;
}

/* Long URLs or code snippets in cards */
.defender-card-body,
.software-card {
    overflow-wrap: break-word;
}

/* Stat numbers: prevent font metric overflow on narrow screens */
.stat-number {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ===== Image Aspect Ratio Stability ===== */

/* Prevent CLS from images loading — explicit aspect-ratio */
.defender-card-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.defender-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ===== Reduced Motion — Iteration 10 ===== */
@media (prefers-reduced-motion: reduce) {
    .writing-coming::after {
        animation: none;
        display: none;
    }

    #writing .pill {
        transition-delay: 0s !important;
    }
}


/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .badge-dev::before {
        animation: none;
    }
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal-ready {
        opacity: 1;
        transform: none;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }

    .defender-card,
    .software-card {
        transform: none;
    }

    .hero-heading,
    .hero-sub,
    .hero-cta {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-annotation {
        opacity: 0.5 !important;
        transform: none !important;
    }

    .hero::after {
        animation: none !important;
    }

    .section-alt::after,
    #about::after {
        display: none;
    }

    .hero-grid {
        background:
            repeating-linear-gradient(0deg, transparent, transparent 99px,
                rgba(43, 41, 38, 0.04) 99px, rgba(43, 41, 38, 0.04) 100px),
            repeating-linear-gradient(90deg, transparent, transparent 99px,
                rgba(43, 41, 38, 0.04) 99px, rgba(43, 41, 38, 0.04) 100px);
    }

    .hero-grid::after {
        display: none;
    }

    /* Iteration 3: disable stagger delays, button transforms */
    .defender-grid .reveal-ready,
    .software-grid .reveal-ready {
        transition-delay: 0s !important;
    }

    .btn:hover,
    .btn:active {
        transform: none !important;
    }

    .footer-links a:hover {
        transform: none !important;
    }

    .software-card:hover .software-link svg {
        transform: none !important;
    }
}

/* ===== Print ===== */
@media print {
    .site-header,
    .hamburger,
    .hero-grid,
    .hero-grid::after,
    .hero-cta,
    .hero-annotation,
    .contact-form,
    .footer-links,
    .scroll-rail,
    .section-indicator,
    .nav-progress,
    .section-alt::after,
    #about::after,
    .hero::after {
        display: none !important;
    }

    body {
        background: #fff;
        color: #111;
        font-size: 11pt;
    }

    .section,
    .section-alt {
        background: #fff;
        padding: 24px 0;
    }

    .section-title,
    .hero-heading {
        color: #111;
        text-shadow: none;
    }

    .hero-heading::before {
        background: #999;
    }

    .section::before {
        border: none;
        background-image: linear-gradient(to bottom,
            transparent 4px, #ccc 4px, #ccc 5px, transparent 5px);
    }

    .stat-card,
    .defender-card,
    .software-card {
        background: #f5f5f5;
        border-color: #ccc;
    }

    .defender-card {
        border-top-color: #888;
    }

    .software-card {
        border-top-color: #888;
    }

    a {
        color: #111;
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.75rem;
    }

    /* Iteration 5: print additions for new annotations */
    .site-footer::before {
        color: #888;
        background: #fff;
    }

    .footer-copy::before {
        opacity: 0.5;
    }

    .contact-form::before,
    .contact-form::after,
    .contact-info::before,
    .contact-info::after,
    .contact-detail::before {
        display: none;
    }

    .writing-coming::after {
        display: none;
    }

    .writing-quote::before,
    .writing-quote::after {
        display: none;
    }

    .pill::before,
    .pill::after {
        display: none;
    }

    /* Content-visibility must be disabled for print */
    #defender,
    #software,
    #writing,
    #contact,
    .site-footer {
        content-visibility: visible;
    }

    /* Page break control — keep cards together, sections on fresh pages */
    .section {
        page-break-before: auto;
        break-before: auto;
    }

    .defender-card,
    .software-card,
    .stat-card {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Orphan/widow control — prevent lonely lines */
    p {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Grids flatten to single column for print readability */
    .defender-grid,
    .software-grid,
    .stats-grid,
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Hero: compact for print — no full-viewport height */
    .hero {
        min-height: auto;
        padding: 32px 0;
    }

    /* Section refs — lighter on print */
    .section-ref {
        color: #888;
    }

    .section-ref::before {
        display: none;
    }

    /* Badges: text-only, no dots */
    .badge::before {
        display: none;
    }

    /* Footer revision: visible in print */
    .footer-rev {
        opacity: 0.8;
    }

    /* Crosshair marks: hide in print */
    .footer-links a::before,
    .footer-links a::after {
        display: none;
    }

    /* Nav section numbers: hide */
    .nav-link[data-section]::before {
        display: none;
    }

    /* Iteration 7 gradient bleed: flatten for print */
    .section-alt {
        background: #f5f5f5 !important;
    }
}


/* ==========================================================================
   ITERATION 9 — Accessibility Depth & Forced Colors
   ========================================================================== */


/* ===== Forced Colors / Windows High Contrast ===== */
@media (forced-colors: active) {
    /* Ensure borders are visible in high contrast mode */
    .defender-card,
    .software-card,
    .stat-card {
        border: 2px solid ButtonText;
    }

    .defender-card {
        border-top-color: Highlight;
    }

    .software-card {
        border-top-color: Highlight;
    }

    /* Buttons: visible boundaries */
    .btn {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    .btn-primary {
        background: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }

    /* Form inputs: clear boundaries */
    .form-group input,
    .form-group textarea {
        border: 2px solid ButtonText;
        background: Field;
        color: FieldText;
    }

    /* Focus rings: system highlight color */
    :focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    /* Links: system link color */
    a {
        color: LinkText;
    }

    /* Nav link active: highlight indicator */
    .nav-link.active {
        border-bottom: 2px solid Highlight;
    }

    /* Badges: text contrast only */
    .badge {
        border: 1px solid ButtonText;
    }

    .badge::before {
        display: none;
    }

    /* Hide decorative elements */
    .hero-grid,
    .hero-grid::after,
    .hero-annotation,
    .section::before,
    .hero::after,
    .scroll-rail,
    .section-alt::after,
    #about::after,
    .defender-card::before,
    .defender-card-img::before,
    .stat-card::before,
    .stat-number::after,
    .writing-quote::after,
    .section-ref::before,
    .footer-links a::before,
    .footer-links a::after {
        display: none !important;
    }

    /* Section-alt: use system background */
    .section-alt {
        background: Canvas;
    }
}


/* ===== Accessibility — Screen Reader Enhancements ===== */

/* Visually hidden but accessible — for sr-only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus trap indicator — visible outline on the nav when tabbing through */
.nav-container:focus-within {
    outline: 1px dashed var(--accent-cyan);
    outline-offset: -1px;
    border-radius: var(--radius);
}

/* Form validation states — visible without color alone */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
    border-color: #C53030;
    border-left-width: 3px;
}

/* Ensure links are distinguishable from surrounding text */
.about-text a,
.writing-content a {
    text-decoration-thickness: 1px;
}


/* ==========================================================================
   RESPONSIVE ENHANCEMENT LAYER
   World Cafe Table: Responsive Design Specialist

   ADDITIVE ONLY — no overrides of existing 768px / <768px / 1024px breakpoints.
   New intermediate breakpoints: 360px, 600px, 768-1023px, 1024-1199px.
   Mobile-first (min-width) where possible.
   ========================================================================== */


/* ===== Very Small Viewport (< 360px) — Extreme Narrow Handling ===== */

@media (max-width: 359px) {
    /* Prevent horizontal overflow on the narrowest devices */
    .container {
        padding: 0 16px;
    }

    .nav-container {
        padding: 0 16px;
    }

    .hero {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Scale down hero heading to prevent line breaks that push content off-screen */
    .hero-heading {
        font-size: clamp(1.75rem, 8vw, var(--text-2xl));
    }

    .hero-sub {
        font-size: var(--text-sm);
    }

    /* Stack CTA buttons vertically when viewport is this narrow */
    .hero-cta {
        flex-direction: column;
        gap: 12px;
    }

    .hero-cta .btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }

    /* Stat cards: tighter padding to prevent text overflow */
    .stat-card {
        padding: 16px 8px 12px;
    }

    .stat-number {
        font-size: var(--text-lg);
    }

    .stat-detail {
        font-size: 0.6875rem;
    }

    /* Defender cards: reduce body padding */
    .defender-card-body {
        padding: 16px;
    }

    .defender-card-img {
        height: 120px;
    }

    /* Software cards: reduce padding */
    .software-card {
        padding: 20px;
    }

    /* Tags and pills: prevent overflow on narrow screens */
    .tag-row {
        gap: 4px;
    }

    .tag {
        font-size: 0.625rem;
        padding: 2px 6px;
    }

    .topic-pills {
        gap: 6px;
    }

    .pill {
        font-size: 0.6875rem;
        padding: 5px 12px;
    }

    /* Contact form: tighter inputs */
    .form-group input,
    .form-group textarea {
        padding: 10px 12px;
        font-size: var(--text-sm);
    }

    /* Writing blockquote: prevent overflow */
    .writing-quote {
        padding: 16px 20px;
    }

    .writing-quote p {
        font-size: var(--text-base);
    }

    /* Section divider dimension lines: pull in from edges */
    .section::before {
        left: 16px;
        right: 16px;
    }

    /* Footer: stack if needed */
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Nav menu links: slightly tighter for narrow screens */
    .nav-link {
        padding: 12px 16px;
    }
}


/* ===== Tablet Portrait (600px - 767px) ===== */

@media (min-width: 600px) and (max-width: 767px) {
    /* Two-column grids at tablet portrait width */
    .defender-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .software-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Stats as a horizontal row instead of stacked */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    /* Hero text sizing for this intermediate range */
    .hero-heading {
        font-size: clamp(var(--text-xl), 5.5vw, var(--text-2xl));
    }

    .hero-content {
        max-width: 560px;
    }

    /* Contact grid: side-by-side at tablet portrait */
    .contact-grid {
        grid-template-columns: 1.4fr 1fr;
        align-items: start;
    }

    /* About grid: keep stacked but tighten gap */
    .about-grid {
        gap: 36px;
    }

    /* Section padding: slightly more room than mobile */
    .section {
        padding: 80px 0;
    }

    .section-subtitle {
        margin-bottom: 36px;
    }

    /* Container padding intermediate step */
    .container {
        padding: 0 32px;
    }

    .nav-container {
        padding: 0 32px;
    }

    /* Defender card image: slightly shorter at 2-col */
    .defender-card-img {
        height: 140px;
    }

    /* Section divider dimension lines: intermediate inset */
    .section::before {
        left: 32px;
        right: 32px;
    }

    /* Show hero annotation at tablet portrait — repositioned */
    .hero-annotation {
        display: block;
        bottom: 40px;
        right: 32px;
        min-width: 160px;
        font-size: 0.625rem;
    }

    /* Hero title block outline: show but smaller */
    .hero-grid::after {
        display: block;
        width: 160px;
        height: 50px;
        bottom: 32px;
        right: 24px;
    }
}


/* ===== Tablet Landscape (768px - 1023px) — Polish Layer ===== */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Refined section spacing for tablet landscape */
    .section {
        padding: 88px 0;
    }

    .section-subtitle {
        margin-bottom: 40px;
    }

    /* Defender grid: 2-col with more breathing room */
    .defender-grid {
        gap: 24px;
        margin-bottom: 36px;
    }

    /* Software grid: remain 2-col but with refined gap */
    .software-grid {
        gap: 24px;
    }

    /* Software cards: comfortable internal space */
    .software-card {
        padding: 28px;
    }

    /* Defender card images: proportional height for landscape */
    .defender-card-img {
        height: 150px;
    }

    /* About grid gap refinement */
    .about-grid {
        gap: 40px;
    }

    /* Stats: ensure 3-col stays comfortable */
    .stats-grid {
        gap: 14px;
    }

    .stat-card {
        padding: 20px 10px 16px;
    }

    /* Contact grid: refined proportions */
    .contact-grid {
        gap: 40px;
    }

    /* Writing content: slightly wider at landscape */
    .writing-content {
        max-width: 560px;
    }

    /* Hero annotation: refine position at tablet landscape */
    .hero-annotation {
        bottom: 48px;
        right: 36px;
    }

    /* Container: subtle increase from 768px default */
    .container {
        padding: 0 44px;
    }

    .nav-container {
        padding: 0 44px;
    }

    /* Scroll rail: visible but pulled in slightly at this width */
    .scroll-rail {
        right: 14px;
    }

    /* Topic pills: ensure comfortable wrapping */
    .topic-pills {
        gap: 10px;
    }

    .pill {
        padding: 6px 14px;
    }
}


/* ===== Small Desktop (1024px - 1199px) — Container Transition ===== */

@media (min-width: 1024px) and (max-width: 1199px) {
    /* Container max-width transition step before full 1100px */
    .container {
        max-width: 960px;
        padding: 0 40px;
    }

    .nav-container {
        max-width: 960px;
    }

    /* Grid gap refinements for 3-col software layout */
    .software-grid {
        gap: 20px;
    }

    /* Defender grid: still 2-col but with refined gaps */
    .defender-grid {
        gap: 22px;
    }

    /* Section spacing: approaching full desktop comfort */
    .section {
        padding: 92px 0;
    }

    /* Hero content: slightly narrower than full desktop */
    .hero-content {
        max-width: 660px;
    }

    /* About grid: slightly tighter ratio for small desktop */
    .about-grid {
        gap: 44px;
    }

    /* Stat cards: comfortable at this width */
    .stats-grid {
        gap: 16px;
    }

    /* Contact grid: approaching full desktop proportions */
    .contact-grid {
        gap: 44px;
    }

    /* Scroll rail: standard desktop position */
    .scroll-rail {
        right: 18px;
    }
}


/* ===== Touch Device — Disable 3D Tilt ===== */
/* Coarse pointer indicates touch-primary device (finger, not stylus) */

@media (pointer: coarse) {
    .defender-card,
    .software-card {
        --tilt-x: 0deg !important;
        --tilt-y: 0deg !important;
        --tilt-scale: 1 !important;
        transform: none;
        will-change: auto;
    }

    /* Remove hover-dependent dimension mark opacity changes on touch */
    .defender-card:hover::before {
        opacity: 0.4;
    }

    .defender-card:hover {
        box-shadow: none;
    }

    .software-card:hover {
        box-shadow: none;
    }

    /* Active states for touch — brief visual feedback on tap */
    .defender-card:active {
        border-color: var(--accent-warm);
        box-shadow: var(--shadow-sm);
    }

    .software-card:active {
        border-color: var(--accent-cyan);
        box-shadow: var(--shadow-sm);
    }

    /* Disable hover expand on stat gauge rules for touch */
    .stat-card:hover .stat-number::after {
        width: 24px;
    }

    /* Side rail dots: larger tap targets on touch */
    .scroll-rail__dot {
        width: 12px;
        height: 12px;
        /* Ensure minimum 44px tap target via padding */
        padding: 18px;
        margin: -18px;
        background-clip: content-box;
    }
}


/* ===== Fine Pointer — Keep 3D Tilt (desktop mice/trackpads) ===== */

@media (pointer: fine) {
    .defender-card,
    .software-card {
        transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--tilt-scale));
        transform-style: preserve-3d;
        will-change: transform;
    }
}


/* ===== Hover Capability Detection ===== */
/* Devices that cannot hover should not show hover-only visual effects */

@media (hover: none) {
    .nav-link::after {
        display: none;
    }

    .pill:hover {
        border-color: var(--border);
        color: var(--text-secondary);
    }

    .software-card-icon::after {
        width: 32px;
    }

    /* Active state replaces hover for touch feedback */
    .pill:active {
        border-color: var(--accent-warm);
        color: var(--accent-warm);
    }
}


/* ===== Landscape Orientation on Small Screens ===== */
/* Handle phones rotated to landscape — short viewport, wide */

@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + 32px);
        padding-bottom: 40px;
    }

    .hero-heading {
        font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
        margin-bottom: 16px;
    }

    .hero-sub {
        margin-bottom: 24px;
    }

    /* Hide the scroll-hint chevron in cramped landscape */
    .hero::after {
        display: none;
    }

    /* Reduce section padding in short landscape */
    .section {
        padding: 48px 0;
    }
}

/* ===== Selection — Manual Dark Toggle ===== */
[data-theme="dark"] ::selection {
    background: rgba(212, 160, 48, 0.30);
    color: #E8E4E0;
}


/* ===== Scrollbar — Engineering Document Feel ===== */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(43, 41, 38, 0.20) var(--bg-secondary);
}

/* WebKit / Chromium */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: rgba(43, 41, 38, 0.20);
    border-radius: 4px;
    border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(43, 41, 38, 0.35);
}

::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}

/* Scrollbar — dark mode */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        scrollbar-color: rgba(255, 255, 255, 0.15) #242120;
    }

    :root:not([data-theme="light"]) ::-webkit-scrollbar-track {
        background: #242120;
    }

    :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-color: #242120;
    }

    :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    :root:not([data-theme="light"]) ::-webkit-scrollbar-corner {
        background: #242120;
    }
}

[data-theme="dark"] {
    scrollbar-color: rgba(255, 255, 255, 0.15) #242120;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #242120;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-color: #242120;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: #242120;
}


/* ===== No-JS Fallback ===== */
/* If JS never loads and .revealed is never applied, animate elements visible after 3s */
.reveal-ready:not(.revealed) {
    animation: nojs-reveal 0s 3.2s forwards;
}

@keyframes nojs-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal-ready.revealed {
    animation: none;
}


/* ===== Page Load — Safe Font Transition ===== */
/* Only hide body when JS is actively managing font loading.
   If JS fails to load, body stays at default opacity. */
body.fonts-loading {
    opacity: 0;
}

body.fonts-loaded {
    opacity: 1;
    transition: opacity 0.3s var(--ease-mechanical);
}


/* ===== Text Rendering — Ligature Control ===== */
body {
    font-variant-ligatures: common-ligatures contextual;
}


/* ===== Mobile Navigation Polish ===== */

/* --- Safe area insets for notched devices --- */
@supports (padding-top: env(safe-area-inset-top)) {
    .site-header {
        padding-top: env(safe-area-inset-top);
    }

    @media (max-width: 767px) {
        .nav-menu {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        .nav-menu.open {
            padding-bottom: calc(8px + env(safe-area-inset-bottom));
        }
    }
}

/* --- Mobile menu backdrop overlay --- */
@media (max-width: 767px) {
    .nav-menu::before {
        content: '';
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(43, 41, 38, 0.18);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duration-base) var(--ease-mechanical);
        z-index: -1;
    }

    .nav-menu.open::before {
        opacity: 1;
        pointer-events: auto;
    }

    /* --- Mobile nav link stagger on menu open --- */
    .nav-menu > li {
        opacity: 0;
        transform: translateX(-12px);
        transition: opacity var(--duration-base) var(--ease-mechanical),
                    transform var(--duration-base) var(--ease-mechanical);
    }

    .nav-menu.open > li {
        opacity: 1;
        transform: translateX(0);
    }

    .nav-menu.open > li:nth-child(1) { transition-delay: 0.04s; }
    .nav-menu.open > li:nth-child(2) { transition-delay: 0.08s; }
    .nav-menu.open > li:nth-child(3) { transition-delay: 0.12s; }
    .nav-menu.open > li:nth-child(4) { transition-delay: 0.16s; }
    .nav-menu.open > li:nth-child(5) { transition-delay: 0.20s; }

    /* Reset delay on close so items disappear together */
    .nav-menu:not(.open) > li {
        transition-delay: 0s;
    }

    /* --- Active section indicator: amber filing tab --- */
    .nav-link.active {
        border-left: 3px solid var(--accent-warm);
        padding-left: 21px; /* 24px original minus 3px border */
        color: var(--text-primary);
    }
}

/* --- Dark mode: mobile menu backdrop + menu background ---
   Flat (non-nested) @media for broad browser compatibility. */
@media (prefers-color-scheme: dark) and (max-width: 767px) {
    :root:not([data-theme="light"]) .nav-menu::before {
        background: rgba(0, 0, 0, 0.35);
    }

    :root:not([data-theme="light"]) .nav-link.active {
        border-left-color: var(--accent-warm);
    }
}

/* --- Reduced motion: disable stagger, instant transitions ---
   Flat (non-nested) @media for broad browser compatibility. */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
    .nav-menu > li {
        opacity: 1;
        transform: none;
        transition-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }

    .nav-menu::before {
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   SCROLL-DRIVEN EFFECTS — Progressive Enhancement Layer
   World Cafe Table: Scroll Animation Specialist

   Strategy:
   - @supports (animation-timeline: scroll()) for native scroll-driven animations
   - --scroll-pct (set by main.js) for JS-based fallback
   - IntersectionObserver .revealed class for per-section fallback
   - prefers-reduced-motion: reduce disables ALL scroll effects
   ========================================================================== */

/* ---------- 1. Header Shadow Progression ---------- */

/*
 * JS fallback: --scroll-pct ranges 0..1. Header gains opacity and shadow
 * progressively in the first 5% of scroll (--scroll-pct 0..0.05).
 * The .scrolled class snaps at 50px; this adds a smooth gradient beneath.
 */
.site-header {
    --header-progress: clamp(0, var(--scroll-pct, 0) * 20, 1);
    background: rgba(242, 237, 232, calc(0.92 * var(--header-progress)));
    box-shadow:
        0 1px 0 rgba(43, 41, 38, calc(0.10 * var(--header-progress))),
        0 2px 6px rgba(43, 41, 38, calc(0.04 * var(--header-progress)));
}

/* Once .scrolled is set, ensure it still wins for browsers where
   --scroll-pct may not be updating fast enough */
.site-header.scrolled {
    --header-progress: 1;
}

/* Dark mode header progression */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header {
        background: rgba(28, 26, 23, calc(0.88 * var(--header-progress, 0)));
        box-shadow:
            0 1px 0 rgba(255, 255, 255, calc(0.06 * var(--header-progress, 0))),
            0 2px 6px rgba(0, 0, 0, calc(0.12 * var(--header-progress, 0)));
    }
}

[data-theme="dark"] .site-header {
    background: rgba(28, 26, 23, calc(0.88 * var(--header-progress, 0)));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, calc(0.06 * var(--header-progress, 0))),
        0 2px 6px rgba(0, 0, 0, calc(0.12 * var(--header-progress, 0)));
}

/* Native scroll-driven header shadow */
@supports (animation-timeline: scroll()) {
    @keyframes header-shadow-progression {
        0% {
            --header-progress: 0;
        }
        3% {
            --header-progress: 1;
        }
        100% {
            --header-progress: 1;
        }
    }

    .site-header {
        animation: header-shadow-progression linear both;
        animation-timeline: scroll(root);
    }
}


/* ---------- 2. Section Dimension-Line Reveal ---------- */

/*
 * Dimension lines grow from center (scaleX 0 -> 1) as sections enter viewport.
 * Fallback: tied to .revealed class set by IntersectionObserver.
 */
.section::before {
    transform-origin: center top;
    transform: translateY(-4px) scaleX(0);
    transition: transform 0.8s var(--ease-mechanical);
}

.section.revealed::before,
.section:has(.revealed)::before {
    transform: translateY(-4px) scaleX(1);
}

/* Preserve first-section suppression */
.section:first-of-type::before {
    transform: none;
    display: none;
}

/* Native scroll-driven dimension-line reveal */
@supports (animation-timeline: scroll()) {
    @keyframes dimension-line-grow {
        0% {
            transform: translateY(-4px) scaleX(0);
        }
        100% {
            transform: translateY(-4px) scaleX(1);
        }
    }

    .section:not(:first-of-type)::before {
        animation: dimension-line-grow linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}


/* ---------- 3. Nav Progress Bar — Height Pulse ---------- */

/*
 * Slight height pulse at 50% and 100% scroll milestones.
 * JS fallback uses --scroll-pct to calculate pulse via sine approximation.
 * Pulse: 2px -> 3px -> 2px centered at 50% and 100%.
 */

/* JS fallback: approximate a double-bump with clamp and polynomial */
.nav-progress {
    --pulse-at-50: max(0, 1 - abs(var(--scroll-pct, 0) - 0.5) * 20);
    --pulse-at-100: max(0, 1 - abs(var(--scroll-pct, 0) - 1.0) * 20);
    --pulse: max(var(--pulse-at-50, 0), var(--pulse-at-100, 0));
    height: calc(2px + 1.5px * var(--pulse));
}

/* Native scroll-driven pulse */
@supports (animation-timeline: scroll()) {
    @keyframes progress-pulse {
        0%   { height: 2px; }
        48%  { height: 2px; }
        50%  { height: 3.5px; }
        52%  { height: 2px; }
        98%  { height: 2px; }
        100% { height: 3.5px; }
    }

    .nav-progress {
        animation: progress-pulse linear both;
        animation-timeline: scroll(root);
    }
}


/* ---------- 4. Stat Number Emphasis ---------- */

/*
 * When stat cards enter center viewport, .stat-number scales subtly.
 * Fallback: on .revealed (IntersectionObserver), animate scale 1 -> 1.05 -> 1.
 */
.stat-number {
    transition: transform 0.6s var(--ease-mechanical);
    transform-origin: center bottom;
}

.stat-card.revealed .stat-number {
    animation: stat-emphasis 1.2s var(--ease-mechanical) 0.1s both;
}

@keyframes stat-emphasis {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Native scroll-driven stat emphasis */
@supports (animation-timeline: scroll()) {
    @keyframes stat-scale-scroll {
        0%   { transform: scale(1); }
        40%  { transform: scale(1.05); }
        60%  { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    .stat-number {
        animation: stat-scale-scroll linear both;
        animation-timeline: view();
        animation-range: contain 0% contain 100%;
    }
}


/* ---------- 5. Background Parallax Feel ---------- */

/*
 * Very subtle vertical offset (2-3px) on texture pseudo-elements.
 * Tied to --scroll-pct for JS fallback. Avoids full parallax jank.
 */

/* Paper grain parallax (section-alt) */
.section-alt::after {
    transition: transform 0.1s linear;
    transform: translateY(calc((var(--scroll-pct, 0) - 0.5) * 3px));
    will-change: transform;
}

/* Topographic contour parallax (about section) */
#about::after {
    transition: transform 0.1s linear;
    transform: translateY(calc((var(--scroll-pct, 0) - 0.3) * -2px));
    will-change: transform;
}

/* Native scroll-driven parallax */
@supports (animation-timeline: scroll()) {
    @keyframes texture-parallax-down {
        0%   { transform: translateY(-1.5px); }
        100% { transform: translateY(1.5px); }
    }

    @keyframes texture-parallax-up {
        0%   { transform: translateY(1px); }
        100% { transform: translateY(-1px); }
    }

    .section-alt::after {
        animation: texture-parallax-down linear both;
        animation-timeline: scroll(root);
    }

    #about::after {
        animation: texture-parallax-up linear both;
        animation-timeline: scroll(root);
    }
}


/* ---------- Reduced Motion: Disable All Scroll Effects ---------- */

@media (prefers-reduced-motion: reduce) {
    .site-header {
        --header-progress: 0;
        box-shadow: none;
    }

    .site-header.scrolled {
        --header-progress: 1;
    }

    .section::before {
        transform: translateY(-4px) scaleX(1);
        transition: none;
    }

    .nav-progress {
        --pulse: 0;
        height: 2px;
    }

    .stat-number {
        transform: none !important;
        animation: none !important;
    }

    .stat-card.revealed .stat-number {
        animation: none !important;
    }

    .section-alt::after {
        transform: none;
        will-change: auto;
    }

    #about::after {
        transform: none;
        will-change: auto;
    }

    /* Page load: no fade, show immediately */
    body.fonts-loading {
        opacity: 1 !important;
    }

    body.fonts-loaded {
        transition: none !important;
    }

    /* No-JS fallback: show immediately */
    .reveal-ready:not(.revealed) {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* ===================================================================
   Résumé page (/resume) — screen
   =================================================================== */

.resume {
    padding-top: calc(var(--nav-height) + 32px);
    padding-bottom: 64px;
}

.resume-doc {
    max-width: 820px;
}

.resume-head {
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 24px;
    margin-bottom: 32px;
}

.resume-id {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    color: var(--accent-warm-text);
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.resume-id-ref {
    color: var(--text-tertiary);
}

.resume-name {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1.05;
    color: var(--text-primary);
    margin: 0;
}

.resume-title {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 6px 0 16px;
}

.resume-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.resume-contact a {
    color: var(--accent-cyan);
    text-decoration: none;
}

.resume-contact a:hover {
    text-decoration: underline;
}

.resume-section {
    margin-bottom: 32px;
}

.resume-section-title {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-warm-text);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 6px;
    margin: 0 0 16px;
}

.resume-summary {
    font-size: var(--text-md);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.resume-skills {
    margin: 0;
    display: grid;
    gap: 10px;
}

.resume-skill-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: baseline;
}

@media (min-width: 600px) {
    .resume-skill-group {
        grid-template-columns: 140px 1fr;
        gap: 12px;
    }
}

.resume-skill-group dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}

.resume-skill-group dd {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.resume-entry {
    margin-bottom: 22px;
}

.resume-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.resume-role {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin: 0;
}

.resume-period {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.resume-org {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--accent-cyan);
    margin: 2px 0 10px;
}

.resume-bullets {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.resume-bullets li {
    margin-bottom: 5px;
}

.resume-projects {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.resume-project {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px dotted var(--rule);
    padding-bottom: 8px;
}

.resume-project-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.resume-project-skills {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.resume-download {
    margin-top: 4px;
}

.resume-footer-note {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: 24px;
}

/* ===================================================================
   Résumé page — print (clean single document, no chrome)
   =================================================================== */

@media print {
    .resume-page .site-header,
    .resume-page .site-footer,
    .resume-page .resume-download,
    .resume-page .skip-link {
        display: none !important;
    }

    .resume-page {
        background: #fff;
        color: #111;
        font-size: 10.5pt;
    }

    .resume-page .resume {
        padding: 0;
    }

    .resume-page .resume-doc {
        max-width: 100%;
    }

    .resume-page .resume-name {
        color: #111;
    }

    .resume-page .resume-section-title {
        color: #333;
        border-color: #bbb;
    }

    .resume-page .resume-contact a,
    .resume-page .resume-org {
        color: #222;
    }

    /* Avoid breaking individual items, NOT whole sections — the 14-item
       Selected Work section is too long to fit on one page and would force
       large blank gaps if kept together. */
    .resume-page .resume-entry,
    .resume-page .resume-project,
    .resume-page .resume-skill-group {
        page-break-inside: avoid;
    }

    .resume-page .resume-section-title {
        page-break-after: avoid;
    }
}

/* ===================================================================
   Capabilities section
   =================================================================== */

.capability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.capability-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-cyan);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-base) var(--ease-mechanical),
                box-shadow var(--duration-base) var(--ease-mechanical);
}

.capability-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.capability-card-icon {
    color: var(--accent-cyan);
    margin-bottom: 12px;
}

.capability-ref {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.capability-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0 0 10px;
}

.capability-card p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
    margin: 0 0 16px;
}

/* ===================================================================
   Selected Work section
   =================================================================== */

.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.work-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-warm);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform var(--duration-base) var(--ease-mechanical),
                box-shadow var(--duration-base) var(--ease-mechanical);
}

.work-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.work-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.work-card-head h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0;
}

.work-period {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}

.badge-client {
    background: rgba(26, 107, 122, 0.10);
    color: var(--accent-cyan);
    border: 1px solid rgba(26, 107, 122, 0.25);
    align-self: flex-start;
    margin: 10px 0 0;
}

.work-summary {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
    margin: 14px 0 12px;
}

.work-highlights {
    margin: 0 0 16px;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.work-highlights li {
    margin-bottom: 5px;
}

.work-card .tag-row {
    margin-top: auto;
}

.work-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-cyan);
    text-decoration: none;
}

.work-link:hover {
    text-decoration: underline;
}

/* Résumé call-to-action banner */
.resume-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 36px;
    padding: 24px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

.resume-cta-text h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0 0 4px;
}

.resume-cta-text p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

.resume-cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media print {
    .capability-card,
    .work-card {
        background: #f5f5f5;
        border-color: #ccc;
    }
}