/* The handful of rules that belong to one page rather than to the system. */

/* --- Hero: art direction ---------------------------------------------------
   Below the medium range the wide captures are replaced by their 3:4 crops, so
   a phone gets a composed frame rather than the middle of a landscape one. */

@media (max-width: 767px) {
  .hero {
    min-height: 92svh;
  }

  /* The display sizes are set from the viewport, so the longest line of the
     title ("TWO REALITIES.") fits a 360 px screen without a horizontal scroll.
     Everything below it wraps once the title stops widening the column. */
  .hero__title {
    font-size: clamp(2rem, 8.4vw, 3.2rem);
    letter-spacing: 0.055em;
  }

  .hero__pitch {
    font-size: var(--step-1);
    max-width: none;
  }

  .hero__actions .button {
    flex: 1 1 14rem;
  }

  .hero__veil {
    background:
      linear-gradient(180deg, rgb(3 6 9 / 0.7) 0%, rgb(3 6 9 / 0.15) 30%, rgb(3 6 9 / 0.94) 100%);
  }

  .tear-scene__layer img {
    object-position: 50% 38%;
  }
}

/* --- Media page ------------------------------------------------------------ */

.media-intro {
  display: grid;
  gap: var(--space-s);
  max-width: var(--measure);
}

.media-count {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  align-self: center;
  margin-left: auto;
}

.filters {
  align-items: center;
}

/* --- Press page ------------------------------------------------------------ */

.press-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.press-card {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-m);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface-1) 85%, transparent);
}

.press-card h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.press-card p {
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.copyable {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-m);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
  white-space: pre-wrap;
}

/* --- Privacy and other text pages ------------------------------------------
   Scoped to `main`: an unscoped `.text-page ul` also matched the header's
   navigation list and stacked it into a column down the page. */

.text-page main h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-s);
}

.text-page main h3 {
  font-size: var(--step-0);
  font-weight: 600;
  margin-top: var(--space-m);
  margin-bottom: var(--space-2xs);
}

.text-page main p,
.text-page main li {
  color: var(--ink-soft);
  max-width: var(--measure);
}

.text-page main ul {
  display: grid;
  gap: var(--space-2xs);
  padding-left: 1.2em;
  margin-top: var(--space-2xs);
}

/* --- 404 -------------------------------------------------------------------- */

.lost {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-xl) var(--gutter);
}

.lost__code {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--occupied-cyan);
}

.lost__title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--step-5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-block: var(--space-s);
}

.lost__inner {
  display: grid;
  gap: var(--space-s);
  justify-items: center;
  max-width: 52ch;
}