/* styles/sections/display-heading.css
 * The section h2 the About frames (h6DJh, ZwYZb, W0b6MD) draw for Story, Mission and Team:
 * Piazzolla 600 at 32 on M (h2 role), 56 from D (h1 role), 96 from W (display-md size and
 * tracking at the h1 line height). Pencil sets the 1.05 line height on whole pixels (34, 59, 101).
 * Below each frame's column the size follows the section's content width (32 at 342, 56 at 1280,
 * 96 at 1680), so a heading keeps the frame's lines between widths (a 1680 viewport gives a 1440
 * column, 320 a 272 one). Each section inner is the size container. Colour inherits from the surface. */
@layer sections {
  .display-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: min(var(--t-h2-size), 9.36cqi);
    font-weight: 600;
    line-height: round(nearest, 1.05em, 1px);
    letter-spacing: var(--t-h2-ls);
  }

  @media (min-width: 900px) {
    .display-heading {
      font-size: min(var(--t-h1-size), 4.375cqi);
      letter-spacing: var(--t-h1-ls);
    }
  }

  @media (min-width: 1680px) {
    .display-heading {
      font-size: min(var(--t-display-md-size), 5.715cqi);
      letter-spacing: var(--t-display-md-ls);
    }
  }
}