/* ══════════════════════════════════════════════════════════════════════════
   Harsh & Rhea — 5 & 6 December 2026, Debu's The Fern Resort & Spa, Jim Corbett

   PALETTE — sampled from the finalised Save the Date artwork.
   Wine is the lettering, rani the saree, olive the foliage, peach the
   horizon wash, sky the upper sky. Gold is interpolated: the gold strokes
   on the card are too thin to isolate cleanly from the cream behind them.

   This is a deliberately single-theme design — a wedding invitation has a
   committed look — so every colour is painted explicitly rather than
   inherited from the viewer's theme.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --wine:      #55121F;
  --wine-2:    #7A2231;
  --rani:      #BE214B;
  --rani-lt:   #E8577F;
  --gold:      #A98545;
  --gold-lt:   #C9A96A;
  --gold-pale: #E7D9BC;

  --ivory:     #FBF7F0;
  --cream:     #F6EADA;
  --peach:     #F7E3CD;
  --sky:       #CFD5DF;
  --olive:     #6E7043;
  --olive-dp:  #4E5030;

  --ink:       #3A2A26;
  --ink-soft:  #6B5751;
  --muted:     #8E7C70;
  --rule:      #E6D9C6;

  --shadow-sm: 0 1px 2px rgba(85,18,31,.05);
  --shadow-md: 0 2px 6px rgba(85,18,31,.06), 0 18px 40px -28px rgba(85,18,31,.28);
  --shadow-lg: 0 4px 12px rgba(85,18,31,.07), 0 34px 70px -40px rgba(85,18,31,.36);

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:    Jost, "Helvetica Neue", Arial, sans-serif;
  --script:  "Pinyon Script", "Cormorant Garamond", cursive;
  --deva:    "Tiro Devanagari Hindi", "Cormorant Garamond", serif;

  --pad: clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is not optional here — any <img> carrying width/height
   attributes keeps its intrinsic height when max-width shrinks it, and
   renders visibly stretched. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rani); }

.shell { width: min(1120px, 100%); margin: 0 auto; padding: 0 var(--pad); }
.narrow { width: min(660px, 100%); margin: 0 auto; }

/* ── type ─────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 500; color: var(--wine); margin: 0; letter-spacing: -.005em; }
h2 { font-size: clamp(30px, 5.2vw, 46px); line-height: 1.14; text-wrap: balance; }
h3 { font-size: clamp(21px, 3vw, 26px); line-height: 1.25; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--body);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 16px;
}
.lede { font-size: clamp(18px, 2.3vw, 20px); color: var(--ink-soft); line-height: 1.7; }
.script { font-family: var(--script); color: var(--rani); font-weight: 400; }
.deva { font-family: var(--deva); }

/* ── the sprig: the card's little leaf divider, redrawn ───────────────── */
.sprig { display: block; margin: 0 auto; color: var(--gold); }
.sprig.left { margin: 0 0 18px; }

/* ── sections ─────────────────────────────────────────────────────────── */
section { padding: clamp(64px, 10vw, 108px) 0; position: relative; }
.band-cream { background: var(--cream); }
.band-ivory { background: var(--ivory); }
.sec-head { text-align: center; margin-bottom: clamp(38px, 6vw, 60px); }
.sec-head .lede { max-width: 56ch; margin-inline: auto; }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: rgba(251,247,240,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%);
  transition: transform .32s ease, border-color .32s ease;
}
.nav.show { transform: translateY(0); border-bottom-color: var(--rule); }
.nav-in { display: flex; align-items: center; gap: 18px; height: 62px; }
.nav-mark {
  font-family: var(--display); font-size: 20px; color: var(--wine);
  text-decoration: none; white-space: nowrap; letter-spacing: .01em;
}
.nav-mark i { font-family: var(--script); font-style: normal; color: var(--gold); padding: 0 2px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav-links a {
  font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: var(--wine); border-bottom-color: var(--gold); }
.nav-links a.cta {
  color: var(--ivory); background: var(--rani); border: 0;
  padding: 9px 18px; border-radius: 2px; letter-spacing: .12em;
}
.nav-links a.cta:hover { background: var(--wine); }
@media (max-width: 860px) { .nav-links a:not(.cta) { display: none; } }

/* ── hero ─────────────────────────────────────────────────────────────
   A botanical crown lifted from the card's own border, dissolving into
   ivory, with the names on clean ground beneath it. The couple get their
   proper moment in the framed card lower down — cropping them into a
   banner only ever cuts someone off at the neck. */
.hero {
  padding: 0 0 clamp(52px, 8vw, 84px);
  background: var(--ivory); overflow: hidden;
}
.hero-crown { position: relative; background: var(--sky); }
.hero-crown img {
  width: 100%; height: clamp(132px, 25vw, 244px);
  object-fit: cover; object-position: 50% 34%;
}
.hero-crown::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(251,247,240,0) 0%, rgba(251,247,240,0) 40%,
    rgba(251,247,240,.72) 78%, var(--ivory) 100%);
}
.hero-copy { position: relative; z-index: 2; text-align: center; margin-top: clamp(6px, 2vw, 18px); }
.hero h1 {
  font-size: clamp(46px, 12vw, 104px); line-height: .96; font-weight: 400;
  color: var(--wine); margin: 6px 0 0;
}
.hero h1 .amp {
  font-family: var(--script); color: var(--gold); font-size: .74em;
  display: inline-block; padding: 0 .06em; vertical-align: baseline;
}
.hero-when {
  font-family: var(--body); font-size: clamp(13px, 1.9vw, 15px);
  letter-spacing: .22em; text-transform: uppercase; color: var(--wine-2);
  margin: 22px 0 6px;
}
.hero-where { font-size: 15.5px; color: var(--ink-soft); letter-spacing: .04em; margin: 0; }

/* countdown */
.count { display: flex; justify-content: center; gap: clamp(14px, 4vw, 34px); margin: 30px 0 28px; }
.count div { min-width: 62px; }
.count b {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 5.6vw, 42px); line-height: 1; color: var(--wine);
  font-variant-numeric: tabular-nums;
}
.count span {
  display: block; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-top: 7px;
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-size: 14px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: 16px 34px; border-radius: 2px; border: 1px solid var(--rani);
  background: var(--rani); color: var(--ivory); cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  min-height: 54px;
}
.btn:hover { background: var(--wine); border-color: var(--wine); }
.btn.line { background: none; color: var(--wine); border-color: var(--gold); }
.btn.line:hover { background: var(--wine); border-color: var(--wine); color: var(--ivory); }

/* ── welcome + card ───────────────────────────────────────────────────── */
.welcome-grid {
  display: grid; gap: clamp(34px, 6vw, 64px); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .welcome-grid { grid-template-columns: 1fr .74fr; } }
/* The card is a tall portrait (roughly 1:1.73). Left to fill its column it
   renders ~860px high and dwarfs the text beside it, so cap the width and
   let the height follow. */
.welcome-grid figure { max-width: 370px; margin-inline: auto; width: 100%; }
.card-frame {
  background: var(--ivory); padding: 12px; border: 1px solid var(--gold-pale);
  box-shadow: var(--shadow-lg); border-radius: 2px;
}
.card-frame img { border-radius: 1px; }
.card-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; letter-spacing: .06em; }

/* ── story timeline: follows the ball's dashed path ───────────────────── */
.story-tag { text-align: center; font-family: var(--script); font-size: clamp(24px, 4.4vw, 36px); color: var(--rani); line-height: 1.3; margin: 0 0 8px; }
.beats { position: relative; display: grid; gap: clamp(40px, 6vw, 62px); }
/* the dashed spine — the pickleball's path through the story */
.beats::before {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 26px; width: 0;
  border-left: 2px dashed var(--gold-lt); opacity: .75;
}
@media (min-width: 820px) { .beats::before { left: 50%; transform: translateX(-1px); } }

.beat { position: relative; display: grid; gap: 20px; padding-left: 64px; }
@media (min-width: 820px) {
  .beat { grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 58px); align-items: center; padding-left: 0; }
  .beat .b-text { grid-column: 1; text-align: right; padding-right: 22px; }
  .beat .b-art  { grid-column: 2; padding-left: 22px; }
  .beat:nth-child(even) .b-text { grid-column: 2; text-align: left; padding: 0 0 0 22px; }
  .beat:nth-child(even) .b-art  { grid-column: 1; grid-row: 1; padding: 0 22px 0 0; }
}
/* the ball on the path */
.beat::before {
  content: ""; position: absolute; left: 17px; top: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold-lt); border: 3px solid var(--ivory);
  box-shadow: 0 0 0 1px var(--gold);
}
.band-cream .beat::before { border-color: var(--cream); }
@media (min-width: 820px) {
  .beat::before { left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
.b-num {
  font-family: var(--display); font-size: 13px; letter-spacing: .2em;
  color: var(--gold); margin-bottom: 8px; text-transform: uppercase;
}
.b-text h3 { margin-bottom: 10px; }
.b-text p { color: var(--ink-soft); font-size: 16.5px; margin: 0; }
.b-art img {
  width: 100%; border-radius: 3px; box-shadow: var(--shadow-md);
  border: 1px solid rgba(169,133,69,.28);
}

/* ── day cards ────────────────────────────────────────────────────────── */
.days { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .days { grid-template-columns: 1fr 1fr; } }
.day {
  background: var(--ivory); border: 1px solid var(--rule); border-radius: 3px;
  padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.day-date {
  font-family: var(--display); font-size: clamp(38px, 6vw, 54px);
  line-height: 1; color: var(--rani); font-weight: 400;
}
.day-dow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 10px 0 18px; }
.day h3 { margin-bottom: 12px; }
.day p { color: var(--ink-soft); font-size: 16px; }
.day-items { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); }
.day-items li { display: flex; gap: 12px; padding: 8px 0; font-size: 16px; color: var(--ink-soft); align-items: baseline; }
.day-items li b { color: var(--wine); font-weight: 500; min-width: 92px; font-size: 14.5px; letter-spacing: .04em; }

/* schedule rows: time in the left rail, event and venue in the right */
.muhurat {
  /* .day is a flex column, so an inline-flex child still stretches to the
     full width unless it opts out. */
  display: inline-flex; align-self: flex-start;
  align-items: baseline; gap: 8px; margin: 14px 0 0;
  padding: 7px 13px; border: 1px solid var(--gold-pale); border-radius: 999px;
  background: var(--cream); font-size: 13px; color: var(--ink-soft);
}
.band-cream .muhurat { background: var(--ivory); }
.muhurat b {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.sched { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); }
.sched li {
  display: grid; grid-template-columns: 112px 1fr; gap: 14px;
  padding: 11px 0; align-items: baseline;
  border-bottom: 1px solid rgba(230,217,198,.55);
}
.sched li:last-child { border-bottom: 0; padding-bottom: 0; }
.sched time {
  font-size: 12.5px; color: var(--rani); font-weight: 500;
  letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sched b { display: block; font-weight: 500; color: var(--wine); font-size: 16.5px; line-height: 1.3; }
.sched span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.sched i { font-style: normal; color: var(--muted); font-size: 13.5px; }
.days { align-items: start; }
@media (max-width: 420px) { .sched li { grid-template-columns: 88px 1fr; gap: 10px; } }

/* the honest "not confirmed yet" treatment — designed, not broken */
.tbc {
  margin-top: 20px; display: flex; gap: 11px; align-items: flex-start;
  background: var(--cream); border: 1px dashed var(--gold-lt); border-radius: 3px;
  padding: 15px 17px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55;
}
.band-cream .tbc { background: var(--ivory); }
.tbc svg { flex: none; color: var(--gold); margin-top: 2px; }
.tbc b { color: var(--wine); font-weight: 500; }

/* ── info blocks ──────────────────────────────────────────────────────── */
.info { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .info { grid-template-columns: repeat(3, 1fr); } }
.info-card {
  background: var(--ivory); border: 1px solid var(--rule); border-radius: 3px;
  padding: 28px 26px; box-shadow: var(--shadow-sm);
}
.band-ivory .info-card { background: var(--cream); border-color: var(--gold-pale); }
.info-card h3 { font-size: 21px; margin-bottom: 9px; }
.info-card p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: .6em; }
.info-card .fig { font-family: var(--display); font-size: 30px; color: var(--rani); line-height: 1; margin-bottom: 6px; }
.approx { font-size: 13px; color: var(--muted); font-style: italic; }

/* ── venue card ───────────────────────────────────────────────────────── */
.venue {
  display: grid; gap: 0; text-align: left; margin-top: 34px;
  background: var(--cream); border: 1px solid var(--gold-pale); border-radius: 4px;
  overflow: hidden; box-shadow: var(--shadow-md);
}
@media (min-width: 760px) { .venue { grid-template-columns: 1fr 1fr; } }
.venue-side { padding: clamp(24px, 4vw, 34px); }
.venue-side + .venue-side { border-top: 1px solid var(--gold-pale); }
@media (min-width: 760px) {
  .venue-side + .venue-side { border-top: 0; border-left: 1px solid var(--gold-pale); }
}
.venue h3 { font-size: 21px; margin-bottom: 4px; }
.venue .series {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 16px;
}
.venue address { font-style: normal; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.venue-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.venue-actions .btn { padding: 13px 20px; font-size: 13px; min-height: 48px; }

.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: grid; grid-template-columns: 120px 1fr; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid rgba(231,217,188,.7);
  font-size: 15.5px; align-items: baseline;
}
.facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt, .facts .k {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
}
.facts .v { color: var(--ink-soft); }
.facts .v b { color: var(--wine); font-weight: 500; }
@media (max-width: 420px) { .facts li { grid-template-columns: 1fr; gap: 2px; } }

/* ── gallery empty state ──────────────────────────────────────────────── */
.gal {
  border: 1px dashed var(--gold-lt); border-radius: 4px; background: var(--ivory);
  padding: clamp(44px, 8vw, 78px) var(--pad); text-align: center;
}
.gal .frames { display: flex; justify-content: center; gap: 14px; margin-bottom: 28px; }
.gal .frames i {
  display: block; width: clamp(46px, 9vw, 66px); height: clamp(58px, 11vw, 82px);
  border: 1px solid var(--gold-pale); background: var(--cream); border-radius: 2px;
}
.gal .frames i:nth-child(2) { transform: translateY(-9px) rotate(-3deg); }
.gal .frames i:nth-child(3) { transform: rotate(3deg); }

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--rule); padding: 4px 0;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative;
  font-family: var(--display); font-size: clamp(19px, 2.6vw, 22px); color: var(--wine);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .a { padding: 0 34px 22px 0; color: var(--ink-soft); font-size: 16.5px; }

/* ── rsvp call to action ──────────────────────────────────────────────── */
.rsvp-cta { background: var(--wine); color: var(--peach); text-align: center; }
.rsvp-cta h2 { color: var(--peach); }
.rsvp-cta .lede { color: rgba(247,227,205,.82); }
.rsvp-cta .sprig { color: var(--gold-lt); }
.rsvp-cta .eyebrow { color: var(--gold-lt); }
.rsvp-cta .btn { background: var(--peach); border-color: var(--peach); color: var(--wine); }
.rsvp-cta .btn:hover { background: var(--ivory); border-color: var(--ivory); }
.rsvp-cta .fine { font-size: 14px; color: rgba(247,227,205,.62); margin-top: 22px; }

/* ── footer ───────────────────────────────────────────────────────────── */
footer { background: var(--cream); text-align: center; padding: clamp(48px, 7vw, 70px) 0; }
footer .mark { font-family: var(--display); font-size: clamp(28px, 5vw, 38px); color: var(--wine); }
footer .mark i { font-family: var(--script); font-style: normal; color: var(--gold); }
footer p { font-size: 14.5px; color: var(--ink-soft); margin: 12px 0 0; }
footer .sign { font-family: var(--script); font-size: 24px; color: var(--rani); margin-top: 18px; }

/* ── reveal on scroll ─────────────────────────────────────────────────────
   Elements are visible by default. JS only hides the ones already below the
   fold at load, so the first painted frame is always complete — nothing
   sits at opacity:0 waiting for an observer that may never fire. */
.pending { opacity: 0; transform: translateY(16px); }
.revealed { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }

:focus-visible { outline: 2px solid var(--rani); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pending { opacity: 1 !important; transform: none !important; }
  * { transition: none !important; animation: none !important; }
}

@media print { .nav, .rsvp-cta { display: none; } }