@font-face {
  font-family:Hanken;
  src:url('/fonts/hanken-grotesk.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

:root {
  --paper:#f7f2e8;
  --ink:#303b2f;
  --muted:#686b5b;
  --red:#ab382b;
  --dark-red:#8f2c22;
  --green:#354b37;
  --line:#d6cdbc;
  --pale:#eee8d9;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Hanken,'Helvetica Neue',Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}

button,input {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

img,svg {
  max-width:100%;
}

svg {
  display:block;
}

h1,h2,h3,h4,p,figure {
  margin:0;
}

h1,h2,h3,h4 {
  font-weight:400;
}

h1,h2,h3 {
  font-family:var(--serif);
}

h2 {
  font-size:clamp(36px,4.3vw,57px);
  line-height:1.09;
  letter-spacing:-2px;
}

h2 em {
  font-weight:400;
}

h3 {
  font-size:29px;
  line-height:1.2;
  letter-spacing:-.6px;
}

p {
  margin-top:16px;
}

strong {
  font-weight:650;
}

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible {
  outline:3px solid #b77812;
  outline-offset:5px;
}

.wrap {
  width:min(1200px,calc(100% - 100px));
  margin-inline:auto;
}

.section-space {
  padding-block:86px;
}

.eyebrow {
  font:650 11px/1.4 var(--sans);
  text-transform:uppercase;
  letter-spacing:2px;
  margin:0;
}

.skip-link {
  position:fixed;
  z-index:9;
  left:20px;
  top:-80px;
  background:var(--green);
  color:white;
  padding:12px 20px;
}

.skip-link:focus {
  top:20px;
}

.site-header {
  height:104px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  gap:30px;
}



.brand-wordmark {
  display:flex;
  align-items:center;
  min-height:44px;
  font-family:var(--sans);
  font-size:28px;
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1;
  white-space:nowrap;
  color:var(--ink);
}
.brand-wordmark .dot {
  color:var(--red);
}
.brand-wordmark .tld {
  color:var(--muted);
  font-weight:400;
}
.nav-up {
  color:var(--red);
}
.site-header nav {
  display:flex;
  gap:28px;
  margin-left:auto;
  font-size:13px;
}

.site-header nav a:hover {
  color:var(--red);
}

.print-button {
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:1px solid var(--line);
  border-radius:3px;
  padding:9px 14px;
  color:var(--ink);
  font-size:12px;
}

.print-button:hover {
  border-color:var(--ink);
}

.print-button svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
}

.hero {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:65px;
  align-items:center;
  padding-block:66px 62px;
}

.hero-copy {
  padding:0 0 10px;
}

.hero .eyebrow {
  color:var(--red);
  display:flex;
  align-items:center;
  gap:10px;
}

.small-star {
  font-size:24px;
  line-height:1;
}

h1 {
  font-size:clamp(65px,7.2vw,98px);
  line-height:.98;
  letter-spacing:-5px;
  color:var(--red);
  margin:22px 0 26px;
}

h1 em {
  font-weight:400;
}

.title-dot {
  color:var(--green);
}

.hero-description {
  font-size:16px;
  line-height:1.65;
  max-width:380px;
}

.button {
  display:inline-flex;
  align-items:center;
  gap:36px;
  background:var(--red);
  color:var(--paper);
  padding:14px 21px;
  border-radius:2px;
  font-size:14px;
  margin-top:28px;
  transition:background .15s;
}

.button:hover {
  background:var(--dark-red);
}

.hand-note {
  font:italic 15px/1.4 var(--serif);
  color:var(--muted);
  margin-top:17px;
}

.hero-image {
  position:relative;
  min-width:0;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:12px;
}

.hero-image picture {
  display:contents;
}
.hero-image img {
  width:100%;
  height:515px;
  object-fit:cover;
  object-position:49% 50%;
  border-radius:3px;
  display:block;
  background:var(--pale);
}

.hero-image figcaption {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:14px;
}

.hero-seal {
  position:absolute;
  top:-10px;
  right:-22px;
  width:118px;
  height:118px;
  border-radius:50%;
  background:var(--green);
  color:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  transform:rotate(11deg);
  outline:1px dashed var(--paper);
  outline-offset:-8px;
}

.hero-seal span {
  font-size:9px;
  letter-spacing:1.6px;
}

.hero-seal svg {
  width:42px;
  height:31px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
}

.recipe-facts {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-block:25px;
}

.recipe-facts>div {
  border-right:1px solid var(--line);
  padding-left:32px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.recipe-facts>div:first-child {
  padding-left:0;
}

.recipe-facts>div:last-child {
  border:0;
}

.recipe-facts .eyebrow {
  font-size:10px;
  color:var(--red);
}

.recipe-facts strong {
  font-size:19px;
  font-weight:500;
}

.recipe-facts span:last-child {
  font-size:12px;
  color:var(--muted);
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:44px;
}

.section-heading .eyebrow {
  margin-bottom:16px;
  color:var(--red);
}

.section-heading>p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  padding-bottom:3px;
}

.process-track {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  position:relative;
  gap:20px;
}

.process-track:before {
  content:'';
  position:absolute;
  top:45px;
  left:8%;
  right:8%;
  border-top:1px dashed #9c9f88;
  z-index:-1;
}

.process-track a {
  display:flex;
  align-items:center;
  text-align:center;
  flex-direction:column;
  padding:0 5px 8px;
}

.process-track a:hover strong {
  color:var(--red);
}

.process-track svg {
  width:90px;
  height:76px;
  fill:var(--paper);
  stroke:var(--green);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  background:var(--paper);
  margin-bottom:23px;
  padding:0 8px;
}

.step-label {
  font-size:10px;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:9px;
}

.process-track strong {
  font:21px/1.2 var(--serif);
  margin-bottom:7px;
}

.process-track small {
  font-size:12px;
  color:var(--muted);
}

.ingredients-section {
  background:var(--pale);
  border-block:1px solid var(--line);
}

.grocery-intro {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:60px;
  align-items:center;
  margin-bottom:50px;
}

.grocery-intro .eyebrow {
  color:var(--red);
  margin-bottom:16px;
}

.grocery-intro p:not(.eyebrow) {
  font-size:14px;
  max-width:340px;
  color:var(--muted);
}

.grocery-art {
  width:100%;
  height:auto;
  display:block;
}

.list-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:15px;
  border-bottom:1px solid #bfb7a7;
  font-size:12px;
  color:var(--muted);
  gap:15px;
}

.list-toolbar p {
  margin:0;
}

.list-toolbar>div {
  display:flex;
  gap:16px;
  align-items:center;
}

.tiny-check {
  border:1px solid var(--green);
  padding:1px 3px;
  font-size:10px;
  margin-right:6px;
  color:var(--green);
}

#reset-groceries {
  padding:0;
  border:0;
  background:none;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:12px;
  color:var(--muted);
}

.ingredient-columns {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:42px;
  padding-top:27px;
}

.ingredient-columns fieldset {
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}

.ingredient-columns legend {
  font:24px var(--serif);
  padding:0;
  margin-bottom:24px;
  letter-spacing:-.5px;
}

.ingredient-columns legend>span {
  font:10px var(--sans);
  vertical-align:middle;
  color:var(--red);
  letter-spacing:1px;
  margin-right:8px;
}

.ingredient-columns label {
  display:flex;
  gap:12px;
  align-items:flex-start;
  cursor:pointer;
  margin-bottom:20px;
}

.ingredient-columns input {
  appearance:none;
  flex:none;
  width:15px;
  height:15px;
  border:1px solid #919580;
  border-radius:2px;
  margin:4px 0 0;
  display:grid;
  place-content:center;
  background:transparent;
}

.ingredient-columns input:checked {
  background:var(--green);
  border-color:var(--green);
}

.ingredient-columns input:checked:before {
  content:'✓';
  color:var(--paper);
  font-size:12px;
}

.ingredient-columns input:checked+span strong {
  text-decoration:line-through;
  color:var(--muted);
}

.ingredient-columns label strong {
  display:block;
  font-size:14px;
  line-height:1.5;
}

.ingredient-columns label small {
  display:block;
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
  margin-top:4px;
}

.ingredient-columns label em {
  font:italic 12px var(--serif);
  margin-left:3px;
  color:var(--muted);
}

.ingredient-note {
  margin-top:28px;
  border:1px solid #bfc4ab;
  background:#e3e5d2;
  padding:23px;
  transform:rotate(-1deg);
}

.ingredient-note .eyebrow {
  color:var(--green);
  font-size:9px;
}

.ingredient-note p {
  font:21px/1.3 var(--serif);
  margin-top:10px;
}

.ingredient-note small {
  display:block;
  font-size:12px;
  line-height:1.6;
  margin-top:10px;
  color:#52604b;
}

.equipment-strip {
  border-top:1px solid #bfb7a7;
  margin-top:28px;
  padding-top:25px;
  display:flex;
  gap:36px;
  align-items:baseline;
}

.equipment-strip>strong {
  font-size:13px;
  white-space:nowrap;
}

.equipment-strip p {
  font-size:12px;
  line-height:1.8;
  margin:0;
  color:var(--muted);
}

.method-step {
  display:grid;
  grid-template-columns:84px 1fr;
  padding-block:38px;
  border-top:1px solid var(--line);
  scroll-margin-top:30px;
  max-width:960px;
  margin-inline:auto;
}

.step-number {
  font:40px/1 var(--serif);
  color:#b3ae9e;
  padding-top:3px;
}

.step-content {
  max-width:780px;
}

.step-content>.eyebrow {
  color:var(--red);
  font-size:10px;
  margin-bottom:10px;
}

.step-content h3 {
  font-size:32px;
  margin-bottom:19px;
}

.step-content p {
  font-size:15px;
  line-height:1.75;
}

.step-content ol {
  padding-left:22px;
  font-size:15px;
  line-height:1.75;
  margin:19px 0 0;
}

.step-content ol li {
  padding-left:8px;
  margin-bottom:10px;
}

.step-content ol li::marker {
  color:var(--red);
  font-size:12px;
}

.method-selector {
  display:flex;
  border-bottom:1px solid var(--line);
  margin-top:28px;
  gap:20px;
}

.method-selector button {
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  color:var(--muted);
  padding:12px 2px;
  font-size:14px;
}

.method-selector button[aria-pressed=true] {
  color:var(--ink);
  border-bottom-color:var(--red);
}

.method-selector button>span {
  margin-left:8px;
  background:#e4e8d7;
  color:var(--green);
  font-size:9px;
  padding:4px 7px;
  border-radius:2px;
}

.print-method-title {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  margin-top:22px;
}

.method-verdict {
  background:var(--pale);
  padding:13px 18px!important;
  font-size:13px!important;
  margin-top:20px!important;
}

.method-verdict span {
  margin-right:6px;
  color:var(--red);
}

.inline-note {
  padding:18px 24px;
  border-left:2px solid var(--green);
  background:#eeeee2;
  margin-top:24px;
}

.inline-note>strong {
  font-size:12px;
  color:var(--green);
}

.inline-note p {
  font-size:13px;
  margin-top:5px;
}

.quiet-note {
  color:var(--muted);
  font-size:13px!important;
}

.assembly-section {
  background:var(--red);
  color:var(--paper);
  position:relative;
}

.assembly-section .section-heading .eyebrow {
  color:#f4c7ad;
}

.assembly-section .section-heading>p {
  color:#f4d1bc;
}

.assembly-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:75px;
}

.layer-figure>img {
  width:100%;
  height:auto;
  display:block;
}

.layer-figure figcaption {
  font:italic 15px var(--serif);
  text-align:center;
  color:#f4d1bc;
  margin-top:15px;
}

.layer-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}

.layer-list li {
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding:21px 0;
  border-bottom:1px solid #c16b56;
}

.layer-list li:first-child {
  padding-top:0;
}

.layer-list li:last-child {
  border:0;
  padding-bottom:0;
}

.layer-number {
  flex:none;
  border:1px solid #d99b7e;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:12px;
  margin-top:2px;
}

.layer-list h3 {
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.4px;
}

.layer-list p {
  font-size:13px;
  line-height:1.6;
  margin-top:7px;
  color:#f4d1bc;
}

.finish-section>.method-step {
  border-top:0;
  padding-top:0;
}

.cool-callout {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  background:var(--green);
  color:var(--paper);
  padding:55px 65px;
  gap:65px;
  margin-top:35px;
  border-radius:3px;
}

.cool-art {
  color:#efdfb6;
  text-align:center;
}

.cool-art svg {
  width:100%;
  height:auto;
}

.cool-art .hand-note {
  color:#d1d5b7;
  display:block;
  transform:rotate(-6deg);
  margin-top:4px;
}

.cool-callout h2 {
  font-size:46px;
  letter-spacing:-1.5px;
}

.cool-callout .eyebrow {
  font-size:9px;
  color:#ccd4b6;
  margin-bottom:15px;
}

.cool-callout p:not(.eyebrow) {
  font-size:14px;
  line-height:1.7;
  color:#e4e5d4;
}

.cool-footer {
  display:block;
  border-top:1px solid #6b7b5e;
  padding-top:15px;
  margin-top:24px;
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#d6d8b9;
}

.notes-section {
  border-block:1px solid var(--line);
  background:#f0eadf;
}

.notes-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}

.notes-grid article {
  border-top:1px solid #b7b2a2;
  padding-top:20px;
}

.note-index {
  font-size:9px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--red);
}

.notes-grid h3 {
  font-size:25px;
  margin-top:15px;
  line-height:1.18;
}

.notes-grid p {
  font-size:13px;
  line-height:1.75;
  color:var(--muted);
}

.experiment-notes {
  border-block:1px solid var(--line);
  margin-top:40px;
  padding-block:17px;
}

.experiment-notes summary {
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  list-style:none;
  font-size:13px;
}

.experiment-notes summary::-webkit-details-marker {
  display:none;
}

.experiment-notes summary>span {
  font-size:22px;
  transition:transform .2s;
}

.experiment-notes[open] summary>span {
  transform:rotate(45deg);
}

.experiment-notes>div {
  max-width:830px;
  padding-bottom:8px;
}

.experiment-notes p {
  font-size:13px;
  color:var(--muted);
}

.credit {
  margin-top:26px;
}
.credit a,.reference-list a {
  color:var(--red);
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}
.credit a:hover,.reference-list a:hover {
  color:var(--dark-red);
}
.references {
  padding-block:70px 0;
}
.references .section-heading {
  margin-bottom:28px;
}
.reference-list {
  list-style:none;
  margin:0;
  padding:0;
  max-width:760px;
}
.reference-list li {
  padding:20px 0;
  border-top:1px solid var(--line);
  line-height:1.6;
}
.reference-list li:last-child {
  border-bottom:1px solid var(--line);
}
.reference-list li>a {
  font-family:var(--serif);
  font-size:21px;
  border-bottom-width:0;
}
.reference-list li>a:hover {
  border-bottom-width:1px;
}
.reference-list span {
  display:block;
  margin-top:6px;
  font-size:14px;
  color:var(--muted);
}
/* /pizza index: a plain list of styles */
.index-title {
  margin:56px 0 28px;
}
.style-rows {
  list-style:none;
  margin:0 0 90px;
  padding:0;
  border-top:1px solid var(--line);
}
.style-rows li {
  border-bottom:1px solid var(--line);
}
.style-rows li.is-soon,.style-rows li>a {
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:baseline;
  column-gap:18px;
  padding:22px 0;
}
.style-rows a:hover .row-name {
  color:var(--red);
}
.row-index {
  font-size:11px;
  letter-spacing:1.6px;
  color:var(--red);
}
.row-name {
  font-family:var(--serif);
  font-size:34px;
  line-height:1.1;
  letter-spacing:-.4px;
}
.row-sub {
  grid-column:2;
  font-size:14px;
  color:var(--muted);
  margin-top:4px;
}
.row-end {
  grid-row:1;
  grid-column:3;
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--muted);
}
.style-rows a .row-end {
  color:var(--red);
  font-size:20px;
  letter-spacing:0;
}
.is-soon .row-index,.is-soon .row-name {
  color:var(--muted);
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
@media(max-width:640px) {
  .brand-wordmark {
    font-size:24px;
  }
  .index-title {
    margin:34px 0 20px;
  }
  .style-rows li.is-soon,.style-rows li>a {
    grid-template-columns:30px 1fr auto;
    column-gap:12px;
    padding:18px 0;
  }
  .row-name {
    font-size:26px;
  }
  .row-end {
    font-size:9px;
  }
}

.closing {
  text-align:center;
  padding-block:70px;
}

.closing-star {
  font-size:32px;
  color:var(--red);
}

.closing p {
  font:48px/1.1 var(--serif);
  letter-spacing:-1.7px;
  margin-top:16px;
  color:var(--red);
}

.closing a {
  display:inline-block;
  font-size:12px;
  margin-top:25px;
  border-bottom:1px solid var(--line);
  padding-bottom:5px;
}

.site-footer {
  padding-block:22px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.4px;
}

.site-footer span:first-child {
  color:var(--red);
}

[hidden] {
  display:none!important;
}

@media(min-width:1450px) {
  .hero {
    gap:85px;
    padding-block:80px;
  }
  .hero-image img {
    height:555px;
  }
}

@media(max-width:1050px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .hero {
    gap:35px;
  }
  h1 {
    font-size:78px;
  }
  .hero-image img {
    height:500px;
  }
  .hero-description {
    font-size:15px;
  }
  .hero-seal {
    width:100px;
    height:100px;
    right:-15px;
  }
  .hero-seal span {
    font-size:8px;
  }
  .site-header nav {
    gap:20px;
  }
  .ingredient-columns {
    gap:25px;
  }
  .assembly-layout {
    gap:35px;
  }
  .layer-list li {
    padding-block:17px;
  }
  .cool-callout {
    padding:45px;
    gap:35px;
  }
  .notes-grid {
    grid-template-columns:repeat(2,1fr);
    gap:30px 40px;
  }
  .section-space {
    padding-block:65px;
  }
}

@media(max-width:760px) {
  .wrap {
    width:calc(100% - 44px);
  }
  .site-header {
    height:82px;
    gap:15px;
  }
  .site-header nav {
    gap:20px;
    font-size:12px;
  }
  .site-header nav a:last-child {
    display:none;
  }
  .print-button {
    padding:9px;
  }
  .print-button span {
    display:none;
  }
  .hero {
    gap:27px;
    padding-block:45px;
    grid-template-columns:1fr 1fr;
  }
  h1 {
    font-size:61px;
    letter-spacing:-3px;
    margin-block:18px 22px;
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.3px;
  }
  .small-star {
    font-size:20px;
  }
  .hero-description {
    font-size:13px;
  }
  .hero-image img {
    height:400px;
  }
  .hero-image figcaption {
    font-size:8px;
    flex-direction:column;
    gap:3px;
  }
  .hero-seal {
    width:87px;
    height:87px;
    top:12px;
    right:-9px;
  }
  .hero-seal span {
    font-size:6.5px;
    letter-spacing:1px;
  }
  .hero-seal svg {
    width:34px;
    height:25px;
  }
  .hero-copy .hand-note {
    font-size:12px;
  }
  .button {
    padding:12px 16px;
    font-size:12px;
    gap:20px;
  }
  .recipe-facts>div {
    padding-left:18px;
  }
  .recipe-facts strong {
    font-size:15px;
  }
  .recipe-facts span:last-child {
    font-size:10px;
  }
  .recipe-facts .eyebrow {
    font-size:8px;
  }
  .section-heading>p {
    font-size:12px;
  }
  .section-heading {
    gap:25px;
  }
  h2 {
    font-size:39px;
    letter-spacing:-1.5px;
  }
  .process-track {
    gap:6px;
  }
  .process-track a {
    padding:0;
  }
  .process-track svg {
    width:70px;
    height:68px;
    padding-inline:5px;
    margin-bottom:15px;
  }
  .process-track:before {
    top:38px;
  }
  .process-track strong {
    font-size:18px;
  }
  .process-track small {
    font-size:10px;
  }
  .step-label {
    font-size:8px;
    letter-spacing:1px;
  }
  .grocery-intro {
    gap:25px;
    margin-bottom:30px;
  }
  .grocery-intro p:not(.eyebrow) {
    font-size:12px;
  }
  .grocery-intro h2 {
    font-size:37px;
  }
  .ingredient-columns {
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
  .finishing-column {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
  .ingredient-note {
    margin:0;
    align-self:start;
  }
  .equipment-strip {
    gap:18px;
  }
  .method-step {
    grid-template-columns:60px 1fr;
  }
  .step-content h3 {
    font-size:29px;
  }
  .assembly-layout {
    gap:25px;
  }
  .layer-list h3 {
    font-size:21px;
  }
  .layer-list p {
    font-size:12px;
  }
  .layer-list li {
    gap:12px;
    padding-block:15px;
  }
  .layer-number {
    width:25px;
    height:25px;
    font-size:10px;
  }
  .layer-figure figcaption {
    font-size:12px;
  }
  .cool-callout {
    gap:25px;
    padding:32px;
  }
  .cool-callout h2 {
    font-size:35px;
  }
  .cool-callout p:not(.eyebrow) {
    font-size:12px;
  }
  .cool-footer {
    font-size:8px;
  }
  .notes-grid h3 {
    font-size:24px;
  }
  .site-footer {
    font-size:9px;
  }
}

@media(max-width:640px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .site-header {
    height:74px;
    gap:12px;
  }
  .site-header nav {
    gap:14px;
    font-size:11px;
  }
  .site-header .print-button {
    margin-left:auto;
  }
  .site-header nav {
    margin-left:auto;
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:35px;
    gap:24px;
  }
  .hero-copy {
    position:relative;
    padding-bottom:0;
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1.5px;
  }
  .small-star {
    font-size:21px;
  }
  h1 {
    font-size:76px;
    letter-spacing:-4px;
    line-height:.98;
    margin:20px 0 23px;
  }
  .hero-description {
    font-size:14px;
    max-width:340px;
  }
  .hero .button {
    margin-top:22px;
    font-size:13px;
    padding:13px 19px;
  }
  .hero-copy .hand-note {
    font-size:13px;
    margin-top:13px;
  }
  .hero-image {
    padding-top:12px;
  }
  .hero-image img {
    height:auto;
    aspect-ratio:1.15;
    object-position:center;
  }
  .hero-image figcaption {
    font-size:8px;
    flex-direction:row;
    margin-top:12px;
  }
  .hero-seal {
    top:-20px;
    right:9px;
    width:95px;
    height:95px;
  }
  .hero-seal span {
    font-size:7px;
    letter-spacing:1.2px;
  }
  .recipe-facts {
    grid-template-columns:1fr 1fr;
    padding:0;
  }
  .recipe-facts>div {
    padding:19px 0 19px 20px;
  }
  .recipe-facts>div:nth-child(odd) {
    padding-left:0;
  }
  .recipe-facts>div:nth-child(2) {
    border-right:0;
  }
  .recipe-facts>div:nth-child(-n+2) {
    border-bottom:1px solid var(--line);
  }
  .recipe-facts strong {
    font-size:17px;
  }
  .recipe-facts span:last-child {
    font-size:11px;
  }
  .recipe-facts .eyebrow {
    font-size:9px;
  }
  .section-space {
    padding-block:52px;
  }
  .section-heading {
    display:block;
    margin-bottom:30px;
  }
  .section-heading>p {
    margin-top:17px;
    font-size:13px;
  }
  .section-heading .eyebrow {
    font-size:9px;
    margin-bottom:12px;
  }
  h2 {
    font-size:39px;
    letter-spacing:-1.5px;
  }
  .process-track {
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .process-track:before {
    left:36px;
    right:auto;
    top:25px;
    bottom:40px;
    border:0;
    border-left:1px dashed #9c9f88;
  }
  .process-track a {
    display:grid;
    grid-template-columns:80px 1fr;
    text-align:left;
    column-gap:18px;
    align-items:start;
    justify-content:start;
    min-height:108px;
    padding-bottom:20px;
  }
  .process-track svg {
    grid-column:1;
    grid-row:1/4;
    margin:0;
    width:74px;
    height:72px;
    padding:6px;
  }
  .process-track .step-label {
    grid-column:2;
    font-size:9px;
    margin:7px 0 4px;
  }
  .process-track strong {
    grid-column:2;
    font-size:23px;
    margin:0 0 5px;
  }
  .process-track small {
    grid-column:2;
    font-size:12px;
  }
  .process-track li:last-child a {
    padding-bottom:0;
    min-height:75px;
  }
  .grocery-intro {
    display:flex;
    flex-direction:column;
    gap:30px;
    align-items:stretch;
  }
  .grocery-intro .eyebrow {
    font-size:9px;
  }
  .grocery-intro h2 {
    font-size:42px;
  }
  .grocery-intro p:not(.eyebrow) {
    font-size:14px;
  }
  .grocery-art {
    width:100%;
    margin-block:0 12px;
  }
  .list-toolbar {
    font-size:11px;
  }
  .list-toolbar>div {
    gap:9px;
  }
  #reset-groceries {
    font-size:11px;
  }
  #grocery-progress {
    font-size:10px;
  }
  .ingredient-columns {
    display:block;
    padding-top:25px;
  }
  .ingredient-columns fieldset {
    margin-bottom:30px;
  }
  .ingredient-columns legend {
    font-size:27px;
    margin-bottom:22px;
  }
  .ingredient-columns label {
    margin-bottom:21px;
    gap:14px;
  }
  .ingredient-columns label strong {
    font-size:15px;
  }
  .ingredient-columns label small {
    font-size:13px;
    max-width:310px;
  }
  .ingredient-columns input {
    width:18px;
    height:18px;
  }
  .finishing-column {
    display:block;
  }
  .ingredient-note {
    margin-top:10px;
    padding:25px;
    transform:rotate(-.6deg);
  }
  .ingredient-note p {
    font-size:25px;
  }
  .ingredient-note small {
    font-size:13px;
  }
  .equipment-strip {
    display:block;
    margin-top:35px;
  }
  .equipment-strip p {
    margin-top:8px;
    font-size:12px;
  }
  .method-step {
    grid-template-columns:40px 1fr;
    padding-block:30px;
  }
  .step-number {
    font-size:27px;
    padding-top:1px;
  }
  .step-content h3 {
    font-size:29px;
    line-height:1.2;
  }
  .step-content>.eyebrow {
    font-size:9px;
  }
  .step-content p,.step-content ol {
    font-size:14px;
  }
  .step-content ol {
    padding-left:17px;
  }
  .step-content ol li {
    padding-left:3px;
  }
  .method-selector {
    gap:14px;
    margin-top:20px;
  }
  .method-selector button {
    font-size:13px;
    padding-block:10px;
  }
  .method-selector button>span {
    margin-left:6px;
    font-size:8px;
    padding:3px 5px;
  }
  .print-method-title {
    font-size:10px;
    letter-spacing:.7px;
  }
  .method-verdict {
    padding:12px!important;
    font-size:12px!important;
  }
  .inline-note {
    padding:16px;
  }
  .inline-note p {
    font-size:12px;
  }
  .assembly-section .section-heading>p {
    font-size:13px;
  }
  .assembly-layout {
    display:flex;
    flex-direction:column;
    gap:36px;
  }
  .layer-figure {
    width:100%;
  }
  .layer-figure>img {
    height:auto;
    max-height:460px;
    object-fit:contain;
  }
  .layer-figure figcaption {
    font-size:12px;
  }
  .layer-list li {
    gap:17px;
    padding-block:19px;
  }
  .layer-list h3 {
    font-size:24px;
  }
  .layer-list p {
    font-size:13px;
  }
  .layer-number {
    width:28px;
    height:28px;
    font-size:11px;
  }
  .cool-callout {
    display:flex;
    flex-direction:column;
    gap:35px;
    padding:30px 25px 35px;
    margin-top:20px;
  }
  .cool-art {
    width:80%;
    max-width:270px;
  }
  .cool-callout h2 {
    font-size:39px;
  }
  .cool-callout p:not(.eyebrow) {
    font-size:14px;
  }
  .cool-callout .eyebrow {
    font-size:8px;
    letter-spacing:1.3px;
  }
  .cool-footer {
    font-size:9px;
  }
  .notes-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .notes-grid h3 {
    font-size:28px;
    margin-top:12px;
  }
  .notes-grid p {
    font-size:14px;
    margin-top:12px;
  }
  .note-index {
    font-size:9px;
  }
  .experiment-notes summary {
    font-size:12px;
    gap:15px;
  }
  .closing {
    padding-block:55px;
  }
  .closing p {
    font-size:44px;
  }
  .site-footer {
    flex-wrap:wrap;
    font-size:9px;
    gap:10px;
  }
  .site-footer span:nth-child(2) {
    display:none;
  }
  .site-footer a {
    margin-left:auto;
  }
}

@media(max-width:360px) {
  .wrap {
    width:calc(100% - 32px);
  }
  .site-header nav {
    gap:10px;
  }
  .site-header nav a {
    font-size:10px;
  }
  .print-button {
    padding:7px;
  }
  h1 {
    font-size:68px;
  }
  .method-selector {
    gap:12px;
  }
  .method-selector button {
    font-size:12px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
  }
}

@media print {
  @page {
    margin:15mm;
  }
  .credit a::after,.reference-list a::after {
    content:" (" attr(href) ")";
    font-size:8pt;
    color:#555;
  }
  .references {
    padding-top:24px;
  }
  .styles-index .site-header {
    display:none!important;
  }
  html {
    scroll-behavior:auto;
  }
  body {
    background:white;
    color:#222;
    font-size:10pt;
  }
  .wrap {
    width:100%;
    max-width:none;
  }
  .site-header,.hero-image,.hero .button,.hand-note,.roadmap,.grocery-art,.list-toolbar,.layer-figure,.closing,.site-footer,.cool-art,.method-selector,.skip-link {
    display:none!important;
  }
  .hero {
    display:block;
    padding:0 0 20px;
  }
  .hero-copy {
    padding:0;
  }
  .hero .eyebrow {
    font-size:8pt;
  }
  h1 {
    font-size:36pt;
    letter-spacing:-1px;
    line-height:1.1;
    margin:10px 0;
    color:#222;
  }
  h1 br {
    display:none;
  }
  h1 br:after {
    content:' ';
  }
  h1 em:before,h1 em:after {
    content:' ';
  }
  .hero-description {
    max-width:none;
    font-size:10pt;
  }
  .recipe-facts {
    padding:12px 0;
  }
  .recipe-facts>div {
    padding-left:12px;
  }
  .recipe-facts strong {
    font-size:11pt;
  }
  .section-space {
    padding-block:22px;
  }
  .section-heading {
    margin-bottom:16px;
  }
  .section-heading>p {
    font-size:9pt;
  }
  h2 {
    font-size:23pt;
    letter-spacing:-.7px;
  }
  h3,.step-content h3 {
    font-size:17pt;
  }
  .ingredients-section,.notes-section,.assembly-section,.cool-callout {
    background:white;
    color:#222;
    border:0;
  }
  .grocery-intro {
    display:block;
    margin-bottom:20px;
  }
  .grocery-intro p:not(.eyebrow) {
    max-width:none;
  }
  .ingredient-columns {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
  }
  .ingredient-columns legend {
    font-size:14pt;
  }
  .ingredient-columns label {
    margin-bottom:10px;
    gap:7px;
  }
  .ingredient-columns label strong {
    font-size:9pt;
  }
  .ingredient-columns label small {
    font-size:8pt;
  }
  .ingredient-columns input {
    width:10px;
    height:10px;
  }
  .ingredient-columns input:checked+span strong {
    text-decoration:none;
    color:inherit;
  }
  .finishing-column {
    display:block;
    grid-column:auto;
  }
  .ingredient-note {
    background:none;
    padding:12px;
    transform:none;
    break-inside:avoid;
  }
  .ingredient-note p {
    font-size:12pt;
  }
  .ingredient-note small {
    font-size:8pt;
  }
  .equipment-strip {
    margin-top:12px;
    padding-top:12px;
  }
  .method-step {
    grid-template-columns:40px 1fr;
    padding-block:20px;
    break-inside:avoid;
  }
  .step-number {
    font-size:24pt;
  }
  .step-content {
    max-width:none;
  }
  .step-content p,.step-content ol {
    font-size:10pt;
  }
  .step-content li {
    margin-bottom:5px;
  }
  .mix-panel[hidden] {
    display:block!important;
  }
  .print-method-title {
    margin-top:15px;
    font-size:9pt;
  }
  .method-verdict,.inline-note {
    background:none;
    border:1px solid #bbb;
    font-size:9pt!important;
    padding:10px!important;
  }
  .assembly-section .section-heading .eyebrow,.assembly-section .section-heading>p,.layer-list p,.layer-figure figcaption {
    color:#555;
  }
  .assembly-layout {
    display:block;
  }
  .layer-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px 24px;
  }
  .layer-list li {
    padding:0!important;
    border:0;
    break-inside:avoid;
    gap:10px;
  }
  .layer-list h3 {
    font-size:13pt;
  }
  .layer-list p {
    font-size:9pt;
  }
  .layer-number {
    border-color:#777;
    width:22px;
    height:22px;
    font-size:9pt;
  }
  .cool-callout {
    display:block;
    padding:20px;
    border:2px solid #444;
    margin-top:10px;
    break-inside:avoid;
  }
  .cool-callout h2 {
    font-size:24pt;
  }
  .cool-callout p:not(.eyebrow),.cool-callout .eyebrow,.cool-footer {
    color:#222;
  }
  .cool-callout p:not(.eyebrow) {
    font-size:10pt;
  }
  .cool-footer {
    font-size:8pt;
  }
  .notes-grid {
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .notes-grid article {
    break-inside:avoid;
  }
  .notes-grid h3 {
    font-size:15pt;
  }
  .notes-grid p {
    font-size:9pt;
  }
  .experiment-notes {
    break-inside:avoid;
    margin-top:20px;
  }
  .experiment-notes p {
    font-size:9pt;
  }
  .experiment-notes summary {
    font-size:10pt;
  }
}