:root{
    --milk:#FFF8EC;     /* background */
    --cocoa:#2C1B12;    /* text / dark */
    --cookie:#7A4A28;   /* brand brown */
    --jam:#E0466B;      /* accent pop (the "leak") */
    --jam-dark:#C5345A;
    --crumb:#EADBC4;    /* borders / dividers */
    --card:#FFFFFF;
    --muted:#8A7763;
    --radius:16px;
    --shadow:0 10px 30px -18px rgba(44,27,18,.45);
}

*,*::before,*::after{box-sizing:border-box;}
body{
    margin:0;
    font-family:"Space Grotesk",system-ui,sans-serif;
    color:var(--cocoa);
    background:var(--milk);
    line-height:1.55;
}
img{max-width:100%;display:block;}
a{color:var(--jam);text-decoration:none;}
a:hover{color:var(--jam-dark);}

.container{max-width:1000px;margin:0 auto;padding:0 24px;}

/* ---- nav ---- */
.nav{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    max-width:1000px;margin:0 auto;padding:18px 24px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--cocoa);}
.brand-logo{width:38px;height:38px;}
.brand-name{font-family:"Baloo 2",cursive;font-weight:700;font-size:1.4rem;}
.nav-links{display:flex;align-items:center;gap:20px;}
.nav-links a{color:var(--cocoa);font-weight:500;}
.nav-links a:hover{color:var(--jam);}

/* ---- buttons ---- */
.btn{
    display:inline-block;background:var(--jam);color:#fff;font-weight:600;
    font-family:inherit;font-size:1rem;border:none;cursor:pointer;
    padding:12px 22px;border-radius:999px;
    transition:transform .12s ease,background .15s ease;
}
.btn:hover{background:var(--jam-dark);color:#fff;transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-sm{padding:8px 16px;font-size:.95rem;}
.btn-block{width:100%;}
.btn-outline{background:transparent;color:var(--cocoa);box-shadow:inset 0 0 0 2px var(--crumb);}
.btn-outline:hover{background:#fff;color:var(--cocoa);box-shadow:inset 0 0 0 2px var(--cookie);}

/* ---- hero ---- */
.hero{padding:64px 0 36px;text-align:center;max-width:720px;margin:0 auto;}
.eyebrow{
    font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--cookie);font-weight:600;margin:0 0 14px;
}
.hero-title{
    font-family:"Baloo 2",cursive;font-weight:700;line-height:1.05;
    font-size:clamp(2.4rem,6vw,4rem);margin:0 0 18px;
}
.hero-sub{font-size:1.15rem;color:var(--muted);margin:0 auto 28px;max-width:520px;}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---- drip signature ---- */
.drip{margin:32px 0 8px;}
.drip-band{height:14px;background:var(--jam);border-radius:7px 7px 0 0;}
.drip-row{display:flex;justify-content:space-around;padding:0 6%;margin-top:-1px;}
.drip-row span{width:16px;height:18px;background:var(--jam);border-radius:0 0 50% 50%;}
.drip-row span:nth-child(2n){height:28px;width:18px;}
.drip-row span:nth-child(3n){height:11px;}

/* ---- sections ---- */
.section-title{
    font-family:"Baloo 2",cursive;font-weight:600;font-size:1.8rem;
    margin:8px 0 24px;
}
.menu{padding:24px 0 8px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* ---- cards ---- */
.card{
    background:var(--card);border:1px solid var(--crumb);border-radius:var(--radius);
    padding:24px;box-shadow:var(--shadow);
}
.card-title{font-family:"Baloo 2",cursive;font-weight:600;font-size:1.3rem;margin:0 0 16px;}
.cookie-card{text-align:center;}
.cookie{
    width:68px;height:68px;border-radius:50%;margin:4px auto 14px;
    background:
        radial-gradient(circle at 32% 34%, var(--cocoa) 0 4px, transparent 5px),
        radial-gradient(circle at 66% 30%, var(--cocoa) 0 3px, transparent 4px),
        radial-gradient(circle at 50% 58%, var(--cocoa) 0 4px, transparent 5px),
        radial-gradient(circle at 72% 66%, var(--cocoa) 0 3px, transparent 4px),
        radial-gradient(circle at 34% 70%, var(--cocoa) 0 3px, transparent 4px),
        var(--cookie);
}
.cookie-card h3{font-family:"Baloo 2",cursive;font-weight:600;margin:0 0 6px;font-size:1.15rem;}
.cookie-card p{color:var(--muted);font-size:.95rem;margin:0 0 12px;}
.price{font-weight:600;color:var(--cookie);}

/* ---- forms ---- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:6px;}
.field input{
    width:100%;font-family:inherit;font-size:1rem;color:var(--cocoa);
    padding:12px 14px;border:1px solid var(--crumb);border-radius:12px;background:#fff;
    transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus{
    outline:none;border-color:var(--jam);box-shadow:0 0 0 3px rgba(224,70,107,.18);
}

/* ---- auth ---- */
.auth{display:flex;justify-content:center;padding:48px 0;}
.auth-card{width:100%;max-width:380px;}
.auth-title{font-family:"Baloo 2",cursive;font-weight:700;font-size:1.7rem;margin:0 0 4px;}
.auth-sub{color:var(--muted);margin:0 0 22px;}
.auth-note{text-align:center;color:var(--muted);font-size:.85rem;margin:16px 0 0;}

/* ---- account ---- */
.account{padding:40px 0;}
.profile-card{margin-bottom:20px;}
.kv{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--crumb);padding:8px 0;margin:0;}
.kv:last-child{border-bottom:none;}
.kv span{color:var(--muted);}
.form-error{
    background:#fff;border:1px solid var(--jam);color:var(--jam-dark);
    border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:.92rem;font-weight:500;
}
.flag{
    font-family:ui-monospace,Menlo,Consolas,monospace;
    background:var(--cocoa);color:var(--milk);
    padding:14px 18px;border-radius:12px;display:inline-block;
    font-size:1.05rem;letter-spacing:.5px;margin-top:8px;
}

.notice{
    background:#fff;border:1px solid var(--jam);color:var(--jam-dark);
    border-radius:12px;padding:12px 16px;margin-bottom:20px;font-weight:500;
}

/* ---- footer ---- */
.footer{
    max-width:1000px;margin:48px auto 0;padding:24px;border-top:1px solid var(--crumb);
    color:var(--muted);font-size:.9rem;text-align:center;
}

/* ---- accessibility ---- */
a:focus-visible,.btn:focus-visible,input:focus-visible{
    outline:3px solid var(--cocoa);outline-offset:2px;
}

/* ---- responsive ---- */
@media (max-width:760px){
    .grid{grid-template-columns:1fr;}
    .grid-2{grid-template-columns:1fr;}
    .hero{padding:44px 0 24px;}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
}

/* --- recipes + reviews (added for Leaky Jar) ------------------------------ */
.recipe-card { display:block; text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .12s ease; }
.recipe-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(90,55,30,.12); }
.recipe-meta { font-size:.85rem; color:var(--muted); margin:0; font-weight:600; }
.recipe-list { margin:0; padding-left:1.2rem; line-height:1.8; color:var(--cocoa); }
.recipe-list li { margin-bottom:.2rem; }

.review { padding:14px 0; border-bottom:1px solid rgba(120,80,50,.12); }
.review:last-child { border-bottom:none; }
.review-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:4px; }
.review-name { font-weight:700; color:var(--cocoa); }
.review-stars { color:#e8a23d; letter-spacing:1px; white-space:nowrap; }
.review-text { margin:0; color:var(--ink); }

/* --- homepage call-to-action --------------------------------------------- */
.cta { margin: 52px 0 24px; }
.cta-card { text-align:center; padding:44px 28px; }
.cta-title { font-family:'Baloo 2', system-ui, sans-serif; font-size:1.6rem; color:var(--cocoa); margin:0 0 10px; }

/* --- recipe search bar ---------------------------------------------------- */
.search { display:flex; gap:10px; margin:4px 0 18px; max-width:560px; }
.search input { flex:1; padding:12px 14px; border:1px solid rgba(120,80,50,.25); border-radius:12px; font-family:inherit; font-size:1rem; background:#fff; color:var(--ink); }
.search input:focus { outline:none; border-color:#c98a6a; box-shadow:0 0 0 3px rgba(201,138,106,.15); }
.search .btn { white-space:nowrap; }

/* fake "firewall" warning on the search (red herring) */
.search-blocked { border-left:4px solid #d9544f; background:#fff4f3; }

/* master baker badge on the bakers directory */
.master-badge { display:inline-block; font-family:'Space Grotesk', sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.3px; color:#fff; background:var(--jam, #d2598b); padding:3px 9px; border-radius:999px; vertical-align:middle; margin-left:6px; }