/* print.css: one US Letter page */
@page { size: letter; margin: 0.45in 0.5in; }

html, body { background: #fff; }
body { font-size: 10pt; line-height: 1.44; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.recipe {
  display: grid;
  grid-template-columns: 2.6in 1fr;
  grid-template-areas: "header header" "ingredients method";
  column-gap: 0.28in;
  row-gap: 0.16in;
}

.recipe-header {
  grid-area: header;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: .3in;
  padding-bottom: .1in;
  border-bottom: 1.5pt solid var(--maple);
}
.kicker { font-size: 9pt; grid-column: 1 / -1; margin-bottom: 3pt; }
h1 { font-size: 26pt; }
.pdf-link { display: none; }
.byline { font-size: 10pt; text-align: right; white-space: nowrap; padding-bottom: 3pt; }

.ingredients {
  grid-area: ingredients;
  background: var(--paper);
  padding: .12in .14in;
  border-radius: 4pt;
  align-self: start;
}
.ingredients section + section { margin-top: 11pt; }
.ingredients h2 { font-size: 8pt; margin-bottom: 2pt; }
.ingredients li { padding: 2.2pt 0; line-height: 1.22; display: grid; grid-template-columns: .88in 1fr; column-gap: 4pt; }
.ingredients .qty { display: inline; font-size: 8pt; padding-top: .8pt; }
.notes p { margin: 0 0 4pt; font-size: 9pt; line-height: 1.3; }

.method { grid-area: method; columns: 2; column-gap: .22in; }
.method h2 { font-size: 14pt; padding-bottom: 1pt; margin: 0 0 5pt; break-after: avoid; }
.method h2:not(:first-child) { margin-top: 9pt; }
.method li { --step-indent: 16pt; padding-left: var(--step-indent); margin-bottom: 3.4pt; break-inside: avoid; }
.method li::before { font-size: 10pt; }
.callout { padding: 4pt 6pt; margin: 5pt 0; break-inside: avoid; }
.aside { margin: 3pt 0 5pt 16pt; font-size: 10pt; break-inside: avoid; }
.fineprint { font-size: 10pt; margin: 6pt 0 0 16pt; }