/* base.css: tokens and typography shared by screen and print */
:root {
  --paper: #fbf7f0;
  --ink: #2a211b;
  --muted: #74655a;
  --maple: #a4541c;
  --berry: #b0293f;
  --butter: #f3e6c8;
  --rule: #e2d5c0;

  --display: "Fraunces", Georgia, serif;
  --text: "Source Serif 4", Georgia, serif;
  --label: "Work Sans", "Helvetica Neue", Arial, sans-serif;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; }

.kicker,
.ingredients h2,
.method h2 .sub {
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kicker { color: var(--berry); margin: 0; }

h1 {
  font-variation-settings: "opsz" 144, "SOFT" 50;
  line-height: 1.02;
  letter-spacing: -.01em;
}
h1 .line { display: block; }
h1 .with { font-style: italic; font-weight: 400; color: var(--maple); }

.byline { color: var(--muted); margin: 0; font-style: italic; }
.byline .sep { color: var(--maple); font-style: normal; padding: 0 .3em; }

/* Ingredients */
.ingredients ul { list-style: none; margin: 0; padding: 0; }
.ingredients li { padding: .18em 0; border-bottom: 1px dotted var(--rule); }
.ingredients li:last-child { border-bottom: 0; }
.ingredients .qty {
  display: block;
  font-family: var(--label);
  font-weight: 500;
  font-size: .82em;
  color: var(--maple);
}
.ingredients h2 { color: var(--berry); }
.notes p { font-style: italic; color: var(--muted); }

/* Method */
.method h2 { color: var(--ink); border-bottom: 2px solid var(--maple); }
.method h2 .sub { font-size: .45em; color: var(--berry); vertical-align: middle; margin-left: .4em; }

.method ol { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.method ol[start="4"]  { counter-reset: step 3; }
.method ol[start="6"]  { counter-reset: step 5; }
.method ol[start="9"]  { counter-reset: step 8; }
.method ol[start="11"] { counter-reset: step 10; }
.method li { position: relative; counter-increment: step; }
.method li::before {
  content: counter(step);
  display: inline-block; /* sits on the text baseline */
  width: var(--step-indent);
  margin-left: calc(-1 * var(--step-indent));
  line-height: 1;
  font-family: var(--display);
  font-weight: 700;
  color: var(--maple);
}

.callout {
  background: var(--butter);
  border-left: 3px solid var(--maple);
}
.callout strong:first-child { font-family: var(--display); font-style: italic; }
.aside, .fineprint { font-style: italic; color: var(--muted); }