/* screen.css: responsive web page */
body { font-size: 18px; }

.recipe {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 20px 80px;
  display: grid;
  gap: 32px 48px;
  grid-template-areas: "header" "ingredients" "method";
}

.recipe-header { grid-area: header; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
.kicker { font-size: 13px; margin-bottom: 12px; }
h1 { font-size: clamp(34px, 6vw, 60px); margin-bottom: 14px; }
.pdf-link { margin: 14px 0 0; font-family: var(--label); font-weight: 500; font-size: 14px; }
.pdf-link a { color: var(--maple); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pdf-link a:hover { color: var(--berry); }
.pdf-link a::before { content: "↓ "; }

.ingredients { grid-area: ingredients; }
.ingredients section + section { margin-top: 28px; }
.ingredients h2 { font-size: 13px; margin-bottom: 8px; }

.method { grid-area: method; }
.method h2 { font-size: 30px; padding-bottom: 6px; margin: 0 0 18px; }
.method h2:not(:first-child) { margin-top: 44px; }
.method li { --step-indent: 40px; padding-left: var(--step-indent); margin-bottom: 14px; }
.method li::before { font-size: 1.25em; }
.callout { padding: 14px 18px; margin: 22px 0; border-radius: 0 6px 6px 0; }
.aside { margin: 18px 0 18px 40px; }
.fineprint { font-size: 15px; margin: 28px 0 0 40px; }

@media (min-width: 860px) {
  .recipe {
    grid-template-columns: 320px 1fr;
    grid-template-areas: "header header" "ingredients method";
  }
  .ingredients { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1d1813;
    --ink: #efe6d8;
    --muted: #b5a594;
    --maple: #e08a4a;
    --berry: #ef6a7f;
    --butter: #33281d;
    --rule: #3b3128;
  }
}