/* Keep the banner's lavender, pink and ink styling; reserve space for every layer. */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:'eyebrow art' 'title art' 'intro art';column-gap:clamp(32px,5vw,80px);row-gap:24px;align-items:center;min-height:0;padding-block:64px 80px;overflow:visible;isolation:isolate}
.hero>.eyebrow{grid-area:eyebrow;margin:0;align-self:end}
.hero h1{grid-area:title;width:auto;max-width:100%;margin:0;position:static;font-size:clamp(48px,5.1vw,86px);line-height:1.1;letter-spacing:-2px;overflow-wrap:normal}
.hero .hero-bottom{grid-area:intro;display:flex;flex-wrap:wrap;align-items:center;gap:24px;min-width:0;position:static}
.hero-bottom p{flex:1 1 270px;line-height:1.7}
.hero-bottom .button{margin:0;flex:none;white-space:nowrap}
.hero-bottom .hero-note{display:block;flex-basis:100%;margin:6px 0 0;font-size:10px;line-height:1.8}
.hero .hero-art{grid-area:art;position:relative;inset:auto;width:100%;height:auto;min-width:0;margin:0;opacity:1;transform:none;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:30px 12px;padding:28px 10px 8px;align-self:center}
.hero-art .banner-frame{grid-column:1/-1;position:relative;inset:auto;width:100%;transform:rotate(3deg);margin:0;border-radius:24px}
.hero-art .sticker-code,.hero-art .sticker-play{position:relative;inset:auto;width:clamp(56px,6vw,88px);height:clamp(54px,6vw,80px);font-size:clamp(24px,3vw,34px);border-radius:16px;justify-self:center}
.hero-art .sticker-code{grid-column:1;grid-row:2;transform:rotate(-10deg)}
.hero-art .sticker-play{grid-column:3;grid-row:2;transform:rotate(10deg)}
.hero-art .creator-note{grid-column:2;grid-row:2;position:relative;inset:auto;transform:rotate(-4deg);font-size:clamp(12px,1vw,15px);line-height:1.5;text-align:center;margin:0}
.hero-art .creator-note span{position:static;font-size:20px;display:inline-block;margin-left:4px}
.hero-art .sticker-star{top:-8px;right:8%;font-size:42px;pointer-events:none}
.impact-card>strong{font-size:clamp(30px,3.2vw,50px);letter-spacing:-1px;overflow-wrap:normal;white-space:nowrap}
.coverage-card>strong{font-size:54px}
.impact-card h3{line-height:1.3}
.section-heading>*,.carousel-heading>*,.about>*,.skills article>div,.timeline article>*{min-width:0}
.contact-title{display:block;line-height:1.15}
.contact-title span{float:none;display:inline-block;margin-left:16px;font-size:.7em}
@media(max-width:1100px){
 .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:30px;padding-block:48px 64px}
 .hero h1{font-size:clamp(44px,5.4vw,62px)}
 .impact{grid-template-columns:repeat(2,minmax(0,1fr))}
 .coverage-card{display:block;grid-column:1/-1}
 .coverage-card>strong{font-size:48px}
 .about{gap:40px}
}
@media(max-width:850px){
 .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:'eyebrow' 'title' 'intro' 'art';row-gap:26px;padding-block:40px 56px}
 .hero h1{font-size:clamp(42px,8.2vw,70px);letter-spacing:-1.5px}
 .hero .hero-art{max-width:620px;justify-self:center;margin-top:14px;padding-inline:12px;gap:28px 12px}
 .hero-bottom .hero-note{display:none}
 .hero-bottom p br{display:none}
 .hero-bottom p{max-width:460px;flex-basis:100%}
 .hero-art .creator-note{font-size:14px}
 .hero-art .sticker-code,.hero-art .sticker-play{width:68px;height:62px;font-size:27px}
 .about{grid-template-columns:minmax(0,1fr);gap:44px}
 .community>div{grid-template-columns:minmax(0,1fr);gap:24px}
 .section-heading{align-items:start;gap:24px;flex-wrap:wrap}
}
@media(max-width:600px){
 header{height:auto;min-height:96px;flex-wrap:wrap;padding-block:18px 14px;gap:16px}
 header .wordmark{font-size:26px}
 header nav{width:100%;order:2;justify-content:space-between;gap:12px;font-size:12px;flex-wrap:wrap}
 .hero{padding-block:30px 48px}
 .hero h1{font-size:clamp(37px,9.5vw,56px);line-height:1.14;letter-spacing:-1px}
 .hero>.eyebrow{line-height:1.6}
 .hero .hero-bottom{gap:22px}
 .hero-bottom p{font-size:15px}
 .hero-art .banner-frame{border-radius:17px;box-shadow:6px 7px var(--ink)}
 .hero-art .creator-note{font-size:12px}
 .hero-art .sticker-code,.hero-art .sticker-play{width:54px;height:52px;font-size:22px}
 .hero-art .sticker-star{font-size:32px;top:-2px}
 .expertise-strip{transform:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;font-size:9px;line-height:1.8;padding:18px 5%}
 .expertise-strip i{font-size:16px}
 .expertise-strip span:last-child,.expertise-strip i:last-of-type{display:inline}
 .carousel-heading h2,.section-heading h2,.about h2,.community h2{font-size:clamp(31px,8vw,42px);line-height:1.15;letter-spacing:-.8px}
 .impact{grid-template-columns:minmax(0,1fr)}
 .coverage-card{grid-column:auto}
 .impact-card>strong{font-size:clamp(30px,9vw,48px)}
 .project h3{font-size:26px;line-height:1.2}
 .project-meta{flex-wrap:wrap;overflow-wrap:anywhere}
 .project p{line-height:1.75}
 .contact-title{font-size:clamp(35px,9vw,56px);letter-spacing:-1px;display:block}
 .contact-title span{display:inline-block;font-size:.7em;margin-left:8px}
 .contact>div{gap:20px;line-height:1.7}
 .contact>div a{overflow-wrap:anywhere}
 .independent a{min-width:0;flex-basis:100%}
 .skills article{gap:16px}
}

/* Solid headline paint avoids the font's stroked overlapping outlines. */
.hero h1>span{display:inline-block;-webkit-text-stroke:0;text-shadow:3px 4px #f7e6ff;line-height:inherit;padding-bottom:.08em;margin-bottom:-.08em}
/* Use desktop width without forcing prose to span an entire monitor. */
body{max-width:none;width:100%;margin:0}
header{height:84px}
.hero{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:clamp(32px,4vw,80px);row-gap:16px;padding-block:34px 44px}
.hero h1{font-size:clamp(48px,4.1vw,104px);line-height:1.1}
.hero .hero-bottom{justify-content:flex-start;gap:20px 28px}
.hero-bottom p{flex:0 1 380px}
.hero-bottom .hero-note{margin-top:0}
.hero .hero-art{padding-top:16px;gap:26px 16px}
.hero-art .banner-frame{transform:rotate(2deg)}
.collaborators{padding-top:36px}
.impact{margin-top:30px}
section.work,.experience{padding-block:64px}
.about{padding-block:64px}
.community{padding-bottom:56px}
.about p,.skills p{max-width:65ch}
.project p{max-width:70ch}
.timeline article>div,.community p{max-width:65ch}
/* Motion deliberately enters and leaves this viewport; each card keeps its own text intact. */
.brand-viewport{overflow:hidden;padding:8px 10px 18px;position:relative;border-radius:0;touch-action:pan-y;mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.brand-track{display:flex;width:max-content;gap:22px;overflow:visible;transform:none;will-change:transform;align-items:stretch}
.brand-card{width:clamp(240px,16vw,320px);flex:0 0 clamp(240px,16vw,320px);height:auto;min-height:212px;min-width:0}
.brand-caption{overflow-wrap:anywhere}
.carousel-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.carousel-status{font-size:11px;line-height:1.5;font-weight:800;color:var(--muted);min-width:84px;text-align:center}
@media(max-width:1100px){.hero h1{font-size:clamp(44px,5.4vw,62px)}}
@media(max-width:850px){.hero{grid-template-columns:minmax(0,1fr);padding-block:32px 40px;row-gap:22px}.hero h1{font-size:clamp(42px,8.2vw,70px)}.hero-bottom p{flex-basis:100%}.hero .hero-art{max-width:660px}.about{padding-block:52px}}
@media(max-width:600px){header{height:auto}.hero{padding-block:28px 36px}.hero h1{font-size:clamp(37px,9.5vw,56px);line-height:1.14}.collaborators{padding-top:30px}.brand-card{width:235px;flex-basis:235px}.brand-logo-plate{height:108px}.impact{margin-top:24px}.carousel-status{min-width:72px}}

/* Keep every ribbon label intact while allowing the wider set to wrap. */
.expertise-strip{flex-wrap:wrap;gap:12px 22px;justify-content:space-between;line-height:1.7}
.expertise-strip span{white-space:nowrap}
.expertise-strip span:last-child,.expertise-strip i:last-of-type{display:inline}
@media(max-width:1100px){.expertise-strip{justify-content:center}}

/* Current professional profile: readable inline links and employment dates. */
.about p a{text-decoration:underline;text-underline-offset:3px;font-weight:800}.timeline .role-dates{font-weight:800;color:var(--ink)}