/* Handout styles: one A4 page, printed to PDF with Chrome or Edge. */

/* Static TrueType files: Chrome's PDF output embeds them as font subsets (a variable font would become Type 3 drawings). */
@font-face { font-family: "Montserrat Handout"; src: url("fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Montserrat Handout"; src: url("fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Montserrat Handout"; src: url("fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; }

/* The paper: A4 with 16 mm top/bottom and 18 mm side margins. For US Letter, use: size: letter; */
@page { size: A4; margin: 16mm 18mm; }

/* Keep the tinted boxes when the PDF is printed without "background graphics". */
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

body {
  margin: 0;
  font-family: "Montserrat Handout", sans-serif;
  font-size: 10.5pt;
  line-height: 1.45;
  color: #1e3a51;
  /* No ligatures: text copied or extracted from the PDF keeps "f" and "i" as two characters, not one "fi" ligature character. */
  font-variant-ligatures: none;
}

header { display: grid; grid-template-columns: 1fr 62mm; gap: 8mm; align-items: center; }
h1 { font-size: 22pt; font-weight: 700; line-height: 1.15; margin: 0 0 3mm; }
.lede { font-size: 11.5pt; margin: 0; }
/* An <img> printed with background printing on or off; a CSS background image needs background printing or print-color-adjust: exact. */
header img { display: block; width: 62mm; height: auto; }

h2 { font-size: 13pt; font-weight: 600; margin: 7mm 0 2mm; }
ol { margin: 0; padding-left: 6mm; }
ol li { margin: 0 0 2.2mm; }
ul { margin: 0; padding-left: 5mm; }
ul li { margin: 0 0 1.2mm; }

.comment { display: grid; grid-template-columns: 22mm 1fr; gap: 1.5mm 4mm; margin: 0; padding: 4mm 5mm; border: 0.6pt solid #3b666b; border-radius: 3mm; break-inside: avoid; }
.comment dt { font-weight: 600; }
.comment dd { margin: 0; }

.box { margin-top: 6mm; padding: 4mm 5mm; background: #f6e9d3; border-radius: 3mm; break-inside: avoid; }
.box h2 { margin-top: 0; }

footer { margin-top: 7mm; padding-top: 2.5mm; border-top: 0.4pt solid #3b666b; font-size: 8.5pt; color: #3b666b; }
footer p { margin: 0 0 1mm; }
a { color: #1e3a51; }

/* On screen only (printing ignores this): show the handout as a white A4 sheet on a light grey background,
   with the printed content width (210 mm - 2 x 18 mm = 174 mm) and the page margins as padding. */
@media screen {
  html { background: #e9e9e9; }
  body { width: 174mm; min-height: 265mm; margin: 10mm auto; padding: 16mm 18mm; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
}