/* Print-first layout: US Letter, 1-inch margins, max content width 6.5in */
@page { size: Letter; margin: 1in; }

:root{
  --text: #111;
  --muted: #444;
  --rule: #cfcfcf;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

html, body { height: 100%; }
body{
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.35;
  background: #fff;
}

.page{
  max-width: 6.5in; /* 8.5in - 2in margins */
  margin: 0 auto;
  padding: 0;
}

header{
  padding: 0 0 0.2in 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.2in;
}

h1{
  font-size: 18pt;
  margin: 0 0 0.08in 0;
}

.meta{
  font-size: 10.5pt;
  color: var(--muted);
  margin: 0.02in 0;
}

.note{
  font-size: 10.5pt;
  margin: 0.12in 0 0 0;
}

ol{
  margin: 0;
  padding-left: 0.26in; /* keep numbers inside margins */
}

li{
  margin: 0 0 0.18in 0;
  padding: 0 0 0.14in 0;
  border-bottom: 1px solid var(--rule);
  page-break-inside: avoid;
  break-inside: avoid;
}

h2{
  font-size: 12.5pt;
  margin: 0 0 0.04in 0;
}

.kpi{
  font-size: 10.5pt;
  margin: 0.02in 0;
  color: var(--muted);
}

.url{
  font-family: var(--mono);
  font-size: 9.8pt;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 0.02in 0 0.06in 0;
}

.url a{
  color: inherit;
  text-decoration: underline;
}

.mla{
  font-size: 10.5pt;
  margin: 0.02in 0;
}

.desc{
  font-size: 10.8pt;
  margin: 0.06in 0 0.02in 0;
}

footer{
  margin-top: 0.25in;
  font-size: 9.8pt;
  color: var(--muted);
}

@media screen{
  body{ padding: 18px; }
  .page{ box-sizing: border-box; }
}

@media print{
  body{ padding: 0; }
  a{ color: inherit; }
  header, li{ border-color: #000; }
}