/* ==========================================================================
   SAATVIK HERBS — HOME
   Loaded only on "/". Everything here is layout for one of the home page's
   nine bands; anything reusable has already been promoted to base.css.

   The page has a deliberate light→dark arc: bright paper at the hero, two
   dark inserts where the detail lives, then a continuous darkening through
   the story, the closing call and the footer, which share a ground colour so
   the last screen and a half reads as one uninterrupted surface.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════ HERO
   Paper, not a photograph you cannot see. The picture is held in one arch to
   the side; the words get clean ground behind them. On a phone the two stack
   with the photograph between the headline and the sentence, so the first
   screen is never six text blocks in a row.

   The band is paper rather than charcoal because the page's colour arc was
   always written to start bright and darken (see the note at the top of this
   file) — it only ever went dark here because a scrimmed photograph forced it
   to. `--hero-bg` and `--hero-ink` are the two variables that decide; swapping
   them to charcoal/alabaster puts the dark hero back without touching layout. */
.hero {
  --hero-bg:  var(--alabaster);
  --hero-ink: var(--charcoal);

  position: relative;
  isolation: isolate;
  background: var(--hero-bg);
  color: var(--hero-ink);
  padding-top: calc(var(--nav-h) + var(--s-lg));
  padding-bottom: var(--s-xl);
}

.hero-grid { display: grid; gap: var(--s-md); }

.hero-eyebrow { color: var(--terracotta); margin-bottom: var(--s-sm); }
.hero-title   { color: var(--hero-ink); }
/* The two hero lines are separately masked, so the first line's descenders
   would otherwise be clipped by the second line's mask starting too soon. */
.hero-title .line-mask + .line-mask { margin-top: -0.06em; }

.hero-lede {
  color: var(--text-muted);
  max-width: 34ch;
  margin-bottom: var(--s-md);
}

/* ---- The photograph -----------------------------------------------------
   A contained arch, the same shape the product chapters and the story use, so
   the hero reads as the first chapter rather than as a different website. No
   scrim: nothing is printed on top of it any more, so it can be shown at the
   contrast it was shot at. */
.hero-art {
  /* `width: auto` is doing real work here. With `width: 100%`, `max-height`
     could only ever shorten the box — the width stayed put, so the frame got
     squarer as the viewport got shorter and the arch, whose radius is a
     percentage, flattened with it. Measured: 0.80 on a 1440p screen, 0.84 at
     1600×900, 0.99 at 1366×768. Letting the width follow the height keeps the
     ratio exactly 5:6 at every size, and `cover` then crops the same amount of
     photograph on every screen instead of eating the bottom of it on short
     ones. Anything with `aspect-ratio` and a `max-height` needs this. */
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 5 / 6;
  /* Capped against the viewport, not just the column: at 4/5 on a tall phone
     the picture ate the fold and pushed the buy button off the first screen,
     which is the crowding problem moved rather than solved. */
  max-height: 46svh;
  background: var(--oat);
}
/* <picture> is an inline wrapper with no box of its own; `display: contents`
   lets the <img> fill .hero-art directly. */
.hero-art picture { display: contents; }
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The mortar sits low and left in the 4:5 source. In a 4:5 box almost
     nothing is cropped, so this is a nudge rather than a rescue — which is
     the whole point of containing the image instead of bleeding it. */
  object-position: 40% 60%;
}

.hero-actions { display: flex; flex-direction: column; gap: var(--s-2xs); }
.hero-actions .btn { width: 100%; }
/* Second action is desktop-only — see the note in index.php. */
.hero-secondary { display: none; }

.hero-scroll { display: none; }

/* ═══════════════════════════════════════════════════════════════ THE RANGE
   The product index, evicted from the hero. Same card, on paper instead of
   over a photograph, so it no longer needs a blur to be readable. */
.range { padding-block: var(--s-lg); }
.range-index { display: grid; gap: var(--s-2xs); }

.hindex {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  border: 1px solid var(--rule-firm);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease-soft),
              background-color var(--t-fast) var(--ease-soft);
}
.hindex:hover { border-color: var(--terracotta); background: var(--oat-deep); }
.hindex-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--terracotta);
}
.hindex-body { display: grid; line-height: 1.25; min-width: 0; }
.hindex-body strong { font-size: 1rem; font-weight: 600; }
.hindex-body small {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hindex-price { font-weight: 600; font-size: var(--fs-small); }
.hindex .arw { color: var(--terracotta); transition: transform var(--t-fast) var(--ease); }
.hindex:hover .arw { transform: translateX(4px); }

/* ═════════════════════════════════════════════════════════════════ RIBBON */
.ribbon {
  background: var(--olive);
  color: var(--alabaster);
  padding-block: 0.85rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(20,28,22,0.18);
}
.ribbon-track {
  display: flex;
  width: max-content;
  animation: ribbon-scroll 44s linear infinite;
}
.ribbon-item {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Diamond separator carries the "printed" register into the moving strip. */
.ribbon-item::after {
  content: "✦";
  margin-inline: 2.25rem;
  color: var(--ochre);
  font-size: 0.6rem;
  letter-spacing: 0;
}
/* The track holds the list twice, so a 50% shift is a seamless loop. */
@keyframes ribbon-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; }
}

/* ════════════════════════════════════════════════════════════════ PROCESS */
.process-title { margin: var(--s-md) 0 var(--s-xl); }

.steps { display: grid; gap: var(--s-lg); counter-reset: step; }
.step { padding-top: var(--s-md); border-top: 1px solid var(--rule-firm); }
.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--terracotta);
  margin-bottom: var(--s-xs);
}
.step-title { margin-bottom: var(--s-2xs); }
.step-copy { font-size: var(--fs-small); max-width: 44ch; }

/* ════════════════════════════════════════════════════════════════ CHAPTER
   The wordmark, set enormous on one line, with the art rising to overlap its
   baseline. The overlap is a fraction of the headline's own font size, so it
   scales with the type instead of needing a value per breakpoint, and the art
   sits one layer above the type so it crosses in front of the descenders.

   An earlier version split the name across two lines with the art between
   them. It read beautifully for "Hair / Jeevan" and was wrong for "ArshHar",
   where the break invented a word boundary that changes the meaning. The
   colour break inside the wordmark carries the same rhythm safely. */
.chapter { padding-block: var(--section) 0; position: relative; }
.chapter-meta { margin-bottom: var(--s-lg); }

.chapter-line {
  position: relative;
  z-index: 1;
  text-align: center;
  /* Display type at 0.92 leading clips its own descenders against the next
     element ("Jeevan" has one); this buys the tail room without loosening
     the setting. */
  padding-bottom: 0.08em;
  /* The wordmark must never break across lines — that is the whole point of
     the change. A name long enough to overflow would be clipped rather than
     wrapped (body has overflow-x: clip), so if a future product has a much
     longer name, shrink --fs-chapter for it rather than letting it wrap. */
  text-wrap: nowrap;
}

.chapter-stage {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: calc(var(--fs-chapter) * -0.22);
}

/* The art and its price tag travel together. Without this wrapper the tag is
   positioned against a full-width stage and ends up stranded on the far side
   of the page from the bottle it is pricing. */
.chapter-artwrap {
  position: relative;
  width: min(74%, 22rem);
}
.chapter-art {
  width: 100%;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
}
/* Parked mid-height on the left edge: the wordmark's two halves overlap the
   top and bottom of this frame, and the price tag hangs off one side, so the
   middle is the only reliably clear spot. Goes away with the placeholder. */
.chapter-art .ph-tag {
  top: 50%;
  bottom: auto;
  left: 0.75rem;
  transform: translateY(-50%);
}

/* Price, set as a stamped tag over the lower corner of the art. */
.chapter-tag {
  position: absolute;
  z-index: 4;
  bottom: 9%;
  left: -1.25rem;
  display: grid;
  padding: 0.65rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--alabaster-lift);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
  line-height: 1.15;
}
.chapter-tag-price { font-family: var(--font-display); font-size: 1.75rem; color: var(--terracotta); }
.chapter-tag-unit  { font-size: var(--fs-micro); color: var(--text-muted); }
.chapter--flip .chapter-tag { left: auto; right: -1.25rem; text-align: right; }

.chapter-aside {
  margin: var(--s-md) auto 0;
  max-width: 40ch;
  text-align: center;
  font-size: var(--fs-lede);
  line-height: 1.45;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---- Chapter detail ---- */
.chapter-detail {
  margin-top: var(--s-xl);
  display: grid;
  gap: var(--s-lg);
}

.chapter-howto { margin-top: var(--s-md); font-size: var(--fs-small); }

/* ---- Buy card ----------------------------------------------------------
   Sits at the foot of the chapter and overhangs the dark band beneath it by
   a fixed 3.5rem. That overhang is the whole transition device: the colour
   change happens *behind* a card that spans it, so the eye reads one surface
   sliding under another instead of two slides butted together. */
.buycard {
  position: relative;
  z-index: 5;
  margin-top: var(--s-xl);
  margin-bottom: -3.5rem;
  padding: var(--s-md);
  display: grid;
  gap: var(--s-sm);
  background: var(--alabaster-lift);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.buycard-copy { display: grid; gap: 0.15rem; }
.buycard-copy strong { font-size: 1.0625rem; font-weight: 600; }
.buycard-copy span { font-size: var(--fs-small); }
.buycard-actions { display: grid; gap: var(--s-2xs); }

/* ═══════════════════════════════════════════════════ DARK INSERT BANDS
   Both dark bands make room for the buy card overhanging them from above. */
.index-band,
.course-band { padding-top: calc(var(--section) + 3.5rem); }

/* ---- The course (ArshHar's counterpart to the index) ---- */
.course { display: grid; gap: var(--s-lg); }
.course-item { padding-top: var(--s-md); border-top: 1px solid var(--rule-firm); }
.course-n {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ochre);
  margin-bottom: var(--s-xs);
}
.course-item .h3 { margin-bottom: var(--s-2xs); }
.course-item p { font-size: var(--fs-small); }

/* ════════════════════════════════════════════════════════════════ REVIEWS
   Phone: a snap rail. Desktop: a grid whose first card spans two columns and
   is set as a lead quote. Same five list items, two different readings. */
.reviews-head { margin-top: var(--s-md); }

.rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  margin-top: var(--s-lg);
}
.rail::-webkit-scrollbar { display: none; }
.rail-track { display: flex; gap: var(--s-sm); width: max-content; padding-block: var(--s-2xs) var(--s-md); }


/* ══════════════════════════════════════════════════════════════════ STORY */
.story-grid { display: grid; gap: var(--s-lg); }
.story-art { aspect-ratio: 4 / 5; }
.story-quote { margin: var(--s-md) 0; }
.story-copy .chapter-title { margin-top: var(--s-md); }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-lg);
  margin: var(--s-lg) 0;
  padding-top: var(--s-md);
  border-top: 1px solid var(--rule);
}
.stats dt {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 3.25rem);
  line-height: 1;
  color: var(--ochre);
}
.stats dd {
  margin: 0.35rem 0 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════ CLOSE
   Shares its ground colour with the footer on purpose — there is no rule, no
   gap and no colour change between them, so the page's last screen reads as
   a single dark plate rather than a CTA stuck on top of a footer. */
.close {
  --text:       var(--alabaster);
  --text-muted: #A5A7A1;
  --heading:    var(--alabaster);
  --accent:     var(--ochre);
  --rule:       var(--line-light);
  --rule-firm:  var(--line-light-firm);
  background: var(--charcoal-deep);
  color: var(--alabaster);
  text-align: center;
}
.close-title {
  color: var(--alabaster);
  /* Room for the italic descender on the closing line. --lh-display is 0.86,
     which sets the box shorter than the glyphs it contains; without this the
     tail of "journey" lands on top of the paragraph beneath. */
  padding-bottom: 0.16em;
}
.close-lede { margin: var(--s-lg) auto; text-align: center; }
.close-actions { display: flex; flex-direction: column; gap: var(--s-2xs); }
.close-actions .btn--ghost { color: var(--alabaster); border-color: var(--line-light-firm); }
.close-fine { margin-top: var(--s-lg); font-size: var(--fs-micro); color: #8E918B; }
.close-fine a { color: var(--ochre); text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════ TABLET (≥640px) */
@media (min-width: 640px) {
  .hero-actions { flex-direction: row; }
  .hero-actions .btn { width: auto; }
  .close-actions { flex-direction: row; justify-content: center; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-md); }
  .course { grid-template-columns: repeat(3, 1fr); gap: var(--s-md); }
  .buycard { grid-template-columns: 1fr auto; align-items: center; }
  .buycard-actions { grid-template-columns: auto auto; }
}

/* ══════════════════════════════════════════════════ DESKTOP (≥1024px)
   This is where the layout stops being the phone design at a larger size and
   becomes its own composition: the hero index spreads across the foot of the
   image, the chapters go asymmetric, the story art bleeds off the left edge,
   and the review rail becomes a static grid with a lead quote. */
@media (min-width: 1024px) {

  /* ---- Hero: words left, photograph right ---- */
  .hero {
    min-height: 100svh;               /* svh: no jump when mobile chrome hides */
    display: flex;
    align-items: center;
    padding-block: calc(var(--nav-h) + var(--s-lg)) var(--s-lg);
  }
  .hero-grid {
    width: 100%;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "top    art"
      "bottom art";
    align-items: center;
    column-gap: var(--s-2xl);
    row-gap: var(--s-md);
  }
  .hero-top    { grid-area: top;    align-self: end; }
  .hero-bottom { grid-area: bottom; align-self: start; }
  .hero-art    {
    grid-area: art;
    aspect-ratio: 4 / 5;
    max-height: 68svh;
    width: auto;                 /* see the note on .hero-art above */
    max-width: 100%;
    margin-inline: auto 0;
  }

  /* The display scale was set for a headline running the full page width. In
     a half-width column the same clamp resolves to ~168px, which wrapped BOTH
     masked lines and turned a two-line headline into four — and a line that
     wraps inside a `.line-mask` breaks the reveal as well as the layout, since
     the mask is authored per line. Narrower column, smaller ceiling. */
  .hero-title { font-size: clamp(3.25rem, 5.4vw, 5.25rem); max-width: none; }
  .hero-lede  { max-width: 34ch; margin-bottom: var(--s-md); }

  .hero-actions { flex-direction: row; gap: var(--s-2xs); }
  .hero-actions .btn { width: auto; }
  .hero-secondary { display: inline-flex; }

  /* ---- The range ---- */
  .range-index { grid-template-columns: repeat(2, 1fr); gap: var(--s-sm); }

  /* Scroll cue — desktop only, where there is no obvious "more below". */
  .hero-scroll {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: absolute;
    right: var(--gutter);
    bottom: var(--s-lg);
    z-index: 2;
    font-size: var(--fs-micro);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--text-muted);
    writing-mode: vertical-rl;
  }
  .hero-scroll > span {
    width: 1px;
    height: 3.5rem;
    background: linear-gradient(to bottom, var(--terracotta), transparent);
    animation: scroll-cue 2.4s var(--ease-soft) infinite;
  }
  @keyframes scroll-cue {
    0%   { transform: scaleY(0); transform-origin: top; }
    45%  { transform: scaleY(1); transform-origin: top; }
    55%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }

  /* ---- Process ---- */
  .process-title { max-width: 14ch; }
  .steps { gap: var(--s-lg); }
  .step-num { font-size: 3.5rem; }

  /* ---- Chapters: asymmetric, and threaded harder ---- */
  .chapter-artwrap { width: min(34%, 26rem); }
  .chapter-stage { margin-top: calc(var(--fs-chapter) * -0.30); }

  .chapter-tag { bottom: 12%; left: -2.5rem; }
  .chapter--flip .chapter-tag { left: auto; right: -2.5rem; }

  .chapter-aside {
    margin-top: var(--s-lg);
    font-size: 1.4rem;
    max-width: 46ch;
  }

  .chapter-detail {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--s-2xl);
    margin-top: var(--s-2xl);
    padding-top: var(--s-lg);
    border-top: 1px solid var(--rule);
  }
  .chapter-howto { max-width: 40ch; }

  .buycard {
    padding: var(--s-md) var(--s-lg);
    margin-bottom: -4.5rem;
  }
  .index-band, .course-band { padding-top: calc(var(--section) + 4.5rem); }

  /* ---- Reviews: rail becomes a grid, first card leads ---- */
  .rail { overflow: visible; padding-inline: 0; }
  .rail-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-sm);
    width: auto;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .review { flex: none; }
  .review:first-child { grid-column: span 2; }
  .review:first-child .review-text { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
  .rail-hint { display: none; }

  /* ---- Story: art bleeds off the left edge of the viewport ---- */
  .story-grid {
    grid-template-columns: 0.95fr 1fr;
    gap: var(--s-2xl);
    align-items: center;
  }
  .story-art {
    aspect-ratio: 3 / 4;
    margin-left: calc(-1 * var(--bleed-side));
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
  }
  .stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: var(--s-2xl);
  }

  /* ---- Close ---- */
  .close { padding-block: calc(var(--section) * 1.15); }
  .close-title { max-width: 16ch; margin-inline: auto; }
}

/* ══════════════════════════════════════════════════ WIDE (≥1440px) */
@media (min-width: 1440px) {
  .chapter-artwrap { width: 30%; }
}


/* The whole of ArshHar's formulation, stated in a sentence on the olive band
   rather than given an index of its own — see the note in index.php. Sized
   between the heading and the course copy so it reads as a caption to the
   headline, not as another step. */
.course-ing {
  margin: calc(var(--s-lg) * -0.4) 0 var(--s-lg);
  max-width: 46ch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.35;
  color: var(--accent);
}