/* Hero study: sunset-tone portrait (her-variations.html only).
   The image is pre-rendered on white in the brand's amber → rose inks with the shoulder fade baked in,
   so multiply lets the page paper and sunset glow show through instead of a cut-out edge. */
.w-hero--sunset {
  --hero-top: 120px; /* no 120 token; between --s-12 (96) and --s-13 (128) */
  grid-template-columns: minmax(0, 1fr) 542px; gap: var(--s-8);
  align-items: start; padding-top: var(--hero-top); padding-bottom: 0;
}
.w-hero--sunset .w-hero__head { gap: var(--s-4); }
.w-hero--sunset .w-lede { max-width: 600px; }
/* Artboard "sunset tone": portrait rides up beside the nav, right edge just inside the nav's edge */
.w-hero--sunset .w-hero__photo {
  aspect-ratio: 1; width: 542px; justify-self: end; align-self: start;
  margin: calc(var(--s-1) / 2 - var(--hero-top)) var(--s-2) 0 0;
}
.w-hero--sunset .w-hero__photo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: none; -webkit-mask-image: none; mask-image: none;
  mix-blend-mode: multiply; opacity: 1; /* reference portrait already carries its own ~80% alpha */
}
@media (max-width: 1279px) and (min-width: 1001px) {
  .w-hero--sunset { grid-template-columns: minmax(0, 1fr) 40%; }
  .w-hero--sunset .w-hero__photo { width: 100%; margin: calc(var(--s-1) / 2 - var(--hero-top)) 0 0; }
}
@media (max-width: 1000px) {
  .w-hero--sunset { grid-template-columns: 1fr; padding-top: var(--s-11); padding-bottom: 0; }
  .w-hero--sunset .w-hero__photo { width: min(100%, 440px); justify-self: center; margin: 0 auto; }
}
@media (max-width: 720px) {
  .w-hero--sunset .w-hero__photo { width: min(100%, 360px); }
}

/* Softer page glow, per the artboard (default 0.2) */
.warm-page .w-glow--top { opacity: .2; }

/* Hero chips + project tags: one orange for text and border, no elevation */
.w-hero--sunset .w-chips li { background: #FFFFFF; color: var(--accent-text); border-color: var(--accent-text); box-shadow: none; }
.project .tags .tag { color: var(--accent-text); border-color: var(--accent-text); }