/* 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: one design layer for every page.
   Layout follows a recruiter-first order: who and what role, proof, best work,
   skills tied to evidence, credentials, then a way to get in touch. */

:root {
  --bg: #0b1117;
  --surface: #111a22;
  --surface-2: #16222c;
  --line: #24343f;
  --line-strong: #34495a;
  --text: #e8eef2;
  --muted: #a3b3bf;
  --faint: #8597a5;
  --accent: #74e0c2;
  --on-accent: #062019;
  --offensive: #b4bcff;
  --threat: #f2c879;
  --display: "Space Grotesk", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --radius: .75rem;
  --radius-sm: .45rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --space: clamp(3.5rem, 8vw, 6.5rem);
  --header-h: 4.25rem;
  --text-scale: 1;
  color-scheme: dark;
}

html.text-scale-90 { --text-scale: .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: a plain black-on-white reading mode. */
html.high-contrast {
  --bg: #fff;
  --surface: #fff;
  --surface-2: #f2f2f2;
  --line: #000;
  --line-strong: #000;
  --text: #000;
  --muted: #000;
  --faint: #1f1f1f;
  --accent: #00513f;
  --on-accent: #fff;
  --offensive: #2b2f8f;
  --threat: #6b4300;
  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 { --display: "OpenDyslexic", var(--body); --body: "OpenDyslexic", "IBM Plex Sans", "Segoe UI", sans-serif; --mono: "OpenDyslexic", monospace; }
html.open-dyslexic body { letter-spacing: .01em; word-spacing: .08em; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(100% * var(--text-scale)); -webkit-text-size-adjust: 100%; 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(--bg); color: var(--text); font: 400 1rem/1.65 var(--body); overflow-wrap: break-word; text-rendering: optimizeLegibility; }
main { flex: 1; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.75rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p a, li a, td a, .prose a { color: var(--accent); }
strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

.container { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; }
.section { padding-block: var(--space) 0; }
.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: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 1rem; }

.eyebrow { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; color: var(--accent); font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.lead { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; }
.muted { color: var(--muted); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .7rem 1.2rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text); font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none; text-align: center; transition: background-color .15s, border-color .15s, color .15s; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.inline-link, .text-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--accent); font-weight: 600; font-size: .95rem; text-decoration: none; }
.inline-link:hover, .text-link:hover { text-decoration: underline; }

.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; }
.tag { display: inline-flex; align-items: center; padding: .2rem .55rem; border: 1px solid var(--line-strong); border-radius: .3rem; color: var(--muted); font: 500 .74rem/1.5 var(--mono); }
.tag--attack { color: var(--threat); border-color: color-mix(in srgb, var(--threat) 45%, transparent); }

/* Header and navigation */
.nav-wrapper { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.nav-glass { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; text-decoration: none; }
.brand-mark img { width: 2.25rem; height: 2.25rem; border-radius: .45rem; }
.brand-name { font: 600 1rem/1.2 var(--display); }
.brand-sub { color: var(--muted); font: 500 .66rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: .2rem; }
.nav-links a { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; padding: .5rem .85rem; border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; font-size: .95rem; text-decoration: none; }
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav-link-title { display: block; }
.nav-heading, .nav-link-description, .nav-link-arrow { display: none; }
.menu-toggle { display: none; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; }
.menu-label { font-weight: 500; font-size: .9rem; color: var(--text); }
.menu-symbol path { transition: transform .16s 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: 62rem) {
  html.js .menu-toggle { display: inline-flex; }
  html.js .nav-links { display: none; position: absolute; right: 0; top: calc(100% + .5rem); flex-direction: column; align-items: stretch; gap: .2rem; width: min(24rem, 100%); max-height: calc(100vh - var(--header-h) - 1.25rem); max-height: calc(100dvh - var(--header-h) - 1.25rem); overflow-y: auto; overscroll-behavior: contain; padding: .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: 0 18px 48px #0007; }
  html.js .nav-links.active { display: flex; }
  html.js .nav-heading { display: block; margin: 0; padding: .4rem .7rem .6rem; color: var(--faint); font: 500 .7rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  html.js .nav-links a { justify-content: space-between; min-height: 56px; padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--text); }
  html.js .nav-links a.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); color: var(--accent); }
  html.js .nav-link-title { font: 600 1rem/1.35 var(--display); }
  html.js .nav-link-description { display: block; color: var(--muted); font-size: .8rem; line-height: 1.45; }
  html.js .nav-link-arrow { display: block; flex-shrink: 0; color: var(--muted); }
  html:not(.js) .nav-glass { flex-wrap: wrap; padding-block: .6rem; }
  html:not(.js) .nav-links { flex-wrap: wrap; }
  html:not(.js) .nav-wrapper { position: static; }
}
@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; }
}

/* Footer */
footer { margin-top: var(--space); border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.25rem; color: var(--muted); font-size: .88rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-links a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }

/* Home: hero */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.availability { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; padding: .35rem .8rem .35rem .65rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); font-size: .85rem; font-weight: 500; }
.status-dot { width: .55rem; height: .55rem; flex-shrink: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.hero__name { margin-bottom: .6rem; color: var(--muted); font: 500 1rem/1.4 var(--mono); }
.hero h1 { max-width: 18ch; font-size: clamp(2.1rem, 5vw, 3.6rem); }
.hero h1 span { color: var(--accent); }
.hero .lead { max-width: 38rem; margin-top: 1.25rem; }
.hero .actions { margin-top: 1.75rem; }
.hero__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: .75rem; list-style: none; }
.hero__links a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: var(--muted); font-size: .9rem; text-decoration: none; }
.hero__links a:hover { color: var(--text); text-decoration: underline; }

/* Analyst snapshot: a terminal-style quick read of role, tools and status. */
.snapshot { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: 0 24px 60px #0005; }
.snapshot__bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--faint); font: 500 .75rem/1 var(--mono); }
.snapshot__bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line-strong); }
.snapshot__bar i:first-child { background: var(--accent); }
.snapshot__bar span { margin-left: .5rem; }
.snapshot dl { margin: 0; padding: 1.1rem 1.25rem 1.3rem; font-family: var(--mono); font-size: .86rem; }
.snapshot dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding-block: .5rem; border-bottom: 1px dashed var(--line); }
.snapshot dl div:last-child { border-bottom: 0; }
.snapshot dt { color: var(--accent); }
.snapshot dt::after { content: ":"; }
.snapshot dd { margin: 0; color: var(--text); }

/* Proof strip */
.proof-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2.5rem, 6vw, 4rem); border: 1px solid var(--line); border-radius: var(--radius); list-style: none; }
.proof-strip li { padding: 1.2rem 1.25rem; border-left: 1px solid var(--line); }
.proof-strip li:first-child { border-left: 0; }
.proof-strip strong { display: block; font: 600 clamp(1.5rem, 3vw, 2rem)/1.1 var(--display); }
.proof-strip span { display: block; margin-top: .35rem; color: var(--muted); font-size: .85rem; line-height: 1.45; }

/* Section heading */
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.section-head > div { max-width: 44rem; }
.section-head p:not(.eyebrow) { margin-top: .8rem; color: var(--muted); }

/* Case study cards: problem, approach, outcome */
.case-feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.case-feature__art { position: relative; background: #12222d; border-right: 1px solid var(--line); }
.case-feature__art { display: grid; place-items: center; }
.case-feature__art img { width: 100%; height: auto; }
.case-feature__body { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2.25rem); }
.kind { display: inline-flex; width: fit-content; padding: .2rem .55rem; border-radius: .3rem; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 500 .72rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.kind--offensive { background: color-mix(in srgb, var(--offensive) 14%, transparent); color: var(--offensive); }
.kind--threat { background: color-mix(in srgb, var(--threat) 14%, transparent); color: var(--threat); }
.case-feature h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.pao { display: grid; gap: .8rem; margin: 0; }
.pao div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: .75rem; }
.pao dt { color: var(--faint); font: 500 .74rem/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pao dd { margin: 0; color: var(--muted); font-size: .95rem; }
.pao dd strong { color: var(--text); }
.case-feature .actions { margin-top: auto; padding-top: .4rem; }

.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.case-card { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.case-card .pao div { grid-template-columns: 1fr; gap: .1rem; }
.case-card .text-link { margin-top: auto; }

/* Skills mapped to evidence */
.evidence-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.evidence-table caption { text-align: left; }
.evidence-table th, .evidence-table td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.evidence-table thead th { color: var(--faint); font: 500 .74rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--line-strong); }
.evidence-table tbody th { font: 600 1rem/1.4 var(--display); width: 28%; }
.evidence-table td:nth-child(2) { color: var(--muted); }
.evidence-table td a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-block: -.7rem; font-weight: 500; text-decoration: none; }
.evidence-table td a:hover { text-decoration: underline; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.table-wrap .evidence-table tbody tr:last-child > * { border-bottom: 0; }

.proof-strip--stack { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof-strip--stack li:nth-child(n) { border-top: 0; }
.proof-strip--stack li:nth-child(2) { border-left: 1px solid var(--line); }
#practical-learning .lead { margin-top: 1rem; }
#practical-learning .inline-link { margin-top: 1rem; }

/* Credentials and timeline */
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.timeline { list-style: none; border-left: 1px solid var(--line-strong); }
.timeline > li { position: relative; padding: 0 0 1.75rem 1.5rem; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before { content: ""; position: absolute; left: -.36rem; top: .4rem; width: .7rem; height: .7rem; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); }
.timeline__date { display: block; margin-bottom: .25rem; color: var(--accent); font: 500 .8rem/1.5 var(--mono); }
.timeline h3 { font-size: 1.1rem; }
.timeline p { margin-top: .4rem; color: var(--muted); font-size: .95rem; }
.timeline ul { margin-top: .6rem; padding-left: 1.1rem; color: var(--muted); font-size: .95rem; }
.timeline ul li + li { margin-top: .3rem; }
.panel { padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.panel h3 { margin-bottom: 1rem; }
.cred-list { list-style: none; }
.cred-list li { display: grid; gap: .1rem; padding-block: .75rem; border-top: 1px solid var(--line); }
.cred-list li:first-child { border-top: 0; padding-top: 0; }
.cred-list strong { font-size: .98rem; }
.cred-list span { color: var(--muted); font-size: .88rem; }
.panel + .panel { margin-top: 1.25rem; }

/* Closing call to action */
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 60%); }
.cta-band h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.cta-band p { margin-top: .5rem; color: var(--muted); }
html.high-contrast .cta-band { background: var(--surface); }

/* Inner page heading */
.page-hero { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.page-hero h1 { max-width: 22ch; }
.page-hero .lead { max-width: 44rem; margin-top: 1rem; }
.page-hero .actions { margin-top: 1.75rem; }

/* Projects: search and filters */
.project-explorer { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.project-explorer[hidden] { display: none; }
.project-search label { display: block; margin-bottom: .45rem; font-size: .9rem; font-weight: 500; }
.search-field { position: relative; }
.search-field svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-field input { width: 100%; min-height: 48px; padding: .7rem 1rem .7rem 2.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); }
.search-field input::placeholder { color: var(--faint); opacity: 1; }
.project-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.project-filters button, .reset-search { min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: .9rem; cursor: pointer; }
.project-filters button:hover, .reset-search:hover { border-color: var(--accent); color: var(--text); }
.project-filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.search-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; color: var(--muted); font-size: .9rem; }
.search-empty { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.search-empty p { margin-top: .35rem; color: var(--muted); }
.search-empty .h3 { font-size: 1.15rem; }
[data-project][hidden], [data-project-group][hidden], .search-empty[hidden], .reset-search[hidden] { display: none !important; }

.case-study-list { display: grid; gap: 1rem; }
.case-study-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: border-color .15s; }
.case-study-row:hover { border-color: var(--accent); }
.case-study-row__preview { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.case-study-row__content { display: grid; gap: .55rem; }
.case-study-row__content p { color: var(--muted); font-size: .95rem; }
.case-study-row__arrow { padding-right: .5rem; color: var(--accent); font-size: 1.3rem; }
.lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lab-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.lab-card p:not(.eyebrow) { color: var(--muted); font-size: .95rem; }
.lab-card .eyebrow { margin-bottom: 0; }
.lab-card .text-link { margin-top: auto; }

/* Case study pages */
.project-breadcrumb { padding-top: 1.25rem; }
.project-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: .9rem; text-decoration: none; }
.project-breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.case-hero { padding-top: clamp(1rem, 3vw, 2rem); }
.case-hero .lead { max-width: 46rem; margin-top: 1rem; }
.case-hero .tag-list { margin-top: 1.25rem; }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(2rem, 4vw, 2.75rem) 0 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.glance div { padding: 1rem 1.15rem; border-left: 1px solid var(--line); }
.glance div:first-child { border-left: 0; }
.glance dt { color: var(--faint); font: 500 .72rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.glance dd { margin: .3rem 0 0; font-weight: 500; font-size: .95rem; line-height: 1.45; }

.tldr { margin-top: 1.25rem; padding: 1.15rem 1.3rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-left-width: 4px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.tldr h2 { margin-bottom: .4rem; color: var(--accent); font: 500 .78rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tldr p { color: var(--text); }
html.high-contrast .tldr { background: var(--surface); }

.case-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.case-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.case-toc p { margin-bottom: .5rem; color: var(--faint); font: 500 .72rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.case-toc ol { list-style: none; border-left: 1px solid var(--line); }
.case-toc a { display: flex; align-items: center; min-height: 40px; padding-left: 1rem; color: var(--muted); font-size: .92rem; text-decoration: none; }
.case-toc a:hover { color: var(--accent); }
.case-main { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); min-width: 0; }
.case-section h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.case-section > p:not(.eyebrow) { max-width: 44rem; margin-top: .9rem; color: var(--muted); }
.steps { display: grid; gap: .75rem; margin-top: 1.25rem; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: .9rem 1rem .9rem 3.4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 1rem; top: .95rem; color: var(--accent); font: 500 .85rem/1.6 var(--mono); }
.steps strong { color: var(--text); }
.finding-list { display: grid; gap: 1rem; margin-top: 1.25rem; }
.finding { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.finding__index { color: var(--accent); font: 500 .9rem/1.6 var(--mono); }
.finding p { margin-top: .45rem; color: var(--muted); }
.finding .tag-list { margin-top: .85rem; }
.case-section .table-wrap { margin-top: 1.25rem; overflow-x: auto; }
.case-section .evidence-table tbody th { width: auto; font: 500 .9rem/1.5 var(--mono); color: var(--threat); white-space: nowrap; }
.severity { display: inline-block; padding: .1rem .5rem; border-radius: .3rem; font: 600 .74rem/1.6 var(--mono); text-transform: uppercase; }
.severity--high { background: color-mix(in srgb, #ff9a5c 18%, transparent); color: #ffb98c; }
html.high-contrast .severity--high { background: transparent; border: 1px solid #000; color: #000; }
.outcome-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.outcome-item { padding: 1.25rem; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); }
.outcome-item strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.outcome-item span { display: block; margin-top: .4rem; color: var(--muted); font-size: .95rem; }
.case-actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.topic-grid article { display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.topic-grid h3 { font-size: 1.1rem; }
.topic-grid p { color: var(--muted); font-size: .95rem; }
.topic-grid .tag-list { margin-top: auto; padding-top: .4rem; }

/* About page skills */
.skill-ledger { display: grid; border-top: 1px solid var(--line); }
.skill-entry { display: grid; grid-template-columns: 2.5rem minmax(9rem, .45fr) minmax(0, 1fr); gap: .5rem 1.25rem; align-items: baseline; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.skill-entry > span { color: var(--accent); font: 500 .85rem/1.5 var(--mono); }
.skill-entry p { color: var(--muted); }
.skill-entry p a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 500; text-decoration: none; }
.skill-entry p a:hover { text-decoration: underline; }

/* Contact */
.contact-shell { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.contact-links { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.contact-link-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); }
.contact-link-row span { color: var(--faint); font: 500 .76rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.contact-link-row a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 500; overflow-wrap: anywhere; }
.contact-intro > p { margin-top: .8rem; color: var(--muted); }
.form-panel > p { margin-top: .6rem; color: var(--muted); font-size: .95rem; }
.form-panel > p strong { color: var(--text); }
.form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.form-field { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-weight: 500; font-size: .92rem; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); }
.form-field textarea { resize: vertical; min-height: 9rem; }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { border-color: var(--accent); }
.form-hint { color: var(--muted); font-size: .84rem; font-weight: 400; }
.message-meta { display: flex; justify-content: space-between; gap: 1rem; }
.message-count { flex-shrink: 0; font-family: var(--mono); }
.form-note { margin: 1.25rem 0 1rem; color: var(--muted); font-size: .85rem; }

/* Prose pages */
.prose { max-width: 46rem; }
.prose section + section { margin-top: 2.5rem; }
.prose h2 { font-size: clamp(1.3rem, 2.5vw, 1.65rem); }
.prose p, .prose ul { margin-top: .9rem; color: var(--muted); }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: .5rem; }

/* Accessibility settings: a fixed base size keeps the controls still while page text scales. */
.a11y-launcher { position: fixed; right: 1em; bottom: 1em; z-index: 60; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--accent); border-radius: 50%; background: var(--surface); color: var(--accent); box-shadow: 0 6px 18px #0005; cursor: pointer; }
.a11y-launcher__icon { width: 26px; height: 26px; }
.a11y-panel { font-size: 16px; position: fixed; right: 1em; bottom: 4.75em; z-index: 61; width: min(22em, calc(100vw - 2em)); max-height: calc(100vh - 6em); max-height: calc(100dvh - 6em); overflow-y: auto; overscroll-behavior: contain; padding: 1.1em; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: 0 18px 48px #0008; }
.a11y-panel[data-open="false"] { display: none; }
.a11y-panel__header { display: flex; justify-content: space-between; gap: 1em; }
.a11y-panel__title { font: 600 1.05em/1.3 var(--display); }
.a11y-panel__subtitle { margin-top: .25em; color: var(--muted); font-size: .85em; }
.a11y-panel__close { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; font-size: 1.4em; line-height: 1; cursor: pointer; }
.a11y-panel__section { margin-top: 1em; }
.a11y-panel__section-label { margin-bottom: .45em; color: var(--faint); font: 500 .72em/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.a11y-panel__actions { display: grid; gap: .4em; }
.a11y-panel__action { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: .5em .8em; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.a11y-panel__action span:last-child { color: var(--muted); font: 500 .75em/1 var(--mono); }
.a11y-panel__action[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.a11y-panel__action[aria-pressed="true"] span:last-child { color: var(--accent); }
.a11y-panel__text { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.a11y-panel__text button { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; font-weight: 600; cursor: pointer; }
.a11y-panel__text button:disabled { opacity: .5; cursor: not-allowed; }
.a11y-status { min-height: 2.9em; margin-top: .9em; color: var(--muted); font-size: .82em; line-height: 1.45; }
@media (max-height: 32em) {
  .a11y-panel { top: 1em; bottom: auto; right: 4.75em; width: min(22em, calc(100vw - 6em)); max-height: calc(100vh - 2em); max-height: calc(100dvh - 2em); }
}

/* Responsive */
@media (max-width: 62rem) {
  .hero__grid, .split, .contact-shell { grid-template-columns: minmax(0, 1fr); }
  .proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-strip li:nth-child(3) { border-left: 0; }
  .proof-strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .case-feature { grid-template-columns: minmax(0, 1fr); }
  .case-feature__art { border-right: 0; border-bottom: 1px solid var(--line); }
  .case-layout { grid-template-columns: minmax(0, 1fr); }
  .case-toc { position: static; }
  .case-toc ol { display: flex; flex-wrap: wrap; gap: 0 .25rem; border-left: 0; }
  .case-toc a { padding: 0 .75rem 0 0; min-height: 44px; }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance div:nth-child(3) { border-left: 0; }
  .glance div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 44rem) {
  .case-grid, .lab-grid, .outcome-list, .form-fields { grid-template-columns: minmax(0, 1fr); }
  .case-study-row { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .case-study-row__arrow { display: none; }
  .pao div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .snapshot dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .skill-entry { grid-template-columns: 2rem minmax(0, 1fr); }
  .skill-entry p { grid-column: 2; }
  .evidence-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .evidence-table tr { display: grid; gap: .3rem; padding: 1rem; border-bottom: 1px solid var(--line); }
  .evidence-table tbody tr:last-child { border-bottom: 0; }
  .evidence-table th, .evidence-table td { display: block; padding: 0; border: 0; }
  .evidence-table tbody th { width: auto; }
  .evidence-table td a { margin-block: 0; }
  .case-section .evidence-table tbody th { white-space: normal; }
  .brand-sub { display: none; }
}
@media (max-width: 22rem) {
  .proof-strip, .glance { grid-template-columns: minmax(0, 1fr); }
  .proof-strip li, .glance div { border-left: 0 !important; }
  .proof-strip li + li, .glance div + div { border-top: 1px solid var(--line); }
  .actions .btn { width: 100%; }
  .contact-link-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: .5rem; }
}

/* Motion and forced colours */
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: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .status-dot, .timeline > li::before { background: CanvasText; }
  .project-filters button[aria-pressed="true"], .a11y-panel__action[aria-pressed="true"] { border: 3px solid ButtonText; }
  .nav-links a.active { outline: 2px solid LinkText; outline-offset: -3px; }
}

@media print {
  .nav-wrapper, .a11y-widget, .project-explorer, .case-toc, .back-to-top { display: none !important; }
  :root { --bg: #fff; --surface: #fff; --surface-2: #fff; --text: #000; --muted: #333; --faint: #444; --accent: #0b5c4a; --line: #bbb; --line-strong: #999; }
  .case-layout, .split, .hero__grid { display: block; }
  [data-project][hidden], [data-project-group][hidden] { display: block !important; }
  .case-feature, .case-card, .finding, .case-study-row { break-inside: avoid; }
}