/* ============================================================
   Base — reset + typography defaults
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@200;300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  background: var(--ld-bg);
  color: var(--ld-ink);
  font-family: var(--ld-font-body);
  font-size: var(--ld-fs-body);
  line-height: var(--ld-lh-body);
  font-weight: var(--ld-w-regular);
  letter-spacing: var(--ld-tracking-snug);
  font-feature-settings: "ss01", "cv11";
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--ld-dur-1) var(--ld-ease); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

/* ---- Display typography ---- */
.ld-display, .ld-hero, .ld-h1, .ld-h2, .ld-h3 {
  font-family: var(--ld-font-display);
  font-weight: var(--ld-w-light);
  letter-spacing: var(--ld-tracking-display);
  line-height: var(--ld-lh-display);
  text-wrap: balance;
}
.ld-display { font-size: var(--ld-fs-display); }
.ld-hero    { font-size: var(--ld-fs-hero);    line-height: var(--ld-lh-tight); }
.ld-h1      { font-size: var(--ld-fs-h1);      line-height: var(--ld-lh-tight); letter-spacing: var(--ld-tracking-tight); }
.ld-h2      { font-size: var(--ld-fs-h2);      line-height: var(--ld-lh-tight); letter-spacing: var(--ld-tracking-tight); font-weight: var(--ld-w-regular); }
.ld-h3      { font-size: var(--ld-fs-h3);      line-height: var(--ld-lh-snug);  letter-spacing: var(--ld-tracking-snug); font-weight: var(--ld-w-medium); }

.ld-eyebrow {
  font-family: var(--ld-font-mono);
  font-size: var(--ld-fs-eyebrow);
  font-weight: var(--ld-w-medium);
  letter-spacing: var(--ld-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ld-mute);
}
.ld-eyebrow--on-dark { color: var(--ld-on-dark-mute); }

.ld-body-lg { font-size: var(--ld-fs-body-lg); line-height: var(--ld-lh-relaxed); color: var(--ld-ink-2); text-wrap: pretty; }
.ld-body    { font-size: var(--ld-fs-body); line-height: var(--ld-lh-body); color: var(--ld-ink-2); text-wrap: pretty; }
.ld-mute    { color: var(--ld-mute); }
.ld-num     { font-family: var(--ld-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---- Layout containers ---- */
.ld-wrap {
  width: 100%;
  max-width: var(--ld-w-wide);
  margin-inline: auto;
  padding-inline: var(--ld-gutter-desk);
}
@media (max-width: 760px) {
  .ld-wrap { padding-inline: var(--ld-gutter-mobile); }
}

.ld-section { padding-block: var(--ld-s-24); }
.ld-section--lg { padding-block: var(--ld-s-32); }
.ld-section--sm { padding-block: var(--ld-s-16); }

/* ---- Surfaces ---- */
.ld-surface-dark {
  background: var(--ld-dark);
  color: var(--ld-on-dark);
}
.ld-surface-dark .ld-mute { color: var(--ld-on-dark-mute); }
.ld-surface-dark .ld-body-lg, .ld-surface-dark .ld-body { color: var(--ld-on-dark-2); }

/* ---- Hairline divider ---- */
.ld-rule { border: 0; height: 1px; background: var(--ld-line); margin: 0; }
.ld-surface-dark .ld-rule { background: var(--ld-line-dark); }

/* ---- Focus ---- */
:focus-visible { outline: none; box-shadow: var(--ld-focus); border-radius: var(--ld-r-sm); }

/* ---- Utility ---- */
.ld-stack > * + * { margin-top: var(--ld-s-4); }
.ld-stack-6 > * + * { margin-top: var(--ld-s-6); }
.ld-stack-8 > * + * { margin-top: var(--ld-s-8); }
.ld-stack-12 > * + * { margin-top: var(--ld-s-12); }
.ld-row { display: flex; align-items: center; }
.ld-row-gap-2 { display: flex; align-items: center; gap: var(--ld-s-2); }
.ld-row-gap-4 { display: flex; align-items: center; gap: var(--ld-s-4); }
.ld-row-gap-6 { display: flex; align-items: center; gap: var(--ld-s-6); }
.ld-grid { display: grid; gap: var(--ld-s-6); }