/* ==========================================================================
   JEWELS BY SIREESHA — Design Tokens & Base
   A visual identity grounded in the artisan's own workbench: the deep teal
   velvet trays she sorts kundan stones in, the warm hand-hammered gold
   sheet she works with, and the jewel-toned stones (ruby, emerald,
   sapphire) that fill those trays.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Cinzel:wght@500;600&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* ---- Palette (pulled from the artisan's workbench) ---- */
  --teal-950:#08211f;      /* deepest — footer / nav base   */
  --teal-900:#0c2f2c;      /* velvet tray shadow             */
  --teal-800:#123f3a;      /* primary dark panels            */
  --teal-700:#1a544c;      /* raised dark surfaces            */
  --teal-600:#236a5f;      /* borders on dark                */

  --gold-100:#f6ecd2;      /* pale foil                       */
  --gold-300:#e5c274;      /* bright gold — hover/highlight   */
  --gold-500:#c79a49;      /* antique gold — primary accent   */
  --gold-700:#9c7530;      /* deep gold — text-on-cream accent*/

  --ruby-600:#7c2331;      /* kundan red stone — rare accent  */
  --emerald-600:#1f5c47;   /* kundan green stone              */

  --ivory-050:#fbf7ee;     /* page background                 */
  --ivory-100:#f4ecdb;     /* section alt background          */
  --ivory-200:#ece0c6;     /* card borders on light            */

  --ink-900:#1c2321;       /* body text                        */
  --ink-600:#4b5450;       /* secondary text                   */
  --ink-400:#7c8681;       /* muted / captions                 */

  --white:#ffffff;

  /* ---- Type ---- */
  --font-display:'Cormorant Garamond', 'Times New Roman', serif;
  --font-label:'Cinzel', serif;
  --font-body:'Jost', 'Segoe UI', sans-serif;

  /* ---- Shape / rhythm ---- */
  --radius-sm:2px;
  --radius-md:4px;
  --container:1280px;
  --gutter:clamp(20px, 5vw, 64px);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ivory-050);
  color:var(--ink-900);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--teal-900);
  margin:0 0 .5em;
  letter-spacing:.01em;
}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Focus visibility — accessibility floor */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
  border-radius:2px;
}

/* ---- Eyebrow / label system ----
   Small caps engraved-metal label used above every section heading.
   Encodes "this is a section title" consistently across the site. */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-label);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-700);
}
.eyebrow::before,.eyebrow::after{
  content:'';
  width:22px;
  height:1px;
  background:var(--gold-500);
  opacity:.7;
}
.on-dark .eyebrow{ color:var(--gold-300); }

/* ---- Paisley motif ----
   The mango/paisley outline recurs through South Indian temple & kundan
   jewellery design. Used sparingly as a divider glyph — not decoration
   for its own sake, but the same motif etched into the pieces themselves. */
.paisley{
  width:16px;height:16px;
  display:inline-block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  vertical-align:-3px;
}

/* ---- Section rhythm ---- */
.section{ padding-block:clamp(56px, 9vw, 112px); position:relative; }
.section-head{ max-width:640px; margin-bottom:clamp(32px,5vw,56px); }
.section-head h2{ font-size:clamp(2rem, 4vw, 2.9rem); }
.section-head p{ color:var(--ink-600); font-size:1.05rem; max-width:52ch; }
.section-head.center{ margin-inline:auto; text-align:center; }

.on-dark{ background:var(--teal-800); color:var(--ivory-100); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--white); }
.on-dark .section-head p{ color:#c9d7d2; }

/* ---- "Tray grid" texture ----
   A thin hairline grid, echoing the compartmentalised velvet trays the
   artisan sorts kundan stones in (see the real workshop photography).
   Used as a subtle structural / transition device, never as full noise. */
.tray-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgba(199,154,73,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(199,154,73,.08) 1px, transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:15px 30px;
  font-family:var(--font-label);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color:var(--teal-950);
  box-shadow:0 8px 24px -10px rgba(199,154,73,.7);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(199,154,73,.85); }
.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.5);
  color:var(--white);
}
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:var(--white); }
.btn-outline.dark{ border-color:var(--teal-700); color:var(--teal-800); }
.btn-outline.dark:hover{ background:var(--teal-800); color:var(--white); }
.btn-whatsapp{
  background:#1f5c47;
  color:#fff;
  box-shadow:0 8px 22px -10px rgba(31,92,71,.7);
}
.btn-whatsapp:hover{ background:#194b3a; transform:translateY(-2px); }
.btn-sm{ padding:11px 16px; font-size:.68rem; letter-spacing:.12em; }

/* Swap to shorter label on narrow cards so the button never clips/overflows */
.btn-txt-short{ display:none; }
@media (max-width:600px){
  .btn-txt-full{ display:none; }
  .btn-txt-short{ display:inline; }
}
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; }

.tag{
  display:inline-block;
  font-family:var(--font-label);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-700);
  background:var(--ivory-100);
  border:1px solid var(--ivory-200);
  padding:5px 11px;
  border-radius:20px;
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--gold-500); color:var(--teal-950);
  padding:12px 18px; z-index:999; font-family:var(--font-label); font-size:.75rem; letter-spacing:.1em;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-1{ transition-delay:.08s; }
.reveal-2{ transition-delay:.16s; }
.reveal-3{ transition-delay:.24s; }
.reveal-4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }