.universe-page { background: var(--paper); }
.universe-hero { position: relative; min-height: min(54rem, 100svh); display: grid; align-items: end; padding-block: clamp(9rem, 17vh, 13rem) clamp(4rem, 9vh, 7rem); overflow: hidden; background: var(--hero-bg); color: var(--hero-fg); }
.universe-hero::before, .universe-hero::after { content: ""; position: absolute; pointer-events: none; }
.universe-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); gap: clamp(3rem, 8vw, 8rem); align-items: end; }
.universe-hero .eyebrow { margin-bottom: 1.4rem; }
.universe-hero .display-title { max-width: 10ch; }
.universe-hero .display-title span { color: var(--accent); }
.universe-hero__lead { max-width: 39rem; margin-bottom: 2rem; color: var(--hero-muted); font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.hero-signal { position: relative; min-height: 23rem; display: grid; align-content: space-between; padding: 1.5rem; border: 1px solid color-mix(in srgb, var(--hero-fg) 22%, transparent); overflow: hidden; }
.hero-signal__top { display: flex; justify-content: space-between; color: var(--hero-muted); font: 700 .66rem/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase; }
.hero-signal__index { position: relative; z-index: 2; color: var(--accent); font: 530 clamp(5rem, 10vw, 9rem)/.8 var(--font-display); letter-spacing: -.08em; }
.hero-signal__line { position: absolute; z-index: 1; background: var(--accent); }
.hero-signal__line--a { top: 30%; right: 0; left: 0; height: .15rem; transform: rotate(-18deg) scaleX(1.3); }
.hero-signal__line--b { top: 0; bottom: 0; left: 62%; width: .15rem; transform: rotate(12deg) scaleY(1.2); }
.hero-signal__dot { position: absolute; top: 27%; left: 54%; z-index: 2; width: .9rem; height: .9rem; border: .22rem solid var(--hero-bg); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .1rem var(--accent); }
.hero-meta { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid color-mix(in srgb, var(--hero-fg) 18%, transparent); }
.hero-meta span { padding: 1rem 1rem 0 0; color: var(--hero-muted); font: 680 .66rem/1.4 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }

.intro-layout { display: grid; grid-template-columns: minmax(10rem, .55fr) minmax(0, 1.45fr); gap: clamp(2rem, 8vw, 9rem); align-items: start; }
.intro-layout__aside { position: sticky; top: 8rem; }
.intro-layout__copy .section-title { max-width: 14ch; }
.intro-layout__copy > p { max-width: 47rem; color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.28rem); }
.intro-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.intro-point { padding-top: 1rem; border-top: .18rem solid var(--accent); }
.intro-point strong { display: block; margin-bottom: .35rem; font-family: var(--font-display); }
.intro-point span { color: var(--muted); font-size: .88rem; }

.catalogue-empty { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); background: var(--white); }
.catalogue-empty h3 { margin-bottom: .5rem; font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -.04em; }
.catalogue-empty p { max-width: 45rem; margin: 0; color: var(--muted); }
.catalogue-empty__stamp { width: 8rem; aspect-ratio: 1; display: grid; place-items: center; border: .18rem solid var(--accent); border-radius: 50%; color: var(--accent); font: 730 .62rem/1.35 var(--font-display); letter-spacing: .1em; text-align: center; text-transform: uppercase; transform: rotate(7deg); }

/* Baseline mobile-first. */
.universe-hero { min-height: auto; padding-top: 8.25rem; }
.universe-hero__grid { grid-template-columns: 1fr; }
.hero-signal { min-height: 14rem; }
.hero-meta { grid-template-columns: 1fr; }
.hero-meta span { padding-block: .7rem; border-bottom: 1px solid color-mix(in srgb, var(--hero-fg) 12%, transparent); }
.intro-layout { grid-template-columns: 1fr; }
.intro-layout__aside { position: static; }
.intro-points { grid-template-columns: 1fr; }
.catalogue-empty { grid-template-columns: 1fr; }
.catalogue-empty__stamp { width: 6.5rem; }

@media (min-width: 42rem) {
  .universe-hero { padding-top: clamp(9rem, 17vh, 13rem); }
  .hero-signal { min-height: 17rem; }
  .hero-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-meta span { padding: 1rem 1rem 0 0; border-bottom: 0; }
  .intro-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue-empty { grid-template-columns: minmax(0, 1fr) auto; }
  .catalogue-empty__stamp { width: 8rem; }
}

@media (min-width: 62.01rem) {
  .universe-hero { min-height: min(54rem, 100svh); }
  .universe-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); }
  .hero-signal { min-height: 23rem; }
  .intro-layout { grid-template-columns: minmax(10rem, .55fr) minmax(0, 1.45fr); }
  .intro-layout__aside { position: sticky; }
}