instead. */ body{overflow-x:visible} main{overflow-x:clip} /* 5. Hero display type uses the embedded condensed face so line width is deterministic instead of depending on an iPhone font substitution. */ .hero h1{font-family:var(--condensed);font-weight:400;letter-spacing:-.02em; font-stretch:100%} .hero h1 .line-three b{font-family:var(--serif);font-weight:400} .kickback-build{font-family:var(--condensed)!important;font-weight:400} /* 3. Full-screen menu must be able to scroll. */ .menu-panel{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* Pre-existing defect, not introduced by this patch: the Kickback wordmark ran into the frosted metrics bar at every breakpoint (measured 44,368px2 of overlap on the original desktop build). Nudge the headline up and cap its block so the metrics strip always sits clear beneath it. */ .case-art-kickback .kickback-build{ top:16%; max-height:38%; overflow:hidden; } /* 8. Reduced motion, all breakpoints. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } } @media (max-width:720px){ /* 3. Nine menu links reachable at 375x667. */ .menu-panel{ align-items:start; padding-top:calc(6rem + env(safe-area-inset-top)); padding-bottom:calc(2rem + env(safe-area-inset-bottom)); } .menu-links a{font-size:clamp(1.85rem,9vw,3rem)} /* 5. Keep THE SYSTEMS / THE FEELING inside the viewport. */ .hero h1{font-size:clamp(2.55rem,13.5vw,4rem);line-height:.8} /* 6. iPhone safe areas on fixed / edge-anchored chrome. */ .nav{ min-height:calc(64px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)); } .hero{ padding-top:calc(7rem + env(safe-area-inset-top)); padding-bottom:calc(5rem + env(safe-area-inset-bottom)); } .begin-link{bottom:calc(1.3rem + env(safe-area-inset-bottom))} .hero-coordinate{bottom:calc(1.3rem + env(safe-area-inset-bottom))} footer{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))} /* 4b. On phones .visual bleeds 20% past the right edge (inset ... -20% ...). The author compensated for that on .scale-stamp with right:22% but the same override was omitted on .music-stamp and .home-stamp, so their labels were sliced. Apply the established pattern. */ .music-stamp, .home-stamp{right:22%} /* Kickback wordmark vs metrics bar on phones. */ .case-art-kickback .kickback-build{top:13%;max-height:34%} /* 7. Case selector as a swipeable rail. */ .case-index{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78vw; overflow-x:auto; touch-action:pan-x; -webkit-overflow-scrolling:touch; } .case-tab{min-height:150px;scroll-snap-align:start} } /* 4. No sticky chapters on phones or touch devices: let the story flow so nothing is cropped. Desktop keeps the cinematic sticky journey. */ @media (max-width:720px),(pointer:coarse){ .electric-section, .chapter{min-height:auto} .electric-sticky, .chapter-sticky{position:relative;top:auto} .electric-sticky{min-height:max(100svh,700px);height:auto;overflow:clip} .chapter-sticky{ min-height:max(100svh,760px); height:auto; overflow:clip; } /* 8. Reduce mobile animation load. Text reveals, nav transitions and the metric ticker are deliberately preserved. */ .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:#070908f2} .menu-panel, .case-file, .recognition-card{-webkit-backdrop-filter:none;backdrop-filter:none} .home-orbit, .manifesto-orbit>span, .electric-aurora, .homecoming-signal i{animation-duration:24s!important} .music-tape, .club-tape{animation-duration:38s!important} } /* ===== Round 3: mobile chapter art direction (Kiyan export 2026-07-29) ===== Copied from the delivered app/globals.css "Mobile chapter art direction" block. Emitted as its own @media (max-width:720px) block placed after the round-2 phone rules, which is equivalent to appending it to the end of that block and lets the new .visual stage supersede the old right:22% stamp compensation (the new inset removes the 20% bleed that needed it). */ @media (max-width:720px){ /* * Mobile chapter art direction * * The desktop chapter visuals are intentionally oversized and layered through * the copy. On a phone that same composition becomes accidental cropping. * Give every transmission a dedicated visual stage above the narrative. */ .chapter { min-height: max(100svh, 760px); } .chapter-sticky { position: relative; min-height: max(100svh, 760px); overflow: clip; } .chapter-copy { padding-bottom: clamp(3.5rem, 8svh, 5rem); } .visual { inset: 4rem 0 auto; width: 100%; height: clamp(210px, 31svh, 270px); opacity: 0.78; } .music-bars, .wave { width: 100%; height: 24svh; max-height: 215px; opacity: 0.58; } .music-stamp, .origin-copy, .live-score, .scale-stamp, .home-stamp { top: 1.25rem; right: 1.2rem; } .music-stamp span, .origin-copy span, .live-score span, .scale-stamp strong, .home-stamp strong { font-size: clamp(4.2rem, 20vw, 5.4rem); } .music-stamp small, .origin-copy small, .live-score small, .scale-stamp span, .home-stamp span { margin-top: 0.6rem; font-size: 0.48rem; line-height: 1.35; letter-spacing: 0.12em; } .music-tape { left: -1rem; bottom: 0.9rem; max-width: calc(100% + 2rem); overflow: hidden; padding: 0.45rem 0; font-size: 0.62rem; animation: none; transform: rotate(-2deg); } .sun { top: 58%; left: 48%; width: min(42vw, 165px); } .stadium { top: 64%; left: 48%; width: min(78vw, 310px); height: min(24vw, 96px); } .stadium-two { width: min(57vw, 225px); height: min(17vw, 68px); } .pitch-line { top: 61%; left: 46%; width: min(48vw, 190px); } .pitch-line-two { width: min(25vw, 98px); } .club-tape { left: -0.75rem; width: calc(100% + 1.5rem); overflow: hidden; padding: 0.45rem 0; font-size: 0.62rem; animation: none; } .club-tape-one { top: auto; bottom: 1rem; transform: rotate(2deg); } .club-tape-two { display: none; } .signal-timeline { inset: 2.1rem 1.2rem auto; width: auto; height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; gap: 0.7rem; } .signal-timeline > i { top: auto; right: 0; bottom: -0.8rem; left: 0; width: auto; height: 1px; background: linear-gradient( 90deg, transparent, var(--chapter-tone) 12%, var(--chapter-tone) 88%, transparent ); } .signal-timeline span { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding-left: 0; } .signal-timeline span::before { display: none; } .signal-timeline b { font-size: clamp(3.4rem, 17vw, 4.6rem); } .signal-timeline small { max-width: 6.5rem; font-size: 0.45rem; line-height: 1.35; letter-spacing: 0.08em; } .venue-grid { width: min(82vw, 320px); gap: 0.55rem; } .home-orbit { top: 62%; left: 50%; } .home-orbit-one { width: min(76vw, 295px); } .home-orbit-two { width: min(50vw, 195px); } .home-route { top: 65%; left: 50%; width: min(82vw, 320px); gap: 0.45rem; font-size: 0.5rem; } .home-route strong { font-size: 1.8rem; } /* Keep the SCT partner hierarchy legible instead of stacking three assets. */ .sct-run { top: 1.35rem; left: 1.1rem; max-width: 43%; font-size: 0.5rem; line-height: 1.35; } .sct-directv { top: 1.25rem; right: 1rem; width: 92px; } .sct-clubs { top: 5rem; right: 1rem; grid-template-columns: repeat(5, 30px); gap: 0.18rem; } .sct-clubs img { width: 30px; height: 30px; } } /* Landscape phones. Declared last so it wins over the max-width:720px sizing above at equal specificity: a 375px-tall viewport needs much smaller menu type than a 375px-wide portrait one, and the nine links must still fit the scrollable panel. */ @media (max-height:520px){ .menu-panel{ align-items:start; padding-top:calc(4.2rem + env(safe-area-inset-top)); padding-bottom:calc(1.4rem + env(safe-area-inset-bottom)); } .menu-links a{ font-size:clamp(1.05rem,4vh,1.6rem); padding:.34rem 0; grid-template-columns:2rem 1fr; } .menu-label{display:none} .nav{min-height:calc(52px + env(safe-area-inset-top))} }