/* Phones and tablets: every exhibit owns its image and the text below it. */
@media (max-width: 900px) {
  :root {
    --mobile-header-height: calc(110px + env(safe-area-inset-top, 0px));
    --mobile-rail-height: calc(64px + env(safe-area-inset-bottom, 0px));
    --mobile-gutter: clamp(20px, 4.4vw, 34px);
  }
  html { scroll-padding-top: calc(var(--mobile-header-height) + 16px); }
  body { font-size: 19px; line-height: 1.7; overflow-wrap: break-word; }
  main, section, article, nav, .section-shell, .section-grid, .chapter-inner,
  .info-card, .timeline-item, .skill-card, .publication-entry, .publication-content,
  .case-content, .contact-grid, .contact-links { min-width: 0; }
  button, input, select, textarea { font-size: 16px; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #c4d9ff; outline-offset: 3px; }
  header {
    height: var(--mobile-header-height);
    padding: calc(6px + env(safe-area-inset-top, 0px)) max(var(--mobile-gutter), env(safe-area-inset-right, 0px)) 6px max(var(--mobile-gutter), env(safe-area-inset-left, 0px));
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 48px 44px; gap: 6px 10px; align-items: center;
    background: #020713f5; border-bottom: 1px solid #8eafff40; backdrop-filter: blur(16px);
  }
  .wordmark { grid-column: 1; grid-row: 1; font-size: 16px; letter-spacing: .055em; line-height: 1.3; min-height: 44px; display: flex; align-items: center; }
  .wordmark span { display: none; }
  .header-right { display: contents; }
  .header-right > a, .header-right .preview { display: none; }
  .header-right #motion { grid-column: 2; grid-row: 1; font-size: 14px; line-height: 1.3; min-width: 84px; min-height: 44px; padding: 10px 8px; border: 1px solid #8eafff70; border-radius: 5px; color: #e4edff; }
  .site-links { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 6px; align-items: stretch; justify-content: space-between; width: 100%; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; min-width: 0; max-width: 100%; padding: 0 2px; }
  .site-links a { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 14px; line-height: 1.3; letter-spacing: 0; padding: 8px 7px; white-space: nowrap; color: #d1dff8; }
  .stage, .gallery-label, .object-label, .loading { display: none !important; }
  .journey, .off .journey { height: auto; padding-top: var(--mobile-header-height); pointer-events: auto; z-index: 5; }
  .chapter, .off .chapter { position: relative; inset: auto; min-height: 0; opacity: 1 !important; transform: none !important; will-change: auto; pointer-events: auto; padding: 24px 0 0; scroll-margin-top: var(--mobile-header-height); background: radial-gradient(ellipse at 50% 10%, #14274b66, #02030b 65%); }
  .static-image, .off .static-image { display: block; width: calc(100% - 2 * var(--mobile-gutter)); max-width: 900px; height: auto; max-height: none; margin: 0 auto; padding: 0; object-fit: contain; object-position: center; }
  #intro .static-image, .off #intro .static-image { max-width: 520px; }
  .chapter-inner, .off .chapter-inner { display: block; margin: 24px 0 0; padding: 30px max(var(--mobile-gutter), env(safe-area-inset-right, 0px)) calc(42px + var(--mobile-rail-height)) max(var(--mobile-gutter), env(safe-area-inset-left, 0px)); border-top: 1px solid #a4c4ff50; background: #050b19; position: relative; z-index: 2; }
  .chapter .number { font-size: 15px; line-height: 1.55; letter-spacing: .055em; color: #c2d5f6; margin-bottom: 16px; }
  .chapter h1, .chapter h2, .off .chapter h1, .off .chapter h2 { font-size: clamp(36px, 7vw, 48px); font-weight: 500; line-height: 1.12; letter-spacing: -.035em; margin: 0 0 22px; max-width: 100%; overflow-wrap: normal; color: #f2f6ff; }
  #intro-title, .off #intro-title, .hero-name, .off .hero-name { font-size: clamp(52px, 14.4vw, 72px); font-weight: 500; line-height: .99; letter-spacing: -.055em; margin: 0 0 24px; }
  #intro-title span, .hero-name span { display: block; white-space: nowrap; }
  .intro-tagline, .hero-tagline { font-size: 26px; line-height: 1.3; color: #dbe7ff; }
  .chapter p, .off .chapter p { max-width: 64ch; margin: 0; font-size: 19px; line-height: 1.75; color: #d0dcf1; }
  .chapter .actions, .off .chapter .actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 12px 20px; margin-top: 26px; }
  .primary, .textlink, .end-links a, .contact-links a { min-height: 44px; font-size: 16px; line-height: 1.45; }
  .primary { display: inline-flex; justify-content: space-between; align-items: center; gap: 18px; padding: 13px 17px; max-width: 100%; }
  .textlink { display: inline-flex; align-items: center; padding: 10px 0; color: #c8dcff; }
  .rail { left: 0; right: 0; bottom: 0; height: var(--mobile-rail-height); padding: 6px max(var(--mobile-gutter), env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(var(--mobile-gutter), env(safe-area-inset-left, 0px)); background: #030917f5; backdrop-filter: blur(14px); border-top: 1px solid #8eafff50; }
  .rail-top, .next-prev { display: none; }
  .chapter-nav { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 4px; padding: 0; border: 0; overflow-x: auto; }
  .chapter-link { min-width: 44px; min-height: 44px; padding: 8px 4px; display: flex; justify-content: center; align-items: center; font-size: 14px; border: 1px solid transparent; border-radius: 4px; }
  .chapter-link b { font-size: 14px; line-height: 1.4; }
  .chapter-link span, .chapter-link[aria-current=true] span { display: none; }
  .chapter-link[aria-current=true] { background: #294879; border-color: #b0caff99; }
  .progress { top: -1px; height: 2px; }
  .portfolio { position: relative; z-index: 10; background: #030817; padding-bottom: var(--mobile-rail-height); }
  .portfolio section, .portfolio [id] { scroll-margin-top: calc(var(--mobile-header-height) + 16px); }
  .section-shell { width: auto; max-width: none; margin: 0; padding: 64px max(var(--mobile-gutter), env(safe-area-inset-right, 0px)) 64px max(var(--mobile-gutter), env(safe-area-inset-left, 0px)); }
  .section-heading { display: block; margin-bottom: 30px; }
  .section-heading h2, .portfolio h2 { font-size: clamp(36px, 6.8vw, 48px); line-height: 1.13; letter-spacing: -.035em; margin: 12px 0 22px; }
  .eyebrow, .portfolio .eyebrow { font-size: 15px; line-height: 1.6; letter-spacing: .055em; color: #b8cff9; }
  .section-grid, .skills-grid, .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .body-copy, .body-copy p, .portfolio p, .portfolio li, .section-heading > p:not(.eyebrow) { font-size: 19px; line-height: 1.75; color: #c7d5ee; }
  .info-card, .skill-card { padding: 24px 20px; }
  .info-card h3, .skill-card h3, .timeline-item h3, .case-study h3 { font-size: 24px; line-height: 1.35; }
  .info-card dl { margin: 20px 0; }
  .info-card dl > div { display: block; margin: 18px 0; }
  .info-card dt { font-size: 15px; line-height: 1.6; color: #b9cdf0; }
  .info-card dd { font-size: 19px; line-height: 1.65; margin: 3px 0 0; }
  .timeline { padding-left: 0; }
  .timeline-item { display: block; padding: 26px 0; }
  .timeline-item time, .timeline-item .date, .timeline-meta { font-size: 16px; line-height: 1.65; }
  .timeline-kind, .publication-index, .publication-index span, .case-number, .case-category { font-size: 14px; line-height: 1.6; }
  .publication-entry { display: block; padding: 28px 0; }
  .publication-entry h3, .publication-entry .publication-title { font-size: 23px; line-height: 1.4; }
  .publication-entry p { margin: 12px 0; }
  .publication-entry a { overflow-wrap: anywhere; }
  .portfolio .publication-meta { display: block; font-size: 15px; line-height: 1.7; }
  .portfolio .authors, .portfolio .research-note { font-size: 17px; line-height: 1.75; }
  .publication-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 20px; min-width: 0; }
  .publication-meta a, .publication-entry .publication-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
  .citation { max-width: 100%; min-width: 0; }
  .citation[open] { flex-basis: 100%; width: 100%; }
  .citation summary { min-height: 44px; font-size: 15px; padding: 10px 0; cursor: pointer; }
  .citation pre { max-width: 100%; width: 100%; margin: 10px 0; padding: 16px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; }
  .tag-list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
  .tag-list span { max-width: 100%; font-size: 15px; line-height: 1.55; padding: 8px 11px; white-space: normal; overflow-wrap: anywhere; }
  .case-study { min-width: 0; }
  .case-study summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px; align-items: center; gap: 10px; min-height: 64px; padding: 22px 16px; font-size: 19px; line-height: 1.5; }
  .case-study summary > span { min-width: 0; }
  .case-study summary strong { display: block; font-size: 25px; line-height: 1.3; margin: 5px 0; }
  .case-number { min-width: 0; }
  .case-category, .case-title { display: block; }
  .case-title { font-size: 17px; line-height: 1.6; }
  .case-toggle { width: 32px; height: 32px; min-width: 0; margin-left: 0; font-size: 22px; text-align: center; }
  .case-content { padding: 0 16px 28px; }
  .case-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .case-content > *, .case-columns > * { min-width: 0; max-width: 100%; }
  .case-content h4 { font-size: 22px; line-height: 1.4; }
  .case-intro .case-deck { font-size: 22px; line-height: 1.6; }
  .case-result { padding: 24px 16px; }
  .workflow { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-left: 22px; list-style-position: outside; }
  .portfolio img, .portfolio svg, .portfolio video { max-width: 100%; }
  .case-content img { display: block; width: 100%; height: auto; }
  .contact-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
  .contact-links a { overflow-wrap: anywhere; max-width: 100%; }
  .contact-email { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; font-size: clamp(20px, 4.7vw, 30px); line-height: 1.5; overflow-wrap: anywhere; word-break: normal; gap: 8px; }
  .site-footer { display: block; padding: 30px var(--mobile-gutter); font-size: 15px; line-height: 1.7; }
  .site-footer p, .site-footer small { font-size: 15px; line-height: 1.7; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer > div:last-child { text-align: left; margin-top: 24px; }
  .off .rail { display: none; }
  .off .chapter-inner { padding-bottom: 52px; }
  .off .portfolio { padding-bottom: 0; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .section-grid, .skills-grid, .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) and (max-height: 500px) {
  :root { --mobile-header-height: calc(100px + env(safe-area-inset-top, 0px)); }
  header { grid-template-rows: 44px 44px; gap: 4px 10px; padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
  .static-image, .off .static-image { width: min(72%, 480px); }
  #intro .static-image, .off #intro .static-image { max-width: 300px; }
  .section-shell { padding-top: 46px; padding-bottom: 46px; }
}
@media (max-width: 360px) {
  .wordmark { font-size: 15px; letter-spacing: .015em; }
  .header-right #motion { min-width: 78px; }
  .site-links { justify-content: flex-start; gap: 4px; }
  .site-links a { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .off .static-image { transform: none !important; }
}
@media (max-width: 900px) {
  #intro #intro-title, .off #intro #intro-title { font-size: clamp(52px, 14.4vw, 72px); font-weight: 500; line-height: .99; letter-spacing: -.055em; font-optical-sizing: auto; font-variation-settings: 'opsz' 32; }
  #intro #intro-title span { display: inline; white-space: nowrap; color: #a6c5ff; }
  .chapter .intro-tagline, .chapter .hero-tagline { font-size: 26px; line-height: 1.3; color: #dbe7ff; }
}
@media (max-width: 900px) {
  .journey .chapter, .off .journey .chapter { display: block; }
  .journey .chapter > .static-image, .off .journey .chapter > .static-image { grid-area: auto; order: 0; }
  .journey .chapter > .chapter-inner, .off .journey .chapter > .chapter-inner { grid-area: auto; order: 0; width: auto; max-width: none; }
}

/* Visible, compositor-only scroll movement; no text moves or disappears. */
@media (max-width: 900px) {
 body:not(.off) .chapter > .static-image {
  transform-origin: 50% 50%;
  transition: transform 140ms linear;
  backface-visibility: hidden;
 }
 .off .chapter > .static-image { transform: none !important; transition: none; }
}