@charset "UTF-8";

/* Blend the original photograph using a generated silhouette alpha mask. */
.portrait-card{width:100%;margin:0;overflow:visible;border:0;background:transparent;box-shadow:none}
.portrait-home{max-width:420px;justify-self:center;--portrait-surface:var(--navy);--portrait-light:rgba(198,214,221,.07)}
.portrait-about{max-width:340px;align-self:start;justify-self:center;--portrait-surface:var(--white);--portrait-light:rgba(160,147,128,.08)}
.portrait-figure{margin:0}

/* The top-aligned 4:4.2 crop retains the head and stops above the trousers. */
.portrait-frame{position:relative;isolation:isolate;width:100%;aspect-ratio:4/4.2;overflow:hidden;background:transparent;border:0;box-shadow:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.96) 84%,rgba(0,0,0,.62) 93%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.96) 84%,rgba(0,0,0,.62) 93%,transparent 100%);mask-mode:alpha}
.portrait-frame::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 53% 63%,var(--portrait-light) 0%,transparent 66%)}
.portrait-frame .portrait-image{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 0%;
  mask-mode:alpha;
  opacity:1;
  filter:none;
  -webkit-mask-image:url("/assets/portrait-edge-mask.svg");
  mask-image:url("/assets/portrait-edge-mask.svg");
  -webkit-mask-size:100% auto;
  mask-size:100% auto;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:50% 0%;
  mask-position:50% 0%;
}

/* A plain signature under the figure, with no caption panel. */
.portrait-caption{display:flex;align-items:baseline;justify-content:center;gap:12px;padding:12px 0 0;background:transparent;border:0;box-shadow:none;line-height:1.7}
.portrait-home .portrait-caption{color:var(--white)}
.portrait-about .portrait-caption{color:var(--ink)}
.portrait-name{font-family:var(--serif);font-size:var(--type-card-title);font-weight:500;letter-spacing:.04em}
.portrait-role{font-family:var(--sans);font-size:var(--type-body);font-weight:400}
.portrait-home .portrait-role{color:#cad5db}
.portrait-about .portrait-role{color:var(--muted)}

/* Keep the existing factual details, without restoring a card background. */
.portrait-details{padding:16px 0 0;color:var(--ink);background:transparent;border:0}
.portrait-details .portrait-firm,
.portrait-details .portrait-position,
.portrait-details .portrait-office{font-family:var(--sans);font-size:var(--type-small);line-height:1.8;letter-spacing:0;margin:0}
.portrait-details .portrait-position{margin-top:3px;color:var(--muted)}
.portrait-details .portrait-office{margin-top:12px;color:var(--muted)}
.portrait-details>.text-link{font-size:var(--type-action);margin-top:14px}

/* Legacy fallback: only the lower torso is covered, matching its page surface. */
@supports not ((mask-image:linear-gradient(#000,transparent)) or (-webkit-mask-image:linear-gradient(#000,transparent))){
  .portrait-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,transparent 78%,var(--portrait-surface) 100%)}
}

@media(max-width:800px){
  .portrait-home{max-width:420px}
  .portrait-about{max-width:340px}
  .portrait-caption{padding-top:10px}
  .portrait-details{padding-top:14px}
}