/* Nyumbani Vibes Foods — shared stylesheet
   Brand: brown #3B2716 · ivory #F6F0E2 · green #1C6B3A · red #C81D25 · gold #C9A860
   Type:  Playfair Display (display) · Montserrat (body, labels) */

:root{
  --ground:#F6F0E2; --ground-2:#EFE6D2; --panel:#FFFCF4;
  --ink:#3B2716; --ink-2:#5B442C; --muted:#8A7757; --line:#E0D4B9;
  --gold:#A8842F; --gold-soft:#EEE2C2; --green:#1C6B3A; --green-wash:#E6EFE4;
  --red:#C81D25; --on-green:#FFFFFF;
  --shadow-s:0 1px 2px rgba(59,39,22,.06);
  --shadow-l:0 2px 4px rgba(59,39,22,.05), 0 26px 50px -32px rgba(59,39,22,.55);
  --maxw:1160px; --read:min(100%,68ch);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#17110B; --ground-2:#1F1710; --panel:#231A11;
    --ink:#F6F0E2; --ink-2:#E6DAC2; --muted:#AC9979; --line:#352818;
    --gold:#D6B266; --gold-soft:#3A2C14; --green:#62BC86; --green-wash:#152219;
    --red:#F0787E; --on-green:#08160E;
    --shadow-s:0 1px 2px rgba(0,0,0,.5);
    --shadow-l:0 2px 4px rgba(0,0,0,.5), 0 26px 54px -32px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --ground:#17110B; --ground-2:#1F1710; --panel:#231A11;
  --ink:#F6F0E2; --ink-2:#E6DAC2; --muted:#AC9979; --line:#352818;
  --gold:#D6B266; --gold-soft:#3A2C14; --green:#62BC86; --green-wash:#152219;
  --red:#F0787E; --on-green:#08160E;
  --shadow-s:0 1px 2px rgba(0,0,0,.5);
  --shadow-l:0 2px 4px rgba(0,0,0,.5), 0 26px 54px -32px rgba(0,0,0,.95);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1.15em}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-weight:400;margin:0;line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}
::selection{background:var(--gold-soft);color:var(--ink)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:14.5px;letter-spacing:.02em;padding:13px 24px;border-radius:2px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-solid{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn-solid:hover{background:var(--green);border-color:var(--green);color:var(--on-green)}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-sm{padding:10px 18px;font-size:13.5px}

/* top strip + header */
.strip{background:var(--ink);color:var(--ground);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.strip .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center;padding-block:9px;text-align:center}
.strip b{font-weight:500;color:var(--gold)}
header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:16px;min-height:66px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.mark img{width:46px;height:46px;flex:none}
.mark .nm{font-family:"Playfair Display",Georgia,serif;font-size:17px;display:block;line-height:1.1}
.mark .sub{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-top:2px}
nav.links{display:none;gap:24px}
nav.links a{text-decoration:none;font-size:14.5px;color:var(--ink-2);padding-block:4px;position:relative}
nav.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .25s ease}
nav.links a:hover::after{right:0}
nav.links a[aria-current="page"]::after{right:0}

/* breadcrumbs */
.crumbs{font-size:12.5px;color:var(--muted);padding-block:20px 0}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{border-bottom-color:var(--gold)}
.crumbs span{margin-inline:7px;color:var(--line)}

/* article */
article{padding-block:16px 60px}
.artmeta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.artmeta .cat{color:var(--gold);font-weight:600}
h1.title{font-size:clamp(31px,5.6vw,52px);font-weight:400;margin-block:4px 20px;max-width:20ch}
.standfirst{font-size:19px;color:var(--ink-2);max-width:var(--read);margin-bottom:28px}
.hero-img{margin:0 0 36px;overflow:hidden;background:var(--ground-2);position:relative}
.hero-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-img::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.4);pointer-events:none}
.prose{max-width:var(--read)}
.prose>p:first-of-type{font-size:19.5px;line-height:1.6;color:var(--ink);border-left:2px solid var(--gold);padding-left:20px;margin-bottom:1.5em}
.prose h2{font-size:clamp(23px,3.4vw,30px);margin:2em 0 .6em}
.prose h3{font-size:19px;margin:1.6em 0 .4em;font-weight:500}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose a{color:var(--green);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--green) 40%,transparent)}
.prose a:hover{border-bottom-color:var(--green)}
.prose blockquote{margin:1.5em 0;padding-left:20px;border-left:2px solid var(--gold);font-family:"Playfair Display",serif;font-style:italic;font-size:21px;color:var(--ink-2)}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15.5px}
.prose th{text-align:left;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink);padding:10px 12px 10px 0}
.prose td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tablewrap{overflow-x:auto}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}

/* CTA */
.cta{margin-top:44px;background:var(--panel);border:1px solid var(--line);padding:28px;box-shadow:var(--shadow-s);max-width:var(--read)}
.cta h2{font-size:24px;margin-bottom:10px}
.cta p{color:var(--muted);font-size:15.5px}
.cta .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* related */
.related{border-top:1px solid var(--line);margin-top:56px;padding-top:34px}
.related h2{font-size:22px;margin-bottom:22px}
.cards{display:grid;gap:18px}
.card{background:var(--panel);border:1px solid var(--line);text-decoration:none;display:block;box-shadow:var(--shadow-s);overflow:hidden}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card .inner{padding:16px 18px 20px}
.card .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.card h3{font-size:18px;margin:8px 0 6px;line-height:1.25}
.card p{color:var(--muted);font-size:14.5px;margin:0}

/* index list */
.idx-head{padding-block:40px 10px}
.idx-head h1{font-size:clamp(34px,6vw,58px);margin-bottom:14px}
.idx-head p{color:var(--ink-2);max-width:60ch}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 8px}
.filters button{font-family:inherit;font-size:12.5px;letter-spacing:.06em;padding:8px 14px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink-2);cursor:pointer;border-radius:2px}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.postlist{list-style:none;padding:0;margin:26px 0 0}
.postlist li{border-bottom:1px solid var(--line)}
.postlist a{display:grid;gap:4px 20px;padding-block:18px;text-decoration:none;grid-template-columns:1fr}
.postlist .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.postlist h2{font-size:20px;font-weight:400;line-height:1.3}
.postlist p{color:var(--muted);font-size:15px;margin:0;max-width:72ch}
.postlist .dt{font-size:12px;color:var(--muted);letter-spacing:.08em}
.count{font-size:13px;color:var(--muted);margin-top:6px}

/* landing sections */
.lp-hero{padding-block:44px 10px}
.lp-hero h1{font-size:clamp(34px,7vw,64px);margin-block:14px 18px}
.lp-hero .lede{font-size:clamp(17px,2.2vw,20px);color:var(--ink-2);max-width:48ch}
.lp-hero .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
section.block{padding-block:56px}
section.block.alt{background:var(--ground-2);border-block:1px solid var(--line)}
.block h2{font-size:clamp(26px,4.6vw,42px);margin-bottom:10px}
.block .sub{color:var(--muted);max-width:58ch;margin-bottom:30px}
.grid3{display:grid;gap:18px}
.tile{background:var(--panel);border:1px solid var(--line);padding:22px;box-shadow:var(--shadow-s)}
.tile h3{font-size:19px;margin-bottom:8px}
.tile p{color:var(--muted);font-size:15.5px;margin:0}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gal figure{margin:0;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.gal img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{padding:13px 15px 17px;font-size:14.5px;color:var(--ink-2)}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;list-style:none;padding-block:18px;font-family:"Playfair Display",serif;font-size:19px;
  display:flex;justify-content:space-between;gap:20px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg) translateY(-3px);transition:transform .22s ease}
details.faq[open] summary::after{transform:rotate(225deg) translateY(-3px)}
details.faq p{color:var(--muted);padding-bottom:18px;font-size:15.5px;max-width:64ch;margin:0}

/* footer */
footer{background:var(--ink);color:var(--ground);padding-block:56px 28px;margin-top:0}
footer a{color:var(--gold);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.foot{display:grid;gap:30px}
.foot img.badge{width:132px;height:132px;margin-bottom:14px}
.foot h3{font-family:"Playfair Display",serif;font-size:27px;color:var(--ground)}
.foot .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px;font-weight:600}
.foot p{color:color-mix(in srgb,var(--ground) 72%,transparent);font-size:15.5px}
.legal{margin-top:36px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--ground) 18%,transparent);
  display:flex;flex-wrap:wrap;gap:8px 24px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ground) 55%,transparent)}
.legal a{color:var(--gold)}

@media (min-width:700px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .postlist a{grid-template-columns:1fr auto;align-items:baseline}
  .postlist .dt{grid-row:1/3;grid-column:2;text-align:right}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .foot{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:960px){ nav.links{display:flex} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}