/* ==========================================================================
   STRAND INTERGALACTIC — TYPE ROLES
   Every rule here is composed from strand-design-tokens.css. No size,
   weight, tracking or family is written literally in this file, so the
   token file stays the single source of truth.

   The token scale is the DESKTOP anchor. Each display role is expressed as
   clamp(floor, fluid, var(--token)) so the token value is the ceiling and
   the page scales down from it. Line-height and letter-spacing are left as
   the tokens' own % / em values, which are ratios — they follow the
   computed font-size automatically at every breakpoint, exactly as the
   token file requires.

   The reference scale tops out at ~1600px viewport width (161px / 0.10
   = 1610), which is where the Figma frame's h1 lands 1:1.
   ========================================================================== */

/* ---- Wordmark -----------------------------------------------------------
   The wordmark must never wrap. It also cannot occupy 296px of a 320px
   phone, so instead of wrapping or restyling it, the whole lockup is scaled
   as one unit: --logo-scale multiplies both spans, which keeps the
   28 : 25 size relationship and the shared baseline exactly as specified.
   Above 560px the scale is 1 and both spans sit at their token size.        */
.logo-lockup { --logo-scale: 1; gap: calc(9px * var(--logo-scale)); }

.logo-lockup .logo-strand {
  font-family: var(--font-display);
  font-size: calc(var(--logo-strand-size) * var(--logo-scale));
  font-weight: var(--logo-strand-weight);
  line-height: var(--logo-strand-line-height);
  letter-spacing: var(--logo-strand-letter-spacing);
  color: var(--cta-blue);
}
.logo-lockup .logo-intergalactic {
  font-family: var(--font-display);
  font-size: calc(var(--logo-intergalactic-size) * var(--logo-scale));
  font-weight: var(--logo-intergalactic-weight);
  line-height: var(--logo-intergalactic-line-height);
  letter-spacing: var(--logo-intergalactic-letter-spacing);
  color: var(--gray-on-dark);
}
@media (max-width: 560px) { .logo-lockup { --logo-scale: .80; } }
@media (max-width: 400px) { .logo-lockup { --logo-scale: .66; } }

/* ---- Mono set: nav, CTA, eyebrow, data ---------------------------------- */
.t-nav {
  font-family: var(--font-mono);
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  line-height: var(--nav-line-height);
  letter-spacing: var(--nav-letter-spacing);
}
.t-cta {
  font-family: var(--font-mono);
  font-size: clamp(13px, .95vw, var(--cta-label-size));
  font-weight: var(--cta-label-weight);
  line-height: var(--cta-label-line-height);
  letter-spacing: var(--cta-label-letter-spacing);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11.5px, .95vw, var(--eyebrow-size));
  font-weight: var(--eyebrow-weight);
  line-height: var(--eyebrow-line-height);
  letter-spacing: var(--eyebrow-letter-spacing);
}
.t-data {
  font-family: var(--font-mono);
  font-size: clamp(12.5px, .95vw, var(--data-label-size));
  font-weight: var(--data-label-weight);
  line-height: var(--data-label-line-height);
  letter-spacing: var(--data-label-letter-spacing);
}

/* ---- Display set --------------------------------------------------------
   Headlines are set at the token sizes, which are large enough that a stray
   one-word last line is common; balance evens the lines out instead.        */
.t-h1, .t-h2, .t-h3 { text-wrap: balance; }

.t-h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 10vw, var(--h1-size));
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}
.t-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.7vw, var(--h2-size));
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}
.t-h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.9vw, var(--h3-size));
  font-weight: var(--h3-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}
.t-subhead {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.75vw, var(--subhead-size));
  font-weight: var(--subhead-weight);
  line-height: var(--subhead-line-height);
  letter-spacing: var(--subhead-letter-spacing);
}

/* Two smaller display titles — card heads and list heads. The scale has no
   step between Subhead (28) and Body 1 (26), so these borrow the Body 2 and
   Body 3 SIZES and pair them with the Subhead weight and tracking. Composed
   from tokens only; no new literal values. */
.t-title-s {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.45vw, var(--body-2-size));
  font-weight: var(--subhead-weight);
  line-height: var(--subhead-line-height);
  letter-spacing: var(--subhead-letter-spacing);
}
.t-title-xs {
  font-family: var(--font-display);
  font-size: clamp(16.5px, 1.2vw, var(--body-3-size));
  font-weight: var(--subhead-weight);
  line-height: var(--subhead-line-height);
  letter-spacing: var(--subhead-letter-spacing);
}

/* ---- Body set ----------------------------------------------------------- */
.t-body-1 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.62vw, var(--body-1-size));
  font-weight: var(--body-1-weight);
  line-height: var(--body-1-line-height);
  letter-spacing: var(--body-1-letter-spacing);
}
.t-body-2 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.44vw, var(--body-2-size));
  font-weight: var(--body-2-weight);
  line-height: var(--body-2-line-height);
  letter-spacing: var(--body-2-letter-spacing);
}
.t-body-3 {
  font-family: var(--font-display);
  font-size: clamp(15.5px, 1.19vw, var(--body-3-size));
  font-weight: var(--body-3-weight);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
}