@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap";*{box-sizing:border-box;margin:0}:root{--page:#f5f1e8;--paper:#fffdf7;--ink:#1f211d;--muted:#737064;--line:#ddd4c4;--accent:#b4512a;--accent-soft:#f1d7c8;--leaf:#55715b;--leaf-soft:#e6efe5;--shadow:0 28px 80px #3a2c1d29}html{background:var(--page)}body{background:linear-gradient(135deg, #b4512a1a, transparent 32%), linear-gradient(180deg, var(--page), #ece3d4);min-width:320px;color:var(--ink);font-family:"Source Serif 4",Georgia,serif}body:before{z-index:-1;content:"";pointer-events:none;background-image:linear-gradient(#1f211d0a 1px,#0000 1px),linear-gradient(90deg,#1f211d0a 1px,#0000 1px);background-size:44px 44px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 78%);mask-image:linear-gradient(#000,#0000 78%)}button,a{font:inherit}.light,.dark{--surface:color-mix(in srgb, var(--paper) 92%, white);--surface-raised:#fbfaf5;--text:var(--ink);--text-muted:var(--muted);--rule:var(--line);--button-bg:var(--ink);--button-text:var(--paper);--chip-bg:#fbf4ea;--warm-chip-bg:#fff7f1;--focus:var(--accent-soft);width:min(100%,1180px);min-height:100vh;color:var(--text);align-content:center;gap:clamp(18px,3vw,30px);margin:0 auto;padding:clamp(26px,5vw,54px) 20px;font-family:"Source Serif 4",Georgia,serif;display:grid;position:relative}.dark{--surface:#26251f;--surface-raised:#302e27;--text:#fff8eb;--text-muted:#c3baa8;--rule:#f5f1e833;--button-bg:#fff8eb;--button-text:#1f211d;--chip-bg:#fff8eb14;--warm-chip-bg:#b4512a2e;--focus:#f1d7c8a6}.light:before,.dark:before{z-index:-1;content:"";pointer-events:none;border:1px solid #b4512a24;border-radius:8px;position:absolute;inset:clamp(18px,3vw,34px)}#parent>h1{width:min(100%,980px);color:var(--text);letter-spacing:0;text-wrap:balance;font-family:Fraunces,Georgia,serif;font-size:clamp(2.8rem,9vw,6.4rem);line-height:.92}#parent>h1:after{content:"";background:linear-gradient(90deg, var(--accent), transparent);opacity:.45;width:min(100%,560px);height:1px;margin-top:clamp(18px,3vw,28px);display:block}.actionButtons{flex-wrap:wrap;align-items:center;gap:10px;width:min(100%,1040px);display:flex}button{border:1px solid var(--button-bg);background:var(--button-bg);min-height:42px;color:var(--button-text);white-space:normal;cursor:pointer;border-radius:999px;justify-content:center;align-items:center;padding:10px 15px;font-size:.95rem;font-weight:700;line-height:1.1;transition:transform .18s,box-shadow .18s,background-color .18s,color .18s,border-color .18s;display:inline-flex;box-shadow:0 12px 28px #1f211d1f}button:hover{transform:translateY(-2px);box-shadow:0 16px 34px #1f211d2e}button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.actionButtons button:not(:first-child){background:var(--surface);color:var(--text);border-color:var(--rule);box-shadow:none}section{background:var(--surface);border:1px solid var(--rule);width:min(100%,1080px);box-shadow:var(--shadow);border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,24px);padding:clamp(18px,3vw,34px);display:grid;position:relative}section:before{content:"";pointer-events:none;border:1px solid #b4512a29;border-radius:6px;position:absolute;inset:14px}.card{border:1px solid var(--rule);background:var(--surface-raised);min-width:0;color:var(--text);border-radius:8px;padding:clamp(18px,3vw,26px);position:relative}.jokeCard,.quoteCard{align-content:start;gap:18px;display:grid;overflow:hidden}.jokeCard:after,.quoteCard:after{color:var(--accent);opacity:.08;pointer-events:none;font-family:Fraunces,Georgia,serif;font-size:5.5rem;line-height:1;position:absolute;bottom:-14px;right:16px}.jokeCard:after{content:"ha"}.quoteCard:after{content:"“"}.jokeHeader,.quoteHeader,.mealSectionHeader{justify-content:space-between;align-items:center;gap:14px;display:flex}.jokeHeader h1,.quoteHeader h1,.mealHeroContent h1{color:var(--text);letter-spacing:0;text-wrap:balance;font-family:Fraunces,Georgia,serif;line-height:.98}.jokeHeader h1,.quoteHeader h1{font-size:clamp(1.65rem,4vw,2.5rem)}.jokeHeader span,.quoteHeader span,.mealEyebrow,.badge,.mealSectionHeader span{border:1px solid var(--rule);background:var(--chip-bg);color:var(--text-muted);white-space:nowrap;border-radius:999px;align-items:center;padding:7px 11px;font-size:.88rem;font-weight:700;line-height:1.1;display:inline-flex}.jokeBody{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px;display:grid}.jokeIcon{border:1px solid var(--accent-soft);background:var(--warm-chip-bg);width:42px;height:42px;color:var(--accent);border-radius:999px;place-items:center;font-family:Fraunces,Georgia,serif;font-size:1.6rem;line-height:1;display:inline-grid}.jokeText,.quoteText{color:var(--text);font-size:clamp(1.08rem,2vw,1.28rem);font-weight:600;line-height:1.58}.quoteBody{padding-left:34px;position:relative}.quoteMark{color:var(--accent);opacity:.22;font-family:Fraunces,Georgia,serif;font-size:4.6rem;line-height:1;position:absolute;top:-21px;left:0}.quoteText{margin:0}.mealCard{background:linear-gradient(90deg, #55715b1a, transparent 62%), var(--surface-raised);grid-column:1/-1;padding:clamp(18px,3vw,28px)}.mealDetails{gap:clamp(18px,3vw,28px);display:grid}.mealHero{grid-template-columns:minmax(260px,42%) minmax(0,1fr);align-items:stretch;gap:clamp(18px,4vw,34px);display:grid}img.thumbnail,.thumbnail img,img.mealImage{aspect-ratio:4/5;object-fit:cover;border:1px solid var(--rule);background:var(--chip-bg);filter:saturate(.94)contrast(1.02);border-radius:6px;width:100%;max-width:none;display:block;box-shadow:0 18px 42px #2d231833}.mealHeroContent{flex-direction:column;justify-content:center;gap:16px;min-width:0;display:flex}.mealEyebrow{border-color:var(--accent-soft);background:var(--warm-chip-bg);width:fit-content;color:var(--accent)}.mealHeroContent h1{font-size:clamp(2.25rem,6vw,4.9rem)}.mealMeta{flex-wrap:wrap;gap:8px;display:flex}.badge:nth-child(2){background:var(--leaf-soft);color:var(--leaf);border-color:#55715b38}.dark .badge:nth-child(2){color:#dce8da;background:#55715b47}.mealSection{border-top:1px solid var(--rule);gap:14px;padding-top:clamp(14px,2vw,20px);display:grid}.mealSectionHeader h3{color:var(--text);font-family:Fraunces,Georgia,serif;font-size:clamp(1.45rem,3vw,2.1rem);line-height:1}.mealSectionHeader span{background:0 0}.ingredientsList{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:0;list-style:none;display:grid}.ingredientsList li{border:1px solid var(--accent-soft);background:var(--warm-chip-bg);min-height:48px;color:var(--accent);border-radius:999px;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;font-size:.95rem;font-weight:700;line-height:1.2;display:flex}.ingredientsList strong{color:var(--text);text-align:right;font-size:.9rem;font-weight:700}.instructionsList{counter-reset:recipe-step;gap:10px;padding-left:0;list-style:none;display:grid}.instructionsList li{background:linear-gradient(90deg, #55715b1f, transparent 64%), color-mix(in srgb, var(--surface) 76%, transparent);color:var(--text);counter-increment:recipe-step;border:1px solid #55715b33;border-radius:8px;padding:12px 14px 12px 52px;font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.65;position:relative}.instructionsList li:before{content:counter(recipe-step);background:var(--leaf);color:#fffdf7;border-radius:999px;place-items:center;width:24px;height:24px;font-size:.85rem;font-weight:700;line-height:1;display:grid;position:absolute;top:12px;left:14px}.youtubeLink{width:fit-content}.mealVideoLink{border:1px solid var(--button-bg);background:var(--button-bg);color:var(--button-text);border-radius:999px;align-items:center;padding:11px 15px;text-decoration:none;transition:transform .18s,box-shadow .18s,background-color .18s;display:inline-flex;box-shadow:0 12px 26px #1f211d2e}.mealVideoLink:hover{background:color-mix(in srgb, var(--button-bg) 88%, var(--accent));transform:translateY(-2px);box-shadow:0 16px 34px #1f211d38}.mealVideoLink strong{letter-spacing:0;font-size:.86rem;font-weight:700}.card>p{color:var(--text-muted);font-size:1.15rem;line-height:1.75}.dark section{box-shadow:0 28px 80px #00000040}@media (width<=820px){.light,.dark{align-content:start}section,.mealHero{grid-template-columns:1fr}img.thumbnail,.thumbnail img,img.mealImage{aspect-ratio:16/11}}@media (width<=520px){.light,.dark{padding:22px 14px}section,.card{padding:16px}.jokeHeader,.quoteHeader,.mealSectionHeader{flex-direction:column;align-items:flex-start}.actionButtons button{width:100%}.jokeBody{grid-template-columns:1fr}.jokeHeader span,.quoteHeader span,.mealEyebrow,.badge,.mealSectionHeader span,.ingredientsList li{white-space:normal;max-width:100%}}
