/* ============================================================
 * typographic-grid.css
 * Generated by Harmonic Type Lab — vertical baseline grid
 *
 * Reference chord:  Augmented
 * Base size:        10.50px
 * Rhythm unit:      12.49px (minor third, n=+3)
 * Columns:          8
 * Gutter:           37.46px (3 × rhythm)
 * Outer margin:     24.97px (2 × rhythm)
 *
 * Each text line is k × rhythm units tall, where k is the
 * smallest integer that makes line-height >= undefined.
 * ============================================================ */

:root {
  /* Vertical rhythm */
  --rhythm:        0.7804rem;  /* 12.49px */

  /* Horizontal grid */
  --columns:       8;
  --gutter:        calc(var(--rhythm) * 3);
  --outer-margin:  calc(var(--rhythm) * 2);

  /* Per-role line-heights (unitless × font-size = k × rhythm) */
  --line-height-h1: 1.1892;  /* k=2, row=24.97px */
  --line-height-h2: 1.4983;  /* k=2, row=24.97px */
  --line-height-h3: 1.8877;  /* k=2, row=24.97px */
  --line-height-h4: 1.1892;  /* k=1, row=12.49px */
  --line-height-h5: 1.4983;  /* k=1, row=12.49px */
  --line-height-h6: 1.8877;  /* k=1, row=12.49px */
  --line-height-body: 1.1892;  /* k=1, row=12.49px */
  --line-height-small: 1.4983;  /* k=1, row=12.49px */
  --line-height-code: 1.1892;  /* k=1, row=12.49px */

  /* Number of rhythm rows each role spans */
  --rows-h1: 2;
  --rows-h2: 2;
  --rows-h3: 2;
  --rows-h4: 1;
  --rows-h5: 1;
  --rows-h6: 1;
  --rows-body: 1;
  --rows-small: 1;
  --rows-code: 1;
}

/* Element rules — line-heights snap to the rhythm grid */

body {
  line-height: var(--line-height-body);
}

h1 {
  line-height: var(--line-height-h1);
}

h2 {
  line-height: var(--line-height-h2);
}

h3 {
  line-height: var(--line-height-h3);
}

h4 {
  line-height: var(--line-height-h4);
}

h5 {
  line-height: var(--line-height-h5);
}

h6 {
  line-height: var(--line-height-h6);
}

small {
  line-height: var(--line-height-small);
}

code, kbd, samp, pre, tt {
  line-height: var(--line-height-code);
}

/* Block margins — owl-selector pattern, only margin-block-start. */
/* Avoids double-margin issues in grid/flex containers.           */

p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote,
pre, table, figure, hr, address {
  margin-block: 0;
}

* + p {
  margin-block-start: calc(var(--rhythm) * 1);
}

* + h1 {
  margin-block-start: calc(var(--rhythm) * 2);
}

* + h2 {
  margin-block-start: calc(var(--rhythm) * 2);
}

* + h3 {
  margin-block-start: calc(var(--rhythm) * 2);
}

* + h4 {
  margin-block-start: calc(var(--rhythm) * 1);
}

* + h5 {
  margin-block-start: calc(var(--rhythm) * 1);
}

* + h6 {
  margin-block-start: calc(var(--rhythm) * 1);
}

* + ul,
* + ol,
* + dl {
  margin-block-start: calc(var(--rhythm) * 1);
}

* + blockquote {
  margin-block-start: calc(var(--rhythm) * 1);
}

* + pre {
  margin-block-start: calc(var(--rhythm) * 1);
}

* + table {
  margin-block-start: calc(var(--rhythm) * 1);
}

* + figure {
  margin-block-start: calc(var(--rhythm) * 1);
}

* + hr {
  margin-block-start: calc(var(--rhythm) * 1);
}

/* Inner line-height for elements whose children break the rhythm */
address, dd, li, figcaption {
  line-height: var(--line-height-body);
}

address {
  font-style: normal;
}

/* Horizontal grid container */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gutter);
  padding-inline: var(--outer-margin);
  margin-block: 0 auto;
}

/* First-child / last-child margin trim — optional but cleaner */
@supports (margin-trim: block) {
  .grid > * { margin-trim: block; }
}

/* Strict mode: trim half-leading so that text-boxes hit the grid exactly. */
/* Browser support: Chrome 133+, Edge 133+, Safari 18.2+. Falls back to       */
/* normal line-box behaviour in older browsers — grid still works.           */
@supports (text-box: trim-both cap alphabetic) {
  h1, h2, h3, h4, h5, h6 {
    text-box: trim-both cap alphabetic;
  }
}

/* ============================================================
 * Per-font line-height overrides (x-height-adjusted, DIN 1450)
 * minLineHeight: per Schrift aus asc+dsc (Playfair: 1.0, Barlow: 1.0).
 * Setze .font-barlow / .font-mono / .font-playfair auf <body> oder
 * auf einen umschließenden Container.
 * ============================================================ */

/* Barlow — font-size 10.50px, x-Höhe 5.57px, minLH=1.000 (asc+dsc=1.0) */
.font-barlow {
  --line-height-h1: 1.18921;  /* k=2, row=24.97px */
  --line-height-h2: 1.49831;  /* k=2, row=24.97px */
  --line-height-h3: 1.88775;  /* k=2, row=24.97px */
  --line-height-h4: 1.18921;  /* k=1, row=12.49px */
  --line-height-h5: 1.49831;  /* k=1, row=12.49px */
  --line-height-h6: 1.88775;  /* k=1, row=12.49px */
  --line-height-body: 1.18921;  /* k=1, row=12.49px */
  --line-height-small: 1.49831;  /* k=1, row=12.49px */
  --line-height-code: 1.18921;  /* k=1, row=12.49px */
}

/* Noto Sans Mono — font-size 10.70px, x-Höhe 5.57px, minLH=1.000 (asc+dsc=1.0) */
.font-mono {
  --line-height-h1: 1.16677;  /* k=2, row=24.97px */
  --line-height-h2: 1.47004;  /* k=2, row=24.97px */
  --line-height-h3: 1.85213;  /* k=2, row=24.97px */
  --line-height-h4: 1.16677;  /* k=1, row=12.49px */
  --line-height-h5: 1.47004;  /* k=1, row=12.49px */
  --line-height-h6: 1.85213;  /* k=1, row=12.49px */
  --line-height-body: 1.16677;  /* k=1, row=12.49px */
  --line-height-small: 1.47004;  /* k=1, row=12.49px */
  --line-height-code: 1.16677;  /* k=1, row=12.49px */
}

/* Playfair Display — font-size 12.28px, x-Höhe 5.57px, minLH=1.000 (asc+dsc=1.0) */
.font-playfair {
  --line-height-h1: 1.01644;  /* k=2, row=24.97px */
  --line-height-h2: 1.28063;  /* k=2, row=24.97px */
  --line-height-h3: 1.61349;  /* k=2, row=24.97px */
  --line-height-h4: 1.01644;  /* k=1, row=12.49px */
  --line-height-h5: 1.28063;  /* k=1, row=12.49px */
  --line-height-h6: 1.61349;  /* k=1, row=12.49px */
  --line-height-body: 1.01644;  /* k=1, row=12.49px */
  --line-height-small: 1.28063;  /* k=1, row=12.49px */
  --line-height-code: 1.01644;  /* k=1, row=12.49px */
}