/* Portfolio-first masonry — the work comes first: a masonry wall of results under the nav, the stylist's
   name on a solid band across the bottom of it, then everything else. */
.pa-masonry.pg-index .nav:not(.is-solid):not(.is-open){--nav-ink:var(--on-dark)}
.pa-masonry.pg-index .nav:not(.is-solid):not(.is-open){background:color-mix(in srgb,var(--dark) 92%,transparent)}
.hero--ms{color:var(--ink);background:var(--dark);padding-top:82px}
.msw{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);gap:clamp(6px,.8vw,12px);padding:clamp(6px,.8vw,12px);height:clamp(380px,56svh,640px)}
.msw__t{border-radius:calc(var(--radius) * .6);overflow:hidden;background:color-mix(in srgb,var(--on-dark) 10%,var(--dark));min-height:0}
/* desktop wall placements live in a min-width query, so the phone wall below never has to out-rank them (v-hero-b) */
@media (min-width:861px){
.msw__t--0{grid-column:3/5;grid-row:1/5}
.msw__t--1{grid-column:1;grid-row:1/4}.msw__t--2{grid-column:1;grid-row:4/5}
.msw__t--3{grid-column:2;grid-row:1/3}.msw__t--4{grid-column:2;grid-row:3/5}
.msw__t--5{grid-column:5;grid-row:1/2}.msw__t--6{grid-column:5;grid-row:2/5}
.msw__t--7{grid-column:6;grid-row:1/3}.msw__t--8{grid-column:6;grid-row:3/5}
.pa-masonry.v-hero-b .msw__t--0{grid-column:1/3}.pa-masonry.v-hero-b .msw__t--1,.pa-masonry.v-hero-b .msw__t--2{grid-column:3}.pa-masonry.v-hero-b .msw__t--3,.pa-masonry.v-hero-b .msw__t--4{grid-column:4}
}
.msb{background:var(--dark);color:var(--on-dark);padding:clamp(26px,4vw,56px) 0 clamp(40px,6vw,80px);position:relative}
.msb__in{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,80px);align-items:end}
.hero--ms .eyebrow{color:var(--accent-dark);opacity:1}
.hero--ms .h1{font-size:clamp(2.6rem,1.4rem + 4.6vw,6.2rem);max-width:13ch;color:var(--on-dark)}
.hero--ms .h1 em{color:var(--accent-dark)}
.msb__side .hero__lede{margin-top:0;color:var(--on-dark);opacity:.9}
.hero--ms .btn--ghost{color:var(--on-dark)}
.hero--ms .btn--ghost:hover{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.pa-masonry.v-hero-c .msb__in{grid-template-columns:1fr;text-align:center}.pa-masonry.v-hero-c .msb__in .h1{margin:auto}.pa-masonry.v-hero-c .msb .eyebrow,.pa-masonry.v-hero-c .msb .btns{justify-content:center}
/* the gallery stays masonry too */
.pa-masonry .ggrid{display:block;columns:4 220px;column-gap:clamp(8px,1.2vw,16px)}
.pa-masonry .ggrid .gt{break-inside:avoid;margin-bottom:clamp(8px,1.2vw,16px);aspect-ratio:auto}
.pa-masonry .ggrid .gt:nth-child(3n+1) img{aspect-ratio:3/4}.pa-masonry .ggrid .gt:nth-child(3n+2) img{aspect-ratio:1}.pa-masonry .ggrid .gt:nth-child(3n) img{aspect-ratio:4/5}
.pa-masonry .ggrid .gt:nth-child(6n+1){grid-column:auto;grid-row:auto}
.pa-masonry .ggrid--teaser .gt:first-child{grid-column:auto;grid-row:auto}
.pa-masonry .insta{grid-template-columns:repeat(6,1fr)}
.pa-masonry .st em{color:var(--accent-text)}
.pa-masonry .s-bio{background:var(--surface)}
.pa-masonry .bio__ph{border-radius:var(--radius)}
.pa-masonry .sig-card,.pa-masonry .q,.pa-masonry .fv li{background:var(--surface)}
.pa-masonry .s-bio .fv li{background:var(--bg)}
@media (max-width:860px){.msb__in{grid-template-columns:1fr}.msw{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);height:clamp(300px,52svh,460px)}.msw__t--0{grid-column:1/3;grid-row:1/3}.pa-masonry.v-hero-b .msw__t--0{grid-column:2/4}.msw__t:nth-child(n+7){display:none}.pa-masonry .ggrid{columns:2}.pa-masonry .insta{grid-template-columns:repeat(3,1fr)}}