/* v54.5 · People page. One card per employee in the ASML carousel (card styles shared with the
   workshops page in v55-ws.css). A card opens that person's full profile in a side panel.
   Panels work without JS through :target; v545-people.js adds focus handling, Esc and history. */

/* carousel section */
.pp-team{padding:112px 0 128px;scroll-margin-top:68px}
main .pp-team .w55-people__head h2{color:#0A3A8C;font-size:clamp(32px,3.4vw,48px);line-height:1.05}
.pp-hint{font-size:15px;line-height:1.55;color:#5A6288;margin:0}
.pp-team .w55-pc{flex-basis:320px;height:540px}
.pp-team .w55-pc img{object-position:50% 22%}
.pp-more{display:inline-flex;flex-direction:column;align-self:flex-start;padding-top:16px;font-size:15px;font-weight:700;color:#FFFFFF}
.pp-more .w55-bar{background:#22D3EE}

/* side panel */
.pp-dr{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none}
.pp-dr:target,.pp-dr.is-open{visibility:visible;pointer-events:auto}
html.pp-js .pp-dr:target:not(.is-open){visibility:hidden;pointer-events:none}
.pp-dr__scrim{position:absolute;inset:0;background:rgba(8,8,24,.58);opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1)}
.pp-dr__panel{position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(620px,100%);height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  background:#FFFFFF;box-shadow:-24px 0 60px rgba(10,58,140,.18);transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);
  display:block;padding:0;border:0;border-radius:0}
[dir=rtl] .pp-dr__panel{transform:translateX(-100%);box-shadow:24px 0 60px rgba(10,58,140,.18)}
.pp-dr:target .pp-dr__scrim,.pp-dr.is-open .pp-dr__scrim{opacity:1}
.pp-dr:target .pp-dr__panel,.pp-dr.is-open .pp-dr__panel{transform:none}
html.pp-js .pp-dr:target:not(.is-open) .pp-dr__panel{transform:translateX(100%)}
html.pp-lock{overflow:hidden}

.pp-dr__close{position:sticky;top:16px;z-index:2;display:flex;align-items:center;gap:10px;width:max-content;height:40px;padding:0 16px;
  margin:16px 16px -56px;margin-inline-start:auto;background:rgba(255,255,255,.94);box-shadow:0 2px 12px rgba(10,58,140,.14);
  color:#0A3A8C;font-weight:600;font-size:15px;text-decoration:none}
.pp-x{position:relative;width:16px;height:16px}
.pp-x::before,.pp-x::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:currentColor;transform:rotate(45deg)}
.pp-x::after{transform:rotate(-45deg)}
.pp-dr__close:hover{color:#072B6B}

.pp-dr__body{display:flex;flex-direction:column;gap:16px;padding:0 48px 56px}
.pp-dr__body>*{margin:0}
.pp-dr__body .person__portrait{margin:0 -48px 16px;aspect-ratio:4 / 3;background:#E9EBF2}
.pp-dr__body .person__portrait img{object-position:50% 22%}
.pp-dr__body .person__initials{display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0891B2 0%,#1F5FD1 60%,#0A3A8C 100%);color:rgba(255,255,255,.85);
  font-family:var(--font-display,"Outfit",sans-serif);font-size:120px;font-weight:700;line-height:1}
.pp-dr__body .person__id{display:flex;flex-direction:column-reverse;gap:8px}
.pp-dr__body .person__name{font-size:clamp(30px,3vw,40px);line-height:1.05;letter-spacing:-.02em;color:#0A3A8C}
.pp-dr__body .person__role{color:#0E7490;margin:0}
.pp-dr__body .person__career{font-size:19px;line-height:1.5;color:#1E2440;font-weight:500}
.pp-dr__body .person__bio{font-size:16px;line-height:1.7}
.pp-dr__body .person__focus{margin-top:4px}
.pp-dr__body .person__notes{margin-top:8px;padding-top:20px;border-top:1px solid #DCDDEE}
.pp-dr__body .person__contact{align-self:flex-start;font-weight:600;color:#0A3A8C}
.pp-dr__next{display:flex;flex-direction:column;align-self:stretch;margin-top:24px !important;padding-top:24px;border-top:1px solid #DCDDEE;text-decoration:none;color:#1E2440}
.pp-dr__next-k{font-size:13px;color:#5A6288}
.pp-dr__next-n{font-family:var(--font-display,"Outfit",sans-serif);font-size:22px;font-weight:700;color:#0A3A8C}
.pp-dr__next .w55-bar{background:#0891B2}
.pp-dr__next:hover .w55-bar{width:100%}
.pp-dr a:focus-visible{outline:3px solid #0891B2;outline-offset:3px}

@media (max-width:860px){
  .pp-team{padding:80px 0 96px}
  .pp-team .w55-pc{flex-basis:78vw;height:460px}
  .pp-dr__panel{width:100%}
  .pp-dr__close{margin:12px 12px -52px;margin-inline-start:auto}
  .pp-dr__body{padding:0 20px 40px}
  .pp-dr__body .person__portrait{margin:0 -20px 12px}
}
@media (prefers-reduced-motion:reduce){.pp-dr__scrim,.pp-dr__panel{transition:none}}