/* Compact phone/tablet composition. Load after layout-review.css.
   Chapter links sit directly below the logo and leave with the header on scroll. */
@media(max-width:900px){
 :root{--section:clamp(16px,4.8vw,24px);--mobile-content-gutter:max(var(--section),env(safe-area-inset-left))}
 html{scroll-padding-top:28px}
 .section{padding-left:var(--mobile-content-gutter);padding-right:max(var(--section),env(safe-area-inset-right));padding-top:60px;padding-bottom:60px}
 .section>*{min-width:0}
 .site-header{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:32px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px}
 .site-header .brand{grid-column:1;grid-row:1;width:clamp(184px,55vw,230px);max-width:100%;min-width:0;flex:initial;align-self:center}
 .site-header .brand img{width:100%;height:auto}
 .site-header .header-actions{grid-column:2;grid-row:1;flex:none;gap:0;align-self:center}
 .site-header .header-actions>.button{min-height:44px;max-width:88px;font-size:10px;line-height:1.4;padding:8px 9px;gap:6px}
 .site-header .header-actions>.button>span{font-size:18px;line-height:1}
 .site-header .launch-pill{display:none}
 .site-header .chapter-rail{grid-column:1/-1;grid-row:2;position:static;inset:auto;transform:none;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;width:100%;max-width:none;max-height:none;overflow:visible;margin:0;padding:3px;gap:3px;border-radius:10px;z-index:auto;background:linear-gradient(160deg,#1a2e457d,#040b17d6);border-color:#97bce63d;box-shadow:inset 0 1px 0 #d8e7ff35,0 8px 20px #0004;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
 .site-header .chapter-rail a{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 6px;flex:1 1 0;width:auto;min-width:44px;min-height:44px;height:auto;margin:0;padding:8px 5px;border-radius:7px;font-size:9px;line-height:1.3;color:#c0cedf}
 .site-header .chapter-rail a>span{display:block;font-size:9px;line-height:1.2;letter-spacing:.02em;flex:none}
 .site-header .chapter-rail em{display:block;position:static;inset:auto;opacity:1;transform:none;writing-mode:horizontal-tb;text-orientation:mixed;pointer-events:none;font:500 11px/1.3 Geist,system-ui,sans-serif;letter-spacing:0;white-space:normal;min-width:0;overflow-wrap:anywhere;color:inherit}
 .site-header .chapter-rail a:hover em,.site-header .chapter-rail a:focus-visible em{transform:none}
 .site-header .chapter-rail a.active{color:#f0d7ae;background:linear-gradient(155deg,#9bbce92e,#8e6da31a);box-shadow:inset 0 0 0 1px #cfdeed29}
 .site-header .chapter-rail a:focus-visible{outline:2px solid #b6dcff;outline-offset:-3px}
 .hero{padding-top:180px;padding-bottom:345px;min-height:0;align-items:flex-start}
 .hero-copy{width:100%;max-width:580px;margin-left:0}
 .hero h1{font-size:clamp(30px,5.7vw,48px);line-height:1.1;letter-spacing:-.04em;margin-bottom:22px}
 .hero-copy>.eyebrow{font-size:10px;line-height:1.7;gap:8px;margin-bottom:18px;letter-spacing:.03em}
 .hero-copy>.eyebrow .line{width:15px}
 .hero .hero-intro{font-size:15px;line-height:1.75;gap:.3em;margin-bottom:22px;max-width:36ch}
 .hero .hero-actions{align-items:flex-start;gap:8px 14px}
 .hero-actions>.button.primary{min-height:48px;font-size:14px;padding:12px 15px;gap:14px}
 .hero .hero-actions .button.subtle{min-height:44px;font-size:13px;padding:9px 0;gap:9px;flex-wrap:wrap}
 .hero .hero-actions .button.subtle small{margin-left:0;font-size:10px;white-space:normal}
 .hero .scene-hero{inset:auto auto 50px 4%;width:105%;height:300px;opacity:1}
 .hero-bottom{left:var(--mobile-content-gutter);right:var(--section);bottom:25px}
 .hero-bottom>.mono,.hero-side{display:none}
 .section-top{align-items:flex-start;gap:12px;margin-bottom:25px;padding-bottom:15px}
 .section-top>.mono{font-size:9px;line-height:1.65;letter-spacing:.02em;max-width:47%;text-align:right;overflow-wrap:anywhere}
 .section-index{font-size:10px;line-height:1.6;letter-spacing:.03em;white-space:normal}
 .countdown-section{padding-top:55px;padding-bottom:55px}
 .countdown-intro h2{font-size:clamp(32px,6vw,46px);line-height:1.12}
 .countdown-intro{gap:22px}
 .countdown-aside{max-width:none;text-align:left;margin-top:0}
 .countdown-manifesto{font-size:17px;line-height:1.55;margin-bottom:12px}
 .countdown{gap:10px;margin-top:25px}
 .countdown>.time-instrument{min-height:clamp(145px,24vw,190px)}
 .countdown .time-reading{gap:9px;padding:12px 6px}
 .countdown .time-reading>small{font-size:10px;letter-spacing:.06em;line-height:1.6}
 .countdown-caption{font-size:14px;line-height:1.7}
 .potential{padding-top:60px}
 .potential-grid{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 .chapter-copy h2{font-size:clamp(30px,5.5vw,44px);line-height:1.12;margin-bottom:22px}
 .chapter-copy p:not(.eyebrow){font-size:15px;line-height:1.8}
 .chapter-copy{max-width:580px}
 .ascii-world,.sphere-stage{width:100%;max-width:440px;margin:0 auto}
 .sphere-stage .world-caption{font-size:10px;line-height:1.7;letter-spacing:.04em;padding:5px 0}
 .potential .word-reveal-wide{height:clamp(105px,23vw,180px);margin-top:10px}
 .potential .word-line{font-size:10px;gap:6px;letter-spacing:0;line-height:1.8;flex-wrap:wrap}
 .potential .word-line i{font-size:12px}
 .people .people-heading{margin-bottom:24px}
 .people .people-heading h2{font-size:clamp(.875rem,2.8vw,1.6rem);letter-spacing:-.04em;line-height:1.45;margin-bottom:16px}
 .people .people-heading>p:last-child{font-size:15px;line-height:1.8}
 .people-art-grid{grid-template-columns:1fr;padding:14px;gap:10px}
 .people-art-grid .connection-bottom{grid-column:auto;gap:12px;align-items:flex-start;flex-wrap:wrap}
 .people-art-grid .connection-bottom p{font-size:14px;line-height:1.7;margin-bottom:0}
 .people-art-grid .connection-bottom .mono,.people-art-grid .mono{font-size:10px;line-height:1.7;letter-spacing:.03em}
 #progress .progress-heading{display:block;gap:18px;margin-bottom:24px}
 #progress .progress-heading h2{font-size:clamp(28px,4.7vw,38px);line-height:1.14;letter-spacing:-.035em}
 #progress .progress-heading>p{max-width:42ch;margin:16px 0 0;font-size:15px;line-height:1.75}
 #progress .observatory{padding:12px;border-radius:18px}
 #progress .preview-toolbar{padding:3px 2px 17px;gap:12px;flex-wrap:wrap;align-items:flex-start}
 #progress .preview-title-group{gap:6px}
 #progress .preview-title-group>.mono{font-size:10px;line-height:1.6;letter-spacing:.04em;gap:7px}
 #progress .preview-subtitle{font-size:14px;line-height:1.65}
 #progress .preview-toolbar>.opening-copy{font-size:10px;line-height:1.6;white-space:normal;letter-spacing:.03em}
 #progress .observatory-grid{grid-template-columns:minmax(0,1fr);gap:14px}
 #progress .city-feature{min-width:0}
 #progress .city-feature .city-stage{min-height:165px;aspect-ratio:1.8;max-height:280px}
 #progress .city-copy{padding:20px;min-width:0}
 #progress .city-copy .card-kicker{font-size:10px;line-height:1.65;letter-spacing:.02em;margin-bottom:12px;overflow-wrap:anywhere}
 #progress .city-copy h3{font-size:clamp(25px,4.5vw,33px);line-height:1.16;margin-bottom:15px}
 #progress .city-copy .tease{font-size:14px;line-height:1.75;margin-bottom:20px}
 #progress .city-copy .scene-note{font-size:10px;line-height:1.7;letter-spacing:0;overflow-wrap:anywhere;margin-top:15px}
 #progress .support-previews{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:14px}
 #progress .observatory .preview-card{padding:19px;min-height:275px;border-radius:14px}
 #progress .observatory .preview-card h3{font-size:25px;line-height:1.18;margin-bottom:14px}
 #progress .observatory .preview-card .card-kicker{font-size:10px;line-height:1.6;letter-spacing:.02em;margin:80px 0 12px}
 #progress .observatory .cube-stage{width:48%;height:115px;top:3px;right:5px;max-width:155px}
 #progress .contribution-mark{top:15px;right:19px;width:62px;height:62px}
 #progress .contribution-mark span{font-size:53px}
 #progress .observatory .preview-card .tease,#progress .preview-tease-copy{font-size:14px;line-height:1.75;margin-bottom:18px}
 #progress .city-copy .card-action,#progress .observatory .preview-card .card-action{min-height:44px;font-size:14px;line-height:1.5;gap:12px;padding-top:12px;white-space:normal}
 #progress .preview-bottom{display:block;padding:14px 2px 0}
 #progress .preview-bottom .preview-footnote{font-size:13px;line-height:1.75;margin-bottom:10px}
 #progress .technical-link{font-size:14px;line-height:1.6;gap:12px;min-height:44px;text-align:left;white-space:normal}
 #notify{padding-bottom:0}
 #notify .invitation-shell{grid-template-columns:minmax(0,1fr);padding:20px;gap:22px;border-radius:20px}
 #notify .invitation-copy h2{font-size:clamp(30px,5vw,42px);line-height:1.1;margin-bottom:19px}
 #notify .invitation-copy>p:not(.eyebrow){font-size:15px;line-height:1.8}
 #interest-form{padding:19px 16px;gap:20px;border-radius:15px}
 #interest-form .form-header{gap:12px;padding-bottom:15px}
 #interest-form .form-header h3{font-size:24px;line-height:1.2}
 #interest-form .form-header p{font-size:14px;line-height:1.7}
 #interest-form .form-header .mono{font-size:10px;line-height:1.65;letter-spacing:.04em}
 #interest-form .form-header-mark{display:none}
 #interest-form .form-step-heading,#interest-form .consent-heading{gap:8px;flex-wrap:wrap}
 #interest-form .form-step-heading .field-label,#interest-form legend{font-size:14px;line-height:1.6}
 #interest-form .form-step-number{font-size:10px;line-height:1.6;letter-spacing:.03em}
 #interest-form .email-field{min-height:54px;padding:8px 11px;gap:8px}
 #interest-form .email-field input{min-height:38px;font-size:16px;line-height:1.5}
 #interest-form .interest-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 #interest-form .interest-options span{min-height:44px;padding:9px 10px;font-size:14px;line-height:1.5;gap:6px;overflow-wrap:anywhere}
 #interest-form .consent-panel{padding:14px 12px;gap:13px}
 #interest-form .consent,#interest-form .consent.optional{font-size:14px;line-height:1.7;gap:9px}
 #interest-form .submit{font-size:14px;min-height:50px;line-height:1.6;padding:12px 14px;gap:14px}
 .footer{margin-top:60px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-bottom:0}
 .footer .footer-scene-heading{margin-bottom:-35px}
 .footer .footer-scene-heading h2{font-size:clamp(.875rem,2.6vw,1.5rem);letter-spacing:.06em;line-height:1.5}
 .footer .footer-scene-heading>p:last-child{font-size:14px;line-height:1.7}
 .footer .whale-stage{width:100vw;margin:0 0 10px calc(-1*var(--mobile-content-gutter));height:clamp(275px,65vw,440px)}
 .footer .footer-brand{font-size:clamp(40px,8vw,66px);margin-bottom:17px}
 .footer-main>p{font-size:14px;line-height:1.8}
 .footer .contact-link{font-size:14px;line-height:1.8;gap:10px;padding-top:5px;padding-bottom:5px;min-height:44px}
 .footer .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 12px;margin:0;gap:20px 14px;border-radius:13px}
 .footer-links>div:last-child{grid-column:1/-1;margin-top:0}
 .footer .footer-links>div>h3{font-size:11px;line-height:1.7;letter-spacing:.03em;margin-bottom:7px}
 .footer-links a,.footer-links button{font-size:14px;line-height:1.6;min-height:44px}
 .footer-bottom{margin-top:12px;padding-top:18px;padding-bottom:calc(150px + env(safe-area-inset-bottom));gap:14px;font-size:12px;line-height:1.8}
 .ocean-caption-bar{align-items:flex-start;flex-direction:column;gap:10px;margin:0 0 12px}
 .ocean-caption-copy .mono{font-size:10px;letter-spacing:.04em;line-height:1.7}
 .ocean-hint{font-size:14px;line-height:1.7}
 .ocean-actions{gap:8px 12px;flex-wrap:wrap}
 .ocean-replay{min-height:44px;font-size:14px;white-space:normal;text-align:left;padding:8px 0}
 .sound-dock{max-width:calc(100vw - 24px);bottom:calc(10px + env(safe-area-inset-bottom));gap:3px;padding:0 6px;display:flex;flex-wrap:nowrap;justify-content:center;isolation:isolate;background:transparent;border:0;border-radius:10px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
 .sound-dock::before{content:'';position:absolute;inset:6px 0;z-index:-1;border:1px solid #98b9da36;border-radius:9px;background:linear-gradient(150deg,#142338e8,#050a14ed);box-shadow:inset 0 1px 0 #d5e7ff20,0 5px 18px #0006;pointer-events:none}
 .sound-dock::-webkit-scrollbar{display:none}
 .sound-dock button{flex:0 0 auto;min-width:44px;min-height:44px;padding:5px 6px;font-size:10px;line-height:1.4;white-space:nowrap;gap:6px}
 .sound-dock .equalizer{width:13px;gap:1px}
 .sound-dock .dock-divider{height:10px}
 .sound-dock #replay{font-size:19px}
 .modal{width:min(620px,calc(100vw - 28px));max-height:calc(100svh - 32px);padding:30px 22px;overflow:auto}
 .modal h2{font-size:clamp(28px,5vw,36px);line-height:1.15}
 .modal>p{font-size:15px;line-height:1.8}
}
@media(max-width:600px){
 #progress .support-previews{grid-template-columns:minmax(0,1fr)}
 #progress .observatory .preview-card{min-height:0;padding:18px}
 #progress .observatory .preview-card .card-kicker{margin-top:85px}
 #progress .city-copy{padding:18px}
 #progress .city-feature .city-stage{min-height:150px;aspect-ratio:1.5}
 #notify .invitation-shell{padding:14px;gap:22px}
 #interest-form{padding:16px 12px}
}
@media(max-width:420px){
 #interest-form .interest-options{grid-template-columns:minmax(0,1fr)}
 #progress .observatory{padding:10px}
 #progress .city-copy,#progress .observatory .preview-card{padding:16px}
 #progress .city-copy h3,#progress .observatory .preview-card h3{font-size:24px}
}
@media(max-width:900px) and (max-height:550px) and (orientation:landscape){
 .hero{padding-top:170px;padding-bottom:265px}
 .hero .scene-hero{height:235px;bottom:28px;left:14%;width:90%}
 .hero h1{font-size:36px}
 .site-header{top:24px}
 .footer .whale-stage{height:290px}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
 .chapter-rail a,.chapter-rail em{transition:none}
}