/* ===== "The Mix": Folio structure + Classic personality ===== */
:root{--orange:#C24E25;--tape:rgba(244,226,170,.82);--shadow:0 18px 40px -18px rgba(37,39,36,.45)}
body{background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
h1{font-weight:600;letter-spacing:-.02em;line-height:1.04}
.masthead-intro .lead{margin-bottom:1.6rem}
h1 em,h2 em{color:var(--orange)!important;font-weight:500}
.hand{color:var(--orange);font-size:1.7rem;transform:rotate(-3deg);display:inline-block}
.btn{border-radius:999px;background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.btn:hover{background:var(--ink);border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--orange)}
.btn--ghost,.btn.alt{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none}
.btn--ghost:hover,.btn.alt:hover{background:var(--ink);color:var(--cream);box-shadow:3px 3px 0 var(--orange)}
.tag{border-radius:999px!important;background:rgba(217,167,165,.45)!important;color:var(--ink)!important;border:0!important;font-weight:600;padding:.25rem .65rem!important}
.tag:nth-child(2n){background:rgba(155,165,140,.4)!important}.tag.catch{background:var(--cobalt,#24519A)!important;color:#fff!important}
/* polaroid + tape frames */
.frame{position:relative;background:#fff;border:0;padding:.7rem .7rem 1.4rem;box-shadow:var(--shadow);transform:rotate(-1.6deg)}
.frame::before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:28px;margin-left:-55px;background:var(--tape);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.1);z-index:2}
.meet .frame{transform:rotate(2deg)}.journal-teaser .frame{transform:rotate(1.4deg)}.catch-feature__fig.frame{transform:rotate(-2.2deg)}
/* masthead: deep green, collage */
section.masthead-intro{background:var(--green);color:var(--cream);position:relative;overflow:hidden;border:0}
.masthead-intro h1,.masthead-intro .lead{color:var(--cream)}.masthead-intro h1 em{color:var(--blush)!important}
.masthead-intro .kicker{color:var(--sage);border-color:rgba(244,240,230,.25)}
.masthead-intro .hand{color:var(--blush)}
.masthead-intro .btn--ghost{color:var(--cream);border-color:var(--cream)}
.masthead-intro .mi-photo{position:relative}
.mix-sticker{position:absolute;z-index:3;width:7.2rem;height:7.2rem;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;text-align:center;font:400 1.15rem/1.05 var(--hand);transform:rotate(12deg);box-shadow:3px 3px 0 var(--ink);right:-2.6rem;top:-2.4rem;padding:.6rem}
.mix-pol{position:absolute;z-index:3;width:42%;left:-12%;bottom:-2rem;background:#fff;padding:.45rem .45rem 1.6rem;transform:rotate(-8deg);box-shadow:var(--shadow)}
.mix-pol img{aspect-ratio:1;object-fit:cover;width:100%}
.mix-pol figcaption{position:absolute;bottom:.15rem;left:0;right:0;text-align:center;font:400 1rem var(--hand);color:var(--ink);padding:0}
/* ticker */
.mix-ticker{background:var(--orange);color:#fff;overflow:hidden;white-space:nowrap;border-block:2px solid var(--ink);padding:.45rem 0;transform:rotate(-1deg);margin:-.6rem 0 0;position:relative;z-index:4}
.mix-ticker div{display:inline-block;animation:mixtick 60s linear infinite;font:italic 500 1.25rem var(--serif)}
.mix-ticker span{margin:0 1.1rem}.mix-ticker b{font:400 1.3rem var(--hand);color:var(--ink);margin:0 .4rem}
@keyframes mixtick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mix-ticker div{animation:none}}
/* color-blocked departments */
section.lead-feature{background:var(--paper);border:0}
.lead-feature h2 a{color:var(--ink);text-decoration:none}.lead-feature h2 em{color:var(--plum)!important}
section.catch-feature{background:var(--cobalt,#24519A);color:var(--cream);border:0}
.catch-feature h2,.catch-feature p,.catch-feature li,.catch-feature .dept__label,.catch-feature a:not(.btn){color:var(--cream)!important}
.catch-feature ol,.catch-feature ol li{border-color:rgba(244,240,230,.3)!important}.catch-feature ol li::before{color:var(--blush)!important}.catch-feature ol .kicker{color:rgba(255,255,255,.78)!important}
.catch-feature .hand{color:var(--blush)}.catch-feature h2 em{color:var(--blush)!important}
section.fridge-invite{background:var(--cream);border:0}.fridge-invite>.wrap{background:#fff;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--orange);padding:clamp(2rem,5vw,3.5rem);max-width:60rem;transform:rotate(-.6deg)}
.fridge-invite h2 em{color:var(--orange)!important}

section.journal-teaser{background:var(--paper);border:0}
section.wwm-strip{background:var(--green);color:var(--cream);border:0}
.wwm-strip h2,.wwm-strip p,.wwm-strip li,.wwm-strip .dept__label,.wwm-strip a:not(.btn){color:var(--cream)!important}.wwm-strip h2 em{color:var(--blush)!important}
.wwm-strip .btn--ghost{color:var(--cream);border-color:var(--cream)}
.dept__label{color:var(--brown)}
/* index: big playful numbers */
.index-list a{font-weight:600}.index-list .kicker{font:400 2rem var(--hand)!important;color:var(--orange)!important;letter-spacing:0!important;border:0!important;padding:0!important;margin:0 .6rem 0 0!important;display:inline!important}
.index-list a:hover{color:var(--orange);padding-left:.4rem}
/* cards: scrapbook tilt, straighten on hover */
.grid .card,#allr .card{background:#fff;padding:.6rem .6rem 1rem;box-shadow:var(--shadow);transition:transform .25s;border:0!important}
.grid{align-items:stretch}.grid .card{display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.08)!important}.grid .card img{aspect-ratio:4/5;object-fit:cover}.grid .card .meta{margin-top:auto}
.grid .card:hover,#allr .card:hover{transform:translateY(-4px) rotate(-.6deg)}
.card h3{font-weight:600}
/* recipe page: personality at the top, clean card below */
.story>h1{font-size:clamp(2.6rem,6vw,4.6rem)}
.story .kf-imgwrap,.story>img{background:#fff;padding:.7rem .7rem 1.4rem;box-shadow:var(--shadow);transform:rotate(-1deg);position:relative}
.story .kf-imgwrap::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:28px;margin-left:-60px;background:var(--tape);transform:rotate(3deg);z-index:2}
#recipe,.rc{border:1px solid var(--rule-2)!important;border-top:6px solid var(--orange)!important;box-shadow:0 20px 50px -30px rgba(37,39,36,.5);background:#fff}
.site-header::after{border-bottom:3px solid var(--orange)}
.site-footer{border-top:3px solid var(--orange)}
@media (max-width:899px){
 .mix-sticker{width:5.2rem;height:5.2rem;font-size:.88rem;right:-.6rem;top:-1rem}
 h1{font-size:clamp(2.2rem,9vw,3rem)!important}
 .masthead-intro .btn-row{flex-direction:column}.masthead-intro .btn-row .btn{width:100%}
 .mix-pol{width:40%;left:-.4rem;bottom:-1.4rem}.mix-pol figcaption{font-size:.72rem}
 .mi-photo{margin:2rem .6rem 2.6rem}
 .frame{transform:rotate(-1deg)}
 .grid .card:nth-child(n){transform:rotate(0)}
 .mix-ticker div{font-size:1.15rem}
}

html,body{overflow-x:clip}
.masthead-intro .mi-photo{background:#fff!important;border:0!important;padding:.7rem .7rem 1.4rem!important}
@media (max-width:899px){
 .masthead-intro .mi-copy{grid-row:1!important}.masthead-intro .mi-photo{grid-column:1/-1!important;grid-row:1!important;display:block!important;margin:.4rem 1.6rem 2.6rem 2.4rem!important;transform:rotate(2deg)}
 .masthead-intro .mi-photo img{aspect-ratio:4/3!important;max-height:none}
 .mix-ticker{transform:none}
}
.masthead-intro .wrap{padding-top:clamp(1rem,3vw,2.5rem)}

.site-footer .logo img{filter:brightness(0) invert(1)}
.story .tags{margin-bottom:1.4rem}
section.catch-feature{position:relative;overflow:hidden}
section.catch-feature::before{content:"20";position:absolute;left:-1rem;bottom:-5rem;font:600 clamp(12rem,25vw,22rem)/1 var(--serif);color:#fff;opacity:.08;pointer-events:none}
.meta{font-size:.82rem!important}
#fridge button,.fgrp button{min-height:40px;padding:.5rem 1rem}

/* ===== r4: critic fixes ===== */
:root{--neutral:#E9E4D8}
body{color:#2b2b2b}
.story p,.lead-feature__copy p,.meet__copy p,.fridge-invite p,main p{color:#2b2b2b}
.story>p,.story>div>p{font-size:1.0625rem;line-height:1.7;max-width:65ch}
.hand{font-size:max(18px,1.6rem)}
.mix-pol figcaption{font-size:18px!important}
/* hero: one dominant photo + one accent; sticker off the heading */
.masthead-intro .mi-photo{transform:none!important}
.mix-pol{transform:rotate(-4deg)!important}
.mix-sticker{top:auto!important;bottom:-1.6rem;right:-1.6rem!important;width:5.6rem!important;height:5.6rem!important;font-size:.95rem!important;transform:rotate(-10deg)}
/* orange = actions only */
.tag,.tag:nth-child(2n),.tag.catch{background:var(--neutral)!important;color:var(--green)!important}
.mix-ticker{background:var(--green);color:var(--cream);border-color:var(--green);transform:none}
.mix-ticker b{color:var(--blush)}
h1 em,h2 em{color:var(--green)!important}
.masthead-intro h1 em,.catch-feature h2 em,.wwm-strip h2 em{color:var(--blush)!important}
.hand{color:var(--plum)}.masthead-intro .hand,.catch-feature .hand,.wwm-strip .hand{color:var(--blush)}
.btn,.kf-btn,.ctrl button,#fadd{border-radius:999px!important}
.btn.alt,.btn--ghost,#fclear{border-radius:999px!important}
.index-list .kicker{color:var(--green)!important}
.fridge-invite>.wrap{box-shadow:8px 8px 0 var(--green)}
/* middle-of-page personality */
.mix-note{position:absolute;font:400 1.35rem/1.15 var(--hand);color:var(--plum);transform:rotate(-5deg);max-width:13rem;pointer-events:none}
section{position:relative}
.mix-note--r{right:max(1rem,calc(50% - 38rem));top:2.4rem;transform:rotate(4deg)}
.mix-note--l{left:max(1rem,calc(50% - 38rem));bottom:1.6rem}
.catch-feature .mix-note,.wwm-strip .mix-note{color:var(--blush)}
@media (min-width:900px){
 .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .grid .card:first-child{grid-column:span 2;grid-row:span 2}
 .grid .card:first-child img{aspect-ratio:4/5}
 .grid .card:first-child h3{font-size:2rem}
 .grid .card:nth-child(n+2) img{aspect-ratio:1}
}
@media (max-width:899px){.mix-note{position:static;display:block;margin:0 0 1rem;transform:rotate(-2deg)}}
/* recipe card */
#recipe li{font-size:1rem!important;line-height:1.65!important}
#recipe ol li{font-size:1.0625rem!important}
@media (min-width:1024px){
 .mix-rgrid{display:grid;grid-template-columns:1fr 1.4fr;gap:2.5rem;align-items:start}
 .mix-ings{position:sticky;top:6rem}
}
.kf-bar{position:sticky;top:4.2rem;z-index:20;background:#fff;padding:.6rem 0;border-bottom:1px solid var(--rule)}
.madewith{padding:.5rem .9rem!important;border:2px solid var(--green)!important}
.madewith img,.madewith img.madewith__logo,.x-unlinked img{height:36px!important;max-height:36px!important;max-width:170px!important;filter:none!important;opacity:1!important}
.fp-disc{display:block;background:var(--neutral);border-left:4px solid var(--green);padding:.9rem 1.1rem;margin:1rem 0;font-size:.95rem;color:#2b2b2b}
.fp-disc::before{content:"Partner credit";display:block;font:700 .68rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:.3rem}
/* fridge pills */
.fchips{display:flex!important;flex-wrap:wrap;gap:.5rem!important}
.fchip{margin:0!important}
@media (max-width:899px){
 .masthead-intro .wrap.g12{display:block!important}
 .masthead-intro .mi-photo{display:block!important;width:auto!important;margin:2.4rem 1.6rem 2.8rem 2.2rem!important;transform:rotate(1.5deg)!important}
 .masthead-intro .mi-photo img{aspect-ratio:4/3!important}
 .mix-sticker{right:-1rem!important;bottom:-1.4rem}
}