/* ==========================================================================
   Shree Howrah · landing
   Type is Manrope only, matching the Shopify theme.
   Ink is never pure black. Section padding runs on three tiers, 8px grid.
   ========================================================================== */

:root{
  --ink:#17120F;
  --ink-2:#4A403A;
  /* Was #8A7C72, which is 3.6:1 on the cream and fails AA. The tertiary ink
     carries the fabric name on every product card, the wholesale line and the
     Instagram sub — small warm-grey type on a warm cream page, which is exactly
     the pairing that dies on a phone screen in daylight. Set against the DARKER
     of the two creams, not the lighter one: the bestsellers rail sits on
     --paper-2, so a value that clears 4.5:1 on --paper alone still failed there.
     #71645B is the same warm grey, 5.1:1 on paper and 4.6:1 on paper-2, still
     clearly a third-rank ink under --ink-2, and no new hue on the page. */
  --ink-3:#71645B;
  --paper:#F7F2E8;
  --paper-2:#EFE7D9;
  --line:#DED3C0;
  /* LOCKED 2026-07-21: wine dark on cream. The store's own wine, lifted from
     the Shopify theme's foreground colour, is the only accent AND the colour of
     every dark fold. There is no green anywhere on this page: the WhatsApp
     brand green, the forest band and the greenish video placeholders were all
     replaced with the wine, because none of them belonged to Shree Howrah. */
  --wine:#5A1822;
  --wine-d:#41111A;
  --madder:#5A1822;
  --madder-d:#41111A;
  /* Sampled straight out of the official logo (assets/img/logo.png): the gold
     of the H and the S is #CC7224, the wordmark crimson is #BA2448. The deep
     wine stays the surface colour; the gold is what lights it. */
  --gold:#CC7224;
  --gold-lt:#E4A05C;
  --crimson:#BA2448;
  --brass:#CC7224;
  --marigold:#E9C878;      /* kept for accents only, no longer a fold colour */
  --offwhite:#FCFAF6;      /* the festive fold, one step lighter than paper */
  --forest:#2A1418;        /* was a forest green; now the wine-black band */
  --wa:var(--wine);
  --wa-h:#71212F;
  --wa-ink:#FBF7F0;

  /* Surfaces that carry the dark folds, the solid nav and the footer. */
  --dark:#4A1220;
  --dark-2:#350D17;

  --pad-s:clamp(2.5rem,5vw,4rem);
  --pad-m:clamp(4rem,8vw,6.5rem);
  --pad-l:clamp(5.5rem,11vw,9rem);
  --gut:clamp(1.25rem,4vw,4rem);
  --maxw:1360px;

  --ui:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The floor is 16px, not 15. Running copy on this page is Bengali written in
   Roman letters — a reader decodes it by sound, not by word shape, so she is
   reading it closer to letter by letter than an English sentence. 15px was
   under the size that survives that on a phone held at arm's length. The rest
   of the curve is unchanged, so nothing above ~800px moves. */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:clamp(1rem,.9rem + .2vw,1.0625rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
h1,h2,h3{font-family:var(--ui);font-weight:600;line-height:1.08;letter-spacing:-.025em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--madder);outline-offset:3px}

.eyebrow{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.7);margin:0 0 .9rem
}
.eyebrow--ink{color:var(--madder)}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.6rem;border-radius:999px;border:0;cursor:pointer;
  font-weight:700;font-size:.9375rem;letter-spacing:-.01em;
  transition:transform .3s var(--ease),background .3s var(--ease)
}
.btn:hover{transform:translateY(-2px)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--wa{background:var(--wa);color:var(--wa-ink)}
/* Same metrics as the nav WhatsApp pill. The full-size .btn was too tall
   sitting next to a section heading. */
.btn--sm{padding:.58rem 1.15rem;font-size:.8125rem;font-weight:800}
.btn--wa svg{width:20px;height:20px}
.btn--wa:hover{background:var(--wa-h)}
/* 39px is a miss on a thumb. Everything a touch device has to hit clears 44. */
@media (max-width:900px){.btn--sm{padding:.75rem 1.25rem}}

.head{max-width:min(46rem,90vw);margin:0 auto var(--pad-s)}
.head--c{text-align:center}
.head h2{font-size:clamp(1.75rem,1.2rem + 2.6vw,3.1rem)}
.head__sub{margin-top:.9rem;color:var(--ink-2)}
.head--light h2{color:var(--paper)}
.head--light .head__sub{color:rgba(247,242,232,.72)}

[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ===================== SITE HEAD ===================== */
/* One fixed stack: announcement strip on top, nav under it, both edge to edge.
   The floating glass pill is gone. A pill reads as an app chrome; a shop needs
   a shelf. The strip retracts on scroll so the nav alone follows the reader. */
.site-head{position:fixed;z-index:100;top:0;left:0;right:0}

/* The strip is plain wine. A tiled buti was tried first and read as busy
   wallpaper; a gold dot grid replaced it and was still too much at strip
   height. Nothing behind the message is the answer. */

/* ---- announcement strip ---- */
.announce{
  display:flex;align-items:center;justify-content:center;gap:.35rem;
  background:var(--wine);
  color:var(--wa-ink);
  height:var(--ann-h,40px);overflow:hidden;
  transition:height .4s var(--ease),opacity .3s var(--ease)
}
.site-head.is-scrolled .announce{height:0;opacity:0}
/* No flex:1 here on purpose. The stack is a grid with every message in one
   cell, so the window is exactly as wide as the longest message and the two
   arrows sit beside the text instead of pinned to the far screen edges. */
.announce__win{position:relative;max-width:min(46rem,74vw);height:100%;display:grid;place-items:center;text-align:center}
/* Each message slides across as it swaps, so the strip reads as moving on its
   own rather than as a static line someone has to click an arrow to change. */
.announce__item{
  grid-area:1/1;display:inline-flex;align-items:center;gap:.55rem;flex-wrap:nowrap;justify-content:center;
  font-size:.8125rem;font-weight:600;letter-spacing:.005em;line-height:1.2;white-space:nowrap;
  opacity:0;transform:translateX(26px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)
}
.announce__item.is-on{opacity:1;transform:none;pointer-events:auto}
.announce__item.is-out{opacity:0;transform:translateX(-26px)}
@media (prefers-reduced-motion:reduce){
  .announce__item,.announce__item.is-out{transform:none}
}
.announce__cta{
  font-weight:800;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--gold-lt);
  white-space:nowrap;transition:text-decoration-color .25s
}
.announce__item:hover .announce__cta{text-decoration-color:currentColor}
.announce__arw{
  flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;opacity:.55;
  transition:opacity .25s
}
.announce__arw:hover{opacity:1}
.announce__arw svg{width:16px;height:16px}
/* TOUCH. Both the message and the two arrows were well under a finger: 33px and
   26px. Everything here fills the strip's own height instead, so the whole
   band is tappable and the arrows are a 36-wide column rather than a small
   floating disc. Set at 900, not 600 — a tablet is a touch device too. */
@media (max-width:900px){
  .announce{--ann-h:44px}
  .announce__win{place-items:stretch}
  /* `place-items:stretch` alone left the message 33px tall inside a 44px band —
     it is an inline-flex box and it sized to its own two lines. An explicit
     floor is what actually makes the whole band the tap target the comment
     above promises. */
  .announce__item{align-items:center;justify-content:center;min-height:var(--ann-h,44px)}
  .announce__arw{width:36px;height:var(--ann-h,44px);opacity:.7}
}
/* PHONE. `white-space:nowrap` plus the strip's `overflow:hidden` was eating the
   message: at 390px the longest line ran past both edges and took BOTH arrows
   off screen with it. So on a phone the message wraps to two lines and the
   strip is tall enough to hold them. The height stays a fixed number, not auto,
   because `.is-scrolled` animates it to 0 and auto will not transition. */
@media (max-width:600px){
  .announce{--ann-h:52px;gap:0}
  .announce__win{max-width:none;padding-inline:.15rem}
  /* 11px was the smallest type a customer had to read anywhere on the page, and
     it was carrying the offer. 12px, and the band grows by 4px to hold two
     lines of it with air. `row-gap:0` matters: the wrap gap was being paid
     twice, between the two lines and again before the CTA, which is what pushed
     a three-line message past the strip's own `overflow:hidden`. */
  .announce__item{
    font-size:.75rem;line-height:1.3;column-gap:.35rem;row-gap:0;
    white-space:normal;flex-wrap:wrap;text-wrap:balance
  }
  .announce__arw svg{width:15px;height:15px}
}

/* ---- jump targets clear the fixed head ----
   Every in-page link lands its section top at viewport 0, so the only thing
   holding the heading clear of the fixed head was the section's own top
   padding. Above 900 that padding is 6.5rem and comfortably wins. Below it the
   padding drops to 4rem while the head stays ~110px, and the sums invert: at
   390 and 768 the heading settled 2-3px BEHIND the collapsed head, and 22-55px
   behind it while the announce strip was still out.

   The strip-out case is not a corner: `prefers-reduced-motion` turns
   `scroll-behavior` to auto, so the jump is instant and the strip then takes
   its full .4s to retract with the heading underneath it. The phone drawer
   fires this path on every link tap, which is now the only way to reach a
   section on a phone.

   5rem covers the taller of the two heads (52px strip + 57px bar) with room,
   and lands the heading about one --pad-m below the bar once the strip is
   gone. Scoped, because above 900 the padding already does this job and the
   desktop landing should not move. Same fix as the catalogue's `.pc`. */
@media (max-width:900px){
  #collections,#new,#best,#craft,#oneofone,#story,#trust,#find,#ask{scroll-margin-top:5rem}
}

/* ---- nav: edge to edge, no pill, no glass ---- */
.nav{
  display:block;color:var(--paper);
  background:transparent;border-bottom:1px solid rgba(255,255,255,.14);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)
}
.nav__in{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem var(--gut);min-height:60px
}
.nav.is-solid{
  background:var(--paper);color:var(--ink);border-bottom-color:var(--line);
  box-shadow:0 8px 30px -24px rgba(23,18,15,.7)
}
.nav__mark{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:.9375rem;letter-spacing:-.02em}
.nav__disc{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;font-size:.66rem;font-weight:800;letter-spacing:.02em}
/* The logo is crimson and gold on transparent, so it vanishes over a dark hero.
   Knocked out to paper while the nav is transparent, back to full brand colour
   the moment the nav goes solid. */
.nav__logo{height:34px;width:auto;filter:brightness(0) invert(1);transition:filter .4s var(--ease)}
.nav.is-solid .nav__logo{filter:none}
.nav__logo--foot{filter:brightness(0) invert(1)}
@media (max-width:600px){.nav__logo{height:28px}}
.nav__links{display:flex;gap:1.6rem;font-size:.8125rem;font-weight:600}
.nav__links a{opacity:.82;transition:opacity .25s}
.nav__links a:hover{opacity:1}
.nav__cta{display:inline-flex;align-items:center;gap:.4rem;background:var(--wa);color:var(--wa-ink);font-weight:800;font-size:.78rem;padding:.58rem 1rem;border-radius:999px;transition:background .25s}
.nav__cta svg{width:15px;height:15px}
.nav__cta:hover{background:var(--wa-h)}
.nav__acts{display:flex;align-items:center;gap:.5rem}

/* ---- burger: only ever exists under the tablet breakpoint ---- */
.nav__burger{
  display:none;width:44px;height:44px;padding:0;margin-right:-.35rem;
  background:none;border:0;cursor:pointer;color:inherit;
  place-items:center
}
.nav__burger > span{display:block;width:22px}
.nav__burger i{
  display:block;height:1.8px;border-radius:2px;background:currentColor;
  transition:transform .32s var(--ease),opacity .22s var(--ease)
}
.nav__burger i + i{margin-top:5.4px}
[data-mnav-open] .nav__burger i:nth-child(1){transform:translateY(7.2px) rotate(45deg)}
[data-mnav-open] .nav__burger i:nth-child(2){opacity:0}
[data-mnav-open] .nav__burger i:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav__burger i{transition:none}}

/* TABLET AND PHONE. The bar's seven destinations do not disappear, they move
   into the drawer — same list, built from the same array in build_page.py. */
@media (max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .nav__in{min-height:56px;gap:.75rem}
  /* The wordmark is 28-34px tall, so the home link was a 28-34px target, and
     the pill was 39px. Both are thumb-sized from the tablet breakpoint down. */
  .nav__mark,.nav__cta{min-height:44px}
}
@media (max-width:600px){
  /* Logo, WhatsApp pill and burger have to sit on one 390px line without any
     of them shrinking below a thumb. Trimming the pill's side padding is what
     buys the room; nothing is dropped. */
  .nav__in{padding-inline:var(--gut);gap:.5rem}
  .nav__cta{padding:.62rem .85rem;font-size:.72rem}
  .nav__cta svg{width:14px;height:14px}
}

/* ===================== MOBILE NAV DRAWER ===================== */
/* `overflow:hidden` on the fixed wrapper is load-bearing: the panel parks at
   translateX(100%), which is off the right edge, and without the clip it can
   register as document overflow. */
.mnav{position:fixed;inset:0;z-index:120;overflow:hidden;visibility:hidden;pointer-events:none}
.mnav.is-open{visibility:visible;pointer-events:auto}
@media (min-width:901px){.mnav{display:none}}
.mnav__bd{
  position:absolute;inset:0;background:rgba(23,18,15,.62);
  opacity:0;transition:opacity .38s var(--ease)
}
.mnav.is-open .mnav__bd{opacity:1}
/* Not full width on purpose: the strip of backdrop left over is the affordance
   that says "tap out here to close", which is what a phone reader reaches for
   before they look for an X. */
.mnav__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(21rem,86vw);
  background:var(--dark);color:var(--paper);
  display:flex;flex-direction:column;gap:.25rem;
  padding:calc(.9rem + env(safe-area-inset-top)) 1.35rem calc(1.35rem + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.8);
  transform:translateX(100%);transition:transform .42s var(--ease)
}
.mnav.is-open .mnav__panel{transform:none}
.mnav__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px}
.mnav__eyebrow{
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--gold-lt)
}
.mnav__x{
  width:44px;height:44px;margin-right:-.6rem;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--paper);opacity:.8;
  transition:opacity .25s
}
.mnav__x:hover{opacity:1}
.mnav__x svg{width:21px;height:21px}
.mnav__list{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column}
.mnav__list a,.mnav__out{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:52px;padding:.55rem 0;
  font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;color:var(--paper);
  border-bottom:1px solid rgba(247,242,232,.12);
  transition:color .25s var(--ease)
}
.mnav__list i,.mnav__out i{
  font-style:normal;font-size:.9rem;color:var(--gold-lt);opacity:.8;
  transition:transform .25s var(--ease)
}
.mnav__list a:hover i,.mnav__out:hover i{transform:translateX(3px)}
.mnav__out{font-size:.9375rem;color:var(--gold-lt);border-bottom:0;margin-top:.35rem}
/* Pushed to the floor of the sheet, where the thumb already is, and given a
   rule so a short nav does not leave it floating in the middle of nowhere. */
.mnav__foot{
  margin-top:auto;padding-top:1.35rem;border-top:1px solid rgba(247,242,232,.12);
  display:flex;flex-direction:column;align-items:stretch;gap:.75rem
}
.mnav__wa{justify-content:center;width:100%}
.mnav__tel{
  text-align:center;font-size:.8125rem;font-weight:600;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(247,242,232,.66);transition:color .25s
}
.mnav__tel:hover{color:var(--paper)}
/* Each row arrives after the panel, in reading order. Same reveal language as
   the rest of the page, just shorter because a drawer must feel instant. */
.mnav__list li,.mnav__out,.mnav__foot{
  opacity:0;transform:translateX(16px);
  transition:opacity .34s var(--ease),transform .34s var(--ease)
}
.mnav.is-open .mnav__list li,
.mnav.is-open .mnav__out,
.mnav.is-open .mnav__foot{opacity:1;transform:none}
.mnav.is-open .mnav__list li:nth-child(1){transition-delay:.09s}
.mnav.is-open .mnav__list li:nth-child(2){transition-delay:.13s}
.mnav.is-open .mnav__list li:nth-child(3){transition-delay:.17s}
.mnav.is-open .mnav__list li:nth-child(4){transition-delay:.21s}
.mnav.is-open .mnav__list li:nth-child(5){transition-delay:.25s}
.mnav.is-open .mnav__list li:nth-child(6){transition-delay:.29s}
.mnav.is-open .mnav__out{transition-delay:.33s}
.mnav.is-open .mnav__foot{transition-delay:.37s}
@media (prefers-reduced-motion:reduce){
  .mnav__panel,.mnav__bd,.mnav__list li,.mnav__out,.mnav__foot{transition:none!important}
  .mnav__list li,.mnav__out,.mnav__foot{opacity:1;transform:none}
}

/* ===================== HERO (centred) ===================== */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--ink);text-align:center}
.hero__stack{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hero__slide.is-on{opacity:1}
.hero__slide img,.hero__slide video{width:100%;height:100%;object-fit:cover;object-position:center 45%;transform:scale(1.04);transition:transform 9s linear}
.hero__slide.is-on img,.hero__slide.is-on video{transform:scale(1.1)}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(12,8,6,.42) 0%,rgba(12,8,6,.62) 55%,rgba(12,8,6,.82) 100%)}
.hero__body{position:relative;z-index:2;width:100%;max-width:var(--maxw);padding:5.5rem var(--gut) clamp(4rem,7vw,5.25rem);color:var(--paper);display:flex;flex-direction:column;align-items:center}
/* Tight but fixed: every headline is two lines and every lede one or two, so a
   modest floor keeps the buttons from shifting as slides change. */
.hero__caps{position:relative;width:100%;min-height:clamp(10.5rem,17vw,13rem);display:grid;place-items:center}
.hero__cap{grid-area:1/1;max-width:min(48rem,92vw);opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.hero__cap.is-on{opacity:1;transform:none;pointer-events:auto}
/* Two lines on every slide, always. The break is authored with <br>; balance is
   off because it would re-flow one slide to three lines and the caption box
   would jump height between slides. Each authored line is short enough that it
   cannot wrap at 360px, which is what keeps the two-line rule true on a phone. */
.hero__cap h1{
  font-size:clamp(1.9rem,1.05rem + 3.6vw,4rem);font-weight:600;letter-spacing:-.035em;
  text-wrap:nowrap
}
.hero__cap .lede{margin:1.1rem auto 0;font-size:clamp(.95rem,.9rem + .3vw,1.125rem);color:rgba(247,242,232,.84);max-width:34rem}
.hero__foot{display:flex;flex-direction:column;align-items:center;margin-top:clamp(.5rem,1.2vw,.9rem)}
.hero__btns{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:center}
/* Pinned to the bottom centre of the fold, not stacked under the buttons. */
.hero__dots{
  position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  bottom:clamp(1.1rem,2.6vw,1.9rem);display:flex;gap:.6rem
}
/* The ring is the constant; the fill is what moves. An outer halo on the
   active dot read as a second, blurrier circle. */
.hero__dots button{
  position:relative;
  width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;border:1.5px solid rgba(247,242,232,.55);
  transition:background .35s var(--ease),border-color .35s var(--ease)
}
/* An 11px disc is an 11px target. The dot stays 11px and the hit area grows
   around it — full 44px vertically, and horizontally as wide as the gap allows
   without a tap landing on the neighbouring slide. */
.hero__dots button::after{content:"";position:absolute;inset:-17px -9px}
.hero__dots button:hover{border-color:var(--paper);background:rgba(247,242,232,.35)}
.hero__dots button[aria-selected="true"]{background:var(--paper);border-color:var(--paper)}
.hero__arw{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--paper);background:rgba(23,18,15,.3);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);transition:background .25s}
.hero__arw:hover{background:rgba(23,18,15,.62)}
.hero__arw svg{width:21px;height:21px}
.hero__arw--prev{left:clamp(.5rem,2vw,1.5rem)}
.hero__arw--next{right:clamp(.5rem,2vw,1.5rem)}
/* TOUCH. The arrows used to be deleted at 760, which left swipe as the only way
   to reach slides two to five and nothing on screen said so. They stay — they
   just stop being edge furniture, because on a narrow fold a disc pinned to the
   side sits on top of the lede. They drop to the foot of the fold and flank the
   dots, so the whole carousel control reads as one object at the bottom of the
   thumb's arc. Same rule as the two rails and the films band. */
@media (max-width:900px){
  .hero__dots{bottom:1.6rem;gap:1.1rem}
  .hero__arw{
    top:auto;bottom:.55rem;transform:none;width:44px;height:44px;
    background:rgba(23,18,15,.42)
  }
  .hero__arw svg{width:19px;height:19px}
  /* Five dots at an 1.1rem gap are 125px wide, so the arrows clear them by
     10px on each side and the three controls read as one cluster. */
  .hero__arw--prev{left:calc(50% - 117px);right:auto}
  .hero__arw--next{right:calc(50% - 117px);left:auto}
  /* Room for the fixed head above (a 44-52px strip plus a 56px bar) and for the
     control cluster below, so neither ever meets the caption. */
  .hero__body{padding-top:7.5rem;padding-bottom:6.5rem}
  /* The caption box reserves 168px and the caption itself is taller than that on
     a phone, so the buttons were landing 9px under the last line of the lede and
     the whole thing read as one crowded slab. The floor moves the pills off the
     sentence; the fold has room to spare below them. */
  .hero__foot{margin-top:1.6rem}
}
/* Two pills of different widths centred under each other read as floating.
   Stacked and matched, they read as a choice. */
@media (max-width:600px){
  .hero__foot{width:100%}
  .hero__btns{flex-direction:column;align-items:stretch;width:min(20rem,100%);margin-inline:auto;gap:.6rem}
  .hero__btns .btn{justify-content:center}
}

/* ===================== TICKER ===================== */
.ticker{background:var(--dark);color:var(--paper);overflow:hidden;padding:.85rem 0;border-block:1px solid rgba(247,242,232,.1)}
.ticker__row{display:flex;gap:3rem;width:max-content;animation:slide 46s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__row{animation:none}}
.ticker span{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(247,242,232,.62);white-space:nowrap}
.ticker span::after{content:"·";margin-left:3rem;color:var(--madder)}

/* ===================== PRODUCT CARD ===================== */
/* The card's children are spans, which are inline by default: the card height
   then came only from the image and the title spilled over the row below.
   Flex column forces every child to be a block and the row to size honestly. */
.pcard{display:flex;flex-direction:column;position:relative;background:transparent}
.pcard__im{display:block;position:relative;overflow:hidden;border-radius:4px;background:var(--paper-2);aspect-ratio:4/5}
.pcard__im img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pcard:hover .pcard__im img{transform:scale(1.045)}
.pcard__tag{position:absolute;top:.6rem;left:.6rem;background:rgba(23,18,15,.82);color:var(--paper);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.3rem .55rem;border-radius:3px;backdrop-filter:blur(6px)}
.pcard__ask{position:absolute;left:.6rem;right:.6rem;bottom:.6rem;background:var(--paper);color:var(--ink);text-align:center;font-size:.8125rem;font-weight:700;padding:.6rem;border-radius:3px;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pcard:hover .pcard__ask,.pcard:focus-visible .pcard__ask{opacity:1;transform:none}
/* Two-line clamp with a reserved box, so every card in a row lines up no matter
   how long the woven name runs. Without it the titles ran into the next row. */
.pcard__t{
  margin-top:.7rem;font-size:.8125rem;font-weight:600;line-height:1.35;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em
}
.pcard__m{margin-top:.3rem;display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.pcard__p{font-weight:800;font-size:.9375rem}
.pcard__f{
  font-size:.6875rem;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden
}
@media (hover:none){.pcard__ask{opacity:1;transform:none}}

/* ===================== RAIL ===================== */
.rail{padding:var(--pad-m) 0}
.rail__head{max-width:var(--maxw);margin:0 auto var(--pad-s);padding:0 var(--gut);display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.rail__head h2{font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem)}
.rail__wrap{position:relative}
/* On a cream fold the dark glass arrow disappears, so the rail's arrows are
   paper on ink, the inverse of the ones over the dark films band. */
/* Cream discs with a hairline sat on cream cards on a cream fold and read as
   nothing — bhaiya asked for arrows on a rail that already had them, which is
   the same as saying he could not see them. On the light folds they are solid
   wine now, the way every other control on the page is. */
.rail__wrap .rarw{background:var(--wine);color:var(--wa-ink);border-color:transparent;box-shadow:0 10px 28px -12px rgba(23,18,15,.7)}
.rail__wrap .rarw:hover{background:var(--wa-h);border-color:transparent}
.rail__track{display:flex;gap:clamp(.7rem,1.4vw,1.15rem);overflow-x:auto;scroll-snap-type:x proximity;padding:0 max(var(--gut),calc((100vw - var(--maxw))/2)) .5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
/* scroll-snap-align:start aligns a card to the CONTAINER edge, not to its
   padding box, so the browser settled the rail one gutter in: the first card
   was clipped by the viewport edge and the left arrow never disabled. The
   scroll padding has to match the track padding exactly. */
.rail__track,.motion__rail{scroll-padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2))}
.rail__track::-webkit-scrollbar{display:none}
/* 20vw floored at 150px meant the card never grew until 1180px. The peek of a
   third card at 390px is what tells a phone reader the rail swipes, so the
   width is now tuned to leave one: 2 cards + ~30px of the next. */
.rail__track .pcard{flex:0 0 clamp(150px,38vw,236px);scroll-snap-align:start}
/* TOUCH. `flex-wrap` let the fabric line sit BESIDE the price on a card whose
   fabric name is short and UNDER it on the next card along, so two cards in the
   same rail had their prices on one baseline and their feet on two. On a narrow
   card that reads as a broken row rather than as variable copy. The fabric takes
   its own line on every card from the tablet breakpoint down, which gives the
   rail a title / price / cloth grid the eye can run along. */
@media (max-width:900px){
  .pcard__m{row-gap:.2rem}
  .pcard__f{flex:0 0 100%}
}
/* PHONE. The rails stay horizontal on purpose — they are shortlists of ten,
   not the catalogue, and a swipe is the right gesture for a shortlist. */
@media (max-width:600px){
  .rail__head{gap:1.25rem}
  .pcard__t{font-size:.875rem;min-height:2.6em}
  .pcard__p{font-size:1rem}
  .pcard__ask{font-size:.8125rem;padding:.75rem .5rem}
  /* 10px of tracked-out caps on a photograph is a label you have to decide to
     read. It is the only thing naming the shelf a card belongs to. */
  .pcard__tag{font-size:.6875rem;padding:.35rem .6rem}
}

/* ===================== COLLECTIONS ===================== */
.cols{padding:var(--pad-m) var(--gut);max-width:var(--maxw);margin:0 auto}
.cols__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.7rem,1.3vw,1.1rem)}
.ccard{position:relative;overflow:hidden;border-radius:5px;background:var(--ink);display:block;min-height:clamp(15rem,23vw,20rem)}
.ccard img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1.1s var(--ease)}
.ccard:hover img{transform:scale(1.05)}
/* The scrim has to carry FOUR lines now — kicker, name, blurb, actions — and
   three of the seven shelf photographs are cream or ivory cloth. The old ramp
   (.85 at the very bottom, gone by 50%) left the kicker sitting on bare white.
   The dark now holds most of the way up the caption before it falls away. */
.ccard__sc{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,7,5,.94) 0%,rgba(10,7,5,.86) 22%,rgba(10,7,5,.62) 42%,rgba(10,7,5,.22) 66%,rgba(10,7,5,0) 88%)}
.ccard__b{position:absolute;left:0;bottom:0;padding:clamp(1rem,1.8vw,1.5rem);color:var(--paper)}
/* "20 designs · 158 sarees · from ₹995" was #CC7224 gold at 10px over a
   photograph — bhaiya could not read it (2026-07-26). Gold that dark only works
   on a guaranteed dark surface, and half these covers are ivory cloth. Lighter
   marigold, a size up, less tracking, and the caption gets its own panel below
   rather than borrowing whatever the photo happens to be. */
.ccard__k{display:block;font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--marigold);font-weight:800}
.ccard__t{display:block;font-size:clamp(1.15rem,.95rem + .9vw,1.65rem);font-weight:700;margin-top:.4rem;letter-spacing:-.02em}
.ccard__d{display:block;margin-top:.35rem;font-size:.8125rem;color:rgba(247,242,232,.75);max-width:24rem}
/* Seven shelves on an explicit 12-column layout: 7+5 / 4+4+4 / 6+6. Auto
   placement with span hints leaves a hole in the last row — that bug was fixed
   once already on the five-card version, so the placement stays explicit. */
.c-a{grid-column:span 7;min-height:clamp(19rem,29vw,26rem)}
.c-b{grid-column:span 5}
.c-c{grid-column:span 4}
.c-d{grid-column:span 4}
.c-e{grid-column:span 4}
.c-f{grid-column:span 6}
.c-g{grid-column:span 6}
/* TABLET. Three across does not survive here. At 768px a span-4 card is 226px
   wide, and the caption it has to carry — kicker, name, blurb, a link and a
   pill — is 220px TALL at that width, taller than the card, so it swallowed the
   photograph whole and started clipping the kicker again. The lead shelf keeps
   the full width and the other six pair off, which gives every caption ~300px
   to lay out in and leaves the cloth visible above it. */
@media (max-width:900px){
  /* The lead shelf goes full width but kept a height tuned for a half-width
     card, so at 768 it was a 707x304 letterbox with 143px of caption in it:
     about 140px of cloth across two thirds of a metre of screen, the flattest
     tile on the page and the one that is supposed to sell the shelf. The pairs
     beside it read at roughly 2.5:1, so the lead is set to match. */
  .c-a{grid-column:span 12;min-height:clamp(19rem,52vw,26rem)}
  .c-b,.c-c,.c-d,.c-e,.c-f,.c-g{grid-column:span 6;min-height:clamp(19rem,42vw,22rem)}
}
/* PHONE. One column, and the height is the fix that mattered: at 13rem the
   caption — kicker, name, blurb, two actions — was TALLER than the card, so it
   ran up past the top edge and `overflow:hidden` sliced the kicker in half.
   The card now carries the caption and still leaves the photograph something
   to say. */
@media (max-width:600px){
  .cols__grid{gap:1rem}
  .c-a,.c-b,.c-c,.c-d,.c-e,.c-f,.c-g{
    grid-column:span 12;min-height:clamp(22rem,92vw,26rem)
  }
}

/* Two destinations per card, which is what bhaiya asked for. The stretched link
   takes the whole card to that shelf of the catalogue; the caption is
   pointer-events:none so words do not swallow the click; only the WhatsApp pill
   opts back in. Nested anchors would be invalid HTML. */
.ccard__go{position:absolute;inset:0;z-index:2}
/* The caption carries its own floor. A scrim tuned to one photograph is a
   gamble on the next one; this panel means every card reads the same whatever
   is behind it, and it spans the full width so no line ends on bare cloth. */
.ccard__b{z-index:3;pointer-events:none;right:0;padding-top:clamp(2.6rem,5vw,3.6rem);
  background:linear-gradient(to top,rgba(12,5,7,.95) 0%,rgba(12,5,7,.9) 52%,rgba(12,5,7,.6) 80%,rgba(12,5,7,0) 100%)}
.ccard__d{color:rgba(247,242,232,.85)}
.ccard__acts{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.85rem}
.ccard__go-l{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:800;letter-spacing:-.01em;color:var(--paper)}
.ccard__go-l i{font-style:normal;transition:transform .25s var(--ease)}
.ccard:hover .ccard__go-l i{transform:translateX(3px)}
.ccard__wa{pointer-events:auto;display:inline-flex;align-items:center;background:var(--wa);color:var(--wa-ink);border-radius:999px;padding:.42rem .85rem;font-size:.6875rem;font-weight:800;letter-spacing:-.01em;transition:background .25s}
.ccard__wa:hover{background:var(--wa-h)}
.cols__foot{display:flex;justify-content:center;margin-top:var(--pad-s)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* TOUCH. These have to sit AFTER the .ccard__b / .ccard__wa rules above, not up
   with the grid placement: same specificity, so the later block is the one that
   wins and an earlier override silently did nothing.
   The pill was 31px tall sitting INSIDE a link that takes the whole card, so a
   thumb that misses it opens the catalogue instead of WhatsApp. */
@media (max-width:900px){
  .ccard__wa{padding:.8rem 1.15rem;font-size:.75rem}
  .ccard__acts{gap:.85rem;margin-top:1rem}
}
@media (max-width:600px){
  .ccard__b{padding:clamp(2.4rem,9vw,3.2rem) 1.1rem 1.1rem}
  .ccard__d{max-width:none}
  /* This line is the one bhaiya said he could not read (2026-07-26). It was
     fixed by colour and by giving it a panel; on a phone it is still tracked-out
     caps at the 11px floor, so it gets the half-pixel and a hair less tracking
     back. Do not take it under 11px — QA asserts the floor for that reason. */
  .ccard__k{font-size:.72rem;letter-spacing:.09em}
}

/* ===================== FIND US ===================== */
/* The store fold. An embedded map rather than a picture of one: the pin opens
   the native maps app with the route set, which is the only useful form of
   "directions" for someone standing at Howrah station. */
.find{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;max-width:var(--maxw);margin:0 auto;padding:var(--pad-l) var(--gut)}
.find__txt h2{font-size:clamp(1.7rem,1.2rem + 2.3vw,2.8rem);margin-top:.7rem}
.find__sub{margin-top:1rem;color:var(--ink-2);max-width:32rem}
.find__list{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.9rem}
.find__list li{display:grid;grid-template-columns:6.5rem 1fr;gap:.9rem;align-items:start;font-size:.875rem;color:var(--ink-2)}
.find__list strong{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:800;padding-top:.18rem}
.find__list a{border-bottom:1px solid var(--line);transition:border-color .25s}
.find__list a:hover{border-color:var(--madder)}
.find__btns{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.75rem}
.find__map{border-radius:5px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);aspect-ratio:4/3}
.find__map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.86)}
@media (max-width:900px){
  .find{grid-template-columns:1fr}
  .find__map{aspect-ratio:16/11}
  /* Bare inline tel and mailto links at 14px are a 21px target, so the box is
     padded to 44. But a border-bottom draws on the BOX, and the box is now
     11px taller than the text: every phone number and the email had a hairline
     floating a clear line-space beneath it, reading as a stray rule rather than
     as a link. A text underline hugs the glyphs however tall the box gets. */
  .find__list a{
    display:inline-block;padding-block:.7rem;line-height:1.5;border-bottom:0;
    text-decoration:underline;text-decoration-color:var(--line);
    text-decoration-thickness:1px;text-underline-offset:4px;
    transition:text-decoration-color .25s
  }
  .find__list a:hover{text-decoration-color:var(--madder)}
}
/* PHONE. A 6.5rem label column left 226px for an address, a pair of phone
   numbers and an email, so every value wrapped mid-line. The label goes above
   its value instead and the whole width is the value's. The tel and mailto
   links then get a real touch height, which they did not have as bare inline
   text at 14px. */
@media (max-width:600px){
  .find__list li{grid-template-columns:1fr;gap:.25rem}
  .find__list{gap:1.25rem}
  .find__list strong{padding-top:0}
  .find__btns .btn{flex:1 1 100%;justify-content:center}
  /* A 16:11 letterbox at 350px is a 240px map. Square gives the pin room and
     still fits on the fold with the buttons. */
  .find__map{aspect-ratio:1/1}
}

/* A second product rail needs its own surface or it reads as one long rail with
   a heading dropped into the middle of it. */
.rail--alt{background:var(--paper-2);border-block:1px solid var(--line)}
/* The one nav item that LEAVES the page. It shipped as plain text sitting at the
   end of six section anchors, which is why it read as a seventh section and
   Sahil asked for a nav link that was already there — a contrast complaint, not
   a missing control. It is now a hairline ghost pill: full opacity against the
   anchors' .82, its own border, and a gap that breaks it off the run of links.
   Border and type are `currentColor`, so it survives both nav states — paper
   over the hero, ink once `.is-solid`. Deliberately NOT filled: the WhatsApp
   pill owns the accent on this bar, and a second solid pill would split the
   one CTA. Outline beside solid is the secondary/primary pair. */
/* `.nav__links a` sets opacity .82 and outranks a bare `.nav__out` (0,1,1 beats
   0,1,0), so the class is doubled up here to win it back. Full opacity against
   the anchors' .82 is half of what separates this item from them. */
.nav__links a.nav__out,
.nav__out{
  display:inline-flex;align-items:center;gap:.3rem;
  opacity:1;margin-left:.4rem;padding:.42rem .82rem;
  border:1px solid currentColor;border-radius:999px;
  font-weight:700;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease)
}
.nav__out i{font-style:normal;font-size:.6875rem;opacity:.75;transition:transform .25s var(--ease)}
.nav__out:hover i{transform:translate(1px,-1px)}
/* Fill on hover, inverting to whatever the bar is sitting on. */
.nav:not(.is-solid) .nav__out:hover{background:var(--paper);color:var(--ink)}
.nav.is-solid .nav__out:hover{background:var(--ink);color:var(--paper)}

/* ===================== WIDE VIDEO BAND ===================== */
.band{position:relative;min-height:clamp(24rem,58vw,40rem);display:grid;place-items:center;overflow:hidden;background:var(--ink);text-align:center}
.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band__sc{position:absolute;inset:0;background:linear-gradient(to right,rgba(10,7,5,.7),rgba(10,7,5,.4) 50%,rgba(10,7,5,.7))}
.band__b{position:relative;z-index:2;color:var(--paper);padding:var(--pad-s) var(--gut);max-width:44rem}
.band__b h2{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.9rem)}
.band__b p{margin-top:.9rem;color:rgba(247,242,232,.8)}
.band__btns{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem}

/* The 96-card catalogue fold was removed on 2026-07-25 and its tab, grid and
   show-more rules went with it. Browsing lives on the catalogue site now. */
.pcard.is-hidden{display:none}

/* ===================== CRAFT ===================== */
.craft{padding:var(--pad-m) var(--gut);max-width:var(--maxw);margin:0 auto}
.craft__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.6vw,2.4rem)}
.tech figure{margin:0 0 1.15rem;overflow:hidden;border-radius:4px;background:var(--paper-2)}
.tech img,.tech video{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s var(--ease)}
.tech:hover img{transform:scale(1.04)}
.tech h3{font-size:clamp(1.15rem,1rem + .7vw,1.45rem);margin-bottom:.55rem}
.tech p{color:var(--ink-2);font-size:.875rem}
.craft__honest{margin:clamp(2.5rem,5vw,4rem) auto 0;max-width:42rem;text-align:center;font-size:clamp(1rem,.95rem + .5vw,1.25rem);color:var(--ink-2);line-height:1.55}
/* TABLET AND PHONE. Three columns of running prose go to one. A 4:3 frame at
   full tablet width is 520px of photograph before the reader reaches the words,
   so the frame flattens; on a phone the column is narrow enough that 4:3 is
   back to a sensible height. */
@media (max-width:900px){
  .craft__grid{grid-template-columns:1fr;gap:2.5rem}
  .tech img,.tech video{aspect-ratio:16/9}
}
@media (max-width:600px){.tech img,.tech video{aspect-ratio:4/3}}

/* ===================== REELS ===================== */
.motion{background:var(--forest);color:var(--paper);padding:var(--pad-m) 0;overflow:hidden}
.motion .head{padding-inline:var(--gut)}
.motion__wrap{position:relative}
.rarw{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  color:var(--paper);background:rgba(10,16,13,.55);border:1px solid rgba(247,242,232,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .25s,opacity .25s,border-color .25s
}
.rarw:hover{background:rgba(10,16,13,.85);border-color:rgba(247,242,232,.5)}
.rarw svg{width:22px;height:22px}
.rarw--prev{left:clamp(.4rem,1.5vw,1.1rem)}
.rarw--next{right:clamp(.4rem,1.5vw,1.1rem)}
.rarw[disabled]{opacity:.28;pointer-events:none}
/* TOUCH. A disc pinned to the right edge of the track lands exactly on the
   sliver of the next card — and that sliver is the ONLY thing telling a touch
   reader the rail swipes at all. The old phone rule also shrank them to 40px,
   under a thumb. So from the tablet breakpoint down the controls come off the
   track and sit under it, centred, at their full size. One rule for every
   carousel on this page: on a touch width, controls go below the track, never
   on it. The hero does the same thing with its dots. */
@media (max-width:900px){
  .rail__wrap,.motion__wrap{padding-bottom:4.25rem}
  .rail__wrap .rarw,.motion__wrap .rarw{top:auto;bottom:.5rem;transform:none}
  .rarw--prev{left:calc(50% - 59px);right:auto}
  .rarw--next{right:calc(50% - 59px);left:auto}
  /* On a desktop the disabled arrow is a hover away from being understood, so
     28% reads as "not now". On a phone there is no hover: the pair just sits
     there, and a wine disc at 28% on cream is a washed pink smudge next to a
     solid one — it looked like a rendering fault rather than a control at the
     end of its travel. Still unmistakably off, still pointer-events:none. */
  .rarw[disabled]{opacity:.45}
}
.motion__rail{display:flex;gap:clamp(.6rem,1.2vw,1rem);overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:0 max(var(--gut),calc((100vw - var(--maxw))/2));scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
@media (prefers-reduced-motion:reduce){.motion__rail{scroll-behavior:auto}}
.motion__rail::-webkit-scrollbar{display:none}
.motion__rail.is-drag{cursor:grabbing;scroll-snap-type:none}
/* The rail takes focus so arrow keys can scroll it. The global focus ring is
   wine, which is invisible against this band, so it is paper here. */
.motion__rail:focus-visible{outline:2px solid var(--paper);outline-offset:-4px}
.reel{position:relative;flex:0 0 clamp(160px,19vw,240px);aspect-ratio:9/16;border-radius:5px;overflow:hidden;scroll-snap-align:center;background:#2A1418;opacity:.5;transition:opacity .5s var(--ease)}
.reel.is-on{opacity:1}
.reel video{width:100%;height:100%;object-fit:cover}
.reel__cap{position:absolute;left:0;right:0;bottom:0;padding:2.2rem .8rem .8rem;font-size:.75rem;font-weight:600;color:var(--paper);background:linear-gradient(to top,rgba(20,7,10,.88),rgba(20,7,10,0))}
.motion__hint{margin:1.5rem auto 0;text-align:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,242,232,.42)}

/* ===================== FESTIVE ===================== */
/* Centred text, two framed images beneath. The previous full-bleed split sat
   directly under the full-bleed reels band and the two edge-to-edge frames
   fought each other; this one breathes and gives the images a margin. */
/* Marigold, not maroon. It is the pujo flower, it reads festive without
   competing with the reds in the sarees themselves, and it puts a light fold
   between the dark reels band above and the cream folds below. */
/* Was the pujo marigold, which read as ochre against the cream page. The fold
   now runs off-white over cream: it still breaks the run of dark folds, but by
   getting lighter than the page rather than more saturated than it. */
.fest{
  background:var(--offwhite);color:var(--ink);padding:var(--pad-m) var(--gut);
  border-block:1px solid var(--line)
}
.fest__inner{max-width:38rem;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.fest__inner h2{font-size:clamp(1.75rem,1.2rem + 2.6vw,2.9rem)}
.fest__inner p{color:var(--ink-2)}
.fest__inner .btn{margin-top:.5rem;background:var(--wine);color:var(--wa-ink)}
.fest__pair{
  max-width:var(--maxw);margin:clamp(2.25rem,5vw,3.5rem) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.6vw,1.4rem)
}
.fest__pair figure{margin:0}
.fest__pair img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;background:var(--paper-2);box-shadow:0 1px 0 var(--line)}
.fest__pair figcaption{margin-top:.7rem;font-size:.8125rem;color:var(--ink-2);text-align:center}
@media (max-width:600px){.fest__pair{grid-template-columns:1fr;gap:1.5rem}.fest__pair img{aspect-ratio:3/2}}

/* ===================== ONE OF ONE ===================== */
.ooo{padding:var(--pad-m) var(--gut) var(--pad-l);max-width:var(--maxw);margin:0 auto}
.ooo__row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem)}
.ooo__row figure{margin:0}
.ooo__row img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;background:var(--paper-2)}
.ooo__row figcaption{margin-top:.8rem;font-size:.9375rem;font-weight:600;display:flex;align-items:center;gap:.5rem}
.ooo__row figcaption::before{content:"";width:15px;height:1px;background:var(--madder)}
.ooo__note{margin:clamp(2rem,4vw,3.25rem) auto 0;max-width:38rem;text-align:center;color:var(--ink-3);font-size:.9375rem}
/* These are the one-of-a-kind painted sarees. Three across still reads at
   tablet width; below that a 3:4 frame is 120px wide and the painting is gone,
   so they stack rather than shrink. */
@media (max-width:600px){.ooo__row{grid-template-columns:1fr;gap:2rem}}

/* ===================== STORY ===================== */
/* "Painted one at a time" and "The house at Howrah" sat on the same paper with
   the same padding and read as one long fold. This one gets its own surface: a
   full-bleed cream band behind a still-constrained grid, drawn with a pseudo
   element so the markup and the max-width stay exactly as they were. */
.split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4.5vw,4.5rem);align-items:center;padding:var(--pad-l) var(--gut);max-width:var(--maxw);margin:0 auto}
.split::before{
  content:"";position:absolute;z-index:0;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;background:var(--paper-2);border-block:1px solid var(--line)
}
.split > *{position:relative;z-index:1}
.split__fig{margin:0;border-radius:4px;overflow:hidden;background:var(--paper-2)}
.split__fig img{width:100%;aspect-ratio:5/4;object-fit:cover}
.split__txt h2{font-size:clamp(1.6rem,1.15rem + 2.2vw,2.7rem);margin-bottom:1.15rem}
.split__txt p{color:var(--ink-2);margin-bottom:.9rem;max-width:34rem}
.split__note{margin-top:1.4rem!important;padding-left:1rem;border-left:2px solid var(--madder);color:var(--ink)!important;font-weight:600}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ===================== TRUST ===================== */
/* The promises fold, added 2026-07-27 off the store's own written story. It
   sits on plain paper directly after the story fold's --paper-2 band, so the
   surface changes underfoot and the two do not read as one long about-us.
   Cards are hairline + stroke icon tile, the same grammar as the craft fold. */
.trust{padding:var(--pad-m) var(--gut) var(--pad-l);max-width:var(--maxw);margin:0 auto}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.8vw,1.5rem)}
.tcard{
  border:1px solid var(--line);border-radius:5px;background:var(--paper);
  padding:clamp(1.25rem,2.2vw,1.75rem);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)
}
.tcard:hover{border-color:var(--madder);box-shadow:0 10px 28px rgba(23,18,15,.09);transform:translateY(-2px)}
.tcard__i{
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:4px;color:var(--madder);margin-bottom:1.1rem
}
.tcard__i svg{width:20px;height:20px}
.tcard h3{font-size:1rem;margin:0 0 .5rem;letter-spacing:-.01em}
.tcard p{color:var(--ink-2);font-size:.875rem;line-height:1.6;margin:0}
@media (max-width:900px){.trust__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.trust__grid{grid-template-columns:1fr}}

/* ===================== STATS ===================== */
/* The numbers were a fourth cream panel in a run of cream panels and the eye
   slid straight past them. They are now a full-bleed wine band: one dark line
   between the story fold and the Instagram grid, which is what a stat strip is
   for. Figures in white: gold on wine read muddy at this size (Sahil, 2026-07-22). */
.stats{background:var(--dark);color:var(--paper);padding:clamp(2.25rem,4.5vw,3.25rem) var(--gut)}
.stats__in{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,3vw,2rem)
}
.stat{text-align:center;position:relative}
.stat + .stat::before{
  content:"";position:absolute;left:calc(-1 * clamp(.625rem,1.5vw,1rem));top:12%;bottom:12%;
  width:1px;background:rgba(247,242,232,.16)
}
/* The min-height is the same value as the font-size and it is load-bearing, not
   belt-and-braces: line-height is 1, so a figure set at a SMALLER step (the
   range below) would otherwise occupy a shorter box and push its own label up
   out of line with the other three. Reserving the tall figure's height on every
   stat keeps all four labels on one baseline. */
.stat__n{
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(1.7rem,1.15rem + 2.4vw,2.9rem);
  font-size:clamp(1.7rem,1.15rem + 2.4vw,2.9rem);
  font-weight:800;color:#FFFFFF;line-height:1;letter-spacing:-.03em
}
/* "₹25 – ₹25,000" is eleven glyphs where the others are two or three. At the
   shared clamp it wraps mid-range and the band goes ragged, so the one range
   figure gets its own smaller step and is kept on one line. */
.stat__n--range{font-size:clamp(1.05rem,.8rem + 1.15vw,1.85rem);white-space:nowrap}
.stat__l{display:block;margin-top:.55rem;font-size:.75rem;color:rgba(255,255,255,.66)}
/* Four labels like "ta rong, sob chhobi tola" in a 170px column is three lines
   each. Two by two from tablet down, and the hairline that separates the pair
   is dropped from whichever stat starts a row. */
@media (max-width:900px){
  .stats__in{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
  .stat:nth-child(3)::before{display:none}
}

/* ===================== IG / ASK / FOOT ===================== */
/* Was a third centred headline-over-caption block, which is exactly what the two
   folds above it already were. It is now what an Instagram fold should be: the
   grid itself, with the handle set beside the heading rather than under it. */
.ig{padding:var(--pad-m) var(--gut);max-width:var(--maxw);margin:0 auto;text-align:center}
.ig__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  text-align:left;margin-bottom:clamp(1.5rem,3vw,2.25rem)
}
.ig__h{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.1rem)}
.ig__sub{margin-top:.7rem;color:var(--ink-3);font-size:.9375rem;max-width:32rem}
.ig__handle{display:inline-flex;align-items:center;gap:.55rem;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;color:var(--madder);transition:color .3s}
.ig__handle svg{width:20px;height:20px}
.ig__handle:hover{color:var(--wine-d)}
/* One frame, not six invented tiles. Dashed because it is a placeholder and
   should read as one: six product photos dressed as posts implied a feed we
   have not actually pulled. Swap the whole block when the account is wired. */
.ig__frame{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  min-height:clamp(15rem,26vw,21rem);padding:2rem 1.5rem;text-align:center;
  border:1.5px dashed var(--line);border-radius:6px;background:var(--paper-2);
  transition:border-color .3s var(--ease),background .3s var(--ease)
}
.ig__frame:hover{border-color:var(--madder);background:#F3EBDC}
.ig__mark{color:var(--madder);display:grid;place-items:center}
.ig__mark svg{width:38px;height:38px}
.ig__ph{font-size:1.0625rem;font-weight:700;letter-spacing:-.02em}
.ig__phs{font-size:.8125rem;color:var(--ink-3);max-width:26rem;line-height:1.5}
.ig__cta{margin-top:clamp(1.5rem,3vw,2.25rem)}
/* The .ig__grid rules that used to live here were left over from the six-tile
   fake feed. There is no grid any more, only the one dashed frame. */
@media (max-width:900px){.ig__head{gap:1rem}.ig__handle{min-height:44px}}
@media (max-width:600px){.ig__cta{width:100%;justify-content:center}}

/* White, not wine. This fold used to be the same dark as the footer directly
   below it, so the two ran together as one long slab and the final ask lost its
   own edge. White also lifts the wine WhatsApp button, which is the whole point
   of the fold. */
.ask{background:#FFFFFF;color:var(--ink);padding:var(--pad-l) var(--gut);text-align:center;border-top:1px solid var(--line)}
.ask__inner{max-width:38rem;margin:0 auto}
.ask h2{font-size:clamp(1.8rem,1.2rem + 2.9vw,3.1rem)}
.ask__sub{margin:1.2rem auto 0;color:var(--ink-2);max-width:31rem}
.ask .btn{margin-top:2rem}
.ask__fine{margin-top:1.5rem;font-size:.8125rem;color:var(--ink-3)}

.foot{background:var(--dark);color:var(--paper);padding:0 var(--gut) clamp(2rem,4vw,3rem)}
.foot__line{margin-top:1.1rem;font-size:1.0625rem;color:var(--paper)}

/* The viewport is `viewport-fit=cover`, so on an iPhone the bottom inset is the
   home indicator and the right inset is the notch side in landscape. Without
   these the button sat under the indicator and was a miss half the time. */
.fab{position:fixed;right:calc(clamp(1rem,2.5vw,1.75rem) + env(safe-area-inset-right,0px));bottom:calc(clamp(1rem,2.5vw,1.75rem) + env(safe-area-inset-bottom,0px));z-index:90;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:var(--wa-ink);box-shadow:0 10px 28px -8px rgba(0,0,0,.45);transition:transform .3s var(--ease),opacity .3s;opacity:0;pointer-events:none}
.fab.is-on{opacity:1;pointer-events:auto}
.fab:hover{transform:scale(1.07)}
.fab svg{width:28px;height:28px}

/* Palette lab removed 2026-07-21: wine dark on cream is locked, and a second
   set of tokens would only drift from :root. Wine #5A1822, dark folds #4A1220. */

/* The house photograph is sourced, not ours. The credit sits on the image so
   nobody has to read the page source to know that. */
.split__fig{position:relative}
.split__credit{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:2.4rem .9rem .7rem;
  font-size:.6875rem;line-height:1.35;color:rgba(247,242,232,.72);
  background:linear-gradient(to top,rgba(20,7,10,.8),rgba(20,7,10,0))
}

/* ===================== FOOTER ===================== */
.foot__grid{
  max-width:var(--maxw);margin:0 auto;padding:var(--pad-m) 0 var(--pad-s);
  display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1.5fr 1fr 1fr 1.4fr
}
.foot__brand .nav__logo{height:38px}
/* .5 paper on the wine is 4.3:1 and .45 is 3.8:1 — both under AA for type this
   small, and this is the line that says "1920 sal theke". Same paper, more of
   it. Nothing else in the footer moves. */
.foot__since{margin-top:.4rem;font-size:.8125rem;color:rgba(247,242,232,.58)}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.foot__col h3{
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--gold-lt);margin-bottom:.4rem
}
.foot__col a,.foot__col address{
  font-size:.875rem;font-style:normal;line-height:1.55;
  color:rgba(247,242,232,.72);transition:color .25s
}
.foot__col a:hover{color:var(--paper)}
.foot__wa{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--gold);color:#1B0D07!important;font-weight:700;
  padding:.55rem .95rem;border-radius:999px;margin:.3rem 0;transition:background .25s
}
.foot__wa:hover{background:var(--gold-lt)}
.foot__wa svg{width:16px;height:16px;flex:0 0 auto}
.foot__base{
  max-width:var(--maxw);margin:0 auto;padding:1.4rem 0;
  border-top:1px solid rgba(247,242,232,.14);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.75rem;color:rgba(247,242,232,.58);padding-right:4.5rem
}
@media (max-width:900px){
  .foot__grid{grid-template-columns:1fr 1fr;gap:2.25rem}
  .foot__brand{grid-column:1/-1}
  /* 30px between links is a mis-tap. Padding, not gap, so the target grows
     rather than the list just spreading out. */
  .foot__col{gap:0}
  .foot__col a{padding-block:.7rem}
  .foot__col h3{margin-bottom:.2rem}
  .foot__col .foot__wa{margin:.55rem 0;padding-block:.7rem}
  /* The wordmark is 38px tall, so the home link was a 38px target. */
  .foot__brand > a{display:inline-flex;align-items:center;min-height:44px}
}
/* PHONE. Not a single stack: the two short link lists sit side by side and only
   the address column, which carries an address, a WhatsApp button, two numbers
   and an email, takes the full width. A four-item list does not need 390px. */
@media (max-width:600px){
  .foot__grid{grid-template-columns:1fr 1fr;gap:2.25rem 1.25rem}
  .foot__brand,.foot__col--c{grid-column:1/-1}
  .foot__base{flex-direction:column;gap:.4rem}
}