/* Tim Höfer portfolio design system
   Typeface, color, type scale, spacing and layout tokens live here so every
   page template uses the same visual rules. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/ibm-plex-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/ibm-plex-sans-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/ibm-plex-mono-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/ibm-plex-mono-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/ibm-plex-sans-italic.ttf") format("truetype");
  font-style: italic; font-weight: 400; font-display: swap;
}

:root {
  color-scheme: light;

  /* Palette primitives */
  --color-orange-700: #ba4c24;
  --color-orange-500: #ec5d2a;
  --color-orange-300: #ed7441;
  --color-orange-100: #f4b695;
  --color-sky-blue-700: #285977;
  --color-sky-blue-500: #4292c8;
  --color-sky-blue-300: #5cacd7;
  --color-sky-blue-100: #9cd5ee;
  --color-petrol-700: #19414f;
  --color-petrol-500: #275e69;
  --color-petrol-300: #46838e;
  --color-petrol-100: #7db5bf;
  --color-ocean-blue-700: #1c2b42;
  --color-ocean-blue-500: #264064;
  --color-ocean-blue-300: #5976a1;
  --color-ocean-blue-100: #d2dceb;
  --color-purple-700: #3e2369;
  --color-purple-500: #6e41b3;
  --color-purple-300: #a383d7;
  --color-purple-100: #e8ddf4;
  --color-berry-700: #6f0a33;
  --color-berry-500: #ad104c;
  --color-berry-300: #db5075;
  --color-berry-100: #fbcee1;
  --color-crimson-700: #7f2924;
  --color-crimson-500: #bb3b38;
  --color-crimson-300: #d6716e;
  --color-crimson-100: #edb6b5;
  --color-gold-700: #cba035;
  --color-gold-500: #f6c643;
  --color-gold-300: #f9db7b;
  --color-gold-100: #fdf4d6;
  --color-dark-gray-700: #0d0f10;
  --color-dark-gray-500: #4b4f53;
  --color-dark-gray-300: #c8c9cb;
  --color-dark-gray-100: #f2f2f3;
  --color-light-gray-700: #686e74;
  --color-light-gray-500: #c8ccd0;
  --color-light-gray-300: #e7e8ea;
  --color-light-gray-100: #fafbfb;

  --color-white: #fff;

  /* Semantic colors: prefer these roles in components */
  --font-sans: "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --color-ink: var(--color-dark-gray-700);
  --color-body: var(--color-dark-gray-500);
  --color-muted: var(--color-light-gray-700);
  --color-caption: var(--color-light-gray-700);
  --color-accent: var(--color-orange-500);
  --color-hero: var(--color-orange-500);
  --color-line: var(--color-light-gray-300);
  --color-paper: var(--color-white);
  --color-soft: var(--color-light-gray-100);
  --color-featured: var(--color-white);
  --color-accent-hover: var(--color-orange-700);
  --color-on-accent: var(--color-white);

  /* Four-pixel rhythm: role-specific leading, not a forced page-wide baseline. */
  --baseline-unit: 4px;
  --text-blog-title: 44px;
  --line-blog-title: 52px;
  --text-subheading: 24px;
  --line-subheading: 32px;
  --text-quote: 24px;
  --line-quote: 36px;
  --space-paragraph: 24px;
  --space-heading-before: 64px;
  --space-heading-after: 16px;
  /* Foundations: type scale (font size / line height) */
  --text-meta: 12px;
  --line-meta: 16px;
  --text-small: 14px;
  --line-small: 20px;
  --text-ui: 16px;
  --line-ui: 24px;
  --text-body: 18px;
  --line-body: 28px;
  --text-lede: 22px;
  --line-lede: 32px;
  --text-section: 32px;
  --line-section: 40px;
  --text-page-title: 60px;
  --line-page-title: 64px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heading: var(--weight-medium);
  --text-eyebrow: var(--text-body);
  --line-eyebrow: var(--line-body);
  --weight-eyebrow: var(--weight-medium);
  --tracking-eyebrow: .08em;

  /* Foundations: layout and spacing */
  --layout-width: 1170px;
  --content-width: 780px;
  --page-gutter: clamp(24px, 6.5vw, 90px);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 72px;
  --space-7: 96px;

  /* Foundations: shape, motion, and shared chrome */
  --radius-control: 7px;
  --motion-quick: .18s;
  --motion-base: .32s;
  --motion-reveal: .62s;
  --motion-crossfade: .42s;
  --ease-standard: cubic-bezier(.2,.7, .2, 1);
  --header-height: 112px;
  --header-height-mobile: 82px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background-color: var(--overscroll-color, var(--color-paper)); }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

/* Shared site chrome */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 20; background: var(--color-paper); padding: 12px; }
.skip-link:focus { left: 12px; }
.site-header {
  height: var(--header-height);
  padding: 0 var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-paper);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: transform var(--motion-base) ease;
}
.site-header.is-hidden {
  transform: translateY(-105%);
}
.wordmark { font-size: 14px; letter-spacing: .09em; font-weight: 700; color: var(--color-accent); white-space: nowrap; }
.primary-nav { display: flex; align-items: center; gap: clamp(var(--space-3), 3vw, var(--space-5)); font-size: var(--text-small); color: var(--color-ink); }
.primary-nav > a:not(.contact-button) { position: relative; padding: 12px 0; }
.primary-nav > a[aria-current="page"] { color: var(--color-accent); }
.primary-nav > a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--color-accent); }
.contact-button { background: var(--color-accent); color: var(--color-on-accent); padding: 10px 19px; border-radius: var(--radius-control); font-size: var(--text-small); font-weight: var(--weight-semibold); transition: background var(--motion-quick); }
.contact-button:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.menu-toggle { display: none; background: none; border: 0; padding: 12px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--color-ink); margin: 5px 0; }
.site-footer {
  border-top: 1px solid var(--color-line);
  padding: 30px max(var(--page-gutter), calc((100vw - var(--layout-width)) / 2)) 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 170px;
  gap: 30px;
  font-family: var(--font-sans);
  color: var(--color-body);
}
.site-footer > div { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer h2 { font-size: 14px; line-height: 28px; letter-spacing: .08em; color: var(--color-accent); margin: 0 0 8px; font-weight: 600; }
.site-footer p, .site-footer a { font-family: var(--font-sans); font-size: 14px; line-height: 24px; color: var(--color-muted); margin: 0 0 4px; }
.site-footer a:hover { color: var(--color-accent); }

/* Homepage */
.home-hero { max-width: var(--layout-width); margin: 0 auto; min-height: calc(100vh - var(--header-height)); padding: 60px 0 80px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(var(--space-5), 8vw, 112px); }
.hero-copy { max-width: 570px; font-size: clamp(32px, 2.97vw, 40px); line-height: 1.15; letter-spacing: normal; color: var(--color-hero); font-weight: 400; }
.hero-portrait { margin: 0; width: min(100%, 465px); justify-self: end; }
.hero-portrait img { width: 100%; height: auto; box-shadow: 0 10px 24px color-mix(in srgb, var(--color-ink) 7%, transparent); }
.hero-portrait figcaption { text-align: center; font-size: var(--text-small); line-height: var(--line-small); color: var(--color-caption); padding-top: 12px; }
.hero-portrait figcaption a { color: var(--color-muted); }
.section { max-width: var(--layout-width); margin: 0 auto; padding: var(--space-7) 0 110px; }
.eyebrow { font-family: var(--font-sans); font-size: var(--text-eyebrow); line-height: var(--line-eyebrow); letter-spacing: var(--tracking-eyebrow); font-weight: var(--weight-eyebrow); color: var(--color-accent); margin: 0 0 32px; }
.about-section { display: block; }
.about-section .section-heading { margin: 0 0 24px; }
.section-copy { max-width: 570px; }
.section-copy p { margin: 0 0 var(--space-paragraph); }
.experience-list { display: flex; flex-direction: column; gap: 34px; }
.experience-section .section-heading { margin-bottom: 32px; }
.experience-list { max-width: 570px; gap: 0; }
.experience-item { display: block; border-bottom: 1px solid var(--color-line); }
.experience-item summary { min-height: 64px; display: grid; grid-template-columns: minmax(0,1fr) 24px; align-items: center; gap: 20px; cursor: pointer; list-style: none; color: var(--color-ink); }
.experience-item summary::-webkit-details-marker { display: none; }
.experience-item summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.experience-title { font-size: var(--text-ui); line-height: var(--line-ui); color: var(--color-ink); font-weight: var(--weight-medium); }
.experience-toggle { position: relative; width: 18px; height: 18px; justify-self: end; color: var(--color-accent); }
.experience-toggle::before, .experience-toggle::after { content: ""; position: absolute; background: currentColor; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.experience-toggle::before { width: 18px; height: 1px; }
.experience-toggle::after { width: 1px; height: 18px; transition: transform .18s ease; }
.experience-item[open] .experience-toggle::after { transform: translate(-50%,-50%) scaleY(0); }
.experience-detail { font-size: var(--text-small); line-height: var(--line-ui); font-weight: var(--weight-regular); max-width: 570px; margin: 0 24px 24px 0; animation: detail-reveal .24s ease both; }
.experience-item p { margin: 0 0 16px; }
.experience-item .clients { font-size: var(--text-small); color: var(--color-muted); }
.clients span { color: var(--color-body); }
@keyframes detail-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.featured-section { max-width: none; margin: 0; padding: var(--space-6) max(var(--page-gutter), calc((100vw - var(--layout-width)) / 2)) 100px; background: var(--color-featured); color: var(--color-on-accent); border: 0; }
.featured-section .section-heading { max-width: var(--layout-width); margin: 0 auto 32px; color: var(--color-on-accent); }
.featured-section .project-grid { max-width: var(--layout-width); margin: 0 auto; }

/* Project cards and archives */
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.project-card { display: block; min-width: 0; }
.project-card-image { display: block; overflow: hidden; background: var(--color-soft); aspect-ratio: 1 / 1; }
.project-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-standard); }
.project-card:hover .project-card-image img { transform: scale(1.035); }
.project-card-meta { display: block; font-size: 14px; line-height: 20px; color: var(--color-muted); margin-top: 20px; }
.project-card h3 { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--color-ink); margin: 2px 0 0; }
.project-card--draft { align-self: start; padding: 20px 0; border-top: 1px solid var(--color-line); }
.project-card--draft .project-card-meta { margin-top: 0; color: var(--color-accent); font-size: var(--text-meta); line-height: var(--line-meta); letter-spacing: .08em; }
.featured-section .project-card h3 { color: var(--color-on-accent); }
.featured-section .project-card-meta { color: var(--color-muted); }
.page-intro { max-width: var(--layout-width); margin: 0 auto; padding: 78px 0 46px; }
.page-intro .eyebrow { margin-bottom: 12px; }
.page-intro h1 { margin: 0; color: var(--color-accent); font-size: var(--text-page-title); line-height: var(--line-page-title); letter-spacing: normal; font-weight: var(--weight-heading); }
.project-grid-large { max-width: 970px; margin: 84px auto 130px; display: flex; flex-direction: column; gap: 100px; }
.archive-project { margin: 0; }
.archive-project-image { display: block; position: relative; overflow: hidden; background: var(--color-soft); aspect-ratio: 1 / 1; }
.archive-project-image img { width: 100%; height: 100%; object-fit: cover; }
.archive-project-hover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; background: color-mix(in srgb, var(--color-ink) 60%, transparent); color: var(--color-on-accent); opacity: 0; transition: opacity .2s ease; }
.archive-project-image:hover .archive-project-hover, .archive-project-image:focus-visible .archive-project-hover { opacity: 1; }
.archive-project-title { font-size: 24px; line-height: 32px; }
.archive-project-year { font-size: 18px; line-height: 28px; color: var(--color-light-gray-300); }
.archive-project-caption { font-size: 14px; line-height: 20px; color: var(--color-body); margin: 10px 0 0; }

/* Case study template */
.case-study { --case-accent: var(--color-accent); --case-accent-dark: color-mix(in srgb, var(--case-accent) 75%, black); --hero-overlap: clamp(80px, 7vw, 110px); }
.project-hero-band { min-height: calc(100svh - var(--header-height) + var(--hero-overlap)); position: relative; isolation: isolate; background: transparent; color: var(--color-on-accent); padding: 80px 0 0; }
.project-hero-band::before { content: ""; position: absolute; z-index: -1; inset: 0 0 var(--hero-overlap); background: var(--case-accent); pointer-events: none; }
.project-hero-band .project-intro { max-width: calc(var(--layout-width) + 2 * var(--page-gutter)); margin: 0 auto; padding: 0 var(--page-gutter); color: var(--color-on-accent); }
.project-hero-band .project-intro h1 { color: var(--color-on-accent); font-size: var(--text-page-title); line-height: var(--line-page-title); font-weight: var(--weight-heading); letter-spacing: normal; margin: 0 0 20px; }
.project-hero-band .project-intro .eyebrow { color: var(--color-on-accent); margin: 0 0 16px; }
.project-hero-band .project-lede { opacity: .85; max-width: 920px; font-size: var(--text-lede); line-height: var(--line-lede); margin: 0; }
.project-hero-band .project-lede p { margin: 0 0 16px; }
.project-hero-band .project-hero { max-width: var(--layout-width); margin: 42px auto 0; position: relative; z-index: 1; overflow: visible; }
.project-hero-band .project-hero img { width: 100%; max-height: none; object-fit: cover; background: var(--color-soft); }
.case-study-layout { --case-column-gap: clamp(36px, 7.4vw, 100px); --case-rail-width: min(300px, calc((100% - var(--case-column-gap)) * .2806)); max-width: var(--layout-width); margin: 0 auto; padding: calc(240px - var(--hero-overlap)) 0 0; display: grid; grid-template-columns: var(--case-rail-width) minmax(0, 1fr); column-gap: var(--case-column-gap); }
.case-study-layout .project-facts { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
.case-study-layout .project-facts > div { border-bottom: 1px solid var(--color-line); padding: 0 0 14px; }
.case-study-layout .project-facts dt { font-family: var(--font-mono); font-size: var(--text-meta); line-height: var(--line-meta); letter-spacing: .11em; color: var(--case-accent); font-weight: var(--weight-bold); margin: 0 0 4px; }
.case-study-layout .project-facts dd { font-size: 14px; line-height: 20px; color: var(--color-body); margin: 0; }
.case-study-layout .project-prose { max-width: none; min-width: 0; margin: 0 0 90px; font-size: var(--text-body); line-height: var(--line-body); }
.case-study-layout .project-prose h2 { color: var(--case-accent); font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-medium); margin: 0 0 24px; }
.case-study-layout .project-prose h3 { font-size: var(--text-body); line-height: var(--line-body); font-weight: var(--weight-semibold); margin: 32px 0 12px; color: var(--color-body); }
.case-study-layout .project-prose h4 { font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-medium); color: var(--case-accent); margin: 0 0 24px; }
.case-study-layout .project-prose h6 { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--color-body); margin: 32px 0 12px; }
.case-study-layout .project-prose p { margin: 0 0 var(--space-paragraph); }
.case-study-layout .project-prose .content-image { width: min(1170px, calc(100vw - 2 * var(--page-gutter))); max-width: none; margin: 48px 0 28px calc(-1 * (var(--case-rail-width) + var(--case-column-gap))); padding: 0; background: transparent; }
.case-study-layout .project-prose .content-image img { display: block; width: 100%; height: auto; max-height: min(760px, 80vh); margin: 0 auto; padding: 0; background: transparent; object-fit: contain; }
.case-study-layout .project-prose .image-grid { width: min(1170px, calc(100vw - 2 * var(--page-gutter))); margin: 48px 0 64px calc(-1 * (var(--case-rail-width) + var(--case-column-gap))); }
.case-study-layout .project-prose .image-row { width: min(1170px, calc(100vw - 2 * var(--page-gutter))); margin-left: calc(-1 * (var(--case-rail-width) + var(--case-column-gap))); }
.case-study-layout .project-prose .content-image figcaption { font-size: 14px; line-height: 20px; text-align: center; color: var(--color-body); margin: 16px auto 0; }
.case-study-layout .project-prose blockquote { max-width: 650px; margin: 56px 0 64px; padding: 0; border: 0; color: var(--case-accent); font-size: var(--text-quote); line-height: var(--line-quote); font-style: italic; }
.case-study-layout .project-prose a, .prose a { text-decoration: underline; text-decoration-color: var(--color-light-gray-500); text-underline-offset: 3px; }
.case-study-layout .project-prose a:hover, .prose a:hover { text-decoration-color: var(--color-accent); }
.project-prose--continuation { max-width: var(--layout-width); margin: 0 auto 90px; font-size: var(--text-body); line-height: var(--line-body); }
.project-prose--continuation > p, .project-prose--continuation > h2, .project-prose--continuation > h3, .project-prose--continuation > h4, .project-prose--continuation > h5, .project-prose--continuation > h6, .project-prose--continuation > blockquote, .project-prose--continuation > ul, .project-prose--continuation > ol { max-width: 770px; margin-left: auto; margin-right: auto; }
.project-prose--continuation > p { margin-bottom: 30px; }
.project-prose--continuation > h2, .project-prose--continuation > h4 { color: var(--case-accent); font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-medium); margin-top: 0; margin-bottom: 24px; }
.project-prose--continuation > h3, .project-prose--continuation > h6 { font-size: var(--text-body); line-height: var(--line-body); font-weight: var(--weight-semibold); margin-top: 32px; margin-bottom: 12px; color: var(--color-body); }
.project-prose--continuation > blockquote { max-width: 650px; margin-top: 56px; margin-bottom: 64px; padding: 0; border: 0; color: var(--case-accent); font-size: var(--text-quote); line-height: var(--line-quote); font-style: italic; }
.project-prose--continuation > .content-image { width: 100%; max-width: var(--layout-width); margin: 48px 0 28px; padding: 0; background: transparent; }
.project-prose--continuation > .content-image img { display: block; width: 100%; height: auto; max-height: min(760px, 80vh); margin: 0 auto; padding: 0; background: transparent; object-fit: contain; }
.project-prose--continuation > .content-image figcaption { font-size: 14px; line-height: 20px; text-align: center; color: var(--color-body); margin: 16px auto 0; }
.project-prose--continuation > .image-band { width: 100vw; margin: 72px 0 72px calc((min(100vw, var(--layout-width)) - 100vw) / 2); padding: 64px max(var(--page-gutter), calc((100vw - var(--layout-width)) / 2)); }
.image-grid { width: min(100%, 1170px); margin: 56px auto 68px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(24px, 4vw, 54px); align-items: start; }
.image-grid-figure { min-width: 0; margin: 0; }
.image-grid-figure img { display: block; width: 100%; height: auto; max-height: min(680px, 76vh); margin: 0 auto; object-fit: contain; background: transparent; }
.image-grid-figure figcaption { max-width: 360px; margin: 16px auto 0; font-size: 14px; line-height: 20px; text-align: center; color: var(--color-muted); }
.project-prose--continuation > .image-grid:first-child { width: 100vw; max-width: none; margin: 64px 0 76px calc((min(100vw, var(--layout-width)) - 100vw) / 2); padding: 56px max(var(--page-gutter), calc((100vw - var(--layout-width)) / 2)); background: var(--case-accent); }
.project-prose--continuation > .image-grid:first-child .image-grid-figure img { max-height: min(620px, 70vh); }
.project-prose--continuation > .image-grid:first-child .image-grid-figure figcaption { color: var(--color-on-accent); }
.project-prose--continuation > .image-grid--captioned:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) 170px; gap: clamp(24px, 4vw, 54px); align-items: center; }
.project-prose--continuation > .image-grid--captioned:first-child .image-grid-figure img { max-height: min(520px, 62vh); }
.image-grid-caption { max-width: 170px; align-self: start; color: var(--color-on-accent); font-size: 14px; line-height: 20px; }
.image-row { max-width: 1170px; margin: 50px auto 64px; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: clamp(48px, 9vw, 136px); align-items: center; }
.image-row-caption { max-width: 220px; font-size: 15px; line-height: 24px; color: var(--color-body); }
.image-row-visual { grid-column: 2; grid-row: 1; margin: 0; display: flex; justify-content: center; }
.image-row-visual img { display: block; width: auto; max-width: 100%; max-height: min(760px, 80vh); height: auto; object-fit: contain; background: transparent; }
.project-prose--continuation > .image-row { width: 100%; max-width: 1170px; margin: 50px auto 64px; }
.phone-story { width: min(var(--layout-width), calc(100vw - 2 * var(--page-gutter))); margin: var(--space-6) auto var(--space-7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%) minmax(0, 1fr); column-gap: 24px; align-items: start; }
.phone-story-steps { grid-column: 1; grid-row: 1; position: relative; min-width: 0; }
.phone-story-step { min-height: clamp(700px, 82vh, 900px); display: flex; flex-direction: column; justify-content: flex-start; padding: 0; scroll-margin-top: 180px; }
.phone-story-copy { width: 184px; max-width: 100%; margin: 0; padding-top: 22px; border-top: 1px solid var(--color-line); }
.phone-story-copy p { margin: 0; max-width: none; font-size: var(--text-small); line-height: 20px; }
.phone-story-stage { grid-column: 2; grid-row: 1; position: sticky; top: 0; align-self: start; justify-self: center; width: min(520px, 100%); height: 100vh; margin: 0; display: none; place-items: center; }
.phone-story-screen { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity var(--motion-crossfade) ease, visibility 0s linear var(--motion-crossfade); pointer-events: none; }
.phone-story-screen.is-active { opacity: 1; visibility: visible; transition: opacity var(--motion-crossfade) ease, visibility 0s; }
.phone-story-screen img { width: auto; max-width: 100%; max-height: min(800px, calc(100vh - 80px)); height: auto; object-fit: contain; }
.phone-story-inline-screen { display: flex; flex-direction: column; align-items: center; margin: var(--space-3) auto 0; }
.phone-story-inline-screen img { width: auto; max-width: 100%; max-height: min(660px, 74vh); height: auto; object-fit: contain; }
.phone-story--enhanced .phone-story-stage { display: grid; }
.phone-story--enhanced .phone-story-inline-screen { display: none; }
.image-band { width: 100vw; margin: 72px 0 72px calc(-1 * (max(0px, (100vw - var(--layout-width)) / 2) + var(--case-rail-width, 0px) + var(--case-column-gap, 0px))); padding: 64px max(var(--page-gutter), calc((100vw - var(--layout-width)) / 2)); background: var(--case-accent); display: flex; flex-direction: column; gap: 72px; }
.image-band-figure { width: 100%; max-width: var(--layout-width); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 30px; align-items: start; }
.image-band-figure img { width: 100%; height: auto; max-height: none; object-fit: contain; background: transparent; }
.image-band-figure figcaption { font-size: 14px; line-height: 20px; color: var(--color-on-accent); padding-top: 4px; }
.image-band-figure--reverse { grid-template-columns: 170px minmax(0, 1fr); }
.image-band-figure--reverse img { grid-column: 2; grid-row: 1; }
.image-band-figure--reverse figcaption { grid-column: 1; grid-row: 1; text-align: right; }
.next-projects { max-width: none; margin: 20px 0 0; padding: var(--space-6) max(var(--page-gutter), calc((100% - var(--layout-width)) / 2)) 100px; background: var(--case-accent-dark); color: var(--color-on-accent); }
.next-projects h2 { margin: 0 0 32px; color: var(--color-on-accent); font-size: var(--text-eyebrow); line-height: var(--line-eyebrow); font-weight: var(--weight-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.next-projects .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-card--related h3 { text-align: center; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--color-ink); }

/* Editorial and legal pages */
.article-intro { max-width: var(--layout-width); margin: 0 auto; padding: 78px 0 44px; }
.article-intro .eyebrow { margin-bottom: 16px; text-align: center; font-size: 14px; line-height: 20px; }
.article-intro h1 { max-width: 1170px; margin: 0 auto; color: var(--color-ink); font-size: 70px; line-height: 80px; letter-spacing: 0; font-weight: 400; text-align: center; }
.article-byline { display: flex; justify-content: center; gap: 13px; align-items: center; color: var(--color-muted); font-size: 15px; line-height: 24px; margin: 24px 0 0; }
.article-byline a { color: var(--color-body); text-decoration: underline; text-decoration-color: var(--color-light-gray-500); text-underline-offset: 3px; }
.prose { color: var(--color-body); font-size: var(--text-body); line-height: var(--line-body); }
.article-prose { max-width: var(--content-width); margin: 60px auto 130px; }
.legal-prose { max-width: var(--content-width); margin: 0 auto 130px; }
.prose h2 { font-size: var(--text-section); line-height: var(--line-section); letter-spacing: normal; color: var(--color-ink); font-weight: 400; margin: var(--space-heading-before) 0 var(--space-heading-after); }
.prose h3 { font-size: var(--text-subheading); line-height: var(--line-subheading); color: var(--color-ink); font-weight: 500; margin: 32px 0 var(--space-heading-after); }
.project-prose:not(.project-prose--opening):not(.project-prose--continuation) { max-width: 770px; margin: 0 auto 90px; }
.project-prose > h4 { max-width: 770px; margin: 0 auto 24px; color: var(--case-accent); font-size: var(--text-section); line-height: var(--line-section); font-weight: 500; }
.project-prose > h6 { max-width: 770px; margin: 30px auto 10px; color: var(--color-body); font-size: 18px; line-height: 28px; font-weight: 600; }
.article-prose h4, .article-prose h5, .article-prose h6 { font-size: var(--text-subheading); line-height: var(--line-subheading); color: var(--color-ink); font-weight: 500; margin: 32px 0 var(--space-heading-after); }
.prose p { margin: 0 0 var(--space-paragraph); }
.prose ul, .prose ol { padding-left: 25px; margin: 0 0 24px; }
.prose li { padding-left: 4px; margin-bottom: 8px; }
.prose blockquote { margin: 34px 0; padding: 0 0 0 24px; border-left: 2px solid var(--color-accent); color: var(--color-body); font-size: var(--text-quote); line-height: var(--line-quote); }
.prose blockquote p { margin: 0 0 16px; }
.prose.project-prose--continuation > p,
.prose.project-prose--continuation > h2,
.prose.project-prose--continuation > h3,
.prose.project-prose--continuation > h4,
.prose.project-prose--continuation > h5,
.prose.project-prose--continuation > h6,
.prose.project-prose--continuation > ul,
.prose.project-prose--continuation > ol { width: 100%; max-width: 770px; margin-left: auto; margin-right: auto; }
.prose.project-prose--continuation > h2,
.prose.project-prose--continuation > h3,
.prose.project-prose--continuation > h4,
.prose.project-prose--continuation > h5,
.prose.project-prose--continuation > h6 { text-align: left; }
.prose.project-prose--continuation > blockquote { width: 100%; max-width: 570px; margin: 56px auto 64px; padding: 0; border: 0; }

/* Design system reference page */
.design-system-page { padding-bottom: var(--space-7); }
.ds-intro { max-width: var(--layout-width); margin: 0 auto; padding: var(--space-7) 0 var(--space-5); }
.ds-intro h1 { margin: 0 0 var(--space-3); color: var(--color-ink); font-size: var(--text-page-title); line-height: var(--line-page-title); font-weight: var(--weight-regular); letter-spacing: normal; }
.ds-intro > p:not(.eyebrow, .ds-source-links) { max-width: var(--content-width); margin: 0 0 var(--space-3); }
.ds-source-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-muted); font-size: var(--text-small); line-height: var(--line-small); }
.ds-source-links a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.ds-section { max-width: var(--layout-width); margin: 0 auto; padding: var(--space-6) 0; border-top: 1px solid var(--color-line); }
.ds-section-heading { max-width: var(--content-width); margin: 0 0 var(--space-5); }
.ds-section-heading .eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-small); line-height: var(--line-small); }
.ds-section-heading h2 { margin: 0 0 var(--space-2); color: var(--color-ink); font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-regular); }
.ds-section-heading > p:last-child, .ds-subsection > p { margin: 0; }
.ds-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ds-palette-family { min-width: 0; padding: var(--space-2); border: 1px solid var(--color-line); }
.ds-palette-family h3 { margin: 0 0 var(--space-2); color: var(--color-ink); font-size: var(--text-ui); line-height: var(--line-ui); font-weight: var(--weight-semibold); }
.ds-palette-ramp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ds-palette-chip { min-width: 0; }
.ds-palette-chip-color { display: block; height: 58px; border: 1px solid rgb(0 0 0 / 8%); }
.ds-palette-chip code { display: block; padding-top: 6px; color: var(--color-muted); font-family: var(--font-mono); font-size: 10px; line-height: 14px; overflow-wrap: anywhere; }
.ds-palette-chip b { display: block; color: var(--color-ink); font-size: 11px; line-height: 14px; font-weight: var(--weight-semibold); }
.ds-palette-chip--orange-700 .ds-palette-chip-color { background: var(--color-orange-700); }
.ds-palette-chip--orange-500 .ds-palette-chip-color { background: var(--color-accent); }
.ds-palette-chip--orange-300 .ds-palette-chip-color { background: var(--color-orange-300); }
.ds-palette-chip--orange-100 .ds-palette-chip-color { background: var(--color-orange-100); }
.ds-palette-chip--sky-blue-700 .ds-palette-chip-color { background: var(--color-sky-blue-700); }
.ds-palette-chip--sky-blue-500 .ds-palette-chip-color { background: var(--color-sky-blue-500); }
.ds-palette-chip--sky-blue-300 .ds-palette-chip-color { background: var(--color-sky-blue-300); }
.ds-palette-chip--sky-blue-100 .ds-palette-chip-color { background: var(--color-sky-blue-100); }
.ds-palette-chip--petrol-700 .ds-palette-chip-color { background: var(--color-petrol-700); }
.ds-palette-chip--petrol-500 .ds-palette-chip-color { background: var(--color-petrol-500); }
.ds-palette-chip--petrol-300 .ds-palette-chip-color { background: var(--color-petrol-300); }
.ds-palette-chip--petrol-100 .ds-palette-chip-color { background: var(--color-petrol-100); }
.ds-palette-chip--ocean-blue-700 .ds-palette-chip-color { background: var(--color-ocean-blue-700); }
.ds-palette-chip--ocean-blue-500 .ds-palette-chip-color { background: var(--color-ocean-blue-500); }
.ds-palette-chip--ocean-blue-300 .ds-palette-chip-color { background: var(--color-ocean-blue-300); }
.ds-palette-chip--ocean-blue-100 .ds-palette-chip-color { background: var(--color-ocean-blue-100); }
.ds-palette-chip--purple-700 .ds-palette-chip-color { background: var(--color-purple-700); }
.ds-palette-chip--purple-500 .ds-palette-chip-color { background: var(--color-purple-500); }
.ds-palette-chip--purple-300 .ds-palette-chip-color { background: var(--color-purple-300); }
.ds-palette-chip--purple-100 .ds-palette-chip-color { background: var(--color-purple-100); }
.ds-palette-chip--berry-700 .ds-palette-chip-color { background: var(--color-berry-700); }
.ds-palette-chip--berry-500 .ds-palette-chip-color { background: var(--color-berry-500); }
.ds-palette-chip--berry-300 .ds-palette-chip-color { background: var(--color-berry-300); }
.ds-palette-chip--berry-100 .ds-palette-chip-color { background: var(--color-berry-100); }
.ds-palette-chip--crimson-700 .ds-palette-chip-color { background: var(--color-crimson-700); }
.ds-palette-chip--crimson-500 .ds-palette-chip-color { background: var(--color-crimson-500); }
.ds-palette-chip--crimson-300 .ds-palette-chip-color { background: var(--color-crimson-300); }
.ds-palette-chip--crimson-100 .ds-palette-chip-color { background: var(--color-crimson-100); }
.ds-palette-chip--gold-700 .ds-palette-chip-color { background: var(--color-gold-700); }
.ds-palette-chip--gold-500 .ds-palette-chip-color { background: var(--color-gold-500); }
.ds-palette-chip--gold-300 .ds-palette-chip-color { background: var(--color-gold-300); }
.ds-palette-chip--gold-100 .ds-palette-chip-color { background: var(--color-gold-100); }
.ds-palette-chip--dark-gray-700 .ds-palette-chip-color { background: var(--color-dark-gray-700); }
.ds-palette-chip--dark-gray-500 .ds-palette-chip-color { background: var(--color-dark-gray-500); }
.ds-palette-chip--dark-gray-300 .ds-palette-chip-color { background: var(--color-dark-gray-300); }
.ds-palette-chip--dark-gray-100 .ds-palette-chip-color { background: var(--color-dark-gray-100); }
.ds-palette-chip--light-gray-700 .ds-palette-chip-color { background: var(--color-light-gray-700); }
.ds-palette-chip--light-gray-500 .ds-palette-chip-color { background: var(--color-light-gray-500); }
.ds-palette-chip--light-gray-300 .ds-palette-chip-color { background: var(--color-light-gray-300); }
.ds-palette-chip--light-gray-100 .ds-palette-chip-color { background: var(--color-light-gray-100); }
.ds-subsection-heading { margin: 0 0 var(--space-2); color: var(--color-ink); font-size: var(--text-ui); line-height: var(--line-ui); font-weight: var(--weight-semibold); }
.ds-color-roles { margin-top: var(--space-5); }
.ds-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ds-color-card { min-width: 0; border: 1px solid var(--color-line); }
.ds-color-swatch { display: block; height: 78px; background: var(--swatch); border-bottom: 1px solid var(--color-line); }
.ds-color-swatch--ink { --swatch: var(--color-ink); }
.ds-color-swatch--body { --swatch: var(--color-body); }
.ds-color-swatch--muted { --swatch: var(--color-muted); }
.ds-color-swatch--caption { --swatch: var(--color-caption); }
.ds-color-swatch--accent { --swatch: var(--color-accent); }
.ds-color-swatch--hero { --swatch: var(--color-hero); }
.ds-color-swatch--featured { --swatch: var(--color-featured); }
.ds-color-swatch--line { --swatch: var(--color-line); }
.ds-color-swatch--soft { --swatch: var(--color-soft); }
.ds-color-swatch--paper { --swatch: var(--color-paper); }
.ds-color-swatch--case { --swatch: #0757f9; }
.ds-color-card > div { padding: var(--space-2); }
.ds-color-card h3, .ds-type-row h3, .ds-subsection h3 { margin: 0 0 4px; color: var(--color-ink); font-size: var(--text-ui); line-height: var(--line-ui); font-weight: var(--weight-semibold); }
.ds-color-card code, .ds-type-row code, .ds-space-row code, .ds-module-table code, .ds-definition-list code { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-meta); line-height: var(--line-meta); overflow-wrap: anywhere; }
.ds-subsection { margin-top: var(--space-6); }
.ds-subsection > h3 { margin-bottom: var(--space-2); font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-regular); }
.ds-supporting-copy { max-width: var(--content-width); color: var(--color-muted); font-size: var(--text-small); line-height: var(--line-small); }
.ds-type-list { margin-top: var(--space-3); border-top: 1px solid var(--color-line); }
.ds-type-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
.ds-type-row h3 { margin-bottom: 0; }
.ds-type-row p { margin: 0; color: var(--color-ink); }
.ds-type-title { font-size: var(--text-page-title); line-height: var(--line-page-title); font-weight: var(--weight-heading); letter-spacing: normal; }
.ds-type-section { font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-heading); }
.ds-type-lede { font-size: var(--text-lede); line-height: var(--line-lede); }
.ds-type-body { font-size: var(--text-body); line-height: var(--line-body); }
.ds-type-ui { font-size: var(--text-ui); line-height: var(--line-ui); font-weight: var(--weight-semibold); }
.ds-type-caption { font-size: var(--text-small); line-height: var(--line-small); color: var(--color-muted) !important; }
.ds-type-meta { font-size: var(--text-meta); line-height: var(--line-meta); font-weight: var(--weight-bold); letter-spacing: .11em; color: var(--color-accent) !important; }
.ds-token-columns { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-6); }
.ds-token-columns .ds-subsection { min-width: 0; }
.ds-space-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: 8px 0; border-bottom: 1px solid var(--color-line); }
.ds-space-bar { display: block; height: 8px; max-width: 100%; background: var(--color-accent); }
.ds-space-1 { width: var(--space-1); } .ds-space-2 { width: var(--space-2); } .ds-space-3 { width: var(--space-3); } .ds-space-4 { width: var(--space-4); } .ds-space-5 { width: var(--space-5); } .ds-space-6 { width: var(--space-6); } .ds-space-7 { width: var(--space-7); }
.ds-definition-list { margin: 0; border-top: 1px solid var(--color-line); }
.ds-definition-list > div { display: grid; grid-template-columns: minmax(135px, .75fr) minmax(0, 1.25fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); }
.ds-definition-list dt { color: var(--color-ink); font-size: var(--text-small); line-height: var(--line-small); font-weight: var(--weight-semibold); }
.ds-definition-list dd { margin: 0; color: var(--color-body); font-size: var(--text-small); line-height: var(--line-small); }
.ds-table-wrap { overflow-x: auto; }
.ds-module-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); line-height: var(--line-small); }
.ds-module-table th, .ds-module-table td { padding: var(--space-2); border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.ds-module-table thead th { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-meta); line-height: var(--line-meta); letter-spacing: .09em; text-transform: uppercase; }
.ds-module-table tbody th { width: 190px; color: var(--color-ink); font-weight: var(--weight-semibold); }
.ds-module-table td:nth-child(2) { min-width: 290px; }
.ds-project-grid { margin-top: var(--space-3); }
.ds-accordion-example { max-width: 570px; margin-top: var(--space-3); }
.ds-example-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: var(--space-6); align-items: start; }
.ds-example-callout { padding: var(--space-4); background: #0757f9; color: var(--color-on-accent); }
.ds-example-callout .eyebrow { color: var(--color-on-accent); margin: 0 0 var(--space-2); font-size: var(--text-meta); line-height: var(--line-meta); }
.ds-example-callout h3 { max-width: 420px; margin: 0 0 var(--space-4); color: var(--color-on-accent); font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-medium); }
.ds-example-callout .contact-button { display: inline-block; background: var(--color-on-accent); color: #0757f9; }
.ds-implementation .ds-definition-list { max-width: var(--content-width); }
.content-image { margin: 42px 0 48px; }
.content-image img { display: block; width: 100%; height: auto; max-height: min(760px, 80vh); margin-left: auto; margin-right: auto; object-fit: contain; background: transparent; }
.content-image figcaption { font-size: var(--text-small); line-height: var(--line-small); color: var(--color-muted); margin-top: 12px; }
.legal-prose h2 { font-size: 24px; line-height: 32px; margin: 36px 0 12px; }
.legal-prose h3 { font-size: 20px; line-height: 28px; margin: 30px 0 8px; }
.writing-intro { padding-bottom: 0; }
.article-list { max-width: var(--layout-width); margin: 40px auto 100px; }
.article-card { display: grid; grid-template-columns: 110px minmax(0, 1fr) 100px; gap: 28px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--color-line); margin: 0; }
.article-date { font-size: 14px; line-height: 20px; color: var(--color-muted); margin: 16px 0 0; }
.article-date span { padding: 0 7px; }
.article-card h2 { min-width: 0; font-size: 22px; line-height: 32px; font-weight: var(--weight-regular); color: var(--color-ink); margin: 0; }
.article-card > p:not(.article-date) { font-size: 18px; line-height: 28px; margin: 0; max-width: 1170px; }
.article-card .article-date, .article-reading-time { font-size: var(--text-small); line-height: var(--line-small); color: var(--color-muted); margin: 0; white-space: nowrap; }
.article-reading-time { text-align: right; }
.back-to-top { position: fixed; z-index: 9; right: clamp(26px, 5vw, 72px); bottom: 38px; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--color-ink); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(7px); transition: opacity .22s ease, transform .22s ease, visibility .22s; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top::before { content: ""; position: absolute; left: 8px; top: 13px; width: 17px; height: 17px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); }
.back-to-top:hover { color: var(--color-accent); }
.back-to-top:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.reveal-ready .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-reveal) ease, transform var(--motion-reveal) var(--ease-standard); }
.reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.draft-notice { max-width: var(--layout-width); margin: 28px auto 0; padding: 12px 16px; border: 1px solid var(--color-orange-100); background: color-mix(in srgb, var(--color-orange-100) 15%, var(--color-paper)); color: var(--color-orange-700); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.draft-case-study .project-hero-band { padding-top: 56px; }
.draft-case-study .project-hero { background: var(--color-paper); box-shadow: 0 16px 44px color-mix(in srgb, var(--color-ink) 7%, transparent); }
.draft-case-study .project-hero img { max-height: 740px; object-fit: contain; background: var(--color-paper); }
.draft-case-study .case-study-layout { padding-top: calc(190px - var(--hero-overlap)); }

@media (max-width: 1350px) {
  .home-hero, .section:not(.featured-section), .page-intro, .project-grid-large, .article-intro, .article-list, .project-hero-band .project-hero, .case-study-layout, .draft-notice, .ds-intro, .ds-section { margin-left: var(--page-gutter); margin-right: var(--page-gutter); }
  .project-hero-band .project-hero { padding: 0; }
}

@media (max-width: 900px) {
  .phone-story { width: min(100%, calc(100vw - 2 * var(--page-gutter))); margin: 48px auto 64px; display: block; }
  .phone-story-stage { display: none !important; }
  .phone-story-step { min-height: 0; padding: 34px 0 48px; border-bottom: 0; }
  .phone-story-copy { position: static; width: 100%; max-width: 420px; margin: 0 auto; text-align: left; }
  .phone-story-step:last-child { border-bottom: 0; }
  .phone-story-inline-screen { display: flex !important; }
}

@media (max-width: 760px) {
  :root { --page-gutter: 24px; }
  body { font-size: 17px; }
  .site-header { height: var(--header-height-mobile); }
  .menu-toggle { display: block; }
  .primary-nav { display: flex; position: absolute; top: calc(var(--header-height-mobile) - 1px); left: 0; right: 0; padding: 20px var(--page-gutter) 28px; background: var(--color-paper); border-top: 1px solid var(--color-line); box-shadow: 0 12px 20px color-mix(in srgb, var(--color-ink) 4%, transparent); align-items: stretch; gap: 3px; flex-direction: column; font-size: 17px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity var(--motion-quick) ease, transform var(--motion-quick) ease, visibility var(--motion-quick); }
  .primary-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .primary-nav > a:not(.contact-button) { padding: 12px 0; }
  .primary-nav > a[aria-current="page"]::after { right: auto; width: 28px; bottom: 3px; }
  .contact-button { text-align: center; margin-top: 12px; }
  .home-hero { min-height: auto; margin: 0 var(--page-gutter); padding: 48px 0 70px; grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { font-size: clamp(30px, 8vw, 40px); max-width: 560px; }
  .hero-portrait { justify-self: stretch; width: 100%; max-width: 500px; }
  .section { margin: 0 var(--page-gutter); padding: 64px 0 72px; }
  .about-section { display: block; }
  .about-section .section-heading { margin-bottom: 20px; }
  .section-copy { max-width: 100%; }
  .experience-item summary { grid-template-columns: minmax(0,1fr) 24px; gap: 6px 14px; padding: 14px 0; }
  .experience-title { font-size: 16px; line-height: 24px; }
  .experience-toggle { grid-column: 2; grid-row: 1; }
  .experience-detail { margin: 0 0 24px; max-width: 100%; }
  .project-grid { grid-template-columns: 1fr; gap: 30px; }
  .project-card-image { aspect-ratio: 1.08 / 1; }
  .project-grid-large { width: auto; margin: 64px var(--page-gutter) 80px; gap: 62px; }
  .project-card h3 { font-size: 18px; }
  .project-prose > h4 { font-size: 28px; line-height: 36px; }
  .project-prose > h6 { font-size: 17px; line-height: 28px; }
  .page-intro { margin: 0 var(--page-gutter); padding: 54px 0 32px; }
  .page-intro h1 { font-size: clamp(40px, 10vw, 56px); line-height: 1.12; }
  .project-hero-band { padding-top: 42px; }
  .project-hero-band { padding-top: 42px; }
  .project-hero-band .project-intro { margin: 0; padding: 0 var(--page-gutter); }
  .project-hero-band .project-intro h1 { font-size: clamp(38px, 10vw, 52px); line-height: 1.08; }
  .project-hero-band .project-lede { font-size: 18px; line-height: 28px; }
  .case-study { --hero-overlap: clamp(60px, 9vw, 70px); }
  .project-hero-band .project-hero { margin: 30px var(--page-gutter) 0; }
  .case-study-layout { display: flex; flex-direction: column; margin: 0; padding: calc(125px - var(--hero-overlap)) var(--page-gutter) 0; gap: 32px; }
  .case-study-layout .project-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .case-study-layout .project-facts > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
  .case-study-layout .project-facts dt { margin: 0; }
  .case-study-layout .project-facts dd { min-width: 0; overflow-wrap: anywhere; }
  .case-study-layout .project-facts > div:last-child { grid-column: 1 / -1; }
  .case-study-layout .project-prose { font-size: 17px; line-height: 28px; margin-bottom: 60px; }
  .case-study-layout .project-prose h2, .case-study-layout .project-prose h4 { font-size: 28px; line-height: 36px; }
  .case-study-layout .project-prose h3, .case-study-layout .project-prose h6 { font-size: 17px; line-height: 28px; }
  .case-study-layout .project-prose p { margin-bottom: 24px; }
  .case-study-layout .project-prose .content-image { width: 100vw; max-width: none; margin: 34px 0 24px calc(-1 * var(--page-gutter)); }
  .case-study-layout .project-prose .image-grid { width: 100vw; max-width: none; margin: 34px 0 50px calc(-1 * var(--page-gutter)); grid-template-columns: 1fr; gap: 30px; }
  .case-study-layout .project-prose .image-row { width: 100vw; max-width: none; margin: 34px 0 50px calc(-1 * var(--page-gutter)); }
  .case-study-layout .project-prose blockquote { font-size: 21px; margin: 38px 0 45px; }
  .project-prose--continuation { max-width: none; margin: 0 var(--page-gutter) 60px; font-size: 17px; line-height: 28px; }
  .project-prose--continuation > p, .project-prose--continuation > h2, .project-prose--continuation > h3, .project-prose--continuation > h4, .project-prose--continuation > h5, .project-prose--continuation > h6, .project-prose--continuation > blockquote, .project-prose--continuation > ul, .project-prose--continuation > ol { max-width: none; }
  .prose.project-prose--continuation > p, .prose.project-prose--continuation > h2, .prose.project-prose--continuation > h3, .prose.project-prose--continuation > h4, .prose.project-prose--continuation > h5, .prose.project-prose--continuation > h6, .prose.project-prose--continuation > ul, .prose.project-prose--continuation > ol, .prose.project-prose--continuation > blockquote { max-width: none; }
  .project-prose--continuation > p { margin-bottom: 24px; }
  .project-prose--continuation > h2, .project-prose--continuation > h4 { font-size: 28px; line-height: 36px; }
  .project-prose--continuation > h3, .project-prose--continuation > h6 { font-size: 17px; line-height: 28px; }
  .project-prose--continuation > .content-image { width: 100vw; max-width: none; margin: 34px 0 24px calc(-1 * var(--page-gutter)); }
  .project-prose--continuation > .image-grid { width: 100%; margin: 34px auto 50px; grid-template-columns: 1fr; gap: 30px; }
  .project-prose--continuation > .image-grid:first-child { width: 100vw; margin: 34px 0 50px calc(-1 * var(--page-gutter)); padding: 36px var(--page-gutter); }
  .project-prose--continuation > .image-grid--captioned:first-child { grid-template-columns: 1fr; gap: 26px; }
  .image-grid-caption { max-width: 520px; }
  .image-row, .project-prose--continuation > .image-row { width: 100%; margin: 34px auto 50px; grid-template-columns: 1fr; gap: 18px; }
  .image-row-caption { max-width: 520px; }
  .image-row-visual { grid-column: 1; grid-row: 2; justify-content: center; }
  .project-prose--continuation > .image-band { width: 100vw; margin: 34px 0 40px calc(-1 * var(--page-gutter)); padding: 36px var(--page-gutter); gap: 42px; }
  .image-band { width: 100vw; margin: 34px 0 40px calc(-1 * var(--page-gutter)); padding: 36px var(--page-gutter); gap: 42px; }
  .image-band-figure, .image-band-figure--reverse { display: flex; flex-direction: column; gap: 14px; }
  .image-band-figure--reverse img { order: 0; }
  .image-band-figure--reverse figcaption { order: 1; text-align: left; }
  .image-band-figure figcaption { font-size: 14px; line-height: 20px; }
  .next-projects { margin: 20px 0 0; padding: 48px var(--page-gutter) 64px; }
  .next-projects h2 { margin-bottom: 26px; }
  .next-projects .project-grid { grid-template-columns: 1fr; }
  .article-intro { margin: 0 var(--page-gutter); padding: 53px 0 34px; }
  .article-intro h1 { font-size: clamp(40px, 10vw, 56px); line-height: 1.12; }
  .ds-intro { padding: 54px 0 34px; }
  .ds-intro h1 { font-size: clamp(40px, 10vw, var(--text-page-title)); line-height: 1.12; }
  .ds-section { padding: 42px 0; }
  .ds-section-heading h2 { font-size: 28px; line-height: 36px; }
  .ds-palette { grid-template-columns: 1fr; gap: 12px; }
  .ds-palette-family { padding: 12px; }
  .ds-palette-chip-color { height: 48px; }
  .ds-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ds-token-columns, .ds-example-row { grid-template-columns: 1fr; gap: 30px; }
  .ds-type-row { grid-template-columns: 1fr; gap: 8px; }
  .ds-type-title { font-size: clamp(36px, 9vw, 50px); line-height: 1.1; }
  .ds-type-section, .ds-example-callout h3 { font-size: 28px; line-height: 36px; }
  .ds-space-row { grid-template-columns: 130px minmax(0, 1fr); }
  .ds-definition-list > div { grid-template-columns: 1fr; gap: 4px; }
  .ds-module-table { min-width: 740px; }
  .ds-implementation .ds-definition-list { max-width: none; }
  .article-byline { flex-wrap: wrap; }
  .article-prose, .legal-prose { font-size: 17px; line-height: 28px; margin: 42px var(--page-gutter) 78px; }
  .prose h2 { font-size: 28px; margin-top: 44px; }
  .prose h3 { font-size: 21px; }
  .prose blockquote { font-size: 18px; margin: 28px 0; }
  .content-image { margin: 30px 0 36px; }
  .image-grid { width: 100%; margin: 34px auto 50px; grid-template-columns: 1fr; gap: 30px; }
  .project-prose--continuation > .image-grid:first-child { width: 100vw; margin: 34px 0 50px calc(-1 * var(--page-gutter)); padding: 36px var(--page-gutter); }
  .draft-case-study .project-hero-band { padding-top: 42px; }
  .draft-case-study .case-study-layout { padding-top: calc(125px - var(--hero-overlap)); }
  .article-list { margin: 58px var(--page-gutter) 80px; }
  .article-card { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 24px 0; margin: 0; }
  .article-card .article-date { grid-column: 1; grid-row: 1; }
  .article-card .article-reading-time { grid-column: 2; grid-row: 1; }
  .article-card h2 { grid-column: 1 / -1; grid-row: 2; font-size: 20px; }
  .article-card > p:not(.article-date) { font-size: 17px; line-height: 28px; }
  .featured-section { margin: 0; padding: 58px var(--page-gutter) 70px; }
  .featured-section .section-heading { margin-bottom: 26px; }
  .site-footer { padding: 42px var(--page-gutter) 48px; grid-template-columns: 1fr; gap: 32px; }
  .site-footer > div:first-child { grid-column: 1 / -1; }
  .site-footer h2 { font-size: 14px; }
  .back-to-top { right: 18px; bottom: 24px; }
  .back-to-top::before { left: 8px; top: 13px; }
  .site-footer p, .site-footer a { font-size: 14px; line-height: 20px; }
  .draft-notice { margin: 20px var(--page-gutter) 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal-ready .reveal { opacity: 1; transform: none; }
}

.next-projects .project-card h3 { color: var(--color-on-accent); }
.next-projects .project-card-meta { color: var(--color-on-accent); opacity: .8; }
.next-projects .project-card--draft { border-color: color-mix(in srgb, var(--color-on-accent) 25%, transparent); }

/* Keep the hovered writing row prominent without affecting touch browsing. */
@media (hover: hover) and (pointer: fine) {
  .article-card { transition: opacity 180ms ease; }
  .article-list:has(.article-card:hover) .article-card:not(:hover):not(:focus-within) { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .article-card { transition: none; }
}

/* Indented pull quotes with hanging punctuation. */
.prose blockquote.pull-quote, .case-study .prose blockquote.pull-quote {
  box-sizing: border-box; width: 100%; max-width: 770px;
  margin: 48px auto; padding: 0; border: 0;
  color: var(--color-ink); font-style: normal;
}
.prose .pull-quote .quote-text { position: relative; margin: 0 32px; padding: 0 0 0 30px; }
.prose .pull-quote .quote-text::before { content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 3px; background: var(--case-accent, var(--color-accent)); font-size: var(--text-quote); }
.prose .pull-quote .quote-text > p {
  position: relative; max-width: none; margin: 0 0 20px;
  font-size: var(--text-quote); line-height: var(--line-quote);
  font-weight: var(--weight-regular); font-style: italic; letter-spacing: 0; color: var(--case-accent, var(--color-accent));
}
.prose .pull-quote .quote-text > p:last-child { margin-bottom: 0; }
.quote-opening { position: absolute; right: 100%; top: 0; }
.prose .pull-quote .quote-attribution {
  margin: 16px 32px 0; font-size: var(--text-small); line-height: var(--line-small);
  font-weight: var(--weight-regular); font-style: normal; color: var(--color-body); letter-spacing: 0;
}
@media (max-width: 700px) {
  .prose blockquote.pull-quote, .case-study .prose blockquote.pull-quote { width: 100%; margin: 36px auto; padding: 0; }
}

@media (max-width: 700px) { .prose .pull-quote .quote-text { margin: 0 16px; } .prose .pull-quote .quote-attribution { margin-left: 16px; margin-right: 16px; } }

/* Navigation metrics matched to timhoefer.de. */
.primary-nav .contact-button {
  font-size: 14px; line-height: 20px; font-weight: var(--weight-medium);
  padding: 10px 15px; border-radius: 8px;
}
@media (min-width: 761px) {
  .primary-nav { gap: 40px; font-size: 14px; line-height: 20px; }
  .primary-nav > a:not(.contact-button) { padding: 0; }
  .primary-nav > a[aria-current="page"] {
    text-decoration: underline; text-decoration-thickness: 2px;
    text-underline-offset: 15px; text-decoration-skip-ink: none;
  }
  .primary-nav > a[aria-current="page"]::after { content: none; }
  .primary-nav .contact-button { margin-left: -5px; }
}

/* Editorial variant of the case-study hero. */
.article-hero-band { --article-overlap: clamp(48px, 7vw, 100px); position: relative; isolation: isolate; padding: 72px var(--page-gutter) 64px; color: var(--color-on-accent); }
.article-hero-band::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--color-accent); }
.article-hero-band--with-image { padding-bottom: 0; }
.article-hero-band--with-image::before { bottom: var(--article-overlap); }
.article-hero-band .article-intro { max-width: var(--layout-width); margin: 0 auto; padding: 0; }
.article-hero-band .article-intro h1 { max-width: 1050px; margin: 0; text-align: left; color: inherit; font-size: var(--text-blog-title); line-height: var(--line-blog-title); font-weight: var(--weight-heading); letter-spacing: normal; }
.article-teaser { max-width: 900px; margin: 24px 0 0; font-size: var(--text-lede); line-height: var(--line-lede); }
.article-hero-band .article-byline { justify-content: flex-start; flex-wrap: wrap; margin: 28px 0 0; color: inherit; font-size: var(--text-small); }
.article-hero-band .article-byline a { color: inherit; text-decoration-color: currentColor; }
.article-hero-image { max-width: var(--layout-width); margin: 44px auto 0; }
.article-hero-image img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; object-position: left bottom; }
.article-hero-image figcaption { color: var(--color-body); font-size: var(--text-small); line-height: var(--line-small); margin-top: 12px; }
.article-hero-band + .article-prose { margin-top: 64px; }
@media (max-width: 760px) {
  .article-hero-band { padding-top: 48px; }
  .article-teaser { font-size: 20px; line-height: 28px; }
  .article-hero-image { margin-top: 32px; }
  .article-hero-band + .article-prose { margin-top: 40px; }
}

/* Responsive role pairs keep leading on the 4px rhythm at every width. */
.hero-copy { font-size: 40px; line-height: 48px; }
.primary-nav, .wordmark { line-height: var(--line-small); }
.experience-item .clients { line-height: var(--line-ui); }
.ds-type-blog-title { font-size: var(--text-blog-title); line-height: var(--line-blog-title); font-weight: var(--weight-heading); }
.ds-type-subheading { font-size: var(--text-subheading); line-height: var(--line-subheading); font-weight: var(--weight-heading); }
.ds-type-quote { font-size: var(--text-quote); line-height: var(--line-quote); font-style: italic; }
.ds-palette-chip code, .ds-palette-chip b { line-height: 16px; }
@media (max-width: 760px) {
  :root {
    --text-body: 17px;
    --text-lede: 20px;
    --line-lede: 28px;
    --text-section: 28px;
    --line-section: 36px;
    --text-page-title: 40px;
    --line-page-title: 48px;
    --text-blog-title: 32px;
    --line-blog-title: 40px;
    --text-subheading: 22px;
    --line-subheading: 32px;
    --text-quote: 22px;
    --line-quote: 32px;
  }
  .hero-copy { font-size: 32px; line-height: 40px; }
  .page-intro h1, .project-hero-band .project-intro h1, .article-intro h1, .ds-intro h1, .ds-type-title {
    font-size: var(--text-page-title); line-height: var(--line-page-title);
  }
  .primary-nav { line-height: var(--line-ui); }
  .prose h2 { line-height: var(--line-section); }
  .article-card h2 { line-height: 28px; }
}

/* Mobile navigation: compact links, text-width active marker and explicit close control. */
@media (max-width: 760px) {
  .menu-toggle { position: relative; width: 48px; height: 48px; padding: 12px; }
  .menu-toggle span { position: absolute; left: 12px; top: 20px; margin: 0; transition: transform var(--motion-quick) ease; }
  .menu-toggle span + span { top: 27px; }
  .menu-toggle[aria-expanded="true"] span { top: 23px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span + span { top: 23px; transform: rotate(-45deg); }
  .primary-nav { top: 100%; padding: 16px var(--page-gutter) 24px; align-items: flex-start; gap: 8px; font-size: 18px; line-height: 28px; max-height: calc(100dvh - var(--header-height-mobile)); overflow-y: auto; }
  .primary-nav > a:not(.contact-button) { display: block; padding: 8px 0; min-height: 44px; }
  .primary-nav > a[aria-current="page"]::after { content: none; }
  .primary-nav > a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-skip-ink: none; }
  .primary-nav .contact-button { align-self: flex-start; margin: 12px 0 0; padding: 12px 20px; font-size: 16px; line-height: 24px; }
}

/* Editorial reading measures and accessible secondary text. */
.article-prose { max-width: 680px; }
.article-prose > .content-image { width: min(780px, calc(100vw - 2 * var(--page-gutter))); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.article-teaser { max-width: 760px; color: var(--color-on-accent); opacity: .85; }
.article-prose h2 { color: var(--color-accent); font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-medium); letter-spacing: normal; margin: var(--space-heading-before) 0 24px; }
.article-prose h3, .article-prose h4, .article-prose h5, .article-prose h6 { color: var(--color-body); font-size: var(--text-body); line-height: var(--line-body); font-weight: var(--weight-semibold); letter-spacing: normal; margin: 32px 0 12px; }
.article-prose > :first-child { margin-top: 0; }
.article-prose .content-image figcaption { text-align: center; color: var(--color-body); }
.article-prose blockquote:not(.pull-quote) { color: var(--color-accent); font-style: italic; font-weight: var(--weight-regular); font-size: var(--text-quote); line-height: var(--line-quote); margin: 48px 32px; border-left-width: 3px; }
.article-hero-band .article-byline { color: var(--color-on-accent); }
.article-hero-band .article-byline a { color: inherit; }
.hero-portrait figcaption, .experience-item .clients { color: var(--color-muted); }
.experience-detail { animation: none; }
@media (max-width: 760px) {
  .article-prose > .content-image { width: 100%; margin-left: 0; transform: none; }
}

/* Case-study navigation follows the colored hero surface. */
.site-header { transition: transform var(--motion-base) ease, background-color var(--motion-quick) ease; }
.site-header.is-over-hero { background: var(--nav-hero-color); }
.site-header.is-over-hero .wordmark,
.site-header.is-over-hero .primary-nav,
.site-header.is-over-hero .primary-nav > a:not(.contact-button) { color: var(--color-on-accent); }
.site-header.is-over-hero .primary-nav > a[aria-current="page"]::after { background: var(--color-paper); }
.site-header.is-over-hero .contact-button { background: var(--color-paper); color: var(--nav-hero-color); }
.site-header.is-over-hero .contact-button:hover { background: color-mix(in srgb, var(--color-on-accent) 88%, transparent); }
.site-header.is-over-hero .menu-toggle span { background: var(--color-paper); }
@media (max-width: 760px) {
  .site-header.is-over-hero .primary-nav { background: var(--nav-hero-color); border-top-color: color-mix(in srgb, var(--color-on-accent) 19%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* Homepage-only, pointer-local dotted paper texture. */
.home-grid-surface { position: relative; isolation: isolate; }
.home-pointer-grid { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-pointer-grid {
    display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--color-body) 18%, transparent) .8px, transparent 1.3px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle 300px at var(--pointer-x, -400px) var(--pointer-y, -400px), #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 300px at var(--pointer-x, -400px) var(--pointer-y, -400px), #000 0%, transparent 100%);
    opacity: 0; transition: opacity 240ms ease;
  }
  .home-pointer-grid.is-active { opacity: 1; }
}

/* Keep inline emphasis subordinate to editorial subheadings. */
.article-prose :is(p, li) :is(strong, b),
.project-prose :is(p, li) :is(strong, b) { font-weight: var(--weight-medium); }
.article-prose :is(h2, h3, h4, h5, h6) :is(strong, b),
.project-prose :is(h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }

/* Shared editorial roles: blogs and case studies. */
.hero-copy { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.project-card--related h3 { text-align: left; font-size: 18px; line-height: 28px; font-weight: var(--weight-regular); margin: 2px 0 0; }
.featured-section .project-card-meta { color: var(--color-on-accent); opacity: .8; }
.article-hero-image figcaption, .article-prose .content-image figcaption,
.case-study .content-image figcaption, .image-grid-figure figcaption,
.hero-portrait figcaption, .archive-project-caption { color: var(--color-caption); text-align: center; font-size: var(--text-small); line-height: var(--line-small); }
.hero-portrait figcaption a { color: inherit; }
.project-prose--continuation > .image-grid:first-child figcaption { color: var(--color-on-accent); }
.case-study-layout .project-prose h2, .prose.project-prose--continuation > h2 { margin-top: var(--space-heading-before); margin-bottom: 24px; }
.case-study-layout .project-prose > h2:first-child, .prose.project-prose--continuation > h2:first-child { margin-top: 0; }
.ds-type-subheading { font-size: var(--text-body); line-height: var(--line-body); font-weight: var(--weight-semibold); }
@media (max-width: 760px) { .project-hero-band .project-lede { font-size: var(--text-lede); line-height: var(--line-lede); } }
.prose.project-prose--continuation > h2 { color: var(--case-accent); font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-medium); }
.prose.project-prose--continuation > h3 { color: var(--color-body); font-size: var(--text-body); line-height: var(--line-body); font-weight: var(--weight-semibold); margin-top: 32px; margin-bottom: 12px; }

/* Design-system specimens mirror current component roles. */
.ds-spec-mobile { display: none; }
.ds-type-meta { font-family: var(--font-mono); }
.ds-type-home { font-size: 40px; line-height: 48px; font-weight: 400; letter-spacing: normal; }
p.ds-type-list { font-size: 22px; line-height: 32px; font-weight: 400; }
p.ds-type-list { border: 0; }
.ds-type-card { font-size: 18px; line-height: 28px; font-weight: 400; }
.ds-type-emphasis { font-size: var(--text-body); line-height: var(--line-body); font-weight: 500; }
.ds-type-cv-title { font-size: 16px; line-height: 24px; font-weight: 500; }
.ds-type-cv-body { font-size: 14px; line-height: 24px; font-weight: 400; }
@media (max-width: 760px) {
  .ds-spec-desktop { display: none; }
  .ds-spec-mobile { display: inline; }
  .ds-type-home { font-size: 32px; line-height: 40px; }
  p.ds-type-list { font-size: 20px; line-height: 28px; }
}

/* Case-study facts match the original metadata typography. */
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/ibm-plex-mono-semibold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
:root { --text-fact-label: 11px; --line-fact-label: 18px; --tracking-fact-label: 1.5px; }
.case-study-layout .project-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.case-study-layout .project-facts dt, .ds-type-meta { font-family: var(--font-mono); font-size: var(--text-fact-label); line-height: var(--line-fact-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-fact-label); }
.case-study-layout .project-facts dd { font-family: var(--font-sans); font-size: var(--text-small); line-height: var(--line-small); font-weight: var(--weight-regular); }

/* Homepage positioning. */
.hero-text { min-width: 0; max-width: 570px; }

/* Homepage sections share the case-study heading role. */
.section-heading { font-family: var(--font-sans); font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-medium); letter-spacing: normal; color: var(--color-accent); margin: 0 0 32px; }

/* Article color families share the case-study accent and navigation behavior. */
.blog-article { --color-accent: var(--case-accent); }
.blog-article .article-hero-band { color: var(--article-foreground); }
.blog-article .article-hero-band .article-byline,
.blog-article .article-teaser { color: var(--article-foreground); }
.site-header.is-over-hero .wordmark,
.site-header.is-over-hero .primary-nav,
.site-header.is-over-hero .primary-nav > a:not(.contact-button) { color: var(--nav-hero-ink, var(--color-on-accent)); }
.site-header.is-over-hero .primary-nav > a[aria-current="page"]::after,
.site-header.is-over-hero .menu-toggle span,
.site-header.is-over-hero .contact-button { background: var(--nav-hero-ink, var(--color-on-accent)); }

/* Impressum uses a compact section/subheading hierarchy. */
.impressum-intro h1 { font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-medium); letter-spacing: normal; }
.prose.impressum-prose h2 { font-size: var(--text-section); line-height: var(--line-section); font-weight: var(--weight-medium); margin: var(--space-heading-before) 0 24px; }
.prose.impressum-prose h3 { font-size: var(--text-body); line-height: var(--line-body); font-weight: var(--weight-semibold); margin: 32px 0 12px; }
.prose.impressum-prose > :first-child { margin-top: 0; }

/* Keep the legal page title and copy on one responsive reading column. */
.impressum-intro, .policy-intro, .prose.legal-prose {
  width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

/* Project names and dates form one compact caption beneath each image. */
.project-card h3, .project-card--related h3, .ds-type-card {
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--weight-medium);
  letter-spacing: normal;
}
.project-card:not(.project-card--draft) h3 { margin: 12px 0 0; }
.project-card:not(.project-card--draft) .project-card-meta { margin-top: 4px; }

/* Theme preference: palette primitives stay stable, semantic surfaces adapt. */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: var(--color-dark-gray-700);
  --color-soft: #191c1e;
  --color-ink: var(--color-dark-gray-100);
  --color-body: var(--color-dark-gray-300);
  --color-muted: var(--color-light-gray-500);
  --color-caption: var(--color-light-gray-500);
  --color-line: #35393d;
  --color-accent: var(--color-orange-300);
  --color-accent-hover: var(--color-orange-100);
}
html[data-theme="dark"] .case-study-layout .project-prose h2,
html[data-theme="dark"] .prose.project-prose--continuation > h2,
html[data-theme="dark"] .project-facts dt,
html[data-theme="dark"] .prose .pull-quote .quote-text > p { color: color-mix(in srgb, var(--case-accent, var(--color-accent)) 55%, white); }
html[data-theme="dark"] .blog-article .article-prose h2 { color: color-mix(in srgb, var(--case-accent) 55%, white); }
html[data-theme="dark"] .draft-notice { color: var(--color-orange-100); }
@media (max-width: 760px) {
}

.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; flex: 0 0 auto; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.theme-toggle [data-theme-icon] { display: none; }
.theme-toggle[data-preference="light"] [data-theme-icon="light"],
.theme-toggle[data-preference="dark"] [data-theme-icon="dark"] { display: initial; }
@media (max-width: 760px) { .theme-toggle { align-self: flex-start; width: 44px; height: 44px; } }

html[data-theme="light"] .theme-toggle:not([data-preference]) [data-theme-icon="light"],
html[data-theme="dark"] .theme-toggle:not([data-preference]) [data-theme-icon="dark"] { display: initial; }

.project-card--draft .project-card-image { margin-top: 12px; }

/* Keep the full vehicle detail page readable at the case study image width. */
.project-prose--continuation > .content-image img[src="/assets/AutoNation-Mobility-VDP-Desktop.png"],
.project-prose--continuation > .content-image img[src="/assets/AutoNation-Mobility-Collections.png"],
.project-prose--continuation > .content-image img[src="/assets/AutoNation-Mobility-Quiz.png"],
.project-prose--continuation > .content-image img[src="/assets/AutoNation-Mobility-Credit-Check.png"] { max-height: none; border: 1px solid var(--color-line); box-shadow: 0 4px 12px rgb(0 0 0 / 4%), 0 16px 40px rgb(0 0 0 / 7%); }

/* Shared space around case-study media; preserve each module's horizontal layout. */
.case-study { --space-case-media: 72px; }
.case-study .project-prose > :is(.content-image, .image-grid, .image-row, .image-band) {
  margin-top: var(--space-case-media);
  margin-bottom: var(--space-case-media);
}
@media (max-width: 760px) {
  .case-study { --space-case-media: 48px; }
}

/* The first media block supplies the opening-to-image gap once. */
.case-study-layout:has(+ .project-prose--continuation) .project-prose--opening {
  margin-bottom: 0;
}
.case-study-layout:has(+ .project-prose--continuation) .project-prose--opening > :last-child {
  margin-bottom: 0;
}

@keyframes case-image-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .case-study .project-prose img.case-image-enter {
    animation: case-image-enter .65s cubic-bezier(.22, 1, .36, 1) both;
  }
}

/* Inset UI screenshots on mobile; immersive images remain full bleed. */
@media (max-width: 760px) {
  .case-study .project-prose > .content-image:has(img:is(
    [src="/assets/AutoNation-Mobility-VDP-Desktop.png"],
    [src="/assets/AutoNation-Mobility-Collections.png"],
    [src="/assets/AutoNation-Mobility-Quiz.png"],
    [src="/assets/AutoNation-Mobility-Credit-Check.png"]
  )) {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Compact onward navigation, distinct from the main project showcase. */
.next-projects { padding-top: 56px; padding-bottom: 64px; }
.next-projects h2, .next-projects .project-grid { max-width: 960px; margin-left: auto; margin-right: auto; }
.next-projects .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.next-projects .project-card-image { aspect-ratio: 1; }
.next-projects .project-card--draft { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .next-projects { padding-top: 40px; padding-bottom: 48px; }
  .next-projects .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 480px) {
  .next-projects .project-grid { grid-template-columns: minmax(0, 1fr); }
  .next-projects .project-card--related { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
  .next-projects .project-card--related h3 { margin: 0; }
}

/* Homepage project rail: native swipe/trackpad scrolling with optional arrows. */
.featured-header { max-width: var(--layout-width); margin: 0 auto 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.featured-header .section-heading { margin: 0; }
.featured-controls:not([hidden]) { display: flex; gap: 8px; }
.featured-controls button { width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; color: inherit; background: transparent; font: inherit; font-size: 24px; cursor: pointer; }
.featured-controls button:disabled { opacity: .3; cursor: default; }
.featured-controls button:hover:not(:disabled) { background: rgb(255 255 255 / 10%); }
.featured-section .featured-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 0 12px; }
.featured-track::-webkit-scrollbar { display: none; }
.featured-track > .project-card { flex: 0 0 calc((100% - 16px) / 2); min-width: 0; scroll-snap-align: start; }
.featured-track:focus-visible, .featured-controls button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 760px) {
  .featured-header { gap: 12px; }
  .featured-header .section-heading { font-size: 28px; }
  .featured-section .featured-track { gap: 12px; }
  .featured-track > .project-card { flex-basis: 100%; }
}

/* Let the rail continue through both gutters to the viewport edges. */
.featured-section {
  container-type: inline-size;
  --featured-bleed: max(var(--page-gutter), calc((100vw - var(--layout-width)) / 2));
}
.featured-section .featured-track {
  width: calc(100% + 2 * var(--featured-bleed));
  max-width: none;
  margin-left: calc(-1 * var(--featured-bleed));
  margin-right: calc(-1 * var(--featured-bleed));
  padding-left: var(--featured-bleed);
  padding-right: var(--featured-bleed);
  scroll-padding-inline: var(--featured-bleed);
}
.featured-track > .project-card { flex-basis: calc((100cqw - 16px) / 2); }
@media (max-width: 760px) {
  .featured-track > .project-card { flex-basis: 100cqw; }
}

.featured-controls button { display: inline-grid; place-items: center; padding: 0; line-height: 1; flex: 0 0 44px; }
.featured-controls button svg { display: block; width: 22px; height: 22px; }

.featured-section .featured-track--moving { scroll-snap-type: none; touch-action: pan-y; cursor: grab; }
.featured-track--moving .project-card { transition: transform .3s cubic-bezier(.22, 1, .36, 1); transform-origin: center; }
.featured-track--moving.is-dragging { cursor: grabbing; user-select: none; }
.featured-track--moving.is-dragging .project-card { transform: scale(.94); }
.featured-controls button[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .featured-track--moving .project-card { transition: none; }
  .featured-track--moving.is-dragging .project-card { transform: none; }
}

/* Neutral showcase surface lets project artwork supply the color. */
.featured-section,
.featured-section .project-card h3 { color: var(--color-ink); }
.featured-section .section-heading { color: var(--color-accent); }
.featured-section .project-card-meta { color: var(--color-muted); opacity: 1; }
.featured-controls button:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
html[data-theme="dark"] { --color-featured: var(--color-soft); }

/* Subpixel translation fills the gaps between native scroll pixel steps. */
.featured-track--moving .project-card { translate: var(--rail-fraction, 0px) 0; }

/* Desktop portrait stays alongside the introduction and profile sections. */
@media (min-width: 761px) {
  .home-profile {
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 60px 0 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--space-5), 8vw, 112px);
    align-items: start;
  }
  .home-profile .home-hero { display: contents; }
  .home-profile .hero-text {
    grid-column: 1;
    grid-row: 1;
    min-height: calc(100svh - var(--header-height) - 140px);
    display: flex;
    align-items: center;
  }
  .home-profile .hero-portrait {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
  }
  .home-profile .hero-portrait img {
    max-height: calc(100svh - var(--header-height) - 100px);
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .home-profile .about-section, .home-profile .experience-section {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 64px 0 32px;
  }
  .home-profile .about-section { grid-row: 2; }
  .home-profile .experience-section { grid-row: 3; }
}
@media (min-width: 761px) and (max-width: 1250px) {
  .home-profile { margin-inline: var(--page-gutter); }
}

@media (min-width: 761px) {
  .home-profile .hero-text { min-height: max(var(--portrait-image-height, 0px), calc(100svh - var(--header-height) - 140px)); }
  .home-profile .hero-portrait { margin-top: var(--portrait-start-offset, 0px); }
}

.case-continuation { padding: 64px var(--page-gutter); text-align: center; }
.case-continuation a { display: inline-flex; flex-direction: column; gap: 12px; font-size: var(--text-section); color: var(--color-accent); }
.case-continuation a span, .case-next-label { font-size: var(--text-small); line-height: var(--line-small); }
.case-next-label { margin: 0 0 20px; color: inherit; opacity: .8; }

/* An intentional threshold between independent project pages. */
.case-continuation {
  --gate-progress: 0;
  --gate-pull: 0px;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  place-items: center;
  padding: 80px var(--page-gutter);
  background: var(--next-accent);
  color: var(--color-white);
  overflow: hidden;
}
.case-continuation a {
  max-width: var(--layout-width);
  align-items: center;
  gap: 28px;
  color: inherit;
  transform: translateY(var(--gate-pull));
  text-decoration: none;
}
.case-continuation .case-scroll-hint { font-size: var(--text-small); opacity: .85; }
.case-continuation .case-next-title { font-size: var(--text-page-title); line-height: var(--line-page-title); font-weight: var(--weight-heading); }
.case-continuation .case-scroll-arrow { font-size: 32px; }
.case-scroll-progress { width: 160px; height: 2px; background: rgb(255 255 255 / 25%); position: relative; }
.case-scroll-progress::after { content: ''; position: absolute; inset: 0; background: currentColor; transform: scaleX(var(--gate-progress)); transform-origin: left; }
.case-continuation a:focus-visible { outline: 2px solid currentColor; outline-offset: 16px; }

/* The next project's color emerges and stretches; the label stays anchored. */
.case-continuation.case-gate-enhanced { position: relative; isolation: isolate; background: transparent; overflow: visible; }
.case-gate-surface { position: absolute; z-index: -1; pointer-events: none; left: 0; top: -160px; width: 100%; height: calc(100% + 160px); fill: var(--next-accent); opacity: var(--gate-reveal, 0); }
.case-gate-enhanced a { transform: none; opacity: var(--gate-reveal, 0); }
.case-gate-cover { position: fixed; inset: 0; z-index: 10000; opacity: 0; pointer-events: none; clip-path: ellipse(75% 0% at 50% 100%); transition: clip-path 400ms cubic-bezier(.22,.61,.36,1), opacity 200ms ease; }
.case-gate-cover.is-visible { opacity: 1; clip-path: ellipse(100% 150% at 50% 100%); }
@media (prefers-reduced-motion: reduce) { .case-gate-cover { transition: none; } }

/* Quiet space before an empty color surface; no footer interrupts the handoff. */
html:has(.case-continuation), body:has(.case-continuation) { overscroll-behavior-y: none; }
body:has(.case-continuation) .site-footer { display: none; }
.case-continuation, .case-continuation.case-gate-enhanced {
  display: flex; flex-direction: column; gap: 0; padding: 0;
  margin-top: clamp(96px, 16vh, 200px); background: transparent; color: var(--color-ink);
}
.case-continuation a, .case-gate-enhanced a {
  position: relative; z-index: 1; opacity: 1; transform: none;
  padding: 0 var(--page-gutter) 160px; gap: 20px;
}
.case-continuation .case-scroll-hint { opacity: 1; }
.case-continuation .case-scroll-progress { background: color-mix(in srgb, currentColor 20%, transparent); }
.case-color-field { position: relative; width: 100%; height: 100svh; background: var(--next-accent); }
.case-gate-enhanced .case-color-field { background: transparent; }
.case-color-field .case-gate-surface { z-index: 0; }
.case-continuation a:focus-visible { outline-color: var(--color-ink); }

[data-theme="dark"] .case-continuation { --next-accent: var(--next-accent-dark); }

/* Keep the next title above the surface and its scroll feedback inside it. */
.case-field-indicator {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding-top: 64px; color: var(--color-white);
  opacity: var(--gate-reveal, 1); pointer-events: none;
}
.case-continuation .case-field-indicator .case-scroll-progress { background: rgb(255 255 255 / 30%); }
@media (max-width: 760px) { .case-field-indicator { padding-top: 48px; } }

.case-continuation .case-next-title { color: var(--next-accent); }

/* Keep the indicator anchored to the stable center of the color field. */
.case-field-indicator {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); padding-top: 0;
  opacity: var(--gate-reveal, 1);
}

/* Desktop also ends naturally with the whole handoff in view, regardless of
   wheel momentum, scrollbar dragging or keyboard navigation. */
@media (min-width: 761px) {
  .case-continuation, .case-continuation.case-gate-enhanced { min-height: 0; }
  .case-continuation > a {
    flex: 0 0 auto; align-self: stretch; max-width: none;
    box-sizing: border-box; padding-top: 24px;
  }
  .case-continuation .case-color-field {
    flex: 0 0 auto;
    height: max(160px, calc(100svh - var(--header-height) - 24px - var(--gate-label-height, 300px)));
  }
}

/* Mobile handoff is one normal-flow viewport panel. The document end,
   rather than a JS scroll clamp or a sticky label, stops its movement. */
@media (max-width: 760px) {
  .case-continuation, .case-continuation.case-gate-enhanced {
    min-height: 0; height: auto;
  }
  .case-continuation > a {
    position: relative; top: auto; z-index: 1;
    align-self: stretch; width: 100%; max-width: none; box-sizing: border-box;
    margin: 0; padding: 24px var(--page-gutter) 104px;
    background: transparent; color: var(--color-ink); flex: 0 0 auto;
  }
  .case-continuation .case-color-field {
    flex: 0 0 auto; height: max(200px, calc(100svh - var(--header-height-mobile) - 24px - var(--gate-label-height, 280px)));
  }
  .case-color-field .case-gate-surface { top: -48px; height: calc(100% + 48px); }
  .case-continuation .case-scroll-hint { color: var(--color-ink); }
}

@media (max-width: 760px) {
  .case-study .project-hero-band { min-height: 0; }
  .case-study .project-hero-band::before { bottom: var(--mobile-hero-half, var(--hero-overlap)); }
}

/* Case-study introductions follow the inset and spacing of the portfolio reference. */
@media (min-width: 761px) {
  .project-hero-band .project-intro {
    max-width: calc(var(--layout-width) - 200px);
    width: calc(100% - 2 * var(--page-gutter) - clamp(48px, 13.5vw, 200px));
    padding: 0;
  }
  .project-hero-band .project-intro h1 { margin-bottom: 48px; }
  .project-hero-band .project-lede p { margin-bottom: 32px; }
  .project-hero-band .project-lede p:last-child { margin-bottom: 0; }
  .project-hero-band .project-hero { margin-top: 80px; }
}

/* Curated screenshot excerpts displayed directly in the case study. */
.screen-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 32px; margin: 48px 0 64px; }
.screen-gallery figure { margin: 0; min-width: 0; }
.screen-gallery .screen-frame { width: 100%; padding: 0; border: 0; text-align: left;  font: inherit; display: block; position: relative; background: #edf0f1; overflow: hidden; }
.screen-gallery img { display: block; width: 100%; height: auto; }
.screen-gallery figcaption { margin-top: 16px; color: var(--color-muted); font-size: 14px; line-height: 1.5; }
.screen-gallery-responsive { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: start; }
.screen-gallery-app { max-width: 410px; margin-inline: auto; grid-template-columns: 1fr; }
@media (max-width: 700px) {
 .screen-gallery { grid-template-columns: 1fr; gap: 32px; margin-block: 32px 48px; }
 .screen-gallery-responsive figure:last-child { width: min(100%, 300px); margin-inline: auto; }
}

/* Browsable examples keep the case-study narrative compact. */
.screen-carousel { margin: 48px 0 64px; }
.screen-carousel-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; color: var(--color-muted); font-size: 14px; }
.screen-carousel-controls span { margin-right: auto; }
.screen-carousel-controls button { width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; color: var(--color-ink); background: transparent; font-size: 22px; cursor: pointer; }
.screen-carousel-controls button:disabled { opacity: .3; cursor: default; }
.screen-carousel .screen-carousel-track { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0; padding: 0 0 16px; scrollbar-width: thin; }
.screen-carousel-track figure { flex: 0 0 min(68%, 720px); scroll-snap-align: start; }
.screen-carousel-track .screen-frame { height: clamp(300px, 40vw, 460px); }
.screen-carousel-track img { height: 100%; object-fit: cover; object-position: top; }
.screen-carousel-phones .screen-carousel-track figure { flex-basis: 280px; }
.screen-carousel-phones .screen-frame { height: 560px; background: transparent; }
.screen-carousel-phones img { object-fit: contain; }
.screen-carousel-track:focus-visible { outline: 2px solid var(--case-accent); outline-offset: 4px; }
@media (max-width:700px) {
 .screen-carousel { margin: 32px 0 48px; }
 .screen-carousel-track figure { flex-basis: 88%; }
 .screen-carousel-track .screen-frame { height: 340px; }
 .screen-carousel-phones .screen-carousel-track figure { flex-basis: min(78%, 260px); }
 .screen-carousel-phones .screen-frame { height: 500px; }
}

.screen-carousel:not(.screen-carousel-phones) .screen-carousel-track figure:has(img:is([src*="Mobile"], [src*="Player-Hub"])) { flex-basis: 220px; }
.screen-carousel:not(.screen-carousel-phones) figure:has(img:is([src*="Mobile"], [src*="Player-Hub"])) img { object-fit: contain; }

.screen-gallery-prototypes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); max-width: 1000px; margin-inline: auto; }
.screen-gallery-prototypes:has(figure:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.screen-gallery-prototypes .screen-frame { background: transparent; }
.screen-gallery-prototypes img { height: 620px; object-fit: contain; object-position: top; }
.screen-gallery-prototypes figcaption { text-align: center; }
@media (max-width:700px) {
 .screen-gallery-prototypes, .screen-gallery-prototypes:has(figure:last-child:nth-child(2)) { grid-template-columns: 1fr; max-width: 320px; }
 .screen-gallery-prototypes img { height: auto; }
}

/* Incoming case color is painted by the early external theme script. */
html[data-case-entry]::after { content:""; position:fixed; inset:0; z-index:10001; pointer-events:none; background:var(--case-entry-color); opacity:1; transition:opacity 320ms ease; }
html[data-case-entry="ready"]::after { opacity:0; }
@media(prefers-reduced-motion:reduce) { html[data-case-entry]::after { transition:none; } }
.site-header:focus-within { transform: none; }