/* ANQ token contract: shared roles and metrics; this project owns its palette. */
:root {
  color-scheme: light;
  --color-canvas: #f3f0e8;
  --color-surface: #ffffff;
  --color-surface-soft: #e6e9dc;
  --color-ink: #252b25;
  --color-muted: #60695d;
  --color-brand: #355340;
  --color-brand-hover: #243e2d;
  --color-sidebar: #253b2d;
  --color-on-brand: #f9f8f2;
  --color-sidebar-muted: #cbd7c6;
  --color-line: #d4d7ca;
  --color-danger: #953b32;
  --color-focus: #355340;
  --font-body:
    "ANQ Serif", "ANQ Serif Georgia", "ANQ Serif Noto", Georgia, "Times New Roman", serif;
  --font-heading:
    "ANQ Serif", "ANQ Serif Georgia", "ANQ Serif Noto", Georgia, "Times New Roman", serif;
  --text-small: 0.8125rem;
  --text-body: 0.9375rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-small: 0.375rem;
  --radius-panel: 0.75rem;
  --width-sidebar: 15rem;
  --width-content: 48rem;
  --color-accent: #d5e69c;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-canvas: #151c18;
    --color-surface: #1c2620;
    --color-surface-soft: #253228;
    --color-ink: #e6eee7;
    --color-muted: #b8c4b9;
    --color-brand: #b4d0b6;
    --color-brand-hover: #c8e2ca;
    --color-sidebar: #17231b;
    --color-on-brand: #152219;
    --color-line: #46544a;
    --color-focus: #b4d0b6;
    --color-sidebar-muted: #d0dce0;
    --color-danger: #ffb4a8;
    --color-danger-surface: #412824;
    --color-warning: #f2d48d;
    --color-warning-surface: #3b301a;
    --color-positive: #b3dcb7;
    --color-positive-surface: #24382a;
    --color-info: #b6d3f5;
    --color-info-surface: #24354a;
    --color-purple: #d7bff2;
    --color-purple-surface: #352a43;
    --color-accent: #34472b;
  }
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-canvas: #151c18;
    --color-surface: #1c2620;
    --color-surface-soft: #253228;
    --color-ink: #e6eee7;
    --color-muted: #b8c4b9;
    --color-brand: #b4d0b6;
    --color-brand-hover: #c8e2ca;
    --color-sidebar: #17231b;
    --color-on-brand: #152219;
    --color-line: #46544a;
    --color-focus: #b4d0b6;
    --color-sidebar-muted: #d0dce0;
    --color-danger: #ffb4a8;
    --color-danger-surface: #412824;
    --color-warning: #f2d48d;
    --color-warning-surface: #3b301a;
    --color-positive: #b3dcb7;
    --color-positive-surface: #24382a;
    --color-info: #b6d3f5;
    --color-info-surface: #24354a;
    --color-purple: #d7bff2;
    --color-purple-surface: #352a43;
    --color-accent: #34472b;
  }
}

/* ANQ family block: shared faces and scales; only the font URLs differ per project. */
/* Source Serif 4, reduced to weights 400–700 and renamed as its licence requires. */
@font-face {
  font-family: "ANQ Serif";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/anq-serif.7ba9580513.woff2") format("woff2-variations");
}
/* System serifs sized to match, so text barely moves when the web font arrives. */
@font-face {
  font-family: "ANQ Serif Georgia";
  font-weight: 400 700;
  src: local("Georgia");
  size-adjust: 103.6%;
  ascent-override: 100%;
  descent-override: 32.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "ANQ Serif Noto";
  font-weight: 400 700;
  src: local("Noto Serif"), local("NotoSerif-Regular");
  size-adjust: 97.5%;
  ascent-override: 106.3%;
  descent-override: 34.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.08949f728d.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.01d2854474.woff2") format("woff2");
}
:root {
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --text-xs: 0.6875rem;
  --text-ui: 0.75rem;
  --text-sm: var(--text-small);
  --text-base: var(--text-body);
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.55rem + 1.1vw, 2.375rem);
  --text-3xl: clamp(2.625rem, 1.9rem + 2.6vw, 4.125rem);
  --leading-tight: 1.1;
  --leading-body: 1.65;
  --tracking-display: -0.03em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.08em;
  --space-8: 4rem;
  --space-9: 6rem;
  --radius-frame: 2px;
  --size-touch: 2.75rem;
}

/* Portfolio settings: forest green on warm stone, a wide page with framed screenshots. */
:root {
  --text-4xl: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  --height-header: 5.5rem;
  --width-page: 82.5rem;
  --gutter: 3.5rem;
}
@media (max-width: 1050px) {
  :root {
    --gutter: var(--space-6);
  }
}
@media (max-width: 700px) {
  :root {
    --gutter: var(--space-5);
    --height-header: 4.75rem;
  }
}

@charset "UTF-8";

:root {
  color-scheme: light;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  color: var(--color-ink);
  background: var(--color-canvas);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--height-header) + var(--space-5));
}
body {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
}
a {
  color: inherit;
  text-underline-offset: 0.3em;
}
a:hover {
  text-decoration-thickness: 2px;
}
.link-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.button .link-arrow {
  margin-left: 0;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: var(--space-2);
}
main:focus {
  outline: none;
}
img {
  max-width: 100%;
}
.page {
  max-width: var(--width-page);
  padding: 0 var(--gutter);
  margin: auto;
}
.skip {
  position: fixed;
  top: -100px;
  left: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-ink);
  z-index: 30;
}
.skip:focus {
  top: var(--space-3);
}

/* Type roles: serif for reading, mono for labels and interface. */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}
h1 {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-display);
}
h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}
h3 a {
  text-decoration: none;
}
h3 a:hover {
  text-decoration: underline;
}
.accent {
  color: var(--color-brand);
  font-style: normal;
}
.eyebrow,
.section-label,
.case-next small,
.case-facts dt,
.brand small {
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-muted);
}
.eyebrow {
  margin: 0 0 var(--space-5);
}
.primary-nav,
.button,
.text-link,
.tags li,
.project-status,
.project-links,
.case-actions,
.breadcrumbs,
.site-footer nav,
.nav-toggle,
.back-to-top,
.case-preview figcaption,
.cv article > a,
.cv-tech,
.cv-languages {
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  line-height: 1.5;
  letter-spacing: 0;
}
/* Sentence-length notes stay in the reading face. */
.access-note,
.demo-note,
.lede,
.case-lede,
.cv-summary {
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: 1.7;
  max-width: 34rem;
  margin: var(--space-6) 0;
}

/* Surfaces: one tinted panel, one bordered card, one screenshot frame. */
.contact-section,
.contact-card {
  border: 1px solid var(--color-line);
  padding: var(--space-6);
}
.contact-section,
.contact-background {
  background: var(--color-surface-soft);
}
.preview-frame {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-surface-soft);
  border-radius: var(--radius-frame);
  padding: var(--space-4);
  overflow: hidden;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--height-header);
  background: var(--color-canvas);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.nav-toggle,
.back-to-top {
  display: none;
}
.menu-icon-close,
.nav-toggle[aria-expanded="true"] .menu-icon-bars {
  display: none;
}
.nav-toggle[aria-expanded="true"] .menu-icon-close {
  display: block;
}
@keyframes menu-arrive {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nav-toggle[hidden],
.primary-nav[hidden],
.back-to-top[hidden] {
  display: none;
}
.brand {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  text-decoration: none;
  font-size: var(--text-md);
  line-height: 1.3;
  font-weight: 600;
}
.site-header .brand {
  color: var(--color-brand);
}
.brand small {
  display: block;
  margin-top: var(--space-1);
}
.primary-nav {
  margin-left: auto;
  display: flex;
  gap: var(--space-6);
  align-items: center;
}
.primary-nav a {
  padding: var(--space-3) 0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover,
.primary-nav a[aria-current] {
  color: var(--color-brand);
  border-color: var(--color-brand);
}
.theme-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-touch);
  min-height: var(--size-touch);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}
.theme-control[hidden] {
  display: none;
}
.theme-track {
  display: block;
  width: 44px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-surface-soft);
}
.theme-thumb {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-canvas);
  box-shadow: 0 1px 3px #0002;
}
.theme-control[aria-checked="true"] .theme-thumb {
  transform: translateX(20px);
}
.theme-moon,
.theme-control[aria-checked="true"] .theme-sun {
  display: none;
}
.theme-control[aria-checked="true"] .theme-moon {
  display: block;
}

/* Actions */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  border: 0;
  color: var(--color-on-brand);
  background: var(--color-brand);
  cursor: pointer;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-small);
  font-weight: 500;
  text-decoration: none;
  min-height: var(--size-touch);
}
.button:hover {
  background: var(--color-brand-hover);
}
.text-link {
  color: var(--color-brand);
  font-weight: 500;
}

/* The family's 44px target: an invisible hit area, so small links keep their layout. */
.text-link,
.project h3 a,
.project-links a,
.site-footer nav a,
.case-index nav a,
.case-preview figcaption a,
.breadcrumbs a,
.case-actions a,
.email-address,
.cv-languages a,
.cv article > a {
  position: relative;
}
.text-link::after,
.project h3 a::after,
.project-links a::after,
.site-footer nav a::after,
.case-index nav a::after,
.case-preview figcaption a::after,
.breadcrumbs a::after,
.case-actions a::after,
.email-address::after,
.cv-languages a::after,
.cv article > a::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: var(--size-touch);
  transform: translateY(-50%);
}

/* Home */
/* The introduction follows the greeting, leaving space to the right. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  padding: var(--space-8) 0 var(--space-7);
}
.hero h1 {
  margin: 0;
}
.hero-pitch {
  max-width: 55ch;
}
/* The pitch is the page's most important sentence, so it reads in ink, not muted. */
.hero-pitch .lede {
  margin: 0;
  color: var(--color-ink);
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.work-section,
.about-section {
  border-top: 1px solid var(--color-line);
  padding: var(--space-5) 0 var(--space-8);
}
.section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
}
.section-label h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
}
.work-intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: baseline;
}
/* Project rows and cards */
.project {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--color-line);
}
.project-copy > p:not(.project-category):not(.project-status) {
  color: var(--color-muted);
  max-width: 26rem;
  margin: 0 0 var(--space-5);
}
/* The category reads as a quiet line under the name, not a label above it. */
.project-copy > .project-category {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
  margin: 0 0 var(--space-5);
}
.tags li {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  color: var(--color-muted);
  line-height: 1.3;
}
.project-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  margin: var(--space-5) 0;
}
.project-status.live,
.project-status.private {
  color: var(--color-brand);
}
.status-dot {
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.live .status-dot {
  background: currentColor;
}
.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.project-links > a {
  color: var(--color-brand);
  font-weight: 500;
}
.project-links-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.project-links-secondary a {
  color: var(--color-muted);
}
.project-links-secondary a:hover {
  color: var(--color-ink);
}
.preview-frame {
  box-sizing: content-box;
  width: calc(100% - 2 * var(--space-4) - 2px);
  display: block;
  min-width: 0;
}
.project-image {
  aspect-ratio: 4 / 3;
}
.preview-viewport {
  border-radius: var(--radius-small) var(--radius-small) var(--radius-frame) var(--radius-frame);
  display: block;
  height: 100%;
  overflow: hidden;
}
.preview-viewport picture {
  display: block;
  height: 100%;
}
/* Previews in both themes: the toggle sets data-theme; without JavaScript the system decides. */
.shot-dark,
.preview-viewport .shot-dark {
  display: none;
}
:root[data-theme="dark"] .shot-light,
:root[data-theme="dark"] .preview-viewport .shot-light {
  display: none;
}
:root[data-theme="dark"] span.shot-dark {
  display: inline;
}
:root[data-theme="dark"] .preview-viewport .shot-dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .shot-light,
  :root:not([data-theme]) .preview-viewport .shot-light {
    display: none;
  }
  :root:not([data-theme]) span.shot-dark {
    display: inline;
  }
  :root:not([data-theme]) .preview-viewport .shot-dark {
    display: block;
  }
}
.preview-viewport img {
  display: block;
  width: 100%;
  height: auto;
}
.project-image img {
  height: 100%;
  object-fit: contain;
  object-position: top;
}
/* The last row drops its rule so a following note reads as the list's footnote. */
.project:last-of-type {
  border-bottom: 0;
}
.demo-note {
  color: var(--color-muted);
  margin: 0;
}

/* About */
.about-prose {
  max-width: 40rem;
  margin-top: var(--space-6);
}
.about-prose p {
  color: var(--color-ink);
}
.about-prose h2 {
  margin-bottom: var(--space-5);
}
.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-8);
}
.contact-section p:not(.eyebrow) {
  color: var(--color-muted);
  margin: 0 0 var(--space-5);
  max-width: 26rem;
}

/* Footer */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-line);
  padding: var(--space-6) 0;
  color: var(--color-muted);
  gap: var(--space-5);
}
.footer-brand {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.3;
}
.footer-brand span {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  line-height: 1.5;
}
.site-footer nav {
  display: flex;
  gap: var(--space-5);
}

/* Page intros: contact and 404 */
.page-intro {
  padding: var(--space-8) 0 var(--space-7);
  max-width: 62rem;
}
.page-intro .lede {
  max-width: 38rem;
}
/* Case study */
.case-study {
  padding: var(--space-6) 0 var(--space-8);
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  color: var(--color-muted);
  margin-bottom: var(--space-7);
}
.case-heading {
  max-width: 58rem;
  margin-bottom: var(--space-7);
}
.case-heading h1 {
  font-size: var(--text-3xl);
}
.case-heading .eyebrow {
  margin-bottom: var(--space-4);
}
.case-lede {
  max-width: 47rem;
  margin: var(--space-5) 0;
}
.case-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.access-note {
  color: var(--color-muted);
  margin-top: var(--space-4);
}
.case-preview {
  margin: 0 0 var(--space-7);
}
.shot-phone {
  display: none;
}
.case-preview figcaption {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-3);
}
.case-layout {
  display: grid;
  grid-template-columns: 13.75rem minmax(0, 1fr);
  gap: var(--space-8);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-7);
  align-items: start;
}
.case-index {
  position: sticky;
  top: calc(var(--height-header) + var(--space-5));
}
.case-index .eyebrow {
  margin-bottom: var(--space-4);
}
.case-index nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.case-index nav a {
  font-size: var(--text-base);
  line-height: 1.45;
  text-decoration: none;
  color: var(--color-muted);
}
.case-index nav a:hover {
  text-decoration: underline;
  color: var(--color-brand);
}
.case-facts {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1.4fr;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-5);
}
.case-facts dd {
  margin: var(--space-1) 0 0;
}
.prose {
  max-width: 46rem;
}
.prose h2 {
  font-size: var(--text-xl);
  margin: var(--space-7) 0 var(--space-4);
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p,
.prose ul {
  color: var(--color-muted);
  line-height: 1.8;
}
.prose li {
  margin-bottom: var(--space-2);
}
.prose a {
  color: var(--color-brand);
}
.case-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-line);
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
}
.case-next > a:last-child {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  text-align: right;
}
.case-next span {
  font-size: var(--text-xl);
  color: var(--color-brand);
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: 0 0 var(--space-9);
}
.contact-card h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-5);
}
/* The address is the email card's title; its heading is the label that names it. */
.contact-card .contact-label {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}
/* The email card is shorter than its neighbour; centring its content makes the space deliberate. */
.contact-card:has(.email-line) {
  display: grid;
  align-content: center;
}
.email-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-5);
}
.contact-card > p:not(.eyebrow) {
  color: var(--color-muted);
}
/* The copy control keeps a 44px target around a 20px glyph without shifting the line. */
.copy-email {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--size-touch);
  height: var(--size-touch);
  margin: calc((var(--size-touch) - 1.25rem) / -2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.copy-email:hover {
  color: var(--color-brand);
}
.copy-email[hidden],
.copy-email .icon-check,
.copy-email[data-copied] .icon-copy {
  display: none;
}
.copy-email[data-copied] .icon-check {
  display: block;
  color: var(--color-brand);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.email-address {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
  color: var(--color-brand);
  min-width: 0;
  overflow-wrap: anywhere;
}
.contact-background .text-link {
  display: block;
  margin-top: var(--space-5);
}

/* CV */
.cv {
  max-width: 48.75rem;
  margin: var(--space-8) auto;
}
.cv h1 {
  font-size: var(--text-3xl);
}
.cv-summary {
  max-width: none;
  margin: var(--space-6) 0 var(--space-4);
}
.cv h2 {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-5);
  margin: var(--space-6) 0 var(--space-5);
  font-size: var(--text-xl);
}
.cv h3 {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0;
  margin: var(--space-5) 0 var(--space-1);
}
.cv article {
  margin-bottom: var(--space-5);
}
.cv article p {
  margin: var(--space-2) 0;
}
.cv p {
  color: var(--color-muted);
}
.cv .cv-tech {
  font-size: var(--text-xs);
}
.cv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-5) 0;
}
.cv-languages {
  display: flex;
  gap: var(--space-5);
}
.cv-languages [aria-current="page"] {
  color: var(--color-ink);
  font-weight: 500;
}
.print-note {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-5);
  margin-top: var(--space-6);
}

@media (max-width: 1050px) {
  .hero,
  .work-intro,
  .project,
  .contact-section,
  .case-layout {
    gap: var(--space-7);
  }
  .hero {
    padding: var(--space-7) 0 var(--space-6);
  }
  .case-layout {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .email-address {
    font-size: var(--text-xl);
  }
  .site-header {
    flex-wrap: wrap;
    padding: var(--space-4) 0;
    gap: var(--space-2);
  }
  .site-header > .brand {
    margin-right: auto;
  }
  html {
    scroll-padding-top: 10rem;
  }
  html.nav-enhanced {
    scroll-padding-top: calc(var(--height-header) + var(--space-5));
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-touch);
    min-height: var(--size-touch);
    padding: var(--space-2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-frame);
    background: var(--color-canvas);
    color: var(--color-ink);
    cursor: pointer;
    transition:
      background-color 160ms ease,
      border-color 160ms ease;
  }
  .nav-toggle:hover,
  .nav-toggle[aria-expanded="true"] {
    background: var(--color-surface-soft);
    border-color: var(--color-brand);
  }
  .nav-toggle[aria-expanded="true"] .menu-icon {
    animation: menu-arrive 180ms ease-out;
  }
  .nav-enhanced .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    padding: var(--space-5) var(--space-5) var(--space-6);
    background: var(--color-canvas);
    background-image: repeating-radial-gradient(
      ellipse at 120% 110%,
      transparent 0 30px,
      color-mix(in srgb, var(--color-brand) 5%, transparent) 31px 32px,
      transparent 33px 62px
    );
    border: 1px solid var(--color-line);
    max-height: calc(100dvh - var(--height-header) - var(--space-5));
    overflow-y: auto;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    animation: menu-arrive 180ms ease-out;
  }
  .nav-enhanced .primary-nav[hidden] {
    display: none;
  }
  .nav-enhanced .primary-nav a {
    min-height: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-line);
  }
  .nav-enhanced .primary-nav a::after {
    content: "";
    width: var(--space-2);
    height: var(--space-2);
    margin-right: var(--space-1);
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
  }
  .nav-enhanced .primary-nav a:hover,
  .nav-enhanced .primary-nav a[aria-current] {
    border-color: var(--color-brand);
  }
  .back-to-top {
    position: fixed;
    right: max(var(--space-4), env(safe-area-inset-right));
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--size-touch);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--space-5);
    background: var(--color-brand);
    color: var(--color-on-brand);
    text-decoration: none;
    box-shadow: 0 3px 10px #0000001f;
  }
  .mark {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 1.1875rem;
  }
  .primary-nav {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .primary-nav a {
    padding: var(--space-2) 0;
  }
  .contact-section,
  .contact-card {
    padding: var(--space-5);
  }
  .hero,
  .work-intro,
  .project,
  .contact-section,
  .contact-grid,
  .case-layout,
  .case-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  .hero {
    gap: var(--space-6);
    padding: var(--space-6) 0;
  }
  .lede,
  .case-lede,
  .cv-summary {
    font-size: var(--text-md);
    margin: var(--space-5) 0;
  }
  .section-label {
    flex-wrap: wrap;
  }
  .about-prose {
    margin-top: var(--space-5);
  }
  .project {
    padding: var(--space-6) 0;
  }
  .contact-section,
  .contact-grid {
    margin-bottom: var(--space-7);
  }
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: var(--space-5) 0;
  }
  .page-intro {
    padding: var(--space-7) 0;
  }
  .case-study {
    padding-top: var(--space-5);
  }
  .breadcrumbs {
    margin-bottom: var(--space-6);
  }
  .case-heading h1 {
    overflow-wrap: anywhere;
  }
  .case-preview {
    margin-bottom: var(--space-6);
  }
  .case-layout {
    padding-top: var(--space-6);
  }
  .case-index {
    position: static;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-line);
  }
  /* Stacked links need 44px each, or a neighbour's hit area cuts into theirs. */
  .case-index nav {
    gap: var(--space-5);
  }
  .cv {
    margin-top: var(--space-7);
  }
}
@media (max-width: 560px) {
  /* Matches the phone captures, so each one shows whole. */
  .project-image {
    aspect-ratio: 13 / 20;
  }
  .shot-desktop {
    display: none;
  }
  .shot-phone {
    display: inline;
  }
}
@media (max-width: 360px) {
  .email-address {
    font-size: var(--text-lg);
  }
  .contact-card {
    padding: var(--space-4);
  }
  .site-header .brand {
    gap: var(--space-2);
    font-size: var(--text-sm);
  }
  .site-header .brand small {
    display: none;
  }
}
@media screen and (prefers-reduced-motion: no-preference) {
  a,
  button {
    transition:
      color 120ms ease-out,
      background-color 120ms ease-out,
      border-color 120ms ease-out;
  }
  .theme-thumb,
  .link-arrow,
  .nav-enhanced .primary-nav a::after {
    transition: transform 120ms ease-out;
  }
  .button:active,
  .nav-toggle:active {
    transform: translateY(1px);
  }
  .theme-changing,
  .theme-changing *,
  .theme-changing *::before,
  .theme-changing *::after {
    transition-property: color, background-color, border-color, transform;
    transition-duration: 120ms;
    transition-timing-function: ease-out;
  }
}
@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a:hover > .link-arrow {
    transform: translate(1px, -1px);
  }
  .nav-enhanced .primary-nav a:hover::after {
    transform: translateX(2px) rotate(45deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  a,
  button,
  .nav-enhanced .primary-nav,
  .nav-toggle[aria-expanded="true"] .menu-icon {
    animation: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Form controls follow the theme in case a page adds them. */
@media screen {
  input,
  select,
  textarea {
    background-color: var(--color-surface);
    color: var(--color-ink);
  }
  ::placeholder {
    color: var(--color-muted);
    opacity: 1;
  }
}

@media print {
  @page {
    size: A4;
    margin: 15mm;
  }
  :root {
    background: white;
    color: black;
  }
  .page {
    max-width: none;
    padding: 0;
  }
  .site-header,
  .back-to-top,
  .site-footer,
  .skip,
  .print-note,
  .cv-contact,
  .cv-actions {
    display: none;
  }
  .cv {
    margin: 0;
    max-width: none;
    line-height: 1.35;
  }
  .cv h1 {
    font-size: 24pt;
    margin: 0 0 8pt;
  }
  .cv h2 {
    font-size: 12pt;
    margin: 9pt 0 5pt;
    padding-top: 6pt;
    break-after: avoid;
  }
  .cv h3 {
    break-after: avoid;
    font-size: 10.5pt;
    margin: 8pt 0 3pt;
  }
  .cv article {
    break-inside: avoid;
    margin: 0 0 6pt;
  }
  .cv article p {
    margin: 3pt 0;
  }
  .cv p {
    font-size: 10pt;
    margin: 4pt 0;
    color: black;
  }
  .cv .cv-summary {
    font-size: 11pt;
    margin: 8pt 0;
  }
  .cv .cv-tech {
    font-size: 8.5pt;
  }
  .cv article > a {
    font-size: 9pt;
  }
  a {
    color: black;
    text-decoration: none;
  }
}