/* ==========================================================================
   BASE — reset, design tokens, typography, layout primitives
   Sonali Mittra · warm sanctuary-luxury system
   Palette sourced from the original site's brand globals.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
/* width/height attributes are for aspect ratio only - never let them force a stretched box */
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* ---------- Tokens ---------- */
:root {
  /* Grounds */
  --bg-cream:     #F7F4EE;
  --bg-sand:      #F7EFE8;
  --surface:      #FFFFFF;
  --surface-deep: #2C2A2A;
  --surface-deeper:#211F1E;

  /* Brand golds */
  --gold:        #B88917;
  --gold-deep:   #8A6510;   /* AA-safe on cream */
  --gold-darker: #6E5008;
  --gold-light:  #E4B04C;
  --champagne:   #D4B07A;

  /* Anchors */
  --slate:  #405861;
  --ink:    #2C2A2A;
  --muted:  #5F686C;        /* darkened from source #879296 to pass AA 4.5:1 on cream and sand */
  --muted-on-dark: #B8B2AA;

  /* Naturals */
  --sage:     #7A8C6E;
  --sky:      #ACD4E4;
  --earth:    #6B4F3A;
  --whatsapp: #25D366;

  /* Layered depth */
  --shadow-sm: 0 1px 2px rgba(44,42,42,.04), 0 2px 6px rgba(64,88,97,.05);
  --shadow-md: 0 2px 4px rgba(44,42,42,.04), 0 8px 20px rgba(64,88,97,.07), 0 18px 44px rgba(107,79,58,.06);
  --shadow-lg: 0 4px 8px rgba(44,42,42,.05), 0 16px 36px rgba(64,88,97,.09), 0 40px 88px rgba(107,79,58,.10);
  --shadow-gold: 0 8px 28px rgba(184,137,23,.22), 0 2px 8px rgba(184,137,23,.14);

  /* Glass */
  --glass: rgba(247,244,238,.78);
  --glass-strong: rgba(247,244,238,.92);
  --glass-border: rgba(212,176,122,.30);

  /* Radii */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;

  /* Easing — breath-paced, not snappy */
  --ease-breath: cubic-bezier(.22,.61,.36,1);
  --ease-soft:   cubic-bezier(.16,1,.3,1);
  --ease-out:    cubic-bezier(.33,1,.68,1);

  /* Type */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* z-index scale */
  --z-base: 1;
  --z-float: 20;
  --z-header: 50;
  --z-drawer: 60;
  --z-fab: 40;
  --z-popup: 90;
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-cream: #1A1715;
    --bg-sand:  #221E1B;
    --surface:  #25211E;
    --surface-deep: #141210;
    --surface-deeper: #0E0C0B;
    --ink:   #EDE7DE;
    --slate: #D6E0E4;
    --muted: #A69E94;
    --gold-deep: #E4B04C;      /* flip: light gold reads on dark */
    --champagne: #D4B07A;
    --glass: rgba(37,33,30,.78);
    --glass-strong: rgba(37,33,30,.94);
    --glass-border: rgba(212,176,122,.22);
    --shadow-md: 0 2px 4px rgba(0,0,0,.30), 0 8px 20px rgba(0,0,0,.28), 0 18px 44px rgba(0,0,0,.22);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.34), 0 16px 36px rgba(0,0,0,.30), 0 40px 88px rgba(0,0,0,.26);
  }
}
[data-theme="dark"] {
  --bg-cream: #1A1715; --bg-sand: #221E1B; --surface: #25211E;
  --surface-deep: #141210; --surface-deeper: #0E0C0B;
  --ink: #EDE7DE; --slate: #D6E0E4; --muted: #A69E94;
  --gold-deep: #E4B04C; --glass: rgba(37,33,30,.78);
  --glass-strong: rgba(37,33,30,.94); --glass-border: rgba(212,176,122,.22);
}

/* ---------- Body ---------- */
body {
  background: var(--bg-cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Fixed grain overlay — sits above grounds, below content */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--slate);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 20, "WONK" 0;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.75rem); line-height: 1.05; letter-spacing: -.035em; }
h2 { font-size: clamp(1.95rem, 4.2vw, 3.15rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -.02em; }
h4 { font-size: clamp(1.08rem, 1.6vw, 1.25rem); letter-spacing: -.012em; }

p { color: var(--ink); }
.lead { font-size: clamp(1.08rem, 1.55vw, 1.3rem); line-height: 1.7; color: var(--ink); opacity: .88; }
.prose p { max-width: 68ch; margin-bottom: 1.15em; }
.prose p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }
em { font-style: italic; }

/* Gold gradient emphasis inside headings */
.grad {
  background: linear-gradient(105deg, var(--gold-light) 0%, var(--gold) 45%, var(--earth) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: italic;
}

/* Eyebrow label + hairline */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-body);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--champagne));
}
.eyebrow--center::after {
  content: ""; width: 28px; height: 1px; flex: none;
  background: linear-gradient(270deg, transparent, var(--champagne));
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }
.section { position: relative; padding-block: var(--section-y); }
.section--sand { background: var(--bg-sand); }
.section--deep { background: var(--surface-deep); color: #EDE7DE; }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: #F3EDE4; }
.section--deep p { color: var(--muted-on-dark); }
.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* Below-fold render skipping */
.cv-auto { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  background: var(--gold); color: #fff; padding: .7rem 1.4rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); z-index: 999; font-weight: 600;
  transition: transform .2s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* Focus ring — visible on every interactive element */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Hairline divider */
.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--champagne), transparent); border: 0; opacity: .6; }

/* Decorative organic blobs */
.blob {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px); opacity: .5; z-index: 0;
}