/* Ayurbook — the manuscript opens.
   Brand: brand/README.md (locked 2026-07-23). Forest ground, parchment type, reversed colourway. */

:root{
  --forest:#1F3B2C;
  --forest-deep:#16291E;
  --forest-lift:#264636;
  --parchment:#F6F1E6;
  --parchment-dim:rgba(246,241,230,.72);
  --parchment-faint:rgba(246,241,230,.44);
  --rule:rgba(246,241,230,.16);
  --ochre:#C8A24A;
  --ochre-dim:rgba(200,162,74,.5);

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mal:"Noto Sans Malayalam",var(--serif);

  --measure:34rem;
  --gut:clamp(1.25rem,5vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;
  background:var(--forest);
  color:var(--parchment);
  font-family:var(--serif);
  font-size:clamp(1.06rem,.55vw + .95rem,1.2rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- layout ---------- */
.wrap{width:min(72rem,100% - var(--gut)*2);margin-inline:auto}
.narrow{max-width:var(--measure)}
section{padding-block:clamp(4rem,9vw,7.5rem);position:relative;scroll-margin-top:64px}

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ochre);font-weight:500;margin:0 0 1.1rem;
}
h1,h2,h3{font-weight:400;line-height:1.14;letter-spacing:-.012em;margin:0 0 1rem}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.55rem,3vw,2.3rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.3}
p{margin:0 0 1.1rem;max-width:var(--measure)}
.lede{font-size:clamp(1.08rem,1.3vw,1.25rem);color:var(--parchment-dim);line-height:1.55}
.dim{color:var(--parchment-dim)}
.faint{color:var(--parchment-faint)}
em{font-style:italic;color:var(--ochre)}
.mal{font-family:var(--mal);font-weight:400}

/* ---------- ola divider: a palm-leaf strip with its binding hole ---------- */
.ola{display:block;width:100%;height:22px;opacity:.5;margin-block:clamp(2rem,5vw,3.5rem)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(22,41,30,.38);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid rgba(246,241,230,.10);
}
.nav-in{display:flex;align-items:center;gap:1.25rem;padding-block:.5rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;margin-right:auto;min-height:36px}
.brand img{width:26px;height:26px}
.brand b{font-family:var(--serif);font-size:1.1rem;font-weight:400;letter-spacing:.005em}
.nav a.lnk{
  font-family:var(--sans);font-size:.83rem;text-decoration:none;color:var(--parchment-dim);
  transition:color .2s;
}
.nav a.lnk:hover{color:var(--parchment)}

/* Desktop: the strip is just an inline link group. Brand's margin-right:auto pushes it right. */
.nav-strip{display:flex;align-items:center;gap:1.4rem;order:1}
.nav a.lnk.btn{order:2}

/* Mobile: don't hide navigation — turn it into a native-feeling scroll strip. */
@media (max-width:720px){
  .nav-in{flex-wrap:wrap;row-gap:.5rem;padding-bottom:.5rem}
  .brand{margin-right:auto}
  .nav a.lnk.btn{order:2}
  .nav a.lnk:not(.btn){
    order:3;flex:0 0 auto;scroll-snap-align:start;
    padding:.4rem .85rem;border:1px solid var(--rule);border-radius:2rem;font-size:.8rem;
  }
  .nav-strip{
    order:3;flex:1 0 100%;display:flex;gap:.45rem;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);
    padding-inline:var(--gut);
  }
  .nav-strip::-webkit-scrollbar{display:none}
}

/* nav CTA smaller than page buttons */
.nav .btn{padding:.44rem 1rem;font-size:.78rem;min-height:34px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.01em;
  padding:.72rem 1.3rem;border-radius:2rem;text-decoration:none;
  border:1px solid var(--ochre);color:var(--forest);background:var(--ochre);
  transition:transform .18s,filter .18s;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--parchment);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--parchment-faint);filter:none}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

/* ---------- hero: the book opens ---------- */
.hero{
  min-height:100svh;display:grid;align-items:center;
  padding-block:clamp(4rem,11vw,8rem);
  background:
    radial-gradient(120% 78% at 50% 0%,rgba(200,162,74,.11) 0%,transparent 62%),
    linear-gradient(180deg,var(--forest-deep) 0%,var(--forest) 46%);
  position:relative;overflow:hidden;text-align:center;
}
.hero .wrap{position:relative;z-index:3}
.hero-mal{
  font-family:var(--mal);
  font-size:clamp(4rem,17vw,13rem);line-height:1;
  color:rgba(246,241,230,.08);text-shadow:0 1px 30px rgba(0,0,0,.3);
  position:absolute;inset-inline:0;top:12%;z-index:2;
  user-select:none;pointer-events:none;white-space:nowrap;
}
.hero h1{margin-inline:auto;max-width:19ch;text-shadow:0 2px 28px rgba(0,0,0,.5)}
.hero .lede{margin-inline:auto;max-width:44ch;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.hero .btns{justify-content:center}
.hero-mark{width:56px;margin:0 auto 2rem;opacity:.95}

/* ornamental leaf frame behind hero */
.leaf-bg{position:absolute;inset:0;z-index:0;opacity:.28;pointer-events:none}

/* ---------- stat rail ---------- */
.rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1px;background:var(--rule);border-block:1px solid var(--rule);
}
.rail div{background:var(--forest);padding:1.5rem 1.1rem;text-align:center}
.rail b{display:block;font-size:clamp(1.7rem,3.2vw,2.3rem);color:var(--ochre);line-height:1.1}
.rail span{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--parchment-faint)}

/* ---------- lineage timeline ---------- */
.thread{list-style:none;margin:2.5rem 0 0;padding:0;position:relative}
.thread::before{content:"";position:absolute;left:5.2rem;top:.4rem;bottom:.4rem;width:1px;background:var(--rule)}
@media (max-width:640px){.thread::before{left:0}}
.thread li{display:grid;grid-template-columns:5.2rem 1fr;gap:0 2rem;padding-block:1.1rem;position:relative}
@media (max-width:640px){.thread li{grid-template-columns:1fr;gap:.3rem;padding-left:1.4rem}}
.thread time{
  font-family:var(--sans);font-size:.76rem;letter-spacing:.06em;color:var(--ochre);
  padding-top:.42rem;text-align:right;
}
@media (max-width:640px){.thread time{text-align:left}}
.thread li::after{
  content:"";position:absolute;left:5.2rem;top:1.55rem;width:7px;height:7px;
  border-radius:50%;background:var(--ochre);transform:translateX(-3px);
}
@media (max-width:640px){.thread li::after{left:0}}
.thread h3{margin-bottom:.25rem}
.thread p{margin:0;font-size:.98rem;color:var(--parchment-dim)}

/* ---------- phases ---------- */
.phases{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden;margin-top:2.5rem}
@media (min-width:820px){.phases{grid-template-columns:repeat(3,1fr)}}
.phase{background:var(--forest);padding:clamp(1.5rem,3vw,2.2rem)}
.phase .n{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;color:var(--ochre);text-transform:uppercase}
.phase h3{margin:.7rem 0 .5rem}
.phase .sk{font-style:italic;color:var(--ochre-dim);font-size:.95rem}
.phase p{font-size:.97rem;color:var(--parchment-dim);margin-bottom:0}

/* ---------- charter ---------- */
.charter{background:var(--forest-deep);border-block:1px solid var(--rule)}
.charter ul{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem}
@media (min-width:780px){.charter ul{grid-template-columns:1fr 1fr;gap:1rem 2.5rem}}
.charter li{display:grid;grid-template-columns:1.4rem 1fr;gap:.85rem;align-items:start;color:var(--parchment-dim);font-size:1rem}
.charter li svg{margin-top:.42rem}

/* ---------- directory ---------- */
.dir{background:var(--forest-deep);border-block:1px solid var(--rule)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0}
.chip{
  font-family:var(--sans);font-size:.78rem;padding:.42rem .9rem;border-radius:2rem;
  border:1px solid var(--rule);color:var(--parchment-dim);text-decoration:none;transition:.2s;
}
.chip:hover{border-color:var(--ochre-dim);color:var(--parchment)}
.chip b{color:var(--ochre);font-weight:500;font-family:var(--serif)}
.cards{display:grid;gap:1rem;margin-top:1.5rem}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--forest);border:1px solid var(--rule);border-radius:4px;
  padding:1.5rem;display:flex;flex-direction:column;gap:.55rem;
}
.card .tag{font-family:var(--sans);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ochre)}
.card h3{margin:0;font-size:1.15rem}
.card p{margin:0;font-size:.93rem;color:var(--parchment-dim)}
.card .meta{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--rule);font-family:var(--sans);font-size:.76rem;color:var(--parchment-faint)}

/* ---------- price ---------- */
.ladder{margin-top:2.5rem;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.ladder-row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:1.15rem 1.4rem;border-bottom:1px solid var(--rule)}
.ladder-row:last-child{border-bottom:0}
.ladder-row .what{font-size:1rem}
.ladder-row .what small{display:block;font-family:var(--sans);font-size:.75rem;color:var(--parchment-faint);margin-top:.2rem}
.ladder-row .amt{font-size:1.15rem;color:var(--ochre);white-space:nowrap}
.ladder-head{background:var(--forest-lift)}
.ladder-head .what,.ladder-head .amt{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--parchment-faint)}
.note{font-family:var(--sans);font-size:.8rem;color:var(--parchment-faint);margin-top:1rem;line-height:1.5;max-width:var(--measure)}

/* ---------- book capture ---------- */
.book{background:var(--forest-deep);border-block:1px solid var(--rule)}
.book-in{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:880px){.book-in{grid-template-columns:1fr 1.25fr}}
.book-art{position:relative;display:grid;place-items:center;min-height:15rem}
form.cap{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;max-width:30rem}
form.cap input{
  flex:1 1 14rem;background:var(--forest);border:1px solid var(--rule);border-radius:2rem;
  padding:.72rem 1.15rem;color:var(--parchment);font-family:var(--sans);font-size:.88rem;
}
form.cap input::placeholder{color:var(--parchment-faint)}
form.cap input:focus{outline:none;border-color:var(--ochre-dim)}
form.cap button{border:0;cursor:pointer}

/* ---------- footer ---------- */
footer{background:var(--forest-deep);border-top:1px solid var(--rule);padding-block:clamp(3rem,6vw,4.5rem)}
.fgrid{display:grid;gap:2rem}
@media (min-width:760px){.fgrid{grid-template-columns:1.4fr repeat(3,1fr)}}
footer h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);margin:0 0 1rem;font-weight:500}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
footer a{font-size:.93rem;color:var(--parchment-dim);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--parchment)}
.colophon{margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--rule);font-family:var(--sans);font-size:.78rem;color:var(--parchment-faint);display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- a11y utilities ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ochre);color:var(--forest);padding:.7rem 1.2rem;border-radius:0 0 4px 0;font-family:var(--sans);font-size:.85rem;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px;border-radius:2px}

/* ---------- native-app-grade mobile ---------- */
.nav{padding-top:env(safe-area-inset-top)}
footer{padding-bottom:calc(clamp(3rem,6vw,4.5rem) + env(safe-area-inset-bottom))}
body{-webkit-tap-highlight-color:rgba(200,162,74,.2);text-size-adjust:100%}
a,button,input{touch-action:manipulation}
@media (pointer:coarse){.btn,.chip,.nav a.lnk{min-height:44px}}
.btn,.chip,.nav a.lnk{display:inline-flex;align-items:center}
@media (max-width:520px){
  .rail{grid-template-columns:repeat(2,1fr)}
  .rail div:last-child{grid-column:1 / -1}
}


/* Malayalam inside an uppercase-tracked eyebrow: reset the tracking or the
   conjuncts break apart and the glyphs render tiny. */
.eb-mal{font-family:var(--mal);text-transform:none;letter-spacing:.02em;font-size:1.16em;margin-left:.35em}

/* ═══════════ WHAT IS AYURVEDA ═══════════ */
.define{background:var(--forest-deep);border-block:1px solid var(--rule)}
.define-in{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:900px){.define-in{grid-template-columns:1fr 1fr;align-items:start}}
.doshas{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.dosha{background:var(--forest);padding:1.4rem 1.5rem;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.dosha svg{margin-top:.3rem}
.dosha h3{margin:0 0 .3rem;font-size:1.1rem}
.dosha h3 span{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre);display:block;margin-bottom:.2rem}
.dosha p{margin:0;font-size:.95rem;color:var(--parchment-dim)}

/* ═══════════ WHAT AYURVEDA TREATS — falling botanicals ═══════════ */
.treats{position:relative;overflow:hidden}
.fall{position:absolute;inset:0;z-index:0;pointer-events:none}
.fall i{
  position:absolute;top:-14vh;display:block;width:22px;height:44px;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 44'%3E%3Cpath d='M11 1 C 16 10 20 20 11 43 C 2 20 6 10 11 1 Z' fill='none' stroke='%23C8A24A' stroke-width='1'/%3E%3Cpath d='M11 6 V 38 M11 12 q 4 2 6 6 M11 12 q -4 2 -6 6 M11 20 q 4 2 5 6 M11 20 q -4 2 -5 6' stroke='%23C8A24A' stroke-width='.6' fill='none' opacity='.7'/%3E%3C/svg%3E") no-repeat center/contain;
  animation:drift linear infinite;
}
@keyframes drift{
  0%{opacity:0;transform:translateY(-10vh) rotate(0deg)}
  8%{opacity:.5}
  92%{opacity:.5}
  100%{opacity:0;transform:translateY(112vh) rotate(340deg)}
}
@media (prefers-reduced-motion:reduce){.fall{display:none}}
.treats .wrap{position:relative;z-index:1}
.grid-cond{display:grid;gap:.75rem;margin-top:2.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr))}
.cond{
  background:rgba(31,59,44,.72);backdrop-filter:blur(3px);
  border:1px solid var(--rule);border-radius:4px;padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.3rem;text-decoration:none;
  transition:border-color .25s,transform .25s,background .25s;
}
.cond:hover{border-color:var(--ochre-dim);transform:translateY(-2px);background:rgba(38,70,54,.85)}
.cond b{font-weight:400;font-size:1.03rem}
.cond span{font-family:var(--sans);font-size:.72rem;color:var(--parchment-faint);letter-spacing:.03em}
.cond.more{align-items:center;justify-content:center;text-align:center;color:var(--ochre);border-style:dashed}

.hero-poster{opacity:0;transition:opacity 1s ease}
.hero-poster.on{opacity:1}
.hero-video{opacity:0;transition:opacity 1.2s ease}
.hero-video.on{opacity:1}