/* ─────────────────────────────────────────────────────────────
   Garuda Yantra — site-wide editorial design system
   Brass + ivory + ink. Fraunces serif + Plus Jakarta Sans.
   ───────────────────────────────────────────────────────────── */

:root {
  --ink:        #0c0c0d;
  --ink-90:     rgba(12,12,13,.92);
  --ink-75:     rgba(12,12,13,.75);
  --ink-55:     rgba(12,12,13,.55);
  --ink-35:     rgba(12,12,13,.35);
  --ivory:      #faf6ec;
  --ivory-deep: #f4ebd9;
  --sand:       #f0e8d3;
  --brass:      #a07a3a;
  --brass-soft: #c19a52;
  --hair:       rgba(12,12,13,.10);
  --hair-soft:  rgba(12,12,13,.06);
}

html { scroll-behavior: smooth; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ─────────────────────────────────────────────── */
.serif        { font-family: 'Fraunces', Georgia, serif; font-weight: 300; }
.serif em,
em.serif-em   { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; color: var(--brass); }

.eyebrow {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(12,12,13,.55);
}

.chapter-num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
  line-height: .9;
  letter-spacing: -.02em;
}

.pull-quote {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
}

.hairline {
  display: inline-block;
  width: 36px; height: 1px;
  background: currentColor;
  opacity: .4;
  vertical-align: middle;
  margin: 0 12px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: var(--ink);
  color: var(--ivory);
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  border: 1px solid var(--ink);
  transition: all .3s ease;
  cursor: pointer;
}
.btn-primary:hover { background: transparent; color: var(--ink); }
.btn-primary.on-ink {
  background: var(--ivory); color: var(--ink); border-color: var(--ivory);
}
.btn-primary.on-ink:hover { background: transparent; color: var(--ivory); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 0;
  color: var(--ink);
  font-size: 14px; font-weight: 500;
  border-bottom: 1px solid currentColor;
  transition: color .3s ease, border-color .3s ease;
}
.btn-secondary:hover { color: var(--brass); border-color: var(--brass); }
.btn-secondary.on-ink { color: var(--ivory); }
.btn-secondary.on-ink:hover { color: var(--brass-soft); border-color: var(--brass-soft); }

/* ── Decorations ─────────────────────────────────────────────── */
.dotted-grid {
  background-image: radial-gradient(rgba(160,122,58,.18) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 75%);
}
.ink-mark { position: relative; }
.ink-mark::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 8px;
  background: rgba(160,122,58,.2); border-radius: 4px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s ease;
}
.ink-mark.in::after { transform: scaleX(1); }

/* ── Reveal animation ───────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .26s; }
.reveal.d3 { transition-delay: .42s; }
.reveal.d4 { transition-delay: .6s; }

/* ── Chapter card (used by feature pages, calculators, etc.) ── */
.chapter-card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--hair);
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  display: block;
}
.chapter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -28px rgba(12,12,13,.28);
  border-color: rgba(160,122,58,.5);
}
.chapter-card .chapter-mark {
  position: absolute; top: 22px; right: 24px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: rgba(160,122,58,.4);
  font-size: 32px; font-weight: 300;
}

/* ── Stat block ─────────────────────────────────────────────── */
.stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 300;
  font-size: 72px; line-height: .95;
  letter-spacing: -.025em;
  color: var(--ink);
}
.on-ink .stat-num { color: var(--ivory); }

/* ── Ladder ─────────────────────────────────────────────────── */
.ladder-num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 300;
  color: var(--brass);
  font-size: 40px; line-height: 1;
  letter-spacing: -.02em;
}

/* ── Two-column asymmetric layout ───────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) {
  .two-col { grid-template-columns: 280px 1fr; gap: 80px; }
}

/* ── Section conventions ─────────────────────────────────────── */
.section-ivory      { background: var(--ivory); border-top: 1px solid var(--hair); }
.section-sand       { background: rgba(240, 232, 211, .5); border-top: 1px solid var(--hair); }
.section-ink        { background: var(--ink); color: var(--ivory); }
.section-ink .eyebrow { color: rgba(250,246,236,.6); }
.section-ink .pull-quote { color: var(--ivory); }
.section-ink em.serif-em { color: var(--brass-soft); }
.section-ink .chapter-card { background: rgba(250,246,236,.05); border-color: rgba(250,246,236,.12); }
.section-ink .chapter-card:hover { border-color: var(--brass-soft); box-shadow: 0 22px 50px -28px rgba(0,0,0,.6); }

/* ── Form inputs (calculators) ───────────────────────────────── */
.calc input[type=number],
.calc input[type=date],
.calc select {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--hair);
  border-radius: 0;
  font-size: 14px; background: white;
  font-family: inherit;
}
.calc input[type=number]:focus,
.calc input[type=date]:focus,
.calc select:focus {
  outline: none; border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(160,122,58,.15);
}
.calc label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-55);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
.calc .row { display: flex; gap: 12px; align-items: end; }
.calc .row > * { flex: 1; }

/* ── Result / table conventions ──────────────────────────────── */
.result-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px dashed var(--hair);
  font-size: 14px;
}
.result-row:last-child { border-bottom: none; }
.result-row.total {
  font-weight: 700; border-top: 2px solid var(--ink); border-bottom: none;
  padding-top: 8px; margin-top: 4px;
}
.result-row.muted { color: var(--ink-55); }

/* ── Override utility colors for editorial look ──────────────── */
/* These exist so old gradient rectangles in pages still look ok
   even before they're refactored — the gradients turn into a quiet
   sand-tinted block instead. */
.bg-gradient-to-br.from-pink-50,
.bg-gradient-to-br.from-blue-50,
.bg-gradient-to-br.from-emerald-50,
.bg-gradient-to-br.from-purple-50,
.bg-gradient-to-br.from-amber-50,
.bg-gradient-to-br.from-cyan-50,
.bg-gradient-to-br.from-violet-50,
.bg-gradient-to-br.from-fuchsia-50,
.bg-gradient-to-br.from-indigo-50,
.bg-gradient-to-br.from-rose-50,
.bg-gradient-to-br.from-slate-50,
.bg-gradient-to-br.from-sky-50 {
  background-image: none !important;
  background-color: var(--ivory) !important;
}

/* Soften the indigo/purple/pink/teal "primary" gradients to a single brass */
.bg-gradient-to-br.from-indigo-600,
.bg-gradient-to-br.from-emerald-600,
.bg-gradient-to-br.from-purple-600,
.bg-gradient-to-br.from-amber-500,
.bg-gradient-to-br.from-blue-600,
.bg-gradient-to-br.from-rose-600 {
  background-image: none !important;
  background-color: var(--ink) !important;
  color: var(--ivory) !important;
}

/* Gradient text → solid brass italic */
.gradient-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-style: italic;
  color: var(--brass) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 400;
}

/* Indigo / pink etc. accent colors → brass */
.text-indigo-600, .text-indigo-700, .text-indigo-800,
.text-pink-600, .text-pink-700,
.text-purple-600, .text-purple-700,
.text-emerald-600, .text-amber-600,
.text-cyan-600, .text-violet-600, .text-violet-700,
.text-rose-600, .text-fuchsia-600,
.text-blue-600, .text-blue-700, .text-blue-800 { color: var(--brass) !important; }

/* Border color overrides for accent borders */
.border-indigo-200, .border-indigo-300, .border-indigo-500,
.border-pink-200, .border-rose-200, .border-amber-200,
.border-emerald-200, .border-purple-200, .border-cyan-200 { border-color: rgba(160,122,58,.4) !important; }

/* Page hero pills (small badge in hero) */
.bg-white.border.border-gray-200.rounded-full {
  border-radius: 0 !important;
  border: 1px solid var(--hair) !important;
}