/* Dietitian Made - the stylesheet every recipe page shares.
 *
 * Until 28 August 2026 there was no shared stylesheet at all. Each of the 1,833 recipe pages
 * carried its own inline copy, in three separate <style> blocks: the recipe styles in the head,
 * the nav after <body>, and the footer after </main>. 12.8 MB of CSS across the site to say the
 * same 7 KB, and the copies had been made at different moments as the design moved, so they had
 * drifted into nine different versions.
 *
 * That is what let a minifier break the nutrition label on 1,052 pages and not the other 781, and
 * why the header logo was 30px on 1,141 pages and 32px on 692. Camille, on being told there were
 * two versions: "Why are there 2 style sheets? Wouldn't that leave open the chance for errors?
 * Why don't we have 1 style sheet?" There was no good answer, so now there is one file.
 *
 * How the three were reconciled, deliberately rather than by majority:
 *   recipe styles  the 618-page version, which is a strict superset of the common one (it alone
 *                  still carries .swapnote, used on 648 pages) and has the correct spacing
 *   nav            the 1,141-page version, which is byte for byte what recipes.html, about.html
 *                  and sample-plan.html already use, so the whole site now agrees
 *   footer         identical on all 1,833 pages already
 *
 * One page, slow-cooker-beef-barbacoa, was missing six rules including the hero placeholder. It
 * gets them here.
 *
 * Edit this file. Do not paste CSS back into a page: checks/inline-style.py will stop the build.
 */

/* ---- recipe ---- */
:root{--ink:#2b2b2b;--muted:#6b6b6b;--teal:#2c7a7b;--teal-d:#215d5e;--terra:#c27b54;--cream:#faf6ef;--line:rgba(44,122,123,.16);}
*{box-sizing:border-box;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65;}
.top{background:var(--cream);border-bottom:1px solid var(--line);padding:.7rem 1rem;}
.top-in{max-width:820px;margin:0 auto;} .top-in img.logo{height:40px;width:auto;display:block;}
main{max-width:820px;margin:0 auto;padding:1.6rem 1.1rem 3rem;}
h1{font-size:2rem;line-height:1.15;margin:.1rem 0 .4rem;letter-spacing:-.01em;}
.desc{color:var(--muted);margin:0 0 1rem;font-size:1.05rem;}
.byline{font-size:.85rem;color:var(--muted);margin:0 0 1rem;}
.swapnote{margin-top:.9rem;padding:.7rem .85rem;border-left:3px solid #215d5e;background:#f2f7f7;border-radius:6px;font-size:.92rem;line-height:1.45;}
.byline a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 .5rem;}
.tags.second{margin-top:0;margin-bottom:1rem;}
.tags .lab{font-size:.8rem;color:#8a8175;margin-right:.15rem;}
.chip{font-size:.8rem;padding:.2rem .6rem;border-radius:999px;font-weight:600;}
.chip.prim{background:var(--teal-d);color:#fff;} .chip.meal{background:var(--terra);color:#fff;}
.chip.sec{background:#eef4f3;color:var(--teal-d);border:1px solid var(--line);font-weight:500;}
.jump{display:inline-block;margin:.2rem 0 1.3rem;padding:.4rem .9rem;border-radius:999px;background:#f3f8f7;color:var(--teal-d);font-weight:600;font-size:.9rem;text-decoration:none;border:1px solid var(--line);}
.hero{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;margin:.3rem 0 .6rem;box-shadow:0 1px 5px rgba(0,0,0,.08);}
.heroph{display:block;position:relative;width:100%;margin:.3rem 0 .6rem;}
.heroph .hero{margin:0;}
.heroph-m{display:none;}
.heroph.noimg{display:flex;align-items:center;justify-content:center;aspect-ratio:5/1;background:var(--cream);border:1px solid var(--line);border-radius:14px;}
.heroph.noimg .hero{display:none;}
.heroph.noimg .heroph-m{display:block;color:var(--teal-d);font-weight:700;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;}
.plan-fit{background:var(--cream2,#f3ede1);border:1px solid var(--line,rgba(44,122,123,.18));border-left:4px solid var(--teal,#2c7a7b);border-radius:12px;padding:.7rem 1rem;margin:0 0 1rem;font-size:.95rem;}
.quick{display:flex;flex-wrap:wrap;gap:.35rem 1.3rem;color:var(--muted);font-size:.95rem;margin:0 0 1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--line);}
.quick strong{color:var(--ink);}
h2{font-size:1.35rem;color:var(--teal-d);margin:2rem 0 .6rem;}
h3{font-size:1.05rem;margin:1.1rem 0 .3rem;}
ul,ol{padding-left:1.2rem;} li{margin:.3rem 0;}
.card{display:grid;grid-template-columns:1fr;gap:1.4rem;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;margin:.4rem 0;}
@media(min-width:680px){.card{grid-template-columns:1fr 1.2fr;}}
.card h2{margin-top:0;}
.card>div:first-child{display:flex;flex-direction:column;}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;}
.printbtn{background:var(--teal-d);color:#fff;border:none;border-radius:999px;padding:.4rem .9rem;font-weight:600;font-size:.85rem;cursor:pointer;}
.two{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:start;}
@media(min-width:680px){.two{grid-template-columns:auto 1fr;} .two.even{grid-template-columns:1fr 1fr;}}
.callout{background:#f3f8f7;border-left:4px solid var(--teal);padding:.8rem 1rem;border-radius:6px;margin:.4rem 0 .8rem;font-size:.96rem;}
a{color:var(--teal-d);}
footer{background:var(--teal-d);color:#fff;margin-top:2.5rem;}
.foot-in{max-width:820px;margin:0 auto;padding:1.4rem 1.1rem;font-size:.82rem;color:#dfece9;}
#reciperow{margin-top:1.5rem;}
#reciperow .nfl{margin-top:3.8rem;}
.nfl{max-width:340px;border:1px solid #000;background:#fff;color:#000;padding:.35rem .65rem .55rem;font-family:Helvetica,Arial,sans-serif;line-height:1.15;margin:0;}
.nfl-title{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;margin:0 0 .1rem;}
.nfl-serv{display:flex;justify-content:space-between;font-size:.82rem;padding:.05rem 0;}
.nfl-cal{display:flex;justify-content:space-between;align-items:flex-end;font-weight:800;padding:.1rem 0;}
.nfl-cal span:first-child{font-size:1.05rem;} .nfl-cal span:last-child{font-size:2rem;line-height:.9;}
.nfl-dv{text-align:right;font-size:.72rem;font-weight:700;padding:.12rem 0;}
.nfl-row{display:flex;justify-content:space-between;font-size:.83rem;padding:.17rem 0;border-top:1px solid #000;}
.nfl-row.ind{padding-left:1.1rem;} .nfl-row .b,.nfl-serv b{font-weight:700;}
.nfl-thin{border-top:1px solid #000;} .nfl-med{border-top:4px solid #000;} .nfl-thick{border-top:9px solid #000;}
.nfl-foot{font-size:.62rem;line-height:1.3;padding-top:.35rem;margin-top:.15rem;border-top:5px solid #000;}
@media print{
 .top,footer,.jump,.printbtn,.tags,.desc{display:none!important;}
 body.only-recipe main>*{display:none!important;}
 body.only-recipe #recipe,body.only-recipe #reciperow{display:block!important;}
 body.only-recipe #reciperow .nfl{max-width:340px;margin-top:1rem;}
}

/* ---- nav ---- */
.dmx-nav{border-bottom:1px solid rgba(44,122,123,.18);background:#fff;position:sticky;top:0;z-index:60;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.dmx-nav-in{max-width:1080px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:.4rem}
.dmx-nav a.dmx-logo{display:inline-flex;align-items:center;text-decoration:none;margin-right:auto}
.dmx-nav img.dmx-logo-img{height:38px;width:auto;display:block}
.dmx-btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.9rem;padding:9px 16px;border-radius:999px;border:1px solid rgba(44,122,123,.18);color:#215d5e;background:transparent;line-height:1.2;font-family:inherit;white-space:nowrap}
.dmx-sm{display:none}
.dmx-btn-primary{background:#215d5e;color:#fff;border-color:#215d5e}
.dmx-btn+.dmx-btn{margin-left:.4rem}
@media(max-width:520px){.dmx-btn{font-size:.76rem;padding:8px 10px}.dmx-btn+.dmx-btn{margin-left:.25rem}.dmx-nav img.dmx-logo-img{height:30px}.dmx-nav-in{padding:10px 12px;gap:.25rem}.dmx-lg{display:none}.dmx-sm{display:inline}}

/* ---- footer ---- */
.dmx-foot{background:#215d5e;color:#dbeae8;margin-top:40px;padding:30px 0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.dmx-foot-in{max-width:1080px;margin:0 auto;padding:0 22px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.dmx-foot-in img{height:84px;width:auto;display:block}
.dmx-disc{color:#cfe0dd;font-size:.82rem;max-width:600px;margin:0;line-height:1.5}
.dmx-foot-links{max-width:1080px;margin:18px auto 0;padding:16px 22px 0;border-top:1px solid rgba(255,255,255,.15);text-align:center}
.dmx-foot-links a{color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;margin:0 8px;white-space:nowrap;display:inline-block}
@media(max-width:520px){.dmx-foot-in img{height:64px}.dmx-foot-links a{margin:2px 6px}}

/* Save to Pinterest, sitting on the hero photograph. .heroph is already position:relative, so this
   needs nothing else from the page. A plain link rather than Pinterest's pinit.js: no third party
   script on 1,833 pages, nothing extra to load, nothing tracking a reader who never touches it,
   and nothing to break when Pinterest changes their widget. */
.pinit{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;
  gap:.42rem;background:#fff;color:#3c3c3c;border:1px solid rgba(0,0,0,.10);border-radius:999px;
  padding:.52rem .9rem .52rem .78rem;font:inherit;font-size:.86rem;font-weight:700;
  text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.pinit:hover{background:#faf6ef;}
.pinit svg{width:17px;height:17px;flex:0 0 auto;}
/* A page whose photograph failed to load shows a cream placeholder. Offering to pin that is worse
   than offering nothing. */
.heroph.noimg .pinit{display:none;}
@media(max-width:520px){.pinit{right:9px;bottom:9px;font-size:.8rem;
  padding:.45rem .78rem .45rem .66rem;}}
