/* demo58 "Saria Looks": a stylist's profile, widening look panels and a stack of looks. */
.p-demo58 { --sand:#efe6d4; --ink:#0b2a33; --teal:#0d4b5c; --rust:#c9522a; --edge:clamp(16px,3vw,48px); background:var(--sand); }
.p-demo58 .main { padding:0; }
.p-demo58 .header { background:var(--ink); }
.p-demo58 .header::before { display:none; }
.sa { color:var(--ink); font-family:"Bricolage Grotesque",system-ui,sans-serif; }
.sa :where(*) { color:inherit; }
.sa :where(h1,h2,p,ul,figure) { margin:0; padding:0; }
.sa img { display:block; width:100%; height:100%; object-fit:cover; }
.sa-hero { padding:clamp(10px,1.2vw,18px) clamp(10px,1.2vw,18px) 0; }
.sa-panels { display:flex; gap:clamp(4px,.6vw,10px); height:min(54svh,620px); min-height:360px; }
.sa-p { position:relative; flex:1 1 0; min-width:0; padding:0; border:0; overflow:hidden; cursor:pointer; background:var(--ink); transition:flex-grow .8s cubic-bezier(.65,0,.2,1); }
.sa-p.is-on { flex-grow:4.2; }
.sa-p img { position:absolute; inset:0; object-position:50% 22%; transition:filter .4s; }
.sa-p:not(.is-on) img { filter:saturate(.75) brightness(.8); }
.sa-p:hover img { filter:none; }
.sa-p span { position:absolute; left:14px; bottom:12px; color:#fff; font-size:clamp(20px,2.2vw,34px); font-weight:800; letter-spacing:-.02em; white-space:nowrap; text-shadow:0 1px 18px #0009; opacity:0; transform:translateY(10px); transition:opacity .4s,transform .4s; }
.sa-p.is-on span { opacity:1; transform:none; transition-delay:.35s; }
.sa-id { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr) auto; gap:clamp(16px,3vw,48px); align-items:end; padding:clamp(18px,2.4vw,34px) calc(var(--edge) - 12px) clamp(40px,5vw,70px); }
.sa-id h1 { font-size:clamp(70px,11.5vw,210px); font-weight:800; line-height:.84; letter-spacing:-.05em; color:var(--teal)!important; }
.sa-id p { font-size:18px; line-height:1.4; }
.sa-role { font-size:14px!important; font-weight:600; margin-bottom:10px!important; color:var(--rust)!important; }
.sa-acts { display:grid; gap:8px; }
.sa-acts>* { display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border:1.5px solid var(--ink); background:none; color:var(--ink); font:600 15px "Bricolage Grotesque",sans-serif; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .2s,color .2s; }
.sa-acts>*:hover,.sa-acts [aria-pressed=true] { background:var(--ink); color:var(--sand); }
.sa-acts b { font-weight:600; margin-left:.3em; }
.sa-stack { padding:0 var(--edge); }
.sa-look { position:sticky; top:calc(84px + var(--i) * 14px); margin-bottom:6vh; transform-origin:top center; will-change:transform; }
.sa-look__in { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); height:min(74vh,740px); min-height:440px; background:var(--bg); color:#f8f2e6; overflow:hidden; }
.sa-look__in>div { display:flex; flex-direction:column; padding:clamp(20px,4vw,60px); }
.sa-look__n { font-size:14px; font-weight:600; }
.sa-look h2 { font-size:clamp(46px,7.4vw,134px); font-weight:800; line-height:.9; letter-spacing:-.045em; margin:auto 0 18px; }
.sa-look p:not(.sa-look__n) { font-size:clamp(18px,1.6vw,23px); line-height:1.35; max-width:30em; }
.sa-look p.sa-look__c { margin-top:14px; font-size:14px; font-weight:600; }
.sa-kit,.sa-with { padding:clamp(50px,7vw,100px) var(--edge) 0; }
.sa-kit h2,.sa-with h2 { font-size:clamp(40px,6vw,96px); font-weight:800; letter-spacing:-.04em; line-height:1; margin-bottom:24px; color:var(--teal)!important; }
.sa-kit ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.sa-kit li { padding:9px 18px; border:1.5px solid var(--ink); border-radius:99px; font-size:clamp(16px,1.6vw,22px); font-weight:600; }
.sa-with { padding-bottom:clamp(60px,8vw,110px); }
.sa-with__g { display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(16px,3vw,40px); }
.sa-with a { display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1.5px solid var(--ink); color:inherit; text-decoration:none; }
.sa-with img { width:66px; height:66px; flex:none; border-radius:50%; transition:border-radius .3s; }
.sa-with a:hover img { border-radius:8px; }
.sa-with span { display:grid; font-size:14px; }
.sa-with strong { font-size:clamp(18px,1.7vw,24px); font-weight:700; }
.sa :focus-visible { outline:3px solid var(--rust); outline-offset:2px; }
@media (max-width:860px) {
  .sa-panels { height:60svh; min-height:340px; }
  .sa-p.is-on { flex-grow:6; }
  .sa-id { grid-template-columns:1fr; }
  .sa-look { position:static; margin-bottom:10px; }
  .sa-look__in { grid-template-columns:1fr; height:auto; }
  .sa-look__in img { aspect-ratio:4/5; height:auto; }
  .sa-look h2 { margin-top:30px; }
  .sa-with__g { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .sa-p,.sa-p span,.sa-p img { transition:none; } }