@charset "utf-8";
/*
  search-best.food — house stylesheet
  Layers keep the cascade predictable: reset < base < parts < pages < print.
  Mobile first; the layout opens up at 36rem and again at 62rem.
*/
@layer reset, base, parts, pages, print;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol[class], ul[class] { padding: 0; list-style: none; }
  img, svg { display: block; max-width: 100%; height: auto; }
  input, button, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
}

@layer base {
  :root {
    --tone-flour: #fbf6ec;
    --tone-crust: #f3e9d6;
    --tone-parchment: #fffdf8;
    --tone-char: #2b211b;
    --tone-smoke: #6c5d50;
    --tone-ash: #d9ccb6;
    --tone-chili: #b8361f;
    --tone-chili-deep: #8f2714;
    --tone-basil: #3e6b2f;
    --tone-saffron: #e2a12b;
    --tone-saffron-soft: #fbecc8;
    --tone-sage-soft: #e5eedb;

    --face-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    --face-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
    --face-figures: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --step-1: .25rem;
    --step-2: .5rem;
    --step-3: .75rem;
    --step-4: 1rem;
    --step-5: 1.5rem;
    --step-6: 2.25rem;
    --step-7: 3.5rem;

    --curve-s: 6px;
    --curve-m: 14px;
    --curve-l: 26px;
    --lift: 0 1px 0 rgba(43, 33, 27, .06), 0 10px 24px -14px rgba(43, 33, 27, .35);
    --measure: 68ch;
    --frame: 74rem;
    color-scheme: light;
  }

  html { scroll-padding-top: 5rem; }

  body {
    background: var(--tone-flour);
    color: var(--tone-char);
    font: 400 1.0625rem/1.6 var(--face-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  main { flex: 1 0 auto; }

  h1, h2, h3 {
    font-family: var(--face-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-wrap: balance;
  }

  a {
    color: var(--tone-chili-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    &:hover { color: var(--tone-chili); text-decoration-thickness: 2px; }
  }

  :focus-visible {
    outline: 3px solid var(--tone-saffron);
    outline-offset: 2px;
    border-radius: 3px;
  }

  ::selection { background: var(--tone-saffron-soft); }

  .bf-shell {
    width: min(100% - 2rem, var(--frame));
    margin-inline: auto;
  }

  .bf-hide-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@layer parts {
  /* skip link */
  .bf-skip {
    position: absolute;
    left: var(--step-4);
    top: -4rem;
    z-index: 20;
    background: var(--tone-char);
    color: var(--tone-flour);
    padding: var(--step-2) var(--step-4);
    border-radius: var(--curve-s);
    &:focus { top: var(--step-2); color: var(--tone-flour); }
  }

  /* header */
  .bf-top {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--tone-flour) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--tone-ash);
  }

  .bf-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--step-3);
    min-height: 3.75rem;
    flex-wrap: wrap;
  }

  .bf-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--step-2);
    color: var(--tone-char);
    text-decoration: none;
    font-family: var(--face-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
    & img { width: 30px; height: 30px; }
    & em { font-style: italic; color: var(--tone-chili); font-weight: 600; }
    &:hover { color: var(--tone-char); }
  }

  .bf-nav {
    display: flex;
    gap: var(--step-1) var(--step-4);
    flex-wrap: wrap;
    font-size: .95rem;
    & a {
      color: var(--tone-char);
      text-decoration: none;
      padding: var(--step-1) 0;
      border-bottom: 2px solid transparent;
      &:hover { border-bottom-color: var(--tone-saffron); }
      &[aria-current="page"] { border-bottom-color: var(--tone-chili); }
    }
  }

  .bf-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.4em;
    height: 1.4em;
    margin-left: .3em;
    padding: 0 .35em;
    border-radius: 999px;
    background: var(--tone-chili);
    color: #fff;
    font: 700 .72rem/1 var(--face-text);
    vertical-align: .1em;
    &:empty { display: none; }
  }

  /* buttons */
  .bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--step-2);
    min-height: 2.75rem;
    padding: var(--step-2) var(--step-4);
    border: 2px solid var(--tone-char);
    border-radius: 999px;
    background: var(--tone-char);
    color: var(--tone-flour);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease;
    &:hover { background: var(--tone-chili-deep); border-color: var(--tone-chili-deep); color: #fff; }
    &:active { transform: translateY(1px); }
    &.is-quiet { background: transparent; color: var(--tone-char); }
    &.is-quiet:hover { background: var(--tone-crust); color: var(--tone-char); border-color: var(--tone-char); }
  }

  /* chips */
  .bf-chip {
    border: 1.5px solid var(--tone-ash);
    background: var(--tone-parchment);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .9rem;
    min-height: 2.25rem;
    &:hover { border-color: var(--tone-smoke); }
    &[aria-pressed="true"] {
      background: var(--tone-basil);
      border-color: var(--tone-basil);
      color: #fff;
    }
  }

  .bf-select {
    appearance: none;
    border: 1.5px solid var(--tone-ash);
    background: var(--tone-parchment) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b211b' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .8rem center;
    border-radius: var(--curve-s);
    padding: .45rem 2.2rem .45rem .75rem;
    min-height: 2.5rem;
    font-size: .95rem;
  }

  /* diet marks */
  .bf-diets {
    display: inline-flex;
    gap: .3rem;
  }
  .bf-diet {
    display: inline-block;
    padding: .05rem .45rem;
    border-radius: var(--curve-s);
    font: 700 .7rem/1.5 var(--face-text);
    letter-spacing: .04em;
    text-decoration: none;
    cursor: help;
    background: var(--tone-sage-soft);
    color: var(--tone-basil);
    &.is-gf { background: var(--tone-saffron-soft); color: #7a5208; }
  }

  /* recipe cards */
  .bf-grid {
    display: grid;
    gap: var(--step-5) var(--step-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  }

  .bf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tone-parchment);
    border-radius: var(--curve-m);
    box-shadow: var(--lift);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    &:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(43,33,27,.06), 0 18px 30px -16px rgba(43,33,27,.45); }
    &[hidden] { display: none; }
  }

  .bf-card-art {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    background: var(--tone-crust);
  }

  .bf-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--step-2);
    padding: var(--step-4) var(--step-4) var(--step-5);
    flex: 1;
  }

  .bf-card-course {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tone-smoke);
  }

  .bf-card-title {
    font-size: 1.28rem;
    & a {
      color: inherit;
      text-decoration: none;
      &::after { content: ""; position: absolute; inset: 0; }
      &:hover { text-decoration: underline; }
    }
  }

  .bf-card-hook {
    font-size: .93rem;
    color: var(--tone-smoke);
    line-height: 1.5;
  }

  .bf-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--step-2);
    font-size: .85rem;
    padding-top: var(--step-2);
    border-top: 1px dashed var(--tone-ash);
  }

  .bf-clock {
    font-family: var(--face-figures);
    font-size: .8rem;
    &::before { content: "◷ "; color: var(--tone-chili); }
  }

  /* footer */
  .bf-foot {
    margin-top: var(--step-7);
    background: var(--tone-char);
    color: #e9dfcf;
    padding-block: var(--step-6) var(--step-5);
    font-size: .92rem;
    & a { color: #fbe2a8; }
    & a:hover { color: #fff; }
  }

  .bf-foot-cols {
    display: grid;
    gap: var(--step-5);
  }

  .bf-foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step-2) var(--step-4);
  }

  .bf-foot-small {
    margin-top: var(--step-5);
    padding-top: var(--step-4);
    border-top: 1px solid #4a3b31;
    color: #b9a991;
    font-size: .82rem;
  }

  /* breadcrumbs */
  .bf-crumbs {
    font-size: .88rem;
    color: var(--tone-smoke);
    margin-block: var(--step-5) var(--step-3);
    & ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
    & li:not(:last-child)::after { content: "›"; margin-left: .4rem; color: var(--tone-ash); }
    & a { color: var(--tone-smoke); }
  }

  /* prose */
  .bf-prose {
    max-width: var(--measure);
    & h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); margin-bottom: var(--step-4); }
    & h2 { font-size: 1.5rem; margin-block: var(--step-6) var(--step-3); }
    & h3 { font-size: 1.15rem; margin-block: var(--step-5) var(--step-2); }
    & p, & ul, & ol { margin-bottom: var(--step-4); }
    & li { margin-bottom: var(--step-2); }
    & .bf-lede { font-size: 1.2rem; color: var(--tone-smoke); }
  }

  .bf-aside-note {
    border-left: 4px solid var(--tone-saffron);
    background: var(--tone-saffron-soft);
    padding: var(--step-4) var(--step-5);
    border-radius: 0 var(--curve-m) var(--curve-m) 0;
    margin-block: var(--step-5);
  }
}

@layer pages {
  /* ---------- home / finder ---------- */
  .bf-hero {
    position: relative;
    padding-block: var(--step-6) var(--step-5);
    background:
      linear-gradient(var(--tone-flour), transparent 30%, transparent 70%, var(--tone-flour)),
      repeating-linear-gradient(0deg, transparent 0 39px, rgba(184, 54, 31, .07) 39px 40px),
      repeating-linear-gradient(90deg, transparent 0 39px, rgba(184, 54, 31, .07) 39px 40px);
    & h1 {
      font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem);
      max-width: 17ch;
      & em { color: var(--tone-chili); }
    }
  }

  .bf-hero-lede {
    margin-top: var(--step-4);
    max-width: 52ch;
    font-size: 1.15rem;
    color: var(--tone-smoke);
  }

  .bf-finder {
    margin-top: var(--step-5);
    background: var(--tone-parchment);
    border: 2px solid var(--tone-char);
    border-radius: var(--curve-l);
    padding: var(--step-4);
    box-shadow: 6px 6px 0 var(--tone-saffron);
    max-width: 46rem;
  }

  .bf-mode {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--tone-crust);
    margin-bottom: var(--step-3);
    & button {
      border: 0;
      background: transparent;
      padding: .35rem .95rem;
      border-radius: 999px;
      font-size: .9rem;
      font-weight: 600;
      color: var(--tone-smoke);
      &[aria-pressed="true"] { background: var(--tone-char); color: var(--tone-flour); }
    }
  }

  .bf-query-row {
    display: flex;
    gap: var(--step-2);
    & input {
      flex: 1;
      min-width: 0;
      border: 0;
      border-bottom: 2px solid var(--tone-ash);
      background: transparent;
      font-size: 1.2rem;
      padding: .4rem .1rem;
      &:focus { outline: none; border-bottom-color: var(--tone-chili); }
    }
  }

  .bf-hints {
    margin-top: var(--step-3);
    font-size: .88rem;
    color: var(--tone-smoke);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--step-2);
    & button {
      border: 0;
      background: none;
      padding: 0;
      color: var(--tone-chili-deep);
      text-decoration: underline dotted;
      text-underline-offset: .2em;
    }
  }

  .bf-filters {
    margin-block: var(--step-6) var(--step-4);
    display: grid;
    gap: var(--step-4);
    & fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
    & legend {
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--tone-smoke);
      margin-bottom: var(--step-2);
    }
  }

  .bf-chip-row { display: flex; flex-wrap: wrap; gap: var(--step-2); }

  .bf-select-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step-3);
    & label { display: grid; gap: .2rem; font-size: .8rem; color: var(--tone-smoke); }
  }

  .bf-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--step-3);
    flex-wrap: wrap;
    margin-bottom: var(--step-4);
    font-size: .95rem;
    & button {
      border: 0;
      background: none;
      color: var(--tone-chili-deep);
      text-decoration: underline;
      padding: 0;
      &[hidden] { display: none; }
    }
  }

  .bf-empty {
    text-align: center;
    padding: var(--step-6) var(--step-4);
    border: 2px dashed var(--tone-ash);
    border-radius: var(--curve-l);
    color: var(--tone-smoke);
    & strong { display: block; font-family: var(--face-display); font-size: 1.4rem; color: var(--tone-char); margin-bottom: var(--step-2); }
    &[hidden] { display: none; }
  }

  .bf-method-strip {
    margin-top: var(--step-7);
    display: grid;
    gap: var(--step-4);
    counter-reset: strip;
    & > h2 { font-size: 1.7rem; }
  }

  .bf-strip-items {
    display: grid;
    gap: var(--step-4);
    & li {
      counter-increment: strip;
      background: var(--tone-crust);
      border-radius: var(--curve-m);
      padding: var(--step-5) var(--step-4) var(--step-4);
      position: relative;
      &::before {
        content: counter(strip);
        position: absolute;
        top: -.9rem;
        left: var(--step-4);
        width: 1.9rem; height: 1.9rem;
        display: grid; place-items: center;
        border-radius: 50%;
        background: var(--tone-chili);
        color: #fff;
        font: 700 .95rem/1 var(--face-figures);
      }
      & h3 { font-size: 1.12rem; margin-bottom: var(--step-1); }
      & p { font-size: .95rem; color: var(--tone-smoke); }
    }
  }

  /* ---------- index by course ---------- */
  .bf-course-block {
    margin-top: var(--step-6);
    & h2 {
      font-size: 1.6rem;
      display: flex;
      align-items: baseline;
      gap: var(--step-3);
      border-bottom: 2px solid var(--tone-char);
      padding-bottom: var(--step-2);
      margin-bottom: var(--step-3);
      & small { font: 400 .9rem var(--face-text); color: var(--tone-smoke); }
    }
  }

  .bf-index-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .1rem var(--step-3);
    padding-block: var(--step-3);
    border-bottom: 1px dashed var(--tone-ash);
    & a { font-weight: 600; font-size: 1.05rem; }
    & span { font-size: .88rem; color: var(--tone-smoke); }
  }

  .bf-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step-2);
    margin-top: var(--step-4);
  }

  /* ---------- recipe ---------- */
  .bf-dish-head {
    display: grid;
    gap: var(--step-5);
    align-items: center;
  }

  .bf-dish-kicker {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tone-chili);
  }

  .bf-dish-title {
    font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem);
    margin-block: var(--step-2) var(--step-3);
  }

  .bf-dish-hook {
    font-size: 1.15rem;
    color: var(--tone-smoke);
    max-width: 50ch;
  }

  .bf-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step-3) var(--step-5);
    margin-top: var(--step-5);
    & div { display: grid; }
    & dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tone-smoke); }
    & dd { font-weight: 600; font-family: var(--face-figures); font-size: .95rem; }
  }

  .bf-dates {
    margin-top: var(--step-4);
    font-size: .85rem;
    color: var(--tone-smoke);
  }

  .bf-dish-art {
    border-radius: var(--curve-l);
    overflow: hidden;
    box-shadow: var(--lift);
    & img { width: 100%; aspect-ratio: 4 / 3; }
  }

  .bf-verdict {
    margin-top: var(--step-6);
    background: var(--tone-parchment);
    border: 2px solid var(--tone-char);
    border-radius: var(--curve-l);
    padding: var(--step-5);
    position: relative;
    & ul { list-style: none; padding: 0; }
    & h2 {
      font-size: 1.35rem;
      margin-bottom: var(--step-3);
      &::before { content: "✓ "; color: var(--tone-basil); }
    }
    & li {
      position: relative;
      padding-left: 1.4rem;
      margin-bottom: var(--step-2);
      &::before { content: ""; position: absolute; left: 0; top: .62em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tone-saffron); }
    }
  }

  .bf-cook {
    margin-top: var(--step-6);
    display: grid;
    gap: var(--step-6);
    align-items: start;
  }

  .bf-larder {
    background: var(--tone-crust);
    border-radius: var(--curve-l);
    padding: var(--step-5) var(--step-4);
    & h2 { font-size: 1.5rem; margin-bottom: var(--step-3); }
    & h3 {
      font: 700 .78rem/1.4 var(--face-text);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--tone-smoke);
      margin-block: var(--step-4) var(--step-1);
    }
  }

  .bf-tools {
    display: grid;
    gap: var(--step-3);
    padding-bottom: var(--step-4);
    border-bottom: 1px solid var(--tone-ash);
    margin-bottom: var(--step-2);
  }

  .bf-tool-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--step-3);
    flex-wrap: wrap;
    font-size: .9rem;
  }

  .bf-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--tone-char);
    border-radius: 999px;
    background: var(--tone-parchment);
    & button {
      width: 2.5rem; height: 2.5rem;
      border: 0;
      background: none;
      font-size: 1.25rem;
      line-height: 1;
      border-radius: 50%;
      &:hover { background: var(--tone-saffron-soft); }
      &:disabled { opacity: .35; cursor: default; }
    }
    & output {
      min-width: 6.5rem;
      text-align: center;
      font: 600 .9rem var(--face-figures);
    }
  }

  .bf-units {
    display: inline-flex;
    border: 1.5px solid var(--tone-char);
    border-radius: 999px;
    overflow: hidden;
    & button {
      border: 0;
      background: var(--tone-parchment);
      padding: .4rem .85rem;
      font-size: .85rem;
      font-weight: 600;
      min-height: 2.5rem;
      &[aria-pressed="true"] { background: var(--tone-char); color: var(--tone-flour); }
    }
  }

  .bf-ing-list li {
    padding: .5rem 0;
    border-bottom: 1px dotted var(--tone-ash);
    line-height: 1.45;
    &:last-child { border-bottom: 0; }
  }

  .bf-amt {
    font-family: var(--face-figures);
    font-size: .9rem;
    font-weight: 600;
    color: var(--tone-chili-deep);
    margin-right: .25rem;
    white-space: nowrap;
  }

  .bf-ing-note { color: var(--tone-smoke); }

  .bf-scale-note {
    font-size: .82rem;
    color: var(--tone-smoke);
    &[hidden] { display: none; }
  }

  .bf-add-row {
    margin-top: var(--step-4);
    display: grid;
    gap: var(--step-2);
    & p { font-size: .85rem; color: var(--tone-smoke); min-height: 1.3em; }
  }

  .bf-method {
    & > h2 { font-size: 1.5rem; margin-bottom: var(--step-4); }
  }

  .bf-step-list {
    counter-reset: method;
    & li {
      counter-increment: method;
      display: grid;
      grid-template-columns: 2.6rem 1fr;
      gap: var(--step-3);
      padding-block: var(--step-4);
      border-bottom: 1px solid var(--tone-ash);
      &::before {
        content: counter(method);
        font: 700 1.6rem/1 var(--face-display);
        color: var(--tone-chili);
        padding-top: .1rem;
      }
      &.is-done {
        & p { color: var(--tone-smoke); text-decoration: line-through; text-decoration-color: var(--tone-ash); }
        &::before { color: var(--tone-ash); }
      }
    }
  }

  .bf-step-mark {
    margin-top: var(--step-2);
    border: 0;
    background: none;
    padding: 0;
    font-size: .8rem;
    color: var(--tone-smoke);
    text-decoration: underline dotted;
    &[aria-pressed="true"] { color: var(--tone-basil); }
  }

  .bf-temp, .bf-len { white-space: nowrap; }

  .bf-notes {
    margin-top: var(--step-6);
    display: grid;
    gap: var(--step-5);
    & section {
      border-top: 3px solid var(--tone-char);
      padding-top: var(--step-3);
    }
    & h2 { font-size: 1.25rem; margin-bottom: var(--step-2); }
    & ul { padding-left: 1.1rem; }
    & li { margin-bottom: var(--step-2); }
    & p { color: var(--tone-char); }
  }

  .bf-dish-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step-2);
    margin-top: var(--step-5);
  }

  .bf-more {
    margin-top: var(--step-7);
    & > h2 { font-size: 1.6rem; margin-bottom: var(--step-4); }
  }

  /* ---------- shopping list ---------- */
  .bf-list-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: var(--step-4);
    margin-block: var(--step-5);
    & h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
  }

  .bf-list-tools { display: flex; flex-wrap: wrap; gap: var(--step-2); }

  .bf-list-wrap {
    display: grid;
    gap: var(--step-6);
    align-items: start;
  }

  .bf-paper {
    background: var(--tone-parchment);
    border-radius: var(--curve-m);
    box-shadow: var(--lift);
    padding: var(--step-5) var(--step-4);
    border-top: 6px solid var(--tone-basil);
  }

  .bf-aisle {
    margin-bottom: var(--step-5);
    & h2 {
      font: 700 .78rem/1.4 var(--face-text);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--tone-chili);
      margin-bottom: var(--step-1);
    }
  }

  .bf-ticks li { border-bottom: 1px solid color-mix(in srgb, var(--tone-basil) 14%, transparent); }

  .bf-tick {
    display: flex;
    gap: var(--step-3);
    align-items: baseline;
    padding-block: .3rem;
    line-height: 1.4;
    & input { width: 1.1rem; height: 1.1rem; accent-color: var(--tone-basil); flex: none; transform: translateY(.15rem); }
    & small { color: var(--tone-smoke); font-size: .8rem; }
    &:has(input:checked) span { text-decoration: line-through; color: var(--tone-smoke); }
  }

  .bf-from {
    background: var(--tone-crust);
    border-radius: var(--curve-m);
    padding: var(--step-5) var(--step-4);
    & h2 { font-size: 1.25rem; margin-bottom: var(--step-3); }
    & ul { list-style: none; padding: 0; }
    & li {
      display: flex;
      justify-content: space-between;
      gap: var(--step-2);
      align-items: center;
      padding-block: var(--step-2);
      border-bottom: 1px dotted var(--tone-ash);
      font-size: .95rem;
    }
    & button {
      border: 0;
      background: none;
      color: var(--tone-chili-deep);
      font-size: .82rem;
      text-decoration: underline;
      padding: .25rem;
    }
  }

  .bf-print-title { display: none; }

  /* ---------- 404 ---------- */
  .bf-lost {
    text-align: center;
    padding-block: var(--step-7);
    max-width: 40rem;
    margin-inline: auto;
    & .bf-lost-plate {
      width: 9rem;
      margin: 0 auto var(--step-5);
    }
    & h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); margin-bottom: var(--step-3); }
    & p { color: var(--tone-smoke); margin-bottom: var(--step-4); }
  }

  .bf-lost-links { text-align: left; }

  .bf-lost-search {
    display: flex;
    gap: var(--step-2);
    max-width: 28rem;
    margin: var(--step-5) auto;
    & input {
      flex: 1;
      min-width: 0;
      border: 2px solid var(--tone-char);
      border-radius: 999px;
      padding: .5rem 1rem;
      background: var(--tone-parchment);
    }
  }

  /* ---------- wider screens ---------- */
  @media (min-width: 36rem) {
    .bf-finder { padding: var(--step-5); }
    .bf-filters { grid-template-columns: 1fr 1fr; }
    .bf-strip-items { grid-template-columns: repeat(3, 1fr); }
    .bf-foot-cols { grid-template-columns: 2fr 1fr; }
    .bf-notes { grid-template-columns: 1fr 1fr; }
    .bf-notes section:first-child { grid-column: 1 / -1; }
  }

  @media (min-width: 62rem) {
    .bf-filters { grid-template-columns: 1.1fr 1fr 1.4fr; }
    .bf-dish-head { grid-template-columns: 1.15fr 1fr; gap: var(--step-6); }
    .bf-cook { grid-template-columns: minmax(20rem, 25rem) 1fr; }
    .bf-larder { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow: auto; }
    .bf-list-wrap { grid-template-columns: 1fr 18rem; }
    .bf-notes { grid-template-columns: repeat(3, 1fr); }
    .bf-notes section:first-child { grid-column: auto; }
  }

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

@layer print {
  @media print {
    @page { margin: 14mm; }
    body { background: #fff; font-size: 11pt; color: #000; }
    .bf-top, .bf-foot, .bf-skip, .bf-crumbs, .bf-more, .bf-tools, .bf-add-row,
    .bf-dish-actions, .bf-step-mark, .bf-list-tools, .bf-from, .bf-dish-art, .bf-noprint { display: none !important; }
    .bf-shell { width: 100%; }
    .bf-cook { display: block; }
    .bf-larder { background: none; padding: 0; position: static; max-height: none; margin-bottom: 1rem; }
    .bf-verdict { border: 1px solid #999; box-shadow: none; }
    .bf-paper { box-shadow: none; background: none; padding: 0; }
    .bf-print-title { display: block; font-size: 16pt; margin-bottom: 8pt; }
    .bf-tick input { appearance: none; border: 1px solid #000; width: 10pt; height: 10pt; border-radius: 2px; }
    .bf-aisle { break-inside: avoid; }
    .bf-list-wrap { display: block; }
    a { color: #000; text-decoration: none; }
  }
}