/* NamkhaZoe site. Tokens from design/DEV-HANDOFF.md (light + dark). */
:root{
  --bg:#F5EFE0; --surface:#FFFCF5; --border:#E3D7BF; --divider:#E8DDC8;
  --text:#2A211A; --text2:#3D3127; --muted:#6B5B49; --accent:#8A6508;
  --brand:#6B1414; --brandHover:#561010; --onBrand:#FBF6EA; --onBrandMuted:#E8D6B8; --gold:#E2BE5A;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bo:"Noto Serif Tibetan", "Kailasa", serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#15110D; --surface:#211A14; --border:#3A2F25; --divider:#2E251D;
  --text:#EDE3D0; --text2:#D6C8B0; --muted:#B5A48B; --accent:#D4A830;
  --brand:#7A1C1C; --brandHover:#8E2424; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:720px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;text-wrap:balance;margin:0}
p{margin:0}

/* header */
.top{background:var(--brand);color:var(--onBrand)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand img{width:36px;height:36px}
.brand b{font-family:var(--serif);font-size:20px;font-weight:600}
.brand span{font-family:var(--bo);font-size:15px;color:var(--onBrandMuted)}
.top nav a{color:var(--onBrand);text-decoration:none;font-weight:500;font-size:15px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font:600 16px/1 var(--sans);text-decoration:none;border:1.5px solid transparent}
.btn.primary{background:var(--gold);color:#2A211A}
.btn.primary:hover{background:#EBCB72}
.btn.ghost{border-color:rgba(251,246,234,.55);color:var(--onBrand)}
.btn.ghost:hover{background:rgba(251,246,234,.1)}
.btn.brand{background:var(--brand);color:var(--onBrand)}
.btn.brand:hover{background:var(--brandHover)}

/* hero */
.hero{position:relative;color:var(--onBrand);background:#2a1410}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,12,10,.35),rgba(40,12,10,.85))}
.hero .wrap{position:relative;padding-block:72px 64px;display:grid;gap:18px;max-width:1040px}
.hero .bo{font-family:var(--bo);font-size:clamp(26px,4vw,34px);line-height:1.6;color:var(--gold)}
.hero h1{font-size:clamp(34px,6vw,54px);max-width:20ch}
.hero p.lead{font-size:18px;color:var(--onBrandMuted);max-width:56ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.hero small{color:var(--onBrandMuted);font-size:14px}

/* sections */
section.block{padding-block:56px}
section.block+section.block{border-top:1px solid var(--divider)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.block h2{font-size:clamp(24px,3.5vw,30px);margin-bottom:14px}
.block .intro{color:var(--text2);max-width:62ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;min-width:0}
.item h3{font-size:18px;margin-bottom:6px}
.item p{color:var(--text2);font-size:15px}
.item .bo{font-family:var(--bo);color:var(--muted);font-size:15px;line-height:1.7}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px;margin-top:24px;padding:0;list-style:none}
.features li{padding-left:18px;position:relative;color:var(--text2)}
.features li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.features strong{color:var(--text)}
.support{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.support img{width:96px;height:96px}
.support .actions{margin-top:14px}

/* footer */
footer{background:var(--surface);border-top:1px solid var(--border);color:var(--muted);font-size:14px}
footer .wrap{padding-block:28px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{color:var(--text2);text-decoration:none}
footer a:hover{text-decoration:underline}

/* legal pages */
.legal{padding-block:40px 64px}
.legal h1{font-size:clamp(30px,5vw,40px);margin-bottom:6px}
.legal .updated{color:var(--muted);font-size:14px;margin-bottom:28px}
.legal h2{font-size:21px;margin:32px 0 10px}
.legal p,.legal li{color:var(--text2)}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px;margin:10px 0}
.legal li+li{margin-top:6px}
.legal .box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-top:12px}

@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .support{grid-template-columns:1fr}
  .hero .wrap{padding-block:52px 44px}
  .brand span{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}