/* Magazine (I Love What I Feed My Body) on icookmagic.com. Tokens only: every size, gap, corner and colour is a global.css token
   (WEBMAKER > GLOBAL_FORMULAS). Layout follows the magazine site-match candidate: black banner, petite search/filter/sort row, two rails. */
.mz{max-width:var(--g-wrap-wide);margin:0 auto;padding:var(--g-sp-3) var(--g-gut) var(--g-sp-10);font-family:var(--g-font-body);color:var(--g-c-ink)}
.mz a{color:inherit}
.mz-vh{position:absolute;width:var(--g-line-1);height:var(--g-line-1);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mz .mag-icon{width:var(--g-sp-5);height:var(--g-sp-5);flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* banner */
.mz-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--g-sp-6);background:var(--g-c-black);color:var(--g-c-white);border-radius:var(--g-r-l);padding:var(--g-sp-4) var(--g-sp-9);animation:mz-in .5s ease both}
.mz-kicker{margin:0;color:var(--g-c-magenta);font-size:var(--g-t-small);font-weight:var(--g-w-medium);letter-spacing:var(--g-track-wide);text-transform:uppercase}
.mz-masthead{margin:var(--g-sp-1) 0 var(--g-sp-2);font-family:var(--g-font-head);font-size:var(--g-fs-10);line-height:var(--g-lh-tight)}
.mz-masthead a{text-decoration:none;color:var(--g-c-white);font-family:var(--g-font-head);font-weight:var(--g-w-medium)}
.mz-belief{margin:0;font-family:var(--g-font-head);font-size:var(--g-fs-3);color:var(--g-c-magenta-soft)}
.mz-note{margin:var(--g-sp-1) 0 0;font-family:var(--g-font-head);font-size:var(--g-t-lead);color:var(--g-c-white-70)}
.mz-heart{width:var(--g-sp-24);height:auto;flex:none;animation:mz-float 3s ease-in-out 2}
.mz-langs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--g-sp-1) var(--g-sp-4);margin:var(--g-sp-2) 0 var(--g-sp-3);font-size:var(--g-t-small)}
.mz-langs a{text-decoration:none;color:var(--g-c-muted);padding:var(--g-sp-1) 0}
.mz-langs a[aria-current]{color:var(--g-c-magenta);font-weight:var(--g-w-bold);text-decoration:underline;text-underline-offset:var(--g-sp-1)}
/* three columns */
.mz-grid{display:grid;grid-template-columns:var(--g-sp-48) minmax(0,1fr) calc(var(--g-sp-48) + var(--g-sp-4));gap:var(--g-sp-6);align-items:start}
.mz-rail{position:sticky;top:var(--g-sp-4);font-size:var(--g-t-body)}
.mz-left{border-right:var(--g-line-1) solid var(--g-c-line);padding-right:var(--g-sp-4)}
.mz-subjects summary{font-family:var(--g-font-head);font-size:var(--g-fs-3);cursor:pointer;list-style:none;margin-bottom:var(--g-sp-2)}
.mz-subjects summary::-webkit-details-marker{display:none}
.mz-subjects nav{display:grid;gap:var(--g-sp-1)}
.mz-subjects a{display:flex;gap:var(--g-sp-2);align-items:flex-start;text-decoration:none;padding:var(--g-sp-1) var(--g-sp-2);border-radius:var(--g-r-s);line-height:var(--g-lh-snug)}
.mz-subjects a:hover,.mz-subjects a[aria-current]{background:var(--g-c-pink-tint);color:var(--g-c-pink)}
.mz-subjects .mag-icon{color:var(--g-c-magenta)}
.mz-book{display:grid;gap:var(--g-sp-1);text-decoration:none;background:var(--g-c-tint);border:var(--g-line-1) solid var(--g-c-magenta-soft);border-radius:var(--g-r-m);padding:var(--g-sp-3)}
.mz-book img{width:var(--g-sp-10);height:auto}
.mz-book:hover{border-color:var(--g-c-magenta)}
.mz-eyebrow{margin:0;color:var(--g-c-pink);font-size:var(--g-t-xs);font-weight:var(--g-w-medium);letter-spacing:var(--g-track-wide);text-transform:uppercase}
.mz-eyebrow a{text-decoration:none}
.mz-book-t{font-family:var(--g-font-head);font-size:var(--g-fs-3)}
.mz-rh{font-family:var(--g-font-head);font-size:var(--g-fs-3);font-weight:var(--g-w-body);margin:var(--g-sp-5) 0 var(--g-sp-1)}
.mz-related{display:block;text-decoration:none;padding:var(--g-sp-2) 0;border-bottom:var(--g-line-1) solid var(--g-c-line);line-height:var(--g-lh-snug)}
.mz-related:hover{color:var(--g-c-pink)}
/* toolbar */
.mz-tools{display:flex;align-items:center;gap:var(--g-sp-3);flex-wrap:wrap}
.mz-search{flex:1 1 var(--g-sp-48)}
.mz-search input{width:100%;height:var(--g-sp-9);border:0;border-radius:var(--g-r-pill);background:var(--g-c-ink-50);padding:0 var(--g-sp-4);font:inherit;font-size:var(--g-t-body)}
.mz-filter{position:relative}
.mz-filter summary{display:grid;place-items:center;width:var(--g-sp-9);height:var(--g-sp-9);border:var(--g-line-1) solid var(--g-c-magenta);border-radius:var(--g-r-pill);color:var(--g-c-magenta);cursor:pointer;list-style:none}
.mz-filter summary::-webkit-details-marker{display:none}
.mz-filter[data-on] summary{background:var(--g-c-magenta);color:var(--g-c-white)}
.mz-cats{position:absolute;z-index:5;top:calc(100% + var(--g-sp-2));left:0;display:grid;gap:var(--g-sp-1);min-width:var(--g-sp-64);background:var(--g-c-white);border:var(--g-line-1) solid var(--g-c-line);border-radius:var(--g-r-m);padding:var(--g-sp-2);box-shadow:0 var(--g-sh-s) var(--g-sh-m) var(--g-c-black-10)}
.mz-cats button{display:flex;gap:var(--g-sp-2);align-items:center;text-align:left;border:0;background:none;font:inherit;font-size:var(--g-t-body);padding:var(--g-sp-2);border-radius:var(--g-r-s);cursor:pointer}
.mz-cats button[aria-pressed=true],.mz-cats button:hover{background:var(--g-c-pink-tint);color:var(--g-c-pink)}
.mz-sort select{height:var(--g-sp-9);border:var(--g-line-1) solid var(--g-c-line);border-radius:var(--g-r-pill);padding:0 var(--g-sp-3);font:inherit;font-size:var(--g-t-body);background:var(--g-c-white)}
.mz-pager{display:flex;align-items:center;justify-content:flex-end;gap:var(--g-sp-2);margin:var(--g-sp-3) 0;font-size:var(--g-t-small);color:var(--g-c-muted)}
#mz-count{margin-right:auto}
.mz-btn{min-height:var(--g-tap-min);border:var(--g-line-1) solid var(--g-c-line);background:var(--g-c-white);border-radius:var(--g-r-pill);padding:0 var(--g-sp-3);font:inherit;font-size:var(--g-t-small);cursor:pointer;color:var(--g-c-ink)}
.mz-btn:hover:not(:disabled){border-color:var(--g-c-magenta);color:var(--g-c-pink)}
.mz-btn:disabled{opacity:.45;cursor:default}
/* cards */
.mz-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g-sp-4)}
.mz-card{display:flex;flex-direction:column;gap:var(--g-sp-1);border:var(--g-line-1) solid var(--g-c-tint);border-radius:var(--g-r-m);padding:var(--g-sp-2) var(--g-sp-2) var(--g-sp-3);background:var(--g-c-white);animation:mz-in .45s ease both;transition:transform .2s ease,border-color .2s ease}
.mz-card:hover{transform:translateY(calc(var(--g-sp-1) * -1));border-color:var(--g-c-magenta-soft)}
.mz-card[hidden]{display:none}
.mz-card-img{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--g-r-s);background:var(--g-c-tint);margin-bottom:var(--g-sp-1)}
.mz-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.mz-contain img{object-fit:contain;padding:var(--g-sp-3)}
.mz-card h2{margin:0;font-family:var(--g-font-head);font-weight:var(--g-w-medium);font-size:var(--g-t-h3);line-height:var(--g-lh-snug)}
.mz-card h2 a{text-decoration:none}
.mz-card h2 a:hover{color:var(--g-c-pink)}
.mz-ex{margin:0;font-size:var(--g-t-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mz-meta{margin:auto 0 0;font-size:var(--g-t-small);color:var(--g-c-muted)}
.mz-none{padding:var(--g-sp-6);text-align:center;color:var(--g-c-muted)}
/* article */
.mz-crumb{font-size:var(--g-t-small);color:var(--g-c-muted);margin-bottom:var(--g-sp-3)}
.mz-crumb a{text-decoration:none}
.mz-head h1{font-family:var(--g-font-head);font-weight:var(--g-w-medium);font-size:var(--g-fs-9);line-height:var(--g-lh-snug);margin:var(--g-sp-1) 0 var(--g-sp-2)}
.mz-excerpt{font-size:var(--g-t-card);color:var(--g-c-muted);margin:0 0 var(--g-sp-2)}
.mz-head .mz-meta{margin:0 0 var(--g-sp-4)}
.mz-ai{font-size:var(--g-t-small);background:var(--g-c-pink-tint);border-radius:var(--g-r-s);padding:var(--g-sp-2) var(--g-sp-3);margin:0 0 var(--g-sp-4)}
.mz-ai a{color:var(--g-c-pink)}
.mz-media{margin:0 0 var(--g-sp-6);aspect-ratio:16/9;border-radius:var(--g-r-m);overflow:hidden;background:var(--g-c-tint)}
.mz-media img{width:100%;height:100%;object-fit:cover;display:block}
.mz-body{font-size:var(--g-fs-2);line-height:var(--g-lh-normal);max-width:calc(var(--g-sp-64) * 3)}
.mz-body p{margin:0 0 var(--g-sp-4)}
.mz-body h2{font-family:var(--g-font-head);font-weight:var(--g-w-medium);font-size:var(--g-fs-6);margin:var(--g-sp-8) 0 var(--g-sp-3)}
.mz-body h3{font-family:var(--g-font-head);font-size:var(--g-fs-4);margin:var(--g-sp-4) 0 var(--g-sp-2);display:flex;gap:var(--g-sp-2);align-items:center}
.mz-body .source-graphic{margin:var(--g-sp-6) 0;border:var(--g-line-1) solid var(--g-c-magenta-soft);border-radius:var(--g-r-m);padding:var(--g-sp-4);background:var(--g-c-pink-tint)}
.mz-body .source-graphic figcaption{font-family:var(--g-font-head);font-size:var(--g-fs-4);margin-bottom:var(--g-sp-3)}
.mz-body .graphic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--g-sp-40),1fr));gap:var(--g-sp-3)}
.mz-body .graphic-node{background:var(--g-c-white);border-radius:var(--g-r-s);padding:var(--g-sp-3);font-size:var(--g-t-body)}
.mz-body .graphic-node .mag-icon{color:var(--g-c-magenta);width:var(--g-sp-6);height:var(--g-sp-6)}
.mz-body .graphic-node p{margin:var(--g-sp-1) 0 0}
.mz-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--g-sp-48),1fr));gap:var(--g-sp-3);margin:var(--g-sp-4) 0}
.mz-theme{border:var(--g-line-1) solid var(--g-c-tint);border-radius:var(--g-r-m);padding:var(--g-sp-3);font-size:var(--g-t-body)}
.mz-theme .mag-icon{color:var(--g-c-magenta)}
.mz-theme a{color:var(--g-c-pink)}
.mz-bookhead{display:grid;justify-items:start}
.mz-bookhead img{width:var(--g-sp-16);height:auto}
.mz-share{display:flex;gap:var(--g-sp-3);align-items:center;margin:var(--g-sp-6) 0 0;font-size:var(--g-t-small);color:var(--g-c-muted)}
@keyframes mz-in{from{opacity:0;transform:translateY(var(--g-sp-2))}to{opacity:1;transform:none}}
@keyframes mz-float{50%{transform:translateY(calc(var(--g-sp-1) * -1))}}
@media (max-width:1180px){.mz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){
 .mz-grid{grid-template-columns:var(--g-sp-40) minmax(0,1fr)}
 .mz-right{grid-column:1 / -1;position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--g-sp-48),1fr));gap:var(--g-sp-3)}
 .mz-right .mz-rh{grid-column:1 / -1;margin:var(--g-sp-2) 0 0}
}
@media (max-width:700px){
 .mz-grid{grid-template-columns:minmax(0,1fr)}
 .mz-left{position:static;border:0;padding:0}
 .mz-banner{padding:var(--g-sp-3) var(--g-sp-4);gap:var(--g-sp-3)}
 .mz-masthead{font-size:var(--g-fs-6)}
 .mz-belief{font-size:var(--g-t-lead)}
 .mz-note{font-size:var(--g-t-body)}
 .mz-heart{width:var(--g-sp-14)}
 .mz-head h1{font-size:var(--g-fs-6)}
 .mz-body{font-size:var(--g-fs-1)}
 .mz-langs{justify-content:flex-start}
}
@media (max-width:520px){.mz-cards{grid-template-columns:minmax(0,1fr)}.mz-tools{flex-wrap:nowrap}.mz-search{flex:1 1 auto;min-width:0}}
@media (prefers-reduced-motion:reduce){.mz-banner,.mz-card,.mz-heart{animation:none}.mz-card{transition:none}}
.mz-news{display:grid;gap:var(--g-sp-1);margin:var(--g-sp-5) 0 0;font-size:var(--g-t-small);color:var(--g-c-muted)}
.mz-news span{font-family:var(--g-font-head);font-size:var(--g-t-lead);color:var(--g-c-ink)}
.mz-news a{justify-self:start;border:var(--g-line-1) solid var(--g-c-ink);border-radius:var(--g-r-pill);padding:var(--g-sp-1) var(--g-sp-3);text-decoration:none;color:var(--g-c-ink)}
.mz-news a:hover{border-color:var(--g-c-magenta);color:var(--g-c-pink)}
