@media (max-width: 900px) {
  .app-frame { grid-template-columns: 204px minmax(0, 1fr); }
  .app-navigation { padding-inline: 11px; }
  .app-content { padding-inline: 32px; }
  .app-footer { padding-inline: 32px; }
  .page-heading { align-items: start; }
  .access-layout { grid-template-columns: minmax(0, 1fr) minmax(250px, 0.8fr); gap: 30px; }
  .gallery-toolbar { align-items: start; flex-direction: column; gap: 3px; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-layout { gap: 55px; }
}

@media (max-width: 700px) {
  .site-header,.site-footer { width: calc(100% - 40px);   }

  @media (max-width: 900px) {
    .dashboard-hero__copy { width: 56%; }
    .dashboard-hero__portrait .portrait-image,
    .dashboard-hero__portrait::before,
    .dashboard-hero__portrait .portrait-placeholder { width: min(42%, 360px); }
  }

  @media (max-width: 700px) {
    html,
    body { overflow-x: clip; }

    .app-header { gap: 8px; }
    .app-header .wordmark { min-width: 0; }
    .app-header__right { flex: 0 0 auto; }
    .auth-logout { min-height: 42px; }
    .nav-toggle { flex: 0 0 44px; }

    .app-content { min-width: 0; }
    .page-heading .button,
    .photo-upload__actions .button,
    .photo-recovery__action,
    .primary-link,
    .primary-button { min-height: 46px; }

    .dashboard-hero {
      min-height: 420px;
      align-items: start;
    }

    .dashboard-hero__copy {
      width: 100%;
      padding: 25px 21px;
    }

    .dashboard-hero h2 { max-width: 320px; font-size: 28px; }
    .dashboard-hero__copy > p:not(.eyebrow) { max-width: 300px; font-size: 12px; }
    .dashboard-hero__portrait::after {
      background: linear-gradient(180deg, var(--color-background) 0%, rgb(11 11 15 / 96%) 38%, rgb(11 11 15 / 62%) 61%, rgb(11 11 15 / 4%) 100%);
    }

    .dashboard-hero__portrait::before {
      top: auto;
      right: auto;
      bottom: 14px;
      left: 50%;
      width: min(70%, 320px);
      height: 176px;
      transform: translateX(-50%);
    }

    .dashboard-hero__portrait .portrait-image {
      top: auto;
      right: auto;
      bottom: 15px;
      left: 50%;
      width: min(70%, 320px);
      height: 174px;
      transform: translateX(-50%);
      object-fit: contain;
    }

    .dashboard-hero__portrait .portrait-placeholder {
      position: absolute;
      bottom: 12px;
      left: 50%;
      width: min(70%, 320px);
      height: 176px;
      margin: 0;
      padding: 10px;
      transform: translateX(-50%);
    }

    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 420px) {
    .site-header,
    .site-footer { width: calc(100% - 32px); }
    .app-header { padding-inline: 12px; }
    .app-header .wordmark { gap: 8px; margin-left: 2px; }
    .app-header .wordmark-copy strong { font-size: 13px; }
    .app-header .wordmark-copy span { font-size: 7px; letter-spacing: 1px; }
    .app-header__right .auth-logout { min-height: 40px; padding-inline: 9px; font-size: 9px; }
    .app-content { padding-inline: 16px; }
    .app-footer { padding-inline: 16px; }
    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .photo-upload,
    .photo-recovery { padding: 15px; }
    .photo-upload__actions .button { flex-basis: 100%; }
    .connection-notice > .text-link { margin-left: 0; }
    .empty-state { grid-template-columns: 96px minmax(0, 1fr); gap: 13px; }
  }
  .site-header { min-height: 72px; }
  .wordmark-seal { width: 34px; font-size: 19px; }
  .wordmark-copy strong { font-size: 16px; }
  .wordmark-copy span { font-size: 9px; }
  .header-link { gap: 6px; font-size: 10px; }
  .welcome-layout,.login-layout { grid-template-columns: 1fr; gap: 38px; width: calc(100% - 40px); min-height: auto; padding-block: 49px 48px; }
  .welcome-copy h1 { font-size: clamp(57px, 15vw, 77px); }
  .welcome-intro { max-width: 390px; margin-block: 19px 25px; font-size: 14px; }
  .welcome-portrait { width: min(100%, 390px); justify-self: center; }
  .portrait-frame--welcome { min-height: 0; aspect-ratio: 0.96; }
  .welcome-values { grid-template-columns: 1fr; width: calc(100% - 40px); margin-bottom: 45px; }
  .welcome-values article,.welcome-values article + article { min-height: auto; padding: 17px 0; border-left: 0; }
  .welcome-values article + article { border-top: 1px solid var(--line); }
  .welcome-values h2 { margin-block: 8px 5px; }
  .site-footer { min-height: 62px; gap: 12px; font-size: 8px; }
  .footer-lock { text-align: right; }
  .login-layout { gap: 28px; }
  .login-identity h1 { font-size: 56px; }
  .login-portrait { width: min(100%, 370px); min-height: 0; aspect-ratio: 1.7; }
  .login-form-panel { max-width: 480px; padding: 28px 0 10px; border-top: 1px solid var(--line); border-left: 0; }

  .app-header { min-height: 66px; padding: 0 19px; }
  .app-header .wordmark { margin-right: auto; margin-left: 13px; }
  .app-header .wordmark-seal { width: 31px; font-size: 17px; }
  .app-header .wordmark-copy strong { font-size: 14px; }
  .app-header .wordmark-copy span { font-size: 8px; }
  .app-header__right { gap: 0; }
  .connection-label { display: none; }
  .profile-chip { min-height: 44px; }
  .profile-chip > span:last-child { display: none; }
  .profile-chip__portrait { width: 29px !important; }
  .nav-toggle { display: grid; width: 44px; height: 44px; align-content: center; justify-items: center; gap: 5px; padding: 0; border: 1px solid var(--line); border-radius: 2px; background: transparent; }
  .nav-toggle span { display: block; width: 16px; height: 1px; background: var(--ink); transition: transform 150ms ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .app-frame { display: block; min-height: calc(100vh - 66px); }
  .app-navigation { position: fixed; z-index: 9; top: 66px; bottom: 0; left: 0; width: min(300px, 86vw); height: auto; min-height: 0; padding: 24px 16px 18px; transform: translateX(-105%); visibility: hidden; border-right: 1px solid var(--line); box-shadow: 12px 0 28px rgb(0 0 0 / 9%); transition: transform 180ms ease, visibility 180ms; }
  .app-navigation.is-open { transform: translateX(0); visibility: visible; }
  .navigation-open::after { position: fixed; z-index: 8; inset: 66px 0 0; background: rgb(11 11 15 / 58%); content: ""; }
  .nav-item { min-height: 48px; font-size: 12px; }
  .app-content { padding: 31px 21px 48px; }
  .app-footer { min-height: 49px; padding-inline: 21px; font-size: 8px; }
  .page-heading { align-items: start; flex-direction: column; gap: 19px; margin-bottom: 25px; }
  .page-heading h1,.access-copy h1 { font-size: clamp(35px, 10vw, 48px); }
  .page-lede { font-size: 11px; }
  .dashboard-hero { min-height: 255px; }
  .dashboard-hero__copy { width: 82%; padding: 25px 19px; }
  .dashboard-hero h2 { font-size: 27px; }
  .dashboard-hero__copy > p:not(.eyebrow) { font-size: 9px; }
  .dashboard-hero__portrait .portrait-image { width: 78%; object-position: center 30%; }
  .dashboard-hero__portrait .portrait-placeholder { width: 78%; padding: 10px; }
  .dashboard-hero__portrait .portrait-placeholder__mark { width: 42px; font-size: 21px; }
  .dashboard-hero__portrait .portrait-placeholder__name { font-size: 15px; }
  .dashboard-hero__portrait .portrait-placeholder__note { font-size: 8px; }
  .dashboard-links { grid-template-columns: 1fr; gap: 9px; margin-top: 15px; }
  .photo-upload { margin-top: 20px; padding: 17px; }
  .photo-upload__heading h2 { font-size: 21px; }
  .photo-upload__actions { align-items: stretch; }
  .photo-upload__actions .button { flex: 1 1 calc(50% - 6px); justify-content: center; padding-inline: 10px; }
  .photo-upload__clear { flex: 1 1 100%; }
  .photo-upload__file { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .photo-upload__file-state { justify-self: start; text-align: left; }
  .photo-recovery { margin-top: 16px; padding: 17px; }
  .photo-recovery__heading h2 { font-size: 21px; }
  .photo-recovery__item { grid-template-columns: minmax(0, 1fr); }
  .photo-recovery__action { width: 100%; justify-content: center; }
  .section-card { min-height: 96px; grid-template-columns: 32px 1fr auto; align-content: center; column-gap: 9px; padding: 14px; }
  .section-card__icon { grid-row: 1 / 3; margin: 0; }
  .section-card__meta { align-self: end; }
  .section-card strong { align-self: start; margin-top: 2px; font-size: 17px; }
  .section-card__arrow { top: 50%; transform: translateY(-50%); }
  .connection-notice { align-items: start; flex-wrap: wrap; gap: 11px; padding: 14px; }
  .notice-lock { width: 31px; }
  .connection-notice > div { width: calc(100% - 43px); }
  .connection-notice > .text-link { margin-left: 42px; }
  .access-layout { grid-template-columns: 1fr; gap: 27px; padding: 3px 0 34px; }
  .access-copy .button { margin-top: 2px; }
  .access-card { max-width: 470px; }
  .access-support { padding-top: 16px; }
  .gallery-toolbar { margin-top: 17px; }
  .collection-tabs { width: 100%; justify-content: space-between; gap: 7px; }
  .collection-tab { min-height: 43px; font-size: 9px; }
  .gallery-state { min-height: 0; }
  .gallery-management { align-items: start; flex-direction: column; }
  .gallery-bulk-actions { align-items: start; }
  .gallery-bulk-actions > strong { width: 100%; }
  .gallery-bulk-actions__buttons { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-bulk-actions__buttons .button { justify-content: center; min-width: 0; padding-inline: 7px; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
  .photo-card__select { top: 6px; right: 6px; width: 44px; height: 44px; }
  .photo-card__details { padding: 10px; }
  .photo-card__name { font-size: 9px; }
  .photo-card__metadata { font-size: 8px; }
  .photo-card__details { padding: 11px 12px; }
  .empty-state { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; min-height: 270px; padding-block: 28px 34px; }
  .empty-state__portrait { min-height: 150px; aspect-ratio: 0.72; }
  .empty-state__portrait .portrait-placeholder { padding: 8px; }
  .empty-state__portrait .portrait-placeholder__mark { width: 37px; font-size: 19px; }
  .empty-state__portrait .portrait-placeholder__name { font-size: 14px; }
  .empty-state__portrait .portrait-placeholder__note { font-size: 7px; }
  .empty-state__copy .eyebrow { font-size: 7px; letter-spacing: 0.8px; }
  .empty-state__copy h2 { font-size: clamp(21px, 6vw, 28px); }
  .empty-state__copy > p:not(.eyebrow) { font-size: 9px; }
  .loading-state { grid-template-columns: 96px minmax(0, 1fr); gap: 19px; min-height: 270px; }
  .loading-state__portrait { width: 96px; }
  .loading-state__copy h2 { font-size: 23px; }
  .loading-state__copy p { font-size: 9px; line-height: 1.6; }
  .denied-state { min-height: 270px; padding-inline: 5px; }
  .denied-state h2 { font-size: 27px; }
  .collection-section { padding-top: 19px; }
  .collection-empty { align-items: start; }
  .collection-empty strong { font-size: 13px; }
  .collection-empty p { line-height: 1.6; }

  .viewer-header { grid-template-columns: 1fr auto; min-height: 66px; padding-inline: 16px; }
  .viewer-header .wordmark { display: none; }
  .viewer-back { gap: 7px; font-size: 9px; }
  .viewer-header__status { font-size: 9px; }
  .viewer-header__actions { gap: 8px; }
  .viewer-header__actions .auth-logout { min-height: 34px; padding-inline: 9px; font-size: 9px; }
  .viewer-main { width: calc(100% - 28px); margin-block: 14px; }
  .viewer-stage { min-height: min(58vh, 510px); }
  .viewer-placeholder { width: min(270px, 67vw); }
  .viewer-photo { max-width: calc(100% - 74px); max-height: min(58vh, 510px); }
  .viewer-control { width: 36px; }
  .viewer-control--previous { left: 9px; }
  .viewer-control--next { right: 9px; }
  .viewer-details { flex-direction: column; gap: 17px; padding: 17px 3px; }
  .viewer-actions { width: 100%; }
  .viewer-actions .viewer-action { flex: 1 1 80px; justify-content: center; padding-inline: 8px; }
  .viewer-details h1 { font-size: 20px; }
  .viewer-footer { width: calc(100% - 28px); }
}

@media (max-width: 390px) {
  .site-header,.site-footer,.welcome-layout,.login-layout,.welcome-values { width: calc(100% - 32px); }
  .header-link { font-size: 9px; }
  .welcome-copy h1 { font-size: 56px; }
  .private-note,.login-privacy { align-items: flex-start; }
  .app-header { padding-inline: 12px; }
  .app-header .wordmark { gap: 8px; margin-left: 9px; }
  .app-content { padding-inline: 16px; }
  .app-footer { padding-inline: 16px; }
  .dashboard-hero__copy { padding-inline: 14px; }
  .dashboard-hero h2 { font-size: 24px; }
  .empty-state { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .empty-state__portrait { min-height: 125px; }
  .empty-state__copy h2 { font-size: 21px; }
}