/* tharusikuru.com — palette drawn from the brand logo:
   burgundy ring, cream inner, saffron sun, terracotta rays. */

:root {
  --burgundy:        #7c1b1f;       /* logo outer ring */
  --burgundy-soft:   #a44a4d;       /* muted burgundy */
  --burgundy-faint:  #d8b7b8;       /* very pale burgundy tint */
  --cream:           #f4e5c0;       /* logo inner circle */
  --cream-light:     #fbf3dc;       /* lighter cream */
  --cream-warm:      #f9eac8;       /* mid cream */
  --saffron:         #f2c730;       /* logo sun */
  --saffron-soft:    #fae39a;       /* pale saffron */
  --terracotta:      #d97c1f;       /* logo rays */
  --terracotta-soft: #f0c399;       /* pale terracotta */
  --ink:             #4a1416;       /* near-burgundy, easier on eye than pure burgundy */
  --ink-soft:        #7a4a4c;       /* warm muted brown-red */
  --ink-faint:       #b89a90;
  --line:            #e6d3a8;
  --panel:           #fbf3dc;
  --bg:              #faedc6;
  --shadow:          0 12px 32px -14px rgba(124, 27, 31, 0.20);
  --shadow-soft:     0 4px 14px -6px rgba(124, 27, 31, 0.14);
  --radius:          18px;
  --radius-sm:       10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', 'Georgia', serif;
  font-size: 18px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--burgundy); text-decoration: none; border-bottom: 1px solid var(--terracotta-soft); transition: color .15s, border-color .15s; }
a:hover { color: var(--terracotta); border-bottom-color: transparent; }

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-weight: 500;
  color: var(--burgundy);
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
}
h1 { font-size: 3.4rem; line-height: 1.1; font-weight: 400; }
h2 { font-size: 2.1rem; font-weight: 400; }
h3 { font-size: 1.15rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--burgundy-soft); font-family: 'Cinzel', serif; font-weight: 500; }

p { margin: 0 0 1em; }

.eyebrow {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1rem;
}

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--cream-light);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.brand-row { display: flex; align-items: center; gap: 0.8rem; border: none !important; }
.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px -2px rgba(124, 27, 31, 0.25);
}
.brand-name {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 1.15rem;
  letter-spacing: 0.28em;
  border: none;
  color: var(--burgundy);
}
.site-nav { display: flex; gap: 1.8rem; }
.site-nav a {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy-soft);
  border: none;
}
.site-nav a:hover { color: var(--burgundy); }

/* Hamburger button — hidden on desktop, becomes visible at the mobile breakpoint. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--burgundy-soft);
  border-radius: 8px;
  cursor: pointer;
  padding: 0 9px;
  transition: border-color 0.15s, background 0.15s;
}
.nav-toggle:hover { border-color: var(--burgundy); }
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--burgundy);
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.18s, background 0.18s;
  transform-origin: center;
}
.site-header.is-open .nav-toggle {
  background: var(--burgundy);
  border-color: var(--burgundy);
}
.site-header.is-open .nav-toggle span { background: var(--cream-light); }
.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero slider ---------- */
.hero-slider {
  position: relative;
  /* Reserve a stable height so dots don't jump between slides of different copy length. */
  min-height: 460px;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.hero-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: heroSlideIn 0.6s ease;
}
@keyframes heroSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-dots {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.2rem;
  z-index: 2;
}
.hero-dots .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--burgundy-soft);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.hero-dots .dot:hover { transform: scale(1.15); }
.hero-dots .dot.is-active {
  background: var(--burgundy);
  border-color: var(--burgundy);
  transform: scale(1.15);
}
.hero-art-svg svg { width: 100%; height: auto; display: block; }
@media (max-width: 880px) {
  .hero-slider { min-height: 0; }
  .hero-slide { position: static; opacity: 1; visibility: visible; pointer-events: auto; }
  .hero-slide:not(.is-active) { display: none; }
  .hero-dots { margin-top: 1.5rem; }
}

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(ellipse at 80% 20%, var(--saffron-soft) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 90%, var(--terracotta-soft) 0%, transparent 45%),
    var(--bg);
  padding: 5rem 2rem 6rem;
  overflow: hidden;
  position: relative;
}
.hero-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}
.hero-text h1 { font-style: italic; margin-bottom: 1.2rem; }
.hero-text h1 em { color: var(--terracotta); font-style: italic; }
.hero-lead {
  font-size: 1.25rem;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 2rem;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 440px;
  margin: 0 auto;
}
.hero-logo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 20px 50px -18px rgba(124, 27, 31, 0.45);
  object-fit: cover;
  display: block;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: -20px;
  border: 1px solid var(--burgundy-faint);
  border-radius: 50%;
  pointer-events: none;
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: -40px;
  border: 1px dashed var(--terracotta-soft);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.7;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.7rem;
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--burgundy);
  cursor: pointer;
  border: 1px solid var(--burgundy);
  border-radius: 999px;
  transition: background .2s, color .2s, transform .15s;
}
.btn:hover { background: var(--burgundy); color: var(--cream-light); transform: translateY(-1px); }
.btn-primary {
  background: var(--burgundy);
  color: var(--cream-light);
}
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-warm {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--cream-light);
}
.btn-warm:hover { background: var(--burgundy); border-color: var(--burgundy); }

/* ---------- section base ---------- */
.section {
  padding: 5rem 2rem;
}
.section-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.section-head h2 { font-style: italic; }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; }

.section.tinted { background: var(--cream-warm); }

/* ---------- service cards ---------- */
.cards-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
}
.card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 2.2rem 2rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid var(--line);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
}
.card-icon.saffron { background: var(--saffron-soft); }
.card-icon.terra   { background: var(--terracotta-soft); }
.card-icon.cream   { background: var(--cream); }
.card-icon svg { width: 26px; height: 26px; stroke: var(--burgundy); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.card h3 { color: var(--burgundy); letter-spacing: 0.04em; font-size: 1.4rem; text-transform: none; font-family: 'Cormorant Garamond', serif; font-weight: 500; margin-bottom: 0.6rem; }
.card p { color: var(--ink-soft); margin-bottom: 1.4rem; }
.card .btn { align-self: flex-start; margin-top: auto; }

/* ---------- 3-step process ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  text-align: center;
  position: relative;
}
.step-num {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--saffron-soft);
  color: var(--burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--saffron);
}
.step:nth-child(2) .step-num { background: var(--terracotta-soft); border-color: var(--terracotta); }
.step:nth-child(3) .step-num { background: var(--burgundy-faint); border-color: var(--burgundy-soft); }
.step h4 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.2rem; margin-bottom: 0.4rem; color: var(--burgundy); }
.step p { color: var(--ink-soft); font-size: 1rem; margin: 0; }

/* ---------- closing band ---------- */
.closing {
  background:
    radial-gradient(ellipse at 30% 30%, var(--saffron-soft) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, var(--terracotta-soft) 0%, transparent 50%),
    var(--cream-warm);
  padding: 4.5rem 2rem;
  text-align: center;
}
.closing h2 { font-style: italic; margin-bottom: 1rem; color: var(--burgundy); }
.closing p { color: var(--ink-soft); max-width: 540px; margin: 0 auto 2rem; font-size: 1.15rem; }

/* ---------- chart page ---------- */
.page-head {
  background:
    radial-gradient(ellipse at top, var(--saffron-soft) 0%, transparent 55%),
    var(--cream-warm);
  padding: 4rem 2rem 3rem;
  text-align: center;
}
.page-head h1 { font-style: italic; color: var(--burgundy); }
.page-head h1 em { color: var(--terracotta); }
.page-head p { color: var(--ink-soft); max-width: 540px; margin: 0.5rem auto 0; }

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

/* ---------- forms ---------- */
.chart-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem;
  box-shadow: var(--shadow-soft);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.4rem;
  margin-bottom: 0.5rem;
}
.form-field { display: flex; flex-direction: column; margin-bottom: 0.8rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy-soft);
  margin-bottom: 0.4rem;
}
.form-field input, .form-field select {
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  background: var(--cream-light);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus, .form-field select:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--saffron-soft);
}
.form-help { font-size: 0.85rem; color: var(--ink-faint); font-style: italic; margin-top: 0.25rem; }
.form-actions { text-align: center; margin-top: 1.4rem; }
.form-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
@media (max-width: 480px) {
  .form-actions-row { flex-direction: column; align-items: stretch; }
  .form-actions-row .btn { width: 100%; }
}

/* Date / time dropdown rows (Y / M / D and H / Min) */
.dt-row { display: grid; gap: 0.7rem; }
.dt-row-3 { grid-template-columns: 1fr 1.4fr 0.8fr; }
.dt-row-2 { grid-template-columns: 1fr 1fr; max-width: 320px; }
.dt-row-time { grid-template-columns: 0.9fr 0.9fr 1.4fr; max-width: 380px; }
.dt-cell { display: flex; flex-direction: column; }
.dt-cell .dt-sub {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}
.dt-cell select {
  padding: 0.65rem 0.8rem;
  font-family: inherit;
  font-size: 1rem;
  background: var(--cream-light);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--burgundy-soft) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--burgundy-soft) 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.dt-cell select:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--saffron-soft);
}

/* Typeahead place search */
.place-search { position: relative; }
.place-search input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  background: var(--cream-light);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.place-search input:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--saffron-soft);
}
.place-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow-y: auto;
}
.place-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink);
  transition: background-color 0.12s;
}
.place-item:hover, .place-item.is-active { background: var(--cream-warm); }
.place-item.is-loading,
.place-item.is-empty {
  cursor: default;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.9rem;
}
.place-item.is-loading:hover,
.place-item.is-empty:hover { background: transparent; }
.place-label { color: var(--ink); flex: 1; min-width: 0; }
.place-country { color: var(--ink-soft); font-size: 0.85rem; flex-shrink: 0; }
.place-item .spinner { border-color: var(--burgundy-soft); border-top-color: transparent; }

/* ---------- chart result ---------- */
.result-section { margin-top: 3rem; }
.result-meta {
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  font-style: italic;
  padding: 1rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.result-meta strong { color: var(--burgundy); font-style: normal; letter-spacing: 0.05em; }

.lagna-pill {
  background:
    radial-gradient(ellipse at 30% 30%, var(--saffron-soft) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, var(--terracotta-soft) 0%, transparent 55%),
    var(--cream-warm);
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  text-align: center;
  margin: 1.5rem 0 2.5rem;
  color: var(--ink);
}
.lagna-pill strong { letter-spacing: 0.1em; font-family: 'Cinzel', serif; font-size: 0.8rem; text-transform: uppercase; margin-right: 0.4rem; color: var(--burgundy); }

/* DeepSeek-written interpretation paragraph (free chart) */
.chart-interpret {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--burgundy);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin: -1.5rem 0 2rem;
}
.chart-interpret-head {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 0.7rem;
}
.chart-interpret-body { color: var(--ink); line-height: 1.75; font-family: 'Noto Serif Sinhala', serif; }
.chart-interpret-body p { margin: 0 0 0.8rem; }
.chart-interpret-body p:last-child { margin-bottom: 0; }
.chart-interpret[data-loading="1"] .chart-interpret-body { color: var(--burgundy-soft); font-style: italic; }
.chart-interpret[data-loading="1"] .spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(124,27,31,0.25); border-top-color: var(--burgundy);
  border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 6px; vertical-align: middle;
}
.chart-interpret-subnote {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-style: normal;
  color: var(--burgundy-soft);
  opacity: 0.72;
}
.chart-share-row {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(124,27,31,0.18);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.chart-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: #1877f2;        /* Facebook blue */
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Noto Sans Sinhala', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}
.chart-share-btn:hover { background: #145dc5; }
.chart-share-btn:active { transform: scale(0.98); }
.chart-share-btn svg { flex-shrink: 0; }
/* Secondary "copy to clipboard" button — same shape, neutral colour */
.chart-share-btn-copy {
  background: rgba(124,27,31,0.08);
  color: var(--burgundy);
  border: 1px solid rgba(124,27,31,0.2);
}
.chart-share-btn-copy:hover { background: rgba(124,27,31,0.14); }
.chart-share-btn-copied { background: rgba(45,128,69,0.14) !important; color: #1f5f31 !important; border-color: rgba(45,128,69,0.35) !important; }
@keyframes spin { to { transform: rotate(360deg); } }

.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin: 2rem 0;
}
.chart-box-wrap { text-align: center; }
.chart-box-wrap h3 { margin-bottom: 1rem; color: var(--burgundy); letter-spacing: 0.15em; }

/* South-Indian Vedic chart (SVG) */
.vedic-chart {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(124, 27, 31, 0.10));
}
.vedic-chart .vedic-paper        { fill: var(--panel); }
.vedic-chart .vedic-frame-outer  { fill: none; stroke: var(--burgundy);      stroke-width: 1.6; }
.vedic-chart .vedic-frame-inner  { fill: none; stroke: var(--burgundy-soft); stroke-width: 0.5; }
.vedic-chart .vedic-cell-frame   { fill: none; stroke: var(--burgundy-soft); stroke-width: 0.5; }
.vedic-chart .vedic-cell-bg.is-lagna { fill: var(--saffron-soft); opacity: 0.55; }
.vedic-chart .vedic-lagna-flag   { fill: var(--terracotta); }
.vedic-chart .vedic-lagna-letter {
  fill: var(--cream-light);
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 9px;
  font-weight: 600;
}
.vedic-chart .vedic-sign {
  fill: var(--burgundy-soft);
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.vedic-chart .vedic-planet {
  fill: var(--ink);
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
}
.vedic-chart .vedic-center-line  { stroke: var(--terracotta-soft); stroke-width: 0.7; }
.vedic-chart .vedic-center-label {
  fill: var(--burgundy-soft);
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.vedic-chart .vedic-ornament {
  fill: var(--terracotta);
  stroke: var(--terracotta);
  stroke-width: 0.7;
  stroke-linecap: round;
  opacity: 0.85;
}

/* ---------- tables ---------- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1rem 0 2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  font-size: 0.95rem;
}
.data-table th, .data-table td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.data-table th {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  background: var(--cream-warm);
  font-weight: 500;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .retro { color: var(--terracotta); font-weight: 600; }

/* Mobile — collapse the 6-column planet/dasha/houses tables into stacked
   label/value cards. Without this, columns like පාදය / නවාංශක overflow
   off-screen on narrow phones. Rows already carry data-label attributes
   from chart.js / love.js render code. */
@media (max-width: 640px) {
  .data-table {
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    font-size: 0.92rem;
  }
  .data-table thead { display: none; }
  .data-table tbody { display: block; }
  .data-table tr {
    display: block;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.8rem;
    box-shadow: var(--shadow-soft);
  }
  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border: none;
    padding: 0.25rem 0;
    text-align: right;
  }
  .data-table td:first-child {
    border-bottom: 1px dashed var(--line);
    padding-bottom: 0.45rem;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: var(--burgundy);
  }
  .data-table td::before {
    content: attr(data-label);
    font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--burgundy-soft);
    font-weight: 500;
    text-align: left;
    flex-shrink: 0;
  }
  /* The first cell is the row's "title" — drop the label since it's
     already prominent. */
  .data-table td:first-child::before { content: ""; display: none; }
}

/* ---------- library (Purana Grantha) ---------- */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.6rem;
  margin: 1rem 0 3rem;
}
.book-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  box-shadow: var(--shadow-soft);
}
.book-card:hover {
  transform: translateY(-3px);
  border-color: var(--terracotta);
  box-shadow: var(--shadow);
}
.book-card-main {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.book-cover {
  aspect-ratio: 2 / 3;
  background-color: var(--cream-warm);
  background-size: cover;
  background-position: center top;
  border-bottom: 1px solid var(--line);
}
.book-info { padding: 0.9rem 1rem 0.4rem; }
.book-title {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1.2rem;
  color: var(--burgundy);
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.book-meta { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.2rem; }
.book-pages { font-size: 0.78rem; color: var(--ink-faint); font-style: italic; }
.book-open {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding: 0.7rem 1rem 1rem;
  text-align: right;
}
.book-variant {
  border-top: 1px dashed var(--line);
  background: var(--cream-warm);
  padding: 0.7rem 1rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.book-variant-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
}
.book-variant-cta {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  text-decoration: none;
  font-weight: 500;
  align-self: flex-start;
}
.book-variant-cta:hover { color: var(--terracotta); text-decoration: underline; }
.library-empty {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 3rem 1.5rem;
  margin-top: 1rem;
}

/* ---------- reader (e-reader) ---------- */
.reader-body { background: #2d1112; }
.reader-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  color: var(--cream-light);
}
.reader-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid rgba(244, 229, 192, 0.2);
}
.reader-back {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--saffron);
  text-decoration: none;
  border: none;
}
.reader-back:hover { color: var(--cream-light); }
.reader-title {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-style: italic;
  text-align: center;
  color: var(--cream-light);
  font-size: 1.1rem;
}
.reader-pageinfo {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--saffron-soft);
  text-align: right;
}
.reader-bar-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: flex-end;
}
.reader-toc-btn {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  background: transparent;
  color: var(--saffron);
  border: 1px solid var(--saffron-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.reader-toc-btn:hover { background: var(--saffron); color: var(--burgundy); }

/* TOC drawer — slides in from the right */
.reader-toc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 88vw;
  background: var(--cream-light);
  color: var(--ink);
  z-index: 60;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
}
.reader-toc-drawer.is-open { transform: translateX(0); }
.reader-toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.2rem;
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  border-bottom: 1px solid var(--line);
  background: var(--cream-warm);
}
.reader-toc-close {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--burgundy);
  cursor: pointer;
  padding: 0.1rem 0.4rem;
}
.reader-toc-close:hover { color: var(--terracotta); }
.reader-toc-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0;
}
.reader-toc-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.reader-toc-ul[data-depth="1"] { padding-left: 1.2rem; border-left: 1px solid var(--line); margin-left: 1rem; }
.reader-toc-ul[data-depth="2"] { padding-left: 1rem; }
.reader-toc-li { margin: 0; }
.reader-toc-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.6rem 1.2rem;
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  border: none;
  border-bottom: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.reader-toc-link:hover { background: var(--cream-warm); color: var(--burgundy); }
.reader-toc-link.is-active {
  background: var(--saffron-soft);
  color: var(--burgundy);
  font-weight: 500;
}
.reader-toc-page {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.reader-toc-link.is-active .reader-toc-page { color: var(--terracotta); }
.reader-toc-ul[data-depth="1"] .reader-toc-link { font-size: 0.92rem; padding-left: 0.8rem; }
.reader-toc-ul[data-depth="2"] .reader-toc-link { font-size: 0.85rem; padding-left: 0.6rem; }

.reader-toc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 55;
}

.reader-stage {
  position: relative;
  background: #1c0a0b;
  border-radius: 6px;
  padding: 1rem;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 60vh;
  overflow: hidden;
}
.reader-page-image {
  width: 100%;
  height: 80vh;
  background-color: #f4e5c0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
}
.reader-stage.is-landscape .reader-page-image { height: 65vh; }
.reader-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.05);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transform: rotate(-22deg);
  user-select: none;
}

/* Side prev/next buttons — overlay the stage edges. Hidden on desktop
   (the bottom controls handle prev/next there); shown on mobile. */
.reader-side {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 80px;
  background: rgba(124, 27, 31, 0.55);
  color: var(--cream-light);
  border: 1px solid rgba(244, 229, 192, 0.25);
  border-radius: 8px;
  font-size: 2rem;
  font-family: serif;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.reader-side:hover, .reader-side:focus { background: rgba(124, 27, 31, 0.85); outline: none; }
.reader-side:disabled { opacity: 0.25; cursor: not-allowed; }
.reader-side-prev { left: 4px; }
.reader-side-next { right: 4px; }
@media (max-width: 720px) {
  .reader-side { display: flex; align-items: center; justify-content: center; }
  /* Bottom prev/next become redundant on mobile — keep just the jump form. */
  .reader-controls .reader-btn { display: none; }
  .reader-controls { justify-content: center; }
}

/* Variant banner — appears between stage and controls when a modern-style
   edition exists (or when reader is on the modern edition pointing back). */
.reader-variant {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1rem auto 0.4rem;
  padding: 0.7rem 1.1rem;
  background: linear-gradient(135deg, rgba(242, 199, 48, 0.18), rgba(217, 124, 31, 0.18));
  border: 1px solid rgba(242, 199, 48, 0.45);
  border-radius: var(--radius-sm);
  max-width: 720px;
  color: var(--cream-light);
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1rem;
}
.reader-variant.is-modern {
  background: linear-gradient(135deg, rgba(244, 229, 192, 0.12), rgba(244, 229, 192, 0.04));
  border-color: rgba(244, 229, 192, 0.35);
}
.reader-variant-icon { color: var(--saffron); font-size: 1.1rem; }
.reader-variant-label { color: var(--cream-light); }
.reader-variant-cta {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saffron);
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--saffron);
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.reader-variant-cta:hover { background: var(--saffron); color: var(--burgundy); }

.reader-controls {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.reader-controls-top {
  margin-top: 0;
  margin-bottom: 0.9rem;
}
.reader-btn {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--saffron);
  background: transparent;
  color: var(--cream-light);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.reader-btn:hover:not(:disabled) { background: var(--saffron); color: var(--burgundy); }
.reader-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.reader-jump {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(244, 229, 192, 0.08);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}
.reader-jump-label {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--saffron-soft);
}
.reader-jump select {
  min-width: 130px;
  max-width: 220px;
  padding: 0.4rem 1.6rem 0.4rem 0.6rem;
  background-color: rgba(0, 0, 0, 0.25);
  color: var(--cream-light);
  border: 1px solid rgba(244, 229, 192, 0.2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--saffron) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--saffron) 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.reader-jump select option {
  background: #2d1112;
  color: var(--cream-light);
}
.reader-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--saffron-soft);
  font-style: italic;
  margin: 1.2rem auto 0;
  max-width: 600px;
  opacity: 0.65;
}
.reader-body .site-footer { background: #1c0a0b; }

@media (max-width: 720px) {
  .reader-bar { grid-template-columns: 1fr; gap: 0.4rem; text-align: center; }
  .reader-pageinfo, .reader-back { text-align: center; }
  .reader-page-image { height: 70vh; }
  .reader-watermark { font-size: 3rem; letter-spacing: 0.2em; }
  .reader-controls { flex-direction: column; }
  .reader-btn { width: 100%; }
  .reader-jump { width: 100%; justify-content: center; }
}

/* ---------- home spotlight (Today's Highlight from library) ---------- */
/* Reusable Facebook follow CTA — shown below the result section on the
   chart / palm / love-match pages, where users land after a successful
   reading. Compact, branded with the site palette (not Facebook blue) so
   it doesn't fight the rest of the page. */
.fb-follow-cta {
  max-width: 720px;
  margin: 1.6rem auto 0;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(135deg, rgba(245,200,66,0.18), rgba(124,27,31,0.06));
  border: 1px solid rgba(124,27,31,0.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.fb-follow-text { flex: 1 1 240px; min-width: 0; }
.fb-follow-text strong {
  display: block;
  font-family: 'Noto Serif Sinhala', serif;
  color: var(--burgundy);
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}
.fb-follow-text p {
  margin: 0;
  font-family: 'Noto Sans Sinhala', sans-serif;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.fb-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  background: #1877f2;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-family: 'Noto Sans Sinhala', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}
.fb-follow-btn:hover { background: #145dbf; transform: translateY(-1px); }
.fb-follow-btn svg { flex-shrink: 0; }

/* Chart-reading upsell — same layout as .fb-follow-cta but a burgundy
   button so it reads as a different action from the Facebook follow. */
.chart-upsell {
  background: linear-gradient(135deg, rgba(124,27,31,0.12), rgba(245,200,66,0.16));
}
.chart-upsell-btn {
  background: var(--burgundy);
  color: #fff;
}
.chart-upsell-btn:hover { background: #5a1418; }

/* Subtle one-line "become a field agent" link — appears just above the
   footer copyright band on most pages, and inline below the FB CTA on
   the few pages that don't share the footer. Intentionally muted so it
   reads as an offer, not a banner. */
.agent-recruit-line {
  text-align: center;
  padding: 0.4rem 1rem 1rem;
  font-family: 'Noto Sans Sinhala', sans-serif;
  font-size: 0.85rem;
}
.agent-recruit-line a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dashed rgba(124,27,31,0.4);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.agent-recruit-line a:hover {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}

/* FAQ accordion. Native <details>/<summary> for keyboard + a11y, styled
   to match the page's burgundy/cream palette. */
.faq-section { background: var(--cream-warm); }
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(124,27,31,0.04);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.2rem;
  font-family: 'Noto Serif Sinhala', serif;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--burgundy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--burgundy-soft);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item .faq-body {
  padding: 0 1.2rem 1.1rem;
  font-family: 'Noto Sans Sinhala', sans-serif;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink);
}
.faq-item .faq-body a { color: var(--burgundy); }

.spotlight-section {
  background:
    radial-gradient(ellipse at 20% 0%,  var(--saffron-soft) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, var(--terracotta-soft) 0%, transparent 50%),
    var(--bg);
}
.spotlight-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  max-width: 880px;
  margin: 0 auto;
  align-items: center;
}
@media (max-width: 720px) {
  .spotlight-card {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding: 1.6rem 1.4rem;
    text-align: center;
  }
}
.spotlight-cover {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 12px 28px -10px rgba(124, 27, 31, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid var(--line);
}
.spotlight-cover:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -12px rgba(124, 27, 31, 0.4); }
.spotlight-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
@media (max-width: 720px) {
  .spotlight-cover { max-width: 200px; margin: 0 auto; }
}
.spotlight-body { display: flex; flex-direction: column; gap: 0.6rem; }
.spotlight-title {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1.7rem;
  font-style: italic;
  color: var(--burgundy);
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}
.spotlight-titleEn {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.spotlight-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  justify-content: flex-start;
}
@media (max-width: 720px) { .spotlight-meta { justify-content: center; } }
.spotlight-meta .spotlight-author { color: var(--burgundy); font-weight: 500; }
.spotlight-meta .spotlight-dot { color: var(--terracotta); }
.spotlight-meta .spotlight-pages { font-style: italic; color: var(--ink-faint); }
.spotlight-desc {
  color: var(--ink);
  line-height: 1.65;
  margin: 0.4rem 0 0.6rem;
}
.spotlight-cta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
@media (max-width: 720px) { .spotlight-cta { justify-content: center; } }

/* ---------- about page ---------- */
.about-card { padding: 1.8rem 2rem; }
@media (max-width: 480px) { .about-card { padding: 1.4rem 1.2rem; } }
.about-card h3 {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 500;
  color: var(--burgundy);
  text-transform: none;
  letter-spacing: 0.01em;
  margin: 0 0 1rem;
}
.about-card p { color: var(--ink); margin: 0 0 0.85em; line-height: 1.7; }
.about-card p:last-child { margin-bottom: 0; }
.about-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.about-list li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  color: var(--ink);
  line-height: 1.55;
}
.about-list li::before {
  content: "✦";
  color: var(--terracotta);
  font-size: 0.85em;
  flex-shrink: 0;
  transform: translateY(-1px);
}

.about-contact-intro { color: var(--ink-soft); }
.about-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.about-contact-list a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream-light);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.about-contact-list a:hover {
  border-color: var(--terracotta);
  background: var(--cream-warm);
  transform: translateX(2px);
}
.about-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.about-contact-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.about-contact-text strong {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy-soft);
  font-weight: 500;
  margin-bottom: 0.1rem;
}
.about-contact-text span:not(:first-child) {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1.05rem;
  color: var(--ink);
}

/* ---------- love match (coming soon — kept for fallback) ---------- */
.love-coming-soon {
  padding: 2.5rem 2rem;
  text-align: center;
  background:
    radial-gradient(ellipse at top, var(--blush, var(--saffron-soft)) 0%, transparent 60%),
    var(--panel);
}
.love-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 1rem;
  color: var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--saffron-soft);
  border-radius: 50%;
  border: 1px solid var(--terracotta);
}
.love-icon svg { width: 54px; height: 54px; display: block; }

/* ---------- love match: dual forms + result ---------- */
.love-forms-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 1rem;
  align-items: stretch;
  margin: 0 0 1.4rem;
}
.love-side { display: flex; flex-direction: column; }
.love-side-head {
  margin-bottom: 0.4rem;
  text-align: center;
}
.love-side-head .eyebrow {
  background: var(--cream-warm);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  display: inline-block;
}
.love-form { margin: 0; flex: 1; }
.love-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.love-divider svg { width: 70px; height: 100%; max-height: 220px; }
.love-actions {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 1rem;
}
.gender-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.gender-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.15s, background 0.15s;
}
.gender-opt:has(input:checked) {
  border-color: var(--burgundy);
  background: var(--saffron-soft);
}
.gender-opt input { accent-color: var(--burgundy); }

.match-score-card {
  background:
    radial-gradient(ellipse at top, var(--saffron-soft) 0%, transparent 65%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  text-align: center;
  margin-bottom: 1.6rem;
  box-shadow: var(--shadow-soft);
}
.match-score-label {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.match-score-num {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 3.4rem;
  color: var(--burgundy);
  line-height: 1;
  margin: 0.2rem 0;
}
.match-score-num strong { font-weight: 600; }
.match-score-max { font-size: 1.4rem; color: var(--ink-soft); margin-left: 0.2rem; }
.match-score-verdict {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--terracotta);
  margin-top: 0.2rem;
}
.match-excellent .match-score-verdict     { color: #2c7a2c; }
.match-verygood .match-score-verdict      { color: var(--terracotta); }
.match-acceptable .match-score-verdict    { color: var(--burgundy); }
.match-notrecommended .match-score-verdict { color: #8a3030; }

.match-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 0 0 1.5rem;
}
.match-charts-row .chart-box-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}
.match-charts-row h3 {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  color: var(--burgundy);
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
}
.match-chart-meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.6rem;
  line-height: 1.6;
}

.kuta-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.5rem;
}
.kuta-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}
.kuta-tone-ok  { border-left-color: #4a8c4a; }
.kuta-tone-mid { border-left-color: var(--terracotta); }
.kuta-tone-low { border-left-color: var(--burgundy); }
.kuta-num {
  text-align: center;
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  color: var(--burgundy);
}
.kuta-num strong { font-size: 1.9rem; line-height: 1; font-weight: 600; }
.kuta-num span   { color: var(--ink-soft); font-size: 0.95rem; margin-left: 0.1rem; }
.kuta-name {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1.15rem;
  color: var(--burgundy);
  font-weight: 500;
  margin-bottom: 0.1rem;
}
.kuta-blurb { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0.2rem; }
.kuta-detail {
  font-size: 0.92rem;
  color: var(--ink);
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-style: italic;
}

@media (max-width: 880px) {
  .love-forms-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .love-divider {
    height: 64px;
    margin: 0.4rem 0;
  }
  .love-divider svg {
    width: 52px;
    height: 64px;
    transform: rotate(0deg);
  }
  .match-charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .kuta-row {
    grid-template-columns: 70px 1fr;
    padding: 0.8rem 0.9rem;
  }
  .kuta-num strong { font-size: 1.6rem; }
  .match-score-num { font-size: 2.7rem; }
}

/* ---------- tarot ---------- */
.tarot-controls {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  margin: 0 0 1.4rem;
  box-shadow: var(--shadow-soft);
}
.tarot-spread-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.tarot-spread {
  background: var(--cream-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 0.9rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font: inherit;
  color: inherit;
}
.tarot-spread:hover { border-color: var(--terracotta); transform: translateY(-1px); }
.tarot-spread.is-active {
  border-color: var(--burgundy);
  background:
    radial-gradient(ellipse at top, var(--saffron-soft) 0%, transparent 70%),
    var(--cream-warm);
  box-shadow: 0 0 0 1px var(--burgundy) inset;
}
.tarot-spread-num {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1.8rem;
  color: var(--burgundy);
  font-weight: 600;
  line-height: 1;
}
.tarot-spread-name {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1.05rem;
  color: var(--burgundy);
}
.tarot-spread-desc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.tarot-question-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.tarot-question-wrap label {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tarot-question-wrap textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  resize: vertical;
  min-height: 3rem;
}
.tarot-question-wrap textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  background: var(--panel);
}
.tarot-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
}

.tarot-result-section { margin-top: 0.8rem; }
.tarot-result-head {
  text-align: center;
  margin-bottom: 1.4rem;
}
.tarot-result-head h2 {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  color: var(--burgundy);
  font-size: 1.7rem;
  margin: 0.3rem 0 0.4rem;
}
.tarot-question {
  color: var(--ink-soft);
  font-style: italic;
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
}

.tarot-cards-row {
  display: grid;
  gap: 1.2rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.tarot-cards-1 { grid-template-columns: minmax(180px, 240px); }
.tarot-cards-3 { grid-template-columns: repeat(3, minmax(0, 220px)); }
.tarot-cards-5 { grid-template-columns: repeat(5, minmax(0, 180px)); }

.tarot-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.tarot-pos {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--burgundy-soft);
  text-align: center;
  padding: 0.25rem 0.7rem;
  background: var(--cream-warm);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.tarot-card-svg {
  width: 100%;
  height: auto;
  display: block;
  /* Shadow lives on the SVG itself — applying `filter` to the 3D-rotating
     inner element flattens its rendering context on most browsers and
     breaks backface-visibility, which made cards appear to flip back to
     the cover. */
  filter: drop-shadow(0 4px 14px rgba(124, 27, 31, 0.22));
}
/* 3D flip container — perspective on the wrapper, transform on the inner.
   No `filter` on any 3D-transformed element. */
.tarot-card-flip {
  width: 100%;
  aspect-ratio: 200 / 320;
  perspective: 1400px;
  cursor: pointer;
}
.tarot-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.45, 0.05, 0.2, 1);
}
.tarot-card-flip.is-flipped .tarot-card-flip-inner {
  transform: rotateY(180deg);
}
.tarot-card-back,
.tarot-card-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
}
.tarot-card-back  { transform: rotateY(0deg); }
.tarot-card-face  { transform: rotateY(180deg); }
.tarot-card-flip:not(.is-flipped):hover .tarot-card-flip-inner {
  transform: rotateY(-8deg);
}

/* Meanings appear after all flips finish — slight fade-up. */
.tarot-meanings {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.tarot-meanings.is-shown {
  opacity: 1;
  transform: none;
}

.tarot-meanings {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.tarot-meaning {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--burgundy);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.tarot-meaning-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.tarot-meaning-pos {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy-soft);
}
.tarot-meaning-head h3 {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  color: var(--burgundy);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
}
.tarot-meaning-orient {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  margin-left: auto;
}
.tarot-orient-up  { color: var(--burgundy);   background: var(--saffron-soft); }
.tarot-orient-rev { color: #fff;              background: var(--terracotta); }
.tarot-meaning-body {
  color: var(--ink);
  margin: 0.2rem 0 0.3rem;
  line-height: 1.7;
}
.tarot-keywords {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

@media (max-width: 880px) {
  .tarot-cards-3 { grid-template-columns: repeat(3, 1fr); }
  .tarot-cards-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tarot-spread-row { grid-template-columns: 1fr; }
  .tarot-cards-3 { grid-template-columns: 1fr; }
  .tarot-cards-5 { grid-template-columns: 1fr; }
  .tarot-meaning-orient { margin-left: 0; }
}

/* ---------- forecast ---------- */
.container-wide { max-width: 1080px; }

.forecast-tabs {
  display: inline-flex;
  gap: 0.4rem;
  background: var(--cream-warm);
  padding: 0.3rem;
  border-radius: 999px;
  margin: 0 auto 2rem;
  width: fit-content;
  display: flex;
  justify-content: center;
}
.forecast-tabs .tab {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.18s, color 0.18s;
}
.forecast-tabs .tab.is-active {
  background: var(--burgundy);
  color: var(--cream-light);
}

.forecast-pick {
  margin: 0 auto 2.5rem;
}
.forecast-pick-head {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}
.lagna-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.7rem;
}
@media (max-width: 880px) {
  .lagna-cards { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .lagna-cards { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
}
.lagna-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.9rem 0.4rem 0.7rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
  font-family: inherit;
}
.lagna-card:hover {
  transform: translateY(-2px);
  border-color: var(--terracotta-soft);
  box-shadow: var(--shadow-soft);
}
.lagna-card.is-active {
  background: var(--cream-warm);
  border-color: var(--terracotta);
  box-shadow: 0 0 0 2px var(--saffron-soft);
}
.lagna-icon-wrap {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-light);
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--burgundy);
  transition: color 0.18s, background 0.18s;
}
.lagna-card.is-active .lagna-icon-wrap {
  background: var(--saffron-soft);
  color: var(--terracotta);
  border-color: var(--terracotta);
}
.lagna-icon {
  width: 36px;
  height: 36px;
  display: block;
}
.lagna-name {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 0.95rem;
  color: var(--burgundy);
  text-align: center;
  line-height: 1.2;
}

.forecast-detail-wrap { margin-bottom: 2rem; }
.forecast-loading {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ink-soft);
  font-style: italic;
}
.forecast-loading .spinner {
  border-color: var(--burgundy-soft);
  border-top-color: transparent;
}

.forecast-article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 480px) { .forecast-article { padding: 1.4rem 1.2rem; } }
.forecast-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.forecast-lagna-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--saffron-soft);
  color: var(--terracotta);
  border-radius: 50%;
  border: 1px solid var(--terracotta);
  flex-shrink: 0;
}
.forecast-lagna-icon .lagna-icon { width: 44px; height: 44px; }
.forecast-pretitle {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}
.forecast-title {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1.6rem;
  font-style: italic;
  color: var(--burgundy);
  margin: 0;
  font-weight: 500;
  line-height: 1.2;
}
.forecast-period {
  color: var(--ink-soft);
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin-left: 0.4rem;
}
.forecast-body {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink);
}
.forecast-body p { margin: 0 0 0.9em; }
.forecast-body p:last-child { margin-bottom: 0; }

.forecast-stamp {
  text-align: center;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-style: italic;
}
.forecast-disclaimer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 640px;
  margin: 2rem auto 0;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--line);
}

/* ---------- yogas ---------- */
.yogas-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 2rem;
}
@media (max-width: 720px) {
  .yogas-list { grid-template-columns: 1fr; }
}
.yoga-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-soft);
}
.yoga-name {
  font-family: 'Cormorant Garamond', 'Noto Serif Sinhala', serif;
  font-size: 1.15rem;
  color: var(--burgundy);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.yoga-body {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 0.5rem;
}
.yoga-planets {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}
.yoga-planets-label {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-style: normal;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--burgundy-soft);
  margin-right: 0.2rem;
}

/* ---------- alerts ---------- */
.alert {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  margin: 1rem 0;
  font-size: 0.95rem;
}
.alert-error { background: var(--burgundy-faint); color: var(--burgundy); border: 1px solid var(--burgundy-soft); }
.alert-info  { background: var(--saffron-soft); color: var(--burgundy); text-align: center; border: 1px solid var(--saffron); }
.alert-info a { color: var(--burgundy); border-bottom-color: var(--burgundy); }

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 0.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- footer ---------- */
.site-footer {
  background: var(--burgundy);
  color: var(--cream);
  padding: 3rem 2rem 2rem;
  font-size: 0.9rem;
}
.site-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}
.site-footer h4 {
  font-family: 'Cinzel', 'Noto Sans Sinhala', serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--saffron);
  margin: 0 0 0.9rem;
}
.site-footer .brand-row { margin-bottom: 0.8rem; }
.site-footer .brand-name { color: var(--cream-light); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer a { border: none; color: var(--cream); opacity: 0.85; }
.site-footer a:hover { color: var(--saffron); opacity: 1; }
.site-footer p { color: var(--cream); opacity: 0.85; }
.site-footer-bottom {
  max-width: 1140px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 229, 192, 0.2);
  text-align: center;
  font-size: 0.85rem;
  color: var(--cream);
  opacity: 0.7;
  font-style: italic;
}

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.7rem; }
  .hero { padding: 3rem 1.2rem 4rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .hero-text { order: 2; }
  .hero-art { order: 1; max-width: 260px; }
  .hero-art::before { inset: -12px; }
  .hero-art::after  { inset: -24px; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .section { padding: 3.5rem 1.2rem; }
  .cards-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .charts-row { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .site-header { padding: 0.8rem 1.2rem; }
  .site-nav { gap: 1.1rem; }
  .site-nav a { font-size: 0.7rem; letter-spacing: 0.14em; }
  .brand-name { font-size: 1rem; letter-spacing: 0.2em; }
  .brand-logo { width: 36px; height: 36px; }

  /* Chart-form mobile: tighter padding + selects shrink with their grid cells */
  .container { padding: 1.5rem 1rem 4rem; }
  .page-head { padding: 3rem 1.2rem 2.5rem; }
  .chart-form { padding: 1.4rem 1.1rem; }
  .dt-row { gap: 0.5rem; }
  .dt-cell { min-width: 0; }
  .dt-cell select { width: 100%; min-width: 0; padding: 0.6rem 1.8rem 0.6rem 0.6rem; font-size: 0.95rem; }
  .dt-row-time { max-width: 100%; }
  .place-search input { font-size: 1rem; }
  .form-field input, .form-field select { width: 100%; min-width: 0; }
}

/* Mobile hamburger menu — kicks in below 720px so the inline nav doesn't
   crowd the logo. The nav becomes a slide-down drawer from the header. */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream-light);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 0.5rem 1.4rem 1rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .site-header.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .site-nav a {
    display: block;
    padding: 0.85rem 0.2rem;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    color: var(--burgundy);
    border-bottom: 1px solid var(--line);
  }
  .site-nav a:last-child { border-bottom: none; }
  .site-header { position: relative; }
}

@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  .chart-form { padding: 1.2rem 0.9rem; }
  .container { padding: 1.2rem 0.8rem 3rem; }
  .page-head { padding: 2.4rem 1rem 2rem; }
  /* On very small screens, drop the dt-row gap further and shrink select padding so 3 cells fit. */
  .dt-row { gap: 0.4rem; }
  .dt-cell select { padding: 0.55rem 1.5rem 0.55rem 0.5rem; font-size: 0.9rem; }
  .dt-cell .dt-sub { font-size: 0.58rem; letter-spacing: 0.12em; }
}

/* Belt-and-braces: stop horizontal overflow on any narrow screen. */
html, body { overflow-x: hidden; }

/* ---------- floating contact (WhatsApp + Facebook) ---------- */
.floating-contact {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 50;          /* below the nav drawer (60) and TOC drawer (60) */
}
.float-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.float-btn:hover, .float-btn:focus {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  outline: none;
  filter: brightness(1.05);
}
.float-whatsapp { background: #25d366; }
.float-facebook { background: #1877f2; }
.float-promo {
  background: var(--saffron);
  cursor: pointer;
  position: relative;
}
.float-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(242, 199, 48, 0.6);
  animation: float-promo-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
.float-promo svg {
  transform-origin: 50% 65%;            /* rock around the base of the box */
  animation: float-promo-shake 3.4s ease-in-out infinite;
}
.float-promo:hover svg,
.float-promo:focus svg { animation-play-state: paused; }
@keyframes float-promo-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(242, 199, 48, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(242, 199, 48, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(242, 199, 48, 0);   }
}
/* Gift-box "shake to open" — quick wiggle burst, then rest, then repeat. */
@keyframes float-promo-shake {
  0%   { transform: rotate(0)    translateY(0); }
  3%   { transform: rotate(-12deg) translateY(-1px); }
  6%   { transform: rotate(11deg)  translateY(-1px); }
  9%   { transform: rotate(-9deg)  translateY(-1px); }
  12%  { transform: rotate(7deg)   translateY(0); }
  15%  { transform: rotate(-4deg)  translateY(0); }
  18%  { transform: rotate(0)    translateY(0); }
  100% { transform: rotate(0)    translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .float-promo::before,
  .float-promo svg { animation: none; }
}

/* When the reader is full-bleed dark, lift the buttons further so they're visible. */
.reader-body .floating-contact { z-index: 65; }

@media (max-width: 720px) {
  .floating-contact { right: 12px; bottom: 12px; gap: 10px; }
  .float-btn { width: 46px; height: 46px; box-shadow: 0 4px 12px rgba(0,0,0,0.22); }
  .float-btn svg { width: 20px; height: 20px; }
}

/* ---------- Competition modal ---------- */
.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.promo-modal.is-open { opacity: 1; pointer-events: auto; }
.promo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 8, 10, 0.62);
  backdrop-filter: blur(2px);
}
.promo-modal-card {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: linear-gradient(180deg, var(--cream-light) 0%, var(--cream-warm) 100%);
  border: 1px solid var(--terracotta-soft);
  border-radius: var(--radius);
  box-shadow: 0 28px 64px -22px rgba(40, 8, 10, 0.55), 0 0 0 1px rgba(124, 27, 31, 0.06);
  padding: 30px 30px 26px;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.promo-modal.is-open .promo-modal-card { transform: translateY(0) scale(1); }
.promo-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(124, 27, 31, 0.08);
  color: var(--burgundy);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.promo-modal-close:hover { background: rgba(124, 27, 31, 0.16); }
.promo-modal-eyebrow {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  background: rgba(242, 199, 48, 0.32);
  border: 1px solid rgba(242, 199, 48, 0.6);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 14px;
}
.promo-modal-title {
  margin: 0 0 12px;
  font-family: 'Noto Serif Sinhala', 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  line-height: 1.3;
  color: var(--burgundy);
  font-weight: 600;
}
.promo-modal-body {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}
.promo-modal-steps-h {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--burgundy-soft);
}
.promo-modal-steps {
  margin: 0 0 18px;
  padding: 0 0 0 22px;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.55;
}
.promo-modal-steps li { margin-bottom: 6px; }
.promo-modal-steps li::marker { color: var(--terracotta); font-weight: 600; }
.promo-modal-deadline {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: rgba(217, 124, 31, 0.12);
  border-left: 3px solid var(--terracotta);
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.promo-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.promo-modal-cta {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  background: #1877F2;
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(24, 119, 242, 0.55);
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s;
}
.promo-modal-cta:hover {
  background: #1565d8;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(24, 119, 242, 0.6);
  border-bottom: 0;
  color: #fff;
}
.promo-modal-dismiss {
  padding: 13px 18px;
  background: transparent;
  color: var(--burgundy-soft);
  border: 1px solid rgba(124, 27, 31, 0.2);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.promo-modal-dismiss:hover { background: rgba(124, 27, 31, 0.06); color: var(--burgundy); }

body.promo-modal-open { overflow: hidden; }

@media (max-width: 520px) {
  .promo-modal { padding: 14px; }
  .promo-modal-card { padding: 26px 22px 22px; }
  .promo-modal-title { font-size: 1.32rem; }
  .promo-modal-actions { flex-direction: column; align-items: stretch; }
  .promo-modal-cta, .promo-modal-dismiss { width: 100%; }
}

/* ── Paid reading card (chart.html) ─────────────────────────────────── */
.paid-card {
  margin: 3.2rem auto 1.4rem;
  max-width: 720px;
  background: linear-gradient(180deg, var(--cream-light) 0%, #fff 100%);
  border: 1px solid var(--saffron);
  border-radius: 18px;
  padding: 2.2rem 2rem 1.8rem;
  box-shadow: 0 6px 22px rgba(124, 27, 31, 0.10);
  position: relative;
}
.paid-card-eyebrow {
  display: inline-block;
  background: var(--burgundy);
  color: var(--cream);
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
.paid-card-title {
  font-size: 1.55rem;
  margin: 0 0 0.6rem;
  color: var(--burgundy);
  line-height: 1.3;
}
.paid-card-lead {
  margin: 0 0 1.4rem;
  color: var(--ink);
  line-height: 1.6;
}
.paid-card-pricerow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.paid-card-anchor {
  text-decoration: line-through;
  color: var(--ink-faint);
  font-size: 1.1rem;
}
.paid-card-price {
  font-family: 'Cinzel', serif;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--terracotta);
}
.paid-card-pricenote {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}
.paid-card-delivery {
  display: inline-block;
  margin-bottom: 1.4rem;
  color: var(--burgundy-soft);
  font-size: 0.9rem;
  background: var(--saffron-soft);
  padding: 4px 10px;
  border-radius: 6px;
}
.paid-card-deliv,
.paid-card-steps {
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  background: rgba(244, 229, 192, 0.42);
  border-left: 3px solid var(--saffron);
  border-radius: 4px 8px 8px 4px;
}
.paid-card-h {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 0.55rem;
}
.paid-card-list,
.paid-card-steplist {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink);
  line-height: 1.65;
}
.paid-card-list li,
.paid-card-steplist li { margin-bottom: 6px; }
.paid-card-banknote {
  margin: 1.2rem 0 1.4rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px dashed var(--burgundy-soft);
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}
.paid-card-reftip {
  margin: 0 0 1.4rem;
  padding: 0.95rem 1.05rem;
  background: var(--saffron-soft);
  border-left: 4px solid var(--terracotta);
  border-radius: 4px 8px 8px 4px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.paid-card-reftip-h {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
}
.paid-card-reftip-body { color: var(--ink); }
.paid-card-actions {
  display: flex;
  justify-content: center;
  margin: 1.6rem 0 0.8rem;
}
.paid-card-cta {
  display: inline-block;
  background: var(--burgundy);
  color: var(--cream);
  border: none;
  border-bottom: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, transform .18s, box-shadow .18s;
  box-shadow: 0 3px 12px rgba(124, 27, 31, 0.25);
}
.paid-card-cta:hover {
  background: var(--terracotta);
  transform: translateY(-1px);
  color: var(--cream);
  border-bottom: none;
}
.paid-card-help {
  text-align: center;
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
@media (max-width: 540px) {
  .paid-card { padding: 1.6rem 1.3rem 1.4rem; margin-top: 2rem; }
  .paid-card-title { font-size: 1.3rem; }
  .paid-card-price { font-size: 1.7rem; }
  .paid-card-pricerow { gap: 8px; }
  .paid-card-cta { width: 100%; text-align: center; }
}

/* Sample report link */
.sample-report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--burgundy);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  transition: opacity 0.15s;
}
.sample-report-link:hover { opacity: 0.75; }
.sample-report-link svg { flex-shrink: 0; }

.paid-card-sample {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.paid-card-sample a {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.paid-card-sample a:hover { opacity: 0.75; }