/* ==========================================================================
   KnowToYes Band: component layer, v1.0, 2026-09-21
   Requires kty-tokens.css v1.1 loaded first.

   Band is the KnowToYes visual direction. Three elements carry it and
   nothing else is added:

     spine  a Green Core bar on the leading edge of every dark element
     band   a Blue 800 strip carrying a two-digit number and a title
     rail   a monospaced line under the band carrying subject and pull date

   Load order:
     <link rel="stylesheet" href="kty-tokens.css">
     <link rel="stylesheet" href="kty-band.css">

   Typefaces (Google Fonts, all open licence):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,400..700;1,62..125,400&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..600;1,8..60,400&display=swap">

   Sections
     1  Base
     2  Typography
     3  Spine, band, rail
     4  Page shell: header, hero, footer
     5  Buttons
     6  Cards and stat tiles
     7  Tables
     8  Pills and badges
     9  Callouts and quotations
    10  Source lines
    11  Charts
    12  Forms
    13  Utilities
    14  Print
   ========================================================================== */


/* ==========================================================================
   1. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kty-surface);
  color: var(--kty-text);
  font-family: var(--kty-font-ui);
  font-size: var(--kty-size-ui);
  line-height: var(--kty-leading-ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--kty-link); }
a:hover { color: var(--kty-link-hover); }

:focus-visible {
  outline: 2px solid var(--kty-focus);
  outline-offset: 2px;
}

img, svg { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   2. Typography
   Scan in Archivo. Read in Source Serif. Transcribe in Plex Mono.
   Sentence case for every heading, in every medium.
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--kty-font-ui);
  color: var(--kty-text-heading);
  text-wrap: balance;
  margin: 0 0 var(--kty-space-4);
}

h1 {
  font-size: var(--kty-size-h1);
  font-weight: 700;
  font-stretch: var(--kty-wdth-wide);
  line-height: var(--kty-leading-tight);
  letter-spacing: var(--kty-tracking-h1);
}

h2 {
  font-size: var(--kty-size-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--kty-tracking-h2);
}

h3 { font-size: var(--kty-size-h3); font-weight: 600; line-height: 1.3; }
h4 { font-size: var(--kty-size-ui); font-weight: 600; line-height: 1.4; }

/* Cover and title-slide display. Expanded is for these only. */
.kty-display {
  font-family: var(--kty-font-ui);
  font-weight: 700;
  font-stretch: var(--kty-wdth-expanded);
  letter-spacing: var(--kty-tracking-display);
  line-height: 0.98;
  color: var(--kty-text-heading);
}

.kty-prose {
  font-family: var(--kty-font-prose);
  font-size: var(--kty-size-prose);
  line-height: var(--kty-leading-prose);
  max-width: var(--kty-measure);
}
.kty-prose p { margin: 0 0 var(--kty-space-4); }
.kty-prose p:last-child { margin-bottom: 0; }

.kty-data {
  font-family: var(--kty-font-data);
  font-size: var(--kty-size-data);
  font-variant-numeric: tabular-nums;
}

.kty-label {
  font-family: var(--kty-font-ui);
  font-size: var(--kty-size-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--kty-tracking-label);
  color: var(--kty-link);
}
.kty-label--muted { color: var(--kty-text-secondary); }

/* Two-digit index numerals. They never restart inside a document. */
.kty-index {
  font-family: var(--kty-font-data);
  font-size: var(--kty-size-label);
  color: var(--kty-link);
  font-variant-numeric: tabular-nums;
}

/* Ragged right everywhere. No justification, no hyphenation. */
p, li, dd, .kty-prose { text-align: left; hyphens: none; }


/* ==========================================================================
   3. Spine, band, rail
   ========================================================================== */

/* Wrap any dark element in .kty-spined to give it its leading edge. */
.kty-spined {
  display: flex;
  align-items: stretch;
}
.kty-spined > .kty-spine {
  flex: 0 0 var(--kty-spine-screen);
  width: var(--kty-spine-screen);
  background: var(--kty-spine);
}
.kty-spined > .kty-spined__body { flex: 1 1 auto; min-width: 0; }

/* Spine width variants */
.kty-spined--card > .kty-spine       { flex-basis: var(--kty-spine-card);       width: var(--kty-spine-card); }
.kty-spined--signature > .kty-spine  { flex-basis: var(--kty-spine-signature);  width: var(--kty-spine-signature); }
.kty-spined--letterhead > .kty-spine { flex-basis: var(--kty-spine-letterhead); width: var(--kty-spine-letterhead); }
.kty-spined--slide > .kty-spine      { flex-basis: var(--kty-spine-slide);      width: var(--kty-spine-slide); }
.kty-spined--cover > .kty-spine      { flex-basis: var(--kty-spine-cover);      width: var(--kty-spine-cover); }
.kty-spined--interior > .kty-spine   { flex-basis: var(--kty-spine-interior);   width: var(--kty-spine-interior); }
.kty-spined--banner > .kty-spine     { flex-basis: var(--kty-spine-banner);     width: var(--kty-spine-banner); }

/* The band. Square, full measure, never rounded. */
.kty-band {
  display: flex;
  align-items: center;
  gap: var(--kty-space-5);
  min-height: var(--kty-band-height);
  padding: 0 var(--kty-band-pad-x);
  background: var(--kty-band-bg);
  border-radius: var(--kty-radius-record);
}
.kty-band--sm { min-height: var(--kty-band-height-sm); }

.kty-band__number {
  font-size: 21px;
  font-weight: 700;
  color: var(--kty-band-number);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.kty-band__title {
  font-size: 21px;
  font-weight: 700;
  color: var(--kty-band-title);
  line-height: 1.2;
}
.kty-band--sm .kty-band__number,
.kty-band--sm .kty-band__title { font-size: 18px; }

/* The rail. Sits directly under a band and carries the evidence. */
.kty-rail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kty-space-5);
  padding: var(--kty-rail-pad-y) var(--kty-band-pad-x);
  border-bottom: 1px solid var(--kty-rail-rule);
  background: var(--kty-rail-bg);
  font-family: var(--kty-font-data);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kty-rail-text);
}
.kty-rail > * { min-width: 0; }

/* A section is band + rail + content. 32px of clear space under the rail,
   per the standard's rule that nothing crowds a band. */
.kty-section > .kty-section__body { padding: var(--kty-space-6) var(--kty-band-pad-x) var(--kty-space-7); }


/* ==========================================================================
   4. Page shell
   ========================================================================== */

.kty-header {
  display: flex;
  align-items: center;
  gap: var(--kty-space-6);
  min-height: var(--kty-header-height);
  padding: 0 var(--kty-space-7);
  background: var(--kty-blue-800);
}
.kty-header__nav { display: flex; align-items: center; gap: var(--kty-space-5); }
.kty-header__nav a {
  color: var(--kty-blue-200);
  text-decoration: none;
  font-size: var(--kty-size-ui);
}
.kty-header__nav a:hover { color: var(--kty-white); }
.kty-header__nav a[aria-current] {
  color: var(--kty-white);
  font-weight: 600;
  border-bottom: 2px solid var(--kty-green-bright);
  padding-bottom: 3px;
}
.kty-header__spacer { flex: 1 1 auto; }

@media (max-width: 860px) {
  .kty-header { min-height: var(--kty-header-height-sm); padding: 0 var(--kty-space-4); }
  .kty-header__nav { display: none; }
}

/* The dark opening block: header and hero as one, spine running its height. */
.kty-hero {
  background: var(--kty-blue-900);
  padding: var(--kty-space-9) var(--kty-space-7) 0;
  color: var(--kty-white);
}
.kty-hero h1 { color: var(--kty-white); max-width: 17ch; }
.kty-hero .kty-prose { color: var(--kty-blue-200); max-width: 62ch; }
.kty-hero__eyebrow {
  font-family: var(--kty-font-data);
  font-size: var(--kty-size-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kty-blue-300);
}
.kty-hero__rule {
  width: 84px;
  height: 5px;
  background: var(--kty-green-bright);
  margin: var(--kty-space-6) 0;
}
.kty-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kty-space-7);
  align-items: flex-end;
  margin-top: var(--kty-space-7);
  padding-top: var(--kty-space-6);
  border-top: 1px solid var(--kty-blue-700);
}

@media (max-width: 860px) {
  .kty-hero { padding: var(--kty-space-7) var(--kty-space-4) 0; }
}

.kty-cta {
  background: var(--kty-blue-800);
  padding: var(--kty-space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kty-space-7);
  flex-wrap: wrap;
}
.kty-cta__headline {
  font-size: 34px;
  font-weight: 700;
  font-stretch: var(--kty-wdth-mid);
  letter-spacing: var(--kty-tracking-h2);
  line-height: 1.15;
  color: var(--kty-white);
  max-width: 24ch;
}

.kty-footer {
  background: var(--kty-blue-900);
  color: var(--kty-blue-300);
  padding: var(--kty-space-7);
  font-size: var(--kty-size-small);
}
.kty-footer a { color: var(--kty-blue-200); text-decoration: none; }
.kty-footer a:hover { color: var(--kty-white); }
.kty-footer__rule { height: 1px; background: var(--kty-blue-700); margin: var(--kty-space-6) 0 var(--kty-space-4); }


/* ==========================================================================
   5. Buttons
   Hit targets never below 44 x 44.
   ========================================================================== */

.kty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--kty-space-5);
  font-family: var(--kty-font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--kty-radius-ui);
  cursor: pointer;
  transition: background var(--kty-transition), color var(--kty-transition);
  background: var(--kty-blue-500);
  color: var(--kty-white);
}
.kty-btn:hover { background: var(--kty-blue-600); color: var(--kty-white); }

.kty-btn--secondary {
  background: var(--kty-white);
  color: var(--kty-blue-500);
  border-color: var(--kty-blue-500);
}
.kty-btn--secondary:hover { background: var(--kty-blue-050); color: var(--kty-blue-600); }

/* On a dark ground the secondary takes a ramp border rather than white fill. */
.kty-on-dark .kty-btn--secondary {
  background: transparent;
  color: var(--kty-blue-200);
  border-color: var(--kty-blue-600);
}
.kty-on-dark .kty-btn--secondary:hover { background: var(--kty-blue-800); color: var(--kty-white); }

/* Affirmative. Checkout and sign-up only, one per page. */
.kty-btn--affirmative { background: var(--kty-green-text); color: var(--kty-white); }
.kty-btn--affirmative:hover { background: #365E02; color: var(--kty-white); }

.kty-btn--lg { min-height: 50px; padding: 0 var(--kty-space-6); font-size: 17px; }


/* ==========================================================================
   6. Cards and stat tiles
   ========================================================================== */

.kty-card {
  background: var(--kty-surface);
  border: 1px solid var(--kty-border);
  border-radius: var(--kty-radius-ui);
  padding: var(--kty-space-5);
}

/* The Band card: a green tick on the leading edge, tinted body, square. */
.kty-card--tick {
  display: flex;
  align-items: stretch;
  border: none;
  border-radius: var(--kty-radius-record);
  padding: 0;
  background: transparent;
}
.kty-card--tick::before {
  content: "";
  flex: 0 0 4px;
  background: var(--kty-green-core);
}
.kty-card--tick > .kty-card__body {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--kty-surface-raised);
  padding: var(--kty-space-5);
}
.kty-card__title { font-size: 18px; font-weight: 700; color: var(--kty-text-heading); margin: var(--kty-space-3) 0 0; }
.kty-card__body p { margin: var(--kty-space-3) 0 0; color: var(--kty-text-secondary); font-size: 15px; line-height: 1.6; }

.kty-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kty-space-4); }
.kty-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kty-space-4); }
@media (max-width: 860px) {
  .kty-grid-3, .kty-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Stat tile. A single headline figure is a stat tile, never a chart. */
.kty-stat { display: flex; flex-direction: column; gap: var(--kty-space-2); }
.kty-stat__figure {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--kty-text-heading);
  font-variant-numeric: tabular-nums;
}
.kty-stat__figure--data { font-family: var(--kty-font-data); font-weight: 500; font-size: 40px; line-height: 1.15; }
.kty-stat__label {
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--kty-tracking-label);
  color: var(--kty-text-secondary);
}
.kty-stat-row { display: flex; flex-wrap: wrap; gap: var(--kty-space-7); align-items: flex-end; }

/* On a dark ground */
.kty-on-dark { color: var(--kty-white); }
.kty-on-dark .kty-stat__figure { color: var(--kty-white); }
.kty-on-dark .kty-stat__figure--data { color: var(--kty-green-bright); }
.kty-on-dark .kty-stat__label { color: var(--kty-blue-300); }
.kty-on-dark h1, .kty-on-dark h2, .kty-on-dark h3 { color: var(--kty-white); }
.kty-on-dark .kty-prose { color: var(--kty-blue-200); }
.kty-on-dark a { color: var(--kty-green-bright); }
.kty-on-dark a:hover { color: var(--kty-green-core); }


/* ==========================================================================
   7. Tables: the default form for record fields
   ========================================================================== */

.kty-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--kty-radius-record);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--kty-border);
}
.kty-table caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--kty-text-heading);
  padding-bottom: var(--kty-space-3);
}
.kty-table thead th {
  background: var(--kty-blue-800);
  color: var(--kty-white);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 12px 20px;
  border-radius: var(--kty-radius-record);
}
.kty-table tbody td, .kty-table tbody th {
  padding: 13px 20px;
  border-bottom: 1px solid var(--kty-border);
  font-size: 15px;
  text-align: left;
  font-weight: 400;
}
.kty-table tbody tr:nth-child(even) td,
.kty-table tbody tr:nth-child(even) th { background: var(--kty-blue-100); }
.kty-table tbody tr:last-child td,
.kty-table tbody tr:last-child th { border-bottom: none; }
/* Field name column */
.kty-table tbody th[scope="row"] { color: var(--kty-text-secondary); }
/* Numbers right-aligned and tabular. Never centre a column. */
.kty-table .kty-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Anything the reader might transcribe */
.kty-table .kty-data { font-family: var(--kty-font-data); font-size: 14px; }

/* Horizontally scrollable under 640px with a visible affordance. */
.kty-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .kty-table-scroll { border-right: 2px solid var(--kty-blue-200); }
  .kty-table { min-width: 560px; }
}

:root[data-theme="dark"] .kty-table,
:root[data-theme="dark"] .kty-table tbody td,
:root[data-theme="dark"] .kty-table tbody th { border-color: var(--kty-blue-700); }
:root[data-theme="dark"] .kty-table tbody tr:nth-child(even) td,
:root[data-theme="dark"] .kty-table tbody tr:nth-child(even) th { background: var(--kty-blue-800); }
:root[data-theme="dark"] .kty-table thead th { background: var(--kty-blue-700); }


/* ==========================================================================
   8. Pills and badges
   Colour never carries meaning alone. Every pill ships with its word.
   ========================================================================== */

.kty-pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--kty-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.kty-pill--approved { background: var(--kty-approved-fill); color: var(--kty-approved); }
.kty-pill--pending  { background: var(--kty-pending-fill);  color: var(--kty-pending); }
.kty-pill--denied   { background: var(--kty-denied-fill);   color: var(--kty-denied); }
.kty-pill--none     { background: var(--kty-none-fill);     color: var(--kty-none); }


/* ==========================================================================
   9. Callouts and quotations
   ========================================================================== */

.kty-callout {
  display: flex;
  align-items: stretch;
  border-radius: var(--kty-radius-record);
}
.kty-callout::before {
  content: "";
  flex: 0 0 4px;
  background: var(--kty-blue-500);
}
.kty-callout__body {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--kty-blue-100);
  padding: var(--kty-space-4) var(--kty-space-5);
}

/* A quotation lifted from a meeting is the most valuable object in a report.
   Verbatim, with speaker, body and date. Never generated. */
.kty-quote { margin: 0; }
.kty-quote .kty-quote__text {
  font-family: var(--kty-font-prose);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--kty-ink);
  margin: 0;
}
.kty-quote__attribution {
  display: block;
  font-family: var(--kty-font-ui);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--kty-slate);
  margin-top: var(--kty-space-3);
}

:root[data-theme="dark"] .kty-callout__body { background: var(--kty-blue-800); }
:root[data-theme="dark"] .kty-quote .kty-quote__text { color: var(--kty-blue-100); }
:root[data-theme="dark"] .kty-quote__attribution { color: var(--kty-blue-300); }


/* ==========================================================================
   10. Source lines
   A figure without a source line does not ship.
   ========================================================================== */

.kty-source {
  font-family: var(--kty-font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--kty-text-secondary);
  margin-top: var(--kty-space-3);
}
figure { margin: 0 0 var(--kty-space-6); }
figure > figcaption { font-size: 13px; color: var(--kty-text-secondary); margin-top: var(--kty-space-3); }


/* ==========================================================================
   11. Charts
   One y-axis. Red is never a series. Text wears text tokens.
   ========================================================================== */

.kty-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kty-space-5);
  margin-bottom: var(--kty-space-5);
}
.kty-legend__item { display: flex; align-items: center; gap: var(--kty-space-2); font-size: 14px; color: var(--kty-text-secondary); }
.kty-legend__swatch { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 0; }

/* Horizontal bar rows. 4px rounding on the data end only. */
.kty-bars { display: flex; flex-direction: column; gap: var(--kty-space-6); }
.kty-bar-row { display: flex; align-items: center; gap: var(--kty-space-5); }
.kty-bar-row__label { flex: 0 0 auto; width: 240px; }
.kty-bar-row__name { font-size: 16px; font-weight: 600; color: var(--kty-text); }
.kty-bar-row__sub { font-size: 13px; color: var(--kty-text-secondary); margin-top: 3px; }
.kty-bar-track { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; min-width: 0; height: 38px; }
.kty-bar { height: 38px; }
.kty-bar:last-child { border-radius: 0 4px 4px 0; }
.kty-bar-row__value { flex: 0 0 auto; width: 150px; font-size: 16px; font-weight: 600; color: var(--kty-text); }

@media (max-width: 720px) {
  .kty-bar-row { flex-wrap: wrap; }
  .kty-bar-row__label, .kty-bar-row__value { width: 100%; }
}

/* Recessive grid: horizontal only, never on the value axis of a bar chart. */
.kty-chart-grid { background-image: linear-gradient(to bottom, var(--kty-line) 1px, transparent 1px); }

.kty-series-1 { background: var(--kty-series-1); }
.kty-series-2 { background: var(--kty-series-2); }
.kty-series-3 { background: var(--kty-series-3); }
.kty-series-4 { background: var(--kty-series-4); }
.kty-series-5 { background: var(--kty-series-5); }
.kty-series-other { background: var(--kty-series-other); }


/* ==========================================================================
   12. Forms
   ========================================================================== */

.kty-field { display: flex; flex-direction: column; gap: 7px; }
.kty-field > label {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--kty-tracking-label);
  color: var(--kty-text-secondary);
}
.kty-input, .kty-select {
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--kty-font-ui);
  font-size: 15px;
  color: var(--kty-text);
  background: var(--kty-surface);
  border: 1px solid var(--kty-blue-200);
  border-radius: var(--kty-radius-ui);
}
.kty-input:focus-visible, .kty-select:focus-visible {
  border-color: var(--kty-blue-500);
  outline: 2px solid var(--kty-focus);
  outline-offset: 2px;
}
.kty-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kty-space-4); }


/* ==========================================================================
   13. Utilities
   ========================================================================== */

.kty-wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--kty-space-7); }
@media (max-width: 860px) { .kty-wrap { padding-inline: var(--kty-space-4); } }

.kty-stack > * + * { margin-top: var(--kty-space-5); }
.kty-rule { height: 1px; background: var(--kty-border); border: none; margin: var(--kty-space-6) 0; }
.kty-tick { width: 72px; height: 5px; background: var(--kty-green-core); }
.kty-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The logo lockup. Replace the typographic fallback with the supplied SVG
   as soon as the kit in standard section 2.7 exists. Clear space on all four
   sides is half the diameter of the green disc. */
.kty-logo { display: inline-flex; align-items: center; }
.kty-logo img, .kty-logo svg { display: block; height: 1.6em; width: auto; }
/* 38px tall is 215px wide, the horizontal lockup's screen minimum:
   the size at which its disc still measures the 37.7px below which
   the 'to' closes up. Do not set it smaller. */
.kty-logo--header img, .kty-logo--header svg { height: 38px; }
.kty-logo--footer img, .kty-logo--footer svg { height: 38px; }


/* ==========================================================================
   14. Print
   ========================================================================== */

@media print {
  @page { size: letter portrait; margin: 0.9in 0.85in; }

  body { background: #FFFFFF; color: #131A21; font-size: 10.5pt; }

  .kty-header__nav,
  .kty-btn,
  .kty-filter-bar { display: none !important; }

  .kty-band, .kty-header, .kty-hero, .kty-cta, .kty-footer,
  .kty-table thead th, .kty-spine, .kty-card--tick::before, .kty-callout::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Spine widths switch to their print values. */
  .kty-spined > .kty-spine { flex-basis: var(--kty-spine-interior); width: var(--kty-spine-interior); }
  .kty-spined--cover > .kty-spine { flex-basis: var(--kty-spine-cover); width: var(--kty-spine-cover); }

  .kty-prose { font-family: var(--kty-font-prose); font-size: 10.5pt; line-height: 15pt; }

  /* A table that runs past one page repeats its header row. */
  .kty-table { page-break-inside: auto; }
  .kty-table thead { display: table-header-group; }
  .kty-table tr { page-break-inside: avoid; }

  /* Never strand a source line from its figure. */
  figure, .kty-callout, .kty-quote { page-break-inside: avoid; }
  .kty-source { page-break-before: avoid; }

  h1, h2, h3 { page-break-after: avoid; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #55636E; }
}