:root{
  --cream:#F6F1E7; --teal:#0E4D4A; --gold:#C9A24B; --char:#1E1E1C;
  --body:#6B6761; --rule:#DED7C8; --card:#FBF8F2;
  --produce:#4B6420; --seafood:#204E5E; --meat:#7A2E2E;
  --display:"Poppins",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --text:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--char);font-family:var(--text);
     font-size:17px;line-height:1.52;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}


/* nav */
header{position:sticky;top:0;z-index:20;background:rgba(246,241,231,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.mark{display:block;line-height:0;text-decoration:none}
.mark img{width:216px;height:auto;display:block}
.mark:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:2px}
@media(max-width:520px){.mark img{width:172px}}
.links{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-family:var(--display);
  font-size:14px;font-weight:500}
.links a{text-decoration:none;color:var(--teal);padding-bottom:3px;border-bottom:1.5px solid transparent}
.links a:hover{border-bottom-color:var(--gold)}
@media(max-width:760px){.links{display:none}}

/* mobile menu */
.nav-right{display:flex;align-items:center;gap:20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.burger{display:none;appearance:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;margin-right:-10px;padding:0;place-items:center;color:var(--teal)}
.burger-box{display:block;width:22px;height:16px;position:relative}
.burger-box i{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;
  transition:transform .22s ease,opacity .16s ease}
.burger-box i:nth-child(1){top:0}
.burger-box i:nth-child(2){top:7px}
.burger-box i:nth-child(3){top:14px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}

.sheet{position:sticky;top:0;z-index:19;background:var(--cream);
  border-bottom:1px solid var(--rule);box-shadow:0 14px 28px -22px rgba(30,30,28,.5)}
.sheet ul{list-style:none;margin:0 auto;padding:4px 28px 4px;max-width:1120px}
.sheet a{display:block;padding:13px 0;min-height:44px;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:16px;color:var(--teal);
  border-bottom:1px solid var(--rule)}
.sheet li:last-child a{border-bottom:0}
.sheet a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

@media(max-width:760px){.burger{display:grid}}
@media(min-width:761px){.sheet{display:none}}
@media(prefers-reduced-motion:reduce){.burger-box i{transition:none}}

/* hero type and buttons */
h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.5vw,50px);
  line-height:1.12;letter-spacing:-.025em;margin:0;text-wrap:balance;color:var(--teal)}
.sub{font-size:18px;line-height:1.5;color:var(--body);margin:16px 0 0;max-width:34ch}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
/* A closing CTA is the last real content before the dark footer, so it needs
   its own air instead of inheriting the inline 24px. Pairs with .back below it.
   Added 2026-10-15 after the button read as welded to the footer on /shop/. */
.cta-close{margin:56px 0 8px}
.btn{font-family:var(--display);font-weight:600;font-size:15px;text-decoration:none;
  padding:12px 24px;border-radius:2px;display:inline-block;transition:transform .18s ease,background .18s ease}
.btn-p{background:var(--teal);color:var(--cream)}
.btn-p:hover{background:#0B3E3C;transform:translateY(-1px)}
.btn-s{border:1.5px solid var(--teal);color:var(--teal)}
.btn-s:hover{background:rgba(14,77,74,.06)}
.btn-g{background:var(--gold);color:var(--teal)}
.btn-g:hover{background:#D4B062;transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid #0E4D4A;outline-offset:3px}

/* hero: art anchored right, dissolving left into the paper, H1 laid over it */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--cream);
  min-height:clamp(260px,34vh,340px);display:flex;flex-direction:column;
  justify-content:center;padding:28px 0 32px}
.hero-art{position:absolute;top:0;right:0;bottom:0;left:auto;
  width:min(60%,880px);height:100%;display:block;
  z-index:0;pointer-events:none;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 55%,rgba(0,0,0,.5) 80%,transparent 100%),
                     linear-gradient(to top,transparent 0%,#000 11%,#000 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to left,#000 0%,#000 55%,rgba(0,0,0,.5) 80%,transparent 100%),
                     linear-gradient(to top,transparent 0%,#000 11%,#000 100%);
          mask-composite:intersect}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block}
.hero-copy{position:relative;z-index:1;width:100%}
.hero-copy h1{max-width:min(17ch,55%)}
.hero-copy .sub{max-width:min(34ch,46%)}
@media(prefers-reduced-motion:no-preference){.hero-art{will-change:auto}}

/* Hero art followed the viewport's right edge while the copy sat in the 1120px
   content column, so on a wide monitor a band of cream opened between the
   headline and the art. Anchor the art's right edge to the same column instead.
   Resolves to 0 below 1120px, so phones and laptops are unchanged.
   Added 2026-09-25 after Ed flagged it on an ultra-wide display. */
@media(min-width:861px){
  .hero-art{right:max(0px, calc((100% - 1120px) / 2))}
}

@media(max-width:860px){
  .hero{min-height:0;padding:16px 0 0;justify-content:flex-start}
  .hero-copy h1{line-height:1.1;letter-spacing:-.03em}
  .hero-copy .sub{font-size:17px;line-height:1.42;margin-top:10px}
  .hero-copy .cta{margin-top:16px;gap:10px}
  section{padding:52px 0}
  .season-grid{gap:24px}
  .hero-art{position:relative;top:auto;right:auto;bottom:auto;
    order:2;width:100%;height:auto;aspect-ratio:auto;margin-top:14px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 100%);
            mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 100%)}
  .hero-art img{height:auto;object-fit:fill}
  .hero-copy{order:1}
  .hero-copy h1,.hero-copy .sub{max-width:none}
}

/* section furniture */
section{padding:76px 0}
.eyebrow{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px}
h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.16;
  letter-spacing:-.02em;margin:0;text-wrap:balance}
.lede{font-size:18px;color:var(--body);margin:16px 0 0;max-width:56ch}
.rule{height:1px;background:var(--rule);border:0;margin:0}


/* seasonal slot */
.season{background:var(--teal);color:var(--cream)}
.season .eyebrow{color:var(--gold)}
.season h2{color:var(--cream)}
.season .lede{color:#C4D2CF}
.season-grid{display:grid;grid-template-columns:1fr 230px;gap:64px;align-items:center}
.pour{margin:26px 0 0;padding:16px 0 0;border-top:1px solid rgba(201,162,75,.42);
  font-family:var(--display);font-size:15px;color:var(--cream)}
.pour b{color:var(--gold);font-weight:600;letter-spacing:.09em;font-size:12px;
  text-transform:uppercase;display:block;margin-bottom:5px}
.season img{border-radius:3px;box-shadow:0 20px 48px -26px rgba(0,0,0,.7)}
@media(max-width:860px){.season-grid{grid-template-columns:1fr;gap:32px}
  .season-grid>*{min-width:0}
  .season img{max-width:min(300px,100%)}}

/* poster wall */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:26px;margin-top:44px}
/* Homepage ingredient carousel. Added 2026-09-23 at Ed's request. Replaces the fixed
   four-tile block so the homepage can show nine cards in the same vertical space.
   The track is a scroll-snap strip, so with JavaScript off it is still a usable
   horizontal scroller and every card is still reachable. The .wall grid above is
   untouched and still runs the /ingredients/ page. */
.carousel{position:relative;margin-top:44px}
.car-track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
           scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.car-track::-webkit-scrollbar{display:none}
.car-track>.tile{flex:0 0 calc((100% - 52px)/3);scroll-snap-align:start}
.car-nav{position:absolute;top:calc(50% - 13px);transform:translateY(-50%);z-index:3;
         width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);
         background:var(--cream);color:var(--char);
         font:400 26px/1 system-ui,-apple-system,sans-serif;cursor:pointer;
         display:grid;place-items:center;padding:0 0 3px;
         box-shadow:0 2px 10px rgba(30,30,28,.14);transition:background .18s,opacity .18s}
.car-nav:hover{background:#fff}
.car-nav:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.car-nav[disabled]{opacity:.26;cursor:default;box-shadow:none}
.car-prev{left:-21px}
.car-next{right:-21px}
.car-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.car-dots[hidden]{display:none}
.car-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
         background:var(--rule);transition:background .18s,transform .18s}
.car-dot[aria-selected="true"]{background:var(--gold);transform:scale(1.3)}
.car-dot:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.car-track{scroll-behavior:smooth}}
@media(max-width:1200px){.car-prev{left:6px}.car-next{right:6px}}
@media(max-width:860px){
  .car-track{gap:14px}
  .car-track>.tile{flex:0 0 calc((100% - 14px)/2)}
  .car-nav{width:38px;height:38px;font-size:22px}
}
@media(max-width:520px){
  /* Stay two-up on a phone. One-up looked bigger but produced nine dots, which reads
     as a progress bar rather than a pager. Two-up gives five, matching Ed's mockup. */
  .car-nav{width:34px;height:34px;font-size:20px}
  .car-prev{left:-4px}.car-next{right:-4px}
}
.tile{background:var(--card);border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  text-decoration:none;display:block;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 36px -22px rgba(30,30,28,.5)}
.tile img{aspect-ratio:4/5;object-fit:cover}
.tile .cap{padding:13px 15px;font-family:var(--display);font-size:13.5px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.tag{font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:600}
.t-p{color:var(--produce)} .t-s{color:var(--seafood)} .t-m{color:var(--meat)}

/* wine */
.wine{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.wine-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.grapes{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.grape{text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease;}
.grape:hover{border-color:var(--teal);color:var(--teal)}
.grape{font-family:var(--display);font-size:12.5px;font-weight:500;border:1px solid var(--rule);
  background:var(--cream);padding:7px 13px;border-radius:2px;color:var(--body)}
@media(max-width:860px){.wine-in{grid-template-columns:1fr;gap:30px}}

/* email */
.list{background:var(--teal);color:var(--cream);text-align:center}
.list h2{color:var(--cream)} .list .lede{color:#C4D2CF;margin-inline:auto}
.form{display:flex;gap:10px;justify-content:center;margin:34px auto 0;max-width:470px;flex-wrap:wrap}
.form input{flex:1 1 240px;padding:15px 17px;border:1px solid rgba(246,241,231,.3);border-radius:2px;
  background:rgba(246,241,231,.07);color:var(--cream);font-family:var(--text);font-size:16px}
.form input::placeholder{color:#8FA8A5}
.form input:focus{outline:2px solid var(--gold);outline-offset:1px}
.form button{font-family:var(--display);font-weight:600;font-size:15px;padding:15px 26px;
  border:0;border-radius:2px;background:var(--gold);color:var(--teal);cursor:pointer;
  transition:transform .18s ease,background .18s ease}
.form button:hover{background:#D4B062;transform:translateY(-1px)}
.fine{font-size:13.5px;color:#9DB3B0;margin:18px 0 0}
.app-note{margin:30px auto 0;padding-top:20px;border-top:1px solid rgba(201,162,75,.32);
  max-width:430px;font-size:14.5px;color:#C4D2CF}

/* footer */
footer{background:var(--char);color:#B8B3AA;font-size:14px;padding:56px 0 40px}
footer .tag2{font-family:var(--display);color:var(--cream);font-weight:600;font-size:15px;
  letter-spacing:.02em;margin:0 0 26px}
.disc{max-width:62ch;margin:0 0 16px;line-height:1.6}
.disc b{color:#D8D3C9;font-weight:600}
.fnav{display:flex;gap:20px;flex-wrap:wrap;list-style:none;padding:0;margin:28px 0 20px;
  font-family:var(--display);font-size:13.5px}
.fnav a{text-decoration:none;color:#B8B3AA}
.fnav a:hover{color:var(--gold)}
.copy{font-size:12.5px;color:#7C776F;margin:0}

.reveal{opacity:0;transform:translateY(15px);filter:blur(3px)}
.reveal.in{opacity:1;transform:none;filter:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s ease}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.in{opacity:1;transform:none;filter:none;transition:none}
  .tile:hover{transform:none}}

.season-grid{grid-template-areas:"text card" "cta card";row-gap:0}
.season-grid>div:first-child{grid-area:text}
.s-cta{grid-area:cta;align-self:start}
.s-card{grid-area:card;display:block;transition:transform .18s ease}
.s-card:hover{transform:translateY(-3px)}
@media(max-width:860px){
  .season-grid{grid-template-columns:1fr 118px;grid-template-areas:"text text" "cta card";column-gap:18px;row-gap:22px;align-items:center}
  .s-cta{margin-top:0;align-self:center}
  .season .s-card img{max-width:100%;width:118px}
}
/* ingredient wall: two across on phones, four shown */
@media(max-width:600px){
  .wall{grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
  .tile .cap{padding:10px 11px;font-size:12.5px;flex-direction:column;align-items:flex-start;gap:4px}
}


img{height:auto}
.tile img{width:100%}
.season-grid{grid-template-rows:auto 1fr}
.season-grid>div:first-child{align-self:end}
.s-cta{margin-top:28px}
@media(max-width:860px){.season-grid{grid-template-rows:auto}.s-cta{margin-top:0}}
/* inner pages */
.page-head{padding:56px 0 8px}
.page-head .lede{max-width:40em}
.crumb{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.crumb a{color:inherit;text-decoration:none}
.inner h1{font-size:clamp(36px,5.5vw,58px)}
/* Pages whose main ends with .back (72px) or is .soon (90px) already clear the
   footer. A bare .inner ends flush against it: field notes, ingredients index,
   privacy, terms. Give those the same breathing room without touching the other 70. */
.inner:not(.soon):not(:has(.back)){padding-bottom:88px}
.hookline{font-size:clamp(19px,2.3vw,23px);line-height:1.45;margin:16px 0 0;max-width:34em;text-wrap:balance}
.ing{max-width:860px}
.ing-fig{margin:36px 0 10px;display:grid;gap:18px}
.ing-fig img{width:100%;max-width:560px;border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 20px 44px -30px rgba(0,0,0,.45)}
.ing-fig.two{grid-template-columns:1fr 1fr;max-width:860px}
@media(max-width:700px){.ing-fig.two{grid-template-columns:1fr}}
.ing-sec{border-top:1px solid var(--rule);padding:28px 0 6px}
/* Section labels sit above every buy module and are how a reader tells one
   product block from the next while scrolling. At 12px/.16em they read as fine
   print rather than as a heading. 14px with the tracking eased to .13em is
   bigger without getting wider, which matters because the whisk labels carry a
   descriptor after the name and already wrap on a phone. Ed's call 2026-10-18. */
.ing-sec h2{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 11px}
.ing-sec p{margin:0 0 12px;font-size:16px;color:var(--char)}
.ing-sec .also{font-style:italic;color:var(--body)}
/* .ing-sec p sets 17px and var(--char), and at (0,1,1) it outranks .eyebrow at
   (0,1,0), so an eyebrow inside an ingredient section came out 17px dark bold caps,
   larger than the h2 above it. Scope size and colour back. Added 2026-10-16 for the
   ribeye page, which carries two picks and needs a label over each. */
.ing-sec .eyebrow{font-size:11.5px;color:var(--gold)}
.winebox{background:var(--card);border:1px solid var(--rule);padding:22px 24px}
.back{margin:44px 0 72px;font-family:var(--display);font-weight:600;font-size:15px}
.back a{color:var(--teal);text-decoration:none}
.season-block{padding:36px 0 8px}
.season-block h2{font-size:clamp(24px,3vw,32px);margin:0}
.season-block .note{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0}
.chips a{font-family:var(--display);font-size:13px;font-weight:500;text-decoration:none;color:var(--teal);
  border:1px solid var(--rule);background:var(--card);padding:7px 13px;border-radius:2px}
.chips a:hover{border-color:var(--teal)}
.notes{display:grid;gap:44px;margin:40px 0 80px}
.note-card{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:36px;align-items:start;
  border-top:1px solid var(--rule);padding-top:36px}
.note-card:first-child{border-top:0;padding-top:0}
.note-imgs{display:grid;gap:12px}
.note-imgs.multi{grid-template-columns:1fr 1fr}
.note-imgs img{border:1px solid var(--rule);border-radius:3px}
.note-card h2{font-size:clamp(24px,3vw,30px);margin:0 0 10px}
.note-card ol{padding-left:20px;margin:12px 0 0}
.note-card li{margin:0 0 8px}
@media(max-width:760px){.note-card{grid-template-columns:1fr;gap:20px}}
.form-msg{max-width:470px;margin:34px auto 0;padding:18px 22px;border:1px solid rgba(201,162,75,.55);
  border-radius:2px;color:var(--cream);font-size:16px;line-height:1.6;text-align:center}
.form-msg b{color:var(--gold);font-family:var(--display);font-weight:600}
.soon{padding-top:70px;padding-bottom:90px;max-width:760px}
.soon ul{list-style:none;padding:0;margin:30px 0;display:grid;gap:10px}
.soon li{font-family:var(--display);font-weight:600;color:var(--teal);border-top:1px solid var(--rule);padding-top:10px}

/* ---------------------------------------------------------------
   recipe pages. Added 2026-09-30. Recipes are photographic, not
   illustrated, so they do not reuse .ing-fig. Everything here is
   scoped under .rec so it cannot leak into the ingredient cards.
   --------------------------------------------------------------- */
/* The 520px cap used to live only on .placeholder, so a real hero rendered at full
   column width and pushed the dish below the fold. It belongs on .rec-hero. */
.rec-hero{margin:32px 0 0;max-width:520px;border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  background:var(--card)}
.rec-hero img{width:100%;height:auto;display:block}
.rec-hero.placeholder{aspect-ratio:4/5;display:grid;place-items:center;
  border-style:dashed;text-align:center;padding:24px}
.rec-hero.placeholder p{margin:0;font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--body);line-height:1.8}

.rec-meta{display:flex;flex-wrap:wrap;gap:0;margin:30px 0 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.rec-meta div{flex:1 1 128px;padding:16px 20px 15px;border-right:1px solid var(--rule)}
.rec-meta div:last-child{border-right:0}
.rec-meta dt{margin:0;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
.rec-meta dd{margin:5px 0 0;font-family:var(--display);font-size:16px;font-weight:600}
@media(max-width:560px){.rec-meta div{flex-basis:50%;border-bottom:1px solid var(--rule)}
  .rec-meta div:nth-child(2n){border-right:0}
  .rec-meta div:nth-last-child(-n+2){border-bottom:0}}

.rec-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:56px;
  align-items:start;margin-top:40px}
@media(max-width:840px){.rec-grid{grid-template-columns:1fr;gap:8px}}
.rec-col h2{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 16px}
.rec-col.pin{position:sticky;top:96px}
@media(max-width:840px){.rec-col.pin{position:static}}

/* Ingredients. The source file groups them with rules; those groups are
   the mise, so they are kept as groups rather than flattened to one list. */
.mise{margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--rule);list-style:none}
.mise:last-of-type{border-bottom:0;padding-bottom:0}
.mise .stage{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body);margin:0 0 9px}
.mise li{margin:0 0 7px;line-height:1.5}
.mise label{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.mise input{margin:6px 0 0;flex:none;accent-color:var(--teal);width:15px;height:15px}
.mise input:checked + span{color:var(--body);text-decoration:line-through;
  text-decoration-thickness:1px}

.rec-steps{counter-reset:s;list-style:none;margin:0;padding:0}
.rec-steps li{counter-increment:s;position:relative;padding:0 0 20px 46px;margin:0 0 20px;
  border-bottom:1px solid var(--rule)}
.rec-steps li:last-child{border-bottom:0}
.rec-steps li::before{content:counter(s);position:absolute;left:0;top:-1px;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em;
  width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--rule);
  border-radius:50%;background:var(--card)}
.rec-steps li.done{color:var(--body)}
.rec-steps li.done::before{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.rec-steps p{margin:0;cursor:pointer}

.secret{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--gold);
  padding:20px 24px;margin:36px 0 0}
.secret h2{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.secret p{margin:0}
.secret.todo p{color:var(--body);font-style:italic}

.rec-note{margin:34px 0 0;font-size:16px;color:var(--body)}
.rec-note b{color:var(--char)}

@media print{
  header,.sheet,footer,.back,.burger,.rec-hero,.btn{display:none !important}
  body{background:#fff;font-size:12pt}
  .rec-grid{grid-template-columns:1fr 1.4fr;gap:28px}
  .rec-col.pin{position:static}
  .rec-steps li{break-inside:avoid}
  .mise input{display:none}
  .wrap{max-width:none;padding:0}
}

.rec-sub{margin:8px 0 0;font-family:var(--display);font-weight:500;font-size:clamp(16px,1.9vw,19px);line-height:1.4;color:var(--body);max-width:34em}
.rec .hookline{margin-top:18px}

.secret.ahead{margin:34px 0 0;border-left-color:var(--gold)}
.rec-meta .plus{display:block;font-size:12px;font-weight:500;color:var(--body);letter-spacing:.01em;margin-top:2px}

/* Where to buy it. Same furniture as .winebox so the two modules read as a pair,
   with a meat-red rule so a provisions link is never mistaken for a wine link. */
.buybox{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--meat);padding:22px 24px}
.buybox p{margin:0 0 12px}
.buybox .also{font-style:italic;color:var(--body)}

/* Where to buy it. Merchant product photo is only 626px wide, so the column is held
   at 300px to stay sharp at 2x rather than stretched across the box. Stacks on phones. */
.buybox{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
.buy-img{display:block;line-height:0;border:1px solid var(--rule);overflow:hidden;background:#fff}
.buy-img img{width:100%;height:auto;display:block}
.buy-img:focus-visible{outline:2px solid var(--meat);outline-offset:3px}
.buy-copy p:last-of-type{margin-bottom:16px}
@media(max-width:620px){.buybox{grid-template-columns:1fr}}
/* A buybox with no product image is one column, full width. Without this it
   inherits the 300px image column and the copy renders in a narrow strip. */
.buybox-solo{display:block}

/* Illustrated product sections on shop category pages. The drawing is of the
   whisk TYPE, so it sits beside the type label rather than inside the buy
   module, where it would imply a photo of that one vendor's item. The art is
   transparent WebP, so the cream page shows through and it needs none of
   .buy-img's white product-photo card. Added 2026-10-18 for /shop/whisks/. */
.art-sec{display:grid;grid-template-columns:190px 1fr;gap:30px;align-items:start}
.art-fig{margin:0}
.art-fig img{width:100%;height:auto;display:block}
/* On a phone a side-by-side image column takes a quarter of the width and
   crushes the copy to about four words a line, leaving a dead gutter under
   each drawing. Stack instead: small drawing above its label, text full width. */
@media(max-width:620px){
  .art-sec{grid-template-columns:1fr;gap:0}
  .art-fig{width:116px;margin:0 0 2px -8px}
}

/* Cookbook index and recipe components. Added 2026-10-21 with build_recipes.py. */
.cb-group{margin-top:34px;padding:0}
.cb-group+.cb-group{margin-top:44px}
.cb-group h2{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.cb-grid{display:grid;gap:18px}
.cb-card{display:grid;grid-template-columns:168px minmax(0,1fr);background:var(--card);
  border:1px solid var(--rule);border-left:3px solid var(--cb);min-width:0}
.cb-img{display:block;aspect-ratio:4/5;overflow:hidden;background:#fff;border-right:1px solid var(--rule);text-decoration:none}
.cb-img img{width:100%;height:100%;object-fit:cover;display:block}
.cb-img.ph{display:grid;place-items:center;background:var(--cream)}
.cb-img.ph span{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--body);text-align:center;padding:0 10px}
.cb-body{padding:18px 22px 20px;display:grid;gap:7px;align-content:start;min-width:0}
.cb-body h3{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,23px);line-height:1.18;margin:0;letter-spacing:-.01em;text-wrap:balance}
.cb-body h3 a{color:var(--char);text-decoration:none}
.cb-body h3 a:hover{color:var(--cb)}
.cb-sub{margin:0;font-family:var(--display);font-weight:500;font-size:14px;color:var(--body)}
.cb-hook{margin:4px 0 0;font-size:15.5px;color:var(--char);max-width:56ch}
.cb-when{margin:6px 0 0;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--body)}
@media(max-width:560px){.cb-card{grid-template-columns:112px minmax(0,1fr)}.cb-body{padding:14px 16px 16px}}
.comp{margin-top:52px;padding-top:30px;border-top:1px solid var(--rule)}
.comp h2{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,24px);margin:0;letter-spacing:-.01em}
.comp-meta{margin:6px 0 18px;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--body)}
.comp .rec-grid{margin-top:14px}
.uses{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.uses a{font-family:var(--display);font-weight:600;font-size:13px;color:var(--teal);text-decoration:none;
  border:1px solid var(--teal);border-radius:999px;padding:5px 12px}
.uses a:hover{background:var(--teal);color:var(--cream)}
.uses span{font-family:var(--display);font-weight:600;font-size:13px;color:var(--body);border:1px dashed var(--rule);border-radius:999px;padding:5px 12px}
.rec-steps li p:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:2px}

.tools ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tools li{padding-left:18px;position:relative}
.tools li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:999px;background:var(--cb,var(--teal))}
.tools li a{font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}
.tools .why{color:var(--body)}
.tools .aff{font-size:13px;color:var(--body);margin-top:14px}

/* Poster lightbox on ingredient pages. Ed 2026-10-29: tap the card to see it full
   size, close with the X, Escape, a tap outside, or the phone's back button. */
.ing-fig a{display:block;cursor:zoom-in}
.ing-fig a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.plb{position:fixed;inset:0;z-index:200;background:rgba(30,30,28,.90);
     display:flex;align-items:center;justify-content:center;padding:28px}
.plb[hidden]{display:none}
.plb-img{max-width:min(94vw,760px);max-height:88vh;width:auto;height:auto;
         border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.45);background:#f4eee1}
.plb-x{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;
       border:1px solid rgba(255,255,255,.38);background:rgba(0,0,0,.34);color:#fff;
       font:400 26px/1 system-ui,-apple-system,sans-serif;cursor:pointer;
       display:grid;place-items:center;padding:0}
.plb-x:hover{background:rgba(0,0,0,.62)}
.plb-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.plb-hint{position:absolute;left:0;right:0;bottom:14px;text-align:center;
          color:rgba(255,255,255,.72);font-size:13px;margin:0}
@media(max-width:600px){.plb{padding:14px}.plb-img{max-width:96vw;max-height:84vh}}

/* Pages built by hand (shop, privacy, terms, welcome, thanks) open with the crumb
   straight inside <main> rather than inside .page-head, so they sat flush under
   the header. Same top room as .page-head. Ed 2026-10-29. */
main.inner > .crumb:first-child{margin-top:56px}
.rec-steps li.step-h{counter-increment:none;padding:6px 0 10px 0;margin:8px 0 14px;border-bottom:1px solid var(--rule);
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.rec-steps li.step-h::before{content:none}

.shop-rec{padding-top:34px}
.shop-rec h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:0;text-transform:none;font-weight:700}
.shop-rec .also{margin:0 0 14px}

/* inline tool links in method steps (13 Nov 2026) */
.rec-steps a.tool{color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--cb,var(--teal))}
.rec-steps a.tool:hover{color:var(--cb,var(--teal))}