/* css/fonts.css */
/* Original Latin webfonts, served locally. Licences are in assets/fonts. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* css/site.css */
/* Alex Dawkins portfolio, built on the Vertex design concept.
   Graphite and warm-white themes with an acid-lime accent, expressive grotesk
   headlines over a quiet body face, numbered sections and precise hairlines.
   One stylesheet serves every page; the accessibility panel can override the
   theme with high contrast, larger text, reduced motion or OpenDyslexic. */

:root {
  --color-bg: #f6f6f1;
  --color-surface: #efefe8;
  --color-surface-2: #ffffff;
  --color-surface-offset: #e6e7dd;
  --color-text: #20231b;
  --color-text-muted: #565d4d;
  --color-text-faint: #606953;
  --color-primary: #c0ee67;
  --color-primary-hover: #addc53;
  --color-on-primary: #19220d;
  --color-accent-ink: #4d6e1c;
  --color-divider: rgba(48, 54, 36, 0.14);
  --color-border: rgba(48, 54, 36, 0.2);
  --color-code: #23281d;
  --color-critical: #9c2841;
  --shadow-lg: 0 20px 80px rgba(18, 20, 14, 0.16);
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-hero: clamp(3.25rem, 1rem + 6.2vw, 7.5rem);
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 5.5rem;
  --text-scale: 1;
  color-scheme: light;
}

/* Dark: the system preference unless the visitor picked light, or an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0c0e0c;
    --color-surface: #131612;
    --color-surface-2: #1b1f18;
    --color-surface-offset: #24291f;
    --color-text: #f0f1e9;
    --color-text-muted: #a7ad9f;
    --color-text-faint: #959d8c;
    --color-accent-ink: #c0ee67;
    --color-divider: rgba(214, 222, 200, 0.13);
    --color-border: rgba(214, 222, 200, 0.2);
    --color-code: #c6d6b3;
    --color-critical: #ff9bae;
    --shadow-lg: 0 20px 80px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #0c0e0c;
  --color-surface: #131612;
  --color-surface-2: #1b1f18;
  --color-surface-offset: #24291f;
  --color-text: #f0f1e9;
  --color-text-muted: #a7ad9f;
  --color-text-faint: #959d8c;
  --color-accent-ink: #c0ee67;
  --color-divider: rgba(214, 222, 200, 0.13);
  --color-border: rgba(214, 222, 200, 0.2);
  --color-code: #c6d6b3;
  --color-critical: #ff9bae;
  --shadow-lg: 0 20px 80px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

html.text-scale-90 { --text-scale: 0.9; }
html.text-scale-100 { --text-scale: 1; }
html.text-scale-110 { --text-scale: 1.1; }
html.text-scale-120 { --text-scale: 1.2; }
html.text-scale-130 { --text-scale: 1.3; }

/* High contrast wins over either theme. */
:root.high-contrast,
:root.high-contrast[data-theme] {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-offset: #f0f0f0;
  --color-text: #000000;
  --color-text-muted: #000000;
  --color-text-faint: #1f1f1f;
  --color-primary: #000000;
  --color-primary-hover: #1f1f1f;
  --color-on-primary: #ffffff;
  --color-accent-ink: #000000;
  --color-divider: #000000;
  --color-border: #000000;
  --color-code: #000000;
  --color-critical: #7a0019;
  --shadow-lg: none;
  color-scheme: light;
}

@font-face { font-family: "OpenDyslexic"; src: url("/assets/fonts/OpenDyslexic-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/assets/fonts/OpenDyslexic-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/assets/fonts/OpenDyslexic-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/assets/fonts/OpenDyslexic-BoldItalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }
html.open-dyslexic { --font-display: "OpenDyslexic", "IBM Plex Sans", sans-serif; --font-body: "OpenDyslexic", "IBM Plex Sans", sans-serif; --font-mono: "OpenDyslexic", monospace; }
html.open-dyslexic body { letter-spacing: 0.01em; word-spacing: 0.08em; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(100% * var(--text-scale)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html:not(.reduced-motion) { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text); font: 400 var(--text-base)/1.6 var(--font-body); overflow-wrap: break-word; }
main { flex: 1; }
img, canvas, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
p a, li a, td a, dd a, .prose a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p a:hover, li a:hover, td a:hover, dd a:hover, .prose a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, input, select, textarea { transition: color 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease); }
:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 4px; }
::selection { background: var(--color-primary); color: var(--color-on-primary); }

.container, .wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--space-8); }
@media (max-width: 37.5rem) { .container, .wrap { padding-inline: var(--space-5); } }
.section { padding-top: var(--space-24); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: var(--space-4); left: var(--space-4); z-index: 100; transform: translateY(-200%); padding: var(--space-3) var(--space-4); background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.skip-link:focus { transform: none; }

.eyebrow { display: block; margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.lead { color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.55; }
.section-title { font-size: var(--text-2xl); letter-spacing: -0.04em; line-height: 1.08; max-width: 18ch; }
.status-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-accent-ink); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 48px; padding: var(--space-3) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font-size: var(--text-sm); font-weight: 700; line-height: 1.2; text-align: center; }
.btn:hover { background: var(--color-surface-2); }
.btn.primary { border-color: transparent; background: var(--color-primary); color: var(--color-on-primary); }
.btn.primary:hover { background: var(--color-primary-hover); }
.btn:active { transform: translateY(1px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.arrow { display: inline-block; transition: transform 180ms var(--ease); }
.btn:hover .arrow, .text-link:hover .arrow, .inline-link:hover .arrow { transform: translate(2px, -2px); }
.text-link, .inline-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; color: var(--color-text); font-size: var(--text-sm); font-weight: 500; }
.text-link:hover, .inline-link:hover { color: var(--color-text-muted); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.tag { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-muted); font: 500 var(--text-xs)/1.5 var(--font-mono); }
.tag--attack { color: var(--color-accent-ink); }
.kind { display: inline-flex; width: fit-content; color: var(--color-text-faint); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.kind--offensive, .kind--threat { color: var(--color-text-faint); }

/* Header: brand left, page links centred, theme switch and CV button right. */
.nav-wrapper { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--color-divider); background: var(--color-bg); backdrop-filter: none; }
.nav-glass { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); min-height: var(--header-h); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.brand-mark img { width: 2.1rem; height: 2.1rem; border-radius: var(--radius-md); }
.brand-name { font: 600 1.05rem/1.1 var(--font-display); letter-spacing: -0.03em; }
.brand-sub { color: var(--color-text-faint); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-links { justify-self: center; display: flex; align-items: center; gap: 0.15rem; padding: 0.25rem; border: 1px solid var(--color-divider); border-radius: var(--radius-full); background: var(--color-surface); }
.nav-links a { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-full); color: var(--color-text-muted); font-size: var(--text-sm); }
.nav-links a:hover { color: var(--color-text); background: var(--color-surface-2); }
.nav-links a.active { color: var(--color-text); font-weight: 600; background: var(--color-surface-2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 1px var(--color-divider); }
.nav-link-title { display: block; }
.nav-heading, .nav-link-description, .nav-link-arrow { display: none; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: var(--space-2); }
.nav-cta { min-height: 40px; padding: 0 var(--space-5); font-size: var(--text-sm); }
.icon-button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-muted); }
.icon-button:hover { background: var(--color-surface-2); color: var(--color-text); }
.icon-button svg { width: 19px; height: 19px; }
.theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: block; }
:root[data-theme="dark"] .theme-icon-dark { display: none; }
html:not(.js) [data-theme-toggle] { display: none; }
html.high-contrast [data-theme-toggle] { display: none; }
.menu-toggle { display: none; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: transparent; color: var(--color-text); }
.menu-label { color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }
.menu-symbol path { transition: transform 160ms ease; }
.menu-toggle[aria-expanded="true"] .menu-line-top { transform: translateY(4px) rotate(45deg); transform-origin: 12px 8px; }
.menu-toggle[aria-expanded="true"] .menu-line-bottom { transform: translateY(-4px) rotate(-45deg); transform-origin: 12px 16px; }
@media (max-width: 75rem) { .nav-cta { display: none; } }
/* On the homepage the header stays dark to sit on the hero stage in both themes. */
:root:not(.high-contrast) .portfolio-home .nav-wrapper {
  --color-bg: #050605;
  --color-surface: #131612;
  --color-surface-2: #1b1f18;
  --color-text: #f0f1e9;
  --color-text-muted: #a7ad9f;
  --color-text-faint: #959d8c;
  --color-accent-ink: #c0ee67;
  --color-divider: rgba(214, 222, 200, 0.13);
  --color-border: rgba(214, 222, 200, 0.2);
  color: var(--color-text);
}

@media (max-width: 62rem) {
  :root { --header-h: 4.75rem; }
  .nav-glass { gap: var(--space-2); }
  .nav-glass { display: flex; justify-content: space-between; }
  .nav-actions { order: 1; margin-left: auto; }
  html.js .menu-toggle { display: inline-flex; order: 2; }
  html.js .nav-links { display: none; position: absolute; top: calc(100% + 1px); right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; border: 0; border-radius: 0; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) var(--space-8) var(--space-5); border-bottom: 1px solid var(--color-divider); background: var(--color-bg); box-shadow: var(--shadow-lg); }
  html.js .nav-links.active { display: flex; }
  html.js .nav-heading { display: block; margin: 0; padding: var(--space-2) 0; color: var(--color-text-faint); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; }
  html.js .nav-links a { justify-content: space-between; min-height: 60px; padding: var(--space-2) 0; border-top: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); }
  html.js .nav-links a.active { box-shadow: none; background: transparent; color: var(--color-accent-ink); }
  html.js .nav-link-title { font: 500 var(--text-base)/1.3 var(--font-display); }
  html.js .nav-link-description { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
  html.js .nav-link-arrow { display: block; flex-shrink: 0; color: var(--color-text-faint); }
  html:not(.js) .nav-glass { flex-wrap: wrap; padding-block: var(--space-3); }
  html:not(.js) .nav-glass { display: flex; flex-wrap: wrap; }
  html:not(.js) .nav-links { flex-wrap: wrap; margin-left: 0; border-radius: var(--radius-lg); }
}
@media (max-width: 62rem) and (max-height: 32rem) {
  html.js .nav-heading, html.js .nav-link-description { display: none; }
  html.js .nav-links a { min-height: 44px; }
  .menu-open .a11y-launcher { display: none; }
}
@media (max-width: 26rem) {
  .brand-text { display: none; }
  html.js .nav-links { padding-inline: var(--space-5); }
}

/* Footer */
footer { margin-top: var(--space-16); border-top: 1px solid var(--color-divider); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-8); padding-block: var(--space-6); color: var(--color-text-faint); font-size: var(--text-xs); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.footer-links a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--color-text-muted); font-size: var(--text-sm); }
.footer-links a:hover { color: var(--color-text); }

/* Home: hero, a dark centred stage in both themes that leads with Alex. */
.hero { position: relative; isolation: isolate; }
.hero-stage { position: relative; overflow: hidden; padding-block: var(--space-16) var(--space-20); background: radial-gradient(55% 60% at 50% 100%, rgba(192, 238, 103, 0.16), transparent 72%), radial-gradient(35% 35% at 50% 95%, rgba(255, 246, 214, 0.08), transparent 70%), #050605; color: #f0f1e9; text-align: center; }
.hero-head { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.hero .announcement { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-6); padding: var(--space-2) var(--space-3); border: 1px solid rgba(240, 241, 233, 0.22); border-radius: var(--radius-full); color: #a7ad9f; font-size: var(--text-xs); font-weight: 500; }
.hero .announcement:hover { border-color: #a7ad9f; color: #f0f1e9; }
.hero .announcement .pill { padding-right: var(--space-3); border-right: 1px solid rgba(240, 241, 233, 0.22); color: #c0ee67; font-weight: 700; letter-spacing: 0.04em; }
.hero h1 { color: #f6f7f0; font-size: clamp(2.9rem, 1.2rem + 4.6vw, 5.5rem); line-height: 1; letter-spacing: -0.05em; }
.hero-tagline { margin-top: var(--space-3); color: #d8dbd0; font: 500 clamp(1.25rem, 1rem + 1vw, 2rem)/1.25 var(--font-display); letter-spacing: -0.03em; }
.hero-intro { max-width: 34rem; margin-top: var(--space-4); color: #a7ad9f; font-size: var(--text-base); line-height: 1.6; }
.hero .actions { justify-content: center; margin-top: var(--space-6); }
.btn.pill { border-radius: var(--radius-full); padding-inline: var(--space-6); }
.hero .btn.outline { border-color: rgba(192, 238, 103, 0.7); background: transparent; color: #c0ee67; }
.hero .btn.outline:hover { background: rgba(192, 238, 103, 0.1); }
.hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-10); margin-top: var(--space-10); list-style: none; }
.hero-proof li { display: grid; gap: var(--space-2); min-width: 7rem; }
.hero-proof strong { color: #f6f7f0; font: 500 clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem)/1 var(--font-display); letter-spacing: -0.04em; }
.hero-proof span { color: #a7ad9f; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.triad { max-width: 46rem; margin: var(--space-12) auto 0; }
.triad-diagram { width: 100%; max-width: 34rem; height: auto; margin: 0 auto; overflow: visible; }
.triad-node text { fill: #c0ee67; font: 600 30px var(--font-display); }
.triad-node .triad-term { fill: #f0f1e9; font: 500 19px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.triad-centre { fill: #f6f7f0; font: 500 44px var(--font-display); letter-spacing: -0.03em; }
.triad-centre-sub { fill: #a7ad9f; font: 500 13px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.triad-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-8) 0 0; text-align: left; }
.triad-key div { padding-top: var(--space-4); border-top: 1px solid rgba(240, 241, 233, 0.16); }
.triad-key dt { color: #c0ee67; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.triad-key dd { margin: var(--space-2) 0 0; color: #a7ad9f; font-size: var(--text-sm); line-height: 1.55; }
html.high-contrast .triad-diagram :is(path, circle) { stroke: #000000; }
html.high-contrast .triad-diagram circle { fill: #ffffff; }
html.high-contrast .triad-diagram text, html.high-contrast .triad-node text { fill: #000000; }
html.high-contrast .triad-key :is(dt, dd) { color: #000000; }
html.high-contrast .triad-key div { border-color: #000000; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-divider); color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.hero-bottom a { display: flex; align-items: center; gap: var(--space-5); min-height: 44px; }
.hero-bottom a:hover { color: var(--color-text); }
.hero-bottom .status { display: flex; align-items: center; gap: var(--space-2); }
html.high-contrast .hero-stage { background: #ffffff; color: #000000; }
html.high-contrast :is(.hero h1, .hero-tagline, .hero-intro, .hero-proof strong, .hero-proof span, .hero .announcement, .hero .announcement .pill, .hero .btn.outline) { color: #000000; border-color: #000000; }

/* Home: toolkit band */
.stack-band { padding-block: var(--space-10); border-block: 1px solid var(--color-divider); background: var(--color-surface); }
.stack-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.stack-row > p { max-width: 9rem; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; }
.stack-names { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: var(--space-4) var(--space-8); list-style: none; }
.stack-names li { color: var(--color-text-muted); font: 700 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.03em; }

/* Home: section heading row */
.section-top { display: flex; align-items: end; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-12); }
.section-top > p { max-width: 20rem; color: var(--color-text-muted); }

/* Home: case study cards with illustrative visuals */
.work { padding-block: var(--space-24) var(--space-20); }
.work-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-4); }
.feature { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.feature:hover { border-color: var(--color-border); }
.feature-copy { padding: var(--space-8); }
.feature-number { display: block; margin-bottom: var(--space-6); color: var(--color-text-faint); font-size: var(--text-xs); letter-spacing: 0.04em; }
.feature h3 { margin-bottom: var(--space-3); }
.feature h3 a::after { content: ""; position: absolute; inset: 0; }
.feature { position: relative; }
.feature p { max-width: 24rem; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; }
.feature .result { margin-top: var(--space-5); color: var(--color-text); font-size: var(--text-sm); font-weight: 500; }
.feature .result span { display: block; margin-bottom: var(--space-2); color: var(--color-text-faint); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.feature .text-link { margin-top: var(--space-4); }
.feature-visual { position: relative; display: flex; align-items: center; justify-content: center; height: 220px; margin-top: auto; overflow: hidden; }
.visual-caption { position: absolute; left: var(--space-8); right: var(--space-8); bottom: var(--space-5); display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: var(--text-xs); }
.log-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); width: 240px; height: 170px; transform: rotateX(50deg) rotateZ(-35deg); transform-style: preserve-3d; }
.feature-visual--logs { perspective: 600px; }
.log-grid i { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-offset); box-shadow: 5px 7px 0 color-mix(in srgb, var(--color-surface-offset) 70%, var(--color-text) 10%); }
.log-grid i.hit { border-color: #99bf53; background: var(--color-primary); box-shadow: 5px 7px 0 #526a2d; }
.target-rings, .guard-rings { display: grid; place-items: center; width: 150px; height: 150px; border: 1px solid var(--color-border); border-radius: var(--radius-full); box-shadow: 0 0 0 24px color-mix(in srgb, var(--color-border) 24%, transparent), 0 0 0 48px color-mix(in srgb, var(--color-border) 10%, transparent); }
.target-rings svg, .guard-rings svg { width: 56px; height: 56px; color: var(--color-accent-ink); }
.mini-chip { position: absolute; right: var(--space-5); bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.work-footnote { margin-top: var(--space-5); color: var(--color-text-faint); font-size: var(--text-xs); }

/* Home: evidence viewer */
.workflow { padding-block: var(--space-16) var(--space-24); border-bottom: 1px solid var(--color-divider); }
.workflow-grid { display: grid; grid-template-columns: 0.95fr 1.1fr; gap: var(--space-20); align-items: center; }
.workflow .section-title { margin-bottom: var(--space-6); }
.workflow-copy > p { max-width: 26rem; margin-bottom: var(--space-8); color: var(--color-text-muted); }
.usecase-tabs { display: flex; flex-direction: column; }
.usecase-tab { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: var(--space-4) var(--space-2) var(--space-4) 0; border: 0; border-top: 1px solid var(--color-divider); background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); text-align: left; }
.usecase-tab:last-child { border-bottom: 1px solid var(--color-divider); }
.usecase-tab:hover { background: var(--color-surface); color: var(--color-text); }
.usecase-tab[aria-selected="true"] { color: var(--color-text); font-weight: 700; }
.usecase-tab[aria-selected="true"] .tab-index { color: var(--color-accent-ink); }
.tab-index { margin-right: var(--space-4); color: var(--color-text-faint); font-size: var(--text-xs); }
.tab-arrow { color: var(--color-text-faint); }
.code-window { min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.code-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--color-divider); color: var(--color-text-muted); font-size: var(--text-xs); }
.code-filename { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); }
.file-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-accent-ink); }
.copy-code { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-2); border: 0; background: transparent; color: var(--color-text-muted); font-size: var(--text-xs); }
.copy-code:hover { color: var(--color-text); }
.code-lines { min-height: 16rem; margin: 0; padding: var(--space-6) var(--space-5); color: var(--color-code); font: var(--text-xs)/1.95 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.code-comment { color: var(--color-text-faint); }
.line-number { display: inline-block; width: 32px; color: var(--color-text-faint); user-select: none; }
.terminal { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text-muted); font: var(--text-xs)/1.8 var(--font-mono); }
.terminal-prompt { color: var(--color-accent-ink); }
.terminal-success { color: var(--color-text); }
.code-disclaimer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-divider); color: var(--color-text-faint); font-size: var(--text-xs); }

/* Home: questions */
.faq-section { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: var(--space-20); padding-block: var(--space-20); }
.faq-title .section-title { font-size: var(--text-xl); }
.faq-list details { border-bottom: 1px solid var(--color-divider); }
.faq-list details:first-child { border-top: 1px solid var(--color-divider); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; padding-block: var(--space-5); font-size: var(--text-base); list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--color-text-muted); font-size: var(--text-lg); }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { padding: 0 var(--space-6) var(--space-6) 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* Closing call to action */
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); }
.cta-panel .eyebrow { color: var(--color-on-primary); opacity: 0.8; }
.cta-panel h2 { font-size: var(--text-2xl); letter-spacing: -0.04em; }
.cta-panel .actions { flex-shrink: 0; }
.cta-panel .btn { border-color: var(--color-on-primary); background: var(--color-on-primary); color: var(--color-primary); white-space: nowrap; }
.cta-panel .btn:hover { background: #303d1b; }
.cta-panel .btn.ghost { background: transparent; color: var(--color-on-primary); }
.cta-panel .btn.ghost:hover { background: rgba(25, 34, 13, 0.08); }
html.high-contrast .cta-panel .btn { border-color: #ffffff; background: #ffffff; color: #000000; }
html.high-contrast .cta-panel .btn.ghost { background: transparent; color: #ffffff; }

/* Inner pages: shared */
.page-hero { padding-top: var(--space-16); }
.page-hero h1, .case-hero h1 { max-width: 20ch; font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem); letter-spacing: -0.05em; line-height: 1; }
.page-hero .lead, .case-hero .lead { max-width: 44rem; margin-top: var(--space-6); }
.page-hero .actions { margin-top: var(--space-8); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-12); margin-bottom: var(--space-10); }
.section-head > div { max-width: 44rem; }
.section-head h2 { max-width: 20ch; }
.section-head p:not(.eyebrow) { margin-top: var(--space-5); color: var(--color-text-muted); }
.panel { padding: var(--space-8); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.panel h3 { margin-bottom: var(--space-5); }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-12); align-items: start; }
.timeline { list-style: none; }
.timeline > li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2) var(--space-6); padding-block: var(--space-6); border-top: 1px solid var(--color-divider); }
.timeline > li:last-child { border-bottom: 1px solid var(--color-divider); }
.timeline__date { grid-row: span 3; color: var(--color-accent-ink); font: 500 var(--text-xs)/1.9 var(--font-mono); }
.timeline h3 { font-size: var(--text-lg); }
.timeline p, .timeline ul { grid-column: 2; color: var(--color-text-muted); font-size: var(--text-sm); }
.timeline ul { padding-left: 1.1rem; }
.timeline ul li + li { margin-top: var(--space-2); }
.cred-list { list-style: none; }
.cred-list li { display: grid; gap: 0.1rem; padding-block: var(--space-4); border-top: 1px solid var(--color-divider); }
.cred-list li:first-child { padding-top: 0; border-top: 0; }
.cred-list span { color: var(--color-text-muted); font-size: var(--text-sm); }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6) var(--space-8); padding: var(--space-12); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); }
.cta-band h2 { font-size: var(--text-xl); }
.cta-band p { max-width: 40rem; margin-top: var(--space-3); opacity: 0.85; }
.cta-band .btn { border-color: var(--color-on-primary); background: var(--color-on-primary); color: var(--color-primary); }
.cta-band .btn:hover { background: #303d1b; }
.cta-band .btn.primary { background: var(--color-on-primary); color: var(--color-primary); }
html.high-contrast .cta-band .btn { border-color: #ffffff; background: #ffffff; color: #000000; }
.proof-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--color-divider); }
.proof-strip li { padding: var(--space-6) var(--space-6) var(--space-6) 0; border-bottom: 1px solid var(--color-divider); }
.proof-strip li + li { padding-left: var(--space-6); border-left: 1px solid var(--color-divider); }
.proof-strip strong { display: block; font: 500 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.04em; }
.proof-strip span { display: block; margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
#practical-learning .lead { margin-top: var(--space-5); }
#practical-learning .inline-link { margin-top: var(--space-4); }

/* About page skills */
.skill-ledger { display: grid; }
.skill-entry { display: grid; grid-template-columns: 3rem minmax(10rem, 0.45fr) minmax(0, 1fr); gap: var(--space-2) var(--space-6); align-items: baseline; padding-block: var(--space-6); border-top: 1px solid var(--color-divider); }
.skill-entry:last-child { border-bottom: 1px solid var(--color-divider); }
.skill-entry > span { color: var(--color-text-faint); font-size: var(--text-xs); }
.skill-entry p { color: var(--color-text-muted); }
.skill-entry p a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--color-text); font-weight: 500; }

/* Projects: search and filters */
.project-explorer { margin-top: var(--space-10); padding: var(--space-6); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.project-explorer[hidden] { display: none; }
.project-search label, .form-field label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 500; }
.search-field { position: relative; }
.search-field svg { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.search-field input { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4) var(--space-3) 2.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.search-field input::placeholder { color: var(--color-text-faint); opacity: 1; }
.project-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.project-filters button, .reset-search { min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); }
.project-filters button:hover, .reset-search:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.project-filters button[aria-pressed="true"] { border-color: transparent; background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.search-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.search-empty { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.search-empty .h3 { font-size: var(--text-lg); }
.search-empty p { margin-top: var(--space-2); color: var(--color-text-muted); }
[data-project][hidden], [data-project-group][hidden], .search-empty[hidden], .reset-search[hidden] { display: none !important; }
.case-study-list { display: grid; gap: var(--space-4); }
.case-study-row { display: grid; grid-template-columns: 14rem minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.case-study-row:hover { border-color: var(--color-border); background: var(--color-surface-2); }
.case-study-row__preview { overflow: hidden; border-radius: var(--radius-sm); }
.case-study-row__content { display: grid; gap: var(--space-3); }
.case-study-row__content p { color: var(--color-text-muted); font-size: var(--text-sm); }
.case-study-row__arrow { padding-right: var(--space-4); color: var(--color-text-muted); font-size: var(--text-lg); }
.lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.lab-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.lab-card .eyebrow { margin-bottom: 0; }
.lab-card p:not(.eyebrow) { color: var(--color-text-muted); font-size: var(--text-sm); }
.lab-card .text-link { margin-top: auto; }

/* Case study pages */
.project-breadcrumb { padding-top: var(--space-6); }
.project-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-muted); font-size: var(--text-sm); }
.project-breadcrumb a:hover { color: var(--color-text); }
.case-hero { padding-top: var(--space-8); }
.case-hero .tag-list { margin-top: var(--space-6); }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-12) 0 0; border-block: 1px solid var(--color-divider); }
.glance div { padding: var(--space-5) var(--space-5) var(--space-5) 0; }
.glance div + div { padding-left: var(--space-5); border-left: 1px solid var(--color-divider); }
.glance dt { color: var(--color-text-faint); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.glance dd { margin: var(--space-2) 0 0; font-weight: 500; line-height: 1.45; }
.tldr { margin-top: var(--space-6); padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-surface); }
.tldr h2 { margin-bottom: var(--space-2); color: var(--color-accent-ink); font: 600 var(--text-xs)/1.5 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.case-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-16); align-items: start; }
.case-toc { position: sticky; top: var(--space-6); }
.case-toc p { margin-bottom: var(--space-3); color: var(--color-text-faint); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.case-toc ol { list-style: none; border-left: 1px solid var(--color-divider); }
.case-toc a { display: flex; align-items: center; min-height: 40px; padding-left: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.case-toc a:hover { color: var(--color-text); }
.case-main { display: grid; gap: var(--space-16); min-width: 0; }
.case-section h2 { font-size: var(--text-xl); }
.case-section > p:not(.eyebrow) { max-width: 44rem; margin-top: var(--space-4); color: var(--color-text-muted); }
.steps { display: grid; margin-top: var(--space-6); list-style: none; counter-reset: step; }
.steps li { position: relative; padding: var(--space-4) 0 var(--space-4) 3.5rem; border-top: 1px solid var(--color-divider); color: var(--color-text-muted); counter-increment: step; }
.steps li:last-child { border-bottom: 1px solid var(--color-divider); }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: var(--space-4); color: var(--color-accent-ink); font: 500 var(--text-xs)/1.9 var(--font-mono); }
.steps strong { color: var(--color-text); }
.finding-list { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.finding { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.finding__index { color: var(--color-text-faint); font-size: var(--text-xs); }
.finding p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.finding .tag-list { margin-top: var(--space-4); }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.case-section .table-wrap { margin-top: var(--space-6); }
.evidence-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.evidence-table caption { text-align: left; }
.evidence-table th, .evidence-table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-divider); text-align: left; vertical-align: top; }
.evidence-table tbody tr:last-child > * { border-bottom: 0; }
.evidence-table thead th { color: var(--color-text-faint); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.evidence-table tbody th { font-weight: 600; }
.evidence-table td { color: var(--color-text-muted); }
.case-section .evidence-table tbody th { color: var(--color-accent-ink); font: 500 var(--text-xs)/1.7 var(--font-mono); white-space: nowrap; }
.severity { display: inline-block; margin-left: var(--space-2); padding: 0.05rem 0.45rem; border: 1px solid currentColor; border-radius: var(--radius-sm); font: 600 0.7rem/1.6 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.severity--high { color: var(--color-critical); }
.outcome-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.outcome-item { padding: var(--space-6); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.outcome-item strong { display: block; font: 500 var(--text-lg)/1.25 var(--font-display); letter-spacing: -0.015em; }
.outcome-item span { display: block; margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.case-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); }
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.topic-grid article { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.topic-grid .eyebrow { margin-bottom: 0; }
.topic-grid p:not(.eyebrow) { color: var(--color-text-muted); font-size: var(--text-sm); }
.topic-grid .tag-list { margin-top: auto; padding-top: var(--space-2); }

/* Contact */
.contact-shell { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-12); align-items: start; }
.contact-intro > p { margin-top: var(--space-4); color: var(--color-text-muted); }
.contact-links { margin-top: var(--space-6); }
.contact-link-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-4); align-items: center; min-height: 56px; border-top: 1px solid var(--color-divider); }
.contact-link-row:last-child { border-bottom: 1px solid var(--color-divider); }
.contact-link-row span { color: var(--color-text-faint); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.contact-link-row a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.form-panel > p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.form-panel > p strong { color: var(--color-text); }
.form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.form-field { display: grid; align-content: start; min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); font-size: var(--text-base); }
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { outline-offset: 1px; }
.form-hint { color: var(--color-text-faint); font-size: var(--text-xs); font-weight: 400; }
.form-field .form-hint { margin-top: var(--space-2); }
.message-meta { display: flex; justify-content: space-between; gap: var(--space-4); }
.message-count { flex-shrink: 0; margin-top: var(--space-2); font-family: var(--font-mono); }
.form-note { margin: var(--space-6) 0 var(--space-4); color: var(--color-text-faint); font-size: var(--text-xs); }

/* Prose pages */
.prose { max-width: 46rem; }
.prose section + section { margin-top: var(--space-12); }
.prose h2 { font-size: var(--text-xl); }
.prose p, .prose ul { margin-top: var(--space-4); color: var(--color-text-muted); }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: var(--space-2); }

/* Accessibility settings: a fixed base size keeps the controls still while page text scales. */
.a11y-launcher { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface-2); color: var(--color-text); box-shadow: var(--shadow-lg); }
.a11y-launcher:hover { border-color: var(--color-text-muted); }
.a11y-launcher__icon { width: 24px; height: 24px; }
.a11y-panel { position: fixed; right: 16px; bottom: 76px; z-index: 61; width: min(352px, calc(100vw - 32px)); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 18px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-lg); font-size: 16px; }
.a11y-panel[data-open="false"] { display: none; }
.a11y-panel__header { display: flex; justify-content: space-between; gap: 16px; }
.a11y-panel__title { font: 500 1.05em/1.3 var(--font-display); letter-spacing: -0.02em; }
.a11y-panel__subtitle { margin-top: 4px; color: var(--color-text-muted); font-size: 0.85em; }
.a11y-panel__close { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: 4px; background: transparent; font-size: 1.4em; line-height: 1; }
.a11y-panel__section { margin-top: 16px; }
.a11y-panel__section-label { margin-bottom: 8px; color: var(--color-text-faint); font-size: 0.75em; letter-spacing: 0.12em; text-transform: uppercase; }
.a11y-panel__actions { display: grid; gap: 6px; }
.a11y-panel__action { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 4px; background: transparent; text-align: left; }
.a11y-panel__action span:last-child { color: var(--color-text-faint); font: 500 0.75em/1 var(--font-mono); }
.a11y-panel__action[aria-pressed="true"] { border-color: transparent; background: var(--color-primary); color: var(--color-on-primary); }
.a11y-panel__action[aria-pressed="true"] span:last-child { color: var(--color-on-primary); }
.a11y-panel__text { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.a11y-panel__text button { min-height: 44px; border: 1px solid var(--color-border); border-radius: 4px; background: transparent; font-weight: 700; }
.a11y-panel__text button:disabled { opacity: 0.5; cursor: not-allowed; }
.a11y-status { min-height: 2.9em; margin-top: 14px; color: var(--color-text-muted); font-size: 0.82em; line-height: 1.45; }
@media (max-height: 32rem) {
  .a11y-panel { top: 16px; bottom: auto; right: 76px; width: min(352px, calc(100vw - 96px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
}

/* Responsive */
@media (max-width: 68.75rem) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid .feature:first-child { grid-column: 1 / -1; }
  .workflow-grid { gap: var(--space-10); }
}
@media (max-width: 62rem) {
  .split, .contact-shell { grid-template-columns: minmax(0, 1fr); }
  .case-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .case-toc { position: static; }
  .case-toc ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); border-left: 0; }
  .case-toc a { padding-left: 0; min-height: 44px; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance div:nth-child(3) { padding-left: 0; border-left: 0; }
  .glance div:nth-child(n+3) { border-top: 1px solid var(--color-divider); }
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 50rem) {
  .hero-stage { padding-top: var(--space-12); }
  .hero-bottom { padding-block: var(--space-3); }
  .hero-bottom .status { display: none; }
  .stack-row { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .stack-row > p { max-width: none; }
  .stack-names { justify-content: flex-start; width: 100%; }
  .stack-names li { font-size: var(--text-base); }
  .work { padding-block: var(--space-16); }
  .section-top { display: block; }
  .section-top > p { max-width: 28rem; margin-top: var(--space-6); }
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-copy { padding: var(--space-6); }
  .workflow { padding-block: var(--space-6) var(--space-16); }
  .workflow-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .usecase-tabs { flex-direction: row; gap: var(--space-3); }
  .usecase-tab { flex: 1; border-bottom: 1px solid var(--color-divider); }
  .tab-index, .tab-arrow { display: none; }
  .faq-section { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-16); }
  .cta-panel, .cta-band { padding: var(--space-10); }
  .case-study-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .case-study-row__arrow { display: none; }
  .lab-grid, .outcome-list, .form-fields { grid-template-columns: minmax(0, 1fr); }
  .skill-entry { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .skill-entry p { grid-column: 2; }
  .timeline > li { grid-template-columns: minmax(0, 1fr); }
  .timeline__date { grid-row: auto; }
  .timeline p, .timeline ul { grid-column: 1; }
}
@media (max-width: 33.75rem) {
  .hero .announcement { border-radius: var(--radius-lg); }
  .hero .announcement .pill { width: 100%; padding-right: 0; border-right: 0; }
  .hero-proof { gap: var(--space-5) var(--space-6); }
  .triad-key { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .hero-proof li { min-width: 40%; }
  .hero-bottom > span { max-width: 11rem; letter-spacing: 0.03em; }
  .cta-panel { flex-direction: column; align-items: flex-start; padding: var(--space-8); }
  .cta-band { padding: var(--space-8); }
  .usecase-tab { font-size: var(--text-xs); }
  .code-lines { padding-inline: var(--space-3); }
  .line-number { width: 24px; }
  .glance { grid-template-columns: minmax(0, 1fr); }
  .glance div, .glance div + div { padding-left: 0; border-left: 0; }
  .glance div + div { border-top: 1px solid var(--color-divider); }
  .proof-strip { grid-template-columns: minmax(0, 1fr); }
  .proof-strip li + li { padding-left: 0; border-left: 0; }
  .contact-link-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: var(--space-2); }
  .actions .btn { width: 100%; }
  .evidence-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .evidence-table tr { display: grid; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--color-divider); }
  .evidence-table tbody tr:last-child { border-bottom: 0; }
  .evidence-table th, .evidence-table td { display: block; padding: 0; border: 0; }
  .case-section .evidence-table tbody th { white-space: normal; }
}

/* Motion, forced colours and print */
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
@media (forced-colors: active) {
  .status-dot, .file-dot { background: CanvasText; }
  .project-filters button[aria-pressed="true"], .a11y-panel__action[aria-pressed="true"], .usecase-tab[aria-selected="true"] { outline: 3px solid ButtonText; }
  .nav-links a.active { outline: 2px solid LinkText; outline-offset: -3px; }
}
@media print {
  .nav-wrapper, .a11y-widget, .project-explorer, .case-toc, [data-theme-toggle] { display: none !important; }
  :root { --color-bg: #fff; --color-surface: #fff; --color-surface-2: #fff; --color-text: #000; --color-text-muted: #333; --color-text-faint: #444; --color-accent-ink: #000; --color-primary: #fff; --color-on-primary: #000; --color-divider: #bbb; --color-border: #999; }
  .case-layout, .split, .workflow-grid, .faq-section { display: block; }
  [data-project][hidden], [data-project-group][hidden] { display: block !important; }
  .feature, .finding, .case-study-row { break-inside: avoid; }
}