:root{
  --lime:#7cc242; --lime-dark:#4f8a1f; --lime-pale:#eef8dc;
  --agave:#2f7f7a; --agave-dark:#1d4f4c; --agave-pale:#e3f1ef;
  --sand:#f6eedd; --sand-dark:#e7d8b8; --ink:#1f2a2a; --muted:#5b6b6a; --white:#fff;
  --radius:14px; --shadow:0 6px 20px rgba(29,79,76,.12);
  --font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--sand);line-height:1.6;font-size:17px}
img,svg{max-width:100%}
a{color:var(--agave)}
a:hover{color:var(--agave-dark)}
h1,h2,h3{font-family:var(--font-head);line-height:1.15;color:var(--agave-dark);margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.2rem)}
h3{font-size:1.25rem}
.container{width:min(1100px,92%);margin:0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:10}

/* header */
.site-header{background:var(--agave-dark);color:#fff;position:sticky;top:0;z-index:5}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-family:var(--font-head);font-size:1.35rem;font-weight:700}
.brand:hover{color:var(--lime-pale)}
.brand svg{width:36px;height:36px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.3rem;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;padding:.4rem .8rem;border-radius:999px;font-weight:500;font-size:.95rem}
.nav a:hover,.nav a[aria-current="page"]{background:var(--lime);color:var(--agave-dark)}

/* hero */
.hero{background:radial-gradient(circle at 85% 20%,rgba(124,194,66,.35),transparent 45%),linear-gradient(135deg,var(--agave) 0%,var(--agave-dark) 100%);color:#fff;padding:5rem 0 4.5rem}
.hero .container{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center}
.hero h1{color:#fff}
.hero .tagline{font-size:1.3rem;color:var(--lime-pale);margin:0 0 1.5rem}
.hero-art{display:flex;justify-content:center}
.hero-art svg{width:min(320px,100%);filter:drop-shadow(0 10px 25px rgba(0,0,0,.25))}
.page-hero{background:linear-gradient(135deg,var(--agave) 0%,var(--agave-dark) 100%);color:#fff;padding:3.2rem 0 2.8rem}
.page-hero h1{color:#fff;font-size:clamp(2rem,5vw,3rem)}
.page-hero p{color:var(--lime-pale);margin:0;font-size:1.15rem}

.btn{display:inline-block;background:var(--lime);color:var(--agave-dark);text-decoration:none;font-weight:700;padding:.75rem 1.4rem;border-radius:999px;margin:.25rem .5rem .25rem 0;transition:transform .15s}
.btn:hover{transform:translateY(-2px);color:var(--agave-dark)}
.btn.ghost{background:transparent;color:#fff;border:2px solid var(--lime-pale)}
.btn.ghost:hover{color:#fff}

section{padding:3.5rem 0}
.section-alt{background:var(--white)}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}

.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;border-top:5px solid var(--lime)}
.section-alt .card{background:var(--sand)}
.card .meta{font-size:.85rem;color:var(--muted);margin:0 0 .6rem}
.card p:last-child{margin-bottom:0}
.tag{display:inline-block;background:var(--agave-pale);color:var(--agave-dark);font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;margin-right:.3rem}

.rating{color:var(--lime-dark);font-size:1.2rem;letter-spacing:.1em}
.rating .off{color:var(--sand-dark)}

/* recipes */
.recipe{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;margin-bottom:2rem;display:grid;grid-template-columns:1fr 1.3fr;gap:2rem;border-left:6px solid var(--lime)}
.recipe ul,.recipe ol{padding-left:1.2rem;margin:.3rem 0 1rem}
.recipe li{margin-bottom:.3rem}
.recipe .note{background:var(--lime-pale);border-radius:10px;padding:.8rem 1rem;font-size:.95rem}

/* review template */
dl.specs{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;margin:0 0 1rem;font-size:.95rem}
dl.specs dt{font-weight:700;color:var(--agave-dark)}
dl.specs dd{margin:0}
.scale{list-style:none;padding:0;margin:0}
.scale li{padding:.4rem 0;border-bottom:1px dashed var(--sand-dark)}

.notice{background:var(--agave-pale);border-left:5px solid var(--agave);padding:1rem 1.2rem;border-radius:10px;margin:1.5rem 0}

/* footer */
.site-footer{background:var(--agave-dark);color:var(--agave-pale);padding:2.5rem 0;font-size:.92rem}
.site-footer .container{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.site-footer a{color:var(--lime)}
.responsible{font-weight:600;color:#fff}

@media (max-width:760px){
  body{font-size:16px}
  .hero{padding:3rem 0}
  .hero .container,.recipe{grid-template-columns:1fr}
  .hero-art{order:-1}
  .hero-art svg{width:180px}
  .site-header .container{justify-content:center}
  .recipe{padding:1.4rem}
}

/* split + legend one-liners */
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;align-items:start}
.split .lead p{margin-top:0}
.quotes{border-top-color:var(--agave)}
.legend{list-style:none;padding:0;margin:0}
.legend li{position:relative;padding:.55rem 0 .55rem 1.6rem;border-bottom:1px dashed var(--sand-dark);font-style:italic}
.legend li:last-child{border-bottom:0}
.legend li::before{content:"🍋";position:absolute;left:0;font-style:normal;font-size:.95rem}
@media (max-width:760px){.split{grid-template-columns:1fr}}

/* life on the water */
.water{background:linear-gradient(180deg,var(--agave-pale) 0%,#d3ebe8 100%)}
.water .card{border-top-color:var(--agave)}
.fine{font-size:.9rem;color:var(--muted);margin-top:1.5rem;font-style:italic}
.water .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* photo hero */
.hero.photo{
  background:
    linear-gradient(90deg,rgba(18,52,50,.85) 0%,rgba(29,79,76,.55) 45%,rgba(29,79,76,.10) 100%),
    url("/img/hero.jpg") center 60%/cover no-repeat;
  padding:6.5rem 0 6rem;
}
.hero.photo h1,.hero.photo .tagline,.hero.photo p{text-shadow:0 2px 12px rgba(0,0,0,.35)}
@media (max-width:760px){
  .hero.photo{background:linear-gradient(180deg,rgba(18,52,50,.55),rgba(18,52,50,.80)),url("/img/hero.jpg") center/cover no-repeat}
}
.photo-credit{font-size:.8rem;opacity:.8}

.grid.four{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card ul{padding-left:1.1rem;margin:.4rem 0 0}
.card ul li{margin-bottom:.35rem}
.voice{margin:0 0 1rem;padding:1.2rem 1.4rem;background:var(--lime-pale);border-left:5px solid var(--lime);border-radius:10px;font-size:1.05rem}
.voice p{margin:.4rem 0}