/* ==========================================================================
   What She Ate — static design mockup
   Every value below was measured from the reference's computed styles
   (deliciouslyella.com collection + recipe pages, 1440px viewport).
   ========================================================================== */

:root{
  --green:      #27483E;   /* text, buttons, stars, footer          */
  --green-dark: #1B332C;   /* button hover                          */
  --green-mid:  #5D766E;   /* secondary text: rate link, more-links */
  --muted:      #93A39F;   /* light notes, legal, dropdown borders  */
  --white:      #FFFFFF;   /* page ground                           */
  --offwhite:   #F9F7F5;
  --sand:       #F2EFEB;   /* title band, card badge text           */
  --sage:       #E7F1DF;   /* chips                                 */
  --sage-2:     #CFE2C0;
  --line:       #E0E0E0;   /* hairlines + bordered boxes            */

  --side: 6%;              /* header / footer side padding (86px @ 1440) */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Chivo", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--white);color:var(--green);
  font-family:var(--sans);font-size:16px;line-height:1.5;margin:0;
}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0;}
h1{font-size:52px;line-height:62.4px;}
h2{font-size:40px;line-height:48px;}
h3{font-size:28px;}
p{letter-spacing:.5px;line-height:24px;margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul,ol{list-style:none;margin:0;padding:0;}
button{font:inherit;}

.wrap{margin:0 auto;max-width:1336px;padding:0 24px;width:100%;}
.subtitle{font-size:14px;letter-spacing:1.5px;line-height:17px;text-transform:uppercase;}
.body-2{font-size:14px;letter-spacing:.5px;line-height:21px;}
.link-u{text-decoration:underline;text-underline-offset:4px;}
.sr{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;position:absolute;width:1px;}
.icon{display:block;flex:0 0 auto;}

/* ---------------------------------------------------------------- buttons */
.btn{
  background:var(--green);border:1px solid var(--green);border-radius:100px;color:var(--white);
  cursor:pointer;display:inline-block;font-family:var(--sans);font-size:16px;letter-spacing:.5px;
  line-height:1.3;padding:16px 40px;text-align:center;text-transform:capitalize;
  transition:background .2s ease,color .2s ease,border-color .2s ease;white-space:nowrap;
}
.btn:hover{background:var(--green-dark);border-color:var(--green-dark);color:var(--white);}
.btn--sm{padding:8px 40px;}
.btn--outline{background:transparent;color:var(--green);}
.btn--outline:hover{background:var(--green);color:var(--white);}
.btn--white{background:var(--white);border-color:var(--white);color:var(--green);}
.btn--white:hover{background:var(--sand);border-color:var(--sand);color:var(--green);}
.btn--block{display:block;width:100%;}

.icon-btn{
  align-items:center;background:none;border:0;border-radius:100px;color:var(--green);cursor:pointer;
  display:inline-flex;height:44px;justify-content:center;padding:0;width:40px;
}
.icon-btn:hover{background:var(--sand);}

/* ----------------------------------------------------------------- stars */
.stars{align-items:center;color:var(--green);display:inline-flex;gap:2px;}
.stars .off{color:var(--sage-2);}

/* ------------------------------------------------------------------ chips */
.tag{
  border:1px solid var(--muted);border-radius:8px;display:inline-block;font-size:14px;
  letter-spacing:.5px;line-height:21px;padding:8px 14px;text-transform:capitalize;
  transition:border-color .18s ease,background .18s ease;
}
.tag:hover{border-color:var(--green);}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;}

.chip{
  align-items:center;background:var(--sage);border:0;border-radius:8px;color:var(--green);
  cursor:pointer;display:inline-flex;font-size:14px;gap:8px;letter-spacing:.5px;line-height:21px;padding:6px 12px;
}
.chip b{font-weight:400;opacity:.55;}
.chip:hover b{opacity:1;}
.chip.is-exclude{background:#F4E4E0;text-decoration:line-through;}
.chip--clear{background:none;text-decoration:underline;text-underline-offset:3px;}

/* =========================================================================
   Header — logo row 74px + nav row 53px, both 6% side padding, 0.5px lines
   ========================================================================= */
.site-header{background:var(--white);position:relative;z-index:40;}

.logo-row{
  align-items:center;border-bottom:.5px solid var(--line);display:grid;gap:20px;
  grid-template-columns:1fr auto 1fr;height:74px;padding:12.8px var(--side);
}
.logo-left{align-items:center;display:flex;gap:18px;}
.logo-right{align-items:center;display:flex;gap:14px;justify-content:flex-end;}

.search{max-width:300px;position:relative;width:100%;}
.search .icon{left:14px;position:absolute;top:50%;transform:translateY(-50%);}
.search input{
  background:var(--white);border:.5px solid var(--line);border-radius:100px;color:var(--green);
  font-family:var(--sans);font-size:14px;letter-spacing:.5px;padding:10px 16px 10px 40px;width:100%;
}
.search input::placeholder{color:var(--muted);}
.search input:focus{border-color:var(--green);outline:0;}

/* outlined wordmark (Fraunces Soft Wonky + leaf full stop); colour comes from currentColor */
.logo{color:var(--green);display:block;line-height:0;}
.logo svg{display:block;height:30px;width:auto;}

.burger{display:none;}

.nav-row{
  align-items:center;border-bottom:.5px solid var(--line);display:flex;height:53px;
  justify-content:space-between;padding:0 var(--side);
}
.nav-main{display:flex;gap:56px;}
.nav-main a,.nav-right a{
  align-items:center;display:inline-flex;font-size:14px;gap:6px;height:53px;
  letter-spacing:.5px;text-transform:capitalize;white-space:nowrap;
}
.nav-main a:hover span,.nav-main a.is-active span{text-decoration:underline;text-underline-offset:5px;}
.nav-right{align-items:center;display:flex;gap:26px;}

/* =========================================================================
   Footer — green, Subscribe block, serif 20px headings, uppercase links
   ========================================================================= */
.site-footer{background:var(--green);color:var(--white);}  /* no margin: it showed as a white strip under tinted last sections */
.site-footer a{color:var(--white);}

.foot-sub{
  align-items:center;border-bottom:1px solid rgba(255,255,255,.18);display:grid;gap:40px;
  grid-template-columns:1fr minmax(0,520px);padding:64px var(--side) 56px;
}
.foot-sub h2{color:var(--white);margin-bottom:10px;}
.foot-sub p{margin:0;max-width:440px;}
.foot-form{display:flex;gap:12px;}
.foot-form input{
  background:transparent;border:1px solid rgba(255,255,255,.6);border-radius:100px;color:var(--white);
  flex:1 1 auto;font-family:var(--sans);font-size:16px;letter-spacing:.5px;min-width:0;padding:14px 22px;
}
.foot-form input::placeholder{color:rgba(255,255,255,.7);}
.foot-form input:focus{border-color:var(--white);outline:0;}

.foot-cols{display:grid;gap:40px;grid-template-columns:1.5fr repeat(3,1fr);padding:56px var(--side) 48px;}
.foot-logo{color:var(--white);display:inline-block;margin-bottom:18px;}
.foot-logo svg{height:34px;}
.foot-blurb{max-width:340px;}
.foot-col h5{color:var(--white);font-size:20px;line-height:24px;margin-bottom:22px;text-transform:capitalize;}
.foot-col a{display:block;font-size:14px;letter-spacing:1.5px;line-height:17px;margin-bottom:16px;text-transform:uppercase;}
.foot-col a:hover{text-decoration:underline;text-underline-offset:4px;}

.foot-legal{
  border-top:1px solid rgba(255,255,255,.18);color:var(--muted);display:flex;flex-wrap:wrap;
  font-size:12px;gap:16px;justify-content:space-between;letter-spacing:.5px;padding:22px var(--side) 30px;
}
.foot-legal a{color:var(--muted);margin-left:22px;}
.foot-legal a:hover{color:var(--white);}

/* =========================================================================
   Recipe card — 3:4 portrait image, no radius, corner badge,
   12/8/8 details box, "Ready in" pinned on a hairline
   ========================================================================= */
.grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));}
.grid--gap-lg{row-gap:40px;}

.card{display:flex;flex-direction:column;height:100%;}
.card-media{background:var(--sand);display:block;overflow:hidden;position:relative;}
.card-media > a{display:block;}
.card-media img{aspect-ratio:310/406;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1);width:100%;}
.card:hover .card-media img{transform:scale(1.035);}

.card-badge{
  background:var(--green);border-radius:0 0 8px 0;color:var(--sand);font-size:12px;
  left:0;letter-spacing:.3px;line-height:15px;padding:4px 12px;position:absolute;top:0;
}
.card-save{
  align-items:center;background:var(--white);border:0;border-radius:50%;color:var(--green);cursor:pointer;
  display:flex;height:36px;justify-content:center;position:absolute;right:10px;top:10px;width:36px;
}
.card-save:hover{background:var(--sand);}

.card-body{display:flex;flex:1 1 auto;flex-direction:column;padding:12px 8px 8px;}
.card-rating{align-items:center;display:flex;font-size:14px;gap:6px;letter-spacing:.5px;line-height:21px;margin-bottom:12px;}
.card-rating em{color:var(--green-mid);font-style:normal;}
.card-title{font-size:24px;line-height:28.8px;margin-bottom:28px;}
.card-ready{
  align-items:center;border-top:1px solid var(--line);display:flex;font-size:14px;gap:8px;
  letter-spacing:.5px;line-height:21px;margin-top:auto;padding-top:16px;
}

/* ================================================================= bands */
.band{padding:72px 0;}
.band--sand{background:var(--sand);}
.band--offwhite{background:var(--offwhite);}
.band--sage{background:var(--sage);}

.section-head{align-items:flex-end;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:32px;}
.section-head .subtitle{display:block;margin-bottom:12px;}
.section-head--center{flex-direction:column;align-items:center;text-align:center;}
.view-all{font-size:16px;letter-spacing:.5px;text-decoration:underline;text-transform:capitalize;text-underline-offset:4px;}

/* sand title band (listing) */
.title-band{background:var(--sand);margin-bottom:16px;padding:48px;text-align:center;}
.title-band h1{text-transform:capitalize;}

/* =========================================================================
   Front page
   ========================================================================= */
.cover{align-items:flex-end;background:#2a2f31 url("../img/site/cover.jpg") center/cover no-repeat;display:flex;min-height:620px;position:relative;}
.cover::before{
  background:linear-gradient(100deg,rgba(21,33,29,.82) 0%,rgba(21,33,29,.55) 42%,rgba(21,33,29,.1) 74%,rgba(21,33,29,0) 100%);
  content:"";inset:0;position:absolute;
}
.cover-inner{padding-bottom:76px;padding-top:72px;position:relative;}
.cover-text{max-width:620px;}
.cover .subtitle{color:rgba(255,255,255,.85);display:block;margin-bottom:18px;}
.cover h1{color:var(--white);margin-bottom:18px;}
.cover p{color:rgba(255,255,255,.9);margin-bottom:28px;max-width:500px;}
.cover-search{display:flex;gap:10px;max-width:520px;}
.cover-search input{
  background:var(--white);border:0;border-radius:100px;color:var(--green);flex:1 1 auto;
  font-family:var(--sans);font-size:16px;letter-spacing:.5px;min-width:0;padding:16px 24px;
}
.cover-search input:focus{outline:2px solid rgba(255,255,255,.6);}
.cover-quick{color:rgba(255,255,255,.8);display:flex;flex-wrap:wrap;font-size:14px;gap:12px;letter-spacing:.5px;margin-top:18px;}
.cover-quick a{color:var(--white);text-decoration:underline;text-underline-offset:3px;}

/* image tiles: square-cornered, serif label */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));}
.tile{display:block;overflow:hidden;position:relative;}
.tile img{aspect-ratio:3/4;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1);width:100%;}
.tile:hover img{transform:scale(1.04);}
.tile::after{background:linear-gradient(to top,rgba(21,33,29,.78),rgba(21,33,29,0) 58%);content:"";inset:0;position:absolute;}
.tile-label{bottom:18px;color:var(--white);left:18px;position:absolute;right:18px;z-index:2;}
.tile-label strong{display:block;font-family:var(--serif);font-size:24px;font-weight:400;line-height:28.8px;}
.tile-label span{font-size:14px;letter-spacing:.5px;}

/* cook by time — ruler with a stop per column, photo slots below.
   Hovering a slot fills the ruler up to that slot's stop (CSS :has, no JS). */
.clock{--fill:0%;}
.ruler{margin:0 0 30px;position:relative;}
.ruler-track{background:var(--line);height:2px;left:0;position:absolute;right:0;top:9px;}
.ruler-fill{background:var(--green);display:block;height:100%;transition:width .45s cubic-bezier(.2,.6,.2,1);width:var(--fill);}
.ruler-ticks{
  background:repeating-linear-gradient(to right,var(--muted) 0 1px,transparent 1px calc(100% / 24));
  height:7px;left:0;opacity:.55;position:absolute;right:0;top:15px;
}
.ruler-stops{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;}
.ruler-stop{align-items:center;display:flex;flex-direction:column;}
.ruler-stop i{
  background:var(--white);border:2px solid var(--muted);border-radius:50%;display:block;height:20px;
  transition:background .3s ease,border-color .3s ease;width:20px;
}
.ruler-stop span{font-size:12px;letter-spacing:1.5px;margin-top:14px;text-transform:uppercase;}
.ruler-start{font-size:12px;left:0;letter-spacing:1.5px;position:absolute;text-transform:uppercase;top:28px;}

.clock:has(.slot:nth-child(1):hover){--fill:12.5%;}
.clock:has(.slot:nth-child(2):hover){--fill:37.5%;}
.clock:has(.slot:nth-child(3):hover){--fill:62.5%;}
.clock:has(.slot:nth-child(4):hover){--fill:87.5%;}
.clock:has(.slot:nth-child(1):hover) .ruler-stop:nth-child(-n+1) i,
.clock:has(.slot:nth-child(2):hover) .ruler-stop:nth-child(-n+2) i,
.clock:has(.slot:nth-child(3):hover) .ruler-stop:nth-child(-n+3) i,
.clock:has(.slot:nth-child(4):hover) .ruler-stop:nth-child(-n+4) i{background:var(--green);border-color:var(--green);}

.slots{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));}
.slot{background:var(--white);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;}
.slot:hover{box-shadow:0 14px 34px rgba(39,72,62,.12);transform:translateY(-4px);}
.slot-media{display:block;position:relative;}
.slot-media .ph{display:block;overflow:hidden;}
.slot-media img{aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1);width:100%;}
.slot:hover .slot-media img{transform:scale(1.04);}

/* the dial survives as a badge overlapping the photo */
.slot-dial{
  background:var(--white);border-radius:50%;bottom:-38px;box-shadow:0 4px 14px rgba(39,72,62,.12);
  height:76px;left:20px;position:absolute;width:76px;
}
.slot-dial svg{display:block;height:100%;transform:rotate(-90deg);width:100%;}
.slot-dial .track{fill:none;stroke:var(--sand);stroke-width:7;}
.slot-dial .fill{fill:none;stroke:var(--green);stroke-linecap:round;stroke-width:7;}
.slot-dial span{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;line-height:1;position:absolute;}
.slot-dial b{font-family:var(--serif);font-size:24px;font-weight:400;}
.slot-dial em{font-size:10px;font-style:normal;letter-spacing:1.5px;margin-top:2px;text-transform:uppercase;}

.slot-body{display:flex;flex:1 1 auto;flex-direction:column;padding:50px 20px 20px;}
.slot-body strong{font-family:var(--serif);font-size:24px;font-weight:400;line-height:28.8px;}
.slot-count{color:var(--green-mid);font-size:14px;letter-spacing:.5px;margin:2px 0 16px;}
.slot-ex li{border-top:1px solid var(--line);display:flex;font-size:14px;gap:12px;justify-content:space-between;letter-spacing:.5px;line-height:20px;padding:10px 0;}
.slot-ex li{align-items:baseline;}
.slot-ex em{color:var(--green-mid);flex:0 0 auto;font-style:normal;}
.slot-more{border-top:1px solid var(--line);font-size:14px;letter-spacing:.5px;margin-top:auto;padding-top:14px;text-decoration:underline;text-underline-offset:4px;}

/* cook by ingredient — round chips */
.ings{display:grid;gap:24px 16px;grid-template-columns:repeat(9,minmax(0,1fr));}
.ing{display:block;text-align:center;}
.ing-photo{background:var(--sand);border-radius:50%;display:block;overflow:hidden;position:relative;width:100%;}
.ing-photo::after{border:2px solid transparent;border-radius:50%;content:"";inset:0;position:absolute;transition:border-color .2s ease;}
.ing-photo img{aspect-ratio:1/1;object-fit:cover;transition:transform .5s ease;width:100%;}
.ing:hover .ing-photo img{transform:scale(1.08);}
.ing:hover .ing-photo::after{border-color:var(--green);}
.ing strong{display:block;font-family:var(--serif);font-size:18px;font-weight:400;line-height:22px;}
.ing > span:last-child{display:block;font-size:12px;letter-spacing:.5px;margin-top:2px;}  /* count line only, not the badge */

/* ---- hero: "tonight's pick" card floating on the photo ---- */
.cover-inner{align-items:flex-end;display:flex;gap:40px;justify-content:space-between;padding-bottom:140px;}
.cover-pick{
  background:var(--white);box-shadow:0 18px 44px rgba(0,0,0,.22);color:var(--green);display:grid;
  flex:0 0 360px;grid-template-columns:128px minmax(0,1fr);transition:transform .25s ease;
}
.cover-pick:hover{transform:translateY(-3px);}
.cover-pick img{height:100%;object-fit:cover;width:128px;}
.cover-pick-body{padding:16px 18px;}
.cover .cover-pick .subtitle{color:var(--green-mid);font-size:12px;margin-bottom:6px;}
.cover-pick strong{display:block;font-family:var(--serif);font-size:22px;font-weight:400;line-height:26px;margin-bottom:10px;}
.cover-pick:hover strong{text-decoration:underline;text-underline-offset:4px;}
.cover-pick-meta{align-items:center;display:flex;flex-wrap:wrap;font-size:13px;gap:6px 12px;letter-spacing:.5px;}
.cover-pick-meta span{align-items:center;display:inline-flex;gap:5px;}

/* ---- stats: white bar overlapping the bottom of the hero ---- */
.stats-wrap{background:var(--sand);position:relative;z-index:3;}
.stats-bar{background:var(--white);box-shadow:0 10px 34px rgba(39,72,62,.10);display:grid;grid-template-columns:repeat(4,1fr);margin-top:-72px;}
.stat{border-right:1px solid var(--line);padding:30px 22px;text-align:center;}
.stat:last-child{border-right:0;}
.stat strong{display:block;font-family:var(--serif);font-size:40px;font-weight:400;line-height:48px;}
.stat span{display:block;font-size:14px;letter-spacing:1.5px;margin-top:2px;text-transform:uppercase;}
.stat small{color:var(--green-mid);display:block;font-size:13px;letter-spacing:.5px;line-height:19px;margin-top:8px;}
.stats-wrap + .band{padding-top:64px;}

/* ---- course: bento mosaic ---- */
.bento{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,250px);}
.bento .tile{height:100%;}
.bento .tile img{aspect-ratio:auto;height:100%;}
.bento .tile:first-child{grid-column:span 2;grid-row:span 2;}
.bento .tile:nth-child(2){grid-column:span 2;}
.bento .tile:first-child .tile-label{bottom:28px;left:28px;right:28px;}
.bento .tile:first-child .tile-label strong{font-size:44px;line-height:52px;}
.tile-desc{display:block;font-size:16px;letter-spacing:.5px;line-height:24px;margin:8px 0 14px;max-width:380px;opacity:.92;}
.tile-go{display:inline-block;font-size:14px;letter-spacing:.5px;text-decoration:underline;text-underline-offset:4px;}

/* ---- new recipes: swipeable rail ---- */
.rail-nav{align-items:center;display:flex;gap:10px;}
.arrow{
  align-items:center;background:transparent;border:1px solid var(--green);border-radius:50%;color:var(--green);
  cursor:pointer;display:inline-flex;height:44px;justify-content:center;transition:background .2s ease,color .2s ease;width:44px;
}
.arrow:hover{background:var(--green);color:var(--white);}
.arrow:disabled{background:transparent;color:var(--green);cursor:default;opacity:.25;}
.rail-nav .view-all{margin-left:10px;}
.rail{
  display:grid;gap:16px;grid-auto-columns:calc((100% - 64px) / 4.35);grid-auto-flow:column;overflow-x:auto;
  scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none;}
.rail > *{scroll-snap-align:start;}
.rail-progress{background:var(--line);height:2px;margin-top:30px;position:relative;}
.rail-progress span{background:var(--green);height:100%;left:0;position:absolute;top:0;transition:left .2s ease;width:25%;}

/* ---- in season: full-bleed green banner ---- */
.season{background:var(--green);color:var(--white);display:grid;grid-template-columns:1fr 1fr;min-height:580px;}
.season-text{padding:80px 64px 80px max(24px, calc((100vw - 1288px) / 2));}
.season-text .subtitle{color:var(--sage-2);display:block;margin-bottom:18px;}
.season-text h2{color:var(--white);font-size:52px;line-height:62.4px;margin-bottom:18px;}
.season-text > p{margin-bottom:30px;max-width:470px;}
.season-media{min-height:380px;position:relative;}
.season-media img{height:100%;inset:0;object-fit:cover;position:absolute;width:100%;}
.upcoming{border-top:1px solid rgba(255,255,255,.22);margin-top:46px;}
.upcoming .subtitle{color:var(--sage-2);display:block;margin:20px 0 4px;}
.upcoming a{align-items:baseline;border-bottom:1px solid rgba(255,255,255,.22);display:grid;gap:20px;grid-template-columns:minmax(0,1fr) auto auto;padding:16px 0;}
.upcoming strong{font-family:var(--serif);font-size:24px;font-weight:400;line-height:28.8px;}
.upcoming a:hover strong{text-decoration:underline;text-underline-offset:4px;}
.upcoming span{font-size:14px;letter-spacing:.5px;opacity:.85;}
.upcoming em{background:rgba(255,255,255,.12);border-radius:8px;font-size:12px;font-style:normal;letter-spacing:1.5px;padding:4px 10px;text-transform:uppercase;white-space:nowrap;}
.upcoming em.soon{background:var(--sage-2);color:var(--green);}

/* ---- cook by ingredient: pick up to three ---- */
button.ing{background:none;border:0;color:var(--green);cursor:pointer;font:inherit;padding:0;}
.ing-pic{display:block;margin:0 auto 12px;position:relative;}
.tick{
  align-items:center;background:var(--green);border:2px solid var(--white);border-radius:50%;color:var(--white);display:flex;
  height:28px;justify-content:center;opacity:0;position:absolute;right:calc(14.64% - 14px);top:calc(14.64% - 14px);transform:scale(.5);
  transition:opacity .2s ease,transform .2s ease;width:28px;z-index:2;
}
.ing.is-on .tick{opacity:1;transform:none;}
.ing.is-on .ing-photo::after{border-color:var(--green);border-width:3px;}
.ing.is-on .ing-photo img{transform:scale(1.08);}
.picker-bar{align-items:center;background:var(--white);display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;margin-top:40px;padding:20px 24px;}
.picker-bar p{margin:0;}
.picker-bar p b{font-family:var(--serif);font-size:20px;font-weight:400;}
.picker-bar .btn.is-off{opacity:.3;pointer-events:none;}

/* ---- cuisines: big names, hover swaps the photo ---- */
.cuis{align-items:center;display:grid;gap:72px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.cuis-media{aspect-ratio:4/5;background:var(--sand);overflow:hidden;position:relative;}
.cuis-media img{height:100%;inset:0;object-fit:cover;opacity:0;position:absolute;transform:scale(1.05);transition:opacity .5s ease,transform 1.2s ease;width:100%;}
.cuis-media img.is-on{opacity:1;transform:none;}
.cuis-cap{background:var(--white);bottom:0;font-size:14px;left:0;letter-spacing:1.5px;padding:12px 18px;position:absolute;text-transform:uppercase;z-index:2;}
.cuis-intro .subtitle{display:block;margin-bottom:12px;}
.cuis-intro h2{margin-bottom:12px;}
.cuis-intro p{margin-bottom:28px;max-width:430px;}
.cuis-list a{align-items:baseline;border-top:1px solid var(--line);display:flex;gap:20px;justify-content:space-between;padding:16px 0;}
.cuis-list a:last-child{border-bottom:1px solid var(--line);}
.cuis-list strong{font-family:var(--serif);font-size:44px;font-weight:400;line-height:52px;transition:transform .35s cubic-bezier(.2,.6,.2,1);}
.cuis-list span{color:var(--green-mid);font-size:14px;letter-spacing:.5px;white-space:nowrap;}
.cuis-list a.is-on strong{font-style:italic;transform:translateX(16px);}
.cuis-list a.is-on span{color:var(--green);}
.cuis-all{display:inline-block;margin-top:26px;}

/* ---- popular: ranked top five ---- */
.top5{align-items:start;display:grid;gap:56px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}
.top-feature{display:block;}
.top-feature .ph{display:block;overflow:hidden;position:relative;}
.top-feature img{aspect-ratio:4/3;object-fit:cover;transition:transform .7s ease;width:100%;}
.top-feature:hover img{transform:scale(1.03);}
.top-rank{background:var(--green);border-radius:0 0 8px 0;color:var(--sand);font-family:var(--serif);font-size:40px;left:0;line-height:1;padding:14px 20px 16px;position:absolute;top:0;}
.top-feature-body{padding-top:22px;}
.top-feature-body h3{font-size:36px;line-height:43px;margin:10px 0 12px;}
.top-feature:hover h3{text-decoration:underline;text-underline-offset:5px;}
.top-meta{align-items:center;display:flex;flex-wrap:wrap;font-size:14px;gap:8px 20px;letter-spacing:.5px;}
.top-meta span{align-items:center;display:inline-flex;gap:6px;}
.top-list li a{align-items:center;border-top:1px solid var(--line);display:grid;gap:20px;grid-template-columns:44px 104px minmax(0,1fr);padding:20px 0;}
.top-list li:last-child a{border-bottom:1px solid var(--line);}
.top-n{color:var(--muted);font-family:var(--serif);font-size:44px;line-height:1;transition:color .2s ease;}
.top-list img{aspect-ratio:1/1;object-fit:cover;width:104px;}
.top-list strong{display:block;font-family:var(--serif);font-size:22px;font-weight:400;line-height:26px;margin-bottom:8px;}
.top-list a:hover strong{text-decoration:underline;text-underline-offset:4px;}
.top-list a:hover .top-n{color:var(--green);}

/* ---- diets: tabs ---- */
.tabs{border-bottom:1px solid var(--line);display:flex;gap:40px;margin-bottom:44px;overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--green-mid);cursor:pointer;font-size:14px;
  letter-spacing:1.5px;margin-bottom:-1px;padding:0 0 16px;text-transform:uppercase;white-space:nowrap;
}
.tab:hover{color:var(--green);}
.tab[aria-selected="true"]{border-bottom-color:var(--green);color:var(--green);}
.tab-panel{align-items:start;display:grid;gap:56px;grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);}
.tab-panel[hidden]{display:none;}
.tab-intro h3{font-size:40px;line-height:48px;margin-bottom:14px;}
.tab-count{display:block;font-family:var(--serif);font-size:20px;line-height:24px;margin-bottom:26px;}
.mini-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));}
.mini{display:block;}
.mini .ph{display:block;overflow:hidden;}
.mini img{aspect-ratio:1/1;object-fit:cover;transition:transform .6s ease;width:100%;}
.mini:hover img{transform:scale(1.04);}
.mini strong{display:block;font-family:var(--serif);font-size:20px;font-weight:400;line-height:24px;margin:14px 0 4px;}
.mini:hover strong{text-decoration:underline;text-underline-offset:4px;}
.mini span{color:var(--green-mid);font-size:14px;letter-spacing:.5px;}

/* =========================================================================
   Listing — top filter bar of 8px dropdowns + "All filters" drawer
   ========================================================================= */
.fbar{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:8px 0 20px;}
.fbar-group{align-items:center;display:flex;flex-wrap:wrap;gap:12px;}
.fbar .subtitle{margin-right:2px;}

.dd{position:relative;}
.dd-btn{
  align-items:center;background:var(--white);border:1px solid var(--muted);border-radius:8px;color:var(--green);
  cursor:pointer;display:flex;font-size:14px;gap:10px;height:39px;justify-content:space-between;
  letter-spacing:.5px;min-width:160px;padding:0 14px;text-transform:capitalize;
}
.dd-btn:hover,.dd.is-open .dd-btn{border-color:var(--green);}
.dd-btn .n{background:var(--green);border-radius:8px;color:var(--white);font-size:11px;line-height:1;padding:3px 6px;}
.dd.is-open .dd-btn .chev{transform:rotate(180deg);}
.dd-btn--all{background:var(--green);border-color:var(--green);color:var(--white);min-width:0;}
.dd-btn--all:hover{background:var(--green-dark);border-color:var(--green-dark);}
.dd-panel{
  background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(39,72,62,.12);
  display:none;left:0;min-width:260px;padding:18px;position:absolute;top:calc(100% + 6px);z-index:30;
}
.dd--right .dd-panel{left:auto;right:0;}
.dd.is-open .dd-panel{display:block;}
.dd-panel .opts{max-height:260px;overflow-y:auto;}
.dd-panel-foot{border-top:1px solid var(--line);display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;}
.dd-panel-foot a{font-size:14px;letter-spacing:.5px;text-decoration:underline;text-underline-offset:3px;}

/* reference checkbox: 20px, 2px green border, 4px radius */
.cb{align-items:flex-start;cursor:pointer;display:flex;font-size:16px;gap:12px;letter-spacing:.5px;line-height:24px;padding:6px 0;}
.cb input{
  -webkit-appearance:none;appearance:none;background:var(--white);border:2px solid var(--green);border-radius:4px;
  cursor:pointer;display:grid;flex:0 0 20px;height:20px;margin:2px 0 0;place-content:center;width:20px;
}
.cb input:checked{background:var(--green);}
.cb input:checked::after{border-bottom:2px solid var(--white);border-left:2px solid var(--white);content:"";height:5px;transform:rotate(-45deg) translate(1px,-1px);width:10px;}
.cb input[type=radio]{border-radius:50%;}
.cb span{flex:1 1 auto;}
.cb em{color:var(--green-mid);font-size:13px;font-style:normal;padding-left:8px;}

.results-bar{align-items:center;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;padding-bottom:16px;}
.results-count{font-size:14px;letter-spacing:.5px;margin-right:8px;}
.results-count b{font-family:var(--serif);font-size:20px;font-weight:400;}

.refine{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 28px;}
.refine .subtitle{margin-right:6px;}

.load-more{margin:56px 0 80px;text-align:center;}

/* drawer */
.drawer-scrim{background:rgba(27,51,44,.38);inset:0;opacity:0;position:fixed;transition:opacity .3s ease,visibility .3s;visibility:hidden;z-index:60;}
.drawer-scrim.is-open{opacity:1;visibility:visible;}
.drawer{
  background:var(--white);bottom:0;display:flex;flex-direction:column;left:0;max-width:92vw;position:fixed;
  top:0;transform:translateX(-102%);transition:transform .32s cubic-bezier(.2,.6,.2,1);width:420px;z-index:61;
}
.drawer.is-open{transform:none;}
.drawer-head{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:18px 24px;}
.drawer-head h3{font-size:28px;}
.drawer-body{flex:1 1 auto;overflow-y:auto;padding:0 24px;}
.drawer-foot{border-top:1px solid var(--line);display:flex;gap:12px;padding:16px 24px;}
.drawer-foot .btn{flex:1 1 auto;padding-left:20px;padding-right:20px;}

.fgroup{border-bottom:1px solid var(--line);}
.fgroup summary{align-items:center;cursor:pointer;display:flex;justify-content:space-between;list-style:none;padding:20px 0;}
.fgroup summary::-webkit-details-marker{display:none;}
.fgroup[open] summary .chev{transform:rotate(180deg);}
.fgroup-body{padding-bottom:18px;}

.finput{
  background:var(--white);border:1px solid var(--muted);border-radius:8px;color:var(--green);
  font-family:var(--sans);font-size:14px;height:39px;letter-spacing:.5px;padding:0 14px;width:100%;
}
.finput:focus{border-color:var(--green);outline:0;}
.frange{display:flex;gap:8px;margin-bottom:10px;}

.inex{display:flex;gap:6px;margin-bottom:10px;}
.inex button{
  background:var(--white);border:1px solid var(--muted);border-radius:8px;color:var(--green);cursor:pointer;
  flex:1 1 0;font-size:12px;height:34px;letter-spacing:1.5px;text-transform:uppercase;
}
.inex button.is-on{background:var(--green);border-color:var(--green);color:var(--white);}
.inex-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}

/* =========================================================================
   Recipe page
   ========================================================================= */
.r-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:677px;}
.r-info{display:flex;flex-direction:column;padding:12px 24px 48px;}
.r-info-top{align-items:center;display:flex;justify-content:space-between;min-height:44px;}
.crumbs{align-items:center;display:flex;font-size:16px;gap:8px;text-transform:capitalize;}
.crumbs a{text-decoration:underline;text-underline-offset:4px;}
.r-actions{display:flex;gap:10px;}

.r-info-body{align-items:center;display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding:40px 24px 0;text-align:center;}
.r-info-body .subtitle{margin-bottom:19px;}
.r-info-body h1{margin-bottom:20px;max-width:540px;text-transform:capitalize;}
.r-date{margin-bottom:20px;}
.r-rate{align-items:center;color:var(--green-mid);display:flex;gap:10px;margin-bottom:22px;}
.r-rate .stars{font-size:15px;}
.r-rate a{text-decoration:underline;text-underline-offset:3px;}
.r-stats{align-items:stretch;display:flex;gap:22px;}
.r-stat{font-family:var(--serif);font-size:20px;line-height:24px;}
.r-stat span{display:block;}
.r-stats .sep{background:var(--line);width:1px;}

.r-media{background:var(--sand);min-height:420px;position:relative;}
.r-media img{height:100%;inset:0;object-fit:cover;position:absolute;width:100%;}

.r-desc{padding:50px 24px 60px;}
.r-desc-inner{font-family:var(--serif);font-size:26px;line-height:36.4px;margin:0 auto;max-width:746px;}
.r-desc .tag-row{margin-top:26px;}

.r-body{display:grid;grid-template-columns:1fr 1fr;margin:0 auto;max-width:946px;padding:0 0 64px;}
.r-ing{padding-right:85px;}
.r-body h2{margin-bottom:25px;}
.r-ing .subtitle{display:block;margin:8px 0 6px;}
.ing-list{margin-bottom:22px;}
.ing-list li{padding:8px 0;}
.ing-list .cb{padding:0;}
.ing-list .cb.is-done span{color:var(--muted);text-decoration:line-through;}
.ing-note{color:var(--muted);display:block;font-size:12px;letter-spacing:.5px;line-height:18px;}

.method li{display:grid;grid-template-columns:29px minmax(0,1fr);margin-bottom:24px;}
.method-n{font-family:var(--serif);font-size:26px;line-height:31.2px;}
.method p{margin:0;padding-top:4px;}

.r-notes{border-top:1px solid var(--line);margin-top:8px;padding-top:24px;}
.r-notes h3{font-size:20px;line-height:24px;margin-bottom:10px;}

/* bordered box with the title sitting on the border (reference "More recipes") */
.r-extra{margin:0 auto;max-width:946px;padding:0 0 24px;}
.box{border:1px solid var(--line);border-radius:8px;margin-bottom:48px;padding:46px 40px 32px;position:relative;}
.box-title{
  background:var(--white);font-family:var(--serif);font-size:20px;left:50%;line-height:24px;padding:0 30px;
  position:absolute;top:0;transform:translate(-50%,-50%);white-space:nowrap;
}
.box-grid{display:grid;gap:24px;grid-template-columns:1fr 1fr;}
.box-grid .box{margin-bottom:0;}
.box-note{font-size:14px;letter-spacing:.5px;margin:-14px 0 18px;text-align:center;}

.macros{align-items:center;display:flex;gap:22px;margin-bottom:18px;}
.donut{flex:0 0 auto;height:112px;position:relative;width:112px;}
.donut svg{height:100%;transform:rotate(-90deg);width:100%;}
.donut circle{fill:none;stroke-width:14;}
.d-carb{stroke:var(--green);} .d-fat{stroke:var(--muted);} .d-prot{stroke:var(--sage-2);}
.donut-mid{align-items:center;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute;}
.donut-mid b{font-family:var(--serif);font-size:24px;font-weight:400;line-height:1;}
.donut-mid span{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;}
.macro-key{display:grid;flex:1 1 auto;gap:10px;}
.macro-key div{align-items:center;display:flex;font-size:14px;gap:10px;letter-spacing:.5px;}
.macro-key i{display:block;height:12px;width:12px;}
.macro-key b{font-weight:400;margin-left:auto;}

.nut li{border-top:1px solid var(--line);padding:10px 0;}
.nut-top{display:flex;font-size:14px;justify-content:space-between;letter-spacing:.5px;margin-bottom:6px;}
.nut-top b{font-weight:400;}
.nut-bar{background:var(--sand);height:4px;overflow:hidden;}
.nut-bar span{background:var(--green);display:block;height:100%;}
.nut-dv{color:var(--green-mid);font-size:12px;letter-spacing:.5px;line-height:18px;margin-top:4px;}

.health{display:grid;gap:0;grid-template-columns:1fr 1fr;}
.health div{border-top:1px solid var(--line);padding:16px 4px;}
.health div:nth-child(odd){border-right:1px solid var(--line);padding-right:16px;}
.health div:nth-child(even){padding-left:20px;}
.health span{display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;}
.health b{display:block;font-family:var(--serif);font-size:28px;font-weight:400;line-height:34px;margin-top:4px;}
.health em{color:var(--green-mid);font-size:13px;font-style:normal;letter-spacing:.5px;}

.equip{display:grid;gap:0 32px;grid-template-columns:1fr 1fr;}
.equip a{align-items:center;border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:14px 0;}
.equip a span:last-child{font-size:14px;letter-spacing:.5px;text-decoration:underline;text-underline-offset:3px;}
.equip a:hover span:first-child{text-decoration:underline;text-underline-offset:4px;}

.more-links{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;}
.more-links a{color:var(--green-mid);font-size:14px;letter-spacing:1.5px;text-transform:uppercase;}
.more-links a:hover{color:var(--green);}

/* ratings */
.rt-top{align-items:center;display:grid;gap:44px;grid-template-columns:200px minmax(0,1fr);margin-bottom:30px;}
.rt-score{text-align:center;}
.rt-score b{display:block;font-family:var(--serif);font-size:52px;font-weight:400;line-height:62.4px;}
.rt-score .stars{font-size:18px;justify-content:center;margin:2px 0 6px;}
.rt-bars{display:grid;gap:9px;}
.rt-row{align-items:center;display:grid;font-size:14px;gap:12px;grid-template-columns:34px minmax(0,1fr) 34px;letter-spacing:.5px;}
.rt-bar{background:var(--sand);height:6px;overflow:hidden;}
.rt-bar span{background:var(--green);display:block;height:100%;}
.rt-row em{font-style:normal;text-align:right;}

.rate-me{background:var(--sand);margin-bottom:12px;padding:26px;text-align:center;}
.rate-me h3{font-size:24px;margin-bottom:4px;}
.rate-me p{font-size:14px;margin-bottom:12px;}
.rate-stars{display:inline-flex;gap:4px;}
.rate-stars button{background:none;border:0;color:var(--sage-2);cursor:pointer;font-size:30px;line-height:1;padding:0 2px;transition:color .15s ease,transform .15s ease;}
.rate-stars button.is-lit{color:var(--green);transform:scale(1.1);}

.review{border-top:1px solid var(--line);display:grid;gap:16px;grid-template-columns:44px minmax(0,1fr);padding:22px 0;}
.review:first-of-type{border-top:0;}
.review-av{align-items:center;background:var(--sage);border-radius:50%;display:flex;font-family:var(--serif);font-size:18px;height:44px;justify-content:center;width:44px;}
.review-head{align-items:baseline;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px;}
.review-head time{color:var(--green-mid);font-size:13px;letter-spacing:.5px;}
.review p{margin:0;}
.review-cook{color:var(--green-mid);font-size:13px;letter-spacing:.5px;margin-top:6px;}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1279px){
  .dd-btn{min-width:128px;}
  .nav-main{gap:34px;}
}
@media (max-width:1199px){
  .ings{grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media (max-width:1023px){
  h1{font-size:38px;line-height:46px;}
  h2{font-size:30px;line-height:36px;}
  .search{display:none;}
  .burger{display:inline-flex;}
  .logo-right .btn{display:none;}
  .nav-row{display:none;height:auto;padding:8px var(--side) 16px;}
  .nav-row.is-open{display:block;}
  .nav-main,.nav-right{flex-direction:column;gap:0;}
  .nav-main a,.nav-right a{height:44px;}

  .grid,.tiles,.slots{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ruler{display:none;}
  .band{padding:52px 0;}
  .cover{min-height:480px;}
  .cover::before{background:linear-gradient(to top,rgba(21,33,29,.88) 12%,rgba(21,33,29,.4) 75%);}
  .cover-inner{flex-direction:column;align-items:stretch;padding-bottom:110px;}
  .cover-pick{flex:none;max-width:420px;}
  .stats-bar{grid-template-columns:1fr 1fr;}
  .stat:nth-child(2){border-right:0;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:320px 200px 200px;}
  .bento .tile:first-child{grid-column:span 2;grid-row:span 1;}
  .bento .tile:nth-child(2){grid-column:span 2;}
  .rail{grid-auto-columns:calc((100% - 16px) / 2.3);}
  .season{grid-template-columns:1fr;}
  .season-media{aspect-ratio:16/10;min-height:0;order:-1;}
  .season-text{padding:52px 24px;}
  .cuis{gap:36px;grid-template-columns:1fr;}
  .cuis-media{aspect-ratio:4/3;}
  .cuis-list strong{font-size:32px;line-height:40px;}
  .top5{gap:36px;grid-template-columns:1fr;}
  .tab-panel{gap:28px;grid-template-columns:1fr;}

  .fbar .dd:not(.dd--keep){display:none;}
  .fbar > .fbar-group:first-child .subtitle{display:none;}

  .r-head{grid-template-columns:minmax(0,1fr);min-height:0;}
  .r-media{aspect-ratio:4/3;min-height:0;order:-1;}
  .r-body{grid-template-columns:1fr;padding:0 24px 48px;}
  .r-ing{padding-right:0;margin-bottom:24px;}
  .r-extra{padding:0 24px 24px;}
  .box-grid{grid-template-columns:1fr;}
  .box-grid .box{margin-bottom:24px;}
  .equip{grid-template-columns:1fr;}
  .rt-top{gap:20px;grid-template-columns:1fr;}

  .foot-sub{grid-template-columns:1fr;}
  .foot-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:639px){
  .title-band{padding:32px 20px;}
  .card-title{font-size:19px;line-height:23px;margin-bottom:18px;}
  .ings{grid-template-columns:repeat(3,minmax(0,1fr));}
  .slots{grid-template-columns:1fr;}
  .stat strong{font-size:30px;line-height:36px;}
  .stat small{display:none;}
  .bento{grid-template-columns:1fr;grid-template-rows:300px 220px 220px 220px;}
  .bento .tile:first-child,.bento .tile:nth-child(2){grid-column:auto;}
  .bento .tile:first-child .tile-label strong{font-size:32px;line-height:38px;}
  .rail{grid-auto-columns:78%;}
  .season-text h2{font-size:38px;line-height:46px;}
  .upcoming a{grid-template-columns:minmax(0,1fr) auto;}
  .upcoming a span{display:none;}
  .top-list li a{grid-template-columns:32px 76px minmax(0,1fr);gap:14px;}
  .top-list img{width:76px;}
  .top-n{font-size:32px;}
  .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mini-grid .mini:nth-child(3){display:none;}
  .cover-search,.foot-form{flex-direction:column;}
  .r-desc-inner{font-size:21px;line-height:30px;}
  .r-stats{gap:14px;}
  .r-stat{font-size:17px;line-height:21px;}
  .r-stat span{white-space:nowrap;}
  .box{padding:40px 20px 24px;}
  .health div:nth-child(odd){padding-right:10px;}
  .health div:nth-child(even){padding-left:12px;}
  .foot-cols{grid-template-columns:1fr;}
  .logo svg{height:24px;}
  .foot-logo svg{height:30px;}
}

/* =========================================================================
   Live site additions (everything below is not in the static mockups)
   ========================================================================= */
.skip{background:var(--green);color:var(--white);left:12px;padding:10px 16px;position:absolute;top:-60px;z-index:100;}
.skip:focus{top:12px;}
.hp{height:1px;left:-9999px;opacity:0;position:absolute;width:1px;}
[hidden]{display:none !important;}

/* nav dropdown menus */
.nav-main > li{position:relative;}
.nav-menu{
  background:var(--white);border:1px solid var(--line);box-shadow:0 12px 32px rgba(39,72,62,.10);display:none;
  left:-18px;min-width:220px;padding:10px 0;position:absolute;top:100%;z-index:50;
}
.nav-menu a{display:block;height:auto;padding:9px 18px;text-transform:none;}
.nav-menu a:hover{background:var(--offwhite);text-decoration:underline;text-underline-offset:4px;}
.has-menu:hover > .nav-menu,.has-menu:focus-within > .nav-menu{display:block;}
.has-menu:hover > a .chev{transform:rotate(180deg);}
.chev{transition:transform .15s ease;}

.saved-link{position:relative;}
.saved-n{
  background:var(--green);border-radius:9px;color:var(--white);font-size:10px;line-height:16px;min-width:16px;
  padding:0 4px;position:absolute;right:-2px;text-align:center;top:-2px;
}

/* recipe cards without a photo, and the meta line used when there are no ratings yet */
/* recipes without a trustworthy photo */
.noimg{
  align-items:center;aspect-ratio:310/406;background:var(--sand) radial-gradient(circle at 50% 42%, var(--offwhite) 0, var(--offwhite) 26%, transparent 26.5%);
  color:var(--sage-2);display:flex;flex-direction:column;gap:14px;justify-content:center;width:100%;
}
.noimg svg{height:auto;width:34%;}
.noimg em{color:var(--muted);font-size:11px;font-style:normal;letter-spacing:1.5px;text-transform:uppercase;}
.r-media .noimg{aspect-ratio:auto;height:100%;inset:0;position:absolute;}
.r-media .noimg svg{width:22%;}
.card-media > a{display:block;height:100%;}
.card-rating--meta{flex-wrap:wrap;gap:0 8px;}
.card-rating--meta span,.card-rating--meta em{white-space:nowrap;}
.card-rating--meta em{color:var(--green-mid);font-style:normal;}
.card-save.is-saved{background:var(--green);color:var(--white);}
.card-save.is-saved svg path{fill:currentColor;}
.r-actions [data-save].is-saved svg path{fill:currentColor;}

/* filter bar extras */
.dd-btn .n--inv{background:var(--white);color:var(--green);}
.dd-panel-foot button{background:none;border:0;color:var(--green);cursor:pointer;font-family:var(--sans);font-size:14px;letter-spacing:.5px;padding:0;text-decoration:underline;text-underline-offset:3px;}
.cb--radio input{border-radius:50%;}
a.chip{text-decoration:none;}
.title-band .subtitle{display:block;margin-bottom:10px;}
.title-band-intro{margin:14px auto 0;max-width:640px;}
.empty{margin:48px auto 80px;max-width:560px;text-align:center;}
.empty h2{margin-bottom:12px;}
.empty p{margin:0 0 22px;}
.load-more{text-align:center;}
.load-more-note{color:var(--green-mid);font-size:13px;letter-spacing:.5px;margin:14px 0 0;}
.btn.is-loading{opacity:.6;pointer-events:none;}
.pager{margin:-40px 0 72px;}
.pages{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;list-style:none;margin:0;padding:0;}
.pages a,.pages span{align-items:center;border:1px solid var(--line);border-radius:100px;display:inline-flex;font-size:14px;height:36px;justify-content:center;min-width:36px;padding:0 10px;}
.pages a:hover{border-color:var(--green);}
.pages .is-current{background:var(--green);border-color:var(--green);color:var(--white);}
.pages .gap{border:0;}
.js .pager{display:none;}           /* "Load more" replaces numbered pages when JS runs; crawlers still get links */

/* ingredient autocomplete in the drawer */
.ac{position:relative;}
.ac-list{
  background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(39,72,62,.12);
  left:0;margin-top:4px;max-height:280px;overflow-y:auto;padding:6px;position:absolute;right:0;top:100%;z-index:30;
}
.ac-list button{background:none;border:0;border-radius:6px;color:var(--green);cursor:pointer;display:block;font-family:var(--sans);font-size:15px;letter-spacing:.3px;padding:9px 12px;text-align:left;width:100%;}
.ac-list button:hover,.ac-list button.is-active{background:var(--sage);}
.ac-list mark{background:none;color:inherit;font-weight:700;}
.chip input{display:none;}

/* recipe page */
.r-rate-none{color:var(--green-mid);}
.r-ing > .subtitle{display:block;margin:-6px 0 12px;}
.r-source{color:var(--green-mid);font-size:14px;margin-top:20px;}
.r-source a{text-decoration:underline;text-underline-offset:3px;}
.r-pdf{margin:-24px 0 56px;text-align:center;}
.r-pdf a{align-items:center;display:inline-flex;font-size:14px;gap:8px;letter-spacing:.5px;text-decoration:underline;text-underline-offset:4px;}
.macro-key .k-prot{background:var(--sage-2);} .macro-key .k-fat{background:var(--muted);} .macro-key .k-carb{background:var(--green);}
.d-track{fill:none;stroke:var(--sand);stroke-width:14;}
.equip-item{align-items:center;border-bottom:1px solid var(--line);display:flex;padding:14px 0;}
.rate-me{display:block;}
.review-write{margin:18px auto 0;max-width:520px;text-align:left;}
.review-write textarea{
  border:1px solid var(--muted);border-radius:8px;color:var(--green);display:block;font-family:var(--sans);font-size:15px;
  letter-spacing:.3px;margin:8px 0;padding:12px 14px;resize:vertical;width:100%;
}
.review-write textarea:focus{border-color:var(--green);outline:0;}
.review-login a{text-decoration:underline;text-underline-offset:3px;}

/* A-Z index on collection pages */
.az{columns:4 220px;column-gap:32px;}
.az-group{break-inside:avoid;margin-bottom:28px;}
.az-group h3{border-bottom:1px solid var(--line);font-size:24px;margin-bottom:6px;padding-bottom:6px;}
.az-group a{display:flex;font-size:15px;justify-content:space-between;letter-spacing:.3px;padding:6px 0;}
.az-group a:hover span{text-decoration:underline;text-underline-offset:4px;}
.az-group em{color:var(--green-mid);font-size:13px;font-style:normal;}

/* article pages (privacy, about...) */
.prose{margin:32px auto 80px;max-width:746px;}
.prose h2{font-size:30px;line-height:38px;margin:36px 0 12px;}
.prose h3{font-size:22px;margin:28px 0 10px;}
.prose p,.prose li{letter-spacing:.3px;line-height:26px;}
.prose a{text-decoration:underline;text-underline-offset:3px;}

.cover-search--light{margin:0 auto 24px;}
.cover-search--light input{border:1px solid var(--muted);}
a.stat:hover strong{text-decoration:underline;text-underline-offset:6px;}

.foot-msg{color:var(--sage-2);font-size:14px;margin-top:12px !important;}

.toast{
  background:var(--green);border-radius:100px;bottom:24px;box-shadow:0 10px 30px rgba(0,0,0,.18);color:var(--white);
  font-size:14px;left:50%;letter-spacing:.5px;padding:12px 22px;position:fixed;transform:translateX(-50%);z-index:90;
}

.nav-search{display:none;}
@media (max-width:1023px){
  /* phones: top-level links only (each lands on its category page), plus search */
  .has-menu:hover > .nav-menu,.has-menu:focus-within > .nav-menu,.nav-menu{display:none;}
  .has-menu > a .chev{display:none;}
  .nav-search{display:block;margin:6px 0 10px;max-width:none;}
  .nav-search input{font-size:16px;}
  .pager{margin-top:-24px;}
}

@media print{
  .site-header,.site-footer,.r-actions,.r-extra,.band,.toast,.skip,.r-pdf,.tag-row{display:none !important;}
  .r-head{display:block;}
  .r-media{max-height:280px;overflow:hidden;}
  .r-body{display:block;}
  .ing-list .cb input{display:none;}
  body{font-size:12pt;}
}

/* =========================================================================
   Forms, auth, account and the recipe editor
   ========================================================================= */
.btn--block{display:flex;justify-content:center;width:100%;}
.btn--ghost{background:transparent;border-color:transparent;color:var(--green);text-decoration:underline;text-underline-offset:4px;}
.btn--ghost:hover{background:var(--sand);border-color:var(--sand);color:var(--green);}
.link{background:none;border:0;color:var(--green);cursor:pointer;font:inherit;letter-spacing:inherit;padding:0;text-decoration:underline;text-underline-offset:3px;}
.link--danger{color:#A23B2A;}

.notice{border-radius:8px;font-size:15px;letter-spacing:.3px;margin:16px 0;padding:14px 18px;}
.notice--ok{background:var(--sage);}
.notice--warn{background:#FBF1DC;}
.notice--error{background:#F8E3DE;color:#7A2A1C;}
.notice--info{background:var(--sand);}

.form{display:flex;flex-direction:column;gap:18px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field > label,.field-label{font-size:14px;font-weight:500;letter-spacing:.5px;}
.field label em,.field-label em,.ed-card h2 em,.chips-field summary em{color:var(--muted);font-size:13px;font-style:normal;font-weight:400;margin-left:4px;}
.field input,.field textarea,.field select{
  background:var(--white);border:1px solid var(--muted);border-radius:8px;color:var(--green);font-family:var(--sans);
  font-size:16px;letter-spacing:.3px;line-height:1.45;padding:12px 14px;width:100%;
}
.field textarea{resize:vertical;}
.field input:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--sage);outline:0;}
.field-hint{color:var(--green-mid);font-size:13px;letter-spacing:.3px;line-height:19px;margin:0;}
.field-error{color:#A23B2A;font-size:13px;letter-spacing:.3px;margin:0;}
.has-error input,.has-error textarea{border-color:#C0563F;}
.form-row{align-items:center;display:flex;justify-content:space-between;gap:12px;}
.form-link,.form-fine a,.auth-intro a{text-decoration:underline;text-underline-offset:3px;}
.form-fine{color:var(--green-mid);font-size:13px;margin:0;text-align:center;}

/* auth: form beside a photo */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 128px);}
.auth-form{align-items:center;display:flex;justify-content:center;padding:56px 24px 72px;}
.auth-inner{max-width:420px;width:100%;}
.auth-inner h1{font-size:44px;line-height:52px;margin:8px 0 10px;}
.auth-intro{color:var(--green-mid);margin:0 0 26px;}
.auth-perks{list-style:none;margin:0 0 24px;padding:0;}
.auth-perks li{font-size:15px;letter-spacing:.3px;padding:5px 0 5px 26px;position:relative;}
.auth-perks li::before{color:var(--green);content:"✓";left:0;position:absolute;}
.auth-media{background:var(--sand);overflow:hidden;position:relative;}
.auth-media img{height:100%;inset:0;object-fit:cover;position:absolute;width:100%;}
.auth-quote{background:rgba(255,255,255,.92);bottom:32px;font-family:var(--serif);font-size:24px;left:32px;line-height:32px;margin:0;max-width:360px;padding:18px 22px;position:absolute;}

/* account header and tabs */
.acct-band{background:var(--sand);}
.acct-band-inner{align-items:flex-end;display:flex;gap:20px;justify-content:space-between;padding-bottom:22px;padding-top:40px;}
.acct-band h1{font-size:44px;line-height:52px;margin-top:6px;}
.acct-tabs{display:flex;gap:28px;overflow-x:auto;}
.acct-tabs a,.acct-logout button{border-bottom:2px solid transparent;font-size:15px;letter-spacing:.5px;padding:12px 0 14px;white-space:nowrap;}
.acct-tabs a.is-on{border-color:var(--green);}
.acct-tabs a:hover{border-color:var(--muted);}
.acct-logout{margin-left:auto;}
.acct-logout button{background:none;border-top:0;border-left:0;border-right:0;color:var(--green-mid);cursor:pointer;font-family:var(--sans);}
.acct-body{padding-bottom:80px;padding-top:28px;}
.acct-gap{margin-top:48px;}
.acct-note{color:var(--green-mid);margin:0 0 20px;}
.acct-stats{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:40px;}
.acct-stat{border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;padding:22px;}
.acct-stat b{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1;}
.acct-stat span{color:var(--green-mid);font-size:13px;letter-spacing:1px;text-transform:uppercase;}
a.acct-stat:hover{border-color:var(--green);}
.acct-empty{background:var(--offwhite);margin:8px 0;padding:56px 24px;text-align:center;}
.acct-empty h2{margin-bottom:10px;}
.acct-empty p{margin:0 auto 22px;max-width:520px;}
.acct-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.acct-filter a{border:1px solid var(--line);border-radius:100px;font-size:14px;padding:8px 16px;}
.acct-filter a.is-on{background:var(--green);border-color:var(--green);color:var(--white);}
.acct-filter em{font-style:normal;opacity:.7;}
.acct-reviews{list-style:none;margin:0;padding:0;}
.acct-reviews li{border-bottom:1px solid var(--line);padding:14px 0;}
.acct-reviews a{align-items:center;display:flex;gap:12px;}
.acct-reviews p{color:var(--green-mid);margin:6px 0 0;}
.acct-reviews time{color:var(--muted);font-size:12px;}
.acct-settings{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr));}
.acct-settings .box{margin:16px 0 0;}
.pager--always{display:block !important;margin:32px 0 0;}

.mrows{display:flex;flex-direction:column;}
.mrow{align-items:center;border-bottom:1px solid var(--line);display:grid;gap:20px;grid-template-columns:120px minmax(0,1fr) auto;padding:16px 0;}
.mrow-media{display:block;height:90px;overflow:hidden;width:120px;}
.mrow-media img,.mrow-media .noimg{aspect-ratio:auto;height:100%;object-fit:cover;width:100%;}
.mrow-media .noimg svg{width:30%;}
.mrow-media .noimg em{display:none;}
.mrow h3{font-size:22px;line-height:28px;margin:6px 0 4px;}
.mrow-meta{color:var(--green-mid);font-size:13px;letter-spacing:.3px;margin:0;}
.mrow-actions{display:flex;gap:8px;}
.pill{border-radius:100px;display:inline-block;font-size:11px;letter-spacing:1px;padding:3px 10px;text-transform:uppercase;}
.pill--live{background:var(--sage);}
.pill--draft{background:#FBF1DC;}

/* recipe editor */
.editor{align-items:start;display:grid;gap:32px;grid-template-columns:minmax(0,1fr) 300px;}
.editor-main{display:flex;flex-direction:column;gap:20px;}
.ed-card{border:1px solid var(--line);display:flex;flex-direction:column;gap:18px;padding:28px;}
.ed-card h2{align-items:center;display:flex;font-size:28px;gap:12px;line-height:34px;}
.ed-card h2 span{align-items:center;background:var(--green);border-radius:50%;color:var(--white);display:inline-flex;font-family:var(--sans);font-size:14px;height:28px;justify-content:center;width:28px;}
.ed-grid3{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));}
.ed-total{color:var(--green-mid);font-size:14px;margin:-6px 0 0;}
.ed-split{display:grid;gap:20px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);}
.ed-split textarea{font-size:15px;min-height:280px;}
.ed-preview{background:var(--offwhite);padding:16px 18px;}
.ed-ing-preview{list-style:none;margin:10px 0 0;padding:0;}
.ed-ing-preview li{border-bottom:1px solid var(--line);font-size:15px;letter-spacing:.3px;line-height:21px;padding:8px 0;}
.ed-ing-preview li em{color:var(--green-mid);font-size:13px;font-style:normal;}
.ed-ing-preview .ed-ing-group{border:0;color:var(--green-mid);font-size:12px;letter-spacing:1.5px;padding-top:14px;text-transform:uppercase;}
.ed-muted{color:var(--muted);}
.ed-warn{background:#FBF1DC;border-radius:4px;color:#8A5A12;font-size:11px;padding:1px 6px;}
.ed-steps{counter-reset:none;display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0;}
.ed-step{align-items:flex-start;display:grid;gap:12px;grid-template-columns:34px minmax(0,1fr) auto;}
.ed-step-n{align-items:center;border:1px solid var(--green);border-radius:50%;display:inline-flex;font-size:14px;height:34px;justify-content:center;margin-top:6px;width:34px;}
.ed-step textarea{border:1px solid var(--muted);border-radius:8px;color:var(--green);font-family:var(--sans);font-size:16px;line-height:1.45;min-height:64px;overflow:hidden;padding:12px 14px;resize:none;width:100%;}
.ed-step textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--sage);outline:0;}
.ed-step-tools{display:flex;flex-direction:column;gap:2px;margin-top:4px;}
.ed-step-tools button{background:none;border:0;border-radius:4px;color:var(--green-mid);cursor:pointer;font-size:13px;height:22px;width:26px;}
.ed-step-tools button:hover{background:var(--sand);color:var(--green);}
.ed-step-actions{align-items:center;display:flex;gap:18px;}
.ed-paste{display:flex;flex-direction:column;gap:10px;}
.ed-paste textarea{border:1px solid var(--muted);border-radius:8px;font-family:var(--sans);font-size:15px;padding:12px 14px;width:100%;}

.drop{align-items:center;aspect-ratio:16/9;background:var(--offwhite);border:2px dashed var(--line);border-radius:8px;display:flex;justify-content:center;overflow:hidden;position:relative;text-align:center;}
.drop.is-over{background:var(--sage);border-color:var(--green);}
.drop[data-has-image]{border-style:solid;}
.drop img{height:100%;inset:0;object-fit:cover;position:absolute;width:100%;}
.drop-empty{display:flex;flex-direction:column;gap:4px;padding:20px;}
.drop-empty strong{font-family:var(--serif);font-size:22px;font-weight:400;}
.drop-empty small{color:var(--muted);font-size:12px;}
.drop-busy{background:rgba(255,255,255,.8);font-size:14px;inset:0;padding-top:20%;position:absolute;}
.drop-remove{background:var(--white);border:0;border-radius:100px;bottom:12px;cursor:pointer;font-family:var(--sans);font-size:13px;padding:8px 14px;position:absolute;right:12px;}

.chips-field{border:0;margin:0;padding:0;}
.chips-field legend,.chips-field summary{font-size:14px;font-weight:500;letter-spacing:.5px;margin-bottom:8px;}
.chips-field summary{cursor:pointer;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.chip-toggle input{height:1px;opacity:0;position:absolute;width:1px;}
.chip-toggle span{border:1px solid var(--muted);border-radius:100px;cursor:pointer;display:inline-block;font-size:14px;letter-spacing:.3px;padding:8px 14px;transition:background .12s ease;}
.chip-toggle span:hover{border-color:var(--green);}
.chip-toggle input:checked + span{background:var(--green);border-color:var(--green);color:var(--white);}
.chip-toggle input:checked + span::before{content:"✓ ";}
.chip-toggle input:focus-visible + span{box-shadow:0 0 0 3px var(--sage-2);}

.editor-side{position:sticky;top:20px;}
.ed-panel{border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;padding:22px;}
.ed-checklist{list-style:none;margin:0 0 6px;padding:0;}
.ed-checklist li{font-size:15px;padding:6px 0 6px 28px;position:relative;}
.ed-checklist li::before{border:1.5px solid var(--muted);border-radius:50%;content:"";height:16px;left:0;position:absolute;top:8px;width:16px;}
.ed-checklist li.is-done::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--green);}
.ed-checklist li.is-optional::after{color:var(--muted);content:" optional";font-size:12px;}
.ed-autosave{color:var(--muted);font-size:12px;letter-spacing:.3px;margin:0;text-align:center;}
.ed-side-links{border-top:1px solid var(--line);font-size:14px;padding-top:12px;text-align:center;}
.ed-side-links a{text-decoration:underline;text-underline-offset:3px;}
.ed-delete{margin-top:28px;}

/* recipe page extras for member recipes */
.ing-group{display:block;margin:18px 0 6px;}
.draft-bar{background:#FBF1DC;font-size:14px;letter-spacing:.3px;padding:10px var(--side);text-align:center;}
.draft-bar--live{background:var(--sage);}
.draft-bar a{text-decoration:underline;text-underline-offset:3px;}

@media (max-width:1023px){
  .auth{grid-template-columns:1fr;min-height:0;}
  .auth-media{display:none;}
  .editor{grid-template-columns:1fr;}
  .editor-side{bottom:0;position:sticky;top:auto;z-index:20;}
  .ed-panel{background:var(--white);box-shadow:0 -8px 24px rgba(39,72,62,.08);flex-direction:row;flex-wrap:wrap;padding:12px 16px;}
  .ed-panel > .subtitle,.ed-checklist,.ed-autosave,.ed-side-links{display:none;}
  .ed-panel .btn{flex:1 1 40%;padding:12px 16px;}
  .ed-split{grid-template-columns:1fr;}
  .acct-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .acct-settings{grid-template-columns:1fr;}
}
@media (max-width:767px){
  .acct-band-inner{align-items:flex-start;flex-direction:column;padding-top:28px;}
  .acct-band h1,.auth-inner h1{font-size:34px;line-height:40px;}
  .ed-card{padding:20px 16px;}
  .ed-grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .mrow{grid-template-columns:84px minmax(0,1fr);}
  .mrow-media{height:70px;width:84px;}
  .mrow-actions{grid-column:1 / -1;}
}

/* collection pages: breadcrumbs in the title band, related collection links */
.crumbs--center{justify-content:center;margin-bottom:12px;}
.related-links{border-top:1px solid var(--line);margin:8px 0 72px;padding-top:32px;}
.related-links h2{font-size:28px;line-height:34px;margin-bottom:18px;}
.related-links ul{columns:3 240px;column-gap:32px;list-style:none;margin:0;padding:0;}
.related-links li{break-inside:avoid;display:flex;justify-content:space-between;gap:10px;padding:7px 0;}
.related-links a{font-size:15px;letter-spacing:.3px;}
.related-links a:hover{text-decoration:underline;text-underline-offset:4px;}
.related-links em{color:var(--muted);font-size:13px;font-style:normal;}