/* v4 — nine rooms, one spine.
   Maroon is the thread that runs through every room; ivory is paper, never the subject.
   Each room owns one ground colour, one supporting tone and one accent, and meets the room
   above through a blend of just those two colours (round E replaced the torn edges). */

:root{
  /* Spine — on every room */
  --spine:#6b1d2c;          /* Sahe Chitthi maroon, always flat */
  --navy:#1f2a3c;           /* ink navy: all body text on light grounds */
  --paper-ivory:#f6f2e9;    /* warm ivory: paper and breathing space */
  --gold:#b08d57;           /* antique gold: lines only, never fills */
  --ivory-soft:#e8dfce;     /* second ivory for secondary lines on dark grounds */
  --paper-tex:url('assets/v4/paper-texture.webp');
  /* The cold-press tooth on the ivory room and inside the arch. Both are drawn at this size and
     both are centred on the same vertical axis, so the only thing that could break the grain at
     the arch's foot is the vertical phase — hence one shared offset. Half a tile puts that join
     in the middle of the tile, where neighbouring rows differ by about half a level, instead of
     on the tile's own repeat (mean 2.2, max 13). */
  --paper-tile:460px;
  --paper-phase:230px;
  --laavan-tex:url('assets/v4/laavan-motifs.webp');
  --lantern-tex:url('assets/v4/lanterns.webp');
  /* Room grounds */
  --g-maroon:#5c1622;
  --g-cedar:#2e4034;        /* retired in round E; kept as part of the couple's palette */
  --g-dusk:#1e2b3f;         /* ink-navy blue hour: the Announcement ground, from the painting's own sky */
  --g-ivory:#f6f2e9;
  --g-rose:#ebd3d2;
  --g-plum:#2b2028;         /* Shagna di Shaam: night plum (the taupe-brown trial was rolled back) */
  --g-sky:#edf2f6;          /* Anand Kaaraj: pale sky (the pistachio trial was rolled back) */
  --g-indigo:#34263a;       /* Reception & Sufi Night: deep plum, from the couple's card */
  /* Accents */
  --a-terracotta:#9c4b34;
  --a-gulab:#c96a78;
  --a-amber:#e0a458;
  --a-powder:#8fb2ce;
  --a-fuchsia:#c2185b;
  --a-marigold:#e8a317;
  /* Supporting */
  --s-mist:#c3cfd4;
  --s-sage:#a8b49a;
  --s-champagne:#d9c3a0;
  --s-lilac:#d7cce6;
  --s-mint:#c9dfd0;
  --s-butter:#f2e3b8;
  --s-emerald:#0e7a5f;
  --s-cobalt:#1b4fa0;
  /* Shared measurements */
  --gutter-w:clamp(26px,5.5vw,104px);
  --room-top:clamp(78px,11vw,150px);
  --room-bottom:clamp(78px,10vw,140px);
  /* Ink tokens inherited by the shell: no grey or black text anywhere */
  --ink:#1f2a3c;
  --muted:#1f2a3c;
  --line:#d9d1bf;
  /* The one torn edge still in use: the location card inside the itinerary. */
  --deckle-card:polygon(0.0% 0.30%,7.1% 1.00%,14.3% 0.53%,21.4% 1.37%,28.6% 0.46%,35.7% 0.93%,42.9% 0.29%,50.0% 1.20%,57.1% 1.05%,64.3% 0.02%,71.4% 0.58%,78.6% 0.97%,85.7% 0.40%,92.9% 0.53%,99.47% 0.0%,98.55% 7.1%,98.88% 14.3%,99.20% 21.4%,99.00% 28.6%,99.80% 35.7%,99.28% 42.9%,99.50% 50.0%,99.86% 57.1%,99.77% 64.3%,99.31% 71.4%,99.93% 78.6%,99.59% 85.7%,99.30% 92.9%,100.0% 99.56%,92.9% 98.70%,85.7% 99.88%,78.6% 99.09%,71.4% 98.82%,64.3% 99.94%,57.1% 99.85%,50.0% 98.77%,42.9% 99.78%,35.7% 98.62%,28.6% 98.71%,21.4% 98.66%,14.3% 99.74%,7.1% 99.32%,1.08% 100.0%,1.32% 92.9%,1.19% 85.7%,1.14% 78.6%,0.76% 71.4%,0.70% 64.3%,1.26% 57.1%,1.10% 50.0%,0.52% 42.9%,0.11% 35.7%,0.07% 28.6%,1.42% 21.4%,0.49% 14.3%,0.08% 7.1%);

}

body{background:var(--g-maroon)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.site-header{color:var(--spine)}
.monogram span{color:var(--gold)}

/* ——— 1 · The cover's foot ————————————————————————————————————————
   The scenery used to stop at a torn maroon edge. Now the arrival's maroon simply rises
   through the bottom of the painting on the same eased curve as every other boundary, and
   the painting itself dissolves into the cover's own ground inside that band — so the two
   rooms meet with no line at all. Both are static; nothing is scroll-linked.
   It sits above the sky and its wash and below every word, button and the letter itself. */
.cover{--blend:clamp(120px,18vw,200px)}
.cover-blend{position:absolute;left:0;right:0;bottom:0;height:var(--blend);z-index:-1;pointer-events:none;display:block;
  background:linear-gradient(rgb(92 22 34 / 0) 0%,rgb(92 22 34 / .061) 15%,rgb(92 22 34 / .216) 30%,rgb(92 22 34 / .425) 45%,rgb(92 22 34 / .648) 60%,rgb(92 22 34 / .844) 75%,rgb(92 22 34 / .972) 90%,rgb(92 22 34 / 1) 100%)}
/* The painting fades out later than the maroon rises, so its own edge is never seen and the
   ground behind it never shows as a band. */
.cover-landscape img{-webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - var(--blend)),#000 calc(100% - var(--blend) * .55),transparent 100%);
  mask-image:linear-gradient(#000 0,#000 calc(100% - var(--blend)),#000 calc(100% - var(--blend) * .55),transparent 100%)}

/* ——— Room shell ——————————————————————————————————————————————— */
.room{position:relative;isolation:isolate;padding:var(--room-top) var(--gutter-w) var(--room-bottom)}
.room>*{position:relative;z-index:1}

/* ——— Between the rooms ————————————————————————————————————————————
   Round E replaced every torn edge with a colour blend: the room above turns into the room
   below through a gradient of nothing but those two rooms' own colours. Each blend is a flat
   strip painted at the top of the lower room, so the room above is never covered and the
   strip's first stop already matches the ground it meets — there is no start line and no end
   line. Eight stops on a smoothstep curve (0, .061, .216, .425, .648, .844, .972, 1) keep the
   ramp eased at both ends and free of banding. Nothing here is scroll-linked, nothing blends
   live, and every room's own ground stays fully opaque underneath.
   The two boundaries that are not gradients: the doorway into the itinerary is a wipe, and
   the cover carries its own blend down over the foot of the painting (see .cover-blend). */
.blend{position:absolute;left:0;right:0;top:0;height:var(--blend);z-index:0;pointer-events:none;display:block}
/* Every room with a blend gives its top padding at least the blend's height plus a little
   air, so no word, rule, flourish, frame or picture ever sits inside
   one. That is what makes the page a little longer. */
:root{--blend-air:14px}
.room-gulab,.room-shagna,.room-sufi,.room-closing.closing{padding-top:max(var(--room-top),calc(var(--blend) + var(--blend-air)))}

/* Paper tooth on the ivory room: the cold-press tile pre-multiplied onto ivory, so nothing blends live.
   Its last 170px fade to flat ivory, so the room hands the blend below exactly the colour that
   blend starts on and the grain does not stop on a line. The grid is hung half a tile above this
   room's top edge, which is also the arch's foot — see --paper-phase. */
.room-itinerary::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('assets/v4/paper-ivory.webp');background-repeat:repeat;
  background-size:var(--paper-tile) auto;background-position:center calc(var(--paper-phase) * -1);
  -webkit-mask-image:linear-gradient(#000 calc(100% - clamp(120px,16vw,200px)),transparent 100%);
          mask-image:linear-gradient(#000 calc(100% - clamp(120px,16vw,200px)),transparent 100%)}

/* Clipped side strips: everything ambient lives in here and can never reach a line of text. */
.gutter{position:absolute;top:0;bottom:0;width:var(--gutter-w);overflow:hidden;pointer-events:none;z-index:0}
.gutter-l{left:0}
.gutter-r{right:0}
/* Corner florals are clipped to the room's top band, above the first line of copy. */
/* The spray hangs from the room's own top edge and fades out inside this band — it used to
   start above the edge, so the roses were cut off by a straight line. */
.flora-frame{position:absolute;top:0;right:0;width:min(42%,300px);height:clamp(132px,calc(var(--room-top) + 56px),240px);overflow:hidden;z-index:0;pointer-events:none}
.corner-flora{position:absolute;right:-6%;top:0;width:106%;height:auto;opacity:.72;transform-origin:88% 6%;animation:flora-sway 11s ease-in-out infinite alternate;-webkit-mask-image:linear-gradient(#000 34%,transparent 76%);mask-image:linear-gradient(#000 34%,transparent 76%)}

/* ——— Scroll-linked reveals ——————————————————————————————————————
   Default state is crisp and visible: JS dims them only when motion is allowed. */
.reveal{will-change:auto}

/* ——— Section titles ————————————————————————————————————————————— */
.flourish{display:block;width:min(230px,72%);height:13px;color:var(--gold);margin:22px 0 0;overflow:visible}
.section-heading .flourish,.room-arrival .flourish,.event-anand .flourish,.wish-card .flourish{margin-inline:auto}

/* ——— 2 · Family blessing ————————————————————————————————————————— */
.room-arrival{background:var(--g-maroon);color:var(--paper-ivory);text-align:center;padding-block:clamp(96px,13vw,160px) clamp(88px,11vw,140px)}
.room-arrival::after{content:'';position:absolute;inset:18px 18px 46px;border:1px solid var(--gold);opacity:.6;pointer-events:none;z-index:0}
.room-arrival .room-inner{max-width:780px;margin:auto}
.blessing{font-family:'Noto Serif Gurmukhi','Gurmukhi MN',serif;margin:0 auto 26px}
.ik-onkar{display:block;font-size:clamp(2.9rem,9vw,3.6rem);line-height:1.3;color:var(--gold);margin-bottom:14px}
.gur-prasad{font-size:1rem;margin-bottom:26px!important}
.blessing p{font-size:clamp(14px,3.6vw,16px);line-height:2.05;letter-spacing:0;color:var(--paper-ivory)}
.blessing-english{font:italic clamp(1.15rem,4vw,1.35rem)/1.4 var(--serif);margin:26px 0 0;color:var(--ivory-soft)}
.family-hosts{font:clamp(1.5rem,5vw,1.8rem)/1.35 var(--serif);margin-top:34px}
.family-hosts span{font-size:.95rem;white-space:nowrap}
.family-invitation{font:clamp(1.15rem,3.8vw,1.3rem)/1.55 var(--serif);margin:16px 0 30px;color:var(--ivory-soft)}
.family-name{font-size:clamp(2.9rem,10vw,5.2rem);line-height:1.1}
.family-line{font:clamp(1rem,3.4vw,1.06rem)/1.6 var(--serif);color:var(--ivory-soft);margin-top:13px}
/* Gold on maroon is 4.26:1 — fine as a display word, so "with" is set at display size. */
.with-word{font:italic clamp(1.55rem,5vw,1.75rem)/1 var(--serif);color:var(--gold);margin:28px 0}
.room-arrival .section-rule{background:var(--gold);margin-top:46px}

/* ——— 3 · Announcement ————————————————————————————————————————————
   The tall blue-hour painting is the whole ground of this room. Its own extended sky gives the
   announcement copy a dark, quiet place to sit, while the trees and ridges continue behind the
   doorway into the itinerary. The only dissolve is at the room's top edge, where the painting
   gives way to the announcement's own dusk colour under the maroon blend. Nothing is laid over
   the painting: no wash, veil, tint or blend mode. */
.room-announcement{background:var(--g-dusk);color:var(--s-mist);text-align:center;display:flex;flex-direction:column;align-items:center;--blend:clamp(110px,16vw,180px);
  /* The door is only as tall as it has to be. Its round head takes just under half the arch,
     so twice (the countdown + the gap under it) is the shortest door that can hold the
     countdown inside the straight jambs. Measured countdown heights: 201px on a phone,
     267px from 651px up (where the type steps). */
  --cd-h:201px;--door-gap:clamp(28px,5svh,52px);--door-h:calc((var(--cd-h) + var(--door-gap)) * 2);
  --door-pad:clamp(40px,6vw,72px);
  /* The copy has to finish inside the painting's own sky — below that the ridges and the lit
     roofs come up and ivory type falls to 2.3–3.8:1. Nothing may be laid over the painting
     (the owner's rule), so the room simply gives the picture this much more room to breathe
     and the words stop higher up. */
  --art-extra:clamp(240px,30svh,380px);
  padding-block:max(clamp(96px,13vw,150px),calc(var(--blend) + var(--blend-air))) calc(var(--door-h) + var(--door-pad) + var(--art-extra) + 18px)}
/* arrival maroon → announcement dusk navy */
.room-announcement>.blend{background:linear-gradient(#5c1622 0%,#581724 15%,#4f1b28 30%,#421f2e 45%,#342435 60%,#28283a 75%,#202a3e 90%,#1e2b3f 100%)}
/* The painting covers the full room, including the copy and the doorway zone. Only the first
   blend-height of its own sky is dissolved into flat dusk; the rest is untouched art. Portrait
   and wide sources are swapped at the same breakpoint as the rest of the page. */
.dusk-art{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('assets/v4/announcement-dusk-tall.webp');background-position:center bottom;background-size:cover;background-repeat:no-repeat;
  /* No mask: the painting's own top rows are already exactly --g-dusk, so it meets the room's
     colour with nothing to dissolve. Masking a room-sized layer is one of the most expensive
     things iPhone Safari can be asked to repaint while scrolling. */
  transform:translateZ(0)}
.announcement-copy{position:relative;z-index:2;width:100%;max-width:860px}
.announcement-copy h2{font-size:clamp(3.4rem,10vw,7rem);line-height:.96;margin:28px 0 0;display:flex;flex-direction:column;align-items:center;color:var(--paper-ivory)}
/* "weds" sits on its own line between the names: small, italic, mist. */
.announcement-copy h2 span{font:italic clamp(1.3rem,4.2vw,2rem)/1 var(--serif);color:var(--s-mist);letter-spacing:.03em;margin:.34em 0 .3em}
.announcement-date{font-size:.78rem;letter-spacing:.2em;margin:30px 0 0}
.terracotta-rule{display:block;width:56px;height:2px;background:var(--a-terracotta);margin:26px auto 30px}
.estate-name{font:clamp(1.6rem,5vw,2rem)/1.2 var(--serif);color:var(--paper-ivory)}
.estate-town{font:italic clamp(1.2rem,4vw,1.4rem)/1.2 var(--serif);margin-top:9px}
.estate-story{font:clamp(1.15rem,3.8vw,1.3rem)/1.55 var(--serif);max-width:440px;margin:28px auto 0}
.announcement-copy .text-link{margin:26px auto 0;color:var(--paper-ivory);border-color:#9c4b34}

/* The doorway out of the announcement: a plain round-topped arch on straight jambs, in ivory,
   that rises first and widens late and, by the bottom of this room, has simply become the
   itinerary's paper. No pin, no cross-fade. */
.doorway{position:absolute;left:0;right:0;bottom:0;height:var(--door-h);overflow:hidden;z-index:2;pointer-events:none}
/* Resting state (no JS, reduced motion) is fully open, which is what makes the join into
   the itinerary seamless. */
.doorway-arch{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:var(--arch-w,106%);height:var(--arch-h,100%);
  border-radius:min(50%,260px) min(50%,260px) 0 0/min(48%,300px) min(48%,300px) 0 0;background:var(--g-ivory);
  /* The thin antique-gold line follows the round shape and fades in and out with the scroll.
     An inset shadow, so there is no blend mode and nothing to composite. */
  box-shadow:inset 0 0 0 1px rgb(176 141 87/var(--arch-line,0))}
/* Same tooth, same strength as the itinerary — and now the same grid. The arch's foot and the
   itinerary's top edge are the same line, so hanging the tile half a tile above that line from
   both sides (here from the bottom, there from the top) makes one continuous sheet of paper:
   the row above the join and the row below it are neighbours in the same tile. Horizontally
   both boxes are centred on the same axis, so `center` already agrees however wide the arch is,
   and nothing slides as it opens. */
.doorway-arch::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background-image:url('assets/v4/paper-ivory.webp');background-repeat:repeat;
  background-size:var(--paper-tile) auto;background-position:center bottom calc(var(--paper-phase) * -1)}

/* The countdown is seen through the doorway: it only shows once the arch is wide and tall
   enough to hold it, so it is never set on the photograph. */
.door-countdown{position:absolute;left:50%;bottom:var(--door-gap);transform:translateX(-50%);width:max-content;max-width:92%;margin:0;z-index:3;opacity:var(--door-cd,1);color:var(--navy)}
.door-countdown h3{font-size:clamp(1.8rem,5.6vw,2.7rem)}
.door-countdown .countdown-clock{margin-top:24px}

/* ——— 4 · Itinerary ———————————————————————————————————————————————— */
/* The doorway above has already opened into this paper, so the room starts close. */
.room-itinerary{background:var(--g-ivory);color:var(--navy);padding-top:clamp(40px,5vw,64px)}
.room-itinerary h2,.room-itinerary h3,.room-itinerary h4,.door-countdown h3{color:var(--spine)}
.room-itinerary .section-heading{container-type:inline-size;width:100%}
/* These are the same shrink-to-fit treatment used by the event titles: the heading and its
   supporting line keep their designed scale where they fit, then reduce only enough to stay on
   one line on the narrowest phone. The small headroom in each denominator keeps the measured
   italic join from touching the container edge. */
#itinerary-title{font-size:min(clamp(3rem,6.5vw,6rem),calc(100cqw / 9));white-space:nowrap}
.room-itinerary .section-heading .section-intro{font-size:min(clamp(1.2rem,4vw,1.35rem),calc(100cqw / 21));white-space:nowrap}

.countdown{text-align:center;max-width:820px;margin:0 auto}
.countdown h3{font:italic clamp(2rem,6.4vw,3rem)/1.15 var(--serif);color:var(--spine)}
.countdown-clock{display:flex;justify-content:center;gap:clamp(14px,5vw,52px);margin-top:32px}
.countdown-clock>div{display:flex;flex-direction:column;align-items:center}
.countdown-clock strong{display:flex;font:400 clamp(2.1rem,8vw,3.8rem)/1 var(--serif);color:var(--spine);font-variant-numeric:lining-nums tabular-nums}
/* Direct child only: the rolling digits are spans too, and must keep the display size. */
.countdown-clock>div>span{font:12px/1.5 var(--sans);margin-top:12px;color:var(--navy);letter-spacing:.09em}
.digit{display:block;overflow:hidden;height:1.06em}
.dtrack{display:block;transform:translateY(calc(var(--d,0)*-1.06em));transition:transform .6s cubic-bezier(.22,.78,.24,1)}
.dtrack i{display:block;height:1.06em;line-height:1.06em;font-style:normal}
.countdown-note{font-size:12px;color:var(--navy);margin-top:22px;letter-spacing:.06em}

.room-itinerary .section-heading>.eyebrow{color:var(--navy)}
.room-itinerary .section-intro{color:var(--navy);font-size:clamp(1.2rem,4vw,1.35rem)}

/* The three days share one rail, and the rail itself is the progress: the part you have passed
   is maroon, the part still to come stays the gold hairline it always was. Round F took away the
   seal that used to slide down it — the owner asked for the line, not an object on it.
   One column at every width: day headers, times and titles all start on the same left edge.

   The rail runs from each day's date to that day's last entry, so the gaps between the days are
   empty. Both of those patterns are one gradient each, built once by v4.js (--rail-done and
   --rail-todo, identical but for the ink). Only the *painted height* of the maroon one changes
   while you scroll — one property, on one 1px-wide element, and its stops are absolute lengths,
   so shortening the box crops the pattern instead of squashing it.
   Without JS the fallback is what it always was: a plain gold line down the whole column. */
.weekend-days{position:relative;max-width:560px;margin:clamp(48px,7vw,76px) auto 0;--rail-x:11px;--text-x:44px}
.rail{position:absolute;left:var(--rail-x);top:var(--rail-top,0);width:1px;height:var(--rail-h,100%);z-index:0;
  background-image:var(--rail-done,none),var(--rail-todo,linear-gradient(rgb(176 141 87/.65) 0 100%));
  background-size:1px var(--passed,0px),1px 100%;background-repeat:no-repeat,no-repeat}
.day header{padding:clamp(36px,4.6vw,46px) 0 18px var(--text-x)}
.day:first-of-type header{padding-top:0}
.day header>span{font-size:12px;letter-spacing:.17em;color:var(--navy)}
.day header h3{font-size:clamp(2.4rem,7.4vw,3rem);margin:6px 0 4px;color:var(--spine);font-variant-numeric:lining-nums;
  /* Shrink-to-fit on every day, not only the mounted one, so the mount can hug the date and
     nothing moves when it arrives. */
  width:max-content;max-width:100%}
/* The day you are reading wears the pictures' own mount, shrunk to sit behind its date: the
   same scalloped ivory lace and the same embossed inner rule, at a 6px perforation instead of
   9px and a 3px scallop instead of 5px. It is drawn in the date's own stacking context, below
   the numerals, so the date is never masked, tinted or moved — "20 November" stays exactly the
   maroon it was. The whole thing is 15px to the left of the text at most, which keeps it clear
   of the rail at 11px. */
.day.is-now header h3{position:relative;z-index:0}
.day.is-now header h3::before,.day.is-now header h3::after{content:'';position:absolute;z-index:-1;pointer-events:none}
/* The pictures' mat is #f3ede1 because it sits on a dark room. Here it sits on ivory paper, so
   the same mat at the same colour would be invisible — 4 levels off the paper. It is pale
   instead, which is how a lace mount actually reads when it is laid on a toned sheet: by being
   the lighter thing. The perforation is a filled 2px dot on a 6px grid rather than the pictures'
   0.5px ring on a 9px grid, because a ring that fine disappears at this size. */
.day.is-now header h3::before{--r:3.5px;inset:-7px -15px -5px -14px;background-color:#faf5e8;
  background-image:radial-gradient(circle,#e8dcc6 0 .95px,#0000 1.25px),radial-gradient(circle,#e8dcc6 0 .95px,#0000 1.25px);
  background-size:7px 7px;background-position:0 0,3.5px 3.5px}
.day.is-now header h3::after{inset:-3px -11px -1px -10px;border:1px solid #ded1b8;box-shadow:inset 0 1px 0 #fffdf6}
.day header em{font-size:.52em}
.day header small{font-size:12px;letter-spacing:.14em;color:var(--navy)}
.timeline{list-style:none;margin:0;padding:0}
.entry{position:relative;padding:0 0 24px var(--text-x);transition:opacity .45s ease}
.entry.ahead{opacity:.35}
.dot{position:absolute;left:var(--rail-x);top:5px;width:8px;height:8px;transform:translateX(-50%) rotate(45deg);border:1px solid var(--gold);background:var(--g-ivory)}
.entry[data-accent] .dot{width:10px;height:10px;top:4px;border:0;border-radius:50%;transform:translateX(-50%);background:var(--entry-accent)}
.entry[data-accent=gulab]{--entry-accent:var(--a-gulab)}
.entry[data-accent=shagna]{--entry-accent:var(--a-amber)}
.entry[data-accent=anand]{--entry-accent:var(--a-powder)}
.entry[data-accent=sufi]{--entry-accent:var(--a-fuchsia)}
.entry>time{display:block;font-size:13px;letter-spacing:.06em;color:var(--navy);line-height:1.4;padding-bottom:5px}
.entry h4{font:clamp(1.35rem,4.4vw,1.55rem)/1.14 var(--serif);color:var(--spine)}
.entry p{font-size:14px;line-height:1.6;margin-top:5px;color:var(--navy)}
.day-goodbye{font:italic clamp(1.15rem,3.8vw,1.3rem)/1.3 var(--serif);color:var(--spine);margin:-10px 0 0 var(--text-x)}

.colour-legend{text-align:center;margin-top:clamp(56px,8vw,88px);padding-top:clamp(34px,5vw,46px);border-top:1px solid #b08d5759;container-type:inline-size}
.legend-line{font:clamp(1.25rem,4.4vw,1.5rem)/1.3 var(--serif);color:var(--spine)}
.colour-index{display:grid;grid-template-columns:repeat(4,max-content);justify-content:center;gap:12px 30px;margin-top:20px}
.colour-index>span{display:flex;align-items:center;gap:9px;font:1.05rem/1.2 var(--serif);color:var(--navy)}
.colour-index i{width:9px;height:9px;border-radius:50%;background:var(--tone);flex:none}
@container (max-width:430px){
  .colour-index{grid-template-columns:repeat(2,max-content);gap:12px clamp(16px,7vw,30px)}
}

/* The location card, with a few gold leaves drifting in the space above and below it. */
.location{position:relative;margin-top:clamp(56px,8vw,88px);padding-block:58px;scroll-margin-top:20px}
.leaf-drift{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.leaf-drift svg{position:absolute;width:30px;height:18px;color:var(--gold);opacity:.42;animation:leaf-drift 17s ease-in-out infinite alternate}
.leaf-drift svg:nth-child(1){left:6%;top:10px;animation-duration:15s}
.leaf-drift svg:nth-child(2){left:34%;top:22px;animation-duration:19s;animation-delay:-4s}
.leaf-drift svg:nth-child(3){right:9%;top:14px;animation-duration:21s;animation-delay:-8s}
.leaf-drift svg:nth-child(4){left:16%;bottom:16px;animation-duration:18s;animation-delay:-6s}
.leaf-drift svg:nth-child(5){right:20%;bottom:24px;animation-duration:16s;animation-delay:-11s}
.location-card{position:relative;z-index:1;background-color:var(--g-ivory);background-image:var(--paper-tex);background-size:380px auto;background-blend-mode:multiply;clip-path:var(--deckle-card);padding:clamp(22px,3.4vw,34px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.6vw,42px);align-items:center;box-shadow:0 14px 40px #4a3c2414}
.location-art{width:100%;height:auto}
.location-copy>.eyebrow{color:var(--navy)}
.location-copy{container-type:inline-size}
.location-copy h3{font:clamp(1.9rem,5.4vw,2.5rem)/1.12 var(--serif);color:var(--spine);margin:14px 0 20px;font-size:min(clamp(1.9rem,5.4vw,2.5rem),calc(100cqw / 10.25));white-space:nowrap}
.location-name{font:clamp(1.15rem,3.6vw,1.3rem)/1.3 var(--serif);color:var(--navy)}
.location-address{font-size:14px;line-height:1.7;margin-top:8px;color:var(--navy)}
.stay-dates{margin:24px 0 18px;padding:0}
.stay-dates div{border-top:1px solid #b08d5766;padding:15px 0}
.stay-dates dt{font-size:12px;letter-spacing:.12em;color:var(--navy)}
.stay-dates dd{margin:6px 0 0;font:1.25rem/1.3 var(--serif);color:var(--spine)}
.travel-note{font-size:14px;line-height:1.7;color:var(--navy)}
.location-copy .text-link{margin-top:14px;border-color:#b08d5777;color:var(--spine)}
.calendar-button{margin:clamp(48px,7vw,72px) auto 0;border-color:#b08d5777;color:var(--spine)}

/* ——— 5–8 · The four celebrations ————————————————————————————————— */
.event{overflow:visible}
.event-grid{max-width:1120px;margin:auto}
.event-copy>.eyebrow{margin-bottom:20px}
.event-copy h2{font-size:clamp(3.2rem,9vw,5.4rem);line-height:.98}
/* Every celebration's name sits on one line, at every width from 320px up.
   Each title is divided by its own width at 1em (measured in headless Chrome, italic
   second half and letter-spacing included, plus ~1.5% headroom), against the column it
   stands in. So a title keeps today's size wherever it already fits and shrinks only as
   far as that particular name needs. CSS only — nothing is measured at runtime. */
/* width:100% because inline-size containment stops the contents setting the width, and
   Anand's copy column is centred in a flex column rather than stretched. */
.event-copy{container-type:inline-size;width:100%}
#gulab-title{font-size:min(clamp(3.2rem,9vw,5.4rem),calc(100cqw / 5.35))}   /* Gulaab Mehndi — 5.267em */
#anand-title{font-size:min(clamp(3.2rem,9vw,5.4rem),calc(100cqw / 5.00))}   /* Anand Kaaraj — 4.922em */
#shagna-title{font-size:min(clamp(3.4rem,10vw,6rem),calc(100cqw / 5.97))}   /* Shagna di Shaam — 5.875em */
#sufi-title{font-size:min(clamp(3rem,7.4vw,5.2rem),calc(100cqw / 8.25))}    /* Reception & Sufi Night — 8.124em */
.event-date{display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:nowrap;white-space:nowrap;font-size:clamp(12px,3.4vw,14px);padding:15px 0;border-top:1px solid var(--event-line);border-bottom:1px solid var(--event-line);margin:28px 0 24px;font-size:14px;letter-spacing:.03em;line-height:1.5}
.event-line{font:clamp(1.55rem,5vw,1.8rem)/1.25 var(--serif);max-width:400px}
.event-place{font-size:14px;line-height:1.6;margin-top:18px}
.palette-line{font:italic clamp(1.05rem,3.6vw,1.15rem)/1.45 var(--serif);margin:24px 0 0}
.atmosphere-note>small{display:block;font:11px/1.5 var(--sans);letter-spacing:.16em;margin-bottom:6px;font-style:normal}
/* Dress code. The guest pair is a full illustration standing on the room ground beside
   the link, not an icon: its height is set, the width follows the painting. Each room
   stands its pair somewhere different. */
.dress-block{display:grid;grid-template-columns:1fr;gap:clamp(14px,2.2vw,24px);margin-top:clamp(28px,4vw,38px)}
/* The pair is also the way into the dialog, so it is wrapped in a button that carries the
   layout and none of the chrome: no background, no border, no padding, no extra line box.
   Everything that used to sit on the picture now sits on the button, so nothing moves. */
.guest-pair-button{display:block;padding:0;line-height:0;max-width:100%;align-self:end;justify-self:var(--pair-x,start);cursor:pointer}
.guest-pair{display:block;width:auto;height:var(--pair-h,260px);max-width:100%}
.attire-link{display:flex;align-items:center;width:100%;gap:14px;text-align:left;border-top:1px solid var(--event-line);border-bottom:1px solid var(--event-line);padding:20px 0}
.attire-link small{display:block;font:11px/1.5 var(--sans);letter-spacing:.16em;margin-bottom:7px}
.attire-link strong{font:400 clamp(1.2rem,3.8vw,1.35rem)/1.2 var(--serif)}
.mini-swatches{display:flex;gap:5px;margin-left:auto}
.mini-swatches i{display:block;width:12px;height:28px;background:var(--tone) url('assets/silk.webp') center/auto 100%;background-blend-mode:multiply;transform:rotate(6deg)}
.mini-swatches i:nth-child(2){transform:rotate(-4deg)}

/* Scene frames: an embossed ivory lace mount with a scalloped edge (the owner's reference),
   centred and never tilted. The window crops the painting's own paper fade. */
.scene{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
/* The scalloped edge itself, shared by every mount on the page — the pictures, the couple's
   photograph and (round F) the date of the day you are reading. --r is one scallop's radius,
   so the same five mask layers serve a 430px frame and a 40px one. */
.scene-card,.couple-photo,.day.is-now header h3::before{
  -webkit-mask:radial-gradient(var(--r) at 50% var(--r),#000 96%,#0000) 50% 0/calc(2*var(--r)) calc(2*var(--r)) round no-repeat,
    radial-gradient(var(--r) at 50% var(--r),#000 96%,#0000) 50% 100%/calc(2*var(--r)) calc(2*var(--r)) round no-repeat,
    radial-gradient(var(--r) at var(--r) 50%,#000 96%,#0000) 0 50%/calc(2*var(--r)) calc(2*var(--r)) no-repeat round,
    radial-gradient(var(--r) at var(--r) 50%,#000 96%,#0000) 100% 50%/calc(2*var(--r)) calc(2*var(--r)) no-repeat round,
    linear-gradient(#000 0 0) 50% 50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)) no-repeat;
          mask:radial-gradient(var(--r) at 50% var(--r),#000 96%,#0000) 50% 0/calc(2*var(--r)) calc(2*var(--r)) round no-repeat,
    radial-gradient(var(--r) at 50% var(--r),#000 96%,#0000) 50% 100%/calc(2*var(--r)) calc(2*var(--r)) round no-repeat,
    radial-gradient(var(--r) at var(--r) 50%,#000 96%,#0000) 0 50%/calc(2*var(--r)) calc(2*var(--r)) no-repeat round,
    radial-gradient(var(--r) at var(--r) 50%,#000 96%,#0000) 100% 50%/calc(2*var(--r)) calc(2*var(--r)) no-repeat round,
    linear-gradient(#000 0 0) 50% 50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)) no-repeat}
/* The picture mounts: 5px scallops, a 9px lace perforation, a wide mat. */
.scene-card,.couple-photo{--r:5px;--mat:clamp(16px,3.2vw,26px);position:relative;width:var(--frame-w,100%);max-width:100%;padding:var(--mat);
  background-color:#f3ede1;
  background-image:radial-gradient(circle,#0000 0 1.5px,#d7c9ad 1.7px 2.2px,#0000 2.4px),radial-gradient(circle,#0000 0 1.5px,#d7c9ad 1.7px 2.2px,#0000 2.4px);
  background-size:9px 9px;background-position:0 0,4.5px 4.5px}
/* Embossed rules: one just inside the scallops, one beaded line around the picture. */
.scene-card::before,.couple-photo::before{content:'';position:absolute;inset:calc(var(--r) + 4px);border:1px solid #d9ccb2;box-shadow:inset 0 1px 0 #fffaf0,0 1px 0 #fffaf0;pointer-events:none}
.scene-window{position:relative;display:block;overflow:hidden;aspect-ratio:var(--ar,1/1);box-shadow:0 0 0 4px #f3ede1,0 0 0 5px #cdbd9c,0 0 0 7px #f3ede1,0 0 0 8px #e0d4bc}
.scene-window img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.07)}
.scene figcaption{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;font:11px/1.6 var(--sans);letter-spacing:.21em;text-align:center}
.scene figcaption::before,.scene figcaption::after{content:'';width:22px;height:1px;background:var(--gold);flex:none}

/* 5 · Gulaab Mehndi — loose, a tilted card beside the copy */
.room-gulab{background:var(--g-rose);color:var(--navy);--event-line:#c9a9a8;--blend:clamp(100px,14vw,160px)}
/* itinerary ivory → gulab rose */
.room-gulab>.blend{background:linear-gradient(#f6f2e9 0%,#f5f0e8 15%,#f4ebe4 30%,#f1e5df 45%,#efdeda 60%,#edd8d6 75%,#ebd4d3 90%,#ebd3d2 100%)}
.room-gulab h2,.room-gulab .event-copy h2{color:var(--spine)}
.room-gulab .event-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5.5vw,84px);align-items:start}
.room-gulab .scene{margin-top:26px}
.room-gulab .scene{--ar:1/1;--frame-w:min(100%,440px)}
.room-gulab .scene figcaption{color:var(--navy)}
.room-gulab .event-copy{padding-top:6px}
.room-gulab .palette-line{color:var(--navy)}
/* The pair stands at the outer edge of the copy, just above the dress-code line. */
.room-gulab .dress-block{--pair-x:end;--pair-h:clamp(340px,27vw,400px)}
.room-gulab .guest-pair-button{margin-right:clamp(-30px,-2.2vw,-12px)}
/* Petals are the room's accent pink, masked through the three-petal sprite. */
/* The three petals are painted watercolour, with their own shading and veins. They used to be
   used as a stencil over flat pink, which threw all of that away and left pink blobs drifting
   past. The sprite itself is drawn now. */
.petal{position:absolute;display:block;width:26px;height:26px;opacity:.9;
  background-image:url('assets/v4/petals.webp');background-size:300% 100%;background-repeat:no-repeat;
  background-position:calc(var(--i,0)*50%) 0;
  animation:petal-fall 15s ease-in-out infinite}
.gutter-l .petal:nth-child(1){left:2px;top:9%;animation-duration:16s}
.gutter-l .petal:nth-child(2){left:6px;top:42%;animation-duration:19s;animation-delay:-7s;width:20px;height:20px}
.gutter-l .petal:nth-child(3){left:0;top:72%;animation-duration:14s;animation-delay:-3s}
.gutter-r .petal:nth-child(1){right:1px;top:16%;animation-duration:18s;animation-delay:-5s;width:22px;height:22px}
.gutter-r .petal:nth-child(2){right:5px;top:52%;animation-duration:15s;animation-delay:-10s}
.gutter-r .petal:nth-child(3){right:0;top:80%;animation-duration:20s;animation-delay:-2s;width:19px;height:19px}

/* 6 · Shagna di Shaam — one wide card across the room, candlelight in the margins */
/* A lit candle paints about 25px of halo around its 9px flame. The shared 26px gutter cut
   every glow in half against the screen edge, so the candles get a margin of their own —
   the same arrangement the Sufi lanterns already use. The room's padding widens to match,
   so each halo is whole, on screen, and never reaches the copy or the picture. */
.room-shagna{background:var(--g-plum);color:var(--s-champagne);--event-line:#d9c3a047;
  --candle-w:clamp(50px,11.5vw,112px);padding-inline:max(var(--gutter-w),var(--candle-w));--blend:clamp(130px,19vw,210px)}
/* gulab rose → shagna night plum */
.room-shagna>.blend{background:linear-gradient(#ebd3d2 0%,#dfc8c8 15%,#c2acad 30%,#99878a 45%,#6f5f64 60%,#493c43 75%,#30252d 90%,#2b2028 100%)}
.room-shagna .event-copy h2,.room-shagna h2{color:var(--s-champagne)}
.room-shagna .event-grid{display:flex;flex-direction:column;gap:clamp(36px,5vw,64px)}
.room-shagna .scene{width:100%}
.room-shagna .scene{--ar:1/1;--frame-w:min(100%,560px)}
.room-shagna .scene figcaption{color:var(--s-champagne)}
.room-shagna .event-copy{max-width:620px}
.room-shagna .event-copy h2{font-size:clamp(3.4rem,10vw,6rem)}
/* The only pair that stands beside its link rather than above it. */
.room-shagna .dress-block{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(22px,3.4vw,44px);--pair-x:end;--pair-h:clamp(340px,26vw,400px)}
.room-shagna .guest-pair-button{grid-column:2;grid-row:1}
.room-shagna .attire-link{grid-column:1;grid-row:1}
/* Nothing clips them: their strip is as wide as the room's padding and never hides overflow,
   and it sits on the top decorative layer, above the ground, the wash and the lace frame. */
.room-shagna .gutter{width:max(var(--gutter-w),var(--candle-w));overflow:visible;z-index:3}
.candle{position:absolute;display:block;width:9px;height:9px;border-radius:50%;background:var(--a-amber);box-shadow:0 0 14px 6px #e0a45840;opacity:0;transition:opacity .9s ease}
.candle.on{opacity:1;animation:candle-flicker 4.2s ease-in-out infinite alternate}
/* Each flame's centre, as a share of that margin, held at least 25px in from both its edges:
   on a phone the margin is only just wide enough, so they line up; on a wide screen they
   scatter again, as they always did. */
.gutter-l .candle{left:calc(clamp(25px,var(--cx,50%),calc(100% - 25px)) - 4.5px)}
.gutter-r .candle{right:calc(clamp(25px,var(--cx,50%),calc(100% - 25px)) - 4.5px)}
.gutter-l .candle:nth-child(1){--cx:40%;top:12%}
.gutter-l .candle:nth-child(2){--cx:25%;top:34%}
.gutter-l .candle:nth-child(3){--cx:56%;top:58%}
.gutter-l .candle:nth-child(4){--cx:32%;top:81%}
.gutter-r .candle:nth-child(1){--cx:37%;top:21%}
.gutter-r .candle:nth-child(2){--cx:22%;top:47%}
.gutter-r .candle:nth-child(3){--cx:52%;top:72%}

/* 7 · Anand Kaaraj — the lightest, emptiest room, opening on a pale dawn */
.room-anand{background:var(--g-sky);color:var(--navy);--event-line:#c3d2dd;padding-top:0;text-align:center;--blend:clamp(130px,19vw,210px)}
/* shagna night plum → anand dawn sky (this replaces the old cloud ridge) */
.room-anand>.blend{background:linear-gradient(#2b2028 0%,#372d35 15%,#554d54 30%,#7d7980 45%,#a9a8ad 60%,#cfd1d6 75%,#e8ecf0 90%,#edf2f6 100%)}
/* Morning haze: a very slow wash moved with transform, so it costs the phone nothing.
   The frame clips it, so its drift can never widen the page. */
.haze-frame{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
/* The haze is already a third bright at the very top of this room, which would have shown
   as a faint line where the blend above it ends. This holds it at the room's own sky until
   the blend has finished, then lets it come up — so the two meet on the same flat colour. */
.haze-frame::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--g-sky) 0,var(--g-sky) var(--blend),#edf2f600 calc(var(--blend) * 3))}
.haze{position:absolute;inset:-9%;display:block;background:radial-gradient(ellipse 62% 34% at 14% 20%,#fbfdfe 0%,transparent 62%),radial-gradient(ellipse 54% 38% at 86% 70%,#e0ebf3 0%,transparent 64%);animation:haze-drift 92s ease-in-out infinite alternate}
.room-anand h2,.room-anand .event-copy h2{color:var(--spine)}
.dawn-band{padding:max(clamp(96px,14vw,170px),calc(var(--blend) + var(--blend-air))) 0 clamp(62px,8vw,96px);text-align:center}
.dawn-band>.eyebrow{color:var(--navy)}
.dawn-line{font:clamp(3rem,11vw,4.6rem)/1 var(--serif);letter-spacing:-.03em;margin-top:22px;color:var(--spine)}
.room-anand .event-grid{display:flex;flex-direction:column;align-items:center;gap:clamp(38px,5vw,62px);padding-bottom:clamp(20px,3vw,40px)}
.room-anand .scene{--ar:1/1;--frame-w:min(100%,560px)}
.room-anand .scene figcaption{color:var(--navy);justify-content:center}
.room-anand .event-copy{max-width:600px}
.room-anand .event-line{margin-inline:auto}
.room-anand .event-date{justify-content:center;gap:10px 30px}
.room-anand .dress-block{text-align:left;max-width:520px;margin-inline:auto;--pair-x:center;--pair-h:clamp(340px,24vw,364px)}
.room-anand .attire-link{text-align:left}
/* The four laavan, one pastel each, cut from the painted sprite (4 cells across). */
.laavan{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,2.6vw,30px);margin:32px 0 0}
.laavan i{display:block;flex:none;width:clamp(68px,18.4vw,116px);aspect-ratio:300/440;
  background:var(--laavan-tex) no-repeat;background-size:400% auto;
  background-position:calc(var(--i,0) * 33.3333%) 50%}
.bride-note{font:italic clamp(1.1rem,3.8vw,1.2rem)/1.5 var(--serif);color:var(--spine);margin-top:24px}
.room-anand .flora-frame{top:auto;bottom:0;height:var(--room-bottom)}
.room-anand .corner-flora{top:auto;bottom:-14%;opacity:.5;-webkit-mask-image:linear-gradient(transparent 30%,#000 64%);mask-image:linear-gradient(transparent 30%,#000 64%)}

/* 8 · Reception & Sufi Night — asymmetric, the title cutting across the card's edge */
/* The jewel glows in this room's ground reached its top and bottom edges, which would have
   left a faint line where the blends above and below end. Two flat indigo layers hold the
   ground steady until each blend has finished, then release the glows. */
/* The lantern margins are wider than the other rooms' gutters, because three painted
   lanterns hang in them. The room's own padding widens to match, so they never reach a
   line of text. */
.room-sufi{background:var(--g-indigo);color:var(--paper-ivory);--event-line:#f6f2e93d;--lantern-w:clamp(50px,11.5vw,142px);--blend:clamp(130px,19vw,210px);--blend-out:clamp(110px,16vw,180px);padding-inline:max(var(--gutter-w),var(--lantern-w));background-image:linear-gradient(var(--g-indigo) 0,var(--g-indigo) var(--blend),#34263a00 calc(var(--blend) * 2.5)),linear-gradient(#34263a00 calc(100% - var(--blend-out) * 2.5),var(--g-indigo) calc(100% - var(--blend-out)),var(--g-indigo) 100%);background-repeat:no-repeat}
/* anand dawn sky → the reception's deep plum */
.room-sufi>.blend{background:linear-gradient(#edf2f6 0%,#e2e6eb 15%,#c5c6cd 30%,#9e9ba6 45%,#756e7c 60%,#514657 75%,#392c3f 90%,#34263a 100%)}
.room-sufi .event-grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(30px,4vw,58px);align-items:center}
.room-sufi .scene{--ar:1/1;--frame-w:min(100%,460px)}
.room-sufi .scene figcaption{color:var(--paper-ivory)}
.room-sufi .event-copy{position:relative;z-index:2}
.room-sufi .event-copy h2{font-size:clamp(3rem,7.4vw,5.2rem)}
.room-sufi .eyebrow{color:var(--a-marigold)}
.room-sufi .dress-block{--pair-x:end;--pair-h:clamp(350px,29vw,420px)}
.room-sufi .guest-pair-button{margin-right:clamp(-26px,-1.8vw,-10px)}
.room-sufi .gutter{width:calc(var(--lantern-w) - 4px)}
/* The flowers belong at the foot of this room, not in the corner the lanterns hang in:
   lanterns above, the picture and the words in the middle, flowers closing it. */
.room-sufi .flora-frame{top:auto;bottom:0;left:0;right:auto;height:calc(var(--room-bottom) + 40px)}
/* Bottom left, and mirrored: the dress-code link and its arrow live in the opposite corner,
   and nothing decorative may cross a line of text. */
.room-sufi .corner-flora{top:auto;bottom:-12%;left:-9%;right:auto;opacity:.62;transform:scaleX(-1);transform-origin:12% 88%;
  -webkit-mask-image:linear-gradient(transparent 26%,#000 62%);mask-image:linear-gradient(transparent 26%,#000 62%)}
/* The three painted lanterns, cut from the sprite (3 cells across), each with its own
   soft glow behind it as a second background layer. Uneven by design. */
.lantern{position:absolute;display:block;top:var(--y,10%);width:var(--lw,100%);aspect-ratio:400/650;
  background-image:var(--lantern-tex),radial-gradient(ellipse 48% 42% at 50% 46%,var(--glow) 0%,var(--glow-out) 60%,transparent 78%);
  background-repeat:no-repeat,no-repeat;
  background-size:300% auto,100% 100%;
  background-position:calc(var(--i,0) * 50%) 63.33%,50% 50%;
  animation:lantern-sway 9s ease-in-out infinite alternate;transform-origin:50% -60%}
/* A thread up to the top of the room, so each lantern hangs from something. */
.lantern::before{content:'';position:absolute;left:50%;bottom:100%;width:1px;height:300px;background:linear-gradient(#b08d5700,#b08d577a)}
.lantern-emerald{--i:0;--lw:100%;--y:6%;--glow:#2fb08c52;--glow-out:#2fb08c00;left:0}
.lantern-fuchsia{--i:2;--lw:82%;--y:71%;--glow:#e0397d4a;--glow-out:#e0397d00;left:4%;animation-delay:-4.5s}
.lantern-cobalt{--i:1;--lw:92%;--y:33%;--glow:#3a76d44a;--glow-out:#3a76d400;right:0;animation-delay:-2.5s}

/* ——— 9 · Closing ————————————————————————————————————————————————— */
.room-closing{background:var(--g-maroon);color:var(--paper-ivory);--blend:clamp(110px,16vw,180px)}
/* sufi night indigo → closing maroon */
.room-closing>.blend{background:linear-gradient(#34263a 0%,#362539 15%,#3d2335 30%,#451f30 45%,#4e1c2a 60%,#561826 75%,#5b1623 90%,#5c1622 100%)}
.room-closing h2,.room-closing h3{color:var(--paper-ivory)}
.closing-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,88px);align-items:center}
.couple-photo{--frame-w:min(100%,460px);margin-inline:auto}
.couple-photo img{position:relative;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 60%;box-shadow:0 0 0 4px #f3ede1,0 0 0 5px #cdbd9c,0 0 0 7px #f3ede1,0 0 0 8px #e0d4bc}
.closing-copy>.eyebrow{margin-bottom:22px;color:var(--ivory-soft)}
.closing-copy h2{font-size:clamp(2.8rem,8vw,4.4rem)}
.closing-copy>p:not(.eyebrow):not(.signature){font:clamp(1.2rem,4vw,1.35rem)/1.55 var(--serif);margin-top:20px;color:var(--paper-ivory)}
.signature{font:italic 1.15rem/1.5 var(--serif);margin-top:30px;color:var(--ivory-soft)}
.signature span{display:block;font-size:1.9rem;margin-top:6px;color:var(--paper-ivory)}
.room-closing .flourish{color:var(--gold)}

/* The last room. Its empty space was trimmed in round E and the page now ends on the
   flowers: there is no footer under them and no maroon below. */
.wishes{text-align:center;padding-top:clamp(26px,4vw,48px);padding-bottom:0;overflow:hidden}
.wish-card{position:relative;z-index:1;max-width:min(100%,720px);margin-inline:auto;padding:0;color:var(--navy)}
/* The note sits in exactly the mount the pictures use — scalloped ivory, lace perforation,
   embossed rule — standing on the maroon, like the couple's photograph above it. The full-width
   ivory band with bevelled edges that stood here before is gone; this is the owner's later call. */
.wish-frame{--frame-w:100%;--r:5px;--mat:clamp(16px,3.2vw,26px);margin-inline:auto}
/* The paper inside the mount is the picture's window: same beaded edge, text instead of an image. */
.wish-frame .wish-inner{container-type:inline-size;background-color:var(--g-ivory);background-image:var(--paper-tex);background-size:380px auto;background-blend-mode:multiply;
  padding:clamp(26px,5vw,44px) clamp(20px,4vw,38px) clamp(30px,5vw,46px);
  box-shadow:0 0 0 4px #f3ede1,0 0 0 5px #cdbd9c,0 0 0 7px #f3ede1,0 0 0 8px #e0d4bc}
.wish-card .eyebrow{color:var(--navy)}
.wish-card h2{font-size:clamp(2.7rem,9vw,4rem);color:var(--spine);margin-top:16px}
/* "Send a little love." on one line — sized like the event titles (5.852em + headroom). */
#wishes-title{font-size:min(clamp(2.7rem,9vw,4rem),calc(100cqw / 5.94))}
.wish-card .flourish{margin-top:20px}
.wish-card .section-intro{color:var(--navy);margin-top:22px;font-size:clamp(1.15rem,3.8vw,1.3rem)}
.wish-seal{position:relative;top:auto;left:auto;transform:none;display:grid;place-items:center;margin:34px auto 0;width:92px;height:92px;padding:0;border-radius:50%;background:transparent;box-shadow:none;color:var(--spine)}
.wish-seal img{display:block;width:100%;height:100%;object-fit:contain}
.seal-caption{font-size:12px;letter-spacing:.19em;margin-top:20px;color:var(--navy)}
.wishes-signoff{font:italic clamp(1.6rem,5.4vw,2rem)/1.2 var(--serif);margin:clamp(32px,4.6vw,52px) 0 0;color:var(--paper-ivory);position:relative;z-index:1}
/* Edge to edge and flush on the floor of the page: the negative margin cancels the room's
   own side padding, and the room has no padding under it, so no maroon shows beneath. */
.floral-bed{position:relative;z-index:0;margin:clamp(18px,2.6vw,30px) calc(var(--gutter-w) * -1) 0;overflow:hidden;display:flex}
.floral-bed img{width:100%;max-width:none;height:auto;opacity:.55;flex:none}

/* ——— Dialogs, music, shared controls ————————————————————————————— */
.eyebrow{font-size:12px}
.text-link{font-size:14px}
dialog{background-color:var(--g-ivory);background-image:var(--paper-tex);background-size:420px auto;background-blend-mode:multiply;color:var(--navy);border:1px solid #b08d5788}
dialog::backdrop{background:#2b101ad4}
dialog h2,dialog h3{color:var(--spine)}
dialog p:not(.eyebrow){color:var(--navy)}
.dialog-top>.eyebrow{color:var(--navy)}
.attire-tabs{border-bottom:1px solid #b08d5759}
.attire-tabs button{color:var(--navy)}
.attire-tabs button[aria-selected=true]{color:var(--spine)}
.attire-guidance,.attire-footnote,.attire-description{color:var(--navy)}
.primary-button{background:var(--spine);color:var(--paper-ivory);box-shadow:none}
#wishes-form{background-color:var(--g-ivory);background-image:var(--paper-tex);background-size:380px auto;background-blend-mode:multiply;box-shadow:none;border:1px solid #b08d5759}
#wishes-form input,#wishes-form textarea{border-bottom:1px solid #b08d5788;color:var(--navy)}
.form-privacy,#wishes-form label{color:var(--navy)}
#wish-error{color:#8d2233}
.sound-control{background:var(--spine);color:var(--paper-ivory);box-shadow:none;border:0}

/* ——— Motion ————————————————————————————————————————————————————— */
@keyframes flora-sway{from{rotate:-1deg}to{rotate:1.7deg}}
@keyframes petal-fall{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(9px,44px) rotate(120deg)}100%{transform:translate(-4px,88px) rotate(220deg)}}
@keyframes candle-flicker{0%{opacity:.55;transform:scale(.94)}35%{opacity:1;transform:scale(1.06)}70%{opacity:.72;transform:scale(.98)}100%{opacity:.95;transform:scale(1.04)}}
@keyframes lantern-sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.7deg)}}
@keyframes leaf-drift{from{transform:translate(-9px,-5px) rotate(-7deg)}to{transform:translate(9px,6px) rotate(9deg)}}
@keyframes haze-drift{from{transform:translate3d(-1.4%,-1%,0)}to{transform:translate3d(1.8%,1.4%,0)}}
.motion-off .corner-flora,.motion-off .petal,.motion-off .candle,.motion-off .lantern,.motion-off .leaf-drift svg,.motion-off .haze{animation:none!important}
.motion-off .dtrack{transition:none}
.offstage *,.offstage *::before,.offstage *::after{animation-play-state:paused!important}
.motion-off .candle,.motion-off .petal,.motion-off .lantern{opacity:.6}

/* ——— Narrow phones ————————————————————————————————————————————— */
@media(min-width:701px){
  /* The wide painting keeps the same sky-to-arch continuity on desktop. */
  .dusk-art{background-image:url('assets/v4/announcement-dusk-tall-wide.webp');background-position:50% bottom}
  /* The wide painting carries less sky than the portrait, so the room gives the copy more
     room to finish before the ridges come up. */
  .room-announcement{--art-extra:clamp(300px,32svh,440px)}
}
@media(min-width:651px){
  /* The countdown type steps up here, so the door it has to fit inside grows with it. */
  .room-announcement{--cd-h:267px}
}
@media(max-width:360px){.event-date{flex-wrap:wrap;white-space:normal}}
@media(min-width:851px){
  /* On a wide screen the room's title sits up beside the corner, so the spray keeps to a
     smaller, higher band and stays out of the words. */
  .flora-frame{width:min(30%,264px);height:clamp(132px,calc(var(--room-top) + 18px),172px)}
}
@media(max-width:850px){
  /* The reception used to give 50px of each side to three small lanterns, which left the
     picture, the words and the flowers fighting over what was left — the squeezed look. The
     lanterns now hang across the head of the room, at different depths, and the room gets its
     ordinary reading width back. */
  .room-sufi{padding-inline:var(--gutter-w);padding-top:calc(var(--room-top) + 132px)}
  /* On a narrow screen the three lanterns carry this room on their own. The flower spray has
     nowhere to sit that is not on top of the dress-code line, so it stays on wider screens. */
  .room-sufi .flora-frame{display:none}
  .room-sufi .gutter{top:0;bottom:auto;left:0;right:0;width:auto;height:calc(var(--room-top) + 150px);overflow:visible}
  .room-sufi .lantern{width:var(--lw-top);top:var(--y-top)}
  .room-sufi .lantern::before{height:var(--y-top)}
  .room-sufi .lantern-emerald{left:7%;right:auto;--lw-top:56px;--y-top:34px}
  .room-sufi .lantern-fuchsia{left:41%;right:auto;--lw-top:46px;--y-top:112px}
  .room-sufi .lantern-cobalt{right:9%;left:auto;--lw-top:52px;--y-top:58px}
  .location-card{grid-template-columns:1fr;gap:24px}
  .closing-grid{grid-template-columns:1fr;gap:38px}
  .room-gulab .event-grid,.room-sufi .event-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  /* Date on the left, time on the right, one line — as every other event reads. Below 360px
     there is genuinely no room for both, so there they stack rather than shrink further. */
  .room-arrival::after{inset:14px 14px 42px}
  .location{padding-block:46px}
  .location-card{padding:16px 16px 22px}
  .room-gulab .event-grid{display:flex;flex-direction:column;gap:30px}
  .room-sufi .event-grid{display:flex;flex-direction:column;gap:0}
  .room-sufi .event-grid{gap:34px}
  .scene figcaption{letter-spacing:.15em;gap:10px}
  .scene figcaption::before,.scene figcaption::after{width:14px}
  .room-sufi .event-copy>.eyebrow{margin-bottom:14px}
  .dress-block,.room-shagna .dress-block{grid-template-columns:1fr;gap:10px}
  .guest-pair-button,.room-shagna .guest-pair-button{grid-column:auto;grid-row:auto;justify-self:center;margin:0!important}
  .guest-pair{--pair-h:300px;height:300px}
  .room-shagna .attire-link{grid-column:auto;grid-row:auto}
  .laavan svg{width:28px;height:28px}
}
@media(max-width:400px){
  .countdown-clock{gap:12px}
  .colour-index{gap:10px 20px}
  .colour-index>span{font-size:.98rem}
}