/* Slightly larger UI, with responsive sizes instead of scaling the whole page. */
html{font-size:17px}
.scene{height:850px}
.topbar{height:116px}
.brand-mark{width:56px;height:56px;font-size:30px}
.brand-text{font-size:20px}
.brand-text small{font-size:10px}
.status,.top-contact{font-size:11px}
.top-contact{padding:15px 20px}
.hero{min-height:675px;padding-top:50px;padding-bottom:90px;gap:35px}
.hero h1{font-size:clamp(3.6rem,6vw,7rem)}
.hero-intro{font-size:19px;line-height:1.72;max-width:570px}
.eyebrow{font-size:12px}
.button{min-height:58px;padding:0 27px;font-size:14px}
.hero-meta{font-size:10px}
.hero-art{height:620px}
.art-card{width:min(415px,80%);height:550px}
.mascot-frame{height:340px}
.mascot-sun{width:230px;height:230px}
.mascot-shape{width:195px;height:220px}
.mascot-shape span{font-size:59px}
.art-card-bottom strong{font-size:33px}
.floating-badge{font-size:12px}
.badge-level strong{font-size:27px}
.projects-section{padding-top:55px}
.section-heading h2,.about-main h2,.contact-section h2{font-size:clamp(2.9rem,4.3vw,5rem)}
.section-heading>p{font-size:17px}
.project-grid{gap:19px}
.project-art{height:205px}
.card-content{padding:25px 26px 29px}
.card-title-row h3{font-size:26px}
.card-content p{font-size:15px;line-height:1.7}
.card-tags span,.skill-list span{font-size:11px;padding:9px 11px}
.about-main p{font-size:18px}
.dock-item{width:82px;height:63px}
.dock-item span{font-size:28px}
.dock-item small{font-size:10px}
@media(max-width:1050px){.hero{min-height:650px}.hero h1{font-size:clamp(3.4rem,6vw,5.6rem)}.hero-art{height:550px}.art-card{height:475px;width:min(360px,82%)}.mascot-frame{height:280px}.project-grid{gap:13px}.card-title-row h3{font-size:23px}.dock-item{width:74px}}
@media(max-width:760px){html{font-size:16px}.scene{height:1150px}.topbar{height:86px}.brand-mark{width:46px;height:46px;font-size:26px}.brand-text{font-size:16px}.brand-text small{font-size:8px}.top-contact{padding:12px 15px;font-size:10px}.hero{min-height:0;padding:52px 6vw 95px;gap:18px}.hero h1{font-size:clamp(3.2rem,10.7vw,5.2rem)}.hero-intro{font-size:17px}.hero-art{height:465px}.art-card{width:292px;height:415px}.mascot-frame{height:240px}.mascot-sun{width:180px;height:180px}.mascot-shape{width:145px;height:170px}.mascot-shape span{font-size:44px}.art-card-bottom strong{font-size:26px}.projects-section{padding-top:30px}.project-grid{gap:14px}.project-art{height:185px}.dock-item{width:75px;height:59px}.dock-item span{font-size:25px}}
@media(max-width:560px){.scene{height:1100px}.hero{padding-top:42px}.hero h1{font-size:clamp(2.85rem,11.8vw,4.15rem)}.hero-intro{font-size:16px}.hero-art{height:440px}.art-card{width:280px;height:402px}.mascot-frame{height:229px}.project-art{height:175px}.card-content{padding:23px}.card-title-row h3{font-size:24px}.dock-item{width:20%;height:57px}.dock-item span{font-size:23px}.dock-item small{font-size:9px}}