/* ═══════════════════════════════════════════════════════════════════
   Pallavi & Chirag — shared design system
   Neemrana Fort-Palace · 20–21 February 2027
   MERGED: the live site's warm editorial palette and faces, carried on
   the structure, motif and rooted layer from design-philosophy.md.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Skin: from pallaviandchirag.com ── */
  --cream:        #F6F1E7;   /* page background */
  --ivory:        #FDFAF3;   /* cards, sheets  */
  --sand:         #EFE7D7;   /* dividers, pressed states */
  --sand-line:    #E3D8C2;
  --ink:          #2C2420;   /* body text */

  /* ── Bones: from design-philosophy.md ── */
  --indigo:       #2C3A64;   /* headings, primary buttons */
  --indigo-night: #1D2A4D;   /* deep bands, hero overlays */
  --terracotta:   #A85C2E;   /* accents, dress-code tags */
  --rani:         #B23A62;   /* hearts, confetti — tiny moments only */

  /* ── Gold: punctuation, never paint. Under 5% of any screen. ── */
  --gold:         #B08D57;
  --gold-deep:    #8A6D3F;
  --gold-soft:    #D3B98C;

  /* ── Motion: one easing, always ── */
  --ease: cubic-bezier(.22, .8, .3, 1);
  --t:    250ms;
  --t-lg: 350ms;

  /* ── The jharokha arch ── */
  --arch:    210px 210px 14px 14px;
  --arch-sm: 120px 120px 10px 10px;

  --gutter: 22px;
  --measure: 62ch;
}

/* Back-compat aliases so nothing breaks mid-refactor */
:root { --sandstone: var(--cream); --stone-deep: var(--sand); --stone-line: var(--sand-line); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 66px; }

body {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 17px; line-height: 28px; font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── Typography ─────────────────────────────────────────────────── */
h1, h2, h3, .display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500; letter-spacing: 0.2px; color: var(--indigo);
}
h1, .display { font-size: 40px; line-height: 44px; }
h2           { font-size: 30px; line-height: 36px; }
h3           { font-size: 24px; line-height: 30px; }
.small       { font-size: 14px; line-height: 21px; }
.muted       { opacity: .72; }
p            { max-width: var(--measure); }
/* That cap is for readability, and inside a CENTRED block it backfires:
   the box ends up narrower than its parent, and a narrower box still sits
   hard left, so the words read 30px off-centre while the heading above
   them is centred. It is what made the dates on the invitation look
   nudged left. Centre the box wherever the text is centred.

   Direct children only: a .card sitting inside a .center block is often
   left-aligned itself, and centring ITS paragraphs pushes them off the
   page's left edge — which is the bug this rule is meant to fix. */
.center > p, .dayhead p, .invite-bare > p, .card.arch > p, .invite-card > p { margin-inline: auto; }

/* Devanagari accent — always above, always small, never load-bearing */
.dev {
  display: block;
  font-family: 'Rozha One', serif;
  font-size: 15px; line-height: 20px; letter-spacing: 1px;
  color: var(--gold-deep);
  margin-bottom: 2px;
}

.eyebrow {
  font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--terracotta); font-weight: 600;
}

/* ─── The gold hairline + ornament ───────────────────────────────── */
.rule {
  width: 120px; height: 1px; background: var(--gold);
  border: 0; margin: 20px auto; position: relative;
}
.rule::after {
  content: ''; position: absolute; top: -3.5px; left: 50%;
  width: 8px; height: 8px; background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
}
.rule.left { margin-left: 0; }

/* ─── Layout ─────────────────────────────────────────────────────── */
.wrap    { width: min(1080px, 100% - calc(var(--gutter) * 2)); margin-inline: auto; }
.narrow  { width: min(680px, 100% - calc(var(--gutter) * 2)); margin-inline: auto; }
section  { padding: 64px 0; }
.center  { text-align: center; }

/* ─── Surfaces ───────────────────────────────────────────────────── */
.card {
  background: var(--ivory);
  border: 1px solid var(--stone-line);
  border-radius: 14px;
  padding: 26px 24px;
}
.card.arch  { border-radius: var(--arch-sm); border-color: var(--gold); padding-top: 40px; text-align: center; }
.card.quiet { background: transparent; border-style: dashed; }

/* Depth is tone-on-tone. No drop shadows floating everywhere. */
.band       { background: var(--ivory); }
.band-deep  { background: var(--indigo-night); color: var(--ivory); }
.band-deep h1, .band-deep h2, .band-deep h3 { color: var(--ivory); }
.band-deep .dev { color: var(--gold-soft); }

/* ─── The jharokha frame (portraits, room photos, modals) ────────── */
.jharokha {
  position: relative;
  border-radius: var(--arch);
  overflow: hidden;
  border: 1px solid var(--gold);
  background: var(--stone-deep);
  aspect-ratio: 3 / 4;
}
.jharokha img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jharokha.sm { border-radius: var(--arch-sm); }

/* Monogram placeholder, shown until real photos land */
.monogram {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(170deg, var(--indigo-night), var(--indigo));
  font-family: 'Cormorant Garamond', serif; font-weight:500; font-size: 68px; color: var(--gold-soft);
  letter-spacing: 2px;
}
.monogram span { display: block; font-size: 12px; letter-spacing: 3px;
  color: var(--sand); text-transform: uppercase; margin-top: 6px; font-family: 'Jost', sans-serif; }

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; min-height: 48px;
  font: 500 15px/1 'Jost', sans-serif; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ivory); background: var(--indigo);
  border: 1px solid var(--indigo); border-radius: 11px;
  cursor: pointer; text-decoration: none;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.btn:hover  { background: var(--indigo-night); }
.btn:active { transform: scale(.985); }
.btn.ghost  { background: transparent; color: var(--indigo); border-color: var(--stone-deep); }
.btn.ghost:hover { border-color: var(--gold); background: rgba(176,141,87,.07); }
.btn.gold   { background: transparent; color: var(--indigo); border-color: var(--gold); }
.btn.on-dark{ background: var(--ivory); color: var(--indigo-night); border-color: var(--ivory); }
.btn.wide   { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ─── Forms ──────────────────────────────────────────────────────── */
label {
  display: block; font-size: 13px; font-weight: 600;
  letter-spacing: .8px; margin: 18px 2px 6px;
}
label small { font-weight: 400; color: var(--terracotta); letter-spacing: .2px; }

input, select, textarea {
  width: 100%; padding: 12px 14px;
  font: 400 16px/24px 'Jost', sans-serif;   /* 16px — stops iOS zoom on focus */
  color: var(--indigo); background: #FFFCF6;
  border: 1px solid var(--stone-deep); border-radius: 9px;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--t) var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
input:invalid:not(:placeholder-shown) { border-color: var(--rani); }
textarea { resize: vertical; min-height: 80px; }

/* The blanket appearance:none above strips the native tick and dot.
   Checkboxes and radios opt back out — a guest must SEE what they selected. */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto; appearance: auto;
  width: auto; padding: 0; border: 0; background: none;
  accent-color: var(--indigo);
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B08D57' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }
fieldset { border: 0; }

/* Segmented yes/no — bigger tap target than a radio, kinder to elders */
.seg { display: flex; gap: 0; border: 1px solid var(--stone-deep); border-radius: 10px; overflow: hidden; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  flex: 1; margin: 0; padding: 14px 10px; text-align: center; cursor: pointer;
  font-size: 15px; font-weight: 500; letter-spacing: .4px;
  background: #FFFCF6; transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.seg label:not(:first-of-type) { border-left: 1px solid var(--stone-deep); }
.seg input:checked + label { background: var(--indigo); color: var(--ivory); }

.err { color: var(--rani); font-size: 13px; margin-top: 6px; display: none; }
.err.on { display: block; }
.hp { position: absolute; left: -9999px; }   /* honeypot */

/* ─── Tags ───────────────────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .6px;
  background: rgba(168,92,46,.1); color: var(--terracotta);
  border: 1px solid rgba(168,92,46,.25);
}
.tag.indigo { background: rgba(44,58,100,.08); color: var(--indigo); border-color: rgba(44,58,100,.2); }
.tag.gold   { background: rgba(176,141,87,.12); color: var(--gold-deep); border-color: rgba(176,141,87,.35); }

/* ─── Locked cards — "the fort unlocks soon" ─────────────────────── */
.locked {
  border: 1px dashed var(--stone-deep); border-radius: 14px;
  padding: 28px 24px; text-align: center; background: rgba(253,250,243,.55);
}
.locked .lk {
  display: block; width: 9px; height: 9px; margin: 0 auto 14px;
  background: var(--gold); transform: rotate(45deg);
}
.locked h3 { color: var(--indigo); opacity: .8; }

/* ─── Countdown ──────────────────────────────────────────────────── */
.count { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.count div {
  min-width: 74px; padding: 12px 8px;
  border: 1px solid rgba(185,143,62,.5); border-radius: 10px;
}
.count b {
  display: block; font-family: 'Rozha One', serif; font-weight: 400;
  font-size: 30px; line-height: 34px;
  font-variant-numeric: tabular-nums;
}
.count i {
  font-style: normal; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; opacity: .7;
}

/* ─── Header / footer ────────────────────────────────────────────── */
/* (.topbar retired — the schedule page was the only user and it now
   carries the same .menu as every other page.) */

footer {
  background: var(--indigo-night); color: var(--sand);
  padding: 26px var(--gutter) 24px; font-size: 14px;
}
footer a { color: var(--gold-soft); }
/* One row: the words on the left, Ganesha on the right, both sharing a
   single baseline grid. Everything used to be centred with ad-hoc
   margins, which is what made it look indented at odd places. */
.footrow {
  width: min(960px, 100%); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.footrow > div { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.footrow p { margin: 0; }
.footrow .fname { font-family: 'Cormorant Garamond', serif; font-size: 22px;
  line-height: 26px; color: var(--ivory); }
.footrow .fwhen { font-size: 13px; opacity: .75; }
.footrow .flink { margin-top: 6px; font-size: 13px; }
.ganesh { flex: none; width: 54px; height: 54px; color: var(--gold-soft); opacity: .8; }
.ganesh svg { width: 100%; height: 100%; display: block; }
@media (max-width: 560px) {
  .footrow { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .footrow > div { align-items: center; text-align: center; }
  .ganesh { width: 46px; height: 46px; order: -1; }
}

/* ─── Add-to-home-screen nudge ───────────────────────────────────── */
.nudge {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 110%);
  width: min(460px, calc(100% - 20px));
  background: var(--ivory); border: 1px solid var(--gold);
  border-radius: 16px 16px 0 0; padding: 20px 22px 24px;
  /* Above the chat face (70) and its bubble (69): the one time this sheet
     is open, nothing should sit on its words. */
  z-index: 72; transition: transform var(--t-lg) var(--ease);
}
.nudge.on { transform: translate(-50%, 0); }
.nudge .grab { width: 40px; height: 3px; border-radius: 2px; background: var(--stone-deep); margin: -8px auto 14px; }
.nudge ol { margin: 10px 0 0 18px; font-size: 14px; line-height: 22px; }

/* ─── Toast ──────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 140%);
  background: var(--indigo-night); color: var(--ivory);
  padding: 12px 20px; border-radius: 10px; font-size: 14px; z-index: 80;
  transition: transform var(--t) var(--ease); max-width: 90vw; text-align: center;
}
.toast.on { transform: translate(-50%, 0); }

/* ─── Grid helper ────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .g2, .g3 { grid-template-columns: 1fr; } }

/* ─── Accessibility ──────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--indigo); color: var(--ivory); padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ─── Image slots ────────────────────────────────────────────────
   Every picture on the site renders through these. When a file is
   missing the slot shows what belongs there instead of breaking. */
.slot {
  position: relative; display: grid; place-items: center;
  background: var(--sand); border: 1px dashed var(--gold);
  border-radius: 12px; overflow: hidden; text-align: center;
  color: var(--gold-deep); padding: 20px; min-height: 120px;
}
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot.filled { border-style: solid; border-color: var(--sand-line); background: var(--sand); padding: 0; }
.slot .ph b { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: 19px; color: var(--indigo); margin-bottom: 4px; }
.slot .ph span { display: block; font-size: 11.5px; line-height: 17px; opacity: .8; }
.slot .ph code { display: inline-block; margin-top: 7px; font-size: 11px; letter-spacing: .3px;
  background: rgba(44,58,100,.07); padding: 3px 8px; border-radius: 5px; color: var(--indigo); }
.slot.arch { border-radius: var(--arch-sm); }

/* ─── Bottom nav (the app) ───────────────────────────────────── */
.appnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--indigo-night);
  padding-bottom: env(safe-area-inset-bottom);
}
.appnav button {
  border: 0; background: none; cursor: pointer; padding: 11px 2px 13px;
  color: var(--sand); opacity: .58; font: 400 11px 'Jost', sans-serif; letter-spacing: .4px;
  transition: opacity var(--t) var(--ease);
}
/* Five tabs on a 320px phone: ease the letter-spacing before it wraps. */
@media (max-width: 380px) {
  .appnav button { font-size: 10px; letter-spacing: .2px; padding-left: 0; padding-right: 0; }
  .appnav button .hi { font-size: 14px; }
}
.appnav button .hi { display: block; font-family: 'Rozha One', serif; font-size: 15px;
  line-height: 19px; color: var(--gold-soft); }
.appnav button.on { opacity: 1; }
.appnav button.on .hi { color: var(--gold); }
.appnav .dot { display: block; width: 4px; height: 4px; border-radius: 50%;
  background: transparent; margin: 4px auto 0; }
.appnav button.on .dot { background: var(--gold); }

.tabpane { display: none; padding-bottom: 96px; }
.tabpane.on { display: block; }

/* ─── Key/value rows ─────────────────────────────────────────── */
.kv { display: flex; justify-content: space-between; align-items: center; gap: 14px;
      padding: 12px 0; border-top: 1px solid var(--sand-line); font-size: 15px; }
.kv:first-of-type { border-top: 0; }
.kv b { font-weight: 500; text-align: right; }
.kv span { opacity: .75; }


/* ═══════════════════════════════════════════════════════════════
   THE CARD — the site reads as an invitation, not a brochure.
   ═══════════════════════════════════════════════════════════════ */

/* Fort backdrop, held behind everything */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--indigo-night); }
.backdrop i {
  position: absolute; inset: -5%; display: block;
  background: url('/assets/venue/fort-hero.jpg') center / cover no-repeat;
  filter: brightness(.58) saturate(.86) contrast(1.02);
  animation: drift 40s var(--ease) infinite alternate;
}
.backdrop u {
  position: absolute; inset: 0; text-decoration: none;
  background: linear-gradient(180deg, rgba(17,24,48,.62) 0%, rgba(17,24,48,.44) 45%, rgba(17,24,48,.72) 100%);
}
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.5%, -1%); } }

/* The invitation itself — an ivory card on the fort.
   Contrast is solved by construction: dark text on paper, never on the photo. */
/* ── The invitation card ───────────────────────────────────────────
   The paper is its OWN layer (::before), so it can be masked to fade
   at the four corners and let the fort through — while the writing,
   the gold corner marks and the flowers sit above the mask and stay
   perfectly crisp. Mask the card itself and the text would fade too. */
.invite-card {
  position: relative; z-index: 2;
  width: min(560px, 100% - 32px); margin-inline: auto;
  background: none; border: 0;
  padding: 52px 34px 44px;
  text-align: center;
}
.invite-card > * { position: relative; z-index: 2; }

/* The paper. One centred ellipse mask: the corners are the points
   furthest from the middle, so they are what fades. */
.invite-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: rgba(253, 250, 243, .96);
  border: 1px solid var(--gold);
  -webkit-backdrop-filter: blur(7px) saturate(1.08);
          backdrop-filter: blur(7px) saturate(1.08);
  -webkit-mask-image: radial-gradient(ellipse 104% 104% at 50% 50%,
          #000 58%, rgba(0,0,0,.86) 78%, rgba(0,0,0,.40) 93%, rgba(0,0,0,.14) 100%);
          mask-image: radial-gradient(ellipse 104% 104% at 50% 50%,
          #000 58%, rgba(0,0,0,.86) 78%, rgba(0,0,0,.40) 93%, rgba(0,0,0,.14) 100%);
  pointer-events: none;
}
/* The inner gold hairline, on the paper's own terms */
.invite-card::after {
  content: ''; position: absolute; inset: 9px; z-index: 1;
  border: 1px solid rgba(176,141,87,.42); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 106% 106% at 50% 50%,
          #000 62%, rgba(0,0,0,.5) 88%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 106% 106% at 50% 50%,
          #000 62%, rgba(0,0,0,.5) 88%, rgba(0,0,0,0) 100%);
}
/* Browsers without mask support get an honest, solid card. */
@supports not ((mask-image: radial-gradient(#000, #000)) or (-webkit-mask-image: radial-gradient(#000, #000))) {
  .invite-card::before { background: var(--ivory); }
}

/* ── Bougainvillea at the four corners of the card ────────────────
   Above the paper's mask, so the pink stays pink while the paper
   underneath fades into the fort. The top pair are the full swags;
   the bottom pair are the smaller clusters, so the card reads
   top-heavy the way a real card does. */
.invite-card .petal {
  position: absolute; z-index: 3; pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
}
.invite-card .p1, .invite-card .p2 { top: -20px; width: 150px; height: 137px; }
.invite-card .p3, .invite-card .p4 { bottom: -12px; width: 92px; height: 104px; opacity: .92; }

.invite-card .p1 { left: -18px;
  background-image: url('/assets/ornament/floral-corner-top-left.webp'); background-position: left top; }
.invite-card .p2 { right: -18px;
  background-image: url('/assets/ornament/floral-corner-top-right.webp'); background-position: right top; }
.invite-card .p3 { left: -10px;
  background-image: url('/assets/ornament/floral-corner-bottom-left.webp'); background-position: left bottom; }
.invite-card .p4 { right: -10px;
  background-image: url('/assets/ornament/floral-corner-bottom-right.webp'); background-position: right bottom; }

@media (min-width: 720px) {
  .invite-card .p1, .invite-card .p2 { top: -26px; width: 196px; height: 180px; }
  .invite-card .p1 { left: -26px; background-image: url('/assets/ornament/floral-corner-top-left@2x.webp'); }
  .invite-card .p2 { right: -26px; background-image: url('/assets/ornament/floral-corner-top-right@2x.webp'); }
  .invite-card .p3, .invite-card .p4 { bottom: -10px; width: 120px; height: 136px; }
  .invite-card .p3 { left: -10px; background-image: url('/assets/ornament/floral-corner-bottom-left@2x.webp'); }
  .invite-card .p4 { right: -10px; background-image: url('/assets/ornament/floral-corner-bottom-right@2x.webp'); }
}
@media (max-width: 420px) {
  .invite-card .p1, .invite-card .p2 { top: -14px; width: 108px; height: 99px; }
  .invite-card .p1 { left: -12px; } .invite-card .p2 { right: -12px; }
  .invite-card .p3, .invite-card .p4 { bottom: -8px; width: 68px; height: 77px; opacity: .85; }
}
/* Corner ornaments — four, drawn, never typed */
.invite-card .corner { position: absolute; width: 26px; height: 26px; pointer-events: none; }
.invite-card .corner::before, .invite-card .corner::after {
  content: ''; position: absolute; background: var(--gold);
}
.invite-card .corner::before { width: 100%; height: 1px; top: 0; }
.invite-card .corner::after  { width: 1px; height: 100%; left: 0; }
.invite-card .c1 { top: 9px; left: 9px; }
.invite-card .c2 { top: 9px; right: 9px; transform: scaleX(-1); }
.invite-card .c3 { bottom: 9px; left: 9px; transform: scaleY(-1); }
.invite-card .c4 { bottom: 9px; right: 9px; transform: scale(-1); }

@media (max-width: 520px) {
  .invite-card { padding: 42px 22px 34px; }
  .invite-card .corner { width: 20px; height: 20px; }
}

/* ── Staged reveal. One easing, one direction, nothing bounces. ── */
.rise { opacity: 0; transform: translateY(14px); }
.revealed .rise { opacity: 1; transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.revealed .rise:nth-child(1) { transition-delay: 60ms; }
.revealed .rise:nth-child(2) { transition-delay: 160ms; }
.revealed .rise:nth-child(3) { transition-delay: 260ms; }
.revealed .rise:nth-child(4) { transition-delay: 360ms; }
.revealed .rise:nth-child(5) { transition-delay: 460ms; }
.revealed .rise:nth-child(6) { transition-delay: 560ms; }
.revealed .rise:nth-child(7) { transition-delay: 660ms; }
.revealed .rise:nth-child(8) { transition-delay: 760ms; }

.card-in { opacity: 0; transform: scale(.985); }
.revealed.card-in, .revealed .card-in { opacity: 1; transform: none;
  transition: opacity 900ms var(--ease), transform 900ms var(--ease); }

/* Sections that arrive as you scroll */
.onview { opacity: 0; transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.onview.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise, .card-in, .onview { opacity: 1 !important; transform: none !important; }
  .backdrop i { animation: none; }
}

/* ── Menu bar ───────────────────────────────────────────────── */
.menu {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246,241,231,.94);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--sand-line);
}
.menu-in { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 11px var(--gutter); max-width: 1080px; margin-inline: auto; }
.menu .mark { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 19px;
  letter-spacing: .4px; color: var(--indigo); text-decoration: none; white-space: nowrap; }
.menu nav { display: flex; gap: 20px; align-items: center; }
.menu nav a {
  font-size: 13.5px; letter-spacing: .3px; color: var(--ink); text-decoration: none;
  opacity: .72; padding: 3px 0; border-bottom: 1px solid transparent;
  transition: opacity var(--t) var(--ease), border-color var(--t) var(--ease);
}
.menu nav a:hover, .menu nav a[aria-current] { opacity: 1; border-color: var(--gold); }
.menu nav a.cta { border: 1px solid var(--gold); border-radius: 999px; padding: 6px 15px;
  opacity: 1; color: var(--indigo); }
.menu nav a.cta:hover { background: rgba(176,141,87,.1); }

.burger { display: none; border: 0; background: none; cursor: pointer; padding: 6px; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--indigo); margin: 4px 0; }

@media (max-width: 680px) {
  .burger { display: block; }
  .menu nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory); border-bottom: 1px solid var(--sand-line);
    max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease);
  }
  .menu nav.open { max-height: 340px; }
  .menu nav a { padding: 15px var(--gutter); border-bottom: 1px solid var(--sand-line); opacity: .9; }
  .menu nav a.cta { border: 0; border-radius: 0; border-bottom: 1px solid var(--sand-line);
    background: rgba(176,141,87,.08); }
}


/* ═══════════════════════════════════════════════════════════════
   THE HELPER — inline box and floating bubble share these.
   ═══════════════════════════════════════════════════════════════ */
.chat { border: 1px solid var(--gold); border-radius: 14px; background: var(--ivory);
        overflow: hidden; }
.chat-log { padding: 18px; display: flex; flex-direction: column; gap: 10px;
            max-height: 340px; overflow-y: auto; }
.msg { max-width: 88%; padding: 11px 14px; border-radius: 13px; font-size: 15px; line-height: 23px; }
.msg.bot { background: var(--sand); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.you { background: var(--indigo); color: var(--ivory); border-bottom-right-radius: 4px; align-self: flex-end; }
.msg.err { background: rgba(178,58,98,.08); border: 1px solid rgba(178,58,98,.25); }
.msg a { color: var(--terracotta); }
.msg.typing { opacity: .55; letter-spacing: 3px; }

.chat-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 14px; }
.chat-chip { border: 1px solid var(--sand-line); background: #FFFCF6; color: var(--indigo);
  border-radius: 999px; padding: 7px 13px; font: 400 13px 'Jost', sans-serif; cursor: pointer; }
.chat-chip:hover { border-color: var(--gold); }

.chat-in { display: flex; gap: 0; border-top: 1px solid var(--sand-line); }
.chat-in input { border: 0; border-radius: 0; background: transparent; padding: 15px 18px; }
.chat-in input:focus { border: 0; }
.chat-in button { border: 0; background: var(--indigo); color: var(--ivory); width: 56px;
  font-size: 19px; cursor: pointer; flex: none; }
.chat-in button:hover { background: var(--indigo-night); }

/* ── The venue cards on the app's महल tab ──────────────────────────
   One per row at 16/9, because these are wide photographs of wide
   terraces and a square crop threw away the view they were taken for.
   The caption sits under the picture, not over it: half of these are
   shot at dusk with lights in them, and text on top of that is
   unreadable whatever colour you make it. */
.venues { display: grid; gap: 14px; }
.venue-card { margin: 0; }
.venue-card .slot { border-radius: 10px; }
/* Name over sub-label, always. Side by side they wrapped for the long
   names and not the short ones, so the four captions never lined up. */
.venue-card figcaption {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 2px 0;
}
.venue-card figcaption b {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: 19px; line-height: 22px; color: var(--indigo);
}
.venue-card figcaption span {
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--terracotta);
}

/* Floating bubble.

   It used to be a question mark, which said "help" the way a form says
   help. It is a face now — a Rajasthani doorman in a safa — and it is
   bigger, because a drawn face at 52px is a smudge. */
.chat-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  width: 64px; height: 64px; border-radius: 50%; padding: 0;
  border: 1px solid var(--gold); background: var(--indigo);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 20px rgba(20,29,58,.28);
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.chat-fab svg { width: 46px; height: 46px; display: block; }
.chat-fab:hover { background: var(--indigo-night); transform: translateY(-2px); }
@media (min-width: 900px) {
  .chat-fab { width: 70px; height: 70px; }
  .chat-fab svg { width: 50px; height: 50px; }
}

/* The one-line invitation beside it. Sits to the LEFT, never over the
   button, and never over the bottom nav. */
.chat-nudge {
  position: fixed; right: 88px; bottom: 30px; z-index: 69;
  background: var(--ivory); border: 1px solid var(--gold); color: var(--ink);
  font: 500 13.5px 'Jost', sans-serif; letter-spacing: .2px;
  padding: 9px 14px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(20,29,58,.16);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.chat-nudge::after {
  content: ''; position: absolute; right: -5px; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; background: var(--ivory); transform: rotate(45deg);
  border-right: 1px solid var(--gold); border-top: 1px solid var(--gold);
}
.chat-nudge.on { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
@media (min-width: 900px) { .chat-nudge { right: 94px; bottom: 33px; } }
@media (max-width: 360px) { .chat-nudge { font-size: 12.5px; padding: 8px 12px; right: 84px; } }

/* Lift clear of the app's bottom nav — it was covering the "You" tab. */
body:has(.appnav) .chat-fab   { bottom: 88px; }
body:has(.appnav) .chat-nudge { bottom: 102px; }
body:has(.appnav) .chat-panel { bottom: 162px; }
.chat-panel {
  position: fixed; right: 16px; bottom: 90px; z-index: 71;
  width: min(380px, calc(100% - 32px)); background: var(--ivory);
  border: 1px solid var(--gold); border-radius: 14px; overflow: hidden;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  box-shadow: 0 14px 44px rgba(20,29,58,.26);
}
.chat-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.chat-body { display: flex; flex-direction: column; }
.chat-head { display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px; background: var(--indigo-night); color: var(--ivory); }
.chat-head b { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 18px; }
.chat-x { border: 0; background: none; color: var(--sand); font-size: 22px; cursor: pointer; line-height: 1; }
@media (max-width: 480px) { .chat-log { max-height: 46svh; } }


/* ═══════════════════════════════════════════════════════════════
   BLOOMS — bougainvillea, the carved panels and the fort, lifted
   from the wardrobe poster so the site and the poster feel like
   one hand. Multiply blend drops the poster's paper against ours,
   so no cut-out edges. Decorative only: aria-hidden by construction
   (pseudo-elements), never interactive, never load-blocking.
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   THE NEEMRANA ORNAMENTS
   Cut from the wardrobe poster: bougainvillea corners, peacocks,
   scalloped arches, the fort skyline, a gold quatrefoil.

   Rules of the house:
     · ornaments never take a click — pointer-events: none, always
     · ornaments never push content — they are ::before/::after or
       absolutely positioned spans, never in the flow
     · @2x only above 900px, so a phone downloads the small ones
     · anything that would crowd the words gets smaller or goes away
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --orn: '/assets/ornament';
  --corner-w: 128px;   /* bougainvillea top corners, phone */
  --corner-h: 117px;
}

/* ── Paper ─────────────────────────────────────────────────────────
   NOT USED. `paper-tile.webp` in the pack is not a paper texture — it
   is a crop of the poster's arch panel, complete with fragments of the
   poster's own lettering, and it tiles into loud wallpaper with
   readable letters in it. The flat cream is better. Kept in the folder
   in case a real paper grain turns up. */

/* ── Corner swags on a section ─────────────────────────────────────
   .bloom keeps its old name so every page that already asks for it
   gets the new artwork. */
.bloom { position: relative; overflow: hidden; }
.bloom > * { position: relative; z-index: 1; }
.bloom::before, .bloom::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: contain; opacity: .9;
  /* These are crops off the poster's cream paper. On a cream section,
     multiply makes that ground disappear; on a dark band it would go
     black, which is why .band-deep never gets a .bloom. */
  mix-blend-mode: multiply;
}
.bloom::before {
  top: 0; left: 0; width: var(--corner-w); height: var(--corner-h);
  background-image: url('/assets/ornament/floral-corner-top-left.webp');
  background-position: left top;
}
/* The bottom cluster is gone. It sat at the foot of every section,
   which is exactly where the last line of text ends up — the flowers
   landed on the words. The top swag alone does the job. */
.bloom::after { display: none; }
/* The other diagonal, so consecutive sections don't mirror each other */
.bloom.alt::before {
  left: auto; right: 0;
  background-image: url('/assets/ornament/floral-corner-top-right.webp');
  background-position: right top;
}

/* The peacock swag — for the one or two places that deserve it */
.bloom.peacock::before {
  width: 150px; height: 169px;
  background-image: url('/assets/ornament/floral-corner-peacock-left.webp');
}
.bloom.peacock.alt::before {
  background-image: url('/assets/ornament/floral-corner-peacock-right.webp');
}

@media (min-width: 900px) {
  .bloom::before { width: 236px; height: 216px;
    background-image: url('/assets/ornament/floral-corner-top-left@2x.webp'); }
  .bloom.alt::before {
    background-image: url('/assets/ornament/floral-corner-top-right@2x.webp'); }
  .bloom.peacock::before { width: 250px; height: 282px;
    background-image: url('/assets/ornament/floral-corner-peacock-left@2x.webp'); }
  .bloom.peacock.alt::before {
    background-image: url('/assets/ornament/floral-corner-peacock-right@2x.webp'); }
}
@media (max-width: 480px) {
  .bloom::before { width: 96px; height: 88px; opacity: .72; }
  .bloom.peacock::before { width: 104px; height: 117px; }
}
/* Ornaments are decoration. If the guest has asked for less motion and
   less noise, or is printing, they go. */
@media print { .bloom::before, .bloom::after { display: none; } }


/* ── Banner: a section title dressed with the fort ── */
.crest { display: block; width: 190px; height: 73px; margin: 0 auto 10px;
  background: url('/assets/ornament/fort-pastel-distant.webp') center / contain no-repeat;
  opacity: .82; }
@media (min-width: 900px) {
  .crest { width: 250px; height: 96px;
    background-image: url('/assets/ornament/fort-pastel-distant@2x.webp'); }
}

/* The invitation card is deliberately undecorated — gold frame only. */
/* (removed: the card now owns ::before/::after for its paper and hairline) */

@media (prefers-reduced-motion: no-preference) {
  .bloom::before, .bloom::after { transition: opacity 600ms var(--ease); }
}

/* ── Inline links in prose ─────────────────────────────────────────
   Not buttons. A quiet gold underline, so a sentence can carry a link
   without shouting — the visa line, and anywhere else that reads as
   a sentence rather than an action. .btn opts itself out below. */
p a:not(.btn),
li a:not(.btn),
.small a:not(.btn) {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(176, 141, 87, .55);
}
p a:not(.btn):hover,
li a:not(.btn):hover,
.small a:not(.btn):hover { text-decoration-color: var(--gold-deep); }

/* On the indigo visa band the card is ivory, so the gold still reads —
   but inside any dark band, lift the link off the navy. */
.band-deep p a:not(.btn),
.band-deep .small a:not(.btn) { color: var(--gold); text-decoration-color: rgba(176,141,87,.7); }

/* "Not saved" — a quiet reassurance in the chat header, not a badge. */
.chat-note {
  margin-left: auto; margin-right: 10px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-soft); opacity: .75; white-space: nowrap;
}

/* Plain list — bullets, no chrome. Used on the Memory Wall. */
.plain { padding-left: 0; }
.plain li { margin-bottom: 4px; }

/* ─── The latest notice, at the top of the app ─────────────────────
   A band, not a modal. It never covers anything and it never demands
   a tap — it just sits there until the guest dismisses it. */
.notice {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0 var(--gutter) 4px; padding: 13px 14px 13px 13px;
  background: var(--sand); border: 1px solid var(--gold);
  border-left: 3px solid var(--terracotta); border-radius: 10px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.notice.on { opacity: 1; transform: none; }
.notice .nbell { flex: none; margin-top: 6px; font-size: 8px; color: var(--terracotta); }
.notice .nbody { flex: 1; min-width: 0; }
.notice b { display: block; font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: 14.5px; line-height: 21px; color: var(--ink); }
.notice p { margin: 3px 0 0; font-size: 13.5px; line-height: 20px; color: var(--ink); opacity: .78; }
.notice time { display: block; margin-top: 5px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-deep); }
.notice .nx { flex: none; border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink); opacity: .4; padding: 0 2px; }
.notice .nx:hover { opacity: .8; }

/* ─── Countdown card on the Days tab ──────────────────────────────── */
.cdcard { text-align: center; }
/* Four across, always. Three-plus-one wrapping looks like a mistake. */
.cdcard .count { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.cdcard .count div { min-width: 0; padding: 10px 2px; }
.cdcard .count b { font-size: 25px; line-height: 29px; }
.cdcard .count i { font-size: 9px; letter-spacing: .09em; }
@media (max-width: 360px) {
  .cdcard .count b { font-size: 22px; }
  .cdcard .count i { font-size: 8px; letter-spacing: .05em; }
}
.cdcard.done { border-color: var(--rani); }
.cdcard.done .dev { color: var(--rani); }

/* (the app's poster uses the shared .poster / .posterbar rules below) */


/* ═══ What to wear — page AND the app's पोशाक tab ═══════════════════
   One set of rules for both, so the tab is genuinely the same thing
   rather than a lookalike that drifts.                              */
html { scroll-padding-top: 66px; }
  section { padding: 40px 0; }

  /* ── The one-pager, first thing you see ── */
  .poster { display: block; width: 100%; height: auto; border: 1px solid var(--gold);
            border-radius: 10px; cursor: zoom-in; }
  .posterbar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

  /* ── Weather ── */
  .temps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .temp { border: 1px solid var(--sand-line); border-radius: 12px; background: var(--ivory);
          padding: 18px; text-align: center; }
  .temp b { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 500;
            font-size: 34px; line-height: 38px; color: var(--indigo); }
  .temp span { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--terracotta); }

  /* ── Tips: everything else, collapsed ── */
  details.tip { border: 1px solid var(--sand-line); border-radius: 11px; background: var(--ivory);
                margin-bottom: 8px; overflow: hidden; }
  details.tip[open] { border-color: var(--gold); }
  details.tip summary { list-style: none; cursor: pointer; padding: 13px 15px;
    display: flex; align-items: center; gap: 12px; }
  details.tip summary::-webkit-details-marker { display: none; }
  details.tip summary::after { content: '+'; margin-left: auto; color: var(--gold); font-size: 19px; flex: none; }
  details.tip[open] summary::after { content: '–'; }
  .tno { font-family: 'Cormorant Garamond', serif; font-size: 14px; letter-spacing: 2px;
         color: var(--gold-deep); flex: none; }
  .tnm { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 19px;
         line-height: 23px; color: var(--indigo); }
  .tnm em { display: block; font-style: normal; font-size: 11px; letter-spacing: 2px;
            text-transform: uppercase; color: var(--terracotta); }
  .dots { display: flex; gap: 4px; flex: none; }
  .dots i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(44,36,32,.15); }
  .tbody { padding: 0 16px 16px; font-size: 15px; line-height: 23px; }
  .tbody p { margin: 0 0 9px; max-width: none; }
  .tbody p b { font-weight: 500; color: var(--indigo); }
  .tbody .sw { font-size: 13px; color: var(--gold-deep); margin-bottom: 10px; }

  .chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .chips a { border: 1px solid var(--sand-line); background: var(--ivory); border-radius: 999px;
    padding: 8px 14px; font-size: 13.5px; color: var(--indigo); text-decoration: none; }
  .chips a:hover { border-color: var(--gold); }

  ul.pack { list-style: none; padding: 0; margin: 0; columns: 1; }
  ul.pack li { padding: 7px 0 7px 20px; position: relative; font-size: 15px; line-height: 22px; }
  ul.pack li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 7px; height: 7px;
    background: var(--gold); transform: rotate(45deg); }
  @media (min-width: 620px) { ul.pack { columns: 2; column-gap: 26px; } }

  #lb { position: fixed; inset: 0; z-index: 90; display: none; place-items: center;
        background: rgba(17,20,28,.95); padding: 14px; }
  #lb.on { display: grid; }
  #lb img { max-width: 100%; max-height: 92svh; object-fit: contain; }
  #lb button { position: absolute; top: 8px; right: 12px; border: 0; background: none;
    color: var(--ivory); font-size: 34px; cursor: pointer; }

/* The app's cards are narrower than the page's, so the temperature
   would break across two lines. Keep it on one. */
.temp b { white-space: nowrap; }
#wearPane .temp { padding: 15px 10px; }
#wearPane .temp b { font-size: 27px; line-height: 31px; }
#wearPane .temp span { font-size: 10px; letter-spacing: .12em; }

/* ── Ornate divider ────────────────────────────────────────────────
   The gold quatrefoil from the poster, replacing the plain gold line
   wherever a page wants a little more ceremony. `hr.rule.ornate`. */
.rule.ornate {
  /* The gold quatrefoil from the poster, with two hairlines drawn in
     CSS either side. The pack's `divider-sprig-flourish` was the first
     choice, but its sprigs sit on a near-white ground that will not key
     out cleanly — on a cream page it shows as two pale boxes. The
     motif alone is crisp at any size and carries the same hand. */
  border: 0; height: 28px; width: min(300px, 76%); margin: 14px auto 6px;
  background:
    url('/assets/ornament/flourish-quatrefoil.webp') center center / auto 22px no-repeat,
    linear-gradient(to right,
      transparent 0, transparent 6%,
      var(--gold) 6%, var(--gold) 38%,
      transparent 38%, transparent 62%,
      var(--gold) 62%, var(--gold) 94%,
      transparent 94%) center / 100% 1px no-repeat;
  opacity: .9;
}
@media (min-width: 900px) {
  .rule.ornate { height: 34px; width: min(360px, 60%);
    background-image:
      url('/assets/ornament/flourish-quatrefoil@2x.webp'),
      linear-gradient(to right,
        transparent 0, transparent 6%,
        var(--gold) 6%, var(--gold) 38%,
        transparent 38%, transparent 62%,
        var(--gold) 62%, var(--gold) 94%,
        transparent 94%);
    background-size: auto 26px, 100% 1px; }
}
.rule.ornate.on-ivory { opacity: .95; }
/* The plain rule carries a small gold lozenge on ::after. The ornate
   one has the quatrefoil instead, and the inherited lozenge was
   surfacing as a stray gold wedge at the top of the taller box. */
.rule.ornate::after { display: none; }

/* The bare motif, for a tighter spot */
.motif {
  display: block; width: 26px; height: 28px; margin: 14px auto;
  background: url('/assets/ornament/flourish-quatrefoil.webp') center/contain no-repeat;
}

/* ── Scalloped arch over a page title ──────────────────────────────
   The jharokha, drawn rather than described. Sits above the heading
   and never pushes it. */
.arched { position: relative; padding-top: 58px; }
.arched::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; max-width: 1100px; height: 62px; pointer-events: none; opacity: .5;
  background: url('/assets/ornament/arch-full.webp') center top/auto 62px repeat-x;
  /* Multiply drops the stone's cream ground into the page; one radial
     mask anchored at the top centre fades the two ends AND the cut
     along the bottom, in a single layer that every browser honours. */
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(110% 150% at 50% 0%, #000 34%, rgba(0,0,0,.55) 66%, transparent 100%);
          mask-image: radial-gradient(110% 150% at 50% 0%, #000 34%, rgba(0,0,0,.55) 66%, transparent 100%);
}
@media (min-width: 900px) {
  .arched { padding-top: 76px; }
  .arched::before { height: 84px; background-size: auto 84px;
    background-image: url('/assets/ornament/arch-full@2x.webp'); }
}
@media (max-width: 420px) {
  .arched { padding-top: 48px; }
  .arched::before { height: 50px; background-size: auto 50px; }
}

/* ── Peacocks in the margins ───────────────────────────────────────
   Only on a CREAM band, and only where there is genuine empty margin.
   These crops end in a straight edge, so over a photograph they read
   as a pasted rectangle — on paper the edge disappears. Never on a
   phone either, where they would sit on the words. */
.peacocks { display: none; }
@media (min-width: 1100px) {
  .peacocks { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
  .peacocks i {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 150px; height: 365px; background-repeat: no-repeat; background-size: contain;
    opacity: .92;
  }
  .peacocks .pk-l { left: max(10px, calc(50% - 480px));
    background-image: url('/assets/ornament/peacock-left@2x.webp'); background-position: left center; }
  .peacocks .pk-r { right: max(10px, calc(50% - 480px));
    background-image: url('/assets/ornament/peacock-right@2x.webp'); background-position: right center; }
}
@media (min-width: 1360px) {
  .peacocks i { width: 190px; height: 462px; }
}

/* ── Vines down a page margin ──────────────────────────────────────── */
.vined { position: relative; }
@media (min-width: 1000px) {
  .vined::before, .vined::after {
    content: ''; position: absolute; top: 8%; width: 74px; height: 240px;
    pointer-events: none; opacity: .8; background-repeat: no-repeat; background-size: contain;
  }
  .vined::before { left: 12px;
    background-image: url('/assets/ornament/floral-vine-left.webp'); }
  .vined::after { right: 12px; top: auto; bottom: 8%;
    background-image: url('/assets/ornament/floral-vine-right.webp'); }
}

/* ── The fort along the top of a dark band ─────────────────────────
   Neemrana lit up at night. This used to sit above every page footer
   and was taken off it — blurred and half-dissolved at that size it
   read as a smudge, and it made the footer twice as tall as its two
   lines of text needed. The app's greeting bar is the one band left
   that carries it, at a size where it still reads as a building.

   ONE fort, centred and dissolving — not a repeat. Tiled, the same
   silhouette every 200px reads as wallpaper with visible seams, which
   is the opposite of what a photograph of a real place should do. */
.skyline { position: relative; overflow: hidden; }
.skyline > * { position: relative; z-index: 1; }
.skyline::before {
  content: ''; position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  /* Native size. The source is only 396px across, so anything wider is
     a blur — better a small, sharp palace than a large soft one. */
  width: 211px; height: 90px; pointer-events: none; opacity: .5; z-index: 0;
  background: url('/assets/ornament/palace-illuminated-night.webp') center top / contain no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,.5) 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,.5) 74%, transparent 100%);
}
@media (min-width: 900px) {
  .skyline::before { width: 396px; height: 165px;
    background-image: url('/assets/ornament/palace-illuminated-night@2x.webp'); }
}
/* A pale daylight fort, for a cream band */
.skyline-pale::before {
  background-image: url('/assets/ornament/fort-pastel-distant.webp');
  opacity: .34;
}
@media (min-width: 900px) {
  .skyline-pale::before { background-image: url('/assets/ornament/fort-pastel-distant@2x.webp'); }
}

/* ── A sprig, for a card that wants one corner touched ─────────────── */
.sprigged { position: relative; overflow: hidden; }
.sprigged > * { position: relative; z-index: 1; }
.sprigged::after {
  content: ''; position: absolute; right: -6px; bottom: -6px;
  width: 78px; height: 76px; pointer-events: none; opacity: .55; z-index: 0;
  background: url('/assets/ornament/floral-sprig-a.webp') right bottom/contain no-repeat;
  mix-blend-mode: multiply;
}

/* ── A hanging branch along a top edge ─────────────────────────────── */
.branched { position: relative; overflow: hidden; }
.branched > * { position: relative; z-index: 1; }
.branched::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 190px; height: 64px; pointer-events: none; opacity: .85; z-index: 0;
  background: url('/assets/ornament/floral-branch-hanging.webp') right top/contain no-repeat;
  mix-blend-mode: multiply;
}
@media (min-width: 900px) {
  .branched::before { width: 280px; height: 94px;
    background-image: url('/assets/ornament/floral-branch-hanging@2x.webp'); }
}

/* ── The app's greeting bar, with the fort behind it ───────────────
   Shorter than a footer's skyline: this bar is sticky and every
   pixel it takes is a pixel of schedule the guest can't see. */
.apptop.skyline::before { width: 250px; height: 106px; opacity: .3; }
.apptop.skyline { padding-top: 18px; }
.apptop > * { position: relative; z-index: 1; }

/* NB: .arched belongs on a CREAM section only. The arcade is a crop of
   pale stone on pale stone — over a photograph its ground is opaque and
   the whole thing reads as a beige strip pasted across the screen. It
   was on the app's gate card for one round and looked exactly like that. */

/* An ornate rule inside a card wants less room than on a page. */
.card .rule.ornate, .gatecard .rule.ornate { height: 22px; width: min(220px, 70%); margin: 12px auto; }

/* ── Feathering the crop line ──────────────────────────────────────
   Every ornament is a rectangular crop from the poster. Where it meets
   paper of the same colour the edge vanishes; over a photograph it
   reads as a pasted box.

   Two different jobs, two different masks:
   · A piece that hangs OFF the card, over the photograph, is floating
     free — every one of its four edges is exposed, so it needs an
     ellipse centred on the flowers that fades outward in all
     directions.
   · A piece tucked INTO a corner of a section has two edges flush
     against the page and only two exposed, so it is anchored at that
     corner instead and keeps its outer edges crisp.
   Single-layer gradients throughout — no mask-composite, so every
   browser renders the same thing. */

/* Floating: the card's own swags and clusters. */
.invite-card .p1 {
  -webkit-mask-image: radial-gradient(72% 72% at 34% 32%, #000 38%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.3) 86%, transparent 100%);
          mask-image: radial-gradient(72% 72% at 34% 32%, #000 38%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.3) 86%, transparent 100%);
}
.invite-card .p2 {
  -webkit-mask-image: radial-gradient(72% 72% at 66% 32%, #000 38%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.3) 86%, transparent 100%);
          mask-image: radial-gradient(72% 72% at 66% 32%, #000 38%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.3) 86%, transparent 100%);
}
.invite-card .p3 {
  -webkit-mask-image: radial-gradient(76% 76% at 36% 68%, #000 36%, rgba(0,0,0,.88) 60%, rgba(0,0,0,.28) 84%, transparent 100%);
          mask-image: radial-gradient(76% 76% at 36% 68%, #000 36%, rgba(0,0,0,.88) 60%, rgba(0,0,0,.28) 84%, transparent 100%);
}
.invite-card .p4 {
  -webkit-mask-image: radial-gradient(76% 76% at 64% 68%, #000 36%, rgba(0,0,0,.88) 60%, rgba(0,0,0,.28) 84%, transparent 100%);
          mask-image: radial-gradient(76% 76% at 64% 68%, #000 36%, rgba(0,0,0,.88) 60%, rgba(0,0,0,.28) 84%, transparent 100%);
}

/* Anchored: section corners, two edges flush with the page. */
.bloom::before {
  -webkit-mask-image: radial-gradient(135% 135% at 0% 0%, #000 48%, rgba(0,0,0,.75) 72%, transparent 100%);
          mask-image: radial-gradient(135% 135% at 0% 0%, #000 48%, rgba(0,0,0,.75) 72%, transparent 100%);
}
.bloom.alt::before {
  -webkit-mask-image: radial-gradient(135% 135% at 100% 0%, #000 48%, rgba(0,0,0,.75) 72%, transparent 100%);
          mask-image: radial-gradient(135% 135% at 100% 0%, #000 48%, rgba(0,0,0,.75) 72%, transparent 100%);
}
.sprigged::after {
  -webkit-mask-image: radial-gradient(130% 130% at 100% 100%, #000 45%, transparent 100%);
          mask-image: radial-gradient(130% 130% at 100% 100%, #000 45%, transparent 100%);
}
.branched::before {
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
          mask-image: linear-gradient(to left, #000 45%, transparent 100%);
}

/* The flowers ARE the corner now — the drawn gold marks underneath
   them just add noise. */
.invite-card .corner { display: none; }

/* Room for the swags to hang without sitting on the first line. */
@media (min-width: 720px) { .invite-card { padding-top: 84px; } }
@media (max-width: 420px) { .invite-card { padding-top: 48px; } }

/* The swags reach in from both sides, so the first line keeps to the
   middle rather than running underneath them. */
.invite-card .eyebrow { max-width: 62%; margin-inline: auto; }
@media (max-width: 560px) { .invite-card .eyebrow { max-width: 78%; } }

/* ─── The back button ──────────────────────────────────────────────
   Top left on every page. Where there is a header it lives INSIDE it,
   on the same row as the couple's name, so it never floats over the
   words. Only a page with no header of its own gets a fixed button. */
.backfab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 13px 0 11px; height: 34px; flex: none;
  border: 1px solid var(--gold); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  font: 400 12.5px 'Jost', sans-serif; letter-spacing: .04em;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.backfab span { font-size: 15px; line-height: 1; color: var(--gold-deep); }
.backfab i { font-style: normal; }
.backfab:hover { background: rgba(176, 141, 87, .1); }

/* In the menu bar: sits left of the mark. The bar is space-between, so
   the mark takes the slack and the pair hug the left while the nav
   stays right — otherwise the name drifts to the middle. */
.menu-in .backfab { margin-right: 12px; }
.menu-in .backfab ~ .mark { margin-right: auto; }

/* In the app's greeting bar, which is indigo. */
.backfab.ondark { border-color: rgba(217, 199, 163, .55); color: var(--sand); }
.backfab.ondark span { color: var(--gold-soft); }
.backfab.ondark:hover { background: rgba(217, 199, 163, .12); }
.apptop .backfab { margin-bottom: 10px; }

/* A page with no header at all — fixed, top left, clear of everything. */
.backfab.floating {
  position: fixed; top: 14px; left: 14px; z-index: 55;
  height: 40px; padding: 0 15px 0 13px;
  background: rgba(253, 250, 243, .93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 3px 14px rgba(44, 36, 32, .16);
}

/* On a narrow phone the arrow alone — the word costs more than it says. */
@media (max-width: 420px) {
  .backfab { padding: 0; width: 34px; justify-content: center; }
  .backfab i { display: none; }
  .backfab.floating { width: 40px; padding: 0; }
  .menu-in .backfab { margin-right: 10px; }
}
@media print { .backfab { display: none; } }

/* ─── Ritual explainers — the rituals page, and the schedule's chips ─── */
  details.rit {
    border: 1px solid var(--sand-line); border-radius: 12px; background: var(--ivory);
    margin-bottom: 10px; overflow: hidden;
  }
  details.rit[open] { border-color: var(--gold); }
  details.rit summary {
    list-style: none; cursor: pointer; padding: 16px 18px;
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  }
  details.rit summary::-webkit-details-marker { display: none; }
  details.rit summary b { font-family: 'Cormorant Garamond', serif; font-weight: 500;
    font-size: 22px; color: var(--indigo); }
  details.rit summary .hi { font-family: 'Rozha One', serif; font-size: 15px; color: var(--gold-deep); }
  details.rit summary::after { content: '+'; color: var(--gold); font-size: 20px; line-height: 1; flex: none; }
  details.rit[open] summary::after { content: '–'; }
  .rit-body { padding: 0 18px 18px; }
  .rit-body dt { font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
    color: var(--terracotta); margin-top: 14px; }
  .rit-body dd { margin: 5px 0 0; font-size: 16px; line-height: 25px; }

/* ── Ornaments inside app cards ────────────────────────────────────
   A card is small, so the same sprig that reads as a flourish on a
   page would be a blanket here. Scaled down and quietened. */
.card.sprigged::after { width: 62px; height: 60px; opacity: .42; right: -4px; bottom: -4px; }
.card.branched::before { width: 132px; height: 45px; opacity: .6; }
@media (min-width: 900px) {
  .card.branched::before { width: 160px; height: 54px; }
}
/* The countdown is centred; a branch in its corner would tug the eye
   off the numbers, so it sits further out and fainter. */
.cdcard.branched::before { opacity: .45; }

/* ═══════════════════════════════════════════════════════════════════
   THE LIVE BACKGROUND — sunset over the palace

   One base painting with four animated layers over it: two cloud
   bands drifting at different speeds, a sun that breathes, the palace
   windows and terrace lamps flickering, and the candle in the lantern.
   All CSS. No video, no JavaScript, no canvas.

   The layers only line up if they stay registered to each other, so
   the whole thing is a fixed 16:9 stage scaled to COVER the viewport
   rather than five independently-sized backgrounds.
   ═══════════════════════════════════════════════════════════════════ */
.livebg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; background: #efd2bd;
  container-type: size;

  /* Which part of the painting stays in frame when the viewport is
     narrower than 16:9. The middle is open sky, which is where the
     words go — so a phone keeps the sky and the sunset, not the busy
     palace on the right that the text would have to fight. */
  --lb-focus-x: 50%;
  --lb-focus-y: 50%;
}
@media (orientation: portrait) { .livebg { --lb-focus-x: 38%; } }

.livebg__stage {
  position: absolute;
  left: var(--lb-focus-x); top: var(--lb-focus-y);
  transform: translate(calc(-1 * var(--lb-focus-x)), calc(-1 * var(--lb-focus-y)));
  width: 100%; height: 100%;                       /* fallback */
  width: max(100cqw, 177.7778cqh);
  height: max(100cqh, 56.25cqw);
}
.livebg__stage > * {
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-size: 100% 100%;
  will-change: transform, opacity;
}

.livebg__base { background-image: url('/assets/livebg/base.webp'); }

/* Drifting clouds, two speeds for depth */
.livebg__clouds {
  inset: 0 auto auto 0; width: 200%; height: 57.41%;
  mix-blend-mode: screen; pointer-events: none;
  animation: lb-drift linear infinite;
}
.livebg__clouds--far  { background-image: url('/assets/livebg/clouds-far.webp');
  opacity: .20; animation-duration: 240s; }
.livebg__clouds--near { background-image: url('/assets/livebg/clouds-near.webp');
  opacity: .14; animation-duration: 155s; }
@keyframes lb-drift { from { transform: translate3d(0,0,0); }
                      to   { transform: translate3d(-50%,0,0); } }

/* The sun, breathing slowly */
.livebg__sun {
  background-image: radial-gradient(circle,
    rgba(255,221,163,.55) 0%, rgba(255,186,122,.30) 38%, rgba(255,168,112,0) 72%);
  background-position: 8.9% 67.2%; background-size: 30% 53%;
  mix-blend-mode: screen;
  animation: lb-breathe 17s ease-in-out infinite;
}
.livebg__sun--core {
  background-image: radial-gradient(circle,
    rgba(255,244,214,.75) 0%, rgba(255,214,150,.34) 42%, rgba(255,196,130,0) 75%);
  background-size: 11% 19.5%;
  animation-duration: 11s; animation-delay: -4s;
}
@keyframes lb-breathe { 0%,100% { opacity: .72; } 50% { opacity: 1; } }

/* Palace windows and terrace lamps */
.livebg__lights {
  background-image: url('/assets/livebg/lights.webp');
  mix-blend-mode: screen; opacity: .55;
  animation: lb-lamps 11s ease-in-out infinite;
}
@keyframes lb-lamps {
  0%{opacity:.50}   7%{opacity:.63} 13%{opacity:.46} 22%{opacity:.68}
  30%{opacity:.53} 39%{opacity:.66} 48%{opacity:.48} 57%{opacity:.61}
  65%{opacity:.71} 74%{opacity:.52} 83%{opacity:.64} 92%{opacity:.49}
  100%{opacity:.50}
}

/* The candle in the lantern */
.livebg__candle {
  background-image: url('/assets/livebg/candle.webp');
  mix-blend-mode: screen; opacity: .7;
  animation: lb-candle 3.7s ease-in-out infinite;
}
@keyframes lb-candle {
  0%  {opacity:.62; transform:translate3d(0,0,0)     scale(1)}
  11% {opacity:.86; transform:translate3d(.06%,0,0)  scale(1.03)}
  23% {opacity:.55; transform:translate3d(-.05%,0,0) scale(.985)}
  34% {opacity:.92; transform:translate3d(.04%,0,0)  scale(1.04)}
  46% {opacity:.66; transform:translate3d(0,0,0)     scale(1.005)}
  58% {opacity:.88; transform:translate3d(-.06%,0,0) scale(1.03)}
  70% {opacity:.58; transform:translate3d(.03%,0,0)  scale(.99)}
  83% {opacity:.8;  transform:translate3d(0,0,0)     scale(1.02)}
  100%{opacity:.62; transform:translate3d(0,0,0)     scale(1)}
}

/* A guest who has asked their phone for less motion gets a still painting. */
@media (prefers-reduced-motion: reduce) {
  .livebg__stage > * { animation: none !important; }
}

/* ── The invitation, straight on the painting ──────────────────────
   No card, no flowers: the artwork already has bougainvillea down one
   side and a peacock on the other, and a white box in the middle of it
   would be covering the thing it is framing.

   Which means contrast is no longer solved by construction, so it is
   solved here: one soft warm scrim behind the words only, plus a
   shadow on the type itself. Enough to hold dark ink over a pale sky
   without putting a visible panel back. */
.invite-bare {
  position: relative; z-index: 2;
  width: min(620px, 100% - 36px); margin-inline: auto;
  /* The padding IS the glow's margin. It used to be negative insets on
     the scrim, which pushed past the block and gave the whole page ten
     pixels of sideways scroll on a phone. */
  padding: 74px 30px 78px; text-align: center;
}
.invite-bare::before {
  /* Stays inside the block — the gradient reaches full transparency
     before the edges, so there is no seam and nothing to scroll to.
     Centred slightly low, because the last line sits over the treeline,
     which is the one busy part of the painting the words must cross. */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 62% 56% at 50% 54%,
    rgba(255, 248, 238, .70) 0%, rgba(255, 246, 234, .52) 40%,
    rgba(255, 244, 232, .24) 68%, rgba(255, 244, 232, 0) 100%);
}
.invite-bare > * { position: relative; }
.invite-bare .eyebrow { color: var(--terracotta); max-width: none;
  text-shadow: 0 1px 10px rgba(255, 250, 240, .9); }
.invite-bare .names, .invite-bare .amp, .invite-bare .line, .invite-bare .meta {
  text-shadow: 0 1px 12px rgba(255, 250, 240, .85), 0 1px 3px rgba(255, 250, 240, .9);
}
.invite-bare .meta { color: var(--ink); opacity: .9; }
/* The last line lands lowest, on the trees. Give it the darker gold and
   a real shadow rather than the pale terracotta it inherits. */
.invite-bare .small a {
  color: var(--gold-deep); font-weight: 500;
  text-shadow: 0 1px 10px rgba(255, 250, 240, .95), 0 0 18px rgba(255, 250, 240, .8);
  text-decoration-color: rgba(138, 109, 63, .6);
}
@media (max-width: 480px) { .invite-bare { padding: 58px 20px 62px; } }