/* Responsive layout: content can grow, navigation stays outside reading space. */
/* Keep the scene outside document scrolling, with a stable mobile crop.
   The large viewport does not resize as browser bars collapse on first scroll. */
body{isolation:isolate}
.scenery{position:fixed;top:0;left:0;right:0;bottom:auto;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none}
.site-shell{position:relative;z-index:1}
html{scroll-padding-top:0;scroll-snap-type:y proximity}
.chapter{scroll-margin-top:0}
.section-content,.about-grid>*,.about-side>*,.project-grid>*,.notes-grid>*,.project-body,.milestone>*,.hero-copy{min-width:0}
.social-links{flex-wrap:wrap}
.email-line{flex-wrap:wrap;overflow-wrap:anywhere}
button,a,summary{scroll-margin-block:110px}
.icon-button{min-width:44px;min-height:44px}
dialog{max-width:calc(100vw - 32px);overflow:auto}
dialog h2{font-size:clamp(28px,5vw,40px);overflow-wrap:anywhere}
@media(max-width:1100px){
 .about-grid{grid-template-columns:1fr}
 .about-side{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
 .project-grid{grid-template-columns:1fr}
 .project-card{display:grid;grid-template-columns:minmax(200px,.75fr) minmax(0,1.25fr)}
 .project-art{height:calc(100% - 20px);min-height:230px}
 .project-body{padding:24px}.project-body p{min-height:0;font-size:14px}
 .project-body h3{font-size:28px}.project-body h3 br{display:none}
 .notes-grid{grid-template-columns:1fr}
 .featured-note h3{font-size:40px}
 .milestone{grid-template-columns:60px minmax(0,1fr) auto;gap:16px}
 .milestone-number{display:none}.badge-seal{width:54px;height:54px;font-size:29px}
 .milestone h3{font-size:23px}
 .top-caption{display:none}
 .section-heading.split{flex-wrap:wrap;align-items:flex-start}
 .split>p{max-width:none}
}
@media(max-width:700px), (max-width:950px) and (max-height:500px){
 :root{--phone-top:142px;--phone-bottom:calc(102px + env(safe-area-inset-bottom,0px))}
 html{scroll-snap-type:y proximity}
 body{font-size:15px}
 .topbar{top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;height:56px;padding:0 14px;border-radius:16px}
 .brand{font-size:25px}.top-right{gap:7px;font-size:11px}.top-right .micro{font-size:9px}.top-right .icon-button{margin-left:0}
 .bottom-controls{top:calc(75px + env(safe-area-inset-top,0px));bottom:auto;left:12px;right:12px;transform:none;gap:0;align-items:stretch}
 .theme-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:2px;width:100%;padding:4px;border-radius:14px}
 .theme-controls button{min-width:0;min-height:44px;padding:6px 3px;gap:4px;font-size:10px;justify-content:center;letter-spacing:0}
 .theme-controls button span{font-size:15px}.control-divider,.mode-caption{display:none}
 .section-rail{left:12px;right:12px;top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:none;width:auto;max-width:460px;margin-inline:auto;flex-direction:row;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding:6px;border-radius:21px}
 .section-rail:before,.rail-heading,.rail-counter{display:none}
 .section-rail a{width:100%;height:55px;min-width:0;border-radius:14px;display:flex;flex-direction:column;justify-content:center;gap:4px}
 .section-rail a svg{width:20px;height:20px;flex-shrink:0}
 .section-rail a:before{left:calc(50% - 7px);top:auto;bottom:1px;width:14px;height:2px;transform:scaleX(.3)}
 .section-rail a.active:before{transform:scaleX(1)}
 .section-rail .rail-label{position:static;transform:none!important;opacity:1;visibility:visible;padding:0;border:0;background:none;box-shadow:none;color:inherit;font-size:8px;font-weight:600;line-height:1.1;letter-spacing:0;white-space:nowrap}
 .section-rail .rail-label:before{display:none}
 .section-rail a[href="#achievements"] .rail-label{font-size:0}
 .section-rail a[href="#achievements"] .rail-label:after{content:"Awards";font-size:8px}
 .section-rail a:hover svg{transform:none}
 .chapter{padding:calc(var(--phone-top) + env(safe-area-inset-top,0px)) 20px var(--phone-bottom);min-height:100svh;align-items:flex-start}
 .intro{padding-top:calc(var(--phone-top) + 20px + env(safe-area-inset-top,0px));min-height:100svh;overflow:visible}
 .intro-layout{width:100%;display:block}
 .hero-copy{width:100%;max-width:340px}
 .hero-copy .eyebrow{font-size:9px;letter-spacing:1px}.hero-copy .hello{font-size:14px;margin:20px 0 14px}
 .hero-copy h1{font-size:clamp(38px,10vw,54px);line-height:1.05}
 .hero-copy .hero-description{font-size:14px;line-height:1.7;margin-top:22px}
 .hero-copy .hero-actions{gap:10px;margin-top:24px}
 .hero-copy .hero-actions .button{min-height:46px;font-size:12px;padding:11px 14px}
 .hero-copy .hero-foot{font-size:8px;letter-spacing:.7px;line-height:1.8;margin-top:20px}
 .chapter-footer{display:none}
 .section-heading{width:100%;padding:22px;margin-bottom:20px;border-radius:22px}
 .section-heading.split{flex-direction:column;gap:16px}
 .section-heading h2{font-size:clamp(32px,7.5vw,46px)}
 .section-heading .eyebrow{font-size:9px;letter-spacing:1px}
 .split>p{font-size:14px}.section-heading .button{font-size:12px;min-height:44px}
 .about-grid,.about-side,.notes-grid{grid-template-columns:minmax(0,1fr);gap:18px}
 .about-story,.focus-card,.quote-card,.featured-note{padding:24px;border-radius:22px}
 .about-story h3,.focus-card h3{font-size:28px}
 .about-story p,.featured-note>p{font-size:15px;line-height:1.75}
 .tag-list span{font-size:12px}.quote-card{min-height:210px}.quote-card blockquote{font-size:29px}
 .project-card{display:block}.project-art{height:200px;min-height:0}
 .project-body{padding:16px 24px 26px}.project-body h3{font-size:28px}.project-body p{font-size:15px;line-height:1.7}
 .project-body .tag-list span{font-size:10px;padding:4px 8px}.project-link{min-height:44px;font-size:13px}
 .section-end-link{font-size:14px;line-height:1.6}
 .milestone-panel{padding:4px 20px}
 .milestone{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:24px 0}
 .badge-seal{height:42px;width:42px;font-size:24px}.milestone h3{font-size:22px;line-height:1.2}
 .milestone .eyebrow{font-size:9px;letter-spacing:.8px}.earned{grid-column:2;justify-self:start;font-size:9px}
 .closing-note{text-align:left;font-size:17px}
 .featured-note h3{font-size:clamp(32px,8vw,42px)}
 .note{padding:24px}.note strong{font-size:24px}.note small{font-size:9px;letter-spacing:1px}.note summary{min-height:44px}
 .note-content{font-size:15px;line-height:1.75}.note-aside{font-size:16px;gap:12px}
 .connect-panel{padding:30px 22px;border-radius:24px}
 .connect-panel h2{font-size:clamp(38px,10vw,56px)}.connect-panel .eyebrow{font-size:9px;letter-spacing:1px}
 .connect-panel>p:not(.eyebrow){font-size:15px}.connect-panel>.button{min-height:48px}
 .email-line{font-size:13px;gap:10px}.email-line .text-button{min-height:44px;padding:8px;font-size:12px}
 .social-links{gap:8px 20px;font-size:13px;line-height:1.5}.social-links a{min-height:44px;display:inline-flex;align-items:center}
 .page-footer{flex-direction:column;align-items:center;text-align:center;gap:10px;font-size:11px}.page-footer a{padding:8px;min-height:44px}
 dialog{padding:26px 22px;border-radius:22px;max-height:calc(100dvh - 32px)}dialog h2{margin-top:34px;font-size:32px}dialog>p:not(.eyebrow){font-size:15px}
 .toast{left:16px;right:16px;bottom:calc(90px + env(safe-area-inset-bottom,0px));text-align:center}
 .js .loader{padding:24px 20px}.loader-top{gap:14px}.loader-top .micro{font-size:7px;letter-spacing:1px;text-align:right;max-width:150px}
 .loader-center{width:100%}.loader-center h1{font-size:clamp(44px,13vw,70px);letter-spacing:-2px}.loader-center .eyebrow{font-size:9px;letter-spacing:1px}
 .loader-bottom{gap:15px;flex-wrap:wrap;font-size:8px;letter-spacing:.5px}.loader-center .text-button{min-height:44px;font-size:13px}
 button,a,summary{scroll-margin-block:145px 95px}
}
@media(max-width:360px){
 .chapter{padding-left:16px;padding-right:16px}.hero-copy .hero-actions{flex-direction:column;align-items:flex-start}
 .section-rail{left:8px;right:8px;gap:1px;padding:5px}.section-rail .rail-label{font-size:7px}
 .topbar{left:10px;right:10px;padding:0 12px}.top-right{font-size:10px;gap:5px}.top-right>.live-dot{display:none}
 .theme-controls button{font-size:9px}.about-story,.focus-card,.quote-card,.featured-note,.note{padding:20px}
}
@media(max-height:500px) and (max-width:950px){
 html{scroll-snap-type:none}
 .chapter{min-height:auto;align-items:flex-start}
 .intro{min-height:100svh}
 .js .loader{padding:14px 20px;overflow:auto}.orbit{display:none}.loader-center h1{font-size:38px;margin:12px 0}.loader-center #load-status{margin-top:10px}.load-track{margin-top:12px}.loader-center .text-button{margin-top:8px}.loader-bottom{margin-top:10px}
}
@media(min-width:600px) and (max-width:950px) and (max-height:500px){
 :root{--phone-top:88px;--phone-bottom:90px}
 .topbar{right:auto;width:235px;height:54px;padding:0 12px}
 .top-right>.live-dot,.top-right .micro{display:none}
 .bottom-controls{top:calc(10px + env(safe-area-inset-top,0px));left:260px}
 .section-rail a{height:46px}
 .section-heading h2{font-size:34px}
 button,a,summary{scroll-margin-block:88px 80px}
}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}}