/* PEOPLE — a portrait strip you scrub through, a quiet info line, and a side drawer. Palette: white · cream · black · charcoal. */
.people{background:var(--cream);padding:clamp(8px,1.5vw,20px) 0 clamp(64px,8vw,120px)}

/* strip: one row of portrait slices; the focused slice opens up */
.ps{display:flex;gap:6px;height:clamp(360px,62vh,560px)}
.ps-li{flex:1 1 0;min-width:0;display:flex;transition:flex-grow .8s var(--ease)}
.ps-li.is-active{flex-grow:5.6}
.ps-slice{position:relative;isolation:isolate;flex:1;width:100%;overflow:hidden;background:var(--cream2);color:#fff;text-align:left}
.ps-slice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04) brightness(.88);transform:scale(calc(var(--sc,1) * 1.14));transition:transform 1.2s var(--ease),filter .7s}
.ps-li.is-active .ps-slice img{transform:scale(var(--sc,1));filter:grayscale(1) contrast(1.04)}
.ps-n{position:absolute;left:12px;top:12px;font-size:11.5px;font-weight:700;letter-spacing:.1em;mix-blend-mode:difference}
.ps-v{position:absolute;left:12px;bottom:14px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-weight:500;text-transform:none;letter-spacing:-.03em;font-size:clamp(18px,1.9vw,30px);line-height:1;mix-blend-mode:difference;transition:opacity .35s;font-family:var(--disp)}
.ps-li.is-active .ps-v{opacity:0}
.ps-slice:focus-visible{outline:3px solid var(--black);outline-offset:-3px}
.ps-cap{display:none}

/* info line under the strip (desktop) */
.pi{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:end;margin-top:clamp(16px,2vw,26px);padding-top:clamp(18px,2.2vw,30px);border-top:1px solid var(--black)}
.pi-n{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--grey);margin-bottom:6px;font-variant-numeric:tabular-nums}
.pi-h{font-weight:500;text-transform:none;letter-spacing:-.03em;line-height:1.04;font-size:clamp(31.16px,3.36vw,57.6px);overflow:hidden;padding:.04em .08em .08em;margin:-.04em -.08em -.08em;font-family:var(--disp)}
.pi-h>span,.pi-role>span,.pi-q>span{display:block;transition:transform .5s var(--ease),opacity .35s}
.pi-h.is-out>span,.pi-role.is-out>span,.pi-q.is-out>span{transform:translateY(100%);opacity:0}
.pi-role{margin:0 0 8px;overflow:hidden;padding:.1em .05em;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.pi-q{margin:0;overflow:hidden;padding:.05em .05em .1em;margin:-.05em -.05em -.1em;font-size:clamp(17px,1.6vw,24px);font-weight:700;letter-spacing:-.025em;line-height:1.2;max-width:26ch}
.pi-skills{display:flex;flex-wrap:wrap;gap:6px clamp(12px,1.5vw,20px);font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.pi-skills li{opacity:.2;transition:opacity .55s var(--ease),transform .55s var(--ease)}.pi-skills li.on{opacity:1;transform:translateY(-2px)}
.pi-end{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pi-open{font-weight:800;font-size:15px;border-bottom:2px solid var(--black);padding-bottom:2px;transition:opacity .2s}.pi-open:hover{opacity:.55}.pi-open i{font-style:normal;display:inline-block;transition:transform .4s var(--ease)}.pi-open:hover i{transform:translateX(4px)}

/* drawer */
.dr-scrim{position:fixed;inset:0;z-index:290;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}.dr-scrim.open{opacity:1;visibility:visible;transition-delay:0s}
.dr{position:fixed;top:0;right:0;bottom:0;z-index:300;width:min(500px,100vw);background:var(--cream);color:var(--black);overflow-y:auto;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
.dr.open{transform:none;visibility:visible;transition-delay:0s}
.dr-bar{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:var(--cream);border-bottom:1px solid var(--line)}
.dr-count{color:var(--grey);font-variant-numeric:tabular-nums}.dr-close{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--black);border-radius:8px;padding:10px 16px;transition:background .3s,color .3s}.dr-close:hover{background:var(--black);color:var(--cream)}
.dr-body{padding:20px 24px 28px;flex:1;transition:opacity .3s,transform .4s var(--ease)}.dr.swap .dr-body{opacity:0;transform:translateY(10px)}
.dr-photo{position:relative;margin:0;aspect-ratio:5/5.2;background:var(--cream2);overflow:hidden}.dr-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1);transition:opacity .5s}
.dr-photo img.b{opacity:0}.dr.v-b .dr-photo img.b{opacity:1}
.dr-views{display:flex;gap:16px;margin:10px 0 22px}.dr-views button{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);border-bottom:2px solid transparent;padding-bottom:2px}.dr-views button[aria-pressed=true]{color:var(--black);border-color:var(--black)}
.dr-role{color:var(--grey);margin-bottom:6px}
.dr-name{font-weight:500;text-transform:none;letter-spacing:-.03em;line-height:1.04;font-size:clamp(36.08px,4.2vw,48px);margin:0 0 16px -.02em;overflow-wrap:anywhere;font-family:var(--disp)}
.dr-q{margin:0 0 14px;font-size:clamp(18px,1.8vw,24px);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.dr-bio{color:var(--char);margin-bottom:22px;font-size:16px}
.dr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-top:16px;border-top:1px solid var(--black)}
.dr-cols h3{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:8px;font-weight:700}.dr-cols li{font-weight:700;line-height:1.5}.dr-cols .dim{color:var(--grey);font-weight:600}
.dr-proj[hidden],.dr-li[hidden]{display:none}.dr-li{display:inline-block;margin-top:22px;font-weight:700;border-bottom:2px solid var(--black)}
.dr-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--black);position:sticky;bottom:0;background:var(--cream)}
.dr-nav button{display:flex;flex-direction:column;gap:4px;padding:16px 24px;transition:background .3s,color .3s}.dr-nav button:hover{background:var(--black);color:var(--cream)}
.dr-nav .next{text-align:right;align-items:flex-end;border-left:1px solid var(--black)}.dr-nav b{font-weight:500;text-transform:none;letter-spacing:-.03em;font-size:clamp(20px,2.4vw,28px);line-height:1;font-family:var(--disp)}
.dr :focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* tablet */
@media(max-width:1100px){.pi{grid-template-columns:1fr 1fr}.pi-end{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}}

/* mobile: vertical accordion — tap a row to open it */
@media(max-width:900px){
 .ps{flex-direction:column;height:auto;gap:8px}
 .ps-li{flex:none;flex-direction:column;transition:none}.ps-li.is-active{flex-grow:0}
 .ps-slice{flex:none;height:78px;transition:height .6s var(--ease)}.ps-li.is-active .ps-slice{height:min(54svh,400px)}
 .ps-v{writing-mode:horizontal-tb;transform:none;left:14px;bottom:auto;top:50%;margin-top:-.5em;font-size:clamp(22px,6vw,30px)}
 .ps-n{top:auto;bottom:14px;left:auto;right:14px}.ps-li.is-active .ps-n{top:12px;bottom:auto;left:12px;right:auto}
 .ps-cap{display:none;flex-direction:column;gap:4px;padding:14px 2px 10px}.ps-li.is-active .ps-cap{display:flex}
 .ps-cap b{font-weight:500;text-transform:none;letter-spacing:-.03em;line-height:1.04;font-size:clamp(27.88px,7.7vw,39.2px);font-family:var(--disp)}
 .ps-cap span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}.ps-cap .ps-capq{font-size:clamp(18px,5vw,22px);font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--black);line-height:1.2}
 .ps-more{align-self:flex-start;font-weight:800;border-bottom:2px solid var(--black);padding-bottom:2px;margin-top:6px}
 .pi{display:none}
 .dr{width:100vw}.dr-cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.ps-li,.ps-slice,.ps-slice img,.dr{transition:none!important}}