/* ===================== HERO ===================== */
.hero { position: relative; overflow: hidden; }

/* shared hero pieces */
.hero__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.01em;
  margin: 0;
}
.hero__tagwords {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-weight: 700;
}
.hero__tagwords span { white-space: nowrap; }
.hero__title-strip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 800;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}
.era-chip {
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: 0.04em;
  padding: 4px 9px 2px; border-radius: 5px; font-size: 14px; line-height: 1;
}
.hero__cta { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; }
.hero__portrait { position: relative; }
.portrait-tag {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--paper-2); color: var(--ink);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 7px;
  border: 1px solid var(--line);
}

/* ---- A. SPOTLIGHT (dark, dramatic) ---- */
.hero--spotlight { background: var(--ink); color: var(--paper); padding: 0 0 38px; }
.hero--spotlight .hero__media {
  position: relative; height: 64vh; min-height: 460px; max-height: 620px;
}
.hero--spotlight image-slot, .hero--spotlight .hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--spotlight .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,18,15,.55) 0%, rgba(23,18,15,0) 26%, rgba(23,18,15,0) 52%, rgba(23,18,15,.9) 100%);
}
.hero--spotlight .topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
}
.hero--spotlight .hero__name {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 18px; z-index: 3;
  font-size: clamp(58px, 19vw, 116px); color: #fff;
}
.hero--spotlight .hero__name em {
  font-style: normal; color: var(--accent);
  display: block;
}
.hero--spotlight .below { padding: 26px var(--pad) 0; }
.hero--spotlight .hero__tagwords { color: var(--accent); margin-bottom: 18px; }
.hero--spotlight .lede { color: rgba(255,255,255,.74); font-size: 17px; max-width: 42ch; margin: 0; }

.brandmark {
  font-family: var(--font-display); font-size: 19px; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 8px;
}
.brandmark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---- B. MAGAZINE (editorial, paper) ---- */
.hero--magazine { background: var(--paper); color: var(--ink); padding: 30px 0 44px; }
.hero--magazine .topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px var(--pad) 30px;
}
.hero--magazine .lead-block { padding: 0 var(--pad); }
.hero--magazine .hero__name { font-size: clamp(54px, 17.5vw, 104px); margin-bottom: 14px; }
.hero--magazine .hero__name em { font-style: normal; color: var(--accent); display: block; }
.hero--magazine .hero__media { margin: 24px var(--pad) 0; position: relative; }
.hero--magazine image-slot, .hero--magazine .hero__img { width: 100%; height: 58vh; min-height: 420px; max-height: 560px; object-fit: cover; display: block; }
.hero--magazine .accent-rule { height: 5px; background: var(--accent); width: 64px; margin: 0 0 20px; }
.hero--magazine .lede { color: var(--ink-soft); font-size: 17px; max-width: 40ch; margin: 18px 0 0; }
.hero--magazine .frame-label {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 10px var(--pad) 0;
}

/* ---- C. MARQUEE (red, energetic) ---- */
.hero--marquee { background: var(--accent); color: #fff; padding: 0 0 40px; overflow: hidden; }
.hero--marquee .topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad); color: #fff;
}
.hero--marquee .brandmark .dot { background: #fff; }
.hero--marquee .strip {
  border-top: 1.5px solid rgba(255,255,255,.35);
  border-bottom: 1.5px solid rgba(255,255,255,.35);
  padding: 11px 0; margin: 6px 0 0;
}
.hero--marquee .strip .marquee__track {
  font-family: var(--font-display); font-size: 22px; text-transform: uppercase;
  letter-spacing: 0.03em; color: #fff;
}
.hero--marquee .strip .star { color: rgba(255,255,255,.6); }
.hero--marquee .lead-block { padding: 30px var(--pad) 0; }
.hero--marquee .hero__name { font-size: clamp(60px, 19vw, 120px); color: #fff; }
.hero--marquee .hero__name em { font-style: normal; -webkit-text-stroke: 2px #fff; color: transparent; display: block; }
.hero--marquee .hero__media { margin: 26px var(--pad) 0; position: relative; }
.hero--marquee image-slot, .hero--marquee .hero__img { width: 100%; height: 56vh; min-height: 400px; max-height: 540px; border: 3px solid #fff; object-fit: cover; display: block; }
.hero--marquee .lede { color: rgba(255,255,255,.9); font-size: 17px; max-width: 42ch; margin: 22px var(--pad) 0; }
.hero--marquee .hero__tagwords { color: rgba(255,255,255,.85); padding: 0 var(--pad); margin-top: 18px; }
.hero--marquee .btn--primary { background: #fff; color: var(--accent-deep); box-shadow: 0 12px 28px -12px rgba(0,0,0,.5); }
.hero--marquee .btn--primary:hover { background: var(--ink); color: #fff; }
.hero--marquee .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.hero--marquee .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); }

@media (min-width: 760px) {
  .hero--spotlight .hero__media { height: 78vh; max-height: 760px; }
  .hero--magazine { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 10px; }
  .hero--magazine .topbar { grid-column: 1 / -1; }
  .hero--magazine .hero__media { margin-top: 0; }
  .hero--magazine image-slot, .hero--magazine .hero__img { height: 72vh; max-height: 680px; }
  .hero--marquee .frame-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; }
}