/* Phone-only presentation: original compositions, no horizontal thumbnail carousel. */
@media (max-width:700px) {
  html {scroll-padding-top:20px}
  .case-wrap {width:calc(100% - 32px);max-width:520px;margin:16px auto 0}
  .case-paper {left:0;margin-top:0;padding:24px 16px 0;border-radius:28px}
  .case-intro {display:flex;flex-direction:column;gap:24px;padding:0 8px;min-height:0}
  .case-intro h1 {max-width:none;font-size:32px;line-height:40px;font-weight:500}
  .case-context {max-width:none;font-size:16px;line-height:24px;gap:8px}
  .case-project-details {font-size:14px;line-height:29px;padding:0}
  .brand-hero {min-height:0;aspect-ratio:2.3;margin-top:24px;border-radius:16px}
  .hero-lockup {gap:16px}
  .hero-lockup img {width:clamp(52px,16vw,74px);height:auto}
  .hero-lockup>span {font-size:clamp(56px,19vw,84px);line-height:1;letter-spacing:4px}
  .case-gallery {gap:16px;margin-top:16px}
  .gallery-card {border-radius:14px;scroll-margin-top:16px}
  .case-gallery .scene-desktop {display:block;width:100%}
  .case-gallery .scene-mobile {display:none}
  .gallery-closing {overflow:clip}
  .gallery-closing .closing-composition {width:100%}
  .composition-open {position:absolute;inset:0;z-index:10;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:zoom-in;touch-action:manipulation}
  .composition-open:focus-visible {outline:2px solid #111;outline-offset:-5px}
  .case-closing-cta {padding:40px 8px}
  .deep-dive-invitation {flex-direction:column;gap:18px}
  .deep-dive-prompt {font-size:16px;line-height:24px;text-align:center;white-space:normal}
  .deep-dive-button {height:44px}
  .case-footer {left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:24px 0 calc(108px + env(safe-area-inset-bottom,0px));font-size:12px;font-weight:400;line-height:18px;color:#ffffffb3;text-align:center}
  .build-credit {white-space:normal}

  /* A persistent bottom pill, with only a back arrow and the project name. */
  .case-topbar,.case-topbar.is-hidden {
    position:fixed;inset:auto auto calc(16px + env(safe-area-inset-bottom,0px)) 50%;
    width:calc(100% - 96px);max-width:440px;height:60px;
    transform:translateX(-50%);opacity:1;visibility:visible;pointer-events:auto;
  }
  .case-topbar .case-topbar-inner,.case-topbar.is-stuck .case-topbar-inner {
    height:60px;margin:0;padding:6px 24px 6px 6px;gap:12px;
    background:var(--hum-backdrop);border-radius:999px;pointer-events:auto;
    box-shadow:0 5px 16px rgba(74,0,30,.22),0 1px 3px rgba(74,0,30,.12);
  }
  .case-topbar-inner>p {max-width:none;margin:0;font-size:0;line-height:0;text-align:right}
  .case-topbar-brand {font-size:16px;line-height:24px;font-weight:400;color:#fff}
  .case-topbar .home-link {width:48px;height:48px;min-height:48px;padding:0;gap:0;flex:none;border:2px solid #ffffff66;border-radius:50%;background:#fff;font-size:0;line-height:0;box-shadow:none}
  .case-topbar .home-link::before {display:none}
  .case-topbar .home-link img {width:20px;height:auto;filter:brightness(0);opacity:.7}
  .case-topbar .home-link:active {background:#fff0f6}

  /* A native modal keeps zoom, two-axis scrolling and dismissal accessible. */
  .composition-lightbox {position:fixed;inset:0;display:none;width:calc(100vw - 16px);max-width:none;height:auto;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:20px;background:var(--hum-paper);color:#252429;box-shadow:0 24px 100px #0006;overflow:hidden}
  .composition-lightbox[open] {display:flex;flex-direction:column}
  .composition-lightbox::backdrop {background:#1a1614d1;backdrop-filter:blur(8px)}
  .composition-toolbar {display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 8px 8px 16px;flex:none}
  .composition-title {flex:1;min-width:0;font-size:14px;font-weight:500;line-height:20px}
  .composition-fit,.composition-close {display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:1px solid #e4e1e3;border-radius:50%;background:#fff;color:#252429;cursor:pointer}
  .composition-fit svg {width:20px;height:20px}
  .composition-close {font-size:28px;line-height:1}
  .composition-viewport {overflow:auto;max-height:calc(100dvh - 100px);min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--hum-pink)}
  .composition-viewport>.scene-desktop {display:block;width:1056px;max-width:none;flex:none;overflow:clip}
  .composition-lightbox.is-fit .composition-viewport>.scene-desktop {width:100%}
  .composition-viewport :is(button,a) {pointer-events:none}
  .composition-viewport .closing-composition {background:#fff}
  body:has(.composition-lightbox[open]) {overflow:hidden}
}

.composition-viewport:focus-visible{outline:2px solid #6b7280;outline-offset:-3px}