:root{
  --cream:#fff8ec;--ink:#3a2c28;--wood:#6b4423;--wood-dark:#4a2f18;
  --sun:#f4b41a;--sun-dark:#d9930d;--leaf:#4f6b2f;--teal:#2fa4a9;--plum:#7a4fb5;--red:#b8302a;
  --card:#fff;--muted:#7a6a62;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Georgia,'Times New Roman',serif;color:var(--ink);line-height:1.65;
  background-color:var(--cream);
  background-image:
    linear-gradient(90deg,rgba(184,48,42,.05) 50%,transparent 50%),
    linear-gradient(rgba(184,48,42,.05) 50%,transparent 50%);
  background-size:48px 48px}
h1,h2,h3{font-family:'Brush Script MT','Segoe Script','Lucida Handwriting',cursive;font-weight:700;color:var(--wood-dark);line-height:1.2}

/* header */
header{position:sticky;top:0;z-index:10;background:var(--cream);border-bottom:6px solid var(--wood);
  box-shadow:0 3px 0 var(--sun),0 6px 14px rgba(0,0,0,.15);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem 1.25rem}
.logo{display:flex;align-items:center}
.logo img{height:84px;width:auto;display:block}
nav{display:flex;flex-wrap:wrap;gap:.35rem}
nav a{color:var(--wood-dark);text-decoration:none;font-weight:bold;padding:.45rem 1rem;border-radius:999px;transition:.15s}
nav a:hover{background:var(--sun);color:var(--wood-dark)}
nav a.active{background:var(--wood);color:#fff}

/* hero */
.hero{text-align:center;padding:2.5rem 1rem 3rem;
  background:
    radial-gradient(circle at 15% 20%,rgba(244,180,26,.25),transparent 40%),
    radial-gradient(circle at 85% 80%,rgba(47,164,169,.18),transparent 40%)}
.hero img{width:100%;max-width:1100px;height:auto;filter:drop-shadow(0 10px 18px rgba(74,47,24,.35))}
.hero h2{font-size:clamp(1.8rem,4vw,2.8rem);margin:1rem 0 .3rem}
.hero p{max-width:640px;margin:.3rem auto;font-size:1.1rem}
.btns{margin-top:1.2rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.75rem 1.6rem;border-radius:999px;text-decoration:none;font-weight:bold;
  background:var(--sun);color:var(--wood-dark);border:3px solid var(--wood);box-shadow:0 4px 0 var(--wood);transition:.12s}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--wood)}
.btn.alt{background:var(--teal);color:#fff}

/* layout */
main{max-width:1050px;margin:0 auto;padding:2rem 1.25rem 3rem}
h2.section{font-size:2.2rem;text-align:center;margin:2rem 0 1.2rem}
h2.section::before,h2.section::after{content:"🌻";margin:0 .6rem;font-size:1.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem}
.card{background:var(--card);border:3px solid var(--wood);border-radius:16px;padding:1.3rem;
  box-shadow:0 5px 0 var(--wood),0 10px 18px rgba(0,0,0,.12);transition:.15s}
.card:hover{transform:translateY(-3px)}
.card .emoji{font-size:2.8rem}
.card h3{margin:.3rem 0;font-size:1.6rem}
.card a{color:var(--red);font-weight:bold}
.tag{display:inline-block;background:var(--sun);color:var(--wood-dark);border-radius:999px;padding:0 .75rem;font-size:.8rem;font-weight:bold;margin-right:.3rem}
.tag.b{background:var(--teal);color:#fff}.tag.p{background:var(--plum);color:#fff}
details{margin-top:.7rem}
summary{cursor:pointer;color:var(--red);font-weight:bold}
.filters{margin:1rem 0;text-align:center}
.filters button{font:inherit;font-weight:bold;border:3px solid var(--wood);background:#fff;color:var(--wood-dark);padding:.4rem 1.1rem;border-radius:999px;cursor:pointer;margin:0 .2rem .4rem}
.filters button.on,.filters button:hover{background:var(--sun)}
.page-title{text-align:center;font-size:2.8rem;margin:.5rem 0}
.lead{text-align:center;max-width:640px;margin:0 auto 1rem}
.panel{background:#fff;border:3px solid var(--wood);border-radius:16px;padding:1.5rem;box-shadow:0 5px 0 var(--wood)}

footer{text-align:center;padding:1.8rem 1rem;background:var(--wood-dark);color:#f3e4cc;border-top:6px solid var(--sun)}
footer span{color:var(--sun)}
@media(max-width:600px){.logo img{height:64px}header{justify-content:center}}

/* contact form */
.contact{display:grid;gap:.5rem}
.contact label{font-weight:bold}
.contact input,.contact textarea{font:inherit;padding:.6rem .8rem;border:3px solid var(--wood);border-radius:12px;width:100%;box-sizing:border-box}
.contact .btn{justify-self:start;margin-top:.6rem;font:inherit;font-weight:bold;cursor:pointer}
.sent{text-align:center;font-weight:bold;color:var(--teal)}