@media (max-width: 1024px) {
  :root {
    --layout-inline-padding: 20px;
  }

  .bio-footer {
    min-height: auto;
  }

  .bio-content {
    padding: calc(var(--space-5) * 2) 24px var(--space-5);
  }

  .bio-portrait {
    right: max(var(--layout-inline-padding), calc(50% - (var(--content-max-width) / 2) - 43px));
    bottom: 0;
    width: 132px;
    height: 109px;
  }
}

@media (max-width: 640px) {
  :root {
    --layout-inline-padding: 12px;
    --scroll-prompt-bottom: 24px;
    --scroll-prompt-height: 74px;
    --rhythm-content-top: var(--space-5);
  }

  .top-nav-inner {
    gap: 10px;
  }

  .top-nav-copy {
    gap: 12px;
    align-items: center;
  }

  .page {
    padding-top: 0;
  }

  .hero-video-spacer {
    min-height: 280px;
  }

  .scroll-prompt {
    bottom: 24px;
    border-radius: 7px;
  }

  .scroll-prompt-copy {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 22px;
  }

  .scroll-prompt-rail {
    padding: 8px 14px;
    gap: 10px;
  }

  .scroll-prompt-arrow,
  .scroll-prompt-label-en {
    font-size: 12px;
    line-height: 20px;
  }

  .projects {
    margin-top: 0;
    width: 100%;
    gap: 0;
  }

  .projects-headline-row {
    padding-bottom: 6px;
  }

  .details-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .details {
    width: 100%;
  }

  .content {
    padding-top: var(--rhythm-content-top);
  }

  .nav-status {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-status-shell {
    height: 34px;
  }

  .bio-content {
    padding: calc(var(--space-5) * 2) 24px var(--space-5);
  }

  .bio-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .bio-portrait {
    position: absolute;
    right: calc(var(--layout-inline-padding) - 4px);
    bottom: 0;
    width: 120px;
    height: 99px;
  }

  .bio-footer-wave {
    top: -74px;
    height: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-swap-layer {
    transition: none;
  }

  .project-media-wrap {
    transition: none;
    transform: translateY(0) scale(1);
    box-shadow:
      0 12px 26px rgba(12, 20, 32, 0.02),
      0 4px 10px rgba(12, 20, 32, 0.01);
  }

  .project,
  .details,
  .bio-footer,
  .top-nav {
    transition: none;
  }

  .hero-video-media,
  .hero-video-overlay {
    transition: none;
  }

  .depth-blur-overlay,
  .depth-blur-overlay::before,
  .depth-blur-overlay-close,
  .depth-blur-overlay-track {
    transition: none;
  }

  .depth-blur-overlay-track {
    scroll-behavior: auto;
  }

  .depth-blur-overlay.is-open .depth-highlight-card,
  .depth-blur-overlay.is-open .depth-blur-overlay-title,
  .depth-blur-overlay.is-closing .depth-blur-overlay-title,
  .depth-blur-overlay.is-open .depth-blur-overlay-nav-button,
  .depth-blur-overlay.is-closing .depth-blur-overlay-nav-button,
  .depth-blur-overlay.is-open .depth-blur-overlay-close,
  .depth-blur-overlay.is-closing .depth-blur-overlay-close {
    animation: none !important;
  }

  .depth-highlight-card {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .scroll-prompt-arrow {
    animation: none;
  }

  .scroll-prompt {
    animation: none;
  }

  .scroll-prompt::after {
    animation: none;
  }

  .scroll-prompt-label-en {
    color: var(--color-text-on-dark-primary);
  }

  .scroll-prompt-rail {
    transition: none;
  }

  .scroll-prompt-label-en {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-prompt-copy.is-typing .scroll-prompt-copy-message::after,
  .scroll-prompt-copy.is-typed .scroll-prompt-copy-message::after {
    animation: none;
    opacity: 1;
  }

  .scroll-prompt-copy-presence::after {
    animation: none;
    background: none;
  }

  .inline-badge--secondary .inline-badge__label {
    color: var(--inline-badge-secondary-text);
  }

  .scroll-prompt-copy-message,
  .scroll-prompt-copy.is-presence-handoff .scroll-prompt-copy-presence {
    transition: none;
  }

  .scroll-prompt.is-poofing {
    animation: none;
  }

}

@media (hover: none), (pointer: coarse) {
  .cursor-readmore {
    display: none;
  }

  .project-media-wrap:hover,
  .project-media-wrap:focus-visible,
  .project-media-wrap.is-pressing {
    --hover-scale: 1;
    --lift-y: 0px;
    --shadow-alpha-a: 0.02;
    --shadow-alpha-b: 0.01;
    z-index: 1;
  }

  .project-media-wrap {
    transform: translateY(0) scale(1);
  }

}