/* Design tokens, themes, reset and layout primitives for Ratna Vigyan Kendra. */

/* Registered so the hero gem colour interpolates instead of snapping. */
@property --gh { syntax: '<number>'; inherits: true; initial-value: 222; }
@property --gs { syntax: '<number>'; inherits: true; initial-value: 72; }
@property --gl { syntax: '<number>'; inherits: true; initial-value: 40; }

:root {
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  --radius: 18px;
  --radius-sm: 10px;
  --wrap: 1200px;
  --gutter: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 72px;
}

:root, :root[data-theme="dark"] {
  --bg: #0e0b12;
  --bg-2: #141019;
  --surface: #1a1520;
  --surface-2: #221c29;
  --line: rgba(255, 238, 214, .09);
  --line-2: rgba(255, 238, 214, .16);
  --text: #f4ede3;
  --muted: #a99f97;
  --faint: #6f6670;
  --gold: #d9b46c;
  --gold-2: #f2dca6;
  --gold-ink: #1b1306;
  --vermilion: #e2593d;
  --ok: #57c48d;
  --warn: #f0b43c;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, .7);
  --card-glow: rgba(217, 180, 108, .08);
  --sheen: rgba(255, 255, 255, .05);
  --hair: linear-gradient(90deg, transparent, rgba(217, 180, 108, .55), transparent);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #faf6ef;
  --bg-2: #f3ece1;
  --surface: #ffffff;
  --surface-2: #f7f1e8;
  --line: rgba(40, 24, 10, .09);
  --line-2: rgba(40, 24, 10, .16);
  --text: #1e1820;
  --muted: #6a6067;
  --faint: #9a8f95;
  --gold: #9d7228;
  --gold-2: #7e5a18;
  --gold-ink: #fffaf0;
  --vermilion: #c2412a;
  --ok: #1f8a57;
  --warn: #b07a0c;
  --shadow: 0 20px 50px -24px rgba(60, 36, 10, .3);
  --card-glow: rgba(157, 114, 40, .06);
  --sheen: rgba(255, 255, 255, .9);
  --hair: linear-gradient(90deg, transparent, rgba(157, 114, 40, .5), transparent);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 38%, transparent) transparent; }
body {
  margin: 0; color: var(--text);
  background: radial-gradient(1100px 520px at 88% -6%, var(--card-glow), transparent 64%), var(--bg);
  font: 15px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.08; margin: 0; }
h4 { margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold); color: var(--gold-ink); }

/* The gutter comes from the width, so a rule that sets padding on a .wrap can never remove it. */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.eyebrow { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.section-head .eyebrow::before, .hero-copy .eyebrow::before, .section-head[style*="center"] .eyebrow::after { content: ''; display: inline-block; width: 26px; height: 1px; margin-right: 12px; vertical-align: middle; background: currentColor; opacity: .65; }
.section-head[style*="center"] .eyebrow::after { margin: 0 0 0 12px; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 500; letter-spacing: -.015em; margin-top: 10px; }
.section-head p { color: var(--muted); max-width: 520px; margin-top: 10px; }
.link-arrow { color: var(--gold); font-weight: 600; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow::after { content: '→'; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

svg path, svg circle, svg line { vector-effect: non-scaling-stroke; }
.icon-btn svg, .search-trigger svg, .fab svg, .palette-input svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }