/* ===== betterchai.org brand styles ===== */
/* Continuity with reweave.org. Warmed for chai. */

:root{
  /* paper & ink (shared with reweave) */
  --paper:#FBF4E4;
  --paper-warm:#F3E4C5;
  --paper-edge:#D9C9A6;
  --paper-foam:#FFFAF0;
  --ink:#1F1410;
  --ink-soft:#5C4A3A;
  --ink-quiet:#8A7E6F;

  /* reweave palette (kept) */
  --coral:#E94F3D;
  --orange:#F4923A;
  --purple:#6B4C9A;
  --purple-soft:#A88FCB;
  --purple-mist:#EDE5F4;

  /* chai accents (new) */
  --chai:#6B3410;            /* deep brewed chai */
  --chai-warm:#A0571F;       /* milky chai */
  --masala:#C84A2E;          /* masala terracotta */
  --ginger:#E89339;          /* ginger amber */
  --cardamom:#6B8E5A;        /* cardamom green */
  --saffron:#E0A52E;         /* saffron threads */
  --milk:#FFFAF0;            /* steamed milk */
  --tulsi:#3F6B3F;           /* tulsi green */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Newsreader','Source Serif 4',Georgia,serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* paper grain — subtle texture that ties pages together */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(31,20,16,.012) 1px, transparent 1px),
    radial-gradient(circle at 75% 60%, rgba(31,20,16,.010) 1px, transparent 1px),
    radial-gradient(circle at 50% 85%, rgba(31,20,16,.008) 1px, transparent 1px);
  background-size:3px 3px,5px 5px,7px 7px;
  opacity:.7;
}
#page{position:relative;z-index:1}

/* ============== STICKY NAV ============== */
.stick{
  position:sticky;top:0;left:0;right:0;z-index:50;
  padding:12px 24px;
  display:flex;align-items:center;gap:14px;
  background:rgba(251,244,228,.92);
  backdrop-filter:blur(14px) saturate(1.06);
  -webkit-backdrop-filter:blur(14px) saturate(1.06);
  border-bottom:1px solid rgba(31,20,16,.10);
}
.stick .brand{
  flex-shrink:0;text-decoration:none;
  font-family:'Shrikhand','Lobster',cursive;
  font-size:22px;color:var(--ink);letter-spacing:-.01em;line-height:1;
}
.stick .brand:hover{text-decoration:none;color:var(--masala)}
.stick .brand .dot{color:var(--masala)}
.stick .pipe{width:1px;height:22px;background:rgba(31,20,16,.18);margin:0 2px;flex-shrink:0}
.stick .here{
  font-family:'Gaegu',cursive;font-weight:600;font-size:16px;
  color:var(--ink-soft);white-space:nowrap;flex-shrink:0;
}
.stick .chips{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;padding:0 4px}
.stick .chips::-webkit-scrollbar{display:none}
.stick .chip{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;
  font-family:'Inter',sans-serif;font-weight:500;font-size:12.5px;
  color:var(--ink-soft);text-decoration:none;border:1px solid transparent;
  transition:all .15s ease;cursor:pointer;background:none;white-space:nowrap;
}
.stick .chip:hover{color:var(--ink);background:rgba(255,255,255,.55);border-color:rgba(31,20,16,.12);text-decoration:none}
.stick .chip.active{color:var(--ink);background:#fff;border-color:rgba(31,20,16,.18);box-shadow:0 1px 3px rgba(60,40,20,.06)}
.stick .chip-icon{font-size:14px;line-height:1}
.stick .right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.stick .weave-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:var(--purple);
  padding:9px 15px;border-radius:999px;text-decoration:none;
  transition:transform .15s ease, background .15s ease;position:relative;
}
.stick .weave-btn::before{
  content:'';position:absolute;left:-3px;top:-3px;width:8px;height:8px;
  background:var(--coral);border-radius:50%;box-shadow:0 0 0 3px var(--paper);
}
.stick .weave-btn:hover{transform:translateY(-1px);background:#553a7e;text-decoration:none;color:#fff}

/* ============== FOOTER ============== */
.foot{
  margin-top:80px;padding:56px 32px 40px;
  background:linear-gradient(180deg, transparent 0%, rgba(217,201,166,.18) 50%, rgba(217,201,166,.32) 100%);
  border-top:1px solid rgba(31,20,16,.08);
  position:relative;
}
.foot::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--ink-quiet), transparent);
  opacity:.3;
}
.foot-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px}
.foot h4{
  font-family:'Shrikhand','Lobster',cursive;font-weight:400;font-size:22px;
  color:var(--chai);margin-bottom:14px;letter-spacing:-.005em;
}
.foot p, .foot li{
  font-family:'Newsreader',Georgia,serif;font-size:15px;line-height:1.65;color:var(--ink-soft);
  list-style:none;
}
.foot a{color:var(--ink-soft);border-bottom:1px solid transparent;transition:color .2s, border-color .2s;text-decoration:none}
.foot a:hover{color:var(--masala);border-bottom-color:var(--masala);text-decoration:none}
.foot ul li{margin-bottom:8px}
.foot-credit{
  margin-top:32px;padding-top:24px;border-top:1px solid rgba(31,20,16,.10);
  text-align:center;font-family:'Gaegu',cursive;font-size:16px;color:var(--ink-quiet);
}
.foot-credit .heart{color:var(--coral)}
.foot-credit a{font-family:'Gaegu',cursive;color:var(--purple)}

/* ============== SHARED PAGE CHROME ============== */
.page-wrap{max-width:920px;margin:0 auto;padding:60px 32px}
.page-wrap.wide{max-width:1120px}
.page-wrap.narrow{max-width:720px}

.eyebrow{
  font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;
  color:var(--masala);letter-spacing:.32em;text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow .dot{display:inline-block;margin:0 10px;opacity:.5}

.page-title{
  font-family:'Shrikhand','Lobster',cursive;font-weight:400;
  font-size:clamp(48px,8vw,96px);line-height:.95;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:24px;
}
.page-lede{
  font-family:'Newsreader',Georgia,serif;font-style:italic;
  font-size:clamp(20px,2.4vw,26px);line-height:1.5;color:var(--ink-soft);
  font-weight:400;max-width:680px;margin-bottom:48px;
}

h2.section{
  font-family:'Shrikhand','Lobster',cursive;font-weight:400;
  font-size:clamp(32px,4vw,46px);line-height:1.05;color:var(--chai);
  letter-spacing:-.005em;margin:64px 0 20px;
}
h3.section{
  font-family:'Newsreader',Georgia,serif;font-weight:600;
  font-size:clamp(22px,2.4vw,28px);line-height:1.25;color:var(--ink);
  margin:40px 0 14px;
}

.prose p{margin-bottom:18px;font-size:18px;line-height:1.75;color:var(--ink)}
.prose p.lead{font-size:21px;line-height:1.65;color:var(--ink-soft);font-style:italic}
.prose ul, .prose ol{margin:0 0 18px 22px}
.prose ul li, .prose ol li{margin-bottom:6px;font-size:18px;line-height:1.7}

/* handwritten margin note */
.margin-note{
  font-family:'Gaegu',cursive;font-weight:500;font-size:19px;
  color:var(--purple);line-height:1.5;
  border-left:2px solid var(--purple-soft);padding:6px 0 6px 18px;
  margin:24px 0 28px;
}

/* pull quote */
.pull{
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(24px,3vw,32px);line-height:1.4;color:var(--ink);
  text-align:center;max-width:760px;margin:48px auto;padding:0 32px;
  position:relative;
}
.pull::before, .pull::after{
  font-family:'Shrikhand',cursive;font-size:60px;color:var(--ginger);
  line-height:0;position:relative;top:18px;opacity:.7;
}
.pull::before{content:'"';margin-right:6px}
.pull::after{content:'"';margin-left:6px}
.pull-cite{
  display:block;margin-top:18px;font-family:'Gaegu',cursive;font-style:normal;
  font-size:18px;color:var(--purple);
}

/* CTA pill row */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 22px;border-radius:999px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;
  text-decoration:none;border:none;cursor:pointer;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--masala);color:#fff;box-shadow:0 4px 12px rgba(200,74,46,.25)}
.btn-primary:hover{background:#a83a22;transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,74,46,.32);text-decoration:none;color:#fff}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{background:#553a7e;text-decoration:none;color:#fff}
.btn-amber{background:var(--ginger);color:#fff}
.btn-amber:hover{background:#d07e29;text-decoration:none;color:#fff}

/* card grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:32px 0}
.card{
  background:var(--paper-foam);border:1px solid rgba(31,20,16,.08);
  border-radius:14px;padding:28px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block;
}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(60,40,20,.10);border-color:rgba(200,74,46,.25);text-decoration:none}
.card .card-num{
  font-family:'Shrikhand',cursive;font-size:42px;line-height:1;
  color:var(--ginger);opacity:.85;margin-bottom:8px;display:block;
}
.card .card-title{
  font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:22px;line-height:1.25;
  color:var(--ink);margin-bottom:8px;letter-spacing:-.005em;
}
.card .card-desc{
  font-family:'Newsreader',Georgia,serif;font-size:15.5px;line-height:1.55;
  color:var(--ink-soft);
}
.card .card-arrow{
  position:absolute;top:24px;right:24px;width:28px;height:28px;
  border-radius:50%;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-quiet);font-size:14px;transition:all .2s ease;
}
.card:hover .card-arrow{background:var(--masala);color:#fff;transform:translate(2px,-2px)}

/* steam animation reusable */
@keyframes steam {
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  20%{opacity:.5}
  100%{transform:translateY(-80px) translateX(8px) scale(1.6);opacity:0}
}
.steam{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,.6);filter:blur(8px);
  animation:steam 3s ease-out infinite;
}

/* responsive */
@media (max-width:720px){
  .stick{padding:10px 14px;gap:10px}
  .stick .here{display:none}
  .stick .pipe{display:none}
  .stick .brand{font-size:19px}
  .stick .chip{font-size:11.5px;padding:6px 11px}
  .stick .weave-btn{font-size:10.5px;padding:8px 12px}
  .page-wrap{padding:40px 22px}
  .foot{padding:40px 22px 32px}
  .pull{font-size:22px;padding:0 14px}
  .pull::before,.pull::after{font-size:44px}
}
@media (max-width:480px){
  body{font-size:16px}
  .prose p{font-size:17px}
}

/* tiny accessibility */
:focus-visible{outline:2px solid var(--masala);outline-offset:2px;border-radius:4px}
button:focus-visible, a:focus-visible{outline:2px solid var(--masala);outline-offset:3px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}