@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root { --ink:#27231f; --cream:#fbf7ef; --paper:#fffdf9; --coral:#f1643c; --green:#426a4e; --line:#ded7ca; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; border-bottom:1px solid var(--line); background:rgba(255,253,249,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:10px; font-family:'Fraunces',Georgia,serif; font-size:22px; font-weight:700; }
.brand-mark { width:37px; height:37px; display:grid; place-items:center; color:white; background:var(--coral); border-radius:50% 50% 45% 55%; transform:rotate(-5deg); }
.brand-mark::first-letter { transform:rotate(5deg); }
nav { display:flex; gap:32px; font-size:14px; font-weight:600; }
nav a:hover { color:var(--coral); }
.save-button { padding:11px 18px; border:1px solid var(--ink); border-radius:999px; font-size:13px; font-weight:700; }
.hero { min-height:650px; padding:70px 7vw; background:var(--cream); display:grid; grid-template-columns:1.02fr .98fr; gap:7vw; align-items:center; overflow:hidden; }
.eyebrow { color:var(--coral); font-size:12px; letter-spacing:.16em; font-weight:800; margin:0 0 16px; }
h1,h2,h3 { font-family:'Fraunces',Georgia,serif; margin:0; }
h1 { font-size:clamp(64px,8vw,112px); line-height:.84; letter-spacing:-.055em; }
h1 em { color:var(--coral); font-style:italic; }
.hero-text { font-size:18px; line-height:1.6; max-width:570px; margin:30px 0; color:#625b52; }
.search { display:flex; max-width:580px; background:white; border:1px solid var(--line); border-radius:15px; padding:7px; box-shadow:0 12px 30px rgba(61,45,30,.08); }
.search input { border:0; outline:0; flex:1; min-width:0; padding:11px 14px; background:transparent; }
.search button { border:0; color:white; background:var(--coral); padding:12px 22px; border-radius:10px; font-weight:700; cursor:pointer; }
.quick-links { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:15px; color:#857d73; font-size:12px; }
.quick-links button { border:0; background:transparent; padding:0; color:#5a5148; text-decoration:underline; cursor:pointer; }
.hero-visual { min-height:500px; position:relative; display:grid; place-items:center; }
.hero-visual::before { content:''; position:absolute; width:500px; height:500px; border-radius:42% 58% 57% 43%; background:#eddcbf; transform:rotate(9deg); }
.plate { position:relative; z-index:1; width:min(430px,85vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#fff 0 44%,#eee8df 45% 54%,white 55%); box-shadow:0 28px 50px rgba(69,49,30,.18); display:grid; place-items:center; transform:rotate(-4deg); }
.plate span,.recipe-image span { text-transform:uppercase; letter-spacing:.14em; color:#9c9183; font-size:11px; text-align:center; }
.today-card { position:absolute; z-index:2; left:-20px; bottom:18px; width:240px; padding:18px; background:white; box-shadow:0 16px 35px rgba(55,41,29,.16); border-left:4px solid var(--coral); transform:rotate(2deg); }
.today-card span { display:block; color:var(--coral); font-size:10px; font-weight:800; letter-spacing:.12em; }
.today-card strong { display:block; font-family:'Fraunces',Georgia,serif; font-size:18px; margin:7px 0; }
.today-card small { color:#7b7369; }
.ad-slot { min-height:90px; margin:35px auto; width:min(1100px,90%); border:1px dashed #cfc6b9; display:grid; place-items:center; color:#9d9489; text-transform:uppercase; letter-spacing:.12em; font-size:10px; }
.recipes-section { padding:75px 7vw 95px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:36px; }
h2 { font-size:clamp(38px,5vw,62px); line-height:1; letter-spacing:-.035em; }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filters button { padding:9px 15px; border:1px solid var(--line); border-radius:999px; background:white; cursor:pointer; font-size:13px; }
.filters button.active,.filters button:hover { color:white; background:var(--ink); border-color:var(--ink); }
.recipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.recipe-card { background:white; border:1px solid var(--line); transition:.25s ease; cursor:pointer; }
.recipe-card:focus-visible { outline:3px solid rgba(241,100,60,.35); outline-offset:3px; }
.recipe-detail { padding:60px 7vw 100px; }
.recipe-detail-header { display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:center; margin-bottom:55px; }
.recipe-detail-photo { min-height:470px; background:#f1c0a9; display:grid; place-items:center; overflow:hidden; }
.recipe-detail-photo img { width:100%; height:100%; min-height:470px; object-fit:cover; }
.recipe-detail-copy h1 { font-size:clamp(52px,7vw,90px); line-height:.92; }
.recipe-detail-copy>p:not(.eyebrow) { color:#675f56; line-height:1.65; font-size:17px; }
.recipe-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.recipe-facts span { padding:9px 13px; background:var(--cream); border:1px solid var(--line); font-size:12px; }
.recipe-columns { display:grid; grid-template-columns:.72fr 1.28fr; gap:60px; }
.recipe-columns h2 { font-size:38px; margin-bottom:24px; }
.ingredient-list,.step-list { padding:0; margin:0; list-style:none; display:grid; gap:13px; }
.ingredient-list li { padding-bottom:13px; border-bottom:1px solid var(--line); }
.step-list { counter-reset:steps; }
.step-list li { counter-increment:steps; display:grid; grid-template-columns:42px 1fr; gap:16px; line-height:1.65; }
.step-list li::before { content:counter(steps); width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--coral); font-weight:700; }
.recipe-card:hover { transform:translateY(-5px); box-shadow:0 18px 35px rgba(51,40,29,.09); }
.recipe-card[hidden] { display:none; }
.recipe-image { height:250px; position:relative; display:grid; place-items:center; overflow:hidden; }
.recipe-image img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:1; }
.recipe-image::before,.recipe-image::after { content:''; position:absolute; border-radius:50%; opacity:.55; }
.recipe-image::before { width:190px; height:190px; background:white; }
.recipe-image::after { width:110px; height:110px; border:18px solid rgba(255,255,255,.45); }
.recipe-image span { position:relative; z-index:2; color:rgba(39,35,31,.55); }
.recipe-image b { position:absolute; z-index:3; top:15px; left:15px; background:var(--coral); color:white; padding:7px 10px; font-size:10px; letter-spacing:.12em; }
.coral { background:#f1c0a9; }.cocoa { background:#cbb39c; }.green { background:#b9cfad; }
.recipe-body { padding:24px; }
.category { color:var(--coral); font-size:10px; font-weight:800; letter-spacing:.14em; }
.recipe-body h3 { font-size:25px; line-height:1.12; }
.recipe-body>p:not(.category) { color:#6e665d; line-height:1.55; min-height:49px; font-size:14px; }
.meta { display:flex; gap:16px; padding-top:15px; border-top:1px solid #ece6dd; color:#756d64; font-size:12px; }
.empty-state { text-align:center; padding:45px; color:#777; }
.ad-slot-wide { margin-top:0; }
.comments-section { padding:75px 7vw 95px; background:var(--cream); }
.comments-intro { max-width:760px; margin-bottom:40px; }
.comments-intro>p:last-child { color:#6e665d; font-size:16px; line-height:1.6; }
.comments-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:55px; align-items:start; }
.comment-list { display:grid; gap:14px; }
.comment { display:grid; grid-template-columns:46px 1fr; gap:15px; background:white; border:1px solid var(--line); padding:22px; }
.comment-avatar { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--coral); font-family:'Fraunces',Georgia,serif; font-weight:700; }
.green-avatar { background:var(--green); }
.comment-heading { display:flex; justify-content:space-between; gap:20px; }
.comment-heading time { color:#938a7f; font-size:11px; }
.comment p { margin:8px 0 0; color:#625b52; line-height:1.55; font-size:14px; }
.comment-form { display:grid; gap:9px; padding:28px; color:var(--ink); background:white; border-top:4px solid var(--coral); box-shadow:0 16px 35px rgba(55,41,29,.09); }
.comment-form h3 { font-size:27px; margin-bottom:8px; }
.comment-form label { font-size:12px; font-weight:700; }
.comment-form input,.comment-form textarea { width:100%; border:1px solid var(--line); border-radius:8px; background:#fffdfa; padding:12px; outline:none; resize:vertical; }
.comment-form input:focus,.comment-form textarea:focus { border-color:var(--coral); box-shadow:0 0 0 3px rgba(241,100,60,.12); }
.comment-form button { margin-top:8px; padding:13px 18px; border:0; border-radius:8px; color:white; background:var(--coral); font-weight:700; cursor:pointer; }
.comment-form button:hover { background:#d9522e; }
.comment-form small { color:#8a8177; line-height:1.4; }
.newsletter { margin:0 7vw 90px; padding:55px 6vw; color:white; background:var(--green); display:flex; align-items:center; justify-content:space-between; gap:35px; }
.newsletter .eyebrow { color:#f1be95; }.newsletter h2 { max-width:700px; font-size:clamp(34px,4vw,54px); }.newsletter p:not(.eyebrow) { color:#dbe5dc; }
.newsletter-placeholder { padding:15px 20px; border:1px solid rgba(255,255,255,.4); white-space:nowrap; font-size:13px; }
footer { padding:45px 7vw; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr auto; gap:25px; align-items:center; }
footer p,footer small { color:#81786e; font-size:13px; }.footer-brand { grid-row:span 2; } footer div { display:flex; gap:18px; font-size:12px; } footer small { text-align:right; }
@media (max-width:850px) { nav { display:none; }.hero { grid-template-columns:1fr; padding-top:55px; }.hero-visual { min-height:440px; }.today-card { left:0; }.recipe-grid { grid-template-columns:1fr 1fr; }.section-heading { align-items:start; flex-direction:column; }.recipe-detail-header,.recipe-columns,.comments-layout { grid-template-columns:1fr; }.newsletter { align-items:start; flex-direction:column; } }
@media (max-width:560px) { .site-header { padding:0 20px; }.save-button { display:none; }.hero { padding:48px 22px; }.hero-text { font-size:16px; }.hero-visual::before { width:340px; height:340px; }.hero-visual { min-height:370px; }.plate { width:310px; }.today-card { bottom:0; width:215px; }.search button { padding:11px 14px; }.recipes-section,.comments-section { padding:60px 20px; }.recipe-grid { grid-template-columns:1fr; }.comment { grid-template-columns:38px 1fr; padding:18px; }.comment-avatar { width:38px; height:38px; }.newsletter { margin:0 20px 60px; padding:38px 28px; } footer { grid-template-columns:1fr; padding:35px 20px; } .footer-brand { grid-row:auto; } footer small { text-align:left; } }