/* A shared, responsive design system. No runtime CSS framework. */
:root {
  color-scheme: dark;
  --bg: #141d20;
  --panel: #1f2b2f;
  --panel-light: #283639;
  --text: #f2f4ef;
  --muted: #b0bfbe;
  --accent: #7ef0d4;
  --warm: #ffb36b;
  --line: #3a4b4f;
  --contact-glow: #ffb36b1f;
  --page-glow: #7ef0d414;
  --page-glow-warm: #ffb36b0d;
  --max: 1240px;
  --reading-width: 680px;
  --reading: #dce3df;
  --header: #141d20e6;
  --button-text: #10201e;
  --accent-hover: #a8f5e2;
  --card-hover-shadow: 0 16px 26px #00000080, 0 4px 8px #00000038;
  --motion-card-reduced: 200ms;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --type-label: .75rem;
  --ease-ui: cubic-bezier(.23, 1, .32, 1);
  --ease-card: cubic-bezier(.2, .6, .25, 1);
  --ease-trace: cubic-bezier(.77, 0, .175, 1);
  --motion-feedback: 120ms;
  --motion-hover: 180ms;
  --motion-card: 280ms;
  --motion-change: 220ms;
  --motion-overlay: 240ms;
  --motion-exit: 100ms;
  --motion-hero: 480ms;
  --motion-hero-stage: 240ms;
  --duration-ui: var(--motion-feedback);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.65;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 95px);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; }
button, a, input, textarea { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .75; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 5.3vw, 4.9rem); letter-spacing: -.04em; }
h2 { font-size: clamp(2rem, 3.2vw, 3rem); letter-spacing: -.04em; }
h3 { font-size: 1.5rem; letter-spacing: -.025em; }
p { color: var(--muted); }
.container { width: min(var(--max), calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: 100px; }
.eyebrow { color: var(--accent); font: 500 var(--type-label)/1.6 Consolas, "Courier New", monospace; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.home-page .eyebrow { font-size: clamp(.875rem, 1vw, 1rem); font-weight: 700; }
.text-link { display: inline-flex; align-items: center; gap: 18px; padding-block: 10px; font-size: .92rem; font-weight: 500; border-bottom: 1px solid var(--line); transition: color var(--motion-feedback), border-color var(--motion-feedback); }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
.text-link.pill-link, .back-link.pill-link { justify-content: center; max-width: 100%; min-height: 44px; padding: 12px 18px; line-height: 1.4; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.text-link.pill-link::after { content: none; }
.back-link.pill-link:hover { color: var(--accent); border-color: var(--accent); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 15px 23px; min-height: 52px; max-width: 100%; background: var(--accent); color: var(--button-text); border: 1px solid var(--accent); font-weight: 600; font-size: .9rem; line-height: 1.4; transition: background var(--duration-ui), transform var(--duration-ui) var(--ease-ui); }
.button:focus-visible { outline-color: var(--text); }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; background: var(--accent); color: var(--bg); padding: 12px 20px; }
.skip-link:focus { top: 12px; }
.button, .filters button, .back-top, .skip-link { border-radius: var(--radius-pill); }
.carousel-controls button, .menu-toggle, .theme-toggle, .image-viewer button { border-radius: var(--radius-circle); }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--header); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
/* Root anchor padding must not scroll the page when a pinned control focuses. */
.site-header :is(a, button) { scroll-margin-block-start: calc(-1 * var(--header-height, 95px)); }
.header-inner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.monogram { border: 1px solid #5e7879; font: 500 21px/1 Consolas, monospace; padding: 13px 10px; letter-spacing: -2px; }
.monogram span, .footer-name span { color: var(--accent); }
.brand-name { font-size: .95rem; letter-spacing: -.025em; line-height: 1.5; }
.brand-name > span { display: block; color: var(--muted); font-size: var(--type-label); letter-spacing: .02em; }
#site-nav { display: flex; align-items: center; gap: 34px; font-size: .85rem; }
#site-nav > a { padding-block: 16px; color: var(--muted); white-space: nowrap; }
#site-nav a:hover, #site-nav a[aria-current], .language-links [aria-current] { color: var(--accent); }
.language-links { display: flex; gap: 10px; padding-left: 28px; border-left: 1px solid var(--line); align-items: center; font-family: Consolas, monospace; font-size: .78rem; }
.language-links a { padding: 10px 4px; color: var(--muted); }
.language-divider { color: #6e8588; }
.menu-toggle { display: none; }
.hero { padding-block: 130px 140px; }
.hero-copy { max-width: 1100px; }
.hero h1 { font-size: clamp(3.2rem, 6.2vw, 5.65rem); }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; box-shadow: 0 0 14px #8be8d526; }
.hero h1 > span { color: var(--accent); display: block; margin-top: 12px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; margin-top: 35px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.section-heading .eyebrow { margin-bottom: 20px; }
.section-heading p:not(.eyebrow) { margin-top: 16px; max-width: 550px; }
.section-heading > .text-link { flex-shrink: 0; }
.anchor-alias { display: block; scroll-margin-top: 110px; }
.project-grid { display: grid; gap: 40px 28px; }
.featured-grid, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-card { min-width: 0; }
/* Keep the visual surface separate from the outer carousel/swipe layer. */
.project-card-link {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: 24px;
  background: var(--panel); overflow: hidden;
  transition: transform var(--motion-card) var(--ease-card), box-shadow var(--motion-card) var(--ease-card), border-color var(--motion-feedback);
}
.project-card-link:focus-visible { outline-offset: 5px; }
.card-image { position: relative; display: flex; align-items: center; justify-content: center; container-type: size; aspect-ratio: 1.7; background: var(--panel); overflow: hidden; border-bottom: 1px solid var(--line); padding: 20px; }
.card-image img { width: 100%; height: 100%; object-fit: contain; }
.image-filters { position: absolute; pointer-events: none; }

.card-image.media-photo { padding: 0; }
.card-image.media-photo img { object-fit: cover; }
.card-image.media-screen { padding: 12px; background: var(--panel); }
/* Art-directed viewport onto the actual app, excluding the old white slide
   and its "Post will be updated" heading. The original remains accessible. */
.image-crop { display: block; position: relative; flex-shrink: 0; overflow: hidden; width: min(100cqw, calc(100cqh * var(--crop-ratio))); height: auto; aspect-ratio: var(--crop-ratio); max-width: 100%; margin-inline: auto; }
.image-crop-fedex { --crop-ratio: .7899343545; }
.image-crop-engine { --crop-ratio: 1.2278177458; }
.image-crop.image-crop-fedex img { position: absolute; width: 283.6565%; max-width: none; height: auto; left: -92.5208%; top: -62.8009%; }
.image-crop.image-crop-engine img { position: absolute; width: 100%; height: auto; left: 0; top: -10.67146283%; }
.card-body { padding: 25px 27px 26px; display: flex; flex-direction: column; flex: 1; }
.card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font: var(--type-label)/1.6 Consolas, monospace; text-transform: uppercase; letter-spacing: .025em; color: var(--accent); margin-bottom: 16px; }
.card-meta span:last-child { color: var(--muted); text-align: right; }
.card-body h3 { margin-bottom: 13px; }
.card-body p { font-size: .9375rem; line-height: 1.7; }
.discipline-links { display: flex; flex-wrap: wrap; gap: 12px 35px; margin-top: 28px; font: var(--type-label)/1.7 Consolas, monospace; color: var(--muted); }
.discipline-links a { padding-block: 10px; }
.discipline-links a:hover { color: var(--accent); }
.expertise { background: var(--panel); border-block: 1px solid var(--line); }
.expertise h2 { max-width: 600px; }
.expertise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 52px; }
.expertise-grid article { padding: 0 34px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.expertise-grid article:first-child { padding-left: 0; border-left: 0; }
.expertise-grid article:last-child { padding-right: 0; }
.expertise-number { font: .75rem Consolas, monospace; color: var(--accent); margin-bottom: 25px; }
.expertise-grid h3 { margin-bottom: 18px; }
.expertise-grid p { font-size: 1rem; margin-bottom: 27px; }
.tools { margin-top: auto; font: var(--type-label)/1.7 Consolas, monospace; color: var(--accent); }
.about-grid { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 44px; align-items: start; }
.portrait-panel { width: 248px; max-width: 100%; background: #080808; border: 1px solid var(--line); }
.portrait-panel img { width: 100%; height: auto; }
.about-grid p:not(.eyebrow) { margin-top: 20px; font-size: 1.0625rem; line-height: 1.75; }
.about-grid .about-lead { color: var(--reading); }
.social-links { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 28px; }
.social-links a { padding-block: 10px; font: .75rem Consolas, monospace; border-bottom: 1px solid var(--line); }
.social-links a:hover { color: var(--accent); }
.social-links a span { margin-left: 8px; color: var(--accent); }
.contact-section { border-top: 1px solid var(--line); background: var(--bg); }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 100px; }
.contact-grid > * { min-width: 0; }
.contact-intro h2 { margin-bottom: 25px; }
.contact-intro > p:not(.eyebrow) { font-size: .96rem; margin-bottom: 25px; }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.form-required { font-size: var(--type-label); margin-bottom: 18px; }
label { display: block; font-size: .8125rem; margin-bottom: 9px; }
input, textarea { width: 100%; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--muted); border-radius: 0; padding: 12px 14px; font-size: 1rem; caret-color: var(--accent); }
.contact-section input, .contact-section textarea { background: var(--panel); }
input { min-height: 48px; }
textarea { resize: vertical; min-height: 155px; }
input:focus, textarea:focus { border-color: var(--accent); }
[aria-invalid=true] { border-color: #ffb4a7; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.form-row > div { min-width: 0; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#contact-status { font-size: .85rem; margin-top: 12px; min-height: 1.6em; }
#contact-status[data-state=error] { color: #ffc1b5; }
#contact-status[data-state=success] { color: var(--accent); }
.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 14px; }
#form-note { font-size: var(--type-label); max-width: 260px; flex: 1 1 170px; }
.site-footer { border-top: 1px solid var(--line); padding-block: 40px; }
.home-page #contact { padding-bottom: 16px; }
.home-page .site-footer { background: var(--panel); border-top: 0; padding-block: 24px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.footer-name { font-size: 1rem; }
.footer-inner p { font-size: var(--type-label); margin-top: 5px; }
.copyright, .back-top { font-size: var(--type-label); color: var(--muted); }
.back-top { padding-block: 12px; }
.back-top span { color: var(--accent); margin-left: 16px; }
.collection { padding-top: 72px; }
.collection-heading { max-width: 850px; margin-bottom: 48px; }
.collection-heading h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); }
.collection-heading > p:last-child { margin-top: 25px; font-size: 1.05rem; max-width: 640px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; border-block: 1px solid var(--line); padding-block: 22px; margin-bottom: 38px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: .75rem; min-height: 44px; padding: 9px 15px; }
.filters button:hover { border-color: var(--accent); color: var(--text); }
.filters button[aria-pressed=true] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.filter-count { font: .65rem/1.6 Consolas, monospace; }
.case-study { padding-top: 42px; }
.back-link { display: inline-flex; gap: 16px; color: var(--muted); font-size: .78rem; padding-block: 12px; }
.back-link:hover { color: var(--accent); }
.case-header { max-width: 1000px; padding-top: 36px; }
.case-header h1 { font-size: clamp(2.6rem, 5.2vw, 4.8rem); }
.case-description { max-width: 750px; font-size: 1.13rem; margin-top: 24px; }
.project-facts { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 30px; padding-block: 25px; margin-block: 38px 36px; border-block: 1px solid var(--line); }
.project-facts dt { color: var(--muted); font: var(--type-label)/1.6 Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.project-facts dd { margin: 7px 0 0; font-size: .95rem; }
.case-cover { background: transparent; }
.case-cover img { width: 100%; height: auto; }
.original-image { display: block; }
.original-image:hover { outline: 1px solid var(--line); outline-offset: 5px; }
.case-cover figcaption { margin-top: 16px; font: .7rem/1.7 Consolas, monospace; color: var(--muted); text-align: right; }
.case-cover figcaption a:hover, .case-gallery figcaption a:hover { color: var(--accent); }
.case-body { display: grid; grid-template-columns: 1.08fr 1fr; grid-template-areas: "content media"; gap: 75px; align-items: start; padding-block: 35px 20px; }
.case-media { grid-area: media; position: sticky; top: 130px; }
.case-body .prose { grid-area: content; }
.prose { max-width: 760px; }
.prose h2 { font-size: 1.8rem; margin-bottom: 22px; }
.prose p { font-size: 1.04rem; line-height: 1.9; margin-bottom: 45px; }
.prose a { text-decoration: underline; color: var(--accent); }
.case-gallery { padding-top: 24px; }
.case-gallery h2, .references h2 { font-size: 1.8rem; }
.figure-note { font-size: .8rem; margin-block: 16px 30px; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.gallery-grid.gallery-single { grid-template-columns: minmax(0, 850px); justify-content: center; }
.case-gallery figure { min-width: 0; margin-bottom: 30px; }
.case-gallery img { width: 100%; height: auto; }
.case-gallery figcaption { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; color: var(--muted); font-size: .72rem; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 20px; }
.case-gallery figcaption a { flex-shrink: 0; color: var(--accent); }
.references { padding-block: 36px; }
.references ul { list-style: none; padding-left: 0; }
.related { border-top: 1px solid var(--line); margin-top: 65px; }
.not-found { min-height: 65vh; padding-block: 110px; }
.not-found > p:not(.eyebrow) { max-width: 650px; margin-top: 24px; }
.fallback-polish { padding-block: 0 90px; }
.fallback-polish > p { max-width: 650px; margin-top: 24px; }
@media (min-width: 1600px) { .hero { padding-block: 150px; } }
@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .hero h1 { font-size: clamp(3rem, 5.5vw, 4.6rem); }
  .contact-grid { gap: 55px; }
  .expertise-grid article { padding-inline: 22px; }
}
@media (max-width: 900px) {
  .hero { padding-block: 85px; }
  .hero-copy { max-width: 690px; }
  .hero h1 { font-size: clamp(3.2rem, 8vw, 4.8rem); }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-heading > .text-link { align-self: flex-start; }
  .contact-grid { grid-template-columns: 1fr; gap: 45px; }
  .contact-intro { max-width: 630px; }
  .case-body { gap: 40px; }
}
@media (max-width: 760px) {
  .section { padding-block: 65px; }
  .expertise-grid { grid-template-columns: 1fr; margin-top: 35px; gap: 30px; }
  .expertise-grid article, .expertise-grid article:first-child, .expertise-grid article:last-child { padding: 25px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .expertise-number { margin-bottom: 20px; }
  .expertise-grid p { max-width: 550px; margin-bottom: 20px; }
  .footer-inner { flex-wrap: wrap; }
  .footer-inner > div { width: 100%; }
  .footer-inner .back-top { margin-inline-start: auto; }
  .case-body { grid-template-columns: 1fr; grid-template-areas: "media" "content"; gap: 45px; padding-top: 10px; }
  .case-media { position: static; width: 100%; max-width: 580px; margin-inline: auto; }
  .gallery-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .container { width: calc(100% - 40px); }
  .hero { padding-block: 72px 80px; }
  .hero h1 { font-size: clamp(2.65rem, 10.6vw, 3.85rem); }
  .hero-actions { gap: 20px; margin-top: 28px; }
  .button { padding-inline: 18px; gap: 20px; font-size: .83rem; }
  .text-link { font-size: .84rem; gap: 12px; }
  .featured-grid, .related-grid { grid-template-columns: 1fr; }
  .card-image { aspect-ratio: 1.6; }
  .card-body { padding: 22px; }
  .card-body h3 { font-size: 1.4rem; }
  .discipline-links { flex-direction: column; gap: 5px; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .form-end { align-items: flex-start; flex-direction: column; }
  #form-note { flex: auto; max-width: 100%; }
  .collection-heading h1 { font-size: 2.9rem; }
  .collection-heading > p:last-child { font-size: .97rem; }
  .filters { gap: 7px; }
  .filters button { font-size: var(--type-label); padding-inline: 11px; }
  .case-header { padding-top: 24px; }
  .case-header h1 { font-size: 2.7rem; overflow-wrap: anywhere; }
  .case-description { font-size: 1rem; }
  .project-facts { grid-template-columns: 1fr 1fr; gap: 20px; }
  .project-facts > div:last-child { grid-column: 1 / -1; }
  .project-facts dd { font-size: .85rem; }
  .prose p { font-size: 1rem; }
  .case-gallery figcaption { font-size: .68rem; flex-direction: column; gap: 10px; }
  .related { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *:not([data-hero-line]):not(.workflow-stage):not(.workflow-connection):not(.project-card-link), *::before, *::after { transition: none !important; animation: none !important; }
}

/* Theme palettes and the refined reading layout. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f6f2; --panel: #ffffff; --panel-light: #eeeee8;
  --text: #202d30; --muted: #526466; --reading: #344548;
  --accent: #096c61; --accent-hover: #075c53; --line: #c8d2cf; --header: #f7f6f2d9; --button-text: #ffffff;
  --warm: #a84f0a;
  --contact-glow: #a84f0a14; --page-glow: #096c610f; --page-glow-warm: #a84f0a0a;
  --card-hover-shadow: 0 16px 26px #1822252e, 0 4px 8px #18222514;
}
.theme-toggle { margin-left: auto; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 9px 12px; min-height: 44px; font-size: .8rem; }
.button, .filters button[aria-pressed=true] { color: var(--button-text); }
.button:focus-visible { outline-color: var(--text); }
.hero { padding-block: 65px 55px; }
.hero h1 { font-size: clamp(2.65rem, 5.1vw, 4.6rem); }
.hero-identity { color: var(--text); font-size: 1.05rem; margin-bottom: 24px; }
input, textarea { background: var(--bg); color: var(--text); border-color: var(--muted); }
[data-theme="light"] [aria-invalid=true] { border-color: #a62e21; }
[data-theme="light"] #contact-status[data-state=error] { color: #a62e21; }
.card-image.media-technical { background: var(--panel); padding: 12px; }
.media-technical > .original-image { background: #fff; padding: clamp(12px, 2.5vw, 28px); border: 1px solid #d9dfdd; border-radius: 4px; }
.case-header { max-width: 960px; margin-inline: auto; }
.case-header h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); letter-spacing: -.035em; }
.case-description { color: var(--reading); line-height: 1.7; }
.project-facts { max-width: 960px; margin-inline: auto; grid-template-columns: 1fr 1fr; }
.project-facts > div:last-child { grid-column: auto; }
.case-body { display: block; max-width: 960px; margin-inline: auto; padding-top: 12px; }
.case-cover { margin: 0 auto 52px; }
.case-cover img { max-height: 620px; object-fit: contain; }
.prose { max-width: none; font-size: 1.125rem; }
.prose > h2, .prose > p, .prose > ul, .prose > ol { max-width: var(--reading-width); margin-inline: auto; }
.prose h2 { font-size: 1.6rem; letter-spacing: -.025em; margin-top: 40px; margin-bottom: 16px; }
.prose p { font-size: inherit; line-height: 1.7; color: var(--reading); margin-bottom: 22px; }
.article-figure { margin: 40px auto; }
.article-figure img { width: 100%; max-height: 720px; object-fit: contain; }
.article-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font-size: .85rem; }
.article-figure figcaption a { color: var(--accent); }
.references { max-width: 65ch; margin-inline: auto; }
.related:not(.enhanced-carousel) .project-card:nth-child(n+3) { display: none; }
.carousel-controls { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 24px; }
.carousel-controls button { width: 44px; height: 44px; background: var(--panel); color: var(--text); border: 1px solid var(--line); font-size: 1.2rem; }
.carousel-controls [data-position] { color: var(--muted); font-size: .85rem; }
@media (max-width: 760px) {
  .header-inner { gap: 10px; }
  .theme-toggle { font-size: .72rem; padding-inline: 9px; }
  .hero { padding-block: 44px 35px; }
  .hero-identity { font-size: .95rem; }
  .case-cover { margin-bottom: 36px; }
  .prose { font-size: 1.0625rem; }
}
@media (max-width: 400px) {
  .brand-name { max-width: 125px; }
  .monogram { display: none; }
}

/* Header preferences remain adjacent in both desktop and mobile navigation. */
.header-preferences { display: flex; align-items: center; gap: 12px; }
.header-preferences .language-links { margin: 0; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; flex-shrink: 0; }
/* Reserve controls while their handlers load, without exposing inactive buttons. */
html[data-js] .theme-toggle[hidden] { display: inline-flex !important; visibility: hidden; }
html[data-js] .filter-bar[hidden] { display: flex !important; visibility: hidden; }
.theme-moon { display: none; }
[data-theme="light"] .theme-sun { display: none; }
[data-theme="light"] .theme-moon { display: block; }
.case-header .eyebrow a { text-decoration: underline; text-underline-offset: 4px; }
.case-cover, .article-figure { display: flow-root; position: static; float: none; clear: both; width: min(100%, var(--figure-width, 960px)); }
.figure-image { display: block; position: static; }
.case-cover img, .article-figure img { display: block; position: static; float: none; width: 100%; height: auto; max-height: none; object-fit: contain; }
.media-technical > .figure-image { background: #fff; padding: clamp(12px, 2.5vw, 28px); border: 1px solid #d9dfdd; border-radius: 4px; }
/* Keep navigation and preferences together on the right. */
@media (min-width: 761px) {
  #site-nav { margin-left: auto; }
  .header-preferences { flex-shrink: 0; }
}
/* Five links need the existing menu at tablet widths; content keeps its own breakpoints. */
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; gap: 10px; min-height: 80px; }
  /* Let enlarged text reflow without pushing the fixed-size controls out. */
  .brand { order: 0; padding-block: 14px; min-width: 0; flex-shrink: 1; }
  .monogram { padding: 10px 8px; font-size: 19px; }
  .brand-name { font-size: .86rem; }
  .brand-name > span { font-size: .6875rem; }
  .header-preferences { order: 1; margin-left: auto; gap: 5px; }
  .header-preferences .language-links { border: 0; padding: 0; gap: 5px; }
  .menu-toggle { display: flex; order: 2; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line); background: transparent; color: var(--text); padding: 0; min-height: 44px; font-size: .75rem; }
  .menu-label { display: none; }
  #site-nav { order: 3; width: 100%; margin-left: 0; padding-block: 12px 22px; gap: 0; flex-wrap: wrap; }
  #site-nav > a { margin-right: 26px; padding-block: 12px; }
  html[data-js] #site-nav:not(.is-open), #site-nav.enhanced-nav { display: none; }
  #site-nav.enhanced-nav.is-open { display: flex; }
  html[data-js] .menu-toggle[hidden] { display: flex !important; visibility: hidden; }
  html[data-js] .header-inner { flex-wrap: nowrap; }
  #site-nav.enhanced-nav { position: absolute; top: 100%; left: 0; width: 100%; max-height: calc(100dvh - var(--header-height, 81px)); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; padding: 12px clamp(20px, 5vw, 48px) 20px; background: var(--header); border-bottom: 1px solid var(--line); }
  #site-nav.enhanced-nav > a { margin-right: 0; flex-shrink: 0; }
}
@media (max-width: 760px) {
  .monogram { display: none; }
  .brand-name { font-size: .78rem; }
}
.theme-toggle { border: 0; background: transparent; color: var(--muted); }
.theme-toggle:hover { color: var(--accent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }


/* One shared heading connects portrait and biography. */
.about-section { background: var(--panel); border-top: 1px solid var(--line); }
.about-copy { max-width: var(--reading-width); }
.about-heading { margin-bottom: 40px; }
.about-heading h2 { max-width: 780px; }
.about-grid .about-copy > p:first-child { margin-top: 0; }
.about-experience { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.about-experience > h3 { margin: 0 0 24px; font-size: 1.375rem; line-height: 1.35; }
.experience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.experience-grid h4 { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.experience-organization { margin-top: 8px; color: var(--accent); font-size: .875rem; line-height: 1.5; }
.experience-description { margin-top: 12px; max-width: var(--reading-width); color: var(--reading); font-size: 1rem; line-height: 1.7; }
@media (min-width: 1001px) {
  .experience-grid article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; align-content: start; }
  .experience-organization { margin-top: 0; }
  .experience-description { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 899px) { .experience-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .portrait-panel { margin-inline: auto; }
  .about-heading { margin-bottom: 32px; }
}
.back-top { display: inline-flex; align-items: center; gap: 14px; color: var(--text); border: 1px solid var(--line); padding: 12px 18px; min-height: 48px; font-size: .9rem; }
.back-top:hover { border-color: var(--accent); color: var(--accent); }
.back-top span { font-size: 1.25rem; margin: 0; }
.related { padding-block: 40px 55px; margin-top: 40px; }
.related .section-heading { margin-bottom: 18px; align-items: center; }
.related h2 { font-size: 1.45rem; letter-spacing: -.025em; }
.related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.related .card-body { padding: 16px; }
.related .card-body h3 { font-size: 1.08rem; line-height: 1.3; margin: 0; }
.related .card-body p, .related .card-meta { display: none; }
.related .card-image { aspect-ratio: 1.6; padding: 10px; }
.related .card-image.media-photo { padding: 0; }
.related .card-image.media-technical, .related .card-image.media-screen { padding: 12px; }
@media (max-width: 1000px) { .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .related-grid { grid-template-columns: 1fr; } }

/* A calm one-page rhythm; tall sections keep their natural document height. */
@media (min-width: 1001px) and (min-height: 650px) {
  .home-page { --home-section-top: 64px; }
  .home-page main > section { scroll-snap-align: start; min-height: calc(100svh - var(--header-height, 95px)); display: grid; align-content: start; padding-block: var(--home-section-top) 64px; }
  .home-page main > #contact { min-height: calc(100svh - var(--header-height, 95px) - var(--home-footer-height, 124px)); }
  .home-page .hero { display: flex; align-items: center; padding-block: 64px; }
  .home-page main > .hero + .section { padding-top: var(--home-section-top); }
  .home-page #projects { padding-top: calc(var(--home-section-top) + 1px); }
  .expertise-grid { margin-top: clamp(52px, 7svh, 64px); min-height: clamp(240px, 35svh, 340px); }
  .expertise-grid h3 { font-size: 1.625rem; }
  .expertise-grid p { font-size: 1.0625rem; line-height: 1.7; }
  #about .about-heading { margin-bottom: 20px; }
  #about .about-heading h2 { max-width: none; }
  #about .about-experience { margin-top: 24px; padding-top: 16px; }
  #about .about-experience > h3 { margin-bottom: 12px; }
  .about-grid { grid-template-columns: clamp(260px, 22vw, 300px) minmax(0, 1fr); gap: clamp(44px, 4vw, 56px); }
  .portrait-panel { width: 100%; }
  .about-grid p:not(.eyebrow) { font-size: clamp(1.0625rem, 1.25vw, 1.125rem); line-height: 1.7; }
  .contact-intro h2 { font-size: clamp(2.8rem, 3.7vw, 3.55rem); }
  .contact-intro > p:not(.eyebrow) { font-size: clamp(1.0625rem, 1.25vw, 1.125rem); line-height: 1.7; }
  .contact-section input { min-height: clamp(50px, 5.7svh, 56px); }
  .contact-section textarea { min-height: clamp(190px, 30svh, 270px); }
  .contact-section .button { min-height: 56px; padding-inline: 28px; }
}
/* Keep the form and footer together on shorter desktop screens. */
@media (min-width: 1001px) and (min-height: 650px) and (max-height: 839px) {
  .home-page { --home-footer-height: 108px; --home-section-top: 32px; }
  .home-page #contact textarea { min-height: 190px; }
  .home-page #contact .form-row { margin-bottom: 16px; }
  .home-page #contact .form-required { margin-bottom: 14px; }
  .home-page .site-footer { padding-block: 16px; }
}
/* One starting line for all four sections, with more room on tall screens. */
@media (min-width: 1001px) and (min-height: 1000px) {
  .home-page { --home-section-top: max(64px, calc((100svh - var(--header-height, 95px) - 650px) / 2)); }
}
/* Keep the complete About profile comfortable on shorter laptop windows. */
@media (min-width: 1001px) and (min-height: 650px) and (max-height: 999px) {
  .home-page #about { padding-bottom: 56px; }
}
/* Leave breathing room below the project links on shorter laptop windows. */
@media (min-width: 1001px) and (min-height: 650px) and (max-height: 900px) {
  #projects .section-heading { margin-bottom: 20px; }
  #projects .section-heading p:not(.eyebrow) { margin-top: 10px; }
  #projects .discipline-links { margin-top: 16px; }
}
.case-study { max-width: var(--max); }
.project-atlas { border-bottom: 1px solid var(--line); }
.atlas-chapter { display: grid; grid-template-columns: minmax(185px, 22%) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-block: 46px 20px; scroll-margin-top: 16px; }
.atlas-chapter[hidden] { display: none; }
.atlas-chapter + .atlas-chapter { border-top: 1px solid var(--line); }
.atlas-chapter-heading { position: sticky; top: calc(var(--header-height, 95px) + 28px); align-self: start; padding-top: 16px; }
.atlas-chapter-heading h2 { max-width: 18ch; font-size: clamp(1.15rem, 1.5vw, 1.38rem); line-height: 1.3; font-weight: 500; }
.atlas-chapter-heading::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 21px; background: var(--accent); }
.atlas-list { min-width: 0; }
.atlas-row { position: relative; background: transparent; border-top: 1px solid var(--line); }
.atlas-row::before { content: ""; position: absolute; inset: -1px auto 0 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; pointer-events: none; transition: transform var(--motion-hover) var(--ease-ui); }
.atlas-row-link { display: grid; grid-template-columns: minmax(0, 1fr) 160px; grid-template-areas: "copy image" "description image"; column-gap: clamp(20px, 3vw, 44px); align-items: start; min-height: 172px; padding: 24px 0 25px 24px; }
.atlas-row-copy { grid-area: copy; min-width: 0; }
.atlas-row-meta { color: var(--muted); font: var(--type-label)/1.5 Consolas, monospace; letter-spacing: .035em; margin: 0 0 10px; }
.atlas-row h3 { font-size: clamp(1.45rem, 2vw, 1.86rem); line-height: 1.23; font-weight: 500; max-width: 28ch; transition: color var(--motion-feedback) var(--ease-ui); }
.atlas-row-description { grid-area: description; color: var(--reading); font-size: .98rem; line-height: 1.58; max-width: 65ch; margin: 12px 0 0; }
.atlas-row-image { grid-area: image; display: flex; align-items: center; justify-content: center; container-type: size; width: 160px; height: 112px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-light); }
.atlas-row-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.atlas-row-image.media-photo img { object-fit: cover; }
.atlas-row-image.media-technical, .atlas-row-image.media-screen { background: var(--panel); padding: 6px; }
.atlas-row:hover::before, .atlas-row:focus-within::before { transform: scaleY(1); }
.atlas-row:hover h3, .atlas-row:focus-within h3 { color: var(--accent); }
.atlas-row-link:focus-visible { outline-offset: -4px; }

.case-intro { display: block; padding: 36px 0 30px; border-bottom: 1px solid var(--line); }
.case-header { max-width: 820px; margin: 0; padding: 0; }
.case-header h1 { font-size: clamp(2.35rem, 4.3vw, 3.8rem); }
.case-description { max-width: 680px; margin-top: 22px; }
.project-facts { display: flex; flex-wrap: wrap; gap: 12px 38px; max-width: none; margin: 30px 0 0; padding: 0; border: 0; }
.project-facts > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.project-facts dd { margin: 0; font-size: .88rem; line-height: 1.5; }
.case-body { display: block; max-width: 960px; margin: 0; padding-top: 42px; }
.references { max-width: 960px; margin-inline: 0; }
.case-body .prose { position: relative; max-width: 710px; padding-left: 27px; font-size: 1.125rem; }
.case-body .prose::before { content: ""; position: absolute; inset: 9px auto 0 5px; width: 1px; background: var(--line); }
.prose > h2, .prose > p, .prose > ul, .prose > ol { margin-left: 0; margin-right: 0; max-width: 100%; }
.case-body .prose h2 { position: relative; font-size: 1.48rem; margin: 44px 0 13px; padding: 0; border: 0; }
.case-body .prose h2::before { content: ""; position: absolute; top: .49em; left: -27px; width: 11px; height: 11px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); }
.case-body .prose h2:first-child { margin-top: 0; }
.case-body .prose p { margin-bottom: 0; line-height: 1.72; }
.project-images { max-width: 960px; margin-top: 62px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 220px)); align-items: start; gap: 16px; }
.project-images h2 { grid-column: 1 / -1; font-size: 1.48rem; margin: 0 0 5px; padding-top: 23px; border-top: 1px solid var(--line); }
.project-images figure { margin: 0; min-width: 0; }
.image-thumbnail { display: flex; align-items: center; justify-content: center; container-type: size; width: 100%; height: 165px; background: var(--panel-light); border: 1px solid var(--line); border-radius: 24px; padding: 10px; overflow: hidden; cursor: zoom-in; }
.media-technical .image-thumbnail, .media-screen .image-thumbnail { background: var(--panel); padding: 8px; }
.image-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.image-thumbnail:hover { border-color: var(--accent); }
.image-thumbnail:focus-visible { outline-offset: 4px; }
.image-viewer { max-width: 94vw; max-height: 94svh; width: fit-content; padding: 54px 16px 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); color: var(--text); }
.image-viewer::backdrop { background: #000b; }
.image-viewer img { max-width: 88vw; max-height: 76svh; width: min(var(--image-width, 88vw), 88vw, calc(76svh * var(--image-ratio, 1))); height: auto; aspect-ratio: var(--image-ratio, auto); object-fit: contain; border-radius: 16px; }
.image-viewer button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 1.4rem; }
.image-viewer [data-close-image] { position: absolute; top: 8px; right: 12px; }
.image-counter { position: absolute; top: 20px; left: 24px; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.image-stage { position: relative; touch-action: pan-y pinch-zoom; }
.image-viewer.is-zoomed .image-stage { touch-action: auto; }
.image-viewer .image-step { position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid var(--line); background: var(--panel); font-size: 1.2rem; }
.image-viewer .image-step[hidden], .image-counter[hidden] { display: none; }
/* Arrows sit in side gutters beside the image; touch screens use swipe only. */
.image-step-prev { left: -58px; }
.image-step-next { right: -58px; }
@media (hover: hover) and (pointer: fine) {
  .image-viewer.has-steps { padding-inline: 72px; }
  .image-viewer.has-steps img { max-width: calc(94vw - 146px); width: min(var(--image-width, 88vw), calc(94vw - 146px), calc(76svh * var(--image-ratio, 1))); }
}
@media (hover: none), (pointer: coarse) {
  .image-viewer .image-step { display: none; }
}
.image-viewer .image-step:hover { border-color: var(--accent); }
.image-viewer p { margin-top: 12px; font-size: .85rem; max-width: 70ch; }
@media (max-width: 900px) {
  .atlas-chapter { display: block; padding-block: 36px 15px; }
  .atlas-chapter-heading { position: static; padding: 0 0 20px; }
  .atlas-chapter-heading::before { margin-bottom: 15px; }
}
@media (max-width: 600px) {
  .atlas-row-link { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "copy image" "description description"; column-gap: 13px; min-height: 0; padding: 20px 0 24px 13px; }
  .atlas-row h3 { font-size: 1.36rem; }
  .atlas-row-description { margin-top: 12px; font-size: .91rem; }
  .atlas-row-image { width: 96px; height: 72px; border-radius: 12px; }
  .atlas-row-meta { font-size: .64rem; }
  .case-intro { padding-top: 24px; padding-bottom: 26px; }
  .case-header h1 { font-size: clamp(2.25rem, 9vw, 2.7rem); }
  .case-body .prose { font-size: 1.0625rem; }
  .project-images { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 46px; }
  .project-images .image-thumbnail { height: min(37vw, 165px); border-radius: 20px; }
  .image-viewer { border-radius: 20px; }
  .image-viewer img { border-radius: 12px; }
}
@media (max-width: 360px) { .collection-heading h1 { font-size: 2.3rem; } }
@media (prefers-reduced-motion: reduce) { .atlas-row::before, .atlas-row h3 { transition: none; } }

@media (min-width: 1001px) and (min-height: 650px) and (prefers-reduced-motion: no-preference) { html.home-page { scroll-snap-type: y proximity; scroll-padding-top: var(--header-height, 95px); } }

.home-page .site-footer { scroll-snap-align: none; }

.featured-carousel, .related-carousel { position: relative; }
.featured-carousel:not(.enhanced-carousel) .project-card:nth-child(n+5) { display: none; }
/* Match the enhanced row from first paint, so lazy images for hidden cards
   are not downloaded while the deferred carousel script is loading. */
@media (max-width: 1000px) {
  html[data-js] .featured-carousel:not(.enhanced-carousel) .project-card:nth-child(n+3) { display: none; }
}
@media (max-width: 600px) {
  html[data-js] .featured-carousel:not(.enhanced-carousel) .project-card:nth-child(n+2) { display: none; }
}
.featured-carousel .featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.featured-carousel .featured-grid { gap: 20px; }
.featured-grid .card-body { padding: 20px; }
.featured-grid h3 { font-size: 1.25rem; line-height: 1.25; }
.featured-grid .card-meta { display: block; }
.featured-grid .card-meta span { display: block; text-align: left; }
.featured-carousel .carousel-controls, .related-carousel .carousel-controls { position: absolute; z-index: 1; inset: 0 -56px; display: flex; justify-content: space-between; align-items: center; margin: 0; pointer-events: none; }
.featured-carousel .carousel-controls button, .related-carousel .carousel-controls button { pointer-events: auto; }
@media (max-width: 1370px) {
  .featured-carousel { margin-top: 54px; }
  .featured-carousel .carousel-controls { inset: -54px 0 auto; }
  .related-carousel .carousel-controls { position: static; inset: auto; margin-bottom: 10px; }
}
@media (max-width: 1000px) { .featured-carousel .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .featured-carousel .featured-grid { grid-template-columns: 1fr; } }
.carousel-image-slot { display: none; }
.carousel-pagination { display: none; }
@media (max-width: 600px) {
  .project-card-link { border-radius: 20px; }
  .featured-carousel { margin-top: 0; }
  .enhanced-carousel .project-grid { position: relative; touch-action: pan-y pinch-zoom; }
  .enhanced-carousel.has-carousel-controls .carousel-image-slot { display: block; height: 68px; flex-shrink: 0; }
  .featured-carousel .carousel-controls, .related-carousel .carousel-controls { position: absolute; z-index: 1; inset: var(--carousel-controls-top, 0px) 12px auto; height: 44px; margin: 0; }
  .project-card.swipe-adjacent { position: absolute; inset: 0; width: 100%; height: 100%; }
  .project-grid.is-swiping { user-select: none; }
  .carousel-pagination { min-height: 68px; margin-top: 12px; text-align: center; }
  .carousel-pagination:not([hidden]) { display: block; }
  html[data-js] [data-carousel]:not(.enhanced-carousel) .carousel-pagination[hidden] { display: block !important; visibility: hidden; }
  .carousel-dots { display: flex; justify-content: center; }
  .carousel-dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
  .carousel-dot::after { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--muted); transition: background var(--motion-feedback); }
  .carousel-dot[data-more]::after { width: 4px; height: 4px; }
  .carousel-dot[aria-current=true]::after { width: 20px; height: 6px; background: var(--accent); }
  .carousel-dot:focus-visible { outline-offset: -3px; }
  .carousel-dot:active::after { opacity: .7; }
  .carousel-pagination .swipe-hint { margin-top: 4px; font-size: .8rem; line-height: 1.5; }
}

/* Quiet feedback: pointer presses respond, keyboard navigation stays immediate. */
.carousel-controls button, .theme-toggle, .menu-toggle, .filters button, .back-top {
  transition: color var(--duration-ui), border-color var(--duration-ui), background var(--duration-ui), transform var(--duration-ui) var(--ease-ui);
}
.button:active:not(:focus-visible), .carousel-controls button:active:not(:focus-visible), .theme-toggle:active:not(:focus-visible), .menu-toggle:active:not(:focus-visible), .filters button:active:not(:focus-visible), .back-top:active:not(:focus-visible) { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-hover); }
  .carousel-controls button:hover { border-color: var(--accent); color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .button:active, .carousel-controls button:active, .theme-toggle:active, .menu-toggle:active, .filters button:active, .back-top:active { transform: none; }
}

/* The complete workflow follows the two headline sentences on each home arrival. */
.hero { padding-block: 100px 105px; }
.hero h1 > .hero-line:first-child { margin-top: 0; color: var(--text); }
html[data-hero-entrance] [data-hero-line] { animation: portfolio-sentence-fade var(--motion-hero) var(--ease-trace) backwards; }
html[data-hero-entrance] .workflow-stage { animation: portfolio-stage-fade var(--motion-hero-stage) var(--ease-trace) backwards; }
html[data-hero-entrance] .workflow-connection { animation: portfolio-connection-fade 1280ms var(--ease-trace) 1100ms backwards; }
@media (prefers-reduced-motion: no-preference) {
  .hero-workflow[data-idle-pulse] .workflow-signal { animation: workflow-signal 7s linear 600ms infinite; }
  .hero-workflow[data-idle-pulse] .workflow-modeling .workflow-signal { animation-delay: 820ms; }
  .hero-workflow[data-idle-pulse] .workflow-analysis .workflow-signal { animation-delay: 1040ms; }
  .hero-workflow[data-idle-pulse] .workflow-automation .workflow-signal { animation-delay: 1260ms; }
  .hero-workflow[data-idle-pulse] .workflow-decision .workflow-signal { animation-delay: 1480ms; }
}
html[data-hero-entrance] [data-hero-line]:nth-child(2) { animation-delay: 540ms; }
html[data-hero-entrance] .workflow-system { animation-delay: 1100ms; }
html[data-hero-entrance] .workflow-modeling { animation-delay: 1360ms; }
html[data-hero-entrance] .workflow-analysis { animation-delay: 1620ms; }
html[data-hero-entrance] .workflow-automation { animation-delay: 1880ms; }
html[data-hero-entrance] .workflow-decision { animation-delay: 2140ms; }
@keyframes portfolio-sentence-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes portfolio-stage-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes portfolio-connection-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes workflow-signal { 0% { transform: scale(.85); opacity: .6; } 9.2857%, 100% { transform: scale(1.35); opacity: 0; } }
.hero-copy { max-width: none; width: 100%; }
.hero-workflow { width: min(100%, 920px); margin: 64px auto 0; }
.workflow-stages { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.workflow-stage { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.workflow-stage svg { display: block; width: 100%; height: 116px; overflow: visible; }
.workflow-system svg, .workflow-automation svg { width: 82%; }
.workflow-geometry { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.workflow-grid { stroke: var(--line); }
.workflow-guide { stroke: var(--line); stroke-dasharray: 3 4; }
.workflow-emphasis { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workflow-band { fill: var(--accent); fill-opacity: .12; stroke: none; }
.workflow-point { fill: var(--accent); stroke: none; }
.workflow-connection { position: absolute; height: 1px; top: 125px; left: 10%; right: 10%; background: var(--line); }
.workflow-connection > span { display: block; width: 100%; height: 100%; background: var(--accent); }
.workflow-node { position: absolute; top: 122px; left: calc(50% - 3.5px); width: 7px; height: 7px; border: 1px solid var(--accent); border-radius: 50%; background: var(--bg); }
.workflow-signal { position: absolute; top: 107px; left: calc(50% - 18px); width: 36px; height: 36px; border: 2px solid var(--accent); border-radius: 50%; opacity: 0; pointer-events: none; }
.workflow-label { margin-top: 24px; color: var(--reading); font-size: .75rem; line-height: 1.5; text-underline-offset: 4px; transition: color var(--motion-feedback); }
.workflow-stage:focus-visible { outline-offset: 4px; }
.workflow-stage:focus-visible .workflow-label { color: var(--accent); text-decoration: underline; }
.workflow-stage:focus-visible .workflow-node { background: var(--accent); }
.hero-workflow figcaption { color: var(--muted); font-size: .75rem; line-height: 1.6; min-height: 3.2em; margin-top: 18px; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .workflow-stage:hover .workflow-label { color: var(--accent); text-decoration: underline; }
}
@media (max-width: 1100px) { .workflow-stages { gap: 6px; } }
@media (max-width: 900px) {
  .hero { padding-block: 85px; }
  .hero-workflow { max-width: 680px; margin-top: 52px; }
}
@media (max-width: 600px) {
  .hero { padding-block: 72px 80px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 3.4rem); }
  .hero-workflow { margin-top: 44px; }
  .workflow-stages { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 10px; }
  .workflow-stage { grid-column: span 2; }
  .workflow-automation, .workflow-decision { grid-column: span 3; }
  .workflow-stage svg { height: 84px; max-width: 100px; }
  .workflow-label { margin-top: 8px; font-size: .8125rem; }
  .workflow-node, .workflow-connection { display: none; }
  .workflow-signal { top: 27px; left: calc(50% - 15px); width: 30px; height: 30px; border-width: 1.5px; }
  .hero-workflow figcaption { margin-top: 20px; font-size: .8125rem; text-align: left; }
}
.enhanced-carousel .project-grid { overflow: clip; overflow-clip-margin: 40px; }
@media (max-width: 1100px) { .enhanced-carousel .project-grid { overflow-clip-margin: 32px; } }
@media (max-width: 600px) { .enhanced-carousel .project-grid { overflow-clip-margin: 20px; } }
.enhanced-carousel .project-grid.is-swiping { overflow-clip-margin: 8px; }
.project-grid.is-swiping .project-card-link { transform: none; box-shadow: none; transition: none !important; }
#site-nav > a, .text-link, .social-links a, .discipline-links a { position: relative; }
#site-nav > a::after, .text-link::after, .social-links a::after, .discipline-links a::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-hover) var(--ease-ui);
}
#site-nav > a::after { bottom: 8px; }
#site-nav > a[aria-current]::after, a:focus-visible::after { transform: scaleX(1); }
.project-card h3 { transition: color var(--motion-feedback); }
.project-card-link:focus-visible { border-color: var(--accent); }
.project-card:focus-within h3 { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  #site-nav > a:hover::after, .text-link:hover::after, .social-links a:hover::after, .discipline-links a:hover::after { transform: scaleX(1); }
  .project-card:hover h3 { color: var(--accent); }
  .project-card-link:hover { border-color: var(--accent); transform: translateY(-8px) scale(1.02); box-shadow: var(--card-hover-shadow); }
}
html[data-input="keyboard"] a, html[data-input="keyboard"] button,
html[data-input="keyboard"] .project-card, html[data-input="keyboard"] .project-card h3,
html[data-input="keyboard"] .workflow-label, html[data-input="keyboard"] a::after { transition: none !important; }
html[data-input="keyboard"] .project-card-link { transform: none; box-shadow: none; }
html[data-theme-changing] body *, html[data-theme-changing] body *::before, html[data-theme-changing] body *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  a, button, .project-card, .project-card h3, .workflow-label { transition: color 100ms, border-color 100ms, background-color 100ms !important; }
  a::after { transition: none !important; }
  .project-card-link { transition: transform var(--motion-card-reduced) var(--ease-card), box-shadow var(--motion-card-reduced) var(--ease-card), border-color 100ms !important; }
}
/* A shorter, smaller pointer cue; keyboard and touch remain still. */
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .project-card-link:hover { transform: translateY(-6px); }
}

/* Progressive enhancement for Jekyll's normal same-origin page navigation.
   The header stays in place; unsupported browsers use ordinary navigation. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(*) { animation-duration: 180ms; }
  ::view-transition-old(root) { animation: portfolio-page-out 100ms linear both; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: portfolio-page-in 180ms var(--ease-ui) both; mix-blend-mode: normal; }
  ::view-transition-group(site-header), ::view-transition-new(site-header) { animation: none; }
  ::view-transition-old(site-header) { display: none; }
}
@keyframes portfolio-page-out { to { opacity: 0; } }
@keyframes portfolio-page-in { from { opacity: 0; } to { opacity: 1; } }

/* Expertise reads as a three-step process without moving its content. */
.expertise-grid article { position: relative; }
.expertise-grid article:first-child { padding-left: 28px; }
.expertise-grid article::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--accent); opacity: .28; transform-origin: top;
  pointer-events: none; transition: opacity var(--motion-hover) var(--ease-ui);
}
.expertise-grid article:not(:first-child)::before { left: -1px; }
.expertise-grid .expertise-number, .expertise-grid h3 { transition: color var(--motion-hover) var(--ease-ui); }
.expertise[data-expertise-animated] .expertise-grid article::before {
  animation: expertise-rule-vertical 280ms var(--ease-ui) backwards;
}
.expertise[data-expertise-animated] .expertise-number {
  animation: expertise-number 280ms var(--ease-ui) backwards;
}
.expertise[data-expertise-animated] .expertise-grid article:nth-child(2)::before,
.expertise[data-expertise-animated] .expertise-grid article:nth-child(2) .expertise-number { animation-delay: 140ms; }
.expertise[data-expertise-animated] .expertise-grid article:nth-child(3)::before,
.expertise[data-expertise-animated] .expertise-grid article:nth-child(3) .expertise-number { animation-delay: 280ms; }
@keyframes expertise-rule-vertical {
  from { transform: scaleY(0); opacity: .8; }
  to { transform: scaleY(1); opacity: .28; }
}
@keyframes expertise-rule-horizontal {
  from { transform: scaleX(0); opacity: .8; }
  to { transform: scaleX(1); opacity: .28; }
}
@keyframes expertise-number { from { color: var(--muted); } to { color: var(--accent); } }
@media (hover: hover) and (pointer: fine) {
  .expertise-grid article:hover::before { opacity: 1; }
  .expertise-grid article:hover h3 { color: var(--accent); }
  .expertise-grid article:hover .expertise-number { color: var(--accent-hover); }
}
@media (max-width: 760px) {
  .expertise-grid article:first-child { padding: 25px 0 0; }
  .expertise-grid article::before, .expertise-grid article:not(:first-child)::before {
    inset: 0 0 auto; width: auto; height: 2px; transform-origin: left;
  }
  .expertise[data-expertise-animated] .expertise-grid article::before { animation-name: expertise-rule-horizontal; }
}
@media (prefers-reduced-motion: reduce) {
  .expertise-grid article::before { transition: opacity 100ms !important; }
  .expertise-grid .expertise-number, .expertise-grid h3 { transition: color 100ms !important; }
}

/* Colour refresh with two fixed roles: mint marks everything you can click
   (buttons, links, active navigation), warm orange marks labels and
   highlights (eyebrows, numbers, categories, markers). The header blends into
   the page. */
body { background-image: radial-gradient(900px 620px at 88% 12%, var(--page-glow), transparent 70%), radial-gradient(700px 500px at 0% 70%, var(--page-glow-warm), transparent 70%); background-repeat: no-repeat; }
.site-header { border-bottom-color: transparent; }
/* Lower header on desktop only; the mobile header keeps its measured height. */
@media (min-width: 901px) { .header-inner { min-height: 78px; } }
.hero h1 > .hero-solution, .eyebrow, .experience-organization, .card-meta span:first-child { color: var(--warm); }
.status-dot { background: var(--warm); box-shadow: 0 0 14px var(--contact-glow); }
.workflow-emphasis { stroke: var(--warm); }
.atlas-chapter-heading::before { background: var(--warm); }
.case-body .prose h2::before { border-color: var(--warm); }
.expertise-grid .expertise-number { color: var(--warm); }
.expertise-grid .tools { color: var(--muted); }
@keyframes expertise-number { from { color: var(--muted); } to { color: var(--warm); } }
@media (hover: hover) and (pointer: fine) {
  .expertise-grid article:hover .expertise-number { color: var(--warm); }
}

/* Contact follows the same rhythm as the other sections: page surface below
   the about panel, footer on the panel surface. */
.contact-section { background: var(--bg); border-top: 1px solid var(--line); }
.home-page .site-footer { background: var(--panel); border-top: 1px solid var(--line); }
.contact-section input, .contact-section textarea { background: var(--panel); }

/* Livelier sections: every home section and the project index header carry a
   soft mint and warm glow like the hero, expertise and experience become
   cards. Glows are full-bleed pseudo
   elements, so main clips horizontal overflow. */
main { overflow-x: clip; }
.home-page main > section.section { position: relative; isolation: isolate; }
.home-page main > section.section::before, .collection-heading::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
#expertise::before, #contact::before { background: radial-gradient(620px 460px at 92% 10%, var(--page-glow-warm), transparent 70%), radial-gradient(700px 520px at 0% 100%, var(--page-glow), transparent 70%); }
#projects::before { inset: 0 calc(50% - 50vw); background: radial-gradient(700px 520px at 6% 4%, var(--page-glow), transparent 70%), radial-gradient(560px 420px at 100% 100%, var(--page-glow-warm), transparent 70%); }
#about::before { background: radial-gradient(640px 480px at 95% 20%, var(--page-glow), transparent 70%), radial-gradient(520px 400px at 10% 95%, var(--page-glow-warm), transparent 70%); }
.home-page main > section.section h2 { font-size: clamp(2.6rem, 4.2vw, 3.8rem); letter-spacing: -.035em; }
.expertise-grid { gap: 20px; }
.expertise-grid article, .expertise-grid article:first-child, .expertise-grid article:last-child { position: relative; overflow: hidden; padding: 30px 28px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel-light) 85%, transparent), color-mix(in srgb, var(--panel) 60%, transparent)); transition: transform var(--motion-hover) var(--ease-ui), border-color var(--motion-hover) var(--ease-ui); }
.expertise-grid article::before, .expertise-grid article:not(:first-child)::before { left: 0; background: var(--warm); }
.expertise-grid .expertise-number { font-family: inherit; font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; margin-bottom: 22px; }
.expertise-grid .tools { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); }
.portrait-panel { border-radius: 22px; overflow: hidden; }
.about-experience { border-top: 0; }
.experience-grid { gap: 18px; }
.experience-grid article { padding: 20px 22px; border: 1px solid var(--line); border-left: 3px solid var(--warm); border-radius: 16px; background: color-mix(in srgb, var(--bg) 45%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .expertise-grid article:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--warm) 45%, var(--line)); }
  .atlas-row:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 40px -24px var(--accent); }
}
@media (max-width: 900px) {
  .expertise-grid article, .expertise-grid article:first-child, .expertise-grid article:last-child { padding: 24px 22px; border-top: 1px solid var(--line); }
}

/* Project index: glowing header, numbered chapters and project rows as cards. */
.collection { padding-top: 0; counter-reset: chapter; }
.collection-heading { position: relative; max-width: none; margin-bottom: 0; padding: 72px 0 40px; }
.collection-heading::before { inset: -120px calc(50% - 50vw) -90px; background: radial-gradient(640px 400px at 85% 30%, var(--page-glow), transparent 70%), radial-gradient(520px 340px at 0% 100%, var(--page-glow-warm), transparent 70%); }
.collection-heading > * { max-width: 850px; }
.collection-heading h1 { letter-spacing: -.035em; }
.atlas-chapter { counter-increment: chapter; }
.atlas-chapter-heading::before { content: counter(chapter, decimal-leading-zero) " /"; width: auto; height: auto; margin-bottom: 16px; background: none; color: var(--warm); font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.atlas-chapter-heading h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.atlas-list { display: grid; gap: 14px; }
.atlas-row { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel-light) 70%, transparent), color-mix(in srgb, var(--panel) 60%, transparent)); transition: transform var(--motion-hover) var(--ease-ui), border-color var(--motion-hover) var(--ease-ui), box-shadow var(--motion-hover) var(--ease-ui); }
.atlas-row-link { grid-template-columns: minmax(0, 1fr) 200px; min-height: 0; padding: 22px 22px 22px 26px; }
.atlas-row-meta { color: var(--warm); }
.atlas-row-image { width: 200px; height: 130px; }
@media (max-width: 900px) {
  .atlas-row-link { grid-template-columns: minmax(0, 1fr) 110px; padding: 18px; }
  .atlas-row-image { width: 110px; height: 84px; }
  .atlas-chapter-heading::before { font-size: 1.8rem; }
}
@media (max-width: 600px) { .atlas-row-image { width: 96px; height: 72px; } }

/* Publications: same header as the project index, years as warm chapter
   marks and publications as static cards (only the DOI link is mint). */
.pub-profiles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pub-stats { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 14px; margin: 28px 0 0; }
.pub-stats > div { padding: 14px 20px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.pub-stats dt { color: var(--muted); font: var(--type-label)/1.5 Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.pub-stats dd { margin: 4px 0 0; color: var(--text); font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.pub-year { display: grid; grid-template-columns: minmax(185px, 22%) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-block: 46px 20px; }
.pub-year + .pub-year { border-top: 1px solid var(--line); }
.pub-year > h2 { position: sticky; top: calc(var(--header-height, 95px) + 28px); align-self: start; padding-top: 16px; color: var(--warm); font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.pub-list { display: grid; gap: 14px; min-width: 0; }
.pub-card { padding: 22px 26px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel-light) 70%, transparent), color-mix(in srgb, var(--panel) 60%, transparent)); }
.pub-meta { margin: 0 0 10px; color: var(--warm); font: var(--type-label)/1.5 Consolas, monospace; letter-spacing: .035em; }
.pub-card h3 { max-width: 62ch; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.35; font-weight: 500; }
.pub-authors { margin: 10px 0 0; color: var(--reading); font-size: .95rem; line-height: 1.6; }
.pub-authors strong { color: var(--text); font-weight: 600; white-space: nowrap; }
.pub-details { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: 12px 0 0; color: var(--muted); font-size: .88rem; }
.pub-details .text-link { font: .8rem Consolas, monospace; overflow-wrap: anywhere; }
.pub-contributions { padding-block: 56px 20px; border-top: 1px solid var(--line); }
.pub-contributions > p { margin-top: 12px; max-width: 640px; }
.pub-contributions ul { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.pub-contributions li { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 34%); gap: 8px 24px; align-items: baseline; padding-block: 16px; border-top: 1px solid var(--line); }
.pub-contribution-year { color: var(--warm); font: 600 .9rem Consolas, monospace; }
.pub-contribution-title { color: var(--text); line-height: 1.5; }
.pub-contribution-event { color: var(--muted); font-size: .9rem; line-height: 1.5; }
@media (max-width: 900px) {
  .pub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-year { grid-template-columns: 1fr; gap: 18px; padding-top: 36px; }
  .pub-year > h2 { position: static; padding-top: 0; font-size: 2rem; }
  .pub-card { padding: 18px; }
  .pub-contributions li { grid-template-columns: 52px minmax(0, 1fr); }
  .pub-contribution-event { grid-column: 2; }
}
/* Six navigation links: tighter spacing on narrow desktops keeps the longer
   Polish labels on one row down to the 901px menu breakpoint. */
@media (min-width: 901px) and (max-width: 1180px) {
  .header-inner { gap: 20px; }
  #site-nav { gap: 16px; }
  .language-links { padding-left: 16px; }
}
@media (min-width: 901px) and (max-width: 1040px) { #site-nav { font-size: .8rem; } }

/* Publications on home reuse the project carousel and card frame; a
   compact cover with the venue name stands in for the project image. */
#publications { border-top: 1px solid var(--line); }
#publications::before { inset: 0 calc(50% - 50vw); background: radial-gradient(620px 460px at 96% 6%, var(--page-glow-warm), transparent 70%), radial-gradient(640px 480px at 0% 100%, var(--page-glow), transparent 70%); }
.card-image.publication-cover { container-type: normal; aspect-ratio: auto; height: auto; min-height: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 18px 20px 16px; background: radial-gradient(260px 160px at 100% 0%, var(--page-glow-warm), transparent 75%), linear-gradient(160deg, var(--panel-light), var(--panel)); }
.card-image.publication-cover::before { content: ""; flex-shrink: 0; width: 32px; height: 3px; border-radius: 2px; background: var(--warm); }
.publication-venue { flex-shrink: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(3 * 1.3em); font-size: .95rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--warm); }
@media (max-width: 600px) { .publication-venue { min-height: calc(2 * 1.3em); } }
.publication-card .card-body { padding: 16px 20px 18px; }
.publication-card .card-meta { margin-bottom: 10px; }
.publication-card .card-body h3 { font-size: 1.08rem; line-height: 1.3; margin-bottom: 10px; }
.publication-card .card-body p { font-size: .85rem; line-height: 1.5; color: var(--muted); }
.pub-card { scroll-margin-top: calc(var(--header-height, 95px) + 24px); }
.pub-card:target { border-color: var(--accent); }