/* Responsive overrides shared by every route. Desktop artwork stays intact. */
:root { --nav-height: 28px; }
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {
  :root { --nav-height: calc(52px + env(safe-area-inset-bottom, 0px)); }
  html, body { width: 100%; overscroll-behavior: none; }
  .bar {
    height: var(--nav-height);
    padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
    gap: 12px;
  }
  .bar__left { flex: 1; justify-content: space-between; gap: 4px; padding: 0; max-width: 460px; }
  .bar__btn { min-height: 44px; min-width: 44px; justify-content: center; font-size: 14px; }
  .bar__mail { flex: none; min-height: 44px; height: 44px; margin: 0; padding: 0 12px; white-space: nowrap; font-size: 13px; }
  .bar__clock { display: none; }
  a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  a:focus-visible, button:focus-visible { outline: 2px solid #ff1493; outline-offset: 3px; }
  .about { height: 100dvh; }
  .about__column { --text-size: 13px; --text-leading: 1.4; --text-track: -.02em; gap: 20px !important; }
  .about__line { justify-content: center !important; margin-top: 0 !important; padding: 0 22px; transform: none !important; }
  .about__line > * { max-width: min(620px, 100%); white-space: normal; text-align: center; background: rgba(0,0,0,.68); padding: 4px 8px; }
  .hud__progress, .hud__scroll { bottom: calc(var(--nav-height) + 16px); }
  .hud__panel { bottom: calc(var(--nav-height) + 78px); }
  .hud__map, .hud__ticker { top: max(10px, env(safe-area-inset-top)); }
  .b2__corner { top: max(12px, env(safe-area-inset-top)); }
  .b2__corner .a { position: static; }
  .b2__corner .b, .b2__corner--r .b { margin: 0; }
  .b2__hint { display: none; }
  .wgrid, .pathg { bottom: var(--nav-height); touch-action: none; }
  .wgrid__scroll { bottom: calc(var(--nav-height) + 14px); font-size: 10px; }
  .wgrid__meta { font-size: var(--work-label-size, 12px); height: 12px; }
  .lbox__close {
    position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
    min-width: 84px; min-height: 44px; border: 1px solid currentColor;
    background: #000; color: #fff; padding: 10px 16px; font-size: 12px;
  }
  .lbox__label { display: none; }
  .lbox:not(.is-open) .lbox__close { display: none; }
  .pmap { width: 132px; height: 150px; }
  .trk { left: 10px !important; top: 160px !important; width: 132px; height: 44px; padding: 0; }
  .trk__btn { flex: 1; min-height: 44px; font-size: 12px; }
  body[data-page="gallery"] .cols .col { left: auto; right: 14px; width: 125px; }
  body[data-page="gallery"] .cols .col__label { left: auto; right: 150px; }
  .ftr__in {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start; gap: 20px 16px;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    scrollbar-width: thin; scrollbar-color: #ff1493 #000;
  }
  .ftr.is-open .ftr__in { pointer-events: auto; }
  .ftr__title, .ftr__band, .ftr__bars, .ftr__project, .ftr__no, .ftr__aside, .ftr__notes, .ftr__where, .ftr__copy {
    position: relative; inset: auto; width: auto; margin: 0;
  }
  .ftr__title { grid-column: 1 / -1; font-size: clamp(44px, 10vw, 98px); line-height: .88; padding: 8px 0 18px; }
  .ftr__band { grid-column: 1 / -1; height: 150px; }
  .ftr__nav { left: 0; right: 0; top: 0; padding: 0 12px; background: #ff1493; gap: 8px; justify-content: space-between; }
  .ftr__navi { min-height: 44px; font-size: 12px; }
  .ftr__err { height: 44px; width: 116px; bottom: 8px; font-size: 12px; }
  .ftr__sq--tl, .ftr__sq--tr { display: none; }
  .ftr__bars { grid-column: 1 / -1; height: 44px; gap: 8px; }
  .ftr__bar { min-height: 44px; font-size: 12px; padding: 0 10px; }
  .ftr__project, .ftr__no, .ftr__copy { font-size: 12px; line-height: 1.25; }
  .ftr__no { display: block; text-align: right; }
  .ftr__aside { display: block; grid-column: 1 / -1; }
  .ftr__aside p { font-size: 12px; line-height: 1.3; }
  .ftr__notes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .ftr__note:last-child { grid-column: 1 / -1; }
  .ftr__note p, .ftr__where p { font-size: 12px !important; line-height: 1.3 !important; white-space: normal !important; }
  .ftr__where { display: flex; grid-column: 2; }
  .ftr__copy { grid-column: 1 / -1; padding-top: 8px; }
  .ftr__ref, .ftr__slash { display: none; }
  .err__go { position: fixed; top: max(16px, env(safe-area-inset-top)); left: 16px; width: calc(100% - 32px); max-width: 462px; height: 44px; font-size: 12px; line-height: 44px; transform: none !important; }
  .err__stripIn { font-size: 9px; }
}

@media (max-width: 720px) {
  :root { --nav-height: calc(88px + env(safe-area-inset-bottom, 0px)); --ui-10: 11px; }
  .bar { flex-wrap: wrap; align-content: start; gap: 0; }
  .bar__left { flex: 1 0 100%; max-width: none; }
  .bar__btn { flex: 1; font-size: 13px; }
  .bar__mail { flex: 1 0 100%; justify-content: space-between; height: 40px; min-height: 40px; font-size: 12px; }
  .loader { font-size: 12px; --exit-x: 100vw; }
  .loader__logo { left: 14px; top: max(14px, env(safe-area-inset-top)); }
  .loader__dead1 { left: 64px; top: 26px; }
  .loader__rule { left: auto; right: 115px; top: 20px; }
  .loader__lines { left: auto; right: 14px; top: 26px; width: 91px; }
  .loader__roles { left: 24px; top: 25%; gap: 10px; }
  .loader__status { left: 24px; top: auto; bottom: 24%; }
  .loader__pct { left: 24px; bottom: 12%; }
  .loader__enjoy { left: auto; right: 24px; bottom: 12%; }
  .hud__map { width: 142px; right: auto; }
  .hud__mapbox { height: 110px; }
  .hud__maplabels { display: none; }
  .hud__ticker, .hud__awards { width: calc(100% - 184px); }
  .hud__awards { top: 46px; height: 108px; }
  .hud__awname { flex-basis: 48px; width: 48px; }
  .hud__awrow { height: 17px; }
  .hud__awrow > p:last-child { flex-basis: 18px; }
  .hud__awlist { min-width: 0; overflow: hidden; }
  .hud__awrow p:first-child { overflow: hidden; text-overflow: ellipsis; }
  .hud__panel { height: 142px; bottom: calc(var(--nav-height) + 70px); gap: 20px; }
  .hud__panelbody { gap: 26px; }
  .hud__meta { gap: 16px; }
  .hud__coord { top: 46%; font-size: 10px; }
  .hud.is-deep .hud__ticker, .hud.is-deep .hud__awards { opacity: 0; }
  .about__column { --text-size: 13px; --text-leading: 1.4; --text-track: -.02em; gap: 20px !important; }
  .about__line { justify-content: center !important; margin-top: 0 !important; padding: 0 22px; transform: none !important; }
  .about__line > * { max-width: 100%; white-space: normal; text-align: center; background: rgba(0,0,0,.68); padding: 4px 8px; }
  #aboutFigure { --fig-height: .40; }
  .b2__corner { font-size: 10px; line-height: .9; row-gap: 4px; }
  .b2__corner--l { left: 12px; }
  .b2__corner--r { right: 12px; }
  .b2__cols, .b2__colsinner { gap: 32px; }
  .pmap { width: 100px; height: 112px; }
  .trk { top: 122px !important; width: 100px; }
  body[data-page="gallery"] .cols .col { font-size: 11px; }
  body[data-page="gallery"] .cols .col:not(:first-child), body[data-page="gallery"] .cols .col__label { display: none; }
  .ftr__in { gap: 16px 12px; }
  .ftr__title { font-size: 12vw; }
  .ftr__band { height: 136px; }
}

@media (max-height: 600px) and (max-width: 1024px) and (orientation: landscape) {
  :root { --nav-height: calc(48px + env(safe-area-inset-bottom, 0px)); }
  .bar { flex-wrap: nowrap; align-items: center; }
  .bar__left { flex: 1; }
  .bar__mail { flex: 0 1 auto; width: auto; min-width: 116px; }
  .hud__panel, .hud__awards { display: none; }
  .hud__mapbox { height: 80px; }
  .loader__roles { top: 28%; gap: 6px; }
  .loader__status { left: auto; right: 24px; bottom: 30%; }
  .pmap { height: 80px; }
  .trk { top: 90px !important; }
  .ftr__title { font-size: min(9vw, 64px); }
}

@media (min-width: 1025px) and (pointer: fine) { .lbox__close { display: none; } }