/* v22 — unified surfaces, immersive portrait, chapter fit, full role facets */
:root {--v22-card:var(--bg)}
/* Remove the conflicting dual-color experience panel while retaining visual hierarchy */
#experience .journey-card, #experience .journey-card-main { background:var(--bg)!important; }
#experience .journey-card {border:1px solid var(--line)!important;box-shadow:0 15px 55px rgba(0,0,0,.12)!important;}
#experience .journey-card-main{flex:0 1 auto!important;overflow:auto!important;scrollbar-width:none!important;max-height:calc(100% - 125px);padding:clamp(10px,1.3vh,17px) 2px!important;}
#experience .journey-card-main::-webkit-scrollbar{display:none}
#experience .journey-tags {display:flex!important;flex-wrap:wrap!important;align-content:flex-start!important;align-items:center!important;justify-content:flex-start!important;max-height:32%!important;overflow-y:auto!important;scrollbar-width:none!important;margin-top:clamp(8px,2vh,18px)!important;padding:12px 0 0!important;border-top:1px solid var(--line);}
#experience .journey-tags::-webkit-scrollbar{display:none}
#experience .journey-tags span{font-size:clamp(9px,.77vw,12px)!important;padding:7px 10px!important;white-space:normal;line-height:1.2}
#experience .journey-duties {gap:clamp(8px,1.15vh,14px) clamp(14px,2vw,30px)!important;}
#experience .journey-card p {font-size:clamp(13px,1.03vw,16px)!important;}
#experience .journey-card h3 {font-size:clamp(25px,2.8vw,40px)!important;}
#experience .journey-card-top {padding-bottom:6px!important;}
/* Intro: photograph fills what was an empty column, without inventing a person */
main#main>section#home.hero.hero-v14{display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(250px,.88fr)!important;grid-template-rows:minmax(0,1fr) auto!important;column-gap:clamp(22px,4vw,70px)!important;max-width:1280px!important;width:min(1280px,calc(100% - 64px))!important;overflow:hidden!important;align-items:center!important;}
#home.hero-v14 .hero-v14-copy {grid-column:1!important;grid-row:1!important;width:100%!important;max-width:100%!important;margin:0!important;z-index:2;}
#home.hero-v14 .hero-v14-name{font-size:clamp(42px,min(6vw,10.5vh),104px)!important;line-height:1.08!important;letter-spacing:-.08em!important;}
#home.hero-v14 .hero-v14-lead{font-size:clamp(13px,1.05vw,17px)!important;line-height:1.55!important;max-width:620px!important;}
#home.hero-v14 .hero-v14-bottom{grid-column:1/-1!important;grid-row:2!important;}
#home .v22-portrait{grid-column:2;grid-row:1;align-self:center;justify-self:stretch;height:min(66dvh,610px);min-height:0;position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:0 24px 75px rgba(0,0,0,.14)}
#home .v22-portrait>img{width:100%;height:100%;object-fit:cover;object-position:center 24%;display:block}
#home .v22-portrait-placeholder{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;background:linear-gradient(150deg,var(--panel),var(--bg));color:var(--muted);text-align:center}
#home .v22-portrait-placeholder:before{content:'SL';font-size:clamp(80px,11vw,190px);line-height:1;color:var(--accent);font-weight:700;opacity:.24;letter-spacing:-.12em}
#home .v22-portrait-placeholder span{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--text)}
#home .v22-portrait-placeholder small{font-size:11px;letter-spacing:0;color:var(--muted)}
#home .v22-portrait.missing-photo .v22-portrait-placeholder{display:flex}
/* About: prevent the transition clipping and shrink content to actual viewport */
main#main>section#about .shell.section-grid {height:100%!important;max-height:100%!important;min-height:0!important;align-items:center!important;display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;column-gap:clamp(24px,6vw,100px)!important;overflow:hidden!important;padding-top:clamp(12px,3vh,35px)!important;padding-bottom:clamp(12px,3vh,35px)!important;}
#about .section-label{min-width:0;align-self:center!important}
#about .section-label h2{font-size:clamp(29px,min(4.4vw,7.3vh),66px)!important;line-height:1.1!important;}
#about .section-body{min-width:0!important;max-height:100%!important;overflow:hidden!important;align-self:center!important;display:flex;flex-direction:column;gap:clamp(8px,1.4dvh,16px)!important;}
#about .section-body p{font-size:clamp(12px,1vw,16px)!important;line-height:1.55!important;margin:0!important;}
#about .section-body .lead{font-size:clamp(15px,1.5vw,22px)!important;line-height:1.38!important;}
#about .inline-notes{margin-top:4px!important;}
@media(max-width:850px){
 main#main>section#home.hero.hero-v14{grid-template-columns:minmax(0,1fr) minmax(150px,.7fr)!important;gap:18px!important;width:calc(100% - 32px)!important;}
 #home .v22-portrait{height:min(45dvh,450px)}
 #home.hero-v14 .hero-v14-name{font-size:clamp(38px,6.6vw,67px)!important;}
 #about .section-label h2{font-size:clamp(28px,4.5vw,45px)!important}
}
@media(max-width:640px){
 main#main>section#home.hero.hero-v14{grid-template-columns:1fr minmax(105px,31%)!important;grid-template-rows:minmax(0,1fr) auto!important;column-gap:10px!important;}
 #home .v22-portrait{height:min(39dvh,300px);border-radius:8px;}
 #home.hero-v14 .hero-v14-preface{font-size:8px!important;letter-spacing:.07em!important;}
 #home.hero-v14 .hero-v14-name{font-size:clamp(27px,8vw,49px)!important;line-height:1.04!important;}
 #home.hero-v14 .hero-v14-name>span{display:block!important}
 #home.hero-v14 .hero-v14-lead{font-size:clamp(11px,2.45vw,14px)!important;line-height:1.45!important}
 #home.hero-v14 .hero-v14-descriptor{font-size:9px!important;letter-spacing:.02em!important;}
 #home .v22-portrait-placeholder small{font-size:8px}
 main#main>section#about .shell.section-grid{grid-template-columns:1fr!important;display:flex!important;flex-direction:column;justify-content:center;align-items:stretch!important;gap:clamp(10px,2dvh,22px)!important;}
 #about .section-label h2{font-size:clamp(28px,7vw,42px)!important;}
 #about .section-body p{font-size:clamp(11px,3vw,14px)!important;line-height:1.38!important}
 #about .section-body .lead{font-size:clamp(13px,3.4vw,17px)!important;}
 #experience .journey-card-main{max-height:65%!important;}
 #experience .journey-tags{max-height:25%!important}
 #experience .journey-duties{grid-template-columns:1fr!important}
}
@media(max-height:650px){
 #home .v22-portrait{height:min(52dvh,330px)}
 #home.hero-v14 .hero-v14-name{font-size:clamp(30px,7.5vh,70px)!important}
 #about .section-body p{font-size:clamp(11px,1.8vh,14px)!important;line-height:1.3!important}
 #about .section-body .lead{font-size:clamp(13px,2.7vh,17px)!important}
 #experience .journey-card-main{max-height:57%!important}
}