*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.sc-uFxKYE{max-width:640px;margin:0 auto;padding:0 20px}
.sc-ChnCfw{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.sc-ChnCfw h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.sc-ChnCfw p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.sc-ChnCfw a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.sc-jwflui{padding:20px 0}
.sc-jwflui h2{font-size:18px;font-weight:400;margin-bottom:4px}
.sc-jwflui h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.sc-jwflui h2 a:hover{border-bottom-color:#2a2a2a}
.sc-jwflui .sc-NTJaDV{font-size:12px;color:#aaa;margin-bottom:6px}
.sc-jwflui p{font-size:14px;color:#666}
.sc-LIsZqQ{color:#888;font-size:13px;text-decoration:none}
.sc-LIsZqQ:hover{color:#2a2a2a}
.sc-fCNUfq{padding-bottom:60px}
.sc-fCNUfq h1{font-size:28px;font-weight:400;margin-bottom:8px}
.sc-fCNUfq .sc-NTJaDV{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.sc-fCNUfq h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.sc-fCNUfq h3{font-size:17px;margin:28px 0 8px}
.sc-fCNUfq p{margin-bottom:18px;font-size:16px}
.sc-fCNUfq ul,.sc-fCNUfq ol{margin:0 0 18px 20px}
.sc-fCNUfq a{color:#555;border-bottom:1px solid #ccc}
.sc-fCNUfq a:hover{color:#000;border-bottom-color:#000}
.sc-fCNUfq img{max-width:100%;height:auto;margin:24px 0}
.sc-WehiNc{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.sc-WehiNc a{color:#aaa;text-decoration:none}
.sc-VPrVnG{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.sc-BUOFBW{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.sc-eNAHRU{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.sc-sFNRqf{margin:0 auto 32px;max-width:720px}
.sc-CBwWyl{width:100%;height:auto}
.sc-yvuAku{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.sc-yvuAku em{color:#aaa}
.sc-yvuAku a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.sc-uQCpqY{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.sc-uQCpqY p{padding:3px 0;margin:0;font-size:15px}
.sc-uQCpqY a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.sc-uQCpqY a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#3D6F95;--accent:#B89A6F;--bg:#EFEAD8;--fg:#0F1820;--border:#B8AC9C;--r:3px;--fb:'Kanit';--fh:'Roboto Serif'}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,400;0,8..144,500;0,8..144,700;1,8..144,400&family=Kanit:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* v.8f9f6a — layout revision */
/* Erica Bergstrom · Meal Kit Picks · editorial homepage rebuild.
   Moment colour #5C6B4A used in exactly 2 roles: hero drop cap + Editor's Picks rule. */
:root { --moment: #5C6B4A; --paper: #faf5ec; }

:root body { font-family: var(--fb), system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.70; font-size: 16.5px; }
::selection { background: var(--accent); color: var(--bg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

/* ============================================================= MASTHEAD */
/* Homepage masthead: cover photo + gradient + serif-italic wordmark + manifesto */
:root > body > header:has(h1) { position: relative; max-width: none; margin: 0 0 4px; background: linear-gradient(rgba(20,29,37,.74), rgba(20,29,37,.60)), url("/theme-assets/cover-photo.jpg") center/cover no-repeat, var(--primary); color: var(--bg); padding: 82px 24px 62px; text-align: center; border-bottom: 3px solid var(--accent); }
:root > body > header:has(h1)::before { content: "MEAL KITS · TUESDAY-NIGHT TESTED SINCE 2023"; display: block; font-family: var(--fb), sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .30em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
:root > body > header:has(h1) > h1, :root > body > header:has(h1) h1 { max-width: 900px; margin: 0 auto 10px; padding: 0 12px; font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 50px; font-weight: 500; color: var(--bg); line-height: 1.06; letter-spacing: .005em; }
:root > body > header:has(h1) > p, :root > body > header:has(h1) p { max-width: 640px; margin: 0 auto; padding: 0 12px; font-family: var(--fb), system-ui, sans-serif; font-size: 0.94rem; line-height: 1.62; color: var(--bg); opacity: 0.90; }
:root > body > header:has(h1)::after { content: "Timed with an actual stopwatch — one household's Tuesday-night rotation, not a lab test."; display: block; max-width: 560px; margin: 18px auto 0; font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 15px; line-height: 1.5; color: var(--bg); opacity: .82; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.22); }

/* Article slim header bar */
:root > body > header:not(:has(h1)) { background: var(--primary); color: var(--bg); padding: 15px 24px; margin-bottom: 34px; text-align: center; border-bottom: 2px solid var(--accent); }
:root > body > header:not(:has(h1)) a { font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 21px; font-weight: 500; color: var(--bg); text-decoration: none; letter-spacing: .01em; }

/* ============================================================= ARTICLE BASE */
:root main { max-width: 740px; margin: 0 auto; padding: 40px 24px 60px; }
:root main > h1 { font-family: var(--fh), Cambria, serif; font-size: 34px; font-weight: 600; color: var(--primary); line-height: 1.16; margin: 6px 0 10px; letter-spacing: -.01em; }
:root main > time, :root main > span { display: block; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--accent); margin-bottom: 26px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

:root main > article > p { margin-bottom: 1.4em; font-size: 18px; line-height: 1.78; }
:root main > article > p:first-of-type { font-size: 19px; }
:root main > article > p:first-of-type::first-letter { float: left; font-family: var(--fh), Cambria, serif; font-size: 62px; line-height: .82; font-weight: 600; color: var(--moment); margin: 6px 12px 0 0; }
:root main > article > h2 { font-family: var(--fh), Cambria, serif; font-size: 1.5rem; font-weight: 700; color: var(--primary); margin: 2.2em 0 0.5em; padding-bottom: 5px; border-bottom: 1px solid var(--accent); }
:root main > article > h2:not(:first-of-type)::before { content: "✦ ✦ ✦"; display: block; text-align: center; color: var(--accent); font-size: 13px; letter-spacing: .5em; margin: 0 0 1.1em; border: 0; font-weight: 400; opacity: .7; }
:root main > article ul, :root main > article ol { margin: 0 0 16px 24px; }
:root main > article li { margin-bottom: 6px; font-size: 16px; line-height: 1.7; }
:root main > article li strong { color: var(--primary); font-weight: 700; }
:root main > article > p strong { color: var(--primary); font-weight: 700; }

:root main > article > blockquote { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--moment); font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 19px; line-height: 1.55; color: var(--primary); }

/* body links */
:root main > article > p a, :root main > article > p a:visited, :root main > article li a, :root main > article li a:visited { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600; }
:root main > article > p a:hover, :root main > article li a:hover { color: var(--accent); text-decoration-color: var(--primary); }

/* Affiliate CTA — /to/ inline pills + legacy block CTAs. Full element path + attr to beat body-link (RULE J). */
:root main > article > p a[href^="/to/"], :root main > article > ul > li a[href^="/to/"], :root main > article > ol > li a[href^="/to/"] { background: rgba(184,154,111,.18); color: var(--primary); padding: 2px 11px; border-radius: 20px; text-decoration: none; font-weight: 700; border: 1px solid rgba(184,154,111,.55); box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .12s ease, color .12s ease; }
:root main > article > p a[href^="/to/"]:hover, :root main > article > ul > li a[href^="/to/"]:hover, :root main > article > ol > li a[href^="/to/"]:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }

:root main > article > p a[href^="/ref/"], :root main > article > p a[href^="/try/"], :root main > article > p a[href^="/check/"], :root main > article > p a[href^="/partner/"], :root main > article > p a[href^="/go/"], :root main > article > p a[href^="/out/"] { background: var(--accent); color: var(--paper); padding: 3px 12px; border-radius: var(--r); text-decoration: none; font-weight: 600; font-family: var(--fh), Cambria, serif; font-size: 14px; letter-spacing: .02em; }
:root main > article > p a[href^="/ref/"]:hover, :root main > article > p a[href^="/try/"]:hover, :root main > article > p a[href^="/check/"]:hover, :root main > article > p a[href^="/partner/"]:hover, :root main > article > p a[href^="/go/"]:hover, :root main > article > p a[href^="/out/"]:hover { background: var(--primary); color: var(--paper); }

:root main > article > img, :root main > article > figure { margin: 0 0 1.8rem; }
:root main > article > img, :root main > article > figure > img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 3px 14px rgba(15, 24, 32, .12); }

:root main > article > table, :root main > article table { width: 100%; border-collapse: collapse; margin: 22px 0; font-family: var(--fb), system-ui, sans-serif; font-size: 14px; background: #FFFCEC; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
:root main > article table th { background: var(--primary); color: var(--bg); padding: 9px 13px; text-align: left; font-family: var(--fh), Cambria, serif; font-weight: 600; font-size: 13px; letter-spacing: .02em; }
:root main > article table td { padding: 8px 13px; border-bottom: 1px solid var(--border); vertical-align: top; font-variant-numeric: tabular-nums; }
:root main > article table tr:nth-child(even) td { background: rgba(0,0,0,0.03); }

/* ============================================================= HOMEPAGE GRID */
/* homepage = main WITHOUT an <article> child. Flat card siblings reflowed via order-hack. */
:root main:not(:has(> article)) { max-width: 1180px; padding: 60px 32px 96px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px 30px; align-items: stretch; }

/* -- section label: EDITOR'S PICKS (main::before, full-row grid item) */
:root main:not(:has(> article))::before { content: "EDITOR'S PICKS — START HERE"; order: 2; grid-column: 1 / -1; font-family: var(--fb), sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--primary); padding: 0 0 12px; margin: 26px 0 -6px; border-bottom: 2px solid var(--moment); }

/* -- Strip 1: CONTINUE BELOW (main::after, hero photo band) */
:root main:not(:has(> article))::after { content: "CONTINUE BELOW"; order: 4; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 200px; margin: 28px 0; border-radius: 8px; background: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)), url("/theme-assets/hero-photo.jpg") center 30%/cover no-repeat, var(--primary); color: #fff; font-family: var(--fb), sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 1px 5px rgba(0,0,0,.5); }

/* -- HERO (first card, full-width, 2-col with byline rail) */
:root main:not(:has(> article)) > div:nth-of-type(1) { order: 1; grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: 1.75fr 1fr; gap: 0 44px; align-items: start; padding: 46px 52px; background: var(--paper); border: 1px solid rgba(0,0,0,.08); border-radius: 10px; box-shadow: 0 2px 10px rgba(15,24,32,.06); }
:root main:not(:has(> article)) > div:nth-of-type(1) > p:first-child { grid-column: 1; font-family: var(--fb), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
:root main:not(:has(> article)) > div:nth-of-type(1) > p:first-child::before { content: "Latest review — "; color: var(--moment); }
:root main:not(:has(> article)) > div:nth-of-type(1) > h2 { grid-column: 1; margin: 0 0 18px; padding: 0; border: 0; font-family: var(--fh), Cambria, serif; font-size: 46px; font-weight: 600; line-height: 1.08; letter-spacing: -.015em; }
:root main:not(:has(> article)) > div:nth-of-type(1) > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:nth-of-type(1) > h2 a:hover { color: var(--moment); }
:root main:not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2) { grid-column: 1; max-width: 60ch; font-family: var(--fb), sans-serif; font-size: 20px; line-height: 1.5; color: var(--fg); opacity: .9; margin: 0 0 22px; }
:root main:not(:has(> article)) > div:nth-of-type(1) > a:last-child { grid-column: 1; justify-self: start; font-family: var(--fb), sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--primary); padding: 11px 22px; border-radius: 24px; text-decoration: none; }
:root main:not(:has(> article)) > div:nth-of-type(1) > a:last-child:hover { background: var(--moment); }
:root main:not(:has(> article)) > div:nth-of-type(1)::after { content: "BY ERICA BERGSTROM\A ————\A MADISON · WI\A QA ENGINEER,\A TWO PICKY EATERS\A ————\A 6 MIN READ"; grid-column: 2; grid-row: 1 / span 5; white-space: pre-line; align-self: stretch; padding-left: 28px; border-left: 1px solid rgba(0,0,0,.14); font-family: var(--fb), sans-serif; font-size: 12px; line-height: 2.1; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); opacity: .78; }

/* -- EDITOR'S PICKS cards (2,3,4) — span 2 cols each */
:root main:not(:has(> article)) > div:nth-of-type(2), :root main:not(:has(> article)) > div:nth-of-type(3), :root main:not(:has(> article)) > div:nth-of-type(4) { order: 3; grid-column: span 2; display: flex; flex-direction: column; padding: 30px 32px; background: var(--paper); border: 1px solid rgba(0,0,0,.08); border-top: 3px solid var(--accent); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
:root main:not(:has(> article)) > div:nth-of-type(2)::before { content: "N° I"; }
:root main:not(:has(> article)) > div:nth-of-type(3)::before { content: "N° II"; }
:root main:not(:has(> article)) > div:nth-of-type(4)::before { content: "N° III"; }
:root main:not(:has(> article)) > div:nth-of-type(2)::before, :root main:not(:has(> article)) > div:nth-of-type(3)::before, :root main:not(:has(> article)) > div:nth-of-type(4)::before { font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 15px; color: var(--moment); margin-bottom: 8px; }

/* -- JOURNAL cards (5th onward, with a heading) — span 3 cols = 2-up */
:root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2 > a) { order: 5; grid-column: span 3; display: flex; flex-direction: column; padding: 28px 32px; background: var(--paper); border: 1px solid rgba(0,0,0,.08); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }

/* shared card interior (picks + journal) */
:root main:not(:has(> article)) > div:nth-of-type(n+2):has(> h2 > a) > p:first-child { font-family: var(--fb), sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):has(> h2 > a) > h2 { margin: 0 0 10px; padding: 0; border: 0; font-family: var(--fh), Cambria, serif; font-size: 21px; font-weight: 600; line-height: 1.24; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):has(> h2 > a) > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):has(> h2 > a) > h2 a:hover { color: var(--moment); }
:root main:not(:has(> article)) > div:nth-of-type(n+2):has(> h2 > a) > p:nth-of-type(2) { font-family: var(--fb), sans-serif; font-size: 15.5px; line-height: 1.6; color: var(--fg); opacity: .84; margin: 0 0 16px; max-width: 64ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):has(> h2 > a) > a:last-child { margin-top: auto; font-family: var(--fb), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); background: transparent; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; align-self: flex-start; }
:root main:not(:has(> article)) > div:nth-of-type(n+2):has(> h2 > a) > a:last-child:hover { color: var(--moment); border-bottom-color: var(--moment); }

/* -- COMPACT TAIL (the div with no h2) — full width, magazine index, Strip 2 above */
:root main:not(:has(> article)) > div:not(:has(> h2)) { order: 6; grid-column: 1 / -1; columns: 2; column-gap: 52px; overflow: hidden; padding: 0 34px 30px; margin-top: 12px; background: var(--paper); border: 1px solid rgba(0,0,0,.08); border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
:root main:not(:has(> article)) > div:not(:has(> h2))::before { content: "SEE ALL"; column-span: all; display: flex; align-items: center; justify-content: center; min-height: 200px; margin: 0 -34px 26px; background: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)), url("/theme-assets/hero-photo.jpg") center 70%/cover no-repeat, var(--primary); color: #fff; font-family: var(--fb), sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
:root main:not(:has(> article)) > div:not(:has(> h2)) > p { break-inside: avoid; margin: 0; border-bottom: 1px dotted rgba(0,0,0,.14); }
:root main:not(:has(> article)) > div:not(:has(> h2)) > p a { display: block; padding: 11px 0; font-family: var(--fh), Cambria, serif; font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--primary); background: transparent; text-decoration: none; }
:root main:not(:has(> article)) > div:not(:has(> h2)) > p a:hover { color: var(--moment); }

/* ============================================================= FOOTER + NAV */
nav.sc-yvuAku, article + nav { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(0,0,0,0.12); font-size: 0.9rem; }
:root main > article > h3 { font-family: var(--fh), Cambria, serif; font-size: 1.15rem; font-weight: 600; color: var(--primary); margin: 1.6em 0 0.35em; letter-spacing: -0.01em; border-bottom: none; padding-bottom: 0; border-left: 2px solid var(--accent); padding-left: 0.6em; }
div.sc-BUOFBW { display: block; margin-top: 2rem; padding: 14px 18px; background: rgba(0,0,0,0.04); border-left: 3px solid var(--border); border-radius: 0 var(--r) var(--r) 0; font-size: 14px; color: var(--fg); opacity: 0.82; line-height: 1.65; }

:root footer { background: transparent; border-top: 1px solid var(--border); padding: 22px 0 32px; margin-top: 44px; text-align: center; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--fg); opacity: .60; letter-spacing: .03em; }
:root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ============================================================= MOBILE */
@media (max-width: 860px) {
  :root > body > header:has(h1) { padding: 52px 20px 40px; }
  :root > body > header:has(h1) > h1, :root > body > header:has(h1) h1 { font-size: 36px; }
  :root main:not(:has(> article)) { grid-template-columns: 1fr; gap: 26px; padding: 40px 20px 72px; }
  :root main:not(:has(> article)) > div:nth-of-type(1), :root main:not(:has(> article)) > div:nth-of-type(2), :root main:not(:has(> article)) > div:nth-of-type(3), :root main:not(:has(> article)) > div:nth-of-type(4), :root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2 > a) { grid-column: 1 / -1; }
  :root main:not(:has(> article)) > div:nth-of-type(1) { display: block; padding: 32px 26px; }
  :root main:not(:has(> article)) > div:nth-of-type(1) > h2 { font-size: 32px; }
  :root main:not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2) { font-size: 17px; }
  :root main:not(:has(> article)) > div:nth-of-type(1)::after { display: none; }
  :root main:not(:has(> article)) > div:not(:has(> h2)) { columns: 1; }
  :root main > article > p { font-size: 17px; }
}