/* ==========================================================================
   Hero block. Asymmetric editorial composition, variance 0.85.
   ========================================================================== */

.mi-hero { --mi-display: clamp(2.9rem, 9.4vw, 10.5rem); }

.mi-hero__inner {
  position: relative;
  z-index: 2;
  min-height: min(64svh, 600px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: var(--mi-md);
  padding-block: clamp(150px, 13.8vh, 174px) clamp(26px, 3.2vh, 42px);
}

@media (min-width: 900px) {
  .mi-hero__inner { grid-template-columns: repeat(12, 1fr); }
}

/* Positioning stamp, top left */
.mi-hero__stamp {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 0.9em;
}
.mi-hero__stamp::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(40px, 8vw, 120px);
  height: 1px;
  background: var(--mi-rule);
}
@media (min-width: 900px) { .mi-hero__stamp { grid-column: 1 / 7; } }

/* Headline */
.mi-hero__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
}
@media (min-width: 900px) { .mi-hero__title { grid-column: 1 / 11; } }

.mi-hero__title em { font-style: normal; }

/* Second tone of the headline: the poster sets this line in the accent. */
.mi-hero__sub {
  display: block;
  margin-top: clamp(12px, 1.5vw, 22px);
  font-size: clamp(1.05rem, 2.7vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mi-bronze);
  max-width: 22ch;
}

/* Supporting copy + actions, lower right. Deliberately offset from the title. */
.mi-hero__aside {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--mi-md);
  border-top: 1px solid var(--mi-rule);
  padding-top: var(--mi-md);
}
@media (min-width: 900px) {
  .mi-hero__aside { grid-column: 7 / 13; }
}

.mi-hero__aside .mi-body { max-width: 46ch; }

.mi-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-sm);
}

/* Rotating verbs, lower left */
.mi-hero__rotator {
  display: none;
  grid-row: 3;
  align-self: end;
  padding-bottom: var(--mi-md);
}
@media (min-width: 900px) {
  .mi-hero__rotator {
    display: block;
    grid-column: 1 / 6;
  }
}

.mi-rotator {
  position: relative;
  display: block;
  height: 1.35em;
  overflow: hidden;
  font-size: var(--mi-small);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mi-bronze);
}
.mi-rotator span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--mi-med) var(--mi-ease),
              transform var(--mi-med) var(--mi-ease);
}
.mi-rotator span.is-in { opacity: 1; transform: none; }
.mi-rotator span.is-out { opacity: 0; transform: translateY(-100%); }
/* No JS: first word shows. */
.mi-rotator span:first-child { opacity: 1; transform: none; }
.mi-js .mi-rotator span:first-child { opacity: 0; transform: translateY(100%); }
.mi-js .mi-rotator span:first-child.is-in { opacity: 1; transform: none; }

/* Custom scroll indicator: a travelling bronze segment on a hairline. */
.mi-hero__scroll {
  position: absolute;
  right: 0;
  bottom: var(--mi-md);
  display: none;
  align-items: center;
  gap: 0.9em;
  writing-mode: vertical-rl;
  font-size: var(--mi-small);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mi-mute);
}
@media (min-width: 900px) { .mi-hero__scroll { display: flex; } }

.mi-hero__track {
  position: relative;
  width: 1px;
  height: 96px;
  background: var(--mi-rule);
  overflow: hidden;
}
.mi-hero__track::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 34px;
  background: var(--mi-bronze);
  animation: mi-track 2.6s var(--mi-ease) infinite;
}
@keyframes mi-track {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(280%); }
  100% { transform: translateY(280%); }
}

/* Abstract figure: concentric hairline arcs, mouse-parallaxed. */
.mi-hero__figure {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(var(--mi-gutter) * -0.5);
  width: min(74vw, 900px);
  aspect-ratio: 1;
  translate: 0 -50%;
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
  transition: transform 1.2s var(--mi-ease);
}
.mi-hero__figure svg { display: block; width: 100%; height: 100%; }

@media (max-width: 899px) {
  .mi-hero__figure { opacity: 0.32; right: -30%; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-hero__track::after { animation: none; transform: none; }
  .mi-hero__figure { transition: none; }
  .mi-rotator { height: auto; overflow: visible; display: flex; gap: 1.4em; }
  .mi-rotator span { position: static; opacity: 1 !important; transform: none !important; }
}