/* Responsive layouts, including narrow foldable cover screens. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:1100px){
 :root{--header-height:64px}
 .site-header{height:64px;min-height:64px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
 .site-header img{width:108px;height:auto}
 .site-nav{display:none}
 #growth .growth-stage{padding-top:96px;min-height:560px}
 #growth .growth-stage>h2{font-size:clamp(30px,5.2vw,46px)!important;line-height:1.12!important;margin-left:24px;margin-right:24px}
 .growth-event p{font-size:16px;line-height:1.45}
 #geography{padding:88px 20px 50px;min-height:0;height:auto}
 #geography .intro{display:block;padding:0}
 #geography h2{font-size:clamp(32px,5.3vw,48px)!important;line-height:1.12!important}
 .map-handwritten{width:min(350px,90%);margin-top:-8px;margin-bottom:-10px}
 #geography .stat{display:flex;align-items:center;gap:18px;margin-top:24px;padding:0;border:0}
 #geography .stat strong{font-size:54px!important;line-height:1!important;white-space:nowrap}
 #geography .stat p{font-size:14px!important;line-height:1.4!important;margin:0;max-width:180px}
 #map{width:100%;margin:36px 0 0;padding:0;min-width:0}
 #map svg{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1200/580}
 #achievements{padding:88px 24px 70px;min-height:0;gap:34px}
 #achievements>h2{font-size:clamp(32px,5.3vw,48px)!important;line-height:1.12!important}
 #achievements .achievement-handwritten{width:min(380px,100%);height:auto;max-width:100%;margin-top:0}
 #achievements .achievement-grid{gap:16px}
 #achievements .achievement-grid article{min-width:0;padding:26px;min-height:260px}
 #achievements .achievement-grid strong{font-size:clamp(62px,9vw,86px)!important}
 #achievements .achievement-grid .stat-value{gap:12px}
 #achievements .achievement-grid .stat-value>span{font-size:clamp(23px,3.7vw,34px)}
 #achievements .achievement-grid p{font-size:18px!important;line-height:1.4!important;overflow-wrap:normal}
 #moments.memories{height:auto!important;min-height:0!important;padding:78px 24px 72px;overflow:clip}
 #moments .memories-stage{position:relative;top:auto;height:auto;min-height:0;margin-bottom:56px}
 #moments .memories-heading{position:relative;top:auto;transform:none!important;width:100%;will-change:auto}
 #moments .memories-heading h2{font-size:clamp(40px,10.7vw,86px)!important;line-height:1.03!important;letter-spacing:-.025em!important}
 #moments .memories-heading>span{margin-top:22px}
 #moments .memories-subtitle-script{width:min(420px,100%);max-width:100%}
 #moments>.photo-stack{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px;align-items:start}
 #moments .photo-stack>.memory-photo{position:relative;inset:auto!important;width:100%!important;max-width:none;margin:0;padding:8px 8px 0;transform:rotate(-3deg)!important;will-change:auto;min-width:0}
 #moments .photo-stack>.memory-photo:nth-child(even){transform:rotate(3deg)!important;margin-top:24px}
 #moments .memory-photo figcaption{height:28px;min-height:28px;padding:0}
 #moments .photo-stack>.memory-photo:last-child{grid-column:1/-1;width:58%!important;justify-self:center}
 #you{height:auto;min-height:70svh;padding:100px 24px}
 #you h2{font-size:clamp(38px,8vw,70px)!important;line-height:1.08!important}
 #you .contribution-message{font-size:clamp(18px,3.2vw,26px);line-height:1.4}
 #postcards{height:auto;min-height:0;padding:88px 24px 32px;gap:28px}
 #postcards>h2{font-size:clamp(30px,5.3vw,48px)!important;line-height:1.15!important}
 #postcards>h2 br{display:none}
 #postcards .postcards-intro{font-size:16px;line-height:1.5;max-width:100%}
 .single-postcard{width:min(100%,440px)}
 .single-postcard .ready-postcard>img{width:100%;height:auto}
 .single-postcard .ready-postcard-bottom{justify-content:center;margin-top:24px}
 .postcard-download{min-height:48px;padding:14px 24px;font-size:14px}
 .site-footer{width:100%;gap:22px;align-items:flex-start;flex-direction:column;margin-top:34px;padding-top:24px}
 .site-footer .note{font-size:13px;line-height:1.5}
}
@media(max-width:1100px){
 #details .facts-stage{height:100svh;min-height:560px}
 #details .fact-scene{padding:96px 20px 100px}
 #details .fact-statement{font-size:clamp(26px,6.6vw,42px);width:100%;transform:none!important;margin:0}
 #details .fact-statement>span{max-width:100%;white-space:normal;text-wrap:balance;line-height:1.13}
 #details .fact-description,#details .fact-launch .fact-description{font-size:14px;line-height:1.5;white-space:normal;max-width:100%;padding:0;margin-top:24px;text-wrap:balance}
 #details .fact-description br{display:none}
 #details .fact-script{max-width:88%;height:1.5em;margin:4px 0}
 #details .fact-space .flag-script{line-height:1.074074;max-width:none}
 #details .fact-launch .launch-script{line-height:1.45;max-width:none}
 #details .fact-intro h2{font-size:clamp(30px,7.2vw,46px)!important;max-width:100%;line-height:1.13}
 #details .cosmonaut-sticker,#details .earth-sticker,#details .palette-sticker,#details .tram-sticker{left:5%;top:9%;width:26%;height:20%;max-height:20%;max-width:28%}
 #details .rocket-sticker,#details .sensor-sticker,#details .goal-sticker,#details .art-sticker{right:5%;bottom:5%;top:auto;width:27%;height:21%;max-height:21%;max-width:30%}
 #details .fact-space .flag-photo-sticker{right:6%;bottom:5%;width:36%;max-width:180px;height:auto;max-height:none;border-width:4px}
 #details .fact-hockey .hockey-sticker{left:5%;top:8%;bottom:auto;width:27%;height:21%;max-width:30%;max-height:21%}
 #details .fact-backdrop{left:4%;bottom:2%;font-size:42vw;line-height:.95}
 #details .fact-hockey .fact-backdrop{font-size:41vw}
 #growth .growth-event{flex-basis:268px;padding-right:32px}
 #growth .growth-event-copy{right:32px}
 #growth .growth-event:nth-of-type(odd) .growth-event-copy{height:175px}
 #growth .growth-event h3{font-size:42px}
 #growth .growth-event p{font-size:15px}
 #growth .growth-track{padding-left:24px;padding-right:24px}
 #achievements .achievement-grid{grid-template-columns:1fr}
 #achievements .achievement-grid article,#achievements .achievement-grid article:nth-child(3),#achievements .achievement-grid article:nth-child(4){grid-column:auto;min-height:240px}
 #achievements .achievement-grid strong{font-size:86px!important}
 #achievements .achievement-grid .stat-value>span{font-size:32px}
}
@media(max-width:360px){
 #growth .growth-stage>h2{font-size:29px!important}
 #achievements,#postcards{padding-left:18px;padding-right:18px}
 #achievements .achievement-grid article{padding:24px;min-height:230px}
 #achievements .achievement-grid strong{font-size:76px!important}
 #achievements .achievement-grid .stat-value>span{font-size:28px}
 #moments.memories{padding-left:22px;padding-right:22px}
 #moments>.photo-stack{gap:28px 18px}
 #details .fact-description{font-size:13px}
}
@media(max-width:1000px) and (max-height:560px) and (orientation:landscape){
 #details .facts-stage{min-height:0;height:100svh}
 #details .fact-scene{padding:64px 70px 30px}
 #details .fact-statement{font-size:clamp(24px,3.5vw,34px);width:82%;transform:none!important}
 #details .fact-description{font-size:12px;line-height:1.4;white-space:normal;margin-top:14px}
 #details .fact-sticker{max-height:27%;max-width:17%}
 #details .fact-space .flag-photo-sticker{width:19%;bottom:5%}
 #growth .growth-stage{min-height:0;padding-top:72px}
 #growth .growth-stage>h2{font-size:28px!important}
 #growth .growth-window{margin-top:12px;height:calc(100% - 60px)}
 #growth .growth-event:nth-of-type(odd) .growth-event-copy{height:110px;bottom:calc(50% + 14px)}
 #growth .growth-event-copy{top:calc(50% + 14px)}
 #growth .growth-event h3{font-size:30px;margin-bottom:8px}
 #growth .growth-event p{font-size:12px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){#moments .memories-heading{transform:none!important}}

@media(max-width:700px){#details .fact-space .flag-script{font-size:1.7em;line-height:.852941}#details .fact-launch .launch-script{font-size:1.2em;line-height:1.208333}}
@media(max-width:320px){
 #achievements .achievement-grid strong{font-size:64px!important}
 #achievements .achievement-grid .stat-value>span{font-size:24px}
 #achievements .achievement-grid p{font-size:17px!important}
 #moments .memories-heading h2{font-size:34px!important}
 #moments>.photo-stack{grid-template-columns:1fr;gap:32px}
 #moments .photo-stack>.memory-photo,#moments .photo-stack>.memory-photo:last-child{grid-column:auto;width:88%!important;justify-self:center;margin-top:0}
 #details .fact-statement{font-size:24px}
 #details .fact-description{font-size:12px}
 #postcards>h2{font-size:28px!important}
}
@media(max-width:1100px) and (prefers-reduced-motion:reduce){
 #details .facts-stage{position:relative;height:auto;min-height:0}
 #details .facts-window{overflow:visible}
 #details .facts-track{display:block;width:100%;transform:none!important}
 #details .fact-scene{width:100%;height:100svh;min-height:620px}
 #growth .growth-stage{height:auto;min-height:0}
 #growth .growth-event-copy,#growth .growth-event:nth-of-type(odd) .growth-event-copy{position:static;height:auto}
}
/* Keep the rotated event photograph within the desktop canvas too. */
@media(min-width:1101px){#moments .photo-c{right:3%}}
@media(max-width:1000px) and (max-height:560px) and (orientation:landscape){
 #growth.growth-story{height:auto;min-height:0}
 #growth .growth-stage{position:relative;height:auto;min-height:0;padding:80px 0 48px}
 #growth .growth-window{height:auto;margin:30px 24px 0;overflow:visible}
 #growth .growth-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;width:auto;padding:0;transform:none!important}
 #growth .growth-event{height:auto;padding:0;min-width:0}
 #growth .growth-event-copy,#growth .growth-event:nth-of-type(odd) .growth-event-copy{position:static;height:auto}
 #growth .growth-event p{color:#616987}
 #growth .growth-line,#growth .growth-dot{display:none}
}
