/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * Existing VaS composition and green tokens; responsive layout and touch access only.
 */
@media (max-width: 45rem) {
  :root { --page-gutter: clamp(1rem, 4vw, 1.5rem); }
  html { scroll-padding-top: calc(6rem + env(safe-area-inset-top, 0px)); }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  main, .site-footer {
    padding-inline: max(var(--page-gutter), env(safe-area-inset-left, 0px)) max(var(--page-gutter), env(safe-area-inset-right, 0px));
  }
  .site-header { height: calc(84px + env(safe-area-inset-top, 0px)); }
  .nav-pill {
    top: calc(var(--space-sm) + env(safe-area-inset-top, 0px));
    width: calc(100% - 2 * var(--page-gutter));
    max-width: calc(100% - 2 * var(--page-gutter));
    gap: var(--space-xs);
    padding: var(--space-xs);
  }
  .nav-pill .wordmark { min-height: 44px; gap: var(--space-2xs); font-size: 1.05rem; }
  .nav-pill .wordmark img { width: 24px; height: 24px; flex: none; }
  .nav-pill .menu-toggle { width: 44px; min-width: 44px; height: 44px; }
  .nav-pill .language-switch { min-width: 44px; min-height: 44px; padding-inline: var(--space-xs); font-size: .75rem; }
  .nav-pill .language-picker { position: static; }
  .nav-pill .nav-login { min-height: 44px; padding-inline: var(--space-sm); font-size: .75rem; }
  .nav-pill .nav-links {
    gap: var(--menu-item-gap);
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule);
    max-height: calc(100dvh - 100px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links a { min-height: 48px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); }
  .nav-links a[aria-current="page"] { background: var(--color-paper-3); color: var(--color-accent); }
  .nav-links a::after { display: none; }
  .language-menu { inset-inline-end: var(--space-xs); top: calc(100% + var(--space-xs)); max-height: calc(100dvh - 100px - env(safe-area-inset-top, 0px)); overflow-y: auto; }
  .language-option, .account-menu-item { min-height: 48px; white-space: nowrap; }

  .page-heading { padding-block: var(--space-lg) var(--space-md); }
  .page-heading h1 { font-size: clamp(2rem, 8.4vw, 2.75rem); line-height: 1.2; }
  .page-heading p { font-size: .9375rem; line-height: 1.75; margin-top: var(--space-md); }
  .catalog-section { padding-block: 0 var(--space-xl); }
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-rule) var(--color-paper);
    scroll-padding-inline: var(--space-2xs);
    margin-block: var(--space-sm) var(--space-lg);
    padding: var(--space-2xs) var(--space-2xs) var(--space-xs);
    gap: var(--menu-item-gap);
  }
  .filter { flex: none; min-height: 44px; font-size: .8125rem; }
  .filter:focus-visible { outline-offset: -3px; }
  html[data-public-page] .app-grid { gap: var(--space-xl); }
  html[data-public-page] .app-card .card-art,
  html[data-public-page] .app-card.featured .card-art,
  html[data-public-page] .app-card.studio-showcase .card-art {
    height: auto; min-height: 0; aspect-ratio: auto;
    padding: var(--space-xs) 0; flex: none;
  }
  html[data-public-page] .app-card .card-art.anime-art { aspect-ratio: auto; }
  html[data-public-page] .app-card .card-copy { padding: 0; gap: var(--space-md); }
  html[data-public-page] .app-card .card-copy h3 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.35; }
  .card-copy p { font-size: .9375rem; line-height: 1.75; }
  .card-copy .card-tag { font-size: .75rem; }
  .studio-feature-copy { min-height: 9.5rem; }
  .studio-feature-copy h4 { font-size: 1rem; }
  .demo-heading { min-height: 28px; font-size: 11px; }
  .demo-caption { min-height: 28px; }
  .demo-caption > span { font-size: 11px; }
  .demo-anime-source { font-size: .6875rem; }
  .demo-anime-source a { display: inline-flex; align-items: center; min-height: 44px; }
  .demo-anime-poster figcaption a { display: flex; align-items: flex-start; min-height: 44px; }

  .ecosystem-hero { padding-block: var(--space-lg) var(--space-xl); gap: var(--space-lg); }
  .ecosystem-hero h1 { font-size: clamp(2.125rem, 8.4vw, 3rem); line-height: 1.18; max-width: 16ch; overflow-wrap: anywhere; }
  .ecosystem-hero .lede { font-size: .9375rem; margin-top: var(--space-md); line-height: 1.75; }
  .ecosystem-hero .actions { margin-top: var(--space-lg); gap: var(--space-xs) var(--space-md); }
  .ecosystem-hero .actions > .button { flex-basis: 100%; justify-content: center; }
  .ecosystem-hero .hero-note { margin-top: var(--space-sm); font-size: .75rem; }
  .ecosystem-catalog { padding-top: var(--space-xl); }
  .detail-hero { gap: var(--space-lg); padding-bottom: var(--space-xl); }
  .detail-hero h1 { font-size: clamp(2rem, 8.5vw, 2.75rem); line-height: 1.18; }
  .detail-hero .card-art.app-demo { aspect-ratio: 1.45; padding: var(--space-sm); }
  .detail-body { gap: var(--space-lg); }
  .detail-hero .actions { gap: var(--space-sm); margin-top: var(--space-lg); }
  .download-card-link { padding: var(--space-lg); }
  .download-verification { margin-inline: var(--space-lg); }
  .download-verification summary { min-height: 44px; padding-block: var(--space-xs); }
  .download-app-heading h2 { font-size: 1rem; }
  .footer-about .footer-ecosystem { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .footer-ecosystem a { white-space: nowrap; }
  .site-footer { padding-top: var(--space-xl); }
  .footer-intro { gap: var(--space-md); }

  .auth-page { padding-block: var(--space-lg) var(--space-xl); }
  .auth-page h1 { font-size: clamp(1.875rem, 7.8vw, 2.25rem); line-height: 1.25; }
  .auth-page > p { margin-bottom: var(--space-lg); }
  .auth-form { gap: 1.25rem; }
  .field label, .as-field label, .as-email-controls .field label { font-size: .8125rem; }
  .field input, .as-field input, .as-email-controls input { font-size: 1rem; min-height: 50px; }
  .field .auth-helper, .auth-form > .auth-helper { margin-top: 0; }
  .auth-helper { line-height: 1.75; }
  .auth-switch { margin-top: var(--space-md); }
  .auth-switch a { display: inline-flex; align-items: center; min-height: 44px; }
  .auth-form .email-optin { min-height: 48px; padding-block: var(--space-xs); }
  .auth-form .form-status:empty { display: none; }
  .email-verification .actions { flex-direction: column; align-items: stretch; }
  .email-verification .actions .button { width: 100%; min-height: 48px; }
  .signup-protection { scroll-margin-block: 6rem 2rem; }
  .signup-protection .button { max-width: 100%; }

  .as-settings { padding-top: var(--space-lg); }
  .as-page-heading { margin-bottom: var(--space-lg); }
  .as-tabs { display: flex; gap: var(--menu-item-gap); overflow-x: auto; padding: var(--space-2xs); scrollbar-width: thin; overscroll-behavior-x: contain; }
  .as-tab { flex: 1 0 auto; flex-direction: row; width: auto; min-height: 48px; padding: var(--space-xs); gap: var(--space-xs); font-size: .75rem; white-space: nowrap; }
  .as-tab > svg { width: 17px; height: 17px; }
  .as-tab:focus-visible { outline-offset: -3px; }
  .as-sidebar { margin-bottom: var(--space-lg); }
  .as-card { padding: var(--space-md); }
  .as-panel-heading p, .as-page-heading > p, .as-avatar-row p, .as-field small,
  .as-help, .as-status, .as-notice, .as-text-button { font-size: .8125rem; line-height: 1.75; }
  .as-settings .button { font-size: .8125rem; min-height: 48px; }
  .as-card-actions { flex-direction: column; align-items: stretch; gap: var(--menu-item-gap); }
  .as-avatar-row { flex-wrap: wrap; }
  .as-avatar-row > div:last-child { flex: 1 1 150px; }
  .as-crop-dialog { max-height: calc(100dvh - 2 * var(--space-sm) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .as-crop-footer { padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px)); }
  .as-crop-help, .as-crop-note { font-size: .75rem; line-height: 1.7; }
}

@media (min-width: 23.4375rem) and (max-width: 45rem) {
  .nav-pill .brand-secondary { display: inline; }
  .nav-pill .wordmark { font-size: 1rem; }
}
@media (max-width: 22.5rem) {
  .nav-pill { gap: var(--space-2xs); }
  .nav-pill .wordmark { font-size: 1rem; }
  .as-card-title { align-items: flex-start; flex-wrap: wrap; }
  .as-tab > svg { display: none; }
}
@media (pointer: coarse) {
  .field input, .as-field input, .as-email-controls input { font-size: 1rem; }
  .nav-pill .wordmark, .language-picker .language-switch { min-height: 44px; }
}
@media (max-height: 32rem) and (orientation: landscape) {
  .as-crop-stage { width: min(100%, 38dvh); }
}