.hero { position: relative; background: var(--bg); padding-bottom: var(--space-7); }
.hero-stage {
  position: relative;
  height: clamp(600px, calc(100svh - 132px), 1080px);
  overflow: hidden;
  isolation: isolate;
}

.hero-name { font-weight: 400; }
.hero-name-top, .hero-name-bottom {
  position: absolute; left: 0; right: 0;
  font-family: var(--font-display);
  text-transform: uppercase; text-align: center;
  line-height: var(--lh-hero); letter-spacing: var(--track-display);
  white-space: nowrap; pointer-events: none;
}
.hero-name-top { top: calc(var(--nav-h) + 1vh); z-index: var(--z-stage); font-size: var(--fs-hero); color: var(--fg); }
.hero-name-bottom {
  bottom: 5%; z-index: var(--z-name-front);
  /* capped by stage height too, so the word stays below his chin on wide, short-ish desktops */
  font-size: max(4.4rem, min(20.5vw, 22rem, calc(clamp(600px, 100svh - 132px, 1080px) * 0.27)));
  color: var(--fg); mix-blend-mode: difference;
}

.hero-portrait {
  position: absolute; left: 50%; bottom: 0; z-index: var(--z-portrait);
  height: 84%; width: auto; max-width: none;
  translate: -50% 0;
  filter: grayscale(1) contrast(1.12) brightness(0.95);
  transition: filter var(--dur-slow) var(--ease-out);
  /* the image is a soft-edged cutout; this only feathers the jacket where it meets the frame edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  pointer-events: none;
}

.hero-ribbon {
  position: absolute; left: 0; top: 50%; z-index: var(--z-ribbon);
  width: 100%; height: 34%;
  overflow: visible; pointer-events: none;
}
.ribbon-band { fill: none; stroke: var(--fg); stroke-width: 58; }
.ribbon-text { font-family: var(--font-display); font-size: 34px; letter-spacing: 0.06em; fill: var(--bg); dominant-baseline: central; }

.hero-stage:hover .hero-portrait { filter: grayscale(0) contrast(1.04) brightness(1); }
/* ribbon is switched off via data-ribbon="off" on .hero; remove the attribute to bring it back */
.hero[data-ribbon="off"] .hero-ribbon { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.floater-field { position: absolute; inset: 0; z-index: var(--z-floaters); touch-action: pan-y; }
.floater {
  --w: 176px;
  position: absolute; top: 0; left: 0;
  width: var(--w);
  margin: 0; padding: 8px 8px 0;
  background: var(--paper);
  color: var(--paper-fg);
  border-radius: 6px;
  box-shadow: 0 18px 36px var(--shadow), 0 2px 0 var(--shadow-soft);
  cursor: grab; user-select: none; touch-action: none;
  will-change: transform;
}
.floater:hover img { filter: none; }
.floater.is-dragging { cursor: grabbing; box-shadow: 0 30px 60px var(--shadow); }
.floater img { width: 100%; height: auto; border-radius: 2px; filter: grayscale(1); transition: filter var(--dur-med); pointer-events: none; -webkit-user-drag: none; }
.floater figcaption { padding: 8px 2px 10px; line-height: 1.25; }
.floater figcaption strong { display: block; font-size: 0.8125rem; font-weight: 700; }
.floater figcaption span { display: block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-muted); }

.hero-meta {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: var(--space-5) var(--space-6); align-items: center;
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--border);
}
.hero-lede { font-size: var(--fs-lead); line-height: 1.4; max-width: 40ch; color: var(--muted); }
.hero-lede strong { color: var(--fg); font-weight: 600; }
.hero-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-chips li { padding: var(--space-1) var(--space-3); border: var(--border-w) solid var(--border); border-radius: var(--radius-pill); font-size: var(--fs-small); }

/* co-star marquee */
.marquee { background: var(--paper); color: var(--paper-fg); padding-block: var(--space-6) var(--space-5); overflow: hidden; }
.marquee-kicker { padding-inline: var(--gutter); color: var(--paper-muted); margin-bottom: var(--space-2); }
.marquee-window { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee-track span {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 7.5rem); line-height: 1.02; white-space: nowrap;
  padding-right: 0.35em;
}
.marquee-track span i { font-style: normal; color: var(--paper-border); padding-left: 0.35em; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 960px) {
  .hero-meta { grid-template-columns: 1fr; }
  .floater { --w: 128px; padding: 6px 6px 0; }
  .floater figcaption { padding: 6px 1px 8px; }
  .floater figcaption strong { font-size: 0.6875rem; }
}
@media (max-width: 600px) {
  .hero-stage { height: clamp(560px, 82svh, 760px); }
  .hero-portrait { height: 70%; }
  .hero-name-top { top: calc(var(--nav-h) + 4vh); }
  .hero-name-bottom { bottom: 9%; }
  .hero-ribbon { top: 58%; height: 26%; }
  .floater { --w: 104px; }
  .floater figcaption span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}