/**
 * KOL Typography — Right Grotesk family
 *
 * Loaded cuts: Right Grotesk (display, regular width), Compact, Tall, Wide,
 * Narrow, Spatial, Tight. Mono loads in kol-typography-mono.css.
 *
 * PP weight convention: Fine 100 · Light 300 · Regular 400 · Medium 500 ·
 * Dark 600 · Bold 700 · Black 900.
 *
 * Files at /fonts/right-grotesk/*.woff2.
 *
 * Type-scale tokens at :root below; consumed by display/heading/text/helper
 * classes. Retune sizes in one place.
 */

/* =============================================================================
 * FONT FACE DECLARATIONS — Right Grotesk family
 *
 * Generated to cover every weight present on disk, so the type scale never
 * silently rounds to a neighbouring cut. PP convention:
 * Fine 100 · Light 300 · Regular 400 · Medium 500 · Dark 600 · Bold 700 · Black 900.
 * Mono @font-face lives in kol-typography-mono.css.
 * ============================================================================= */

/* ── Right Grotesk ── */
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-FineItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-Fine.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-DarkItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-Dark.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk";
  src: url("/fonts/right-grotesk/PPRightGrotesk-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Right Grotesk Compact ── */
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactFineItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactFine.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactRegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactDarkItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactDark.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactBlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Compact";
  src: url("/fonts/right-grotesk/PPRightGrotesk-CompactBlack.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Right Grotesk Narrow ── */
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowFineItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowFine.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowRegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowDarkItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowDark.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowBlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Narrow";
  src: url("/fonts/right-grotesk/PPRightGrotesk-NarrowBlack.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Right Grotesk Tall ── */
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallFineItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallFine.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallRegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallDarkItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallDark.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallBlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tall";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TallBlack.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Right Grotesk Wide ── */
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideFineItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideFine.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideRegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideDarkItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideDark.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideBlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Wide";
  src: url("/fonts/right-grotesk/PPRightGrotesk-WideBlack.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Right Grotesk Spatial ── */
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialFineItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialFine.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialRegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialDarkItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialDark.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialBlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Spatial";
  src: url("/fonts/right-grotesk/PPRightGrotesk-SpatialBlack.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Right Grotesk Tight ── */
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightFineItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightFine.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightLightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightRegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightMediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightDarkItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightDark.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightBlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Right Grotesk Tight";
  src: url("/fonts/right-grotesk/PPRightGrotesk-TightBlack.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
 * ROOT VARIABLES
 * ============================================================================= */

:root {
  /* Sans family tokens — four cuts loaded. Editor convention used in prose:
   * Narrow for top-of-scale (display, large headings), Compact for mid (smaller
   * headings, lede), base for body, Tight for display 01–04 (since 0.59.0).
   * Atomic classes follow the same convention. */
  --kol-font-family-sans:         'Right Grotesk', sans-serif;
  --kol-font-family-sans-narrow:  'Right Grotesk Narrow', 'Right Grotesk', sans-serif;
  --kol-font-family-sans-compact: 'Right Grotesk Compact', 'Right Grotesk', sans-serif;
  --kol-font-family-sans-tight:   'Right Grotesk Tight', 'Right Grotesk', sans-serif;

  /* Type size tokens — numbered scale, 01 = largest, ascending = smaller.
   * Mobile-first; @media overrides below scale display + heading-01 up on
   * wider viewports. All other sizes stay fixed. */

  /* Display — hero typography (3 stops) */
  --kol-text-display-01: 56px;
  --kol-text-display-02: 44px;
  --kol-text-display-03: 36px;
  --kol-text-display-04: 32px;

  /* Heading — H1 → H6 (6 stops) */
  --kol-text-heading-01: 48px;
  --kol-text-heading-02: 40px;
  --kol-text-heading-03: 32px;
  --kol-text-heading-04: 24px;
  --kol-text-heading-05: 20px;
  --kol-text-heading-06: 16px;

  /* Body — reading copy (3 stops) */
  --kol-text-body-01: 16px;
  --kol-text-body-02: 14px;
  --kol-text-body-03: 12px;

  /* Display Tight — the ELDER display ladder (lobbied 2026-07-16, 1024px
   * step). Retired as classes 2026-08-27 (DisplayTightRamp); the tokens stay,
   * nothing in the theme reads them since 0.59.0. */
  --kol-text-display-tight-01: 48px;
  --kol-text-display-tight-02: 40px;
  --kol-text-display-tight-03: 32px;
}

@media (min-width: 768px) {
  :root {
    --kol-text-display-01: 80px;
    --kol-text-display-02: 56px;
    --kol-text-display-03: 42px;
    --kol-text-display-04: 36px;
    --kol-text-heading-01: 56px;
    --kol-text-display-tight-01: 64px;
    --kol-text-display-tight-02: 48px;
    --kol-text-display-tight-03: 40px;
  }
}

/* Display Tight tops out at 1024, not 1280 — the lobbied ladder's own step. */
@media (min-width: 1024px) {
  :root {
    --kol-text-display-tight-01: 96px;
    --kol-text-display-tight-02: 64px;
    --kol-text-display-tight-03: 48px;
  }
}

@media (min-width: 1280px) {
  :root {
    --kol-text-display-01: 96px;
    --kol-text-display-02: 64px;
    --kol-text-display-03: 48px;
    --kol-text-display-04: 40px;
    --kol-text-heading-01: 64px;
  }
}

/* =============================================================================
 * DISPLAY — Right Grotesk TIGHT, weight 500. Numbered 01 (largest) → 04.
 * ONE face for the whole ramp (DisplayTightRamp, user ruling 2026-08-27: "the
 * lg is correct, MORE correct than the numbered ramp … make 01 and 02 tight
 * 500, replace the lg and retire lg … so we only have one system"). Until
 * 0.59.0 this ramp was Narrow and the Tight cut lived in a second, size-named
 * system lobbied from the website's elder type (`kol-display-lg` + section /
 * section-sm / subsection) — those four are aliases below, on the retirement
 * clock.
 *
 * The Tight cut by NAME (--kol-font-family-sans-tight): the loaded faces are
 * static and carry no stretch descriptors, so font-stretch selection silently
 * renders the wide base cut (bug found 2026-07-28).
 *
 * 500, NOT 600 (user ruling 2026-08-15): 600 clogs at display size, and 500 is
 * every `kol-sans-heading-*` weight, so the two families read as one voice at
 * two volumes. NO tracking: the 0.04em added 2026-08-15 was the Narrow cut's
 * sidebearing fix; the Tight cut is the elder `kol-display-lg` rendering the
 * user called correct, and that carried none.
 *
 * Case is a ROLE, not a transform on the class — `uppercase` at the call site,
 * `headlineCase="upper"` on SectionText.
 *
 * display-04 shipped 2026-08-27: SectionHero's media headline has defaulted to
 * the role since component 0.80.0 with NO rule behind it (browser default h2).
 * 32 → 36 → 40 lands at desktop where the pre-0.80 remap to heading-02 sat.
 * ============================================================================= */

.kol-sans-display-01 {
  font-family: var(--kol-font-family-sans-tight);
  font-size: var(--kol-text-display-01);
  line-height: 100%;
  font-weight: 500;
}

.kol-sans-display-02 {
  font-family: var(--kol-font-family-sans-tight);
  font-size: var(--kol-text-display-02);
  line-height: 100%;
  font-weight: 500;
}

.kol-sans-display-03 {
  font-family: var(--kol-font-family-sans-tight);
  font-size: var(--kol-text-display-03);
  line-height: 100%;
  font-weight: 500;
}

.kol-sans-display-04 {
  font-family: var(--kol-font-family-sans-tight);
  font-size: var(--kol-text-display-04);
  line-height: 100%;
  font-weight: 500;
}

/* =============================================================================
 * RETIRED — the elder display voice (DisplayTightRamp, 2026-08-27). Four
 * aliases onto the ramp above, each keeping the uppercase its contract baked
 * in so nothing un-caps on the bump; the swap adds `uppercase` at the call
 * site. Tracked in docs/operations/01-release/04-retirements.md — dropped when
 * no repo uses them (`pnpm retirements`), the gate fails at 30 days unimported.
 * Elder `kol-heading-display` (never carried) → kol-sans-display-01 likewise.
 * ============================================================================= */

/* @deprecated 2026-08-27 → kol-sans-display-01 */
.kol-display-lg {
  font-family: var(--kol-font-family-sans-tight);
  font-size: var(--kol-text-display-01);
  line-height: 100%;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--kol-fg-emphasis);
}

/* @deprecated 2026-08-27 → kol-sans-display-02 */
.kol-display-section {
  font-family: var(--kol-font-family-sans-tight);
  font-size: var(--kol-text-display-02);
  line-height: 100%;
  font-weight: 500;
  text-transform: uppercase;
}

/* @deprecated 2026-08-27 → kol-sans-display-03 */
.kol-display-section-sm {
  font-family: var(--kol-font-family-sans-tight);
  font-size: var(--kol-text-display-03);
  line-height: 100%;
  font-weight: 500;
  text-transform: uppercase;
}

/* @deprecated 2026-08-27 → kol-sans-display-03 */
.kol-display-subsection {
  font-family: var(--kol-font-family-sans-tight);
  font-size: var(--kol-text-display-03);
  line-height: 100%;
  font-weight: 500;
  text-transform: uppercase;
}

/* =============================================================================
 * HEADINGS — H1+H2 sans Narrow, H3-H5 sans Compact, weight 500.
 * 01 = H1 anchor (matches prose H1). The narrow/compact boundary moved down
 * one rung 2026-08-12 (HeadingTwoNarrow, user ruling: "make heading-02 narrow
 * not compact"). 03-06 use Compact for visual rhythm. The PROSE ramp is
 * untouched — it deliberately skips heading-02. 06 token defined; class
 * deferred until consumer.
 * ============================================================================= */

.kol-sans-heading-01 {
  font-family: var(--kol-font-family-sans-narrow);
  font-size: var(--kol-text-heading-01);
  line-height: 110%;
  font-weight: 500;
}

.kol-sans-heading-02 {
  font-family: var(--kol-font-family-sans-narrow);
  font-size: var(--kol-text-heading-02);
  line-height: 110%;
  font-weight: 500;
}

.kol-sans-heading-03 {
  font-family: var(--kol-font-family-sans-compact);
  font-size: var(--kol-text-heading-03);
  line-height: 120%;
  font-weight: 500;
}

.kol-sans-heading-04 {
  font-family: var(--kol-font-family-sans-compact);
  font-size: var(--kol-text-heading-04);
  /* 120% — was 100%, the one dip in the 110/110/120/x/125 ramp; 24px H4
   * set solid, tighter than the 64px H1 (user ruling 2026-08-12). */
  line-height: 120%;
  font-weight: 500;
}

.kol-sans-heading-05 {
  font-family: var(--kol-font-family-sans-compact);
  font-size: var(--kol-text-heading-05);
  line-height: 125%;
  font-weight: 500;
}

/* =============================================================================
 * BODY — sans base, weight 400. Atomic body copy for chrome / cards / descriptions.
 * Distinct from .kol-prose body (300, lighter, for editorial long-form copy).
 * ============================================================================= */

.kol-sans-body-01 {
  font-family: var(--kol-font-family-sans);
  font-size: var(--kol-text-body-01);
  line-height: 160%;
  font-weight: 400;
}

.kol-sans-body-02 {
  font-family: var(--kol-font-family-sans);
  font-size: var(--kol-text-body-02);
  line-height: 160%;
  font-weight: 400;
}

.kol-sans-body-03 {
  font-family: var(--kol-font-family-sans);
  font-size: var(--kol-text-body-03);
  line-height: 150%;
  font-weight: 400;
}

/* `.kol-mono-text` retired — consumers use Tailwind `font-mono` (single-class
 * family marker). `.kol-helper-{xl..xxxxs}` t-shirt scale retired — consumers
 * migrated to `.kol-helper-{8,10,12,14,16,20}` defined in kol-typography-mono.css. */


/* =============================================================================
 * PROSE (rich-text running copy container) — editorial typography
 * Right Grotesk family. 4-pt grid sizes, absolute px line-heights.
 * ============================================================================= */

.kol-prose {
  max-width: 720px;
  font-family: var(--kol-font-family-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0.02em;
  /* Text-role contract (kol-opacity roles): body copy sits at the body role;
   * emphasis/strong/headings climb the ladder from there. */
  color: var(--kol-fg-body);
}

.kol-prose > :first-child { margin-top: 0; }
.kol-prose > :last-child  { margin-bottom: 0; }

/* ─── Section head — label + title + lede.
       Self-contained: do NOT nest inside .kol-prose, the descendant
       p/h2 rules below would override these. Render as flat siblings. ─── */

.kol-prose-label {
  font-family: var(--kol-font-family-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kol-fg-48);
  margin: 0 0 16px;
}

/* Display scale — D1 (hero), D2 (sub-hero), D3 (chapter title / .kol-prose-title alias).
 *
 * ON THE LADDER, NOT FIXED (ProseTitleFixedSize, kol-website 2026-09-01): these
 * three were the only display steps with no responsive rung — `.kol-prose-title`
 * set a real article title to four lines of 56px at 390 and spent the fold
 * before the first word of body. Each now reads the display token whose DESKTOP
 * value it already was (80 → display-01, 64 → display-tight-01, 56 → display-02),
 * CAPPED at that value with `min()`: below 768 they take the ladder's mobile step
 * (56 · 48 · 44), and from 768 up they are pixel-identical to before — the
 * ladder's third rung (96 · 72 · 64 at 1280) is deliberately not taken, a prose
 * title at 64 was never the design. Line-heights became the same ratios
 * (1 · 1.0625 · 1.07) so the leading follows the size. The ramp lives in the
 * token, as the ticket asked; the ceiling stays where the design was. */

.kol-prose-display {
  font-family: var(--kol-font-family-sans-narrow);
  font-size: min(var(--kol-text-display-01), 80px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--kol-surface-on-primary);
  margin: 0 0 24px;
}

.kol-prose-display-md {
  font-family: var(--kol-font-family-sans-narrow);
  font-size: min(var(--kol-text-display-tight-01), 64px);
  font-weight: 500;
  line-height: 1.0625;
  letter-spacing: -0.01em;
  color: var(--kol-surface-on-primary);
  margin: 0 0 24px;
}

.kol-prose-title {
  font-family: var(--kol-font-family-sans-narrow);
  font-size: min(var(--kol-text-display-02), 56px);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -0.01em;
  color: var(--kol-surface-on-primary);
  margin: 0 0 24px;
}

.kol-prose-lede {
  font-family: var(--kol-font-family-sans-compact);
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.02em;
  color: var(--kol-surface-on-primary);
  margin: 0 0 40px;
}

/* Editorial subtitle — sits under a display/title as the tagline. Narrow
 * family at 13px uppercase, dimmed via fg-64. Distinct from .kol-prose-label
 * which is Mono and used for section eyebrows / kickers. */
.kol-prose-tagline {
  font-family: var(--kol-font-family-sans-narrow);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kol-fg-body);
  margin: 0;
}

/* ─── Headings ─── */

/* H1 uses sans-narrow + heading-01. H2-H6 use sans-compact + heading-{03,04,05,06}.
 * H2 intentionally skips heading-02 (40px) — visual hierarchy works better with
 * a bigger jump from H1 (48 → 32 vs 48 → 40). Convention preserved from prior
 * prose. Sizes resolve through tokens — edit token, every consumer follows. */
.kol-prose h1,
.kol-prose h2,
.kol-prose h3,
.kol-prose h4,
.kol-prose h5,
.kol-prose h6 {
  font-weight: 500;
  color: var(--kol-fg-emphasis);
}

.kol-prose h1 { font-family: var(--kol-font-family-sans-narrow);  font-size: var(--kol-text-heading-01); line-height: 52px; margin: 0 0 24px; }
.kol-prose h2 { font-family: var(--kol-font-family-sans-compact); font-weight: 400; font-size: var(--kol-text-heading-03); line-height: 40px; margin: 56px 0 16px; }
.kol-prose h3 { font-family: var(--kol-font-family-sans-compact); font-weight: 400; font-size: var(--kol-text-heading-04); line-height: 32px; margin: 40px 0 12px; }
.kol-prose h4 { font-family: var(--kol-font-family-sans-compact); font-weight: 400; font-size: var(--kol-text-heading-05); line-height: 28px; margin: 32px 0  8px; }
.kol-prose h5 { font-family: var(--kol-font-family-sans-compact); font-weight: 500; font-size: var(--kol-text-heading-06); line-height: 24px; margin: 24px 0  6px; }
.kol-prose h6 { font-family: var(--kol-font-family-sans-compact); font-weight: 500; font-size: var(--kol-text-heading-06); line-height: 24px; margin: 24px 0  6px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ─── Body + lists ─── */

.kol-prose p     { margin: 0 0 24px; letter-spacing: 0.02em; }
.kol-prose p + p { margin-top: 0; }

.kol-prose ul,
.kol-prose ol { padding-left: 24px; margin: 0 0 24px; }
.kol-prose ul { list-style-type: disc; }
.kol-prose ol { list-style-type: decimal; }
.kol-prose li { margin: 0 0 8px; line-height: 24px; }

/* ─── Inline ─── */

/* Inline emphasis climbs the role ladder out of the body color:
 * em stresses at the strong role, strong lands on full-ink emphasis. */
.kol-prose em     { font-style: italic; color: var(--kol-fg-strong); }
.kol-prose strong { font-weight: 700; color: var(--kol-fg-emphasis); }

/* ─── Code (inline + block) — rules live in kol-type-roles.css as the
 *     prose/doc twin selectors (.kol-prose pre, .kol-doc-code etc.), one
 *     definition for both entry points. Only prose's block margin stays
 *     prose-specific, declared there. ─── */

/* ─── Blockquote ─── */

.kol-prose blockquote {
  margin: 40px 0;
  padding: 8px 0 8px 24px;
  border-left: 2px solid var(--kol-fg-32);
  font-weight: 600;
}

.kol-prose blockquote p {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 32px;
  color: var(--kol-fg-emphasis);
}

.kol-prose blockquote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--kol-fg-meta);
}

.kol-prose blockquote cite::before { content: '— '; opacity: 0.6; }

/* =============================================================================
 * TAILWIND CONTRACT — font-family exposures
 * Lets JSX use font-display / font-narrow / etc. instead of arbitrary value
 * syntax. Family strings include sans-serif fallbacks for graceful degradation
 * before Right Grotesk loads.
 * ============================================================================= */

@theme {
  --font-display: 'Right Grotesk', sans-serif;
  --font-text:    'Right Grotesk', sans-serif;
  --font-serif:   'Right Grotesk', sans-serif;
  --font-narrow:  'Right Grotesk Narrow', 'Right Grotesk', sans-serif;
  /* --font-mono lives in kol-typography-mono.css — keeps mono concerns in one file. */
}

/* TARGET: packages/theme/kol-typography.css — append to the `.kol-prose` section
 * ---------------------------------------------------------------------------
 * PortableTextRenderer (organism) leans on three prose hooks this repo's prose
 * sheet is missing. Figure's `.kol-prose-figure` / `.kol-caption-label` /
 * `.kol-caption-text` already exist; these three do not. The renderer degrades
 * gracefully without them (segmentTitle → plain inline text, caption → normal
 * paragraph, links → inherited color), so this is polish, not a hard dep.
 *
 * NOTE ON PLACEMENT: these are prose *typography* classes, so their home is
 * kol-typography.css, NOT the kol-components-{atoms,molecules,organisms}.css
 * component-chrome sheets. Flagged so it lands in the right file.
 */

/* inline mark — emphasised run inside a paragraph */
.kol-segment-title {
  font-family: var(--kol-font-family-sans-compact);
  font-weight: 500;
  color: var(--kol-fg-emphasis);
}

/* standalone caption block (the `caption` block type) */
.kol-prose .caption {
  margin: -12px 0 24px;
  font-family: var(--kol-font-family-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: var(--kol-fg-meta);
}

/* inline links (the `link` mark) */
.kol-prose a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--kol-fg-32, color-mix(in srgb, var(--kol-surface-on-primary) 32%, transparent));
  transition: text-decoration-color 0.15s ease;
}
.kol-prose a:hover {
  text-decoration-color: currentColor;
}