: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.65;-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}
.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(27px,3.5vw,38px);line-height:1.14;
  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)}
.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}
.ing-sec h2{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 10px}
.ing-sec p{margin:0 0 12px;font-size:17px;color:var(--char)}
.ing-sec .also{font-style:italic;color:var(--body)}
.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}