@font-face { font-family:'Portfolio Unbounded'; src:url('assets/fonts/hero/Unbounded-Variable.ttf') format('truetype'); font-weight:200 900; font-style:normal; font-display:swap; }
/* Studio-pose portrait draft, framed above the knees — 26 October 2026.
   AI-assisted face reference correction; see revision 27 for provenance. */
.with-photo-hero .nav {
  position:absolute; z-index:10; top:0; left:50%; transform:translateX(-50%);
  border-bottom:0; height:96px; color:#fffdf5;
}
.with-photo-hero .nav .wordmark { font-size:28px; }
.with-photo-hero .nav nav { font-size:13px; }
.with-photo-hero .nav nav a { text-shadow:0 1px 12px #0005; }
.hero.photo-hero { width:100%; max-width:none; padding:0; margin:0; }
.photo-hero .hero-stage {
  width:100%; height:100svh; min-height:680px; max-height:1080px;
  display:block; padding:0; background:linear-gradient(90deg,#514b42,#403b33 54%,#2d2b26); overflow:hidden; position:relative;
}
.photo-hero .portrait.has-portrait {
  display:block; position:absolute; inset:0; width:100%; height:100%;
  min-height:0; max-height:none; margin:0; transform:none; z-index:0;
}
.photo-hero .portrait picture {
  display:block; position:absolute; top:0; left:50%; transform:translateX(-50%);
  height:100%; width:auto; aspect-ratio:1024 / 1080; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.photo-hero .portrait img {
  display:block; position:absolute; inset:0 auto auto 0; width:100%; height:auto;
  object-fit:initial; object-position:center top; mask-image:none; filter:none;
}
.photo-hero .hero-stage::after {
  content:''; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(180deg,#17140f55 0%,transparent 20%,transparent 52%,#17140f99 100%);
}
.photo-hero .hero-introduction {
  position:absolute; top:26%; right:max(40px,calc((100vw - 1400px)/2)); z-index:3;
  width:clamp(175px,19vw,280px); display:block; padding:0;
}
.photo-hero .hero-introduction .hero-role {
  color:#fffdf5; font:400 clamp(28px,3.4vw,52px)/1.08 'Helvetica Neue',Arial,sans-serif;
  letter-spacing:-.04em; text-transform:none; margin:0 0 24px;
}
.photo-hero .hero-introduction>p:last-child {
  max-width:235px; font-size:13px; line-height:1.65; color:#fffdf5; text-align:left;
  text-shadow:0 1px 12px #0005;
}
.photo-hero h1 {
  position:absolute; z-index:3; inset:auto 0 78px; margin:0; padding:0 28px;
  width:100%; color:#fffdf5; white-space:nowrap; text-align:center;
  font:900 clamp(52px,8.25vw,190px)/1.16 'Portfolio Unbounded',Arial,sans-serif;
  letter-spacing:-.02em;
  translate:0 var(--hero-copy-y,0px);
}
.photo-hero h1 .name-first,.photo-hero h1 .name-last {
  display:inline-block; color:inherit; margin:0; padding:0 0 .04em;
}
.photo-hero h1 .name-first { margin-right:.24em; }
.photo-hero h1 .name-first>.reveal-line,.photo-hero h1 .name-last>.reveal-line { translate:none; }
.photo-hero .hero-bottom {
  position:absolute; z-index:3; inset:auto max(40px,calc((100vw - 1400px)/2)) 0;
  padding:22px 0; border-top:1px solid #fff5;
}
.photo-hero .hero-link { color:#fffdf5; font-size:11px; gap:18px; }
.photo-hero .hero-link span { color:#fffdf5; font-size:18px; }
.photo-hero .hero-link:hover,.photo-hero .hero-link:hover span { color:var(--lime); }
.photo-hero.intro-playing .portrait img { animation:photo-light-in .85s ease-out both; }
@keyframes photo-light-in { from {opacity:.65} to {opacity:1} }
.with-photo-hero .selected { padding-top:100px; }
@media(max-width:1000px) {
  .photo-hero .hero-stage { min-height:640px; }
  .photo-hero .hero-introduction { right:32px; top:24%; width:190px; }
  .photo-hero .hero-introduction>p:last-child { font-size:11px; }
  .photo-hero .hero-introduction .hero-role { margin-bottom:18px; }
}
@media(max-width:700px) {
  .with-photo-hero .nav { width:calc(100% - 40px); height:76px; }
  .with-photo-hero .nav .wordmark { font-size:24px; }
  .with-photo-hero .nav nav { gap:20px; font-size:11px; }
  /* The floor is only what the location pill, intro and name need (pill bottom + gap +
     intro + its 34.6vw offset), so short phones get a hero that fits the screen. */
  .photo-hero .hero-stage { min-height:calc(418px + 34.6vw); max-height:1000px; }
  .photo-hero .hero-introduction {
    top:auto; bottom:calc(34.6vw + 112px); left:20px; right:20px; width:auto;
    display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  }
  .photo-hero .hero-introduction .hero-role { font-size:21px; line-height:1.1; margin:0; }
  .photo-hero .hero-introduction>p:last-child { max-width:174px; font-size:10px; text-align:right; }
  .photo-hero h1 { bottom:76px; padding:0 20px; font-size:14vw; line-height:1.16; text-align:left; }
  .photo-hero h1 .name-first,.photo-hero h1 .name-last { display:block; margin:0; }
  .photo-hero .hero-stage::after { background:linear-gradient(180deg,#17140f66,transparent 20%,transparent 38%,#17140fb3 100%); }
  .photo-hero .hero-bottom { inset:auto 20px 0; padding-block:22px; }
  .photo-hero .hero-link { font-size:10px; }
  .with-photo-hero .selected { padding-top:64px; }
}
@media(max-width:380px) {
  .with-photo-hero .nav nav { gap:14px; }
  .photo-hero .hero-introduction>p:last-child { max-width:154px; font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  .photo-hero h1 { translate:none!important; }
  .photo-hero.intro-playing .portrait img { animation:none; }
}

/* Edge-attached location tab; the portrait and its above-knee crop are unchanged. */
.hero-location { position:absolute; z-index:3; left:0; top:43%; display:flex; align-items:center; gap:28px; padding:14px 14px 14px max(28px,calc((100vw - 1400px)/2)); background:#191c19; border-radius:0 100px 100px 0; color:#fffdf5; font:400 13px/1.4 'LM Work Sans',Arial,sans-serif; }
.hero-location strong { font-weight:400; }
.location-globe { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#ffffff1a; }
@media(max-width:700px) {
 .hero-location { top:110px; padding:10px 10px 10px 20px; gap:12px; font-size:11px; }
 .location-globe { width:36px; height:36px; }
}