/* ==========================================================================
   TYPOGRAPHY
   Jost Light carries every headline (brand book: "Light for headlines"),
   which is what gives the page its calm, unhurried voice. Weight is never
   used to shout; size and space do the work.
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--ink-body);
  background-color: var(--cream);
}

h1,
h2,
h3,
h4 {
  font-weight: 300;
  line-height: var(--leading-tight);
  color: var(--ink);
  letter-spacing: -0.01em;
  /* Long headings wrap in balanced lines and are never clipped. */
  text-wrap: balance;
  overflow-wrap: break-word;
}

h2 {
  font-size: var(--step-h2);
}

h3 {
  font-size: var(--step-h3);
}

p {
  max-inline-size: 66ch;
  text-wrap: pretty;
}

strong {
  font-weight: 500;
}

/* --- Eyebrow -----------------------------------------------------------
   The small spaced capitals the brand book opens every page with. Copper
   is deepened on cream and lightened on forest so it stays legible at
   this size (pure copper is ~3:1 on both grounds).
   ----------------------------------------------------------------------- */
.eyebrow {
  font-size: var(--step-micro);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  line-height: 1.6;
  color: var(--copper-strong);
  max-inline-size: none;
}

.eyebrow--on-dark {
  color: var(--copper-soft);
}

/* --- Inline link with arrow --------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  color: var(--ink);
  background-image: linear-gradient(var(--copper), var(--copper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-block-end: 2px;
  transition: background-size var(--dur-mid) var(--ease-out);
}

/* The arrow is the supplied character itself, nudged forward on hover. */
.link-arrow__mark {
  display: inline-block;
  color: var(--copper);
  transition: transform var(--dur-mid) var(--ease-out);
}

.link-arrow:hover .link-arrow__mark,
.link-arrow:focus-visible .link-arrow__mark {
  transform: translateX(4px);
}

/* "→" is not a mirrored glyph, so in RTL it is flipped explicitly to keep
   pointing in reading direction. */
[dir="rtl"] .link-arrow__mark {
  transform: scaleX(-1);
}

[dir="rtl"] .link-arrow:hover .link-arrow__mark,
[dir="rtl"] .link-arrow:focus-visible .link-arrow__mark {
  transform: scaleX(-1) translateX(4px);
}