/* Final contrast and device-specific layout safeguards. */
.contrast-title {
  color: var(--black);
  mix-blend-mode: normal;
}

/* This word intentionally crosses the dark product field. */
.contrast-title i {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .62);
}

/* Keep the second line safely inside the viewport as the headline scales. */
.hero h1 i {
  margin-left: clamp(1.25rem, 7vw, 8rem);
}

@media (min-width: 701px) and (max-width: 1040px) {
  .hero h1 { font-size: clamp(84px, 13vw, 135px); }
  .watch { width: min(43vw, 410px); right: 16vw; }
  .orb { width: 76vw; right: -7vw; }
  .cards { gap: 12px; }
  .card { min-height: 430px; padding: 19px; }
  .card h3 { font-size: 31px; }
  .story h2 { max-width: 74%; }
}

@media (max-width: 700px) {
  nav { padding: 0 3vw; }
  nav .links { display: flex; gap: clamp(7px, 2vw, 14px); font-size: 8px; letter-spacing: .02em; }
  nav .circle { width: 25px; height: 25px; font-size: 12px; }
  nav .brand { font-size: 11px; letter-spacing: .16em; }
  .hero h1 { letter-spacing: -.075em; }
  .hero h1 i { margin-left: 1rem; }
  .contrast-title i { text-shadow: 0 1px 4px #000; }
}

@media (max-width: 430px) {
  .hero { min-height: 760px; padding-top: 18vh; }
  .hero h1 { font-size: 22vw; }
  .hero h1 i { margin-left: .5rem; }
  .hero-copy { max-width: 135px; font-size: 12px; }
  .watch { width: 70vw; right: 10vw; }
  .orb { width: 123vw; right: -42vw; }
  .heading { align-items: flex-start; gap: 24px; flex-direction: column; }
  .heading h2, .journal h2 { font-size: 16vw; }
  .facts { gap: 20px; }
  .facts b { font-size: 33px; }
  .end h2 { font-size: 19vw; }
  footer { font-size: 7px; }
}

@media (min-width: 1500px) {
  .hero { min-height: 900px; }
  .collection, .story, .journal { padding-left: max(4vw, calc((100vw - 1440px) / 2)); padding-right: max(4vw, calc((100vw - 1440px) / 2)); }
}


@media (max-width: 700px) { .hero h1 { width: 100%; max-width: 100%; font-size: clamp(58px, 19vw, 105px); letter-spacing: -0.085em; } .hero h1 i { display: block; width: max-content; max-width: 100%; margin-left: 0; font-size: 0.88em; letter-spacing: -0.08em; } } @media (max-width: 430px) { .hero h1 { font-size: clamp(56px, 18vw, 82px); } .hero h1 i { font-size: 0.86em; } }