/*
 * styles.css — a light, warm palette drawn from things that turn up at an
 * auspicious occasion: turmeric, marigold, sandalwood, kumkum, tulsi. No dark
 * surfaces anywhere; the darkest value in the sheet is the body text.
 */

:root {
  --cream:        #FFFBF3;
  --cream-deep:   #FDF3E3;
  --surface:      #FFFFFF;
  --surface-alt:  #FEF8EC;
  --border:       #EDE0C8;
  --border-soft:  #F4EBDA;

  --ink:          #3E3527;
  --ink-soft:     #7B6E59;
  --ink-faint:    #A99B84;

  --saffron:      #E07B39;
  --saffron-deep: #C4611F;
  --marigold:     #F2A93B;
  --marigold-pale:#FDEBC8;
  --kumkum:       #C2453D;
  --kumkum-pale:  #FBE4E1;
  --tulsi:        #5E8C58;
  --tulsi-pale:   #E7F0E4;
  --gold:         #C9A227;
  --sandal:       #D9C7A5;

  --radius:   14px;
  --radius-s: 9px;
  --shadow:   0 1px 2px rgba(93, 74, 42, .05), 0 8px 24px rgba(93, 74, 42, .06);
  --shadow-s: 0 1px 2px rgba(93, 74, 42, .06);

  --serif: 'Marcellus', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --deva:  'Tiro Devanagari Hindi', var(--serif);

  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Any author `display` rule beats the UA stylesheet's [hidden] { display:none },
   which silently un-hides elements toggled with the hidden attribute. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.25;
  margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; font-family: var(--sans); font-weight: 600;
     letter-spacing: .02em; }
p { margin: 0 0 1em; }
a { color: var(--saffron-deep); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ------------------------------------------------------------- header -- */

/* Room for the sticky header on every in-page jump; --header-h is measured
   by js/ui-common.js, and the fallback is its desktop height. */
html { scroll-padding-top: calc(var(--header-h, 142px) + 14px); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 251, 243, .92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  /* The row gap is the one that shows: above about 1100px the brand and the
     pill strip sit on one line, below it they wrap to two, and the strip then
     needs air on both sides rather than butting into the brand and the rule. */
  display: flex; align-items: center; gap: 16px 28px;
  min-height: 66px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none;
  color: inherit; margin-right: auto; }
.brand-mark {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFD98A, var(--marigold) 55%, var(--saffron) 100%);
  display: grid; place-items: center;
  color: #fff; font-family: var(--deva); font-size: 19px; line-height: 1;
  box-shadow: 0 2px 8px rgba(224, 123, 57, .32);
}
/* The orbit: an open arc round the disc with the Moon on it. Drawn as a
   background so every page's existing <span class="brand-mark"> picks it up. */
.brand-mark { position: relative; margin: 9px; }
.brand-mark::before {
  content: ""; position: absolute; inset: -9.5px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M78.02 9.98A48.85 48.85 0 1 0 98.67 45.74' fill='none' stroke='%23F2A93B' stroke-width='2.3'/%3E%3Ccircle cx='87.42' cy='18.6' r='6' fill='%23C4611F'/%3E%3C/svg%3E") center / contain no-repeat;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-size: 1.22rem; }
.brand-sub { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  appearance: none; border: 1px solid transparent; background: none;
  font: inherit; font-size: .93rem; color: var(--ink-soft);
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tab:hover { background: var(--surface-alt); color: var(--ink); }
.tab[aria-selected="true"] {
  background: var(--marigold-pale); color: var(--saffron-deep);
  border-color: #F0D9A8; font-weight: 600;
}

/* Most visitors know their Western sun sign and not their rashi, so the
   finder sits in the pill strip itself, third, between Year Ahead and Kundli.
   It is exactly a .tab — geometry, type and states — tinted saffron and given
   a glyph so it reads as the action rather than as another section. Weight
   600 and a fill are left to the selected tab; nothing else in the header
   should look switched on. */
.tab-find {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--saffron-deep); font-weight: 500; text-decoration: none;
}
.tab-find:hover { background: var(--marigold-pale); border-color: #F0D9A8; }
.find-cta-glyph { font-size: .95rem; line-height: 1; color: var(--saffron); }

/* Links in the strip need the same box a <button class="tab"> gets. */
a.tab { text-decoration: none; display: inline-flex; align-items: center; }
.tab[aria-current="page"] {
  background: var(--marigold-pale); color: var(--saffron-deep);
  border-color: #F0D9A8; font-weight: 600;
}

/* The finder is scrolled to from the header, and the sticky header would
   otherwise cover its first field. */
.rashi-finder.is-flagged {
  border-radius: var(--radius); outline: 2px solid var(--marigold);
  outline-offset: 8px; transition: outline-color .5s ease .7s;
}
.rashi-finder.is-flagged.is-fading { outline-color: transparent; }

/* --------------------------------------------------------------- hero -- */

.hero { padding: 46px 0 26px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px;
  align-items: center; }
/* Compact band so the horoscope itself sits near the top of the page. */
.hero-slim { padding: 40px 0 22px; }
.hero-slim h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.hero h1 { margin-bottom: .35em; }
.hero .lede { font-size: 1.02rem; color: var(--ink-soft); max-width: 68ch;
  margin-bottom: 0; }
.hero-deva { font-family: var(--deva); color: var(--saffron);
  font-size: 1.05rem; letter-spacing: .04em; margin-bottom: 6px; }

/* today's panchang card */
.panchang-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.panchang-card header {
  padding: 14px 20px; background: linear-gradient(100deg, var(--marigold-pale), #FFF6E4);
  border-bottom: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.panchang-card header .pc-date { font-family: var(--serif); font-size: 1.05rem; }
.panchang-card header .pc-place { font-size: .78rem; color: var(--ink-faint); }
.pc-body { display: grid; grid-template-columns: 1fr 1fr; }
.pc-item { padding: 11px 20px; border-bottom: 1px solid var(--border-soft); }
.pc-item:nth-child(odd) { border-right: 1px solid var(--border-soft); }
.pc-item .k { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); display: block; }
.pc-item .v { font-size: .95rem; }
.pc-foot { display: flex; gap: 18px; flex-wrap: wrap; padding: 11px 20px;
  font-size: .82rem; color: var(--ink-soft); background: var(--surface-alt); }
.pc-foot b { font-weight: 600; color: var(--ink); }

/* -------------------------------------------------------------- panes -- */

.pane { display: none; padding: 8px 0 40px; }
.pane.is-active { display: block; animation: fade .28s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; } }

.section-head { margin-bottom: 22px; }
.section-head p { color: var(--ink-soft); max-width: 62ch; margin-bottom: 0; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-s);
}
.card + .card { margin-top: 18px; }

/* ------------------------------------------------------------- forms -- */

.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
/* min-width:0 matters: a grid item defaults to the intrinsic width of its
   widest content, so one <select> with a long option ("Andhra & Telangana")
   would otherwise steal columns from its neighbours and clip them. */
.field { display: flex; flex-direction: column; gap: 5px; position: relative;
  min-width: 0; }
.field.c2 { grid-column: span 2; }
.field.c3 { grid-column: span 3; }
.field.c5 { grid-column: span 5; }
.field.c4 { grid-column: span 4; }
.field.c6 { grid-column: span 6; }
.field.c12 { grid-column: span 12; }
.field label { font-size: .76rem; letter-spacing: .05em; color: var(--ink-soft);
  font-weight: 500; }
.field input, .field select {
  font: inherit; font-size: .94rem; color: var(--ink);
  padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-s); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
  width: 100%; min-width: 0;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--marigold);
  box-shadow: 0 0 0 3px var(--marigold-pale);
}
.field .hint { font-size: .72rem; color: var(--ink-faint); }

/* Time of birth: two 24-hour wheels, hours then minutes, never AM/PM. */
.time24 { display: flex; align-items: center; gap: 6px; }
.time24 select { font-variant-numeric: tabular-nums; text-align: center;
  padding-left: 8px; padding-right: 8px; }
.time24 .t24-sep { color: var(--ink-faint); font-weight: 600; }

.suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-s); box-shadow: var(--shadow);
  max-height: 244px; overflow-y: auto; margin-top: 4px; display: none;
}
.suggest.is-open { display: block; }
.suggest button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  font: inherit; font-size: .88rem; padding: 8px 12px; cursor: pointer;
  color: var(--ink);
}
.suggest button:hover, .suggest button.is-cursor { background: var(--marigold-pale); }
.suggest button small { color: var(--ink-faint); }
.suggest button.suggest-note {
  color: var(--ink-faint); font-size: .76rem; cursor: default;
  border-top: 1px solid var(--border-soft); background: var(--surface-alt);
  position: sticky; bottom: 0;
}
.suggest button.suggest-note:hover { background: var(--surface-alt); }

.btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  font-size: .93rem; padding: 11px 24px; border-radius: 999px;
  background: linear-gradient(180deg, var(--marigold), var(--saffron));
  color: #fff; box-shadow: 0 2px 10px rgba(224, 123, 57, .3);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.btn:hover { filter: brightness(1.04); box-shadow: 0 4px 16px rgba(224, 123, 57, .36); }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: var(--surface); color: var(--saffron-deep);
  border: 1px solid var(--border); box-shadow: none; font-weight: 500;
}
.btn.ghost:hover { background: var(--surface-alt); }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px;
  flex-wrap: wrap; }
.form-error { color: var(--kumkum); font-size: .86rem; }

/* ------------------------------------------------------ rashi finder -- */

.rashi-finder { margin-top: 14px; }
.finder-toggle {
  appearance: none; cursor: pointer; font: inherit; font-size: .89rem;
  background: var(--surface-alt); border: 1px dashed var(--sandal);
  color: var(--ink-soft); padding: 10px 18px; border-radius: 999px;
  transition: background .15s, border-color .15s, color .15s;
}
.finder-toggle b { color: var(--saffron-deep); font-weight: 600; }
.finder-toggle:hover {
  background: var(--marigold-pale); border-color: var(--marigold);
  color: var(--ink);
}
.finder-form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-s);
}

.rf-answer {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; padding: 18px 22px;
  background: linear-gradient(115deg, var(--marigold-pale), #FFF8EC 60%, var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
}
.rf-glyph {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 1.9rem;
  font-family: var(--serif); color: var(--saffron-deep);
  background: radial-gradient(circle at 34% 28%, #FFFDF6, #FDECC9);
  border: 1px solid #F0D9A8;
}
.rf-label {
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--saffron-deep); font-weight: 600;
}
.rf-answer h3 { margin: 0 0 .15em; font-size: 1.45rem; }
.rf-answer h3 span { color: var(--ink-soft); font-size: 1.05rem; }
.rf-answer p { margin: 0; font-size: .88rem; color: var(--ink-soft); max-width: 60ch; }

/* --------------------------------------- horoscope: day & place bar -- */

.date-nav {
  display: flex; align-items: center; gap: 4px; margin-bottom: 18px;
  flex-wrap: wrap;
}
.date-nav button {
  appearance: none; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-soft); width: 34px; height: 34px; border-radius: 50%;
  font-size: 1.2rem; line-height: 1; display: grid; place-items: center;
  transition: background .15s, color .15s, border-color .15s;
}
.date-nav button:hover {
  background: var(--marigold-pale); color: var(--saffron-deep);
  border-color: #F0D9A8;
}
.date-nav-label {
  font-family: var(--serif); font-size: 1.12rem; padding: 0 10px;
  min-width: 13ch;
}
.date-nav .date-nav-today {
  width: auto; height: 32px; padding: 0 14px; border-radius: 999px;
  font-size: .8rem; margin-left: 8px;
}

.place-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; font-size: .86rem; color: var(--ink-soft);
  position: relative;
}
.place-bar-text b { color: var(--ink); font-weight: 600; }
.linkish {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .86rem; color: var(--saffron-deep);
  text-decoration: underline; padding: 0;
}
.place-field { flex: 1 1 260px; max-width: 340px; }

/* -------------------------------------------------- horoscope: signs -- */

.sign-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
.sign-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 15px; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  transition: transform .14s, box-shadow .16s, border-color .16s;
  display: flex; flex-direction: column; gap: 3px;
}
.sign-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: var(--marigold); }
.sign-tile[aria-pressed="true"] {
  border-color: var(--saffron); background: var(--surface-alt);
  box-shadow: 0 0 0 3px var(--marigold-pale);
}
.sign-tile .glyph { font-size: 1.5rem; color: var(--saffron); line-height: 1;
  font-family: var(--serif); }
.sign-tile .en { font-family: var(--serif); font-size: 1.06rem; }
.sign-tile .sa { font-size: .74rem; color: var(--ink-faint); }
.sign-tile .stars { font-size: .8rem; }

/* Fractional star rating: a grey row with a gold row clipped over it. */
.stars {
  position: relative; display: inline-block; white-space: nowrap;
  color: var(--border); letter-spacing: .1em; line-height: 1;
  font-family: var(--sans);
  /* Must shrink to the width of the five stars: the gold overlay is clipped
     as a percentage of this box, so letting a flex parent stretch it would
     make every rating read as five full stars. */
  align-self: flex-start; width: -moz-fit-content; width: fit-content;
}
.stars::before { content: '\2605\2605\2605\2605\2605'; }
.stars i {
  position: absolute; left: 0; top: 0; overflow: hidden;
  color: var(--gold); white-space: nowrap; letter-spacing: .1em;
}
.stars i::before { content: '\2605\2605\2605\2605\2605'; }

.reading-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.reading-head .glyph {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  background: var(--marigold-pale); color: var(--saffron-deep);
  display: grid; place-items: center; font-size: 1.7rem;
  font-family: var(--serif);
}
.reading-head h3 { margin: 0; }
.reading-head .meta { font-size: .82rem; color: var(--ink-soft); }
.rating { margin-left: auto; text-align: right; }
.rating .stars { font-size: 1.15rem; }
.rating .cap { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); }

.overview { font-size: 1.02rem; }

.read-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: 16px; }
.read-cell { background: var(--surface-alt); border: 1px solid var(--border-soft);
  border-radius: var(--radius-s); padding: 14px 16px; }
.read-cell h4 { color: var(--saffron-deep); margin-bottom: .3em;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.read-cell p { margin: 0; font-size: .92rem; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.chip {
  font-size: .8rem; padding: 5px 13px; border-radius: 999px;
  background: var(--surface-alt); border: 1px solid var(--border-soft);
  color: var(--ink-soft);
}
.chip b { color: var(--ink); font-weight: 600; }
.chip.warn { background: var(--kumkum-pale); border-color: #F3D2CE; color: #8E3630; }
.chip.good { background: var(--tulsi-pale); border-color: #D6E4D2; color: #3E6A39; }

/* ------------------------------------------------------------- tables -- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .89rem;
  min-width: 520px; }
table.data th, table.data td { text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
table.data th { font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; background: var(--surface-alt); }
table.data tbody tr:hover { background: #FFFDF7; }
table.data td.num { font-variant-numeric: tabular-nums; }
.tag { font-size: .68rem; padding: 2px 8px; border-radius: 999px;
  background: var(--marigold-pale); color: var(--saffron-deep); }
.tag.r { background: var(--kumkum-pale); color: #8E3630; }
.tag.ex { background: var(--tulsi-pale); color: #3E6A39; }

/* -------------------------------------------------------- birth chart -- */

.chart-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; }
.chart-box { text-align: center; }
.chart-box h4 { color: var(--ink-soft); margin-bottom: 10px;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
svg.kundli-chart { width: 100%; max-width: 330px; height: auto; }
svg.kundli-chart .frame { fill: var(--surface); stroke: var(--saffron);
  stroke-width: 1.6; }
svg.kundli-chart .line { stroke: var(--sandal); stroke-width: 1; fill: none; }
svg.kundli-chart .sign-no { font-size: 9px; fill: var(--ink-faint);
  font-family: var(--sans); }
svg.kundli-chart .grahas { font-size: 10.5px; fill: var(--ink);
  font-family: var(--sans); font-weight: 500; }
svg.kundli-chart .lagna-mark { font-size: 10.5px; fill: var(--kumkum);
  font-weight: 700; }

/* --------------------------------------------------------- festivals -- */

.fest-toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 18px; }
.year-strip { display: flex; gap: 5px; overflow-x: auto; padding: 4px 0 8px;
  scrollbar-width: thin; }
.year-btn {
  appearance: none; border: 1px solid var(--border); background: var(--surface);
  font: inherit; font-size: .84rem; padding: 6px 13px; border-radius: 999px;
  cursor: pointer; color: var(--ink-soft); flex: none;
  font-variant-numeric: tabular-nums;
}
.year-btn:hover { background: var(--surface-alt); }
.year-btn[aria-pressed="true"] { background: var(--saffron); color: #fff;
  border-color: var(--saffron); font-weight: 600; }
.year-btn.is-now { border-color: var(--marigold); }

.fest-month { margin-top: 26px; }
.fest-month > h3 {
  font-size: .78rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--saffron-deep); border-bottom: 1px solid var(--border);
  padding-bottom: 7px; margin-bottom: 4px;
}
.fest-row {
  display: grid; grid-template-columns: 52px 58px 1fr auto; gap: 14px;
  padding: 11px 10px; border-bottom: 1px solid var(--border-soft);
  align-items: center; border-radius: var(--radius-s);
  transition: background .15s, transform .15s;
}
.fest-row:hover { background: #FFFDF7; transform: translateX(2px); }
.fest-row.is-today { background: var(--marigold-pale);
  box-shadow: inset 3px 0 0 var(--saffron); }
.fest-row.is-past { opacity: .78; }
.fest-row.is-past:hover { opacity: 1; }
.fest-date { text-align: center; }
.fest-date .d { font-family: var(--serif); font-size: 1.45rem; line-height: 1; }
.fest-date .w { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); }
.fest-body { min-width: 0; }
.fest-name { font-weight: 600; font-size: .98rem; }
.fest-note { font-size: .82rem; color: var(--ink-soft); }
.fest-tithi { font-size: .76rem; color: var(--ink-faint); text-align: right;
  white-space: nowrap; }

/* ---- festival artwork ---- */

.fest-sprite { display: none; }

.fest-art {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 28%, #FFF3D8, var(--marigold-pale));
  border: 1px solid #F2DFB4;
}
.fest-icon { width: 27px; height: 27px; display: block;
  --tone-deep: var(--saffron-deep); --tone-light: var(--marigold); }
.fest-icon .f2 { fill: var(--tone-deep);  stroke: none; }
.fest-icon .f1 { fill: var(--tone-light); stroke: none; }
.fest-icon .s2 { stroke: var(--tone-deep);  fill: none; }
.fest-icon .s1 { stroke: var(--tone-light); fill: none; }

/* Category tinting, so the calendar reads at a glance. */
.fest-row.cat-observance .fest-art {
  background: radial-gradient(circle at 35% 28%, #FFF7E6, #FBEBCB);
}
.fest-row.cat-regional .fest-art {
  background: radial-gradient(circle at 35% 28%, #EEF6EC, var(--tulsi-pale));
  border-color: #D6E4D2;
}
.fest-row.cat-regional .fest-icon {
  --tone-deep: #3E6A39; --tone-light: var(--tulsi);
}
.fest-row.cat-national .fest-art {
  background: radial-gradient(circle at 35% 28%, #FBF6EC, #F0E7D5);
  border-color: var(--sandal);
}
.fest-row.cat-national .fest-icon {
  --tone-deep: #8A7752; --tone-light: var(--sandal);
}

/* ---- next festival feature card ---- */

.fest-next {
  display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
  background: linear-gradient(115deg, var(--marigold-pale), #FFF8EC 55%, var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 26px; margin: 18px 0 6px; box-shadow: var(--shadow-s);
  position: relative; overflow: hidden;
}
.fest-next::after {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,169,59,.16), transparent 70%);
}
.fest-next-art {
  width: 96px; height: 96px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #FFFDF6, #FDECC9);
  border: 1px solid #F0D9A8;
  box-shadow: 0 4px 18px rgba(224, 123, 57, .16);
}
.fest-icon.big { width: 56px; height: 56px; }
.fest-next-body { position: relative; z-index: 1; min-width: 0; }
.fest-next-when {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--saffron-deep); font-weight: 600; margin-bottom: 2px;
}
.fest-next-body h3 { margin: 0 0 .2em; font-size: 1.5rem; }
.fest-next-body p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.fest-next-body .chips { margin-top: 12px; }
.cat { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; }
.cat.major { background: var(--saffron); }
.cat.observance { background: var(--marigold); }
.cat.regional { background: var(--tulsi); }
.cat.national { background: var(--sandal); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem;
  color: var(--ink-soft); margin-top: 6px; }

/* ---------------------------------------------------------- matching -- */

.match-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.match-col h4 {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--saffron-deep); padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

.score-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  background: linear-gradient(115deg, var(--marigold-pale), #FFF8EC 60%, var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 24px;
}
.score-dial { position: relative; width: 132px; height: 132px; flex: none; }
.score-dial svg { transform: rotate(-90deg); }
.score-dial .track { stroke: var(--border); }
.score-dial .fill { stroke: var(--saffron); stroke-linecap: round;
  transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.3,1); }
.score-dial .val {
  position: absolute; inset: 0; display: grid; place-items: center;
  flex-direction: column; text-align: center;
}
.score-dial .val b { font-family: var(--serif); font-size: 2.1rem;
  line-height: 1; display: block; }
.score-dial .val span { font-size: .7rem; color: var(--ink-faint);
  letter-spacing: .1em; }
.score-verdict h3 { margin-bottom: .2em; }
.score-verdict p { margin: 0; color: var(--ink-soft); font-size: .94rem; }

.koota-list { margin-top: 20px; display: flex; flex-direction: column; gap: 2px; }
.koota {
  display: grid; grid-template-columns: 132px 1fr 92px; gap: 14px;
  align-items: center; padding: 11px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.koota .kname { font-weight: 600; font-size: .93rem; }
.koota .kname small { display: block; font-weight: 400; font-size: .74rem;
  color: var(--ink-faint); }
.koota .kbar { height: 7px; border-radius: 999px; background: var(--border-soft);
  overflow: hidden; }
.koota .kbar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--marigold), var(--saffron));
  transition: width .7s cubic-bezier(.2,.7,.3,1); }
.koota .kdetail { font-size: .8rem; color: var(--ink-soft); margin-top: 5px; }
.koota .kscore { text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--serif); font-size: 1.05rem; }
.koota .kscore small { color: var(--ink-faint); font-size: .78rem;
  font-family: var(--sans); }
.koota.zero .kbar i { background: var(--kumkum); }

.notice {
  border-left: 3px solid var(--marigold); background: var(--surface-alt);
  padding: 12px 16px; border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: .89rem; margin-top: 14px;
}
.notice.good { border-left-color: var(--tulsi); background: var(--tulsi-pale); }
.notice.warn { border-left-color: var(--kumkum); background: var(--kumkum-pale); }
.notice h4 { margin-bottom: .25em; }
.notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- footer etc -- */

.disclaimer {
  margin-top: 30px; font-size: .82rem; color: var(--ink-faint);
  border-top: 1px solid var(--border-soft); padding-top: 16px;
}

.site-footer {
  margin-top: 40px; border-top: 1px solid var(--border);
  background: var(--cream-deep); padding: 34px 0 40px;
  font-size: .87rem; color: var(--ink-soft);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.site-footer h4 { color: var(--ink); margin-bottom: .6em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 5px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--saffron-deep); text-decoration: underline; }
.footer-bottom { margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--border); font-size: .8rem; color: var(--ink-faint);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.empty { color: var(--ink-faint); font-size: .92rem; padding: 30px 0;
  text-align: center; }

.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;
}

/* ------------------------------------------------ per-sign pages ----- */

/* The header nav is buttons on the home page and links on the sign pages;
   the links have to be dressed as tabs without inheriting anchor styling. */
.tabs a.tab { text-decoration: none; display: inline-block; }

.crumbs {
  padding: 14px 0 0; font-size: .8rem; color: var(--ink-faint);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--saffron-deep); text-decoration: underline; }

.sign-hero h1 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.h1-sub {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--saffron-deep);
}
.sign-facts { margin-top: 16px; }

.more-link { margin: 18px 0 0; font-size: .9rem; }
.more-link a { color: var(--saffron-deep); font-weight: 500; }

/* Long-form writing. Narrower than the tool panes on purpose — the cards
   above want the full width, prose does not. */
.prose { margin: 34px 0 0; max-width: 72ch; }
.prose h2 {
  margin: 34px 0 .5em; font-size: 1.32rem;
  padding-top: 18px; border-top: 1px solid var(--border-soft);
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.prose p { margin: 0 0 1em; }
.prose .table-wrap { margin: 18px 0 22px; }
.prose a { color: var(--saffron-deep); }

table.gochara-table td .sa { color: var(--ink-faint); font-size: .82rem; }
table.gochara-table td:last-child { white-space: normal; min-width: 240px; }
.tag.mid { background: var(--marigold-pale); color: var(--saffron-deep); }

.faq { margin-top: 34px; max-width: 72ch; }
.faq h2 { font-size: 1.32rem; margin-bottom: .6em; }
.faq-item {
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface); padding: 12px 16px; margin-bottom: 10px;
}
.faq-item summary {
  cursor: pointer; font-weight: 500; list-style: none;
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--saffron); font-size: 1.2rem; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin: .7em 0 0; font-size: .93rem; color: var(--ink-soft); }

.strip-section { margin-top: 38px; }
.strip-section h2 { font-size: 1.32rem; margin-bottom: .6em; }
.sign-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.strip-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-s); transition: transform .14s, box-shadow .14s;
}
.strip-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-s); }
.strip-item.is-current {
  border-color: var(--saffron); background: var(--marigold-pale);
}
.strip-item .glyph { font-size: 1.3rem; color: var(--saffron); line-height: 1.2; }
.strip-item .en { font-family: var(--serif); font-size: 1rem; }
.strip-item .sa { font-size: .72rem; color: var(--ink-faint); }
.strip-item .strip-rating { font-size: .78rem; min-height: 1em; }

/* The hub board: every rashi's rating for the day, on one screen. */
.board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px; margin-top: 6px;
}
.board-card {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  align-items: center; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.board-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: var(--sandal);
}
.board-card .glyph {
  grid-row: span 2; font-size: 1.8rem; color: var(--saffron); line-height: 1;
}
.board-card .head { display: flex; align-items: baseline; gap: 8px; }
.board-card .head b { font-family: var(--serif); font-weight: 400; font-size: 1.14rem; }
.board-card .head .sa { font-size: .76rem; color: var(--ink-faint); }
.board-card .rate { display: flex; align-items: center; gap: 8px; }
.board-card .rate .cap { font-size: .7rem; color: var(--ink-faint); }
.board-card .gist {
  grid-column: 1 / -1; margin-top: 8px; font-size: .88rem; color: var(--ink-soft);
}
.board-card .go {
  grid-column: 1 / -1; margin-top: 8px; font-size: .78rem; letter-spacing: .04em;
  color: var(--saffron-deep);
}

.sign-index { list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.sign-index a {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
  align-items: center; text-decoration: none; color: inherit;
  padding: 9px 12px; border-radius: var(--radius-s);
}
.sign-index a:hover { background: var(--surface-alt); }
.sign-index .glyph { grid-row: span 2; color: var(--saffron); font-size: 1.15rem; }
.sign-index .en { font-family: var(--serif); font-size: 1rem; }
.sign-index .sa { font-size: .74rem; color: var(--ink-faint); }

/* --------------------------------------------- kundli chart picker --- */

.chart-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.chart-tab {
  appearance: none; font: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 14px; border-radius: var(--radius-s);
  background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  transition: background .15s, border-color .15s, color .15s;
}
.chart-tab b { font-weight: 500; font-size: .92rem; }
.chart-tab span { font-size: .72rem; color: var(--ink-faint); }
.chart-tab:hover { background: var(--surface-alt); border-color: var(--sandal); }
.chart-tab[aria-pressed="true"] {
  background: var(--marigold-pale); border-color: #F0D9A8; color: var(--saffron-deep);
}
.chart-tab[aria-pressed="true"] span { color: var(--saffron-deep); }

.chart-panel-grid {
  display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 26px;
  align-items: start;
}
.chart-note h4 { margin: 0 0 .4em; font-size: 1.15rem; }
.chart-note h4 span {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-left: 8px;
}
.chart-note p { margin: 0 0 12px; color: var(--ink-soft); font-size: .93rem; }
.chart-note-foot { font-size: .84rem !important; color: var(--ink-faint) !important; }

/* --------------------------------------------- rashi overview page --- */

.prose-wide { max-width: none; }

.rashi-jump {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 4px;
}
.rashi-jump a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; padding: 5px 12px 5px 10px; border-radius: 999px;
  text-decoration: none; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--border);
}
.jump-glyph { font-size: 1rem; line-height: 1; color: var(--saffron); }
.rashi-jump a:hover .jump-glyph { color: var(--saffron-deep); }
.rashi-jump a:hover { background: var(--marigold-pale); color: var(--saffron-deep);
  border-color: #F0D9A8; }

.rashi-blocks { display: grid; gap: 18px; }
.rashi-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 26px;
}
.rashi-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.rashi-head .glyph {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.55rem;
  color: var(--saffron-deep); background: var(--marigold-pale);
}
.rashi-head h3 { margin: 0; font-size: 1.5rem; }
.rashi-head h3 .deva {
  font-family: var(--deva); font-size: 1.05rem; color: var(--saffron);
  margin-left: 8px;
}
.rashi-sub { margin: 2px 0 0; font-size: .84rem; color: var(--ink-faint); }

table.rashi-attrs { font-size: .86rem; min-width: 460px; }
table.rashi-attrs th {
  width: 1%; white-space: nowrap; background: var(--surface-alt);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; text-align: left;
  padding: 8px 12px; border-bottom: 1px solid var(--border-soft);
}
table.rashi-attrs td { padding: 8px 12px; border-bottom: 1px solid var(--border-soft);
  white-space: normal; }

.rashi-block > p { margin: 14px 0 0; }
.rashi-symbol { color: var(--ink-soft); font-size: .93rem; }
.rashi-symbol b { color: var(--ink); font-weight: 600; }

.trait-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px;
}
.trait-pair > div {
  background: var(--surface-alt); border: 1px solid var(--border-soft);
  border-radius: var(--radius-s); padding: 14px 16px;
}
.trait-pair h4 {
  margin: 0 0 .3em; color: var(--saffron-deep);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
}
.trait-pair p { margin: 0; font-size: .9rem; }

/* ------------------------------------------------- feature cards ----- */

/* Links that were losing to the tool below them. Card, glyph, arrow — sized
   to be seen without pushing the day's reading below the fold. The two rashi
   cards pair off on the first line; anything marked .fc-wide takes a line to
   itself rather than sitting beside a gap. */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 28px;
}
.feature-card.fc-wide { grid-column: 1 / -1; }
.feature-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; color: inherit; box-shadow: var(--shadow-s);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.feature-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: var(--saffron);
}
.feature-card.is-accent {
  background: linear-gradient(135deg, var(--marigold-pale), var(--surface) 70%);
  border-color: #F0D9A8;
}
.fc-icon {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
  color: #fff; background: linear-gradient(135deg, var(--marigold), var(--saffron));
  box-shadow: 0 2px 10px rgba(224, 123, 57, .3);
}
.fc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fc-text b {
  font-family: var(--serif); font-weight: 400; font-size: 1.12rem;
  color: var(--ink); line-height: 1.2;
}
.fc-text em { font-style: normal; font-size: .84rem; color: var(--ink-soft); }
.fc-go {
  margin-left: auto; flex: none; font-size: 1.15rem; color: var(--saffron-deep);
  transition: transform .15s;
}
.feature-card:hover .fc-go { transform: translateX(3px); }

/* ---------------------------------------------------- ask panel ------ */

.ask-panel {
  margin: 26px 0 6px; padding: 22px 24px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-s);
}
.ask-head { display: flex; gap: 14px; align-items: flex-start; }
.ask-mark {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif);
  font-size: 1.25rem; color: #fff;
  background: linear-gradient(135deg, var(--marigold), var(--saffron));
  box-shadow: 0 2px 10px rgba(224, 123, 57, .3);
}
.ask-head h3 { margin: 0 0 .25em; font-size: 1.24rem; }
.ask-sub { margin: 0; font-size: .86rem; color: var(--ink-soft); max-width: 66ch; }

.ask-form { display: flex; gap: 10px; margin: 18px 0 12px; flex-wrap: wrap; }
.ask-form input {
  flex: 1 1 260px; min-width: 0; font: inherit; color: var(--ink);
  padding: 11px 15px; border-radius: var(--radius-s);
  border: 1px solid var(--border); background: var(--surface-alt);
}
.ask-form input:focus {
  outline: none; border-color: var(--saffron); background: var(--surface);
  box-shadow: 0 0 0 3px var(--marigold-pale);
}

.ask-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ask-chip {
  appearance: none; font: inherit; font-size: .82rem; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; color: var(--ink-soft);
  background: var(--surface-alt); border: 1px solid var(--border-soft);
  transition: background .15s, border-color .15s, color .15s;
}
.ask-chip:hover {
  background: var(--marigold-pale); border-color: #F0D9A8; color: var(--saffron-deep);
}

.ask-answer {
  margin-top: 18px; padding: 18px 20px; border-radius: var(--radius-s);
  background: var(--surface-alt); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--saffron);
  animation: fade .22s ease;
}
.ask-answer.is-unknown { border-left-color: var(--sandal); }
.ask-answer h4 {
  margin: 0 0 .5em; font-size: 1.08rem; color: var(--ink);
}
.ask-answer p { margin: 0 0 .8em; font-size: .93rem; }
.ask-answer p:last-child { margin-bottom: 0; }
.ask-answer .chips { margin-top: 4px; }
.ask-answer table.data { min-width: 0; font-size: .86rem; }
.ask-answer table.data td { white-space: normal; }
.ask-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ask-actions .btn { padding: 8px 14px; font-size: .86rem; }

/* ------------------------------------------------------ year ahead --- */

.year-controls {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.year-place { margin: 0 0 6px; font-size: .86rem; color: var(--ink-soft); }
.year-place b { color: var(--ink); font-weight: 600; }

.year-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.year-head .glyph {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.55rem;
  color: var(--saffron-deep); background: var(--marigold-pale);
}
.year-head h3 { margin: 0; }
.year-head .meta { font-size: .82rem; color: var(--ink-faint); }

/* One bar for the whole year: how the 365 readings divide up. */
.year-bar {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--border-soft); background: var(--surface-alt);
}
.year-bar .yb { display: block; height: 100%; }
.year-bar .yb.great { background: var(--tulsi); }
.year-bar .yb.good { background: #9CC095; }
.year-bar .yb.mixed { background: var(--marigold); }
.year-bar .yb.testing { background: #E2A29C; }

.run-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.run-card {
  border: 1px solid var(--border-soft); border-radius: var(--radius-s);
  padding: 14px 16px; background: var(--surface-alt);
}
.run-card.good { background: var(--tulsi-pale); border-color: #D6E4D2; }
.run-card.hard { background: var(--kumkum-pale); border-color: #F3D2CE; }
.run-card h4 {
  margin: 0 0 .35em; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.run-dates { margin: 0; font-family: var(--serif); font-size: 1.08rem; }
.run-meta { margin: 2px 0 0; font-size: .82rem; color: var(--ink-faint); }

table.data td .sa { color: var(--ink-faint); font-size: .82rem; }
a.daylink { color: var(--saffron-deep); text-decoration: none; font-weight: 500; }
a.daylink:hover { text-decoration: underline; }

/* -------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .match-columns { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .score-hero { grid-template-columns: 1fr; text-align: center;
    justify-items: center; gap: 18px; }
}

@media (max-width: 640px) {
  /* Two rows: the brand alone, then one scrolling strip carrying every pill
     in order. A single strip is shorter than the wrapped two-row tab block it
     replaces, and the clipped last pill is the cue that it scrolls. */
  .header-inner { min-height: 58px; padding: 8px 20px; gap: 8px; }
  .brand { width: 100%; margin-right: 0; }
  .brand-sub { display: none; }
  .tabs {
    order: 2; flex: 1 1 0; min-width: 0; width: auto;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* The clipped last pill is the cue that the strip scrolls; a desktop
       scrollbar under it would only add height to a sticky header. */
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .hero { padding: 30px 0 18px; }
  .pc-body { grid-template-columns: 1fr; }
  .pc-item:nth-child(odd) { border-right: 0; }
  .field.c3, .field.c4, .field.c6 { grid-column: span 6; }
  .field.c12 { grid-column: span 12; }
  .koota { grid-template-columns: 1fr auto; }
  .koota .kbar-wrap { grid-column: 1 / -1; }
  .fest-row { grid-template-columns: 44px 46px 1fr; gap: 10px; padding: 10px 6px; }
  .fest-art { width: 40px; height: 40px; }
  .fest-icon { width: 23px; height: 23px; }
  .fest-tithi { grid-column: 2 / -1; text-align: left; }
  .fest-next { grid-template-columns: 1fr; text-align: center;
    justify-items: center; gap: 14px; padding: 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .chart-panel-grid { grid-template-columns: 1fr; gap: 16px; }
  .trait-pair { grid-template-columns: 1fr; }
  .run-pair { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 10px; }
  .ask-panel { padding: 18px 16px; }
  .ask-form input { flex: 1 1 100%; }
  .fc-icon { width: 40px; height: 40px; font-size: 1.2rem; }
  .rashi-block { padding: 18px 16px; }
  .sign-hero h1 { gap: 6px; }
  .prose h2 { font-size: 1.18rem; }
  .sign-strip { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

@media print {
  .site-header, .tabs, .site-footer, .form-actions { display: none; }
  .pane { display: block !important; }
  body { background: #fff; }
}

/* ================================================== muhurat finder ==== */

.m-blurb { margin: 14px 0 0; color: var(--ink-soft); font-size: .94rem; }
.m-src { color: var(--ink-faint); font-size: .8rem; }
.m-caveat {
  margin: 10px 0 0; padding: 10px 14px; font-size: .88rem;
  color: var(--ink-soft); background: var(--kumkum-pale);
  border-left: 3px solid var(--kumkum); border-radius: var(--radius-s);
}
.m-refine { margin: 16px 0 0; }
.m-refine summary {
  cursor: pointer; font-size: .88rem; font-weight: 500;
  color: var(--saffron-deep); padding: 6px 0;
}
.m-refine[open] summary { margin-bottom: 8px; }
.m-refine > p { margin: 0 0 12px; max-width: 68ch; }

/* --- one date --- */
.m-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin: 0 0 14px;
}
.m-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; border-bottom: 1px solid var(--border-soft);
  padding-bottom: 12px; margin-bottom: 14px;
}
.m-card-head h3 { margin: 0 0 3px; font-size: 1.12rem; }
.m-panchang { margin: 0; font-size: .84rem; color: var(--ink-soft); }
.m-score { text-align: center; flex: 0 0 auto; line-height: 1.1; }
.m-score b { display: block; font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.m-score span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); }
.m-band-high b { color: #2E7D4F; }
.m-band-mid b  { color: var(--saffron-deep); }
.m-band-low b  { color: var(--kumkum); }

.m-refused {
  margin: 0 0 12px; font-size: .84rem; color: var(--ink-soft);
  background: var(--surface-alt); padding: 8px 12px;
  border-radius: var(--radius-s);
}
.m-card-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 22px; }
.m-card-grid h4 {
  margin: 0 0 8px; font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-faint);
}

.m-wins, .m-reasons, .m-chogs, .m-horas, .m-blocked { list-style: none; margin: 0; padding: 0; }

.m-win {
  display: grid; grid-template-columns: auto auto; gap: 2px 10px;
  padding: 8px 10px; margin-bottom: 6px; border-radius: var(--radius-s);
  background: var(--surface-alt); font-size: .86rem;
}
.m-win b { font-variant-numeric: tabular-nums; }
.m-win-m { color: var(--ink-faint); font-size: .78rem; text-align: right; }
.m-win > span:last-child { grid-column: 1 / -1; color: var(--ink-soft); font-size: .8rem; }
.m-lost { margin: 8px 0 0; font-size: .78rem; color: var(--ink-faint); }

.m-reasons li { display: flex; gap: 8px; margin-bottom: 7px; font-size: .86rem;
  line-height: 1.45; }
.m-mark { flex: 0 0 1em; font-weight: 600; }
.m-r-yes .m-mark  { color: #2E7D4F; }
.m-r-no .m-mark   { color: var(--kumkum); }
.m-r-note .m-mark { color: var(--ink-faint); }

/* --- choghadiya and hora tables --- */
.m-today-head { margin: 0 0 16px; font-size: .92rem; color: var(--ink-soft); }
.m-two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; }
.m-two h3 { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 10px; font-weight: 600; }
.m-two h3 + ul + h3 { margin-top: 20px; }

.m-chog {
  display: grid; grid-template-columns: 4.5em 1fr; gap: 1px 12px;
  padding: 7px 10px; margin-bottom: 4px; font-size: .85rem;
  border-radius: var(--radius-s); border-left: 3px solid transparent;
  background: var(--surface-alt);
}
.m-chog-n { font-weight: 600; }
.m-chog-t { font-variant-numeric: tabular-nums; }
.m-chog .m-src { grid-column: 2; }
.m-q-best    { border-left-color: #2E7D4F; }
.m-q-good    { border-left-color: #6FA88A; }
.m-q-neutral { border-left-color: var(--saffron); }
.m-q-bad     { border-left-color: var(--kumkum); opacity: .72; }

.m-horas li { display: grid; grid-template-columns: 5.5em 5.5em 1fr; gap: 8px;
  padding: 4px 0; font-size: .82rem; border-bottom: 1px solid var(--border-soft); }
.m-hora-t { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.m-blocked li { padding: 5px 0; font-size: .85rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--border-soft); }

@media (max-width: 860px) {
  .m-card-grid, .m-two { grid-template-columns: 1fr; gap: 18px; }
  .m-card-head { flex-direction: row; }
}

/* =================================================== baby names ======= */

.n-gender { display: flex; gap: 8px; margin: 0 0 18px; }
.n-g {
  appearance: none; font: inherit; font-size: .95rem; font-weight: 500;
  padding: 9px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-soft); transition: background .15s, color .15s, border-color .15s;
}
.n-g:hover { background: var(--surface-alt); color: var(--ink); }
.n-g.is-on {
  background: var(--marigold-pale); color: var(--saffron-deep);
  border-color: #F0D9A8; font-weight: 600;
}

.n-alphabet { display: flex; flex-wrap: wrap; gap: 5px; margin: 18px 0 0;
  border-top: 1px solid var(--border-soft); padding-top: 14px; }
.n-letter {
  appearance: none; font: inherit; font-size: .82rem; cursor: pointer;
  min-width: 30px; padding: 5px 8px; border-radius: var(--radius-s);
  border: 1px solid transparent; background: none; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.n-letter:hover { background: var(--surface-alt); color: var(--ink); }
.n-letter.is-on {
  background: var(--marigold-pale); color: var(--saffron-deep);
  border-color: #F0D9A8; font-weight: 600;
}

.n-count { margin: 26px 0 14px; font-size: .9rem; color: var(--ink-soft); }
.n-count b { color: var(--ink); }
.n-empty { margin: 20px 0; font-size: .9rem; color: var(--ink-faint); }

.n-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; }
.n-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  display: flex; flex-direction: column;
}
.n-card header { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; }
.n-card h3 { margin: 0; font-size: 1.15rem; }
.n-script { font-family: var(--deva); font-size: 1.05rem; color: var(--saffron-deep);
  line-height: 1.2; }
.n-mean { margin: 0 0 8px; font-size: .92rem; color: var(--ink); }
.n-root { margin: 0 0 12px; font-size: .8rem; color: var(--ink-faint);
  line-height: 1.5; flex: 1 1 auto; }
.n-card footer { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  border-top: 1px solid var(--border-soft); padding-top: 10px; }
.n-tag {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--saffron-deep); background: var(--marigold-pale);
  padding: 3px 9px; border-radius: 999px; font-weight: 600;
}
.n-reg { font-size: .76rem; color: var(--ink-soft); }
.n-syl { font-size: .72rem; color: var(--ink-faint); margin-left: auto; }

@media (max-width: 640px) {
  .n-list { grid-template-columns: 1fr; }
}

/* ============================================== festival detail pages === */

/* The calendar row becomes a link where a detail page exists. It has to keep
   looking like a row rather than acquiring link chrome, so the underline and
   the inherited colour are both dropped and the chevron does the signalling. */
a.fest-row { text-decoration: none; color: inherit; }
a.fest-row:hover { background: #FFFDF7; }
.fest-go { font-size: 1.3rem; color: var(--ink-faint); line-height: 1;
  padding-left: 2px; }
a.fest-row:hover .fest-go { color: var(--saffron); }
.fest-row.has-page { grid-template-columns: 52px 58px 1fr auto 14px; }
.fest-next-link { margin-top: 8px; }
.fest-next-link a { font-size: .86rem; font-weight: 600; color: var(--saffron-deep); }

.fx-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }

.fx-when-head { display: flex; flex-wrap: wrap; gap: 14px 22px;
  align-items: flex-end; justify-content: space-between; }
.fx-when-head h2 { margin: 0; }
.fx-when-head .field { min-width: 240px; flex: 0 1 320px; }

.fx-dates { margin-top: 18px; }

.fx-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  padding: 16px 18px; border-radius: var(--radius-s);
  background: var(--marigold-pale); border: 1px solid #F2DFB4; }
.fx-next-when { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--saffron-deep); font-weight: 600; width: 100%; }
.fx-next-date { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; }
.fx-next-tithi { font-size: .88rem; color: var(--ink-soft); }
.fx-next-place { font-size: .78rem; color: var(--ink-faint); }

.fx-years { width: 100%; border-collapse: collapse; margin-top: 16px;
  font-size: .9rem; }
.fx-years td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.fx-years tr.is-next td { background: #FFFDF7; font-weight: 600; }
.fx-years .fx-y { font-family: var(--serif); width: 4.5em; color: var(--ink-soft); }
.fx-years .fx-t { text-align: right; color: var(--ink-faint); font-size: .8rem; }

.fx-rule { margin-top: 14px; font-size: .82rem; color: var(--ink-soft);
  border-top: 1px solid var(--border-soft); padding-top: 12px; }

/* How to celebrate: one list, read top to bottom. Each item is a hairline
   rule with the instruction in bold and the reason under it, so the page can
   be skimmed for the instructions alone. */
.fx-rules { padding: 24px 26px 20px; }
.fx-rules-head { margin: 0 0 6px; }
.fx-rules ul { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.fx-rules li { padding: 10px 0 10px 14px; border-left: 2px solid var(--tulsi);
  margin-bottom: 10px; }
.fx-rules li b { display: block; font-weight: 600; font-size: .95rem;
  margin-bottom: 3px; }
.fx-rules li span { display: block; font-size: .85rem; color: var(--ink-soft);
  line-height: 1.6; }

/* What to avoid: the same list, read in the other direction. The rule is
   kumkum rather than tulsi so the two sections are told apart at a glance
   without either being shouted. */
.fx-avoid li { border-left-color: var(--kumkum); }
.fx-rules-note { max-width: 68ch; margin: 0 0 14px; font-size: .84rem;
  color: var(--ink-soft); line-height: 1.65; }

.fx-sources { margin: 14px 0 0; padding-left: 20px; }
.fx-sources li { font-size: .86rem; color: var(--ink-soft); margin-bottom: 8px;
  line-height: 1.6; }

.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fx-chip { display: inline-block; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-alt);
  font-size: .84rem; text-decoration: none; color: var(--ink);
  transition: border-color .15s, background .15s; }
.fx-chip:hover { border-color: var(--saffron); background: #FFFDF7; }
.fx-more { margin-top: 16px; font-size: .86rem; }

.fx-index { list-style: none; margin: 0 0 26px; padding: 0; }
.fx-index li { border-bottom: 1px solid var(--border-soft); }
.fx-index a { display: grid; grid-template-columns: minmax(0, 15em) auto;
  gap: 4px 16px; padding: 12px 4px; text-decoration: none; color: inherit;
  align-items: baseline; }
.fx-index a:hover { background: #FFFDF7; }
.fx-index b { font-weight: 600; font-size: .96rem; }
.fx-index .fx-deva { font-family: var(--deva); font-size: .92rem;
  color: var(--ink-faint); grid-column: 1; }
.fx-index a > span:last-child { grid-column: 2; grid-row: 1 / span 2;
  font-size: .85rem; color: var(--ink-soft); line-height: 1.55; }

@media (max-width: 560px) {
  /* The tithi is the widest cell and the least useful on a phone; the year
     and the date are what the table is read for. */
  .fx-years .fx-t { display: none; }
  .fx-when-head .field { min-width: 0; flex: 1 1 100%; }
}

@media (max-width: 720px) {
  .fx-index a { grid-template-columns: 1fr; }
  .fx-index a > span:last-child { grid-column: 1; grid-row: auto; }
  .fx-next-date { font-size: 1.35rem; }
  .fest-row.has-page { grid-template-columns: 52px 46px 1fr 14px; }
  .fest-row.has-page .fest-tithi { display: none; }
}

.fx-where { margin-top: 12px; font-size: .86rem; color: var(--ink-soft);
  max-width: 60ch; }
.fx-where b { color: var(--ink); font-weight: 600; display: block;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 3px; }

/* --------------------------------------------------------------- blog -- */

.prose h3 { font-size: 1.02rem; margin: 22px 0 8px; }
.blog-meta { font-size: .82rem; color: var(--ink-faint); margin: 10px 0 0; }
.blog-try { text-align: center; }
.blog-try p { margin: 0; }
.blog-try .btn { display: inline-block; text-decoration: none; }
.prose ul { padding-left: 20px; margin: 0 0 1em; }
.prose li { margin-bottom: 6px; }
table.blog-wide { font-size: .84rem; }
table.blog-wide td, table.blog-wide th { white-space: nowrap; }

/* ------------------------------------------------------------ contact -- */

.contact-page { max-width: 820px; padding-top: 40px; padding-bottom: 56px; }
.contact-hero { margin-bottom: 26px; }
.contact-eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--saffron-deep); margin: 0 0 8px; }
.contact-eyebrow span { font-family: var(--deva); letter-spacing: 0;
  text-transform: none; font-size: .9rem; }
.contact-hero h1 { margin: 0 0 10px; }
.contact-hero .lede { margin: 0; color: var(--ink-soft); }
.contact-page .card h2 { display: flex; align-items: center; gap: 10px;
  font-size: 1.12rem; margin: 0 0 12px; border: 0; padding: 0; }
.contact-page .card p { margin: 0 0 14px; line-height: 1.6; }
.contact-page .card p:last-child { margin-bottom: 0; }
.contact-address a { color: var(--saffron-deep); font-size: 1.25rem; font-weight: 500;
  text-decoration: none; }
.contact-address a:hover { text-decoration: underline; }
.contact-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.contact-btn .contact-ico { width: 16px; height: 16px; stroke: #fff; }
.contact-ico { width: 20px; height: 20px; flex: none; fill: none;
  stroke: var(--saffron-deep); stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
.contact-muted { color: var(--ink-soft); font-size: .93rem; }