/* ── Font faces ─────────────────────────────────── */
@font-face {
  font-family: 'Jost';
  src: url('./fonts/jost/Jost-200-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('./fonts/jost/Jost-300-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('./fonts/jost/Jost-300-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('./fonts/jost/Jost-500-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('./fonts/jost/Jost-700-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('./fonts/jost/Jost-700-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════
   Vertical Rhythm System
   Display : Jost (thinItalic) — SIL OFL
   Body    : Jost (light) — SIL OFL
   Scale   : Perfect Fourth (1.333)
   Base    : 16px × 1.50 = 24.0px grid unit
   LH      : display 1.00, tension 2.0
   Spacing : ×1.00 scale
   Units   : rem (root anchor stays px)
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Fonts ── */
  --font-display : 'Jost', system-ui, sans-serif;
  --font-body    : 'Jost', system-ui, sans-serif;

  /* ── Parameters (edit these two to rescale spacing live) ── */
  --vr-base : 16px;
  --vr-lh   : 1.50;
  --vr-grid : calc(1rem * var(--vr-lh)); /* 24.0px at 16px root */

  /* ── Font sizes (baked — CSS has no pow()) ── */
  --fs-overline  : 0.5628rem; /* step -2 */
  --fs-display   : 5.6102rem; /* step +6 */
  --fs-title     : 4.2087rem; /* step +5 */
  --fs-pullquote : 2.3686rem; /* step +3 */
  --fs-heading   : 2.3686rem; /* step +3 */
  --fs-subheading: 1.7769rem; /* step +2 */
  --fs-lead      : 1.3330rem; /* step +1 */
  --fs-body      : 1.0000rem; /* step +0 */
  --fs-caption   : 0.7502rem; /* step -1 */
  --fs-label     : 0.5628rem; /* step -2 */

  /* ── Line heights (baked — ease-out interpolation) ── */
  --lh-overline  : 1.500;
  --lh-display   : 1.000;
  --lh-title     : 1.046;
  --lh-pullquote : 1.247;
  --lh-heading   : 1.247;
  --lh-subheading: 1.346;
  --lh-lead      : 1.430;
  --lh-body      : 1.500;
  --lh-caption   : 1.500;
  --lh-label     : 1.500;

  /* ── Spacing — live calc, adapts when --vr-base/--vr-lh change ── */
  --mb-overline  : calc(var(--vr-grid) * 0.500); /* 12.0px */
  --mb-display   : calc(var(--vr-grid) * 3.000); /* 72.0px */
  --mb-title     : calc(var(--vr-grid) * 2.500); /* 60.0px */
  --mb-pullquote : calc(var(--vr-grid) * 2.000); /* 48.0px */
  --mb-heading   : calc(var(--vr-grid) * 1.750); /* 42.0px */
  --mb-subheading: calc(var(--vr-grid) * 1.250); /* 30.0px */
  --mb-lead      : calc(var(--vr-grid) * 1.250); /* 30.0px */
  --mb-body      : calc(var(--vr-grid) * 1.000); /* 24.0px */
  --mb-caption   : calc(var(--vr-grid) * 0.750); /* 18.0px */
  --mb-label     : calc(var(--vr-grid) * 0.500); /* 12.0px */

  /* ── Colour — near-black stage-dark, near-white ink,
       a muted magenta/cyan gel duo, subtler than full neon ── */
  --color-bg        : hsl(255, 26%, 7%);
  --color-text      : hsl(250, 25%, 96%);
  --color-text-muted: hsl(250, 14%, 70%);
  --color-accent    : hsl(322, 55%, 66%); /* muted magenta gel */
  --color-accent-2  : hsl(187, 42%, 60%); /* muted cyan gel */
  --color-line      : hsl(250, 25%, 96%, 0.14);

  /* ── Mega title (bold, two lines, fluid) ──
       Sized in cqi (% of .intro's own box), not vw: .intro is only
       one half of a two-column layout, so a viewport-relative size
       was routinely wider than the column itself and ran straight
       into the links column / divider beam next to it. ── */
  --fs-mega  : clamp(2.75rem, 1rem + 20cqi, 9rem);
  --lh-mega  : 0.85;
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text);
  background:
    radial-gradient(56rem 56rem at 100% 0%, hsl(322 55% 66% / 0.09), transparent 60%),
    radial-gradient(56rem 56rem at 0% 100%, hsl(187 42% 60% / 0.08), transparent 60%),
    var(--color-bg);
  background-attachment: fixed;
  font-size: var(--vr-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Text classes ──────────────────────────────────── */
.text-overline {
  font-size:     var(--fs-overline);
  line-height:   var(--lh-overline);
  margin-bottom: var(--mb-overline);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
}

.text-display {
  font-family: var(--font-display);
  font-size:     var(--fs-display);
  line-height:   var(--lh-display);
  margin-bottom: var(--mb-display);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
}

.text-title {
  font-size:     var(--fs-title);
  line-height:   var(--lh-title);
  margin-bottom: var(--mb-title);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.text-heading {
  font-size:     var(--fs-heading);
  line-height:   var(--lh-heading);
  margin-bottom: var(--mb-heading);
  font-weight: 500;
}

.text-subheading {
  font-size:     var(--fs-subheading);
  line-height:   var(--lh-subheading);
  margin-bottom: var(--mb-subheading);
  font-weight: 400;
}

.text-lead {
  font-size:     var(--fs-lead);
  line-height:   var(--lh-lead);
  margin-bottom: var(--mb-lead);
  font-weight: 300;
}

.text-caption {
  font-size:     var(--fs-caption);
  line-height:   var(--lh-caption);
  margin-bottom: var(--mb-caption);
  font-weight: 400;
  color: var(--color-text-muted);
}

.text-label {
  font-size:     var(--fs-label);
  line-height:   var(--lh-label);
  margin-bottom: var(--mb-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

/* ── Page layout ────────────────────────────────────── */
.page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: calc(var(--vr-grid) * 2.5);
  max-width: 72rem;
  margin-inline: auto;
  padding: calc(var(--vr-grid) * 2.5) calc(var(--vr-grid) * 1.5);
}

/* ── Title + subtitle ───────────────────────────────── */
.intro {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  /* establishes the box that --fs-mega's cqi units measure against */
  container-type: inline-size;
}

.title-mega {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: var(--lh-mega);
  letter-spacing: -0.03em;
  margin: -2rem 0 calc(var(--vr-grid) * 1.25);
  /* new block-formatting context: keeps the negative margins below
     used to fix glyph clipping contained inside this element,
     instead of leaking out and shifting the subtitle underneath */
  display: flow-root;
}

.title-mega span {
  display: block;
}

.title-mega .name-first {
  font-weight: 700;
  font-style: normal;
  color: var(--color-text);
}

.title-mega .name-last {
  font-weight: 700;
  font-style: italic;
  color: var(--color-accent);
  /* background-clip:text only paints inside the border-box, but the
     bold italic glyphs' ink overhangs past their box on the bottom
     and right (italic slant + tight line-height). Pad the box out
     on those sides so the ink has room, then pull it back in with
     an equal negative margin so line spacing stays tight. At very
     tight line-heights (< ~0.9) the deficit between the line box
     and the glyphs' actual ink grows, so top/bottom padding scale
     with how far below "normal" --lh-mega sits. */
  padding: 0.3em 0.16em 0.3em 0.03em;
  margin: -0.3em -0.16em -0.36em -0.03em;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .title-mega .name-last {
    background-image: linear-gradient(120deg, var(--color-accent), var(--color-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.subtitle {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 300;
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 26ch;
}

/* ── Links / CTAs ───────────────────────────────────── */
.links {
  position: relative;
  padding-left: calc(var(--vr-grid) * 2.5);
}

.links::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
  box-shadow:
    0 0 1.2rem 0.05rem hsl(322 55% 66% / 0.22),
    0 0 1.6rem 0.1rem hsl(187 42% 60% / 0.16);
}

.links ul {
  display: grid;
  gap: calc(var(--vr-grid) * 1.25);
}

.link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 1rem + 1.2vw, var(--fs-subheading));
  line-height: var(--lh-subheading);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.15s ease;
}

.link .arrow {
  font-weight: 300;
  color: var(--color-accent-2);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.link:hover,
.link:focus-visible {
  color: var(--color-accent);
}

.link:hover .arrow,
.link:focus-visible .arrow {
  transform: translateX(0.3em);
}

.link:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 8px;
}

.link-label {
  display: flex;
  flex-direction: column;
}

.link-label .line {
  display: block;
}

.link--pending {
  align-items: center;
  color: var(--color-text-muted);
  cursor: default;
}

.link--pending .text-label {
  color: var(--color-accent-2);
  margin: 0;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .link, .link .arrow { transition: none; }
}

/* ── Mid / small screens ────────────────────────────── */
@media (max-width: 56rem) {
  .page {
    grid-template-columns: 1fr;
    row-gap: calc(var(--vr-grid) * 2.5);
    align-content: center;
    padding-block: calc(var(--vr-grid) * 2);
  }

  .intro {
    align-items: flex-start;
    text-align: left;
  }

  .links {
    padding-left: calc(var(--vr-grid) * 1.5);
  }

  .subtitle { max-width: 34ch; }
}