/* HerbCha prototype — tokens grounded in the actual source flyer:
   warm cream paper, rust-orange brush headline, deep pine-green banners,
   amber tea/gold accents. */

:root{
  --paper:#F6F0E1;
  --paper-2:#EEE4CD;
  --paper-3:#E7DAB9;
  --ink:#241E15;
  --ink-soft:#4A4234;
  --rust:#C1502C;
  --rust-dark:#9C3D20;
  --pine:#2B3A2A;
  --pine-2:#37492F;
  --gold:#A9791F;
  --sage:#7E9470;
  --line:#DACBA0;
  --radius:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',serif; margin:0 0 .3em; color:var(--ink); font-weight:500;}
.cn{font-family:'Noto Serif SC',serif;}
img{max-width:100%; display:block;}
a{color:var(--rust-dark);}
:focus-visible{outline:3px solid var(--rust); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- ribbon ---------- */
.ribbon{
  background:var(--pine);
  color:var(--paper);
  font-size:.82rem;
  text-align:center;
  padding:.55em 1em;
}
.ribbon a{color:#F0D9A8; text-decoration:underline;}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(246,240,225,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1120px; margin:0 auto; padding:.9em 1.4em;
  display:flex; align-items:center; justify-content:space-between;
}
.wordmark{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.35rem;
  color:var(--pine); text-decoration:none; letter-spacing:.01em;
}
.wordmark .cn{font-size:.65em; color:var(--rust); margin-left:.4em;}
.wordmark.small{font-size:1.1rem;}
.nav-cta{
  font-size:.85rem; font-weight:600; text-decoration:none;
  color:var(--paper); background:var(--rust); padding:.55em 1.1em;
  border-radius:999px; transition:background .15s ease;
}
.nav-cta:hover{background:var(--rust-dark);}

/* ---------- hero ---------- */
.hero{
  max-width:1120px; margin:0 auto;
  padding:3.2em 1.4em 2.4em;
  display:grid; grid-template-columns:1.1fr .9fr; gap:3em;
  align-items:center;
}
.eyebrow{
  font-family:'Noto Sans SC',sans-serif; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; font-size:.78rem; color:var(--sage);
  margin:0 0 .8em;
}
.hero h1{margin:0 0 .3em; line-height:1.05;}
.brush{
  font-family:'Ma Shan Zheng', cursive; font-size:3.6rem; color:var(--rust);
  line-height:1;
}
.frac{
  font-family:'Noto Serif SC', serif; font-weight:700; font-size:1.9rem; color:var(--ink);
}
.hero-en{
  font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; color:var(--ink-soft);
  margin:.2em 0 1em;
}
.hero-quote{
  font-family:'Noto Serif SC',serif; font-size:1.05rem; color:var(--pine-2);
  border-left:3px solid var(--sage); padding-left:.9em; margin:0 0 1.6em;
}
.q-en{display:block; font-family:'Inter',sans-serif; font-style:italic; font-size:.85rem; color:var(--ink-soft); margin-top:.25em;}

.price-block{
  display:flex; align-items:center; gap:1.2em; flex-wrap:wrap; margin-bottom:1.4em;
}
.price-badge{
  position:relative;
  background:var(--rust);
  color:#fff;
  clip-path:polygon(8% 0%,32% 4%,58% 0%,80% 6%,100% 18%,94% 42%,100% 66%,82% 82%,92% 100%,60% 92%,38% 100%,14% 88%,0% 68%,10% 46%,0% 22%);
  width:150px; height:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; flex-shrink:0;
}
.price-badge-top{font-size:.62rem; font-weight:700; letter-spacing:.05em; opacity:.9;}
.price-badge-currency{font-family:'Fraunces',serif; font-size:1rem; vertical-align:top; margin-right:2px;}
.price-badge-num{font-family:'Fraunces',serif; font-weight:600; font-size:2.5rem; line-height:1;}
.price-badge-unit{font-size:.65rem; opacity:.9; margin-top:.2em;}
.price-was{font-size:.82rem; color:var(--ink-soft); max-width:22em;}
.price-was span{display:block;}
.price-note{font-size:.75rem; color:var(--ink-soft); opacity:.85; margin-top:.3em;}

.spec-row{
  display:flex; flex-wrap:wrap; gap:.5em; align-items:center;
  font-size:.85rem; font-weight:600; color:var(--pine-2); margin-bottom:1.8em;
}
.spec-row i{color:var(--line); font-style:normal;}

.cta-primary{
  font-family:'Inter',sans-serif; font-weight:700; font-size:.95rem;
  background:var(--pine); color:var(--paper);
  border:none; border-radius:10px; padding:.9em 1.6em;
  cursor:not-allowed; text-align:left; opacity:.55;
}
.cta-primary small{display:block; font-weight:500; font-size:.72rem; opacity:.85; margin-top:.25em;}

.hero-media img{
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -22px rgba(36,30,21,.45);
}
.media-caption{font-size:.75rem; color:var(--ink-soft); margin-top:.6em;}

/* ---------- badges ---------- */
.badges{
  max-width:1120px; margin:0 auto; padding:1.4em;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1em;
}
.badge{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2em .8em; text-align:center;
}
.badge-num{display:block; font-family:'Fraunces',serif; font-size:2rem; color:var(--pine); font-weight:600;}
.badge-label{font-size:.78rem; color:var(--ink-soft); font-weight:600;}
.badge.nutri{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.nutri-grade{display:flex; gap:.3em; margin-bottom:.5em;}
.nutri-grade .g{
  width:1.7em; height:1.7em; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-weight:700; font-size:.85rem; color:#fff;
}
.g.a{background:#5C8A4A;} .g.b{background:#8FAE3E; outline:2px solid var(--pine); outline-offset:2px;}
.g.c{background:#D98A2B;} .g.d{background:#C1502C;}
.section-footnote{
  max-width:1120px; margin:0 auto; padding:0 1.4em 2.2em; font-size:.78rem; color:var(--ink-soft);
}

/* ---------- herbs ---------- */
.herbs{background:var(--paper-2); padding:3em 1.4em; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.herbs h2, .why h2, .where h2, .provenance h2, .order h2{
  max-width:1120px; margin:0 auto .2em; font-size:1rem; color:var(--sage);
  font-weight:600; text-transform:uppercase; letter-spacing:.04em;
}
.herbs h2 .cn{display:block; font-size:1.8rem; color:var(--ink); font-weight:600; text-transform:none; letter-spacing:0; margin-bottom:.15em;}
.herb-grid{
  max-width:1120px; margin:1.6em auto 0; display:grid;
  grid-template-columns:repeat(6,1fr); gap:1em;
}
.herb-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1em; text-align:center;
}
.herb-card img{width:64px; height:64px; object-fit:cover; border-radius:50%; margin:0 auto .7em; border:2px solid var(--paper-3);}
.herb-card h3{font-family:'Noto Serif SC',serif; font-size:1rem; margin:0 0 .3em;}
.herb-card h3 span{display:block; font-family:'Inter',sans-serif; font-size:.68rem; font-weight:500; color:var(--ink-soft); margin-top:.15em;}
.herb-card p{font-size:.78rem; color:var(--pine-2); margin:0;}
.q-mark{color:var(--rust);}

/* ---------- why ---------- */
.why{padding:3.2em 1.4em; text-align:left;}
.why h2{color:var(--rust);}
.why h2 .en{display:block; font-size:1rem; color:var(--ink-soft); text-transform:none; letter-spacing:0; font-weight:500; margin-top:.2em;}
.why-grid{max-width:1120px; margin:1.6em auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1em;}
.why-card{background:var(--pine); color:var(--paper); border-radius:var(--radius); padding:1.3em 1.1em;}
.why-cn{font-family:'Noto Serif SC',serif; font-size:1rem; margin:0 0 .4em;}
.why-en{font-size:.8rem; color:#D9E2CE; margin:0;}

/* ---------- where ---------- */
.where{background:var(--paper-2); padding:3.2em 1.4em; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.where-lede{max-width:1120px; margin:1em auto 2em; font-family:'Noto Serif SC',serif; font-size:1.05rem; color:var(--ink);}
.fixtures{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:1.6em;}
.fixtures figure{margin:0;}
.fixtures img{border-radius:var(--radius); border:1px solid var(--line);}
.fixtures figcaption{font-size:.78rem; color:var(--ink-soft); margin-top:.6em;}

/* ---------- provenance ---------- */
.provenance{padding:3.2em 1.4em;}
.prov-lede{max-width:1120px; margin:1em auto 2em; font-size:.95rem; color:var(--ink-soft); max-width:720px;}
.prov-grid{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:2em;}
.prov-col h3{font-family:'Inter',sans-serif; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color:var(--pine); margin-bottom:.8em;}
.prov-col ul{margin:0; padding-left:1.1em; font-size:.86rem; color:var(--ink-soft);}
.prov-col li{margin-bottom:.8em;}
.prov-col li strong{color:var(--ink);}

/* ---------- order ---------- */
.order{max-width:1120px; margin:0 auto; padding:3.2em 1.4em 4em; text-align:left;}
.order p{max-width:640px; color:var(--ink-soft); font-size:.92rem;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:var(--paper-2); padding:3em 1.4em 1.6em;}
.footer-inner{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:2.5em;}
.footer-brand .wordmark.small{color:var(--paper);}
.footer-note{font-size:.82rem; color:#B9AF98; max-width:26em; margin-top:.8em;}
.footer-building-label{font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--sage); margin-bottom:.6em;}
.footer-building img{border-radius:var(--radius); border:1px solid #4A4234; max-width:280px;}
.footer-building-caption{font-size:.78rem; color:#B9AF98; margin-top:.6em; max-width:32em;}
.copy{max-width:1120px; margin:2.4em auto 0; font-size:.75rem; color:#7A705C; border-top:1px solid #3A3428; padding-top:1.2em;}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero{grid-template-columns:1fr; gap:2em;}
  .hero-media{order:-1;}
  .badges{grid-template-columns:repeat(2,1fr);}
  .herb-grid{grid-template-columns:repeat(3,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .fixtures{grid-template-columns:1fr;}
  .prov-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .herb-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:1fr;}
  .brush{font-size:2.6rem;}
}