:root {
  color-scheme:light;
  --paper:#f8f5ee;
  --card:#fffdf8;
  --ink:#242a23;
  --muted:#616557;
  --line:#d8d6c9;
  --accent:#733c29;
  --green:#304d39;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:1.125rem/1.65 var(--sans);
}
a {
  color:inherit;
  text-underline-offset:.22em;
}
button,input,summary {
  font:inherit;
}
button,input {
  min-height:48px;
}
button,summary {
  cursor:pointer;
}
button {
  border:1px solid var(--line);
  border-radius:5px;
  padding:.65rem 1.1rem;
  line-height:1.4;
}
button:disabled {
  opacity:.45;
  cursor:default;
}
input {
  width:100%;
  max-width:9rem;
  border:1px solid #848a7c;
  border-radius:4px;
  background:var(--card);
  padding:.4rem .65rem;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
input:disabled {
  opacity:.5;
}
input[aria-invalid=true] {
  border:2px solid #9d3828;
}
:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px;
}
[hidden] {
  display:none!important;
}
h1,h2,h3,p {
  margin-top:0;
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.16;
}
h1 {
  font-size:clamp(2.2rem,5.8vw,3.65rem);
  letter-spacing:-.035em;
  margin-bottom:1.2rem;
  text-wrap:balance;
}
h2 {
  font-size:1.85rem;
  margin-bottom:1.3rem;
}
h3 {
  font-size:1.3rem;
  margin-bottom:.9rem;
}
p {
  margin-bottom:1rem;
}
li+li {
  margin-top:.55rem;
}
ul,ol {
  padding-left:1.5rem;
}
.site-header,.site-footer,main {
  max-width:1160px;
  margin:auto;
  padding-left:1.25rem;
  padding-right:1.25rem;
}
.site-header {
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:1rem;
}
.brand {
  font-family:var(--serif);
  font-size:1.45rem;
  font-weight:bold;
  text-decoration:none;
}
.header-note {
  font-size:.875rem;
  color:var(--muted);
}
.site-footer {
  padding-top:2rem;
  padding-bottom:2rem;
  margin-top:4rem;
  border-top:1px solid var(--line);
  font:1rem var(--serif);
  color:var(--muted);
}
.skip-link {
  position:fixed;
  z-index:20;
  top:.5rem;
  left:.5rem;
  background:var(--card);
  padding:.75rem;
  transform:translateY(-160%);
}
.skip-link:focus {
  transform:none;
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  font-size:.875rem;
  line-height:1.5;
  color:var(--muted);
  margin-bottom:1rem;
}
.status {
  display:inline-block;
  border:1px solid #b8baa9;
  border-radius:3px;
  padding:.15rem .5rem;
  text-transform:capitalize;
  color:var(--green);
  font-size:.875rem;
}
.index-heading {
  padding:2.8rem 0 1rem;
}
.index-heading h1 {
  font-size:clamp(2.6rem,6vw,4rem);
}
.recipe-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.recipe-card {
  display:flex;
  flex-direction:column;
  text-decoration:none;
  padding:1.5rem;
  background:var(--card);
  border:1px solid var(--line);
  border-top:3px solid var(--green);
  border-radius:3px;
  transition:border-color .15s;
}
.recipe-card:hover {
  border-color:var(--green);
}
.recipe-card h2 {
  font-size:1.65rem;
  margin-bottom:.85rem;
}
.recipe-card p {
  font-size:1rem;
  color:var(--muted);
  line-height:1.65;
}
.card-link {
  margin-top:auto;
  padding-top:1rem;
  display:flex;
  justify-content:space-between;
  color:var(--accent);
  font-size:1rem;
  font-weight:600;
}
.recipe-heading {
  padding:1.6rem 0 1rem;
  max-width:850px;
}
.back-link {
  display:inline-block;
  padding:.5rem 0;
  margin-bottom:1.4rem;
  font-size:1rem;
}
.intro {
  max-width:72ch;
  color:var(--muted);
  font-size:1.1rem;
}
.intro h1 {
  display:none;
}
.recipe-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.25rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.2rem 0;
  margin:0 0 2rem;
}
.scale-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:.65rem 1rem;
  flex:1;
}
.scale-controls label {
  display:flex;
  flex-direction:column;
  font-size:1rem;
  font-weight:600;
  gap:.35rem;
}
.scale-controls .unit-label {
  font-weight:400;
  font-size:.875rem;
  color:var(--muted);
}
.control-help {
  flex-basis:100%;
  font-size:.875rem;
  line-height:1.5;
  color:var(--muted);
  margin:0;
}
#base-help {
  order:-1;
}
.primary-button {
  background:var(--green);
  color:#fff;
  border-color:var(--green);
  font-weight:600;
}
.primary-button:hover {
  background:#203c29;
}
.quiet-button {
  background:var(--card);
  color:var(--ink);
}
.recipe-toolbar>.primary-button {
  width:100%;
  display:flex;
  justify-content:space-between;
}
.recipe-columns {
  display:grid;
  gap:2.3rem;
}
.ingredient-column {
  min-width:0;
}
#ingredients>h2 {
  border-bottom:2px solid var(--green);
  padding-bottom:.7rem;
}
.component {
  padding:.5rem 0 1.25rem;
}
.component h3 {
  color:var(--accent);
}
.ingredients {
  list-style:none;
  padding:0;
  margin:0;
}
.ingredient {
  display:grid;
  grid-template-columns:minmax(85px,30%) minmax(0,1fr);
  column-gap:1rem;
  padding:.75rem 0;
  border-bottom:1px solid var(--line);
  line-height:1.4;
  margin:0;
}
.ingredient-quantity {
  font-weight:650;
  font-variant-numeric:tabular-nums;
  font-size:1.1rem;
  overflow-wrap:anywhere;
}
.ingredient-detail {
  display:flex;
  flex-direction:column;
  gap:.25rem;
  font-size:1.05rem;
  overflow-wrap:anywhere;
}
.preparation {
  font-size:.9rem;
  line-height:1.5;
  color:var(--muted);
}
.judgment {
  align-self:flex-start;
  font-size:.8rem;
  color:var(--accent);
  border-bottom:1px dotted currentColor;
}
.body-section {
  margin-bottom:2.6rem;
}
.body-section h2 {
  border-bottom:1px solid var(--line);
  padding-bottom:.7rem;
}
.equipment {
  font-size:1rem;
  margin-top:1rem;
}
.equipment ul {
  padding-left:1.25rem;
}
.method-column {
  min-width:0;
}
.method-column ol {
  padding-left:1.6rem;
}
.method-column ol>li {
  padding-left:.5rem;
  margin-bottom:1.55rem;
}
.method-column ol>li::marker {
  font-weight:700;
  color:var(--accent);
}
.method-column ol p {
  margin:0;
}
.scaling-warning {
  font-size:1rem;
  line-height:1.55;
  padding:1rem;
  border-left:3px solid var(--accent);
  background:#eee7d9;
}
.development {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:.25rem 0;
}
.development summary {
  font-family:var(--serif);
  font-size:1.4rem;
  padding:.8rem 0;
  min-height:48px;
}
.development ul {
  font-size:1rem;
}
.cooking {
  overflow:hidden;
}
dialog {
  width:100%;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  border:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
}
dialog::backdrop {
  background:#242a23c9;
}
.cook-shell {
  height:100%;
  display:flex;
  flex-direction:column;
  max-width:850px;
  margin:auto;
}
.cook-header {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:1rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--line);
}
.cook-header h2 {
  font-size:1.15rem;
  line-height:1.35;
  margin:0;
}
.cook-header .eyebrow {
  font-size:.875rem;
  margin-bottom:.35rem;
  color:var(--accent);
}
.cook-header button {
  flex-shrink:0;
}
.cook-scroll {
  overflow:auto;
  padding:1.7rem 1.25rem;
  flex:1;
  min-height:0;
}
.step-count {
  font-size:1rem;
  letter-spacing:.03em;
  color:var(--accent);
  font-weight:600;
}
#current-step {
  font-size:clamp(1.4rem,3vw,1.85rem);
  line-height:1.65;
  outline:none;
  padding-bottom:1.5rem;
}
#current-step p:last-child {
  margin-bottom:0;
}
#cook-ingredients {
  border-top:1px solid var(--line);
  padding-top:.5rem;
}
#cook-ingredients summary {
  padding:.8rem 0;
  min-height:48px;
  font-size:1rem;
  font-weight:600;
}
#cook-factor {
  margin-left:.75rem;
  color:var(--muted);
}
.cook-ingredient-list {
  padding-top:1rem;
}
.cook-nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  padding:1rem 1.25rem max(1rem,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:var(--paper);
}
.cook-nav button {
  min-height:56px;
  font-size:1.05rem;
}
.cook-nav .primary-button {
  padding-left:.6rem;
  padding-right:.6rem;
}
@media(min-width:700px) {
  .site-header,main,.site-footer {
    padding-left:2rem;
    padding-right:2rem;
  }
  .recipe-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.4rem;
  }
  .recipe-card {
    padding:1.8rem;
  }
  .recipe-columns {
    grid-template-columns:minmax(240px, .8fr) minmax(0,1.4fr);
    gap:3rem;
  }
  .recipe-toolbar>.primary-button {
    width:auto;
    gap:2rem;
  }
  .recipe-heading {
    padding-top:2.5rem;
  }
  .recipe-toolbar {
    padding:1.4rem 0;
  }
  .scale-controls {
    max-width:700px;
  }
  .recipe-heading h1 {
    max-width:22ch;
  }
  dialog {
    max-width:880px;
    max-height:94dvh;
    inset:0;
    margin:auto;
    border-radius:8px;
  }
  .cook-header,.cook-scroll,.cook-nav {
    padding-left:2rem;
    padding-right:2rem;
  }
  .cook-header h2 {
    font-size:1.35rem;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    transition:none!important;
  }
}
@media print {
  body {
    font-size:11pt;
    background:white;
  }
  .site-header,.site-footer,.recipe-toolbar,.back-link,dialog,.skip-link {
    display:none!important;
  }
  .recipe-columns {
    display:block;
  }
  .ingredient-column,.body-section {
    break-inside:avoid;
  }
  .recipe-page {
    max-width:none;
  }
  .recipe-heading {
    padding:0;
  }
  .ingredient {
    padding:.25rem 0;
  }
  .method-column ol>li {
    margin-bottom:.6rem;
  }
}