/* Fixed reference proportions: viewport height never stretches the four hero panels. */
.showcase{height:auto!important;min-height:0;align-items:stretch}
.work-grid{min-height:0;align-items:stretch}
.personal{width:100%;min-height:0!important;flex:none;align-self:stretch}
.personal-main{height:auto!important;min-height:0!important;flex:1}
.contact-strip{min-height:100px;height:21.5%;padding-block:12px}
.project-wake,.project-fylto{align-self:stretch}
.closing-about__grid{align-items:center;padding-top:clamp(24px,2.5vw,48px)}
.closing-about__grid h2{margin-top:0}
.closing-about__content{padding-top:0;align-self:center}

/* The entire Ukrainian UI uses one Medium source, including Latin labels and digits. */
html[lang="uk"],html[lang="uk"] body *{font-family:'Barlow UA','Arial Narrow',sans-serif!important;font-synthesis:weight}
html[lang="uk"] .intro-title{line-height:1.02;-webkit-text-stroke:.015em currentColor}
html[lang="uk"] .section-heading h2,html[lang="uk"] .closing-section h2,
html[lang="uk"] .email-dialog h2,html[lang="uk"] .process-heading h2,
html[lang="uk"] .process-card h3,html[lang="uk"] .game-heading h2,
html[lang="uk"] .game-idle h3{-webkit-text-stroke:.012em currentColor;line-height:1.04}
html[lang="uk"] .intro-cta .pill{-webkit-text-stroke:0;font-weight:900}
html[lang="uk"] #work .inquru-headline,html[lang="uk"] #work .wake-headline,
html[lang="uk"] .case-hero h1{font-family:'Barlow Condensed','Arial Narrow',sans-serif!important;-webkit-text-stroke:0}
html[lang="uk"] .type-apostrophe{display:inline-block!important;width:auto!important;font-size:.76em!important;font-weight:500!important;line-height:0!important;margin-inline:.055em;vertical-align:.12em;-webkit-text-stroke:0!important;transform:none!important}
html[lang="uk"] #work .project .project-description{font-size:clamp(18px,1.25vw,26px);line-height:1.06;font-weight:500}
html[lang="uk"] #work .project-wake .project-description,
html[lang="uk"] #work .project-fylto .project-description{font-size:clamp(17px,1.13vw,24px)}

/* A more generous silhouette around a restrained, three-line badge label. */
html[lang="uk"] .personal-main .remote-badge-ua{width:clamp(120px,7.7vw,150px)!important}
html[lang="uk"] .personal-main .remote-badge-ua>span{left:14%;top:30%;width:72%;font-size:clamp(11px,.74vw,14px);line-height:1.08;font-weight:600;-webkit-text-stroke:0}

@media(min-width:1101px){
 .personal-main .dog-illustration{max-height:51%;object-fit:contain;object-position:right bottom}
}
@media(min-width:1101px) and (max-width:1550px){
 .personal-main .remote-badge{top:5%;right:3%;width:clamp(90px,7vw,110px)}
}
@media(min-width:1101px) and (max-width:1245px){
 .intro-description{font-size:18px;line-height:1.1}
 html[lang="uk"] .intro-description{font-size:17px}
 .intro-cta .pill,html[lang="uk"] .intro-cta .pill{font-size:18px;padding:7px 12px}
 html[lang="uk"] .personal-main .remote-badge-ua{width:110px!important;top:41%!important}
 html[lang="uk"] .personal-main .remote-badge-ua>span{font-size:11px}
 html[lang="uk"] .personal-main .star-doodle{top:28%!important;width:44px}
 html[lang="uk"] #work .project .project-description{font-size:16px}
 #work .project-inquru .inquru-description{top:62%!important}
}
@media(min-width:681px) and (max-width:1100px){
 .wake-headline{top:24%;bottom:auto;font-size:clamp(38px,5.5vw,70px)}
 .project-topline{font-size:clamp(21px,2.6vw,28px)}
 .project-open{width:40px;height:40px;font-size:29px}
 .tag-row span{font-size:clamp(12px,1.6vw,18px);padding-inline:8px}
 html[lang="uk"] .intro-title{font-size:clamp(68px,9.3vw,100px)}
 html[lang="uk"] #work .project .project-description{font-size:clamp(16px,2vw,22px)}
 html[lang="uk"] .personal-main .remote-badge-ua{width:145px!important}
 html[lang="uk"] .personal-main .star-doodle{top:40%;right:5%;left:auto;width:50px}
}
@media(max-width:360px){
 .personal-main .intro-cta,html[lang="uk"] .personal-main .intro-cta{top:49%!important}
}
@media(min-width:681px) and (max-width:760px){
 .personal-main .dog-illustration{width:44%;right:3%;bottom:3%}
}
@media(max-width:680px){
 .personal-main{padding:clamp(18px,5vw,24px) clamp(16px,4.8vw,21px)}
 .contact-strip{min-height:104px;padding:12px 15px}
 .contact-links{font-size:clamp(13px,4.05vw,20px);gap:8px}
 .intro-title{font-size:clamp(40px,12.8vw,82px)}
 html[lang="uk"] .intro-title{font-size:clamp(39px,12.4vw,78px);line-height:1.04}
 .intro-description,html[lang="uk"] .intro-description{font-size:clamp(16px,4.4vw,24px);margin-top:16px;line-height:1.12}
 .personal-main .intro-cta{top:51%!important}
 .intro-cta .pill,html[lang="uk"] .intro-cta .pill{font-size:clamp(17px,4.85vw,25px);padding:8px 12px}
 html[lang="uk"] .personal-main .star-doodle{top:5.5%!important;right:5%!important;left:auto!important;bottom:auto!important;width:42px}
 html[lang="uk"] .personal-main .remote-badge-ua{top:auto!important;bottom:0!important;left:4%!important;right:auto!important;width:clamp(118px,33vw,142px)!important}
 html[lang="uk"] .personal-main .remote-badge-ua>span{font-size:clamp(10px,2.7vw,12px);line-height:1.08}
 #work .project-inquru .inquru-title-stage .inquru-headline{top:32%!important;font-size:clamp(50px,15vw,90px)!important}
 #work .project-inquru .tag-row{max-width:49%;bottom:14px}
 #work .project-inquru .inquru-description{top:61%!important}
 html[lang="uk"] #work .project .project-description{font-size:clamp(15px,4.05vw,21px)!important;line-height:1.08!important}
 .project-wake .wake-text-shade{height:87%!important;width:100%!important;inset:auto 0 0;background:linear-gradient(0deg,rgba(0,23,65,.98),rgba(0,29,76,.94) 28%,rgba(0,34,88,.72) 54%,rgba(0,41,103,.12) 85%,transparent)!important;mask-image:none;-webkit-mask-image:none}
 .project-wake .wake-headline{font-size:clamp(56px,18vw,112px)}
 .project-fylto .fylto-headline{top:34%!important}
}
@media(min-width:481px) and (max-width:680px){
 html[lang="uk"] .intro-title{font-size:clamp(58px,11.8vw,74px);line-height:1.02}
 .personal-main .intro-cta,html[lang="uk"] .personal-main .intro-cta{top:58%!important}
 html[lang="uk"] .personal-main .remote-badge-ua{width:142px!important}
 html[lang="uk"] .personal-main .remote-badge-ua>span{font-size:12px}
}