.hero { padding-top: clamp(2.5rem, 6vw, 5.5rem); }
.hero-top {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end;
}
.hero h1 { margin-top: 1.4rem; }
.hero.is-long h1 { font-size: clamp(2.5rem, 1.1rem + 5.2vw, 5.4rem); }
@media (min-width: 961px) { .hero.is-long .hero-top { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero h1 .line > span { display: inline-block; animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
.hero-intro { display: grid; gap: 1.75rem; padding-bottom: 0.6rem; animation: fade-up 1s var(--ease) 0.35s both; }
.hero .eyebrow { animation: fade-up 0.9s var(--ease) both; }

.hero-media {
  position: relative; margin-top: clamp(2.25rem, 5vw, 4.25rem);
  border-radius: var(--radius-l); overflow: hidden; isolation: isolate;
  height: clamp(22rem, 46vw, 41rem);
  background: var(--tint);
  animation: unveil 1.4s var(--ease) 0.25s both;
}
.hero-media > img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; object-position: var(--focus, 50% 50%);
  transform: translate3d(0, calc(var(--parallax, 0) * 1px), 0) scale(1.02);
  will-change: transform;
}
.hero-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(200deg, transparent 55%, rgb(0 0 0 / 0.28));
}
.hero-caption {
  position: absolute; left: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem); z-index: 2;
  max-width: 15em; color: #fff8ea;
  font: italic 340 clamp(1.25rem, 2.1vw, 1.9rem) / 1.15 var(--font-display); letter-spacing: -0.01em;
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.45);
}

/* Live feed card */
.feed {
  --feed-bg: color-mix(in srgb, var(--surface) 86%, transparent);
  position: absolute; right: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem); z-index: 2;
  width: min(23rem, calc(100% - 2rem));
  padding: 1.1rem 1.2rem 0.9rem;
  border-radius: var(--radius-m); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--feed-bg); color: var(--ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.45);
  animation: fade-up 1s var(--ease) 0.9s both;
}
.feed-head { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.feed-head b { flex: 1; }
.feed-head time { font-feature-settings: 'tnum'; color: var(--muted); }
.pulse { position: relative; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--salmon); }
.pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2.4s ease-out infinite; }
.feed-list { display: grid; height: 11.4rem; overflow: hidden; align-content: start; }
.feed-list li {
  display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.75rem; align-items: center;
  height: 3.8rem; border-bottom: 1px solid var(--line);
  font-size: 0.9rem; line-height: 1.3;
}
.feed-list li:last-child { border-bottom: 0; }
.feed-list li.is-new { animation: feed-in 0.7s var(--ease) both; }
.feed-list li span { display: block; color: var(--muted); font-size: 0.82rem; }
.feed-icon {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.feed-icon svg { width: 1.05rem; height: 1.05rem; }
.feed-foot { padding-top: 0.6rem; border-top: 1px solid var(--line); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); }

/* Facts under the hero */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(1.25rem, 3vw, 3rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.facts li { padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--muted); }
.facts b { display: block; margin-bottom: 0.25rem; color: var(--ink); font: 450 var(--step-1) / 1.2 var(--font-display); letter-spacing: -0.01em; }

@keyframes rise { from { transform: translateY(110%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes unveil { from { clip-path: inset(12% 6% 0 6% round 32px); opacity: 0; } to { clip-path: inset(0 round var(--radius-l)); opacity: 1; } }
@keyframes ping { 70%, 100% { transform: scale(3.2); opacity: 0; } 0% { opacity: 0.6; } }
@keyframes feed-in { from { opacity: 0; transform: translateY(-60%); } }

@media (max-width: 960px) {
  .hero-top { grid-template-columns: 1fr; align-items: start; }
  .facts { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
}
@media (max-width: 640px) {
  .hero-media { height: auto; overflow: visible; background: none; border-radius: 0; }
  .hero-media > img { position: static; height: 17rem; border-radius: var(--radius-l); transform: none; }
  .hero-media::after, .hero-caption { display: none; }
  .feed { position: relative; right: auto; bottom: auto; width: auto; margin: -3.5rem 0.75rem 0; }
}