/* ==========================================================================
   ARADHNAA — layout.css
   Chrome that appears on every page: marquee, header/nav, drawers,
   floating action stack (WhatsApp + sound), footer.
   ========================================================================== */

/* ---------- ANNOUNCEMENT MARQUEE ---------- */
.marquee{
  position:relative; z-index:var(--z-header);
  background:linear-gradient(90deg, var(--sindoor), var(--marigold), var(--sindoor));
  overflow:hidden; white-space:nowrap;
  border-bottom:1px solid rgba(0,0,0,.22);
}
.marquee__track{
  display:inline-block; padding:9px 0;
  font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:#FFF5E4;
  animation:marquee-scroll 26s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state:paused; }
.marquee__track span{ margin:0 34px; }
.marquee__track span::before{ content:"\2726"; margin-right:10px; opacity:.8; }
@keyframes marquee-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; padding-inline:var(--gutter); }
}

/* ---------- HEADER ---------- */
.header{
  position:sticky; top:0; z-index:var(--z-header);
  background:var(--void);            /* same solid ground as the footer */
  color:var(--text);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:grid; align-items:center; gap:var(--space-4);
  /* mobile: newsletter | logo | menu */
  grid-template-columns:1fr auto 1fr;
  min-height:72px; padding-block:var(--space-3);
}

/* Brand lockup */
.brand{ display:flex; flex-direction:column; align-items:center; line-height:1; justify-self:center; }
.brand__mark{ width:26px; height:26px; margin-bottom:5px; }
.brand__word{
  font-family:var(--font-display); font-weight:700; font-size:21px;
  letter-spacing:.18em; color:var(--text);
}
.brand__tagline{
  font-family:var(--font-accent); font-style:italic; font-size:11px;
  letter-spacing:.08em; color:var(--text-subtle); margin-top:4px;
}

/* Icon buttons — 44px min hit area even though the glyph is 24px */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-sm);
  color:var(--text);
  transition:color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover{ color:var(--ember); background:var(--surface-hover); }
.icon-btn svg{ width:24px; height:24px; stroke:currentColor; fill:none; }

/* Mobile order: newsletter (left) · logo (centre) · menu (right).
   Columns are assigned explicitly so the two icon buttons can sit on
   opposite sides of the logo regardless of their source order, which
   stays logical for screen readers and keyboard tabbing. */
/* grid-area is row/column — the row must be pinned too, or each item
   auto-places onto its own row and the header stacks vertically. */
.header__end  { grid-area:1 / 1; justify-self:start; display:flex; align-items:center; gap:var(--space-2); }
.brand        { grid-area:1 / 2; }
.header__start{ grid-area:1 / 3; justify-self:end; }

/* Desktop nav — hidden on mobile, revealed at 1000px */
.nav{ display:none; }
.nav__list{ display:flex; align-items:center; gap:var(--space-5); }
.nav__link{
  position:relative; display:block; padding:12px 2px;
  font-size:13.5px; font-weight:500; letter-spacing:.02em;
  color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease-out);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--ember); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav__link:hover{ color:var(--text); }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--ember); }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }

.header__cta{
  display:none; min-height:44px; padding:11px 20px;
  font-size:12px; letter-spacing:.06em;
}

@media (min-width:1000px){
  .header__inner{
    grid-template-columns:auto 1fr auto;
    min-height:88px; gap:var(--space-6);
  }
  .header__start{ display:none; }            /* hamburger retires */
  /* Desktop order: logo · nav · newsletter + CTA */
  .brand     { grid-area:1 / 1; align-items:flex-start; justify-self:start; }
  .nav       { grid-area:1 / 2; display:block; justify-self:center; }
  .header__end{ grid-area:1 / 3; justify-self:end; }
  .header__cta{ display:inline-flex; }
}

/* ---------- OVERLAY + DRAWERS ---------- */
.overlay{
  position:fixed; inset:0; z-index:var(--z-overlay);
  background:rgba(8,4,2,.62);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.overlay.is-open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; bottom:0; z-index:var(--z-drawer);
  width:min(370px, 88vw);
  display:flex; flex-direction:column;
  padding:var(--space-6) var(--space-6) var(--space-7);
  background:var(--grad-surface);
  color:var(--text);                 /* body is Paper/ink — restate here */
  overflow-y:auto; overscroll-behavior:contain;
  visibility:hidden;
  transition:transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
.drawer.is-open{ visibility:visible; }

/* The open-state transform is written per-drawer at ID specificity.
   A shared `.drawer.is-open` rule would lose to the `#id` rules below
   and the panel would never slide in. */
/* Each panel slides in from the side its trigger button sits on, so the
   motion reads as the drawer coming out from under the icon that was
   tapped. Menu button is on the right, newsletter on the left. */
#menuDrawer{ right:0; transform:translateX(100%); border-left:1px solid var(--line-strong); }
#menuDrawer.is-open{ transform:translateX(0); }

#newsletterDrawer{ left:0; transform:translateX(-100%); border-right:1px solid var(--line-strong); }
#newsletterDrawer.is-open{ transform:translateX(0); }

/* On desktop the hamburger retires and the newsletter icon moves to the
   right of the bar, so its panel has to follow it across. */
@media (min-width:1000px){
  #newsletterDrawer{
    left:auto; right:0; transform:translateX(100%);
    border-right:none; border-left:1px solid var(--line-strong);
  }
}

.drawer__close{
  align-self:flex-end; width:44px; height:44px; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--brass); font-size:20px; line-height:1; margin-bottom:var(--space-4);
  transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.drawer__close:hover{ color:var(--ember); background:var(--surface-hover); }
.drawer__eyebrow{
  font-family:var(--font-deva); color:var(--marigold);
  font-size:15px; margin-bottom:var(--space-5);
}

/* Menu list */
.menu-list li{ border-bottom:1px solid var(--line); }
.menu-list a{
  display:flex; align-items:baseline; gap:14px;
  min-height:56px; padding:16px 2px;
  font-family:var(--font-display); font-size:16px; letter-spacing:.02em;
  color:var(--text);
  transition:color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.menu-list a:hover{ color:var(--ember); padding-left:8px; }
.menu-list .num{
  font-family:var(--font-deva); color:var(--brass);
  font-size:13px; min-width:32px; flex:none;
}
.drawer__foot{
  margin-top:auto; padding-top:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-3);
}

/* Newsletter form */
.nl__title{ font-family:var(--font-display); font-size:20px; color:var(--text); margin-bottom:var(--space-2); }
.nl__intro{
  font-family:var(--font-accent); font-style:italic; font-size:16px;
  color:var(--text-muted); margin-bottom:var(--space-6); line-height:1.55;
}
.field{ margin-bottom:var(--space-5); }
.field__label{
  display:block; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); margin-bottom:var(--space-2);
}
.field__input{
  width:100%; min-height:48px; padding:12px 2px;
  background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  color:var(--text); font-family:var(--font-body);
  font-size:16px;                     /* 16px keeps iOS from auto-zooming */
  transition:border-color var(--dur-fast) var(--ease-out);
}
.field__input::placeholder{ color:rgba(241,231,211,.42); }
.field__input:focus{ border-bottom-color:var(--ember); }
.field__hint{ font-size:12px; color:var(--text-subtle); margin-top:var(--space-2); }
.nl__perk{
  margin-top:var(--space-5); padding-top:var(--space-4);
  border-top:1px dashed var(--line-strong);
  font-size:12.5px; color:var(--text-subtle); line-height:1.6;
}
.nl__perk b{ color:var(--brass); }
.form-status{ margin-top:var(--space-3); font-size:13px; color:var(--ember); min-height:20px; }

/* ---------- FLOATING ACTION STACK ---------- */
/* Sound toggle sits directly above the WhatsApp button, as specified. */
.fab-stack{
  position:fixed; z-index:var(--z-float);
  right:clamp(16px, 3vw, 28px);
  bottom:calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}

.fab-sound{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--radius-pill);
  background:rgba(21,11,7,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-strong); color:var(--brass);
  transition:color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-spring);
}
.fab-sound:hover{ color:var(--ember); border-color:var(--ember); transform:scale(1.06); }
.fab-sound svg{ width:20px; height:20px; }
.fab-sound .icon-on{ display:none; }
.fab-sound[aria-pressed="true"]{ color:var(--ember); border-color:rgba(240,169,62,.55); }
.fab-sound[aria-pressed="true"] .icon-on{ display:block; }
.fab-sound[aria-pressed="true"] .icon-off{ display:none; }

/* Pulses only while muted, to invite the tap that browsers require
   before audio is allowed to play. Stops the moment sound is on. */
.fab-sound[data-invite="true"]{ animation:sound-pulse 2.6s var(--ease-out) infinite; }
@keyframes sound-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(240,169,62,.36); }
  50%    { box-shadow:0 0 0 12px rgba(240,169,62,0); }
}
@media (prefers-reduced-motion: reduce){ .fab-sound[data-invite="true"]{ animation:none; } }

.fab-wa{
  display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:13px 20px; border-radius:var(--radius-pill);
  background:var(--whatsapp); color:#fff;
  font-family:var(--font-body); font-weight:600; font-size:13px;
  box-shadow:0 10px 26px -6px rgba(30,158,88,.6);
  transition:transform var(--dur-base) var(--ease-spring), background-color var(--dur-base) var(--ease-out);
}
.fab-wa:hover{ transform:translateY(-2px); background:#22B063; }
.fab-wa svg{ width:19px; height:19px; fill:currentColor; flex:none; }

/* On phones these shrink to 44px circles hugging the edge, which is what
   frees the horizontal room for the carousel's "next" arrow to sit outside
   the artwork without landing underneath them. 44px is still the minimum
   comfortable touch target. */
@media (max-width:599px){
  .fab-stack{ right:10px; gap:10px; }
  .fab-wa__label{ display:none; }
  .fab-wa{ width:44px; height:44px; min-height:0; padding:0; justify-content:center; }
  .fab-wa svg{ width:22px; height:22px; }
  .fab-sound{ width:44px; height:44px; }
}

/* Hidden YouTube audio host — offscreen, never visible, never focusable */
.bg-player{
  position:fixed; width:1px; height:1px; left:-9999px; top:0;
  opacity:0; pointer-events:none;
}

/* ---------- FOOTER ---------- */
.footer{
  position:relative; background:var(--void);
  border-top:1px solid var(--line);
  padding-block:var(--space-7) var(--space-6);
  /* No margin-top: every preceding section already ends with its own
     padding, and stacking the two left a ~190px void above the footer. */
}
.footer__top{
  display:grid; gap:var(--space-7);
  grid-template-columns:1fr;
  padding-bottom:var(--space-7);
}
.footer__brand{ display:flex; flex-direction:column; gap:var(--space-3); align-items:flex-start; }
.footer__word{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.16em; }
.footer__tag{
  font-family:var(--font-accent); font-style:italic; font-size:15px;
  color:var(--text-muted); max-width:26ch;
}
.footer__col h2{
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); margin-bottom:var(--space-4);
}
.footer__col a{
  display:block; font-size:14px; color:var(--text-muted);
  padding-block:11px; transition:color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover{ color:var(--ember); }
.footer__wa{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; color:var(--whatsapp-bright); font-size:14px; font-weight:600;
}
.footer__wa svg{ width:16px; height:16px; fill:currentColor; }
.footer__marks{ display:flex; gap:12px; }
.footer__marks a{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center; padding:0;
  transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.footer__marks a:hover{ border-color:var(--ember); background:var(--surface-hover); }
.footer__marks svg{ width:19px; height:19px; }
.footer__bottom{
  padding-top:var(--space-5); border-top:1px dashed var(--line-strong);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--space-3);
  font-size:12px; letter-spacing:.03em; color:var(--text-subtle);
}

@media (min-width:640px){ .footer__top{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .footer__top{ grid-template-columns:1.4fr 1fr 1fr 1.1fr; } }

/* ---------- Menu drawer: tighter list + a quieter secondary set ---------- */
.menu-list a{ min-height:46px; padding:11px 2px; font-size:15.5px; }
.menu-list .num{ font-size:12px; min-width:28px; }

/* About / Contact / Delivery / Privacy are supporting pages, so they sit
   right-aligned and small — clearly subordinate to the category list. */
.menu-secondary{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:2px; margin-top:var(--space-4);
  padding-top:var(--space-3);
  border-top:1px dashed var(--line);
}
.menu-secondary a{
  display:inline-flex; align-items:center; min-height:32px;
  font-size:12.5px; letter-spacing:.02em;
  color:var(--text-subtle);
  transition:color var(--dur-fast) var(--ease-out);
}
.menu-secondary a:hover{ color:var(--ember); }

/* Footer credit sits under the copyright line */
.footer__credit{ color:var(--text-subtle); }

/* ---------- Language toggle (sits between sound and WhatsApp) ---------- */
.fab-lang{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--radius-pill);
  background:rgba(21,11,7,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-strong); color:var(--brass);
  font-family:var(--font-deva); font-size:15px; font-weight:600;
  line-height:1;
  transition:color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-spring);
}
.fab-lang:hover{ color:var(--ember); border-color:var(--ember); transform:scale(1.06); }
.fab-lang[aria-pressed="true"]{
  color:var(--ember); border-color:rgba(240,169,62,.55);
  font-family:var(--font-body); font-size:13px; letter-spacing:.06em;
}
@media (max-width:599px){ .fab-lang{ width:44px; height:44px; font-size:14px; } }

/* Hindi runs a little taller than Latin; give headings room to breathe. */
html[lang="hi"] .hero__title,
html[lang="hi"] .section-title,
html[lang="hi"] .band-head__title,
html[lang="hi"] .page-hero__title{ line-height:1.3; }
html[lang="hi"] .p-card__name,
html[lang="hi"] .shelf__title{ line-height:1.45; }

/* ==========================================================================
   FOOTER PHOTOGRAPH
   Anchored to the bottom-right corner and faded out towards the content, so
   it reads as warmth in the corner rather than as an image the eye has to
   resolve. The footer's own container is lifted above it.
   ========================================================================== */
.footer__photo{
  position:absolute; right:0; bottom:0; z-index:0;
  width:min(560px, 62%); height:min(360px, 78%);
  overflow:hidden; pointer-events:none;
  /* Measured, not guessed: at .5 opacity the corner lifted the footer links
     to 4.34:1 and the fine print to 3.73:1, both under AA. These values keep
     the darkest link at 4.5:1 with the photograph still reading as warmth. */
  opacity:.34;
  -webkit-mask-image:radial-gradient(ellipse 92% 92% at 100% 100%, #000 4%, rgba(0,0,0,.42) 36%, transparent 70%);
  mask-image:radial-gradient(ellipse 92% 92% at 100% 100%, #000 4%, rgba(0,0,0,.42) 36%, transparent 70%);
}
.footer__photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:62% 50%;
  filter:saturate(.85) brightness(.5);
}
.footer > .container{ position:relative; z-index:1; }

@media (max-width:599px){
  .footer__photo{ width:76%; height:38%; opacity:.3; }
}

/* ---------- Socials in the menu drawer ----------
   Between the secondary links and the WhatsApp button, so the drawer ends
   with the two ways to keep in touch rather than with a list of pages. */
.menu-social{
  display:flex; align-items:center; justify-content:flex-end;
  gap:var(--space-3);
  padding-top:var(--space-4); margin-top:var(--space-2);
  border-top:1px dotted var(--line);
}
.menu-social__title{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass);
  flex:none;
}
.menu-social__links{ display:flex; gap:var(--space-2); }
/* Dark discs with a brass rim, like the ritual marks in the footer. The
   filled white circles read as a different brand's buttons on this panel. */
.menu-social__links .social__link{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  background:rgba(21,11,7,.55);
  border:1px solid var(--line-strong); color:var(--brass);
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.menu-social__links .social__link svg{ width:17px; height:17px; }
.menu-social__links .social__link:hover{
  color:var(--ember); border-color:var(--ember);
  background:rgba(240,169,62,.12);
}
@media (pointer: coarse){
  .menu-social__links .social__link{ width:44px; height:44px; }
}