/* The Small Chef. A farmhouse kitchen. Linen and butter yellow with deep kitchen green, a green gingham band,
   square edges and recipe index cards. Young Serif for headings, Atkinson Hyperlegible for reading.
   Change a color once here and it changes across the whole site. */
:root{
  --ink:#23201B;      /* text */
  --linen:#F1EADB;    /* page */
  --flour:#FFFDF7;    /* cards and paper */
  --butter:#F2D16B;   /* highlights and the price band */
  --green:#2E4B36;    /* buttons, links and gingham */
  --green-2:#5E7B5F;  /* softer green for marks */
  --sprig:#DCE5D2;    /* pale green bands */
  --red:#A9402C;      /* the index card's top line, used sparingly */
  --rule:#CFC4AE;
  --muted:#5F574C;
  --head:"Young Serif",Georgia,serif;
  --text:"Atkinson Hyperlegible",system-ui,sans-serif;
  --gingham:repeating-linear-gradient(0deg,rgba(46,75,54,.55) 0 10px,transparent 10px 20px),repeating-linear-gradient(90deg,rgba(46,75,54,.55) 0 10px,transparent 10px 20px),#F7F3EA;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--linen);color:var(--ink);font:18px/1.65 var(--text)}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(38px,6vw,66px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:22px}
p{margin:0 0 1em}
a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:1.5px}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--butter);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.read{max-width:42em}
.small{font-size:15px;color:var(--muted)}
.band{padding:60px 20px}
.band.cream{background:var(--flour);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band.sage{background:var(--sprig)}
.kicker{font:italic 18px/1.3 var(--head);color:var(--green-2);margin:0 0 10px}

/* the gingham band, the one signature detail */
.gingham{height:16px;background:var(--gingham);border-bottom:2px solid var(--green)}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px;position:relative}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mark b{font:400 26px/1 var(--head)}
.nav{display:flex;gap:22px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a[aria-current=page],.nav a:hover{border-bottom-color:var(--green)}
.nav .signin{border:2px solid var(--ink);padding:6px 14px}
.nav .signin:hover{background:var(--ink);color:var(--flour)}
.menu-btn{display:none;font:700 16px var(--text);background:var(--flour);border:2px solid var(--ink);padding:6px 14px;color:var(--ink)}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--flour);flex-direction:column;align-items:flex-start;padding:12px 20px 20px;border-bottom:2px solid var(--green);z-index:5}
  .nav.open{display:flex}
}

/* buttons, square with a letterpress shadow */
.btn{display:inline-block;font:700 17px/1 var(--text);padding:15px 22px;text-decoration:none;border:2px solid var(--ink);color:var(--ink);background:var(--flour);box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.go{background:var(--green);color:var(--flour)}
.btn.off{border-color:var(--rule);color:var(--muted);box-shadow:none;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:36px;padding-bottom:60px}
.hero .lede{font-size:21px;max-width:28em}
.hero img{aspect-ratio:4/5;object-fit:cover;width:100%;border:10px solid var(--flour);outline:1px solid var(--rule)}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:28px}.hero img{aspect-ratio:4/3}}

/* index cards */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{position:relative;background:var(--flour);border:1px solid var(--rule);padding:26px 22px 22px;display:flex;flex-direction:column;gap:6px;
  background-image:linear-gradient(var(--red),var(--red)),repeating-linear-gradient(180deg,transparent 0 27px,#E4DCCB 27px 28px);
  background-size:100% 2px,100% 100%;background-position:0 18px,0 30px;background-repeat:no-repeat,no-repeat}
.card h3{margin:6px 0 2px}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card p{margin:0;color:var(--muted);font-size:16px}
.card .tag{align-self:flex-start;font:700 13px/1 var(--text);padding:5px 8px;border:1.5px solid var(--green);color:var(--green);background:var(--flour)}
.card .tag.free{background:var(--butter);border-color:var(--ink);color:var(--ink)}
.card.photo{padding:0;background-image:none}
.card.photo img{aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--rule)}
.card.photo div{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:var(--green)}
.three{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.three{grid-template-columns:1fr}}

/* lists with a sprig mark */
.leaf{list-style:none;padding:0;margin:0 0 1.2em}
.leaf li{position:relative;padding-left:30px;margin:0 0 14px}
.leaf li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:12px;background:var(--green-2);transform:rotate(45deg)}
.leaf b{display:block}

/* split section */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{aspect-ratio:4/3;object-fit:cover;width:100%;border:10px solid var(--flour);outline:1px solid var(--rule)}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photos img{aspect-ratio:1;object-fit:cover;border:8px solid var(--flour);outline:1px solid var(--rule)}

/* season filter and servings */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.chip{font:700 16px var(--text);padding:8px 14px;border:2px solid var(--ink);background:var(--flour);color:var(--ink);cursor:pointer}
.chip[aria-pressed=true]{background:var(--green);border-color:var(--green);color:var(--flour)}

/* prices */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,320px));gap:22px;margin:24px 0}
.plan{background:var(--flour);border:2px solid var(--ink);padding:26px}
.plan.best{background:var(--butter)}
.plan .price{font:400 48px/1 var(--head);margin:6px 0 4px}
@media (max-width:620px){.plans{grid-template-columns:1fr}}

/* form */
.form label{display:block;font-weight:700;margin:14px 0 6px}
.form input{width:100%;max-width:420px;font:18px var(--text);padding:12px 14px;border:2px solid var(--ink);background:var(--flour)}

/* footer */
.foot{background:var(--green);color:#EEF0E6;margin-top:48px}
.foot .gingham{border-bottom:none;border-top:2px solid var(--green)}
.foot .wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:40px;padding-bottom:40px}
.foot b{font:400 22px var(--head)}
.foot a{color:#EEF0E6}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.foot .small{grid-column:1/-1;color:#C9D3C4}
@media (max-width:620px){.foot .wrap{grid-template-columns:1fr}}

/* phones, cards two across so lists stay short */
@media (max-width:620px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{padding:22px 14px 14px}
  .card h3{font-size:17px}
  .card p{font-size:14px}
}

/* recipe page */
.recipe{padding-top:28px;padding-bottom:40px}
.rc-head .lede{font-size:20px;max-width:34em}
.rc-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;margin-top:20px}
.rc-grid h2{font-size:28px;margin-top:30px}
.rc-side{align-self:start;position:relative;background:var(--flour);border:1px solid var(--rule);padding:14px 24px 22px;
  background-image:linear-gradient(var(--red),var(--red));background-size:100% 2px;background-position:0 0;background-repeat:no-repeat}
.serves{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
.serves span{font-weight:700;margin-right:6px}
.serves .chip{min-width:44px;padding:8px 12px}
.ing{list-style:none;padding:0;margin:12px 0 0}
.ing li{padding:10px 0;border-bottom:1px dashed var(--rule)}
.ing .amt{color:var(--green)}
.steps{padding-left:1.4em}
.steps li{margin:0 0 12px;padding-left:4px}
.ages{display:grid;gap:12px}
.ages div{background:var(--sprig);border-left:4px solid var(--green);padding:14px 18px}
.ages p{margin:4px 0 0}
.variant{background:var(--flour);border:1px solid var(--rule);padding:14px 18px;margin:0 0 12px}
.variant h3{font-size:19px;margin:0 0 6px}
.locked{background:var(--butter);border:2px solid var(--ink);padding:28px;margin-top:24px;max-width:40em}
@media (max-width:820px){.rc-grid{grid-template-columns:1fr;gap:12px}}

/* storefront */
.shop-sec{margin:0 0 44px}
.shop-head{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;margin-bottom:14px}
.shop-head img{width:120px;height:90px;object-fit:cover;border:5px solid var(--flour);outline:1px solid var(--rule)}
.shop-head h2{margin:0}
.shop-all{display:flex;flex-wrap:wrap;gap:12px}
.shop-all form{margin:0}
.btn.quiet{background:var(--flour)}
.shop-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.shop-list li{background:var(--flour);border:1px solid var(--rule);padding:14px 16px}
.shop-list li.on{border:2px solid var(--green);background:#F6F8F1}
.shop-list a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);margin-top:6px}
.shop-list a span{color:var(--muted);font-size:15px}
.shop-list a em{color:var(--green);font-style:normal;font-size:15px;text-decoration:underline}
.shop-pick{font-size:15px;display:flex;gap:8px;align-items:center;cursor:pointer}
.shop-pick input{width:20px;height:20px;accent-color:var(--green)}
.lb-filters{margin:0 0 24px}
.find{display:flex;flex-direction:column;gap:6px;font-weight:700;max-width:420px}
.find input{font:18px var(--text);padding:12px 14px;border:2px solid var(--ink);background:var(--flour)}
.shop-jump{margin-bottom:16px}
.shop-jump .chip{text-decoration:none}
.shop-bag{position:sticky;bottom:0;background:var(--green);color:var(--flour);padding:14px 0;z-index:4;border-top:3px solid var(--butter)}
.shop-bag a{color:var(--flour)}
.sb-top{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.shop-bag .btn{box-shadow:3px 3px 0 #0f1d14}
.shop-bag form{margin:0}
@media (max-width:620px){.shop-head{grid-template-columns:80px 1fr}.shop-head img{width:80px;height:64px}.shop-all{grid-column:1/-1}.shop-list{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* print just the recipe or the list */
@media print{
  .top,.foot,.gingham,.noprint,.menu-btn{display:none!important}
  body{font-size:12pt;background:#fff}
  .rc-grid{grid-template-columns:1fr 1.4fr;gap:24px}
  .rc-side{background:none;border:1px solid #999}
  body.print-bag main>*:not(.shop-bag){display:none}
  body.print-bag .shop-bag{position:static;background:#fff;color:#000}
}

/* what children gain, two columns of sprig marks */
.gains{columns:2;column-gap:48px;margin-top:20px}
.gains li{break-inside:avoid}
@media (max-width:820px){.gains{columns:1}}