/* Printing a recipe.
   Linked with media="print". The one page button flips it to media="all" for a
   moment to measure the recipe at its printed width, which is why the layout
   here has to stand on its own. */

@page { size: letter; margin: 0.6in; }

body { background: #fff; color: #000; width: 7.3in; margin: 0; font-size: 11pt; }

/* The site around the recipe is not worth paper. */
.bar, footer.site, .flash, .talk, .turn, .crumb, .noprint, .searchform, .who { display: none !important; }

.wrap { max-width: none; width: auto; padding: 0; margin: 0; }
.page { background: #fff; border: 0; border-radius: 0; box-shadow: none; padding: 0; }

.rtitle { margin: 0 0 .5em; }
.rtitle h1 { font-size: 20pt; text-decoration-color: #000; }
.score, .byline { color: #333; }

.ingredients { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-bottom: 1em; }
.ingredients li { border-bottom: 1px dotted #bbb; break-inside: avoid; }
.step { break-inside: avoid; margin: 0 0 .6em; }
.rhead { break-after: avoid; margin-top: .8em; }
.note, .tip { color: #333; }
a { color: #000; text-decoration: none; }

.page::after {
  content: "armitagecookbook.com";
  display: block;
  margin-top: 18pt;
  font-size: 8pt;
  color: #666;
}

/* Print on one page: the recipe is laid out wider than the paper, then scaled
   down to fit it. JavaScript works out the number and puts it in --fit. */
html.fitpage .page {
  width: calc(100% / var(--fit, 1));
  transform: scale(var(--fit, 1));
  transform-origin: top left;
}
html.fitpage .ingredients { grid-template-columns: repeat(3, minmax(0, 1fr)); }