/* Four static cuts instead of deerstreet.de's ~1 MB variable font — see
   TASKS.md Phase 4. Roles follow the Figma type spec (node 44:616):
   Display→h1, Title→h2, Subtitle→h3, Heading→h4, Lead→.lead, Paragraph→body/p. */

@font-face {
  font-family: 'Neue DIN';
  src: url('/fonts/FwTRIAL-NeueDIN-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

/* Own family, not a font-stretch variant — this trial font doesn't expose
   condensed widths that way. */
@font-face {
  font-family: 'Neue DIN Condensed';
  src: url('/fonts/FwTRIAL-NeueDINCond-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue DIN SemiCond';
  src: url('/fonts/FwTRIAL-NeueDINSemiCond-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-body: 'Neue DIN', system-ui, sans-serif;
  --font-display: 'Neue DIN Condensed', 'Neue DIN', system-ui, sans-serif;
  --font-subtitle: 'Neue DIN SemiCond', 'Neue DIN', system-ui, sans-serif;

  --font-weight-body: 400;
  --font-weight-h4: 700;
  --font-weight-subtitle: 700;
  --font-weight-display: 900;

  /* Grid-locked type scale, from the Figma spec (node 44:616, 48px grid).
     --grid-lines-N is one line's whole box, padding included — also read as
     the --gr-span fallback in layout.css. Line-height and font-size are
     independent Figma values, not derived from grid-lines by formula. */
  --grid-lines-h1: 4;
  --grid-lines-h2: 2;
  --grid-lines-h3: 2;
  --grid-lines-h4: 1.5;
  --grid-lines-lead: 1.5;
  --grid-lines-body: 1.3333;

  --line-height-h1: calc(var(--cell) * 4);
  --line-height-h2: calc(var(--cell) * 2);
  --line-height-h3: calc(var(--cell) * 2);
  --line-height-h4: calc(var(--cell) * 1);
  --line-height-lead: calc(var(--cell) * 0.75);
  --line-height-body: calc(var(--cell) * 0.6667);

  --font-size-h1: calc(var(--cell) * 4.1667);
  --font-size-h2: calc(var(--cell) * 1.375);
  --font-size-h3: calc(var(--cell) * 1.375);
  --font-size-h4: calc(var(--cell) * 0.6875);
  --font-size-lead: calc(var(--cell) * 0.6875);
  --font-size-body: calc(var(--cell) * 0.4583);

  /* Only h1/h2/h3 are uppercase + tracked — h4/lead/body stay mixed-case,
     matching deerstreet.de. Tracking is per-role, not a shared ratio. */
  --text-transform-display: uppercase;
  --letter-spacing-h1: 0.02em;
  --letter-spacing-h2: 0.08em;
  --letter-spacing-h3: 0.08em;

  /* Display's own horizontal padding — narrower than --space-2, see the
     shared textbox rule in layout.css. */
  --space-display-x: calc(var(--cell) / 3);
}

/* Trims the font's half-leading so line-height above is visually exact,
   not just numerically. h1.claim needs its own entry — text-box isn't
   inherited, and its text lives in child spans, not on h1 itself. */
@supports (text-box: trim-both cap alphabetic) {
  h1,
  h2,
  h3,
  h4,
  p,
  .lead,
  .claim span {
    text-box: trim-both cap alphabetic;
  }
}

/* Figma specs Paragraph at weight 600 — no SemiBold cut loaded above, 400
   is the nearest we have. */
body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

h1,
h2,
h3,
h4,
p,
figcaption {
  margin: 0;
  text-align: left;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  text-transform: var(--text-transform-display);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

/* Subtitle role — a Title that's italic/Bold instead of upright/Black, for
   the per-frame name that completes each section's fixed h2. */
h3 {
  font-family: var(--font-subtitle);
  font-weight: var(--font-weight-subtitle);
  font-style: italic;
  text-transform: var(--text-transform-display);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

/* Heading role — card titles and other one-off sub-headings. */
h4 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-h4);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

.lead {
  margin: 0;
  text-align: left;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
}