/* ─── Homepage topper ─────────────────────────────────────────────
   Styles for the featured-company marquee rendered by hero.js, plus
   the headline and the "lens" prose that sit above and below it.
   Everything leans on styles.css tokens (spacing, radii, type sizes,
   --pad-x, --paper) and the cover palette's lavender / lime. */

:root {
  --hero-lav: #c8a8ff;
  --hero-lime: #d1ef59;
  --hero-ground: #1a0808;
}

/* The promo pill is hidden on the live site. */
.join-pill {
  display: none;
}

/* ── Headline ─────────────────────────────────────────────────── */

/* Stay inside the .page column (styles.css breaks the h1 out to
   1200px); wrap pretty within it. */
.hero h1 {
  position: static;
  transform: none;
  width: auto;
  max-width: none;
  text-wrap: pretty;
}

.hero__accent {
  color: var(--hero-lav);
}

.hero__sub {
  margin: var(--space-s) auto 0;
  max-width: 36em;
  text-align: center;
  text-wrap: balance;
  font-size: var(--t-body);
  line-height: 1.5;
  opacity: 0.85;
}

/* ── Page rhythm ──────────────────────────────────────────────── */

/* The headline sits one XL step below the nav and one XL step above
   the marquee. The nav's own bottom margin (styles.css) would add to
   the page's XL top padding and make the space above the headline
   larger than the space below it, so it is dropped here. */
.site-nav {
  margin-bottom: 0;
}

.page {
  gap: var(--space-xl);
}

/* Full bleed: the marquee runs edge to edge of the viewport. */
.hero-stage {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}

/* Prose under the module: the lead matches the headline, the body
   matches the headline's sub, and the lead → body gap matches the
   headline → sub gap, so the three blocks read as one rhythm. */
.prose {
  gap: var(--space-s);
}

.prose .prose__lead {
  font-size: var(--t-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* ── Lens: lead, three focus panels, closing paragraph ────────── */

.lens__accent {
  color: var(--hero-lime);
  /* Same crossfade as body's palette change (styles.css). */
  transition: color 0.6s ease;
}

/* Lime fails contrast on the cream palette, so once the section
   tracker moves past the cover the accent drops to the body ink. */
body.is-past-cover .lens__accent {
  color: inherit;
}

/* Three panels in the About cards' recipe (.stats__item in styles.css):
   warm white surface (--paper-warm), dark ink, one XS step of padding
   all round. */
.lens__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 18px);
}

.lens__row {
  padding: var(--space-xs);
  border-radius: var(--radius-m);
  background: var(--paper-warm);
  border: 1px solid rgba(15, 20, 25, 0.1);
  color: var(--ink);
}

/* Heading on its own line, synthesized bold (PP Mori ships one weight;
   the site does the same for <strong>), full ink; description below. */
.lens__title,
.lens__desc {
  margin: 0;
  font-family: var(--font-sans);
  /* Fixed sizes, not fluid: 13px body in the stacked phone panel,
     15px in the three-up row (see the min-width block below); the
     title sits one step above the body at each. */
  font-size: 13px;
  line-height: 1.5;
}

.lens__title {
  margin-bottom: var(--inset-s);
  /* PP Mori ships only a regular cut, so a 700 weight would be
     browser-synthesized and renders smeared. Keep the real face and
     let the title lead by colour: full ink against the description's
     75% opacity. */
  font-weight: 400;
  font-synthesis: none;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  text-wrap: pretty;
}

/* Same size as the card captions (.hs-line). */
.lens__desc {
  opacity: 0.55;
  text-wrap: pretty;
}

/* Closing paragraph: same spec as the hero sub, one M step below the
   panels (the prose gap supplies the S). */
.lens__foot {
  margin: calc(var(--space-m) - var(--space-s)) 0 0;
  max-width: 36em;
  text-wrap: pretty;
  font-size: var(--t-body);
  line-height: 1.5;
  opacity: 0.85;
}

/* ── Card primitives ──────────────────────────────────────────── */

.hs-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  /* No ground colour of its own: a fractional 16:9 height can leave a
     sub-pixel row under the frame, and on the section surface that
     row must be the section colour, not a darker hairline. */
  background: transparent;
}

.hs-media img,
.hs-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hs-media video {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.hs-media.is-playing video {
  opacity: 1;
}

/* Companies without a clip get a slow push-in on the poster while
   their card is on screen, so stills don't read as dead. */
.hs-media--still.is-active img {
  animation: hsKenBurns 14s ease-in-out infinite alternate;
}

@keyframes hsKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.hs-lockup {
  display: flex;
  align-items: center;
  gap: 0.4em;
  height: 22px;
  color: inherit;
}

.hs-lockup svg {
  height: 100%;
  width: auto;
  display: block;
}

.hs-lockup__text {
  font-family: var(--font-serif);
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Caption on the left, Visit on the right, on one baseline, flush
   with the media's edges. */
.hs-meta {
  padding: 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.hs-line {
  margin: 0;
  font-size: var(--t-nav);
  line-height: 1.4;
  opacity: 0.8;
}

/* Visit shows only while its card is hovered (or focused by keyboard);
   on touch a tap on the card opens it (hero.js adds is-open).
   Opacity, not display, so the caption row never reflows. */
.hs-visit {
  display: block;
  flex: 0 0 auto;
  font-size: var(--t-nav);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  opacity: 0;
}

.hs-d__card:focus-within .hs-visit,
.hs-d__card.is-open .hs-visit {
  opacity: 1;
}

@media (hover: hover) {
  .hs-d__card:hover .hs-visit {
    opacity: 1;
  }
}

/* ── Marquee ──────────────────────────────────────────────────── */

.hs-d__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
}

.hs-d__scroller::-webkit-scrollbar {
  display: none;
}

.hs-d__scroller.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.hs-d__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-s);
  width: max-content;
}

.hs-d__card {
  flex: 0 0 auto;
  width: clamp(300px, 30vw, 440px);
}

/* Wordmark top-left above the clip. --lockup-scale is the per-company
   optical correction from the data (heavy all-caps marks read bigger
   than light serif ones at the same cap height). */
.hs-d__head {
  display: flex;
  align-items: center;
  height: clamp(22px, 2.3vw, 30px);
  margin-bottom: 12px;
}

.hs-d__head .hs-lockup {
  height: calc(clamp(18px, 1.8vw, 24px) * var(--lockup-scale, 1));
  color: inherit;
}

/* ── Three-up row (tablet and up) ────────────────────────────── */

@media (min-width: 821px) {
  .lens__desc {
    font-size: 15px;
  }

  .lens__title {
    font-size: 17px;
  }

  /* Let the row hang past the text column so the outer cards sit
     proud of the copy above and below. Up to 72px a side, but never
     closer than 16px to the viewport edge. */
  .lens__list {
    margin-inline: calc(-1 * min(72px, (100vw - var(--col)) / 2 - 16px));
    gap: clamp(16px, 1.8vw, 24px);
  }

  .lens__row {
    padding: clamp(22px, 2.2vw, 30px);
  }
}

/* ── Phones ───────────────────────────────────────────────────── */

@media (max-width: 820px) {
  /* Stacked: the three cards collapse into one panel. The list takes
     the card chrome; rows lose theirs and are separated by a rule. */
  .lens__list {
    grid-template-columns: 1fr;
    gap: 0;
    border-radius: var(--radius-m);
    background: var(--paper-warm);
    border: 1px solid rgba(15, 20, 25, 0.1);
    overflow: hidden;
  }

  .lens__row {
    border-radius: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(15, 20, 25, 0.1);
  }

  .lens__row:last-child {
    border-bottom: 0;
  }

  /* Stacked cards: heading sits tight on its description. */
  .lens__title {
    margin-bottom: 6px;
  }
}

/* ── Reduced motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hs-media--still.is-active img {
    animation: none;
  }
}