/* A full first screen: flexible breathing room above a bottom-aligned dock. */
#welcome{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(106px,13vh,160px);padding-bottom:24px;padding-bottom:max(24px,env(safe-area-inset-bottom));gap:clamp(30px,5vh,58px)}
#welcome>.hero-statement{flex:0 0 auto;margin-top:auto;margin-bottom:auto;width:100%;align-self:center}
#welcome>.hero-dock.relative{flex:0 0 auto;margin-top:0;margin-bottom:0;align-self:center}
#welcome .corner-note{bottom:125px}
#welcome .absolute.bottom-28{bottom:125px}
@media(min-width:1440px){#welcome{padding-top:clamp(130px,14vh,185px);padding-bottom:max(28px,env(safe-area-inset-bottom));gap:clamp(36px,6vh,70px)}}
@media(max-width:767px){#welcome{min-height:100vh;min-height:100svh;padding-top:166px;padding-bottom:max(20px,env(safe-area-inset-bottom));gap:36px}#welcome>.hero-statement{margin-top:auto;margin-bottom:auto}#welcome>.hero-dock.relative{margin-top:0;margin-bottom:0}#welcome .corner-note{bottom:110px}#welcome .absolute.bottom-28{bottom:110px!important}#welcome .hero-dock .dock-glass{gap:5px!important;padding:9px 10px!important;max-width:100%;box-sizing:border-box}#welcome .hero-dock .dock-glass .group{flex-shrink:0}#welcome .hero-dock .dock-glass .group>a,#welcome .hero-dock .dock-glass .group>div.cursor-pointer{width:clamp(36px,10vw,44px)!important;height:44px!important}#welcome .hero-dock .dock-glass .group svg{width:21px;height:21px}}
/* Let short/zoomed viewports grow naturally rather than clipping the statement. */
@media(max-height:650px) and (min-width:768px){#welcome{padding-top:105px;padding-bottom:20px;gap:28px}#welcome .corner-note{bottom:112px}#welcome .absolute.bottom-28{bottom:112px}}

/* Give the full screen a stronger centre of gravity without adding more copy. */
@media(min-width:1000px){
 #welcome>.hero-statement{max-width:1100px}
 #welcome .hero-statement>.mt-8{max-width:950px}
 #welcome .absolute.bottom-28{right:24px;bottom:130px}
 #welcome .absolute.bottom-28>div{width:124px}
 #welcome .absolute.bottom-28>div>.w-full{height:120px}
 #welcome .corner-note{left:4%;bottom:145px}
 #welcome .sticker-left{left:5%}
 #welcome .sticker-right{right:5%}
}
@media(min-width:1000px) and (min-height:850px){
 #welcome h1{font-size:clamp(110px,9vw,148px)}
 #welcome p.font-extrabold{font-size:clamp(32px,3vw,44px);line-height:1.35}
 #welcome .hero-statement .border-2.bg-white\/85{padding:32px 58px!important}
 #welcome .absolute.bottom-28>div{width:140px}
 #welcome .absolute.bottom-28>div>.w-full{height:136px}
 #welcome .corner-note .font-hand{font-size:29px}
 #welcome .sticker-left .sticker-doodle{font-size:70px}
}

/* Keep the photography entry below the fixed header. */
#welcome .hero-photo-note{top:calc(90px + env(safe-area-inset-top,0px));z-index:12}

/* Lower the skill row visually without shifting the main statement or dock. */
#welcome .hero-skill-tags{position:relative;top:clamp(24px,4vh,44px)}
@media(max-width:767px),(max-height:700px){#welcome .hero-skill-tags{top:16px}}

/* Keep floating entry hit targets above the transparent statement rectangle. */
#welcome>.hero-entry-layer{z-index:25;pointer-events:none}
#welcome>.hero-entry-layer button,#welcome>.hero-entry-layer a{pointer-events:auto}