:root{
  --font-display:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --fs-hero:clamp(4rem,12vw,14rem); /* @kind font */
  --fs-section:clamp(2.5rem,6vw,6rem); /* @kind font */
  --fs-title:clamp(1.75rem,2.6vw,2.5rem); /* @kind font */
  --fs-body:1.05rem; /* @kind font */
  --fs-meta:0.75rem; /* @kind font */

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-black:800; /* @kind font */
  --tracking-display:-0.04em; /* @kind font */
  --tracking-meta:0.12em; /* @kind font */
  --leading-display:0.9; /* @kind font */
  --leading-title:0.95; /* @kind font */
  --leading-body:1.6; /* @kind font */
  --measure-body:56ch; /* @kind spacing */

  /* semantic */
  --text-family-ui:var(--font-display);
  --text-family-meta:var(--font-mono);
}

/* Type classes — the display ladder. */
.t-hero,.t-section,.t-title{font-family:var(--font-display);letter-spacing:var(--tracking-display);line-height:var(--leading-display);color:var(--ink);text-wrap:balance;margin:0}
.t-hero{font-size:var(--fs-hero);font-weight:var(--fw-black)}
.t-section{font-size:var(--fs-section);font-weight:var(--fw-bold)}
.t-title{font-size:var(--fs-title);font-weight:var(--fw-bold);line-height:var(--leading-title)}
.t-body{font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--leading-body);color:var(--ink-muted);max-width:var(--measure-body)}
.t-meta{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:var(--fw-regular);text-transform:uppercase;letter-spacing:var(--tracking-meta);line-height:1.4;color:var(--ink-faint)}
.t-accent{color:var(--accent)}
.on-accent{background:var(--accent);color:var(--on-accent);font-weight:var(--fw-semibold);font-size:max(1rem,16px)}