/* Stability-first mode for narrow touch devices. Desktop and tablet layouts are unchanged. */
html.mobile-safe-mode { --safe-screen:100svh;scroll-behavior:auto; }
html.mobile-safe-mode body { overflow-x:hidden;text-rendering:optimizeSpeed; }

html.mobile-safe-mode .site-header {
  box-sizing:border-box;height:64px;padding:0 12px;gap:10px;
  background:linear-gradient(180deg,rgba(2,4,5,.92),rgba(2,4,5,.5),transparent);
}
html.mobile-safe-mode .site-header .identity-mark { flex:0 0 auto;max-width:104px;font-size:8px;letter-spacing:.13em; }
html.mobile-safe-mode .site-header nav {
  display:flex;flex:1 1 auto;justify-content:flex-start;gap:15px;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;pointer-events:auto;
}
html.mobile-safe-mode .site-header nav::-webkit-scrollbar { display:none; }
html.mobile-safe-mode .site-header nav a,
html.mobile-safe-mode .site-header nav button { flex:0 0 auto;font-size:6px;letter-spacing:.14em; }

html.mobile-safe-mode .story { height:650svh; }
html.mobile-safe-mode .story-stage,
html.mobile-safe-mode .archive-stage,
html.mobile-safe-mode .video-stage,
html.mobile-safe-mode .finale-stage,
html.mobile-safe-mode .echoes-stage { height:var(--safe-screen);min-height:0; }
html.mobile-safe-mode .fine-grain,
html.mobile-safe-mode .archive-ambient,
html.mobile-safe-mode .video-stage-shade { opacity:.35; }

html.mobile-safe-mode .melodies-story { height:auto;min-height:var(--safe-screen); }
html.mobile-safe-mode .melodies-stage {
  --melody-progress:1!important;position:relative;top:auto;height:auto;min-height:var(--safe-screen);
  padding-top:72px;padding-bottom:54px;overflow:hidden;opacity:1;
}
html.mobile-safe-mode .record-wall { pointer-events:auto!important; }
html.mobile-safe-mode .record-card:nth-child(n+4) { display:block; }
html.mobile-safe-mode .sleeve-disc { pointer-events:none; }
html.mobile-safe-mode .melodies-hint { display:none; }

html.mobile-safe-mode .video-stage-story { min-height:2500px; }
html.mobile-safe-mode .video-stage-film { object-fit:cover; }
html.mobile-safe-mode .stage-feature-rail { max-width:calc(100vw - 24px); }
html.mobile-safe-mode .stage-rail-track { backdrop-filter:none; }

html.mobile-safe-mode .finale-story { z-index:2;height:185svh;margin-top:0;background:#010202; }
html.mobile-safe-mode .finale-time-stream,
html.mobile-safe-mode .finale-canvas,
html.mobile-safe-mode .finale-entry-token { display:none!important; }
html.mobile-safe-mode .finale-core { filter:none; }
html.mobile-safe-mode .finale-copy h2 { white-space:normal;text-align:center;font-size:clamp(38px,12vw,58px); }

html.mobile-safe-mode .echoes-story { height:300svh; }
html.mobile-safe-mode .echoes-background-video,
html.mobile-safe-mode .echoes-particles { display:none!important; }
html.mobile-safe-mode .echoes-stage { background:radial-gradient(circle at 50% 42%,#101315,#030505 62%,#010202); }
html.mobile-safe-mode .echoes-heading {
  top:74px;left:18px;right:18px;filter:none;
  transform:translateY(calc((1 - var(--echoes-heading-reveal))*20px));
}
html.mobile-safe-mode .echoes-heading h2 { font-size:clamp(40px,13vw,62px); }
html.mobile-safe-mode .echoes-message-field { left:0;right:0;top:160px;bottom:235px; }
html.mobile-safe-mode .echoes-form {
  left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom));width:auto;
  grid-template-columns:1fr;gap:7px;padding:10px 14px;backdrop-filter:none;
  transform:translateY(calc((1 - var(--echoes-form-reveal))*20px));
}
html.mobile-safe-mode .echoes-form label { gap:3px; }
html.mobile-safe-mode .echoes-form input { height:28px; }
html.mobile-safe-mode .echoes-form button { height:40px; }
html.mobile-safe-mode .echoes-about-bridge { height:110svh; }
html.mobile-safe-mode .echoes-about-bridge>div { height:var(--safe-screen); }

/* The detail experience is a two-sided card on desktop. On touch screens the
   second side needs a visible control and a swipe gesture, with smaller type
   so the gallery never covers the primary actions. */
html.mobile-safe-mode .detail-back { top:max(18px,env(safe-area-inset-top));right:14px;height:44px;padding:0 16px; }
html.mobile-safe-mode .detail-hero-copy { left:20px;top:27%;width:calc(100vw - 40px);transform:translateY(-42%); }
html.mobile-safe-mode .detail-overline { margin-bottom:15px;font-size:6px;letter-spacing:.2em; }
html.mobile-safe-mode .detail-hero h1 span { max-width:100%;font-size:clamp(58px,18vw,82px);line-height:.78;letter-spacing:-.045em;overflow-wrap:anywhere; }
html.mobile-safe-mode .detail-hero h1 strong { margin-top:16px;font-size:17px;letter-spacing:.42em; }
html.mobile-safe-mode .detail-cn { margin-top:15px;font-size:16px; }
html.mobile-safe-mode .detail-inline-coordinates { margin-top:18px; }
html.mobile-safe-mode .detail-entry-actions { margin-top:18px;gap:8px; }
html.mobile-safe-mode .detail-more { margin-top:0;padding:10px 14px;font-size:7px;backdrop-filter:none; }
html.mobile-safe-mode .detail-hero-gallery { left:20px;right:20px;bottom:4.5vh;width:auto; }
html.mobile-safe-mode .detail-hero-gallery-card { flex-basis:min(31vw,132px);height:min(34vw,168px);border-radius:14px; }
html.mobile-safe-mode .detail-hero-gallery-nav { margin-top:9px; }
html.mobile-safe-mode .detail-scroll-cue {
  display:flex;left:auto;right:14px;top:max(78px,calc(env(safe-area-inset-top) + 62px));bottom:auto;
  align-items:center;gap:9px;padding:11px 14px;border:1px solid rgba(255,255,255,.38);
  border-radius:999px;background:rgba(5,12,14,.32);transform:none;backdrop-filter:none;
}
html.mobile-safe-mode .detail-scroll-cue span { font-size:6px;letter-spacing:.18em; }
html.mobile-safe-mode .detail-scroll-cue i { width:16px;height:1px;animation:none; }
html.mobile-safe-mode .detail-card-sheet > .detail-media { min-height:100%; }
html.mobile-safe-mode .detail-card-sheet { overscroll-behavior:none; }
html.mobile-safe-mode .detail-card-sheet>.detail-hero { touch-action:pan-x; }
html.mobile-safe-mode .detail-card-sheet>.detail-media { touch-action:none; }
html.mobile-safe-mode .detail-media-heading { left:20px;top:72px; }
html.mobile-safe-mode .detail-media-heading h2 { margin-top:9px;font-size:42px; }
html.mobile-safe-mode .detail-media-feature { left:20px;right:20px;top:190px;width:auto;gap:5px; }
html.mobile-safe-mode .detail-media-feature>span { font-size:62px; }
html.mobile-safe-mode .detail-media-feature p { margin-top:8px; }
html.mobile-safe-mode .detail-video-list {
  left:20px;right:20px;top:365px;bottom:18px;width:auto;max-height:none;
  display:grid;grid-template-columns:1fr;gap:8px;overflow-y:auto;transform:none;-webkit-overflow-scrolling:touch;touch-action:pan-y;
}
html.mobile-safe-mode .detail-hero-gallery-track { touch-action:pan-x; }
html.mobile-safe-mode .detail-video-card { height:104px; }
html.mobile-safe-mode .detail-media-background-image { animation:none; }

html.mobile-safe-mode .projection-glow { filter:none; }
html.mobile-safe-mode .projection-page,
html.mobile-safe-mode .projection-return,
html.mobile-safe-mode .projection-categories,
html.mobile-safe-mode .projection-depth-control { backdrop-filter:none; }
html.mobile-safe-mode .projection-room { will-change:auto; }
html.mobile-safe-mode .projection-wall { box-shadow:inset 0 0 55px rgba(0,0,0,.42); }
html.mobile-safe-mode .projection-panel { transition:none; }
html.mobile-safe-mode .projection-loader { transition:opacity .2s linear,visibility .2s linear; }
html.mobile-safe-mode .projection-drag-hint { display:none; }

@supports (height:100dvh) { html.mobile-safe-mode { --safe-screen:100dvh; } }