/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,5vw,70px);align-items:center;padding-top:110px}
.hero h1{margin:.32em 0 .34em}
.hero__kicker{display:inline-flex;align-items:center;gap:.55em;margin:0;padding:.42em 1em .42em .7em;border-radius:99px;border:1px solid rgba(182,222,200,.4);font-size:.96rem;font-weight:500}
.hero__kicker .ic{color:var(--em);font-size:1.05rem}
.hero__kicker .flag{font-size:1.05rem;margin-left:.15em}
.role{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:20px;margin:0 0 1.3em;max-width:37em}
.role__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;background:var(--em);color:var(--ink);font-size:1.6rem}
.role__ic:has(.crest){width:92px;height:102px;border-radius:0;background:none}
.role b{display:block;font-weight:600;font-size:1.2rem;color:#fff}
.role div span{display:block;font-size:1.02rem}
.role .now{margin:0}
.lead{font-size:clamp(1.02rem,1.3vw,1.18rem);max-width:36em;margin:0 0 1.6em}
.portrait{margin:0;justify-self:end;width:100%;max-width:440px}
.portrait div{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;border:1px solid rgba(182,222,200,.3);background:#07110d}
/* the photo is shown clean: framed by cropping only, no tint, no fade, no blur */
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform-origin:49% 45%;transform:scale(2.3)}
.portrait figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 6px 0}
.portrait figcaption b{font-weight:500;font-size:1.35rem;letter-spacing:-.02em;color:#fff}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .portrait{justify-self:stretch;max-width:none}
  .role{grid-template-columns:auto minmax(0,1fr)}
  .role .now{grid-column:2;justify-self:start}
}