/* Shruti & David · celebrations. One painted scroll, designed screen by screen. Rules: ../DESIGN-GUARDRAILS.md */
:root{
  --tone:#FFFDF8;           /* tint multiplied over the paper texture; shifts from event to event */
  --paper:#F7F2E9;
  --ink:#214D74;            /* deep indigo-blue ink for names, headings and lines */
  --ink-2:#5A676A;
  --gold:#97681A;
  --sindoor:#B8402F;
  --f-disp:"Cormorant Garamond",Garamond,Georgia,serif;
  --f-cap:"Cinzel","Trajan Pro",Georgia,serif;
  --f-ui:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-deva:"Tiro Devanagari Hindi","Kohinoor Devanagari",serif;
  --screen:100vh;
  --ar:.5625;               /* a main painting's width / height (9:16); a section can override it */
  --crop:0;                 /* on desktop, how much of a painting's empty sky to leave out, so the painting itself can be bigger */
  /* one size per role, everywhere: date, heading, Hindi line, English line */
  --t-when:clamp(13px,.2vw + 12.5px,15px);
  --t-h2:clamp(40px,1.2vw + 36px,56px);
  --t-hi:clamp(19px,.3vw + 17.5px,24px);
  --t-line:clamp(17px,.35vw + 15.5px,22px);
}
@supports (height:100svh){:root{--screen:100svh}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-snap-type:y mandatory;background:var(--tone,#FFFDF8)}
body{margin:0;color:var(--ink);font:16px/1.6 var(--f-ui);-webkit-font-smoothing:antialiased;
  background:var(--tone) url(assets/img/paper.webp) repeat;background-size:620px 620px;background-blend-mode:multiply;transition:background-color 1.4s ease}
img{max-width:100%;height:auto;display:block}
h1,h2,p,figure{margin:0}
h1,h2{font-weight:500}
:focus-visible{outline:2px solid var(--sindoor);outline-offset:3px}
html:not(.es) .es,html.es .en{display:none}

/* header: only the language toggle, floating top right */
.bar{position:fixed;top:0;right:0;z-index:30;padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 0;pointer-events:none}
.lang{pointer-events:auto;display:inline-flex;border:1px solid rgba(30,54,64,.22);border-radius:999px;padding:2px;
  background:rgba(255,253,248,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .6s,border-color .6s}
/* ENG | ESP (Shruti, 21 Oct): smaller and quieter than the full words, no flags; the chosen language is the filled one */
.lang button{font:600 12px/1 var(--f-ui);letter-spacing:.14em;padding:0 13px;min-height:36px;min-width:52px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
html.dark .lang{background:rgba(20,26,61,.55);border-color:rgba(246,233,215,.28)}
html.dark .lang button{color:#E8DCC8}
html.dark .lang button[aria-pressed="true"]{background:#F2E6D4;color:#141A3D}

/* opening: toran, names with the halo, blessing; one full screen */
.opening{position:relative;min-height:var(--screen);display:grid;grid-template-rows:auto 1fr;justify-items:center;text-align:center}
.toran{position:relative;z-index:2;width:100%;--tw:max(100vw,640px);height:calc(var(--tw) / 5.004);overflow:hidden;pointer-events:none}
.toran-row{position:absolute;top:0;left:50%;width:var(--tw);height:100%;transform:translateX(-50%)}
.toran-row span{position:absolute;top:0;height:100%;background-image:url(assets/img/toran.webp);background-repeat:no-repeat;background-size:var(--tw) 100%;
  animation:sway 4.4s ease-in-out var(--delay,0s) infinite alternate;will-change:transform}
@keyframes sway{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
.opening-copy{align-self:center;display:grid;gap:14px;justify-items:center;padding:0 20px 9vh}
.eyebrow{font:500 14px/1.5 var(--f-cap);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.names{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(6px,1.5vw,18px);width:min(100%,900px);
  font:italic 600 clamp(46px,10.5vw,104px)/.9 var(--f-disp);letter-spacing:-.01em}
.names > span:first-child{justify-self:end}
.names > span:last-child{justify-self:start}
.names-shell{width:clamp(64px,15vw,150px);height:auto;transform:translateY(-3%)}
/* the names, painted: one watercolour wash fills both names, and pigment pools at the rim of each letter (SVG filter #wc-letter in the page).
   Chosen 17 Oct: wash-indigo. Saved alternatives, switch the class on h1.names: wash-holi (warm holi) · wash-festive (sindoor into marigold)
   · wash-gold · no wash class = flat ink. Previews: ../art/names-options/ */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .names.wash > span{filter:url(#wc-letter)}
  .names.wash > span > i{font-style:inherit;background:var(--wash) center/100% 100%;-webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;padding:0 .06em .08em}
}
.wash-indigo{--wash:url(assets/img/wash-indigo.webp)}
.wash-holi{--wash:url(assets/img/wash-holi-warm.webp)}
.wash-festive{--wash:url(assets/img/wash-festive.webp)}
.wash-gold{--wash:url(assets/img/wash-gold.webp)}
/* the dot sits exactly under the shell; the two blessings balance either side of it */
.blessing{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:clamp(16px,2vw,24px);align-items:baseline;width:min(100%,900px);
  font:400 clamp(19px,2.6vw,25px)/1.35 var(--f-deva);color:var(--sindoor)}
.blessing > :first-child{justify-self:end;white-space:nowrap;font-size:.88em}
.blessing > :last-child{justify-self:start;white-space:nowrap;font-size:.84em}
.blessing .sep{color:var(--gold)}

/* type: the same four sizes in every section */
.when{font:500 var(--t-when)/1.45 var(--f-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.words h2,.words-d h2{font:italic 600 var(--t-h2)/.95 var(--f-disp);letter-spacing:-.005em;margin-top:.04em;text-wrap:balance}
.hi{font:400 var(--t-hi)/1.35 var(--f-deva);color:var(--sindoor)}
.line{font:italic 500 var(--t-line)/1.42 var(--f-disp);color:var(--ink);text-wrap:balance}

/* a main painting: one full phone screen, its words lettered into its open sky */
.plate{position:relative;height:var(--screen);width:min(100%,calc(var(--screen) * var(--ar)));margin:0 auto;overflow:hidden;container-type:inline-size}
.plate .art{position:absolute;top:0;left:50%;height:100%;width:auto;aspect-ratio:var(--ar);transform:translateX(-50%)}
.plate .art > img:first-child{width:100%;height:100%}
.apex{position:absolute;left:50.1%;top:35.9%;width:10.6%;height:auto;transform:translate(-50%,-50%);mix-blend-mode:multiply}
.words{position:absolute;z-index:3;top:var(--y);left:var(--x,auto);right:var(--rx,auto);width:var(--w,auto);display:grid;gap:.3em;justify-items:start;text-align:left;
  --glow:rgba(255,253,248,.92);text-shadow:0 0 14px var(--glow),0 0 4px var(--glow)}
.words[data-align="right"]{left:auto;right:var(--x);justify-items:end;text-align:right}
.words[data-align="center"]{justify-items:center;text-align:center}
.words .line{max-width:28ch;margin-top:.15em}
/* where a painting is busy behind the words, the paper is left a little lighter, as a painter would before lettering */
.words.clearing{isolation:isolate}
.words.clearing::before{content:"";position:absolute;inset:-14% -12% -16% -16%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--clear,rgba(255,248,232,.86)) 58%,transparent);filter:blur(6px)}

/* a board: smaller paintings and a line placed on the paper, one screen */
.board{position:relative;height:var(--screen);container-type:inline-size;overflow:clip}
.board > *{position:absolute;left:var(--x,auto);right:var(--rx,auto);top:var(--y);width:var(--w,auto);rotate:var(--r,0deg)}
.board > [data-align="right"]{text-align:right}
.board > [data-align="center"]{text-align:center}
.vig img{width:100%}

/* desktop: beside the main painting, its words nested among small things from the same ceremony */
.details{position:relative;height:var(--ph,100vh)}
.details > *{position:absolute;left:var(--dx,auto);right:var(--drx,auto);top:var(--dy,auto);bottom:var(--dby,auto);width:var(--dw,auto);rotate:var(--r,0deg)}
.details .item,.details .vignette{height:var(--dh,auto);width:var(--dw,auto);max-width:100%;object-fit:contain}
.words-d{display:grid;gap:.35em;justify-items:start;text-align:left}
/* italic capitals lean right; pull a left-set heading back a hair so it lines up by eye with the upright lines under it */
.words-d h2,.words:not([data-align]) h2{margin-left:-.035em}
.words-d .line{max-width:46ch;margin-top:.3em}

/* a panorama (haldi on desktop): one wide painting across the spread, the words in the paper it melts into at the top */
.panorama{position:relative;margin:0 auto;width:min(100%,calc(var(--ph,100vh) * 1.79));aspect-ratio:1800/1005}
.panorama > img{width:100%;height:auto}
.panorama > header,.panorama > .line{position:absolute;left:var(--dx,auto);right:var(--drx,auto);top:var(--dy,auto);width:var(--dw,auto)}
.panorama .line{text-align:right}

/* the after-party: the lights go down */
.event.dark .words{--glow:rgba(20,26,61,.9);color:#F6E9D7}
.event.dark .words-d{color:#F6E9D7}
.event.dark .when{color:#E2B86A}
.event.dark .hi{color:#F4A58E}
.event.dark .line{color:#F6E9D7}

/* closing: reply, save the dates, and the rest of the site */
.closing{min-height:var(--screen);display:grid;justify-items:center;align-content:center;gap:clamp(10px,1.8vh,18px);padding:7vh 20px 4vh;text-align:center}
.closing .halo{width:clamp(80px,11vw,132px);height:auto}
.closing-title{font:italic 600 clamp(28px,.9vw + 24px,40px)/1.1 var(--f-disp);color:var(--ink);text-wrap:balance;margin-top:-2px}
.closing-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:stretch;margin-top:6px}
.btn{font:500 13px/1 var(--f-cap);letter-spacing:.2em;text-transform:uppercase;padding:15px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:2px;cursor:pointer}
.btn:hover{background:var(--sindoor);border-color:var(--sindoor)}
.btn-rsvp{background:var(--sindoor);border-color:var(--sindoor);display:inline-grid;gap:5px;justify-items:center;align-content:center;padding:11px 30px;cursor:default}
.btn-rsvp small{font:500 13px/1 var(--f-ui);letter-spacing:.06em;text-transform:none;opacity:.92}
.btn-quiet{background:transparent;color:var(--ink)}
.btn-quiet:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);width:min(100%,820px);margin-top:clamp(22px,5vh,52px)}
.more-item{display:grid;grid-template-rows:auto auto 1fr auto;gap:3px;justify-items:center}   /* 'Coming soon' lines up across the columns */
.more-t{font:italic 600 clamp(22px,.5vw + 20px,28px)/1.1 var(--f-disp);color:var(--ink)}
.more-item .hi{font-size:clamp(17px,.2vw + 16px,19px)}
.more-s{font:italic 500 clamp(15.5px,.15vw + 14.5px,17px)/1.35 var(--f-disp);color:var(--ink-2);max-width:24ch;text-wrap:balance}
.soon{font:500 13px/1 var(--f-cap);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.made{font:400 12px/1.5 var(--f-ui);color:var(--ink-2);margin-top:clamp(18px,5vh,48px);letter-spacing:.02em}

/* petals */
.petal{position:fixed;top:-60px;z-index:25;pointer-events:none;will-change:transform;width:var(--s)}

/* a painting blooming in like a wash on wet paper */
.blooming{-webkit-mask-image:radial-gradient(ellipse 80% 75% at var(--bx,50%) var(--by,62%),#000 calc(var(--r,0%) - 22%),transparent var(--r,0%));
  mask-image:radial-gradient(ellipse 80% 75% at var(--bx,50%) var(--by,62%),#000 calc(var(--r,0%) - 22%),transparent var(--r,0%))}

/* phones and portrait tablets: every scroll stop is one full screen, words inside the painting */
@media (max-width:699px),(max-aspect-ratio:1/1){
  .opening,.plate,.board,.closing{scroll-snap-align:start;scroll-snap-stop:always}
  .plate .words[data-align]{top:max(var(--y),calc(env(safe-area-inset-top,0px) + 50px))}   /* centred or right-set words clear the (now smaller) language toggle */
  .d-only,.details{display:none !important}
  .more{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* desktop: each event is a spread; the main painting takes the main space, its words sit beside it among small things */
@media (min-width:700px) and (min-aspect-ratio:1/1){
  :root{--ph:min(92vh,1060px)}
  .m-only{display:none !important}
  .opening,.event,.closing{scroll-snap-align:start;scroll-snap-stop:always}
  .event{--pw:calc(var(--ph) * var(--ar) / (1 - var(--crop)));
    display:grid;grid-template-columns:var(--pw) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;
    width:min(100% - 8vw,1320px);margin:0 auto;min-height:100vh;padding:4vh 0}
  .event.flip{grid-template-columns:minmax(0,1fr) var(--pw)}
  .event.flip .plate{order:2}
  .event.flip > :not(.plate){order:1}
  .event.panorama-event{display:flex;justify-content:center}
  .plate{height:var(--ph);width:var(--pw);margin:0}
  /* the empty sky above a painting isn't needed here (the words sit beside it), so it is left out and the painting grows */
  .plate .art{left:0;transform:none;height:calc(100% / (1 - var(--crop)));top:calc(-100% * var(--crop) / (1 - var(--crop)))}
  .board{height:var(--ph)}
  .board > *{left:var(--dx,var(--x,auto));right:var(--drx,var(--rx,auto));top:var(--dy,var(--y));width:var(--dw,var(--w,auto))}
  .board > .vig[style*="--dh"]{height:var(--dh);width:auto}
  .board > .vig[style*="--dh"] img{height:100%;width:auto;max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .toran-row span{animation:none}
  body{transition:none}
}

/* ---------- Wardrobe page (and other reading pages): normal scrolling, a back link top-left ---------- */
html.reading{scroll-snap-type:none}
.back{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:14px;z-index:30;display:inline-flex;align-items:center;min-height:46px;box-sizing:border-box;font:500 15px/1 var(--f-ui);letter-spacing:.02em;color:var(--ink);text-decoration:none;
  padding:0 18px;border:1px solid rgba(30,54,64,.22);border-radius:999px;background:rgba(255,253,248,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.back:hover{background:var(--ink);color:var(--paper)}
.w-page{padding-bottom:4vh}
.w-hero{display:grid;justify-items:center;text-align:center;gap:10px;max-width:780px;margin:0 auto;padding:clamp(10px,3vh,32px) 20px 0}
.w-title{font:italic 600 clamp(56px,5vw + 30px,104px)/.95 var(--f-disp);color:var(--ink);letter-spacing:-.005em}
.w-intro{display:grid;gap:14px;margin-top:clamp(16px,3.5vh,34px)}
.w-intro p{font:500 clamp(20px,.3vw + 19px,23px)/1.55 var(--f-disp);color:var(--ink);text-wrap:pretty}
.w-h2{font:italic 600 clamp(38px,1.6vw + 31px,58px)/1 var(--f-disp);color:var(--ink)}
.w-matters{max-width:980px;margin:clamp(56px,10vh,110px) auto 0;padding:0 20px;display:grid;gap:clamp(16px,3vh,28px)}
.w-matters .w-h2{text-align:center;margin-bottom:clamp(4px,1.5vh,14px)}
.w-matter{display:grid;grid-template-columns:clamp(84px,11vw,150px) minmax(0,1fr);gap:clamp(14px,3vw,36px);align-items:center}
.w-obj-s{width:100%;height:auto;mix-blend-mode:multiply}
.w-matter p,.w-text p:not(.when),.w-text li,.w-glossary p,.w-glossary dd{font:500 clamp(19.5px,.25vw + 18.5px,22px)/1.6 var(--f-disp);color:var(--ink);text-wrap:pretty}
.w-matter strong{font-weight:600}
.w-event{max-width:1080px;margin:clamp(64px,12vh,130px) auto 0;padding:0 20px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,4vw,64px);align-items:center}
.w-event.flip{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.w-event.flip .w-obj{order:-1}
.w-text{display:grid;gap:12px;justify-items:start}
.w-text p{max-width:58ch}
.w-text ul{margin:0;padding-left:1.1em;display:grid;gap:6px;max-width:58ch}
.w-obj{width:100%;max-width:330px;height:auto;justify-self:center;mix-blend-mode:multiply}
.w-colours{display:grid;gap:6px;margin-top:4px}
.w-cl{font:500 13px/1.6 var(--f-cap) !important;letter-spacing:.12em;text-transform:uppercase;color:var(--gold) !important;font-style:normal !important}
.dabs{display:flex;flex-wrap:wrap}
.dabs img{width:clamp(54px,5.5vw,74px);height:auto;margin-right:-12px;mix-blend-mode:multiply}
.w-ideas{font:500 10.5px/1 var(--f-cap);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);border:1px dashed rgba(30,54,64,.35);border-radius:999px;padding:9px 14px;margin-top:4px}
.w-glossary{max-width:1080px;margin:clamp(72px,13vh,140px) auto 0;padding:0 20px;display:grid;gap:12px}
.w-glossary dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 22px;margin:8px 0 6px}
.w-glossary dt{font:italic 600 clamp(19px,.4vw + 17px,23px)/1.55 var(--f-disp);color:var(--ink)}
.w-glossary dd{margin:0}
.w-end{display:grid;justify-items:center;text-align:center;gap:14px;margin:clamp(72px,13vh,140px) auto 0;padding:0 20px}
.w-end .halo{width:clamp(90px,10vw,130px);height:auto}
.w-close{font:italic 600 clamp(26px,1vw + 22px,38px)/1.25 var(--f-disp);color:var(--ink);max-width:26ch;text-wrap:balance}
.w-end .made{margin-top:clamp(10px,3vh,30px)}
@media (max-width:699px),(max-aspect-ratio:1/1){
  .w-event,.w-event.flip{grid-template-columns:minmax(0,1fr);gap:10px}
  .w-event .w-obj,.w-event.flip .w-obj{order:-1;max-width:210px}
  .w-matter{grid-template-columns:74px minmax(0,1fr)}
  .w-glossary dl{grid-template-columns:minmax(0,1fr);gap:0}
  .w-glossary dd{margin-bottom:8px}
}
/* the home page's link to the Wardrobe page */
a.more-item{color:inherit;text-decoration:none;border-radius:4px;transition:transform .3s ease}
a.more-item:hover{transform:translateY(-2px)}
a.more-item .soon{color:var(--sindoor)}
/* phones: the closing (with its larger, easier text) still fits one screen */
@media (max-width:699px),(max-aspect-ratio:1/1){
  .closing{padding-top:4.5vh}
  .closing .halo{width:72px}
}
/* Wardrobe: the first "thing that matters" leads the list, centred under its heading; the wedding's colours in one italic line */
.w-lead{justify-self:center;text-align:center;max-width:60ch;margin:0 auto clamp(6px,1.5vh,14px);font:500 clamp(19.5px,.25vw + 18.5px,22px)/1.6 var(--f-disp);color:var(--ink);text-wrap:pretty}
.w-lead strong{font-weight:600}
.w-text p.w-tones{font-style:italic}
/* Visiting India: one centred reading column with left-aligned headings; links underlined; a clear button where we send people to another page */
.v-sec{max-width:1080px;margin:clamp(56px,9vh,100px) auto 0;padding:0 20px;display:grid;gap:12px;justify-items:start}
.v-sec > *{max-width:60ch}
.v-sec p,.v-sec li{font:500 clamp(19.5px,.25vw + 18.5px,22px)/1.6 var(--f-disp);color:var(--ink);text-wrap:pretty}
.v-sec ul,.v-clothes ul{margin:0;padding-left:1.1em;display:grid;gap:8px}
.v-sec a:not(.btn),.w-text a:not(.btn){color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
.v-clothes strong,.v-sec strong{font-weight:600}
.v-go{margin-top:6px}
.w-go{margin-top:10px}
/* the Wardrobe's closing line: two sentences, one per line */
.w-close.two{max-width:none;text-wrap:balance}
.w-close.two span span{display:block}
.v-ev{margin-top:clamp(64px,11vh,120px)}
.v-ev .w-text .w-h2,.v-clothes .w-text .w-h2{margin-bottom:2px}
/* home page cards that open a page: the title underlines and the card lifts a little on hover; on touch screens, with no hover, the title stays underlined */
a.more-item:hover .more-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (hover:none){ a.more-item .more-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px} }
.v-sec ol{margin:0;padding-left:1.3em;display:grid;gap:8px}
/* Visiting India: a small note after a list, and subheadings inside a section */
.v-sec p.v-note{font-size:clamp(16.5px,.15vw + 16px,18px);color:var(--ink-2);margin-top:2px}
.v-h3{font:italic 600 clamp(23px,.5vw + 21px,28px)/1.2 var(--f-disp);color:var(--ink);margin-top:14px;margin-bottom:-6px}
/* FAQs: every answer visible, question then answer, one calm column */
.faqs{gap:clamp(22px,3.5vh,34px)}
.faq{display:grid;gap:2px}
.faq-q{font:italic 600 clamp(23px,.5vw + 21px,28px)/1.25 var(--f-disp);color:var(--ink)}
.faq a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
/* Visiting India questions: tap a question to open its answer (a plus that turns into a minus) */
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:48px;padding:6px 0;font:italic 600 clamp(22px,.5vw + 20px,27px)/1.25 var(--f-disp);color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';flex:none;font:400 30px/1 var(--f-disp);color:var(--sindoor)}
.qa[open] summary::after{content:'\2212'}
.qa summary:hover > span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.qa p{margin:2px 0 10px}
/* links that take you to another page: words, an arrow, an underline (no box), the same feel as the home page's page links */
.go-link{display:inline-flex;align-items:center;min-height:44px;font:italic 600 clamp(21px,.4vw + 19.5px,25px)/1.2 var(--f-disp);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;transition:transform .25s ease}
.go-link:hover{transform:translateX(3px)}
.sparkles{font-size:30px;letter-spacing:.18em;line-height:1;margin-top:4px}
/* reading pages: one heading size everywhere (the same as the home page's event titles); body text in soft black for easier reading */
.w-h2{font-size:var(--t-h2) !important}
.reading .w-intro p,.reading .w-text p:not(.when),.reading .w-text li,.reading .w-matter p,.reading .v-sec p,.reading .v-sec li,.reading .w-glossary p{color:var(--body,#2b2826)}
.reading .v-sec p.v-note{color:#5c5752}
.reading .v-sec a:not(.go-link),.reading .w-text a:not(.go-link){color:var(--ink)}
.v-sec{gap:16px}
.v-sec ul,.v-sec ol,.v-clothes ul{gap:12px}
/* Visiting India: a calmer gap after the intro, and a row of links that jump to each section */
.v-toc{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;max-width:820px;margin-top:clamp(12px,2.5vh,24px)}
.v-toc a{font:500 13px/1 var(--f-cap);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);text-decoration:none;padding:15px 2px;border-bottom:1px solid transparent}
.v-toc a:hover{border-bottom-color:var(--gold)}
.v-hero + .v-ev{margin-top:clamp(26px,5vh,54px)}
.reading{scroll-behavior:smooth}
.v-sec,.v-ev{scroll-margin-top:72px}
@media (prefers-reduced-motion:reduce){.reading{scroll-behavior:auto}}
.w-glossary > p{max-width:60ch}
/* reading pages on laptops and desktops: screen by screen, like the home page. Each .screen is one stop; its content sits in the middle of the screen.
   Short windows (under 640px tall) and phones keep normal scrolling. */
@media (min-width:700px) and (min-aspect-ratio:1/1) and (min-height:640px){
  html.reading{scroll-snap-type:y mandatory}
  .reading .screen{min-height:var(--screen);display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;
    padding:clamp(62px,8.5vh,84px) 0 clamp(24px,4vh,44px)}
  .reading .screen > *{width:100%;margin-top:0}
  .reading .screen > * + *{margin-top:clamp(36px,6.5vh,64px)}
  .reading .screen-first{justify-content:flex-start;padding:0 0 clamp(16px,3vh,32px)}
  .reading .screen-first > * + *{margin-top:0}
  .reading .screen-solo .w-obj{max-width:380px}
  .reading .w-end{gap:10px}
  /* the opening screen holds the toran, the title and the whole intro */
  .reading .w-hero{padding-top:0;gap:6px}
  .reading .w-title{font-size:clamp(48px,2.2vw + 28px,70px)}
  .reading .w-intro{margin-top:8px;gap:8px}
  .reading .w-intro p{font-size:clamp(20px,.25vw + 18.5px,22px);line-height:1.42}
}
/* Visiting India on laptops: wider screens use the whole width. Two sections side by side (.v-cols), or text beside a painting (.v-split).
   On phones everything stacks into one column, in reading order. */
.v-cols,.v-split{max-width:1240px;margin:clamp(56px,9vh,100px) auto 0;padding:0 20px;display:grid;gap:clamp(18px,3vh,28px)}
.v-cols > .v-sec,.v-split > .v-sec{margin:0;padding:0;max-width:none}
.v-colhead{grid-column:1 / -1}
.v-col{display:grid;gap:16px;align-content:start;justify-items:start}
.v-col > *{max-width:60ch}
.v-art{width:100%;height:auto;justify-self:center;mix-blend-mode:multiply}
.v-toc{max-width:1280px;margin-left:auto;margin-right:auto;padding:0 20px;gap:0 16px}
.v-toc a{letter-spacing:.07em}
.screen-first > .v-toc{margin-top:clamp(10px,2vh,20px)}
.v-when{font:500 var(--t-when)/1.4 var(--f-cap);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:2px}
.v-agenda li{list-style:none}
.v-agenda ul{padding-left:0}
@media (min-width:700px) and (min-aspect-ratio:1/1){
  .v-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(36px,4.5vw,80px);align-items:start}
  .v-split{grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);column-gap:clamp(32px,4vw,72px);align-items:center}
  .v-split.three{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.62fr);column-gap:clamp(28px,3vw,56px);align-items:center}
  .v-split.flip{grid-template-columns:minmax(0,.75fr) minmax(0,1.55fr)}
  .v-split.flip .v-art{order:-1}
  .v-split .v-art{max-height:calc(var(--screen) - 170px);width:auto;max-width:100%}
  .v-toc a{white-space:nowrap}
}
@media (max-width:699px),(max-aspect-ratio:1/1){
  .v-art{max-width:320px}
  .v-split .v-art{order:-1}
  .v-toc{gap:0 14px}
}
/* RSVP: one calm column with big fields and buttons, easy on a phone */
html.reading.no-snap{scroll-snap-type:none !important}
.r-form{max-width:700px;margin:clamp(28px,5vh,56px) auto 0;padding:0 20px;display:grid;gap:18px}
.r-preview{font:500 14px/1.4 var(--f-ui);color:var(--sindoor);text-align:center}
.r-step{display:grid;gap:14px;scroll-margin-top:76px}
.r-label{font:600 clamp(22px,.5vw + 20px,26px)/1.3 var(--f-disp);color:var(--ink);padding:0}
.r-input{font:500 20px/1.4 var(--f-ui);color:var(--body,#2b2826);background:rgba(255,253,248,.85);border:1.5px solid rgba(33,77,116,.42);border-radius:12px;padding:13px 16px;min-height:56px;width:100%}
.r-input:focus{outline:2px solid var(--sindoor);outline-offset:2px;border-color:var(--ink)}
.r-note{min-height:120px;resize:vertical}
.r-btn{justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:600 18px/1.2 var(--f-ui);letter-spacing:.02em;cursor:pointer;text-decoration:none}
.r-btn:hover{background:#183a58}
.r-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.r-msg{font:500 18px/1.5 var(--f-ui);color:var(--sindoor)}
.r-sub{font:500 clamp(19.5px,.25vw + 18.5px,21px)/1.55 var(--f-disp);color:#5c5752}
.r-guests{display:grid;gap:16px}
.r-guest,.r-sangeet{border:0;margin:0;padding:0;min-width:0}
.r-guest{display:grid;gap:8px}
.r-name{font:600 clamp(22px,.5vw + 20px,27px)/1.25 var(--f-disp);color:var(--ink);padding:0}
.r-choices{display:flex;flex-wrap:wrap;gap:10px}
.r-pill{position:relative;display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border:1.5px solid rgba(33,77,116,.42);border-radius:999px;font:500 18px/1.2 var(--f-ui);color:var(--ink);cursor:pointer;background:rgba(255,253,248,.7)}
.r-pill input{position:absolute;opacity:0;width:1px;height:1px}
.r-pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.r-pill:has(input:focus-visible){outline:2px solid var(--sindoor);outline-offset:3px}   /* keyboard focus only: after a tap, no red ring */
.r-sangeet{display:grid;gap:10px;margin-top:6px}
.r-dancers{display:grid;gap:6px}
.r-check{display:flex;align-items:center;gap:12px;min-height:48px;font:500 18px/1.3 var(--f-ui);color:var(--ink);cursor:pointer}
.r-check input{width:26px;height:26px;flex:none;accent-color:var(--ink)}
.r-done{gap:16px}
.r-done > div{display:grid;gap:16px}
.r-done p{font:500 clamp(19.5px,.25vw + 18.5px,22px)/1.6 var(--f-disp);color:var(--body,#2b2826)}
.r-cal{background:none;border:0;padding:0;cursor:pointer;justify-self:start}
.r-gifts{font:italic 500 clamp(20px,.4vw + 18.5px,24px)/1.5 var(--f-disp);color:var(--ink);max-width:40ch;text-wrap:balance}
a.btn-rsvp{cursor:pointer;text-decoration:none}
[hidden]{display:none !important}
#r-done:focus{outline:none}
.btn-rsvp > .en,.btn-rsvp > .es{font-size:15px;letter-spacing:.22em}
/* reading pages: the intro spans the same width as the sections below it (Shruti, 19 Oct) */
.w-hero{max-width:980px}
.s-todo{color:var(--sindoor) !important;font-style:italic}
/* Visiting India's two-column and text-beside-painting sections read exactly like the rest of the page */
.v-cols p,.v-cols li,.v-split p,.v-split li{font:500 clamp(19.5px,.25vw + 18.5px,22px)/1.6 var(--f-disp);color:var(--body,#2b2826);text-wrap:pretty}
.v-cols ul,.v-cols ol,.v-split ul,.v-split ol{margin:0;padding-left:1.1em;display:grid;gap:12px}
.v-cols ol,.v-split ol{padding-left:1.3em}
.v-cols strong,.v-split strong{font-weight:600}
.v-cols a:not(.go-link),.v-split a:not(.go-link){color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
.v-cols p.v-note,.v-split p.v-note{font-size:clamp(16.5px,.15vw + 16px,18px);color:#5c5752}
.v-cols .v-when,.v-split .v-when{font:500 var(--t-when)/1.4 var(--f-cap);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.v-colhead{display:grid;gap:16px;justify-items:start}
.v-colhead > p{max-width:60ch}
.v-agenda{display:grid;gap:22px}
.v-agenda .v-when{display:block;margin-bottom:2px}
.v-split.three > .v-col{align-self:start}
.reading .w-hero .hi{margin-top:6px}
@media (min-width:700px) and (min-aspect-ratio:1/1){
  .v-split.wide{grid-template-columns:minmax(0,2.1fr) minmax(0,.7fr)}
}
.v-foot{margin-top:2px}
@media (min-width:700px) and (min-aspect-ratio:1/1){
  .v-split.three.sights > .v-colhead{grid-column:1 / 3}
  .v-split.three.sights > .v-art{grid-column:3;grid-row:1 / span 2;align-self:center}
}
/* RSVP: each step lands clear of the buttons at the top; long labels balance over two lines */
.r-step{scroll-margin-top:104px}
.r-label{text-wrap:balance}
/* reading pages on phones: once you scroll, a soft band of paper sits behind the Home and language buttons, so text never peeks around them */
@media (max-width:699px),(max-aspect-ratio:1/1){
  .reading body::before{content:'';position:fixed;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 80px);
    background:var(--tone) url(assets/img/paper.webp) repeat;background-size:620px 620px;background-blend-mode:multiply;
    -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);z-index:25;pointer-events:none;opacity:0;transition:opacity .3s}
  .reading.scrolled body::before{opacity:1}
}
/* the after-party painting melts into the dark page, with no visible edge */
/* (the after-party painting's own edges now run out raggedly into the dark page: assets/paint/afterparty-edged.webp) */
/* RSVP on a laptop scrolls normally, so the soft band behind the top buttons shows there too once you scroll */
@media (min-width:700px) and (min-aspect-ratio:1/1){
  .reading.no-snap body::before{content:'';position:fixed;left:0;right:0;top:0;height:84px;background:var(--tone) url(assets/img/paper.webp) repeat;background-size:620px 620px;background-blend-mode:multiply;
    -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);z-index:25;pointer-events:none;opacity:0;transition:opacity .3s}
  .reading.no-snap.scrolled body::before{opacity:1}
}
/* Visiting India scrolls normally (Shruti, 19 Oct): two layouts only. Sections follow each other with one even gap;
   the parts of the Indian-outfits block sit closer together; "Getting here" starts right under the menu. */
.v-toc + .v-cols,.v-toc + .v-split{margin-top:clamp(28px,4.5vh,48px)}
.v-cols.v-sub,.v-split.v-sub{margin-top:clamp(28px,4.5vh,44px)}
.v-cols,.v-split{scroll-margin-top:76px}
/* the questions: every plus/minus lines up on the same edge */
.v-col > details.qa{justify-self:stretch;max-width:none;width:100%}
/* one size per kind of text: notes read at body size (in grey); questions match the other subheadings */
.v-cols p.v-note,.v-split p.v-note{font-size:clamp(19.5px,.25vw + 18.5px,22px)}
.v-cols .qa summary,.v-split .qa summary{font-size:clamp(23px,.5vw + 21px,28px)}
/* Wardrobe and Visiting India scroll normally, with ONE even gap between every section (Shruti, 19 Oct) */
:root{--gap-section:clamp(64px,10vh,104px)}
.w-matters,.w-event,.w-glossary,.w-end,.v-cols,.v-split{margin-top:var(--gap-section)}
.reading.no-snap .screen{min-height:0;display:block;padding:0}
.reading.no-snap .screen > *{margin-top:var(--gap-section)}
.reading.no-snap .screen-first > *{margin-top:0}
.v-toc + .v-cols,.v-toc + .v-split{margin-top:clamp(28px,4.5vh,48px)}
.v-cols.v-sub,.v-split.v-sub{margin-top:clamp(28px,4.5vh,44px)}
.w-page{padding-bottom:clamp(40px,6vh,64px)}
.r-email{display:grid;gap:10px}
.v-cols ul.v-agenda,.v-split ul.v-agenda{padding-left:0}
.r-done p{text-wrap:pretty}
.v-colhead.v-foot > p{max-width:none}
/* the after-party sits on the same cream paper as every evening (Shruti, 19 Oct). On phones its words sit in the painting's dark sky, so they stay light */
@media (max-width:699px),(max-aspect-ratio:1/1){
  .night-art .words{--glow:rgba(20,26,61,.9);color:#F6E9D7}
  .night-art .words .when{color:#E2B86A}
  .night-art .words .hi{color:#F4A58E}
  .night-art .words .line{color:#F6E9D7}
}
/* Wardrobe: bigger sparkles under the Sangeet; "New to Indian clothes?" and the ending sit together on one screen */
.sparkles{font-size:46px;letter-spacing:.14em}
.reading.no-snap .screen-last > .w-end{margin-top:clamp(20px,3vh,32px)}
.w-end .made{margin-top:clamp(4px,1vh,10px)}
/* Visiting India: the same generous margins as the Wardrobe page (content 1040px wide on a laptop), so the page breathes (Shruti, 19 Oct) */
.v-cols,.v-split{max-width:1080px}
.v-toc{max-width:1180px}
.w-text p.sparkles{font-size:46px;line-height:1.1;letter-spacing:.14em}
/* dates never wrap; questions wrap in balanced lines; the shared Shoes note keeps a readable measure */
.when,.v-when{white-space:nowrap}
.qa summary > span{text-wrap:balance}
.v-colhead.v-foot > p{max-width:76ch}
/* Our story: a painting with its caption beside the text */
.v-fig{margin:0;display:grid;gap:10px;justify-items:center;align-self:center}
.v-fig .v-art{max-height:min(70vh,620px);width:auto;max-width:100%}
.v-fig figcaption{font:italic 500 clamp(17px,.2vw + 16px,19px)/1.45 var(--f-disp);color:#5c5752;text-align:center;max-width:34ch}
.s-closing{font:500 clamp(20px,.3vw + 19px,23px)/1.55 var(--f-disp);color:var(--body,#2b2826);max-width:46ch;text-wrap:balance}
.s-emblem{max-width:260px;justify-self:center}
/* Our story: the registry painting sits on the left (.flip), and a second heading in a column gets room above it */
@media (min-width:700px) and (min-aspect-ratio:1/1){ .v-split.flip > .v-fig{order:-1} }
#weekend .v-col > p + .w-h2{margin-top:clamp(28px,5vh,48px)}
.v-fig figcaption{text-wrap:balance}
/* Home closing: the button says only RSVP; the deadline sits just below it in small type (Shruti, 19 Oct) */
.closing-actions{display:grid;justify-items:center;gap:9px}
.closing-actions .btn-rsvp{padding:15px 36px;min-height:48px;min-width:190px;box-sizing:border-box}
.rsvp-by{font:500 14.5px/1.3 var(--f-ui);letter-spacing:.03em;color:var(--ink-2,#4a5560);margin:0}
.rsvp-by{font-size:15.5px}

/* Language toggle in the page's own cream (Shruti, 21 Oct): no blue fill; the chosen language is a darker cream. Smaller on phones,
   with a finger-sized tap area beyond what shows. */
.lang{border-color:rgba(30,54,64,.15);background:rgba(255,253,248,.85)}
.lang button{position:relative;color:#7a716b}
.lang button[aria-pressed="true"]{background:#EADFCB;color:var(--ink)}
.lang button::after{content:"";position:absolute;inset:-6px -1px}
@media (max-width:699px),(max-aspect-ratio:1/1){
  .bar{padding:calc(env(safe-area-inset-top,0px) + 10px) 10px 0}
  .lang button{font-size:11px;letter-spacing:.12em;min-height:30px;min-width:46px;padding:0 10px}
  .back{min-height:34px;font-size:13.5px;padding:0 13px;top:calc(env(safe-area-inset-top,0px) + 10px);left:10px}
  /* closing: the reply button sized for a thumb (52 px tall, two-thirds of the screen wide) */
  .closing-actions .btn-rsvp{min-height:52px;min-width:min(70vw,280px);font-size:15px}
}
/* Mehndi on phones: one screen, stacked in flow so nothing overlaps on shorter screens (browser bars showing):
   the words, the lawn painting, then the wide snippet of the girls getting henna (Shruti, 21 Oct) */
@media (max-width:699px),(max-aspect-ratio:1/1){
  #mehndi .board.lead{display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,2.2svh,20px);padding:calc(env(safe-area-inset-top,0px) + 48px) 0 14px;box-sizing:border-box}
  #mehndi .board.lead > *{position:relative;left:auto;right:auto;top:auto;rotate:none;flex:none}
  #mehndi .board.lead > .words{width:86%;margin:0 7%}
  #mehndi .board.lead > .vig{width:100%;margin:0;display:flex;justify-content:center}
  #mehndi .board.lead > .vig img{width:auto;max-width:104%;height:auto}
  #mehndi .board.lead > .vig.wide img{max-height:min(31svh,272px)}
  #mehndi .board.lead > .vig.m-only img{max-width:90%;max-height:min(27svh,240px);rotate:1deg}
}

/* Phone fixes after the screen-by-screen check (21 Oct). Tested at 390x844 and 390x664 (browser bars showing), English and Spanish. */
@media (max-width:699px),(max-aspect-ratio:1/1){
  /* the toggle: 12 px labels, warm dark text (no blue), finger-sized tap areas */
  .lang button{font-size:12px;letter-spacing:.1em}
  .lang button[aria-pressed="true"]{color:#4a3f35}
  .lang button::after{inset:-9px -1px}
  .lang button:first-child::after{left:-8px}
  .lang button:last-child::after{right:-8px}
  /* the toran hangs below the toggle's band, so nothing covers it */
  .opening .toran,.w-page > .toran{margin-top:calc(env(safe-area-inset-top,0px) + 50px)}
  /* words clear the paintings on shorter screens and in Spanish */
  #welcome .words{top:max(var(--y),calc(env(safe-area-inset-top,0px) + 52px))}
  #welcome .words .line{max-width:none}
  #welcome .plate .art{top:auto;bottom:0;height:90%}
  #sangeet .plate .art{top:auto;bottom:0;height:96%}
  #wedding .words{isolation:isolate}
  #wedding .words::before{content:"";position:absolute;inset:-12% -16% -34% -16%;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(255,249,236,.94) 66%,transparent);filter:blur(8px)}
  /* closing: the reply button full width and lower, in the thumb's easy reach */
  .closing{align-content:end;padding-bottom:max(3svh,16px)}
  .closing-actions{justify-self:stretch;grid-template-columns:minmax(0,350px);justify-content:center}
  .closing-actions .btn-rsvp{min-width:0;width:100%;max-width:350px;min-height:56px}
  .closing .more{margin-top:clamp(12px,2.5svh,24px)}
  .closing .made{margin-top:clamp(10px,2svh,20px)}
}
@media (max-width:699px) and (max-height:760px),(max-aspect-ratio:1/1) and (max-height:760px){
  #welcome .plate .art{height:84%}
  #sangeet .plate .art{height:86%}
  .closing .more{gap:10px}
}
@media (max-width:699px) and (min-height:761px),(max-aspect-ratio:1/1) and (min-height:761px){
  .closing .halo{width:clamp(72px,13svh,116px)}
}
/* Reading pages end with a plain Home button (no arrow), sized for a thumb (Shruti, 21 Oct) */
.btn-home{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:132px;padding:0 28px;box-sizing:border-box;border:1px solid rgba(30,54,64,.32);border-radius:999px;
  font:500 15px/1 var(--f-ui);letter-spacing:.06em;color:var(--ink);text-decoration:none;background:rgba(255,253,248,.6)}
.btn-home:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.w-glossary > .w-go{margin-top:-6px}
/* Phone extras (Shruti, 21 Oct): fairy lights above the Sangeet and Reception words, a painted sky over the Farewell words,
   and three Mehndi options to compare (the option tags and two of the three screens go once she picks). */
.lights{position:absolute;top:0;left:0;width:100%;height:auto;z-index:2;pointer-events:none}
.lights .wire{fill:none;stroke:rgba(110,92,70,.5);stroke-width:.8}
.lights .bulbs circle{fill:#FFF1C9;filter:drop-shadow(0 0 2.5px rgba(255,214,120,.95));animation:twinkle 3.2s ease-in-out infinite}
.lights .bulbs circle:nth-child(3n){animation-delay:-1.1s;animation-duration:2.6s}
.lights .bulbs circle:nth-child(4n+1){animation-delay:-2.2s;animation-duration:3.8s}
.lights .bulbs circle:nth-child(5n+2){animation-delay:-.6s}
@keyframes twinkle{0%,100%{opacity:.6}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.lights .bulbs circle{animation:none}}
.sky{position:absolute;top:0;left:0;width:100%;height:43%;object-fit:cover;z-index:0;pointer-events:none}
#farewell .plate .art{z-index:1}
.opt-tag{position:absolute;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);left:12px;margin:0;font:600 11px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:#B5402F;border-radius:999px;padding:7px 10px}
@media (max-width:699px),(max-aspect-ratio:1/1){
  /* option 1: words higher, the henna painting first and bigger, then the musicians */
  #mehndi .board.lead{justify-content:flex-start;padding-top:calc(env(safe-area-inset-top,0px) + 52px);gap:clamp(10px,2.6svh,22px)}
  #mehndi .board.lead > .opt-tag{position:absolute}
  #mehndi .board.lead > .vig.m-only{order:1}
  #mehndi .board.lead > .vig.wide{order:2}
  #mehndi .board.lead > .vig.m-only img{max-width:100%;max-height:min(36svh,300px);rotate:none}
  #mehndi .board.lead > .vig.wide img{max-height:min(29svh,250px)}
  /* option 3: henna patterns and cones in the empty paper */
  .mehndi-opt3{display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(8px,2svh,16px);padding:calc(env(safe-area-inset-top,0px) + 52px) 0 12px;box-sizing:border-box}
  .mehndi-opt3 > *{position:relative;left:auto;right:auto;top:auto;rotate:none;flex:none}
  .mehndi-opt3 > .opt-tag{position:absolute}
  .mehndi-opt3 > .words{width:62%;margin:0 7%}
  .mehndi-opt3 > .m-pattern{position:absolute;top:calc(env(safe-area-inset-top,0px) + 40px);right:-46px;width:190px;opacity:.28}
  .mehndi-opt3 > .m-vine{position:absolute;opacity:.3;width:54px}
  .mehndi-opt3 > .m-vine-l{left:4px;bottom:8px}
  .mehndi-opt3 > .m-cones{position:absolute;right:4%;top:calc(env(safe-area-inset-top,0px) + 168px);width:30%;rotate:-6deg}
  .mehndi-opt3 > .vig{width:100%;margin:0;display:flex;justify-content:center}
  .mehndi-opt3 > .vig img{width:auto;max-width:96%;height:auto;max-height:min(27svh,240px)}
}
/* Phone fixes after the v44 check (22 Oct). Tested at 390x844, 390x664 and 375x667, English and Spanish.
   Mehndi: the option tags sit in one corner (the stacked-board rules had moved them onto the date); option 1 shares its spare paper
   and fits short screens; option 2's painting sits lower so its cornice clears the words; option 3's mandala clears the toggle and
   the cones clear the painting (the vine is gone). Fairy lights: golden painted bulbs (the #bulb gradient in the hidden SVG, no CSS
   filter), a warm sepia wire, a gentler twinkle, and they fade out around the language toggle. Farewell: the sky wash spans the whole
   screen (it now sits in a band outside the 9:16 plate), runs on through the painting's top edge, and that torn edge is feathered. */
@media (max-width:699px),(max-aspect-ratio:1/1){
  #mehndi .board.lead > .opt-tag,.mehndi-opt3 > .opt-tag{top:calc(env(safe-area-inset-top,0px) + 14px);left:12px}
  #mehndi .board.lead{justify-content:space-between;padding-bottom:max(16px,2.5svh)}
  #mehndi .board.lead > .vig.m-only img{max-height:min(31svh,300px)}
  #mehndi .board.lead > .vig.wide img{max-width:100%;max-height:min(29svh,262px)}
  .mehndi-opt2 .art{top:auto;bottom:0;height:95%}
  .mehndi-opt3 > .m-pattern{top:calc(env(safe-area-inset-top,0px) + 54px)}
  .mehndi-opt3 > .m-cones{width:25%;top:calc(env(safe-area-inset-top,0px) + 146px)}
  .lights{-webkit-mask-image:radial-gradient(84px 44px at calc(100% - 60px) 26px,transparent 64%,#000 100%);
    mask-image:radial-gradient(84px 44px at calc(100% - 60px) 26px,transparent 64%,#000 100%)}
  #farewell{position:relative}
  #farewell .sky-band{height:0}
  #farewell .sky{height:47%}
  #farewell .plate .art > img:first-child{-webkit-mask-image:linear-gradient(to bottom,transparent 35%,#000 38%);
    mask-image:linear-gradient(to bottom,transparent 35%,#000 38%)}
}
@media (max-width:699px) and (max-height:760px),(max-aspect-ratio:1/1) and (max-height:760px){
  .mehndi-opt2 .art{height:86%}
}
.lights .wire{stroke:#5E4A36;stroke-opacity:.42;stroke-width:.9}
.lights .bulbs circle{fill:inherit;filter:none}   /* the fill is url(#bulb), set on <g class="bulbs"> */
@keyframes twinkle{0%,100%{opacity:.78}50%{opacity:1}}   /* replaces the .6 low above, so the bulbs never fade into the paper */
@media (max-width:699px),(max-aspect-ratio:1/1){ .mehndi-opt3{justify-content:space-between;padding-bottom:max(16px,2.5svh)} }   /* option 3: no empty band at the bottom */
/* Mehndi on phones: the henna cones, lime and katori sit on the paper left of the right-set words (Shruti, 22 Oct) */
.m-cones2{position:absolute;z-index:4;left:3%;top:calc(env(safe-area-inset-top,0px) + 92px);width:34%;rotate:-6deg;pointer-events:none}
@media (max-height:760px){ .m-cones2{top:calc(env(safe-area-inset-top,0px) + 70px);width:30%} }
/* the cones stay clear of the words at every phone size (measured: the text's left edge sits at 105-137 px) */
.m-cones2{left:2%;width:27%}
@media (max-height:760px),(max-width:370px){ .m-cones2{width:24%} }
/* Home button in the site's own button style, like the RSVP button: Cinzel capitals on a filled navy block (Shruti, 22 Oct: not white) */
.btn-home{min-height:50px;min-width:150px;padding:0 30px;border:1px solid var(--ink);border-radius:2px;background:var(--ink);color:var(--paper);
  font:500 13.5px/1 var(--f-cap);letter-spacing:.22em;text-transform:uppercase}
.btn-home:hover{background:var(--sindoor);border-color:var(--sindoor);color:var(--paper)}

/* Farewell on phones: a neem branch made from the painting's own leaves and twig reaches in from the top-left corner and
   joins the painting's branch (Shruti, 22 Oct). It is placed in the painting's own pixels (1080x1935), so the twigs meet on
   every screen; it stays clear of the right-set words. */
@media (max-width:699px),(max-aspect-ratio:1/1){
  #farewell .branch{position:absolute;z-index:2;top:0;left:calc(50% - var(--screen) * var(--ar) * .64815);
    width:calc(var(--screen) * var(--ar) * .66667);height:calc(var(--screen) * .39793);pointer-events:none}
}
/* Visiting India: "Already in India?" as an indented sub-point under Getting here (Shruti, 22 Oct) */
.v-subpoint{margin-left:1.1em !important;padding-left:.9em;border-left:2px solid rgba(181,64,47,.35)}
/* scroll bar: a quiet thumb on the paper instead of a white strip down the right (Shruti, 22 Oct) */
html{scrollbar-color:rgba(30,54,64,.28) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(30,54,64,.26);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
/* Mehndi on phones: the cones painting bigger, in the open paper left of and below the words */
.m-cones2{left:1%;width:42%;top:calc(env(safe-area-inset-top,0px) + 104px)}
@media (max-height:760px),(max-width:370px){ .m-cones2{width:36%;top:calc(env(safe-area-inset-top,0px) + 86px)} }
.v-lede{margin-top:-4px !important;font-style:italic;color:#5c5752 !important}
/* with the longer "Mehndi Baithak" title the cones sit just below it, still left of the Hindi and English lines */
.m-cones2{top:calc(env(safe-area-inset-top,0px) + 124px)}
@media (max-height:760px),(max-width:370px){ .m-cones2{top:calc(env(safe-area-inset-top,0px) + 120px);width:34%} }
.m-cones2{top:calc(env(safe-area-inset-top,0px) + 131px);width:38%}
@media (max-height:760px),(max-width:370px){ .m-cones2{top:calc(env(safe-area-inset-top,0px) + 128px);width:32%} }

/* RSVP: the ID step after a yes (22 Oct, simplified 24 Oct). One row per person: the name, then one big button per
   document ("Add ID", or "Add passport" and "Add visa"). They stay outlined once a photo is in, so "Send" is the only
   filled button; the privacy note is in smaller type. */
.r-pill{border-color:rgba(33,77,116,.7)}
.r-ids .eyebrow{margin-bottom:-8px}
.r-ids .w-h2{text-wrap:balance}
.r-ids-text{display:grid;gap:12px}
.r-ids-text p{font:500 clamp(19.5px,.25vw + 18.5px,22px)/1.6 var(--f-disp);color:var(--body,#2b2826);text-wrap:pretty}
.r-id-list{display:grid;margin:6px 0 16px;border-top:1px solid rgba(33,77,116,.18)}
.r-id{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 0;border-bottom:1px solid rgba(33,77,116,.18)}
.r-id .r-name{flex:1 1 110px;min-width:0;font-size:clamp(19px,.4vw + 17.5px,22px)}
.r-btns{display:flex;gap:8px;flex:none;margin-left:auto}
.r-file{min-height:44px;padding:0 11px;font-size:16px}
.r-file .r-done,.r-file.done .r-add{display:none}
.r-file.done{background:rgba(33,77,116,.08)}
.r-file.done .r-done{display:inline}
.r-small{font:500 16px/1.5 var(--f-ui);color:#5c5752;max-width:46ch;text-wrap:pretty}
.r-skip{background:none;border:0;padding:0;cursor:pointer;justify-self:start}
#r-ids:focus{outline:none}
/* RSVP, 26 Oct: the saved ID checklist, the summary a family sees when they come back, and the e-Visa guide */
.r-hint{font:500 16px/1.5 var(--f-ui);color:#5c5752;text-wrap:pretty}
.r-ids-text p.r-hint{font:500 16px/1.5 var(--f-ui);color:#5c5752}
.r-progress{font:600 16px/1.4 var(--f-ui);color:var(--ink)}
.r-file.busy{opacity:.55;pointer-events:none}
.r-status,.r-visa{display:grid;gap:12px;justify-items:start;padding:16px 18px;border:1px solid rgba(33,77,116,.2);border-radius:14px;background:rgba(255,253,248,.6)}
.r-done .r-status p,.r-done .r-visa p{margin:0}
.r-btn-line{background:transparent;color:var(--ink);border:1.5px solid rgba(33,77,116,.7)}
.r-btn-line:hover{background:rgba(33,77,116,.06)}
.r-again{font-size:inherit;min-height:44px;vertical-align:baseline}
html.r-locked,html.r-locked body{overflow:hidden}
.r-pop{position:fixed;inset:0;z-index:60;background:#FBF6EC;display:grid;grid-template-rows:auto minmax(0,1fr);padding-top:env(safe-area-inset-top,0px)}
.r-pop-bar{display:flex;align-items:center;gap:10px;padding:14px 16px 12px 20px;border-bottom:1px solid rgba(33,77,116,.15)}
.r-pop-title{flex:1;min-width:0;margin:0;font:italic 600 clamp(26px,1vw + 22px,32px)/1.15 var(--f-disp);color:var(--ink)}
.r-icon{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;box-sizing:border-box;border-radius:50%;border:1.5px solid rgba(33,77,116,.45);background:#FFFDF8;color:var(--ink);cursor:pointer;padding:0}
.r-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.r-icon:focus-visible{outline:2px solid var(--sindoor);outline-offset:2px}
.r-icon.copied{background:var(--ink);border-color:var(--ink);color:#FFFDF8}
.r-icon.copied svg{display:none}
.r-icon.copied::after{content:"✓";font:600 18px/1 var(--f-ui)}
.r-pop-body{overflow:auto;-webkit-overflow-scrolling:touch;padding:6px 20px calc(env(safe-area-inset-bottom,0px) + 36px);display:grid;gap:10px;align-content:start;width:100%;max-width:640px;margin:0 auto;box-sizing:border-box}
.r-pop-body h3{margin:18px 0 0;font:600 13px/1.3 var(--f-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.r-pop-body p,.r-pop-body li{font:500 clamp(18px,.25vw + 17px,20px)/1.55 var(--f-disp);color:var(--body,#2b2826);margin:0;text-wrap:pretty}
.r-pop-body p.r-hint{font:500 15.5px/1.5 var(--f-ui);color:#5c5752}
.r-pop-body ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.r-field{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(33,77,116,.12)}
.r-field-label{flex:0 0 40%;min-width:0;font:500 14.5px/1.35 var(--f-ui);color:#5c5752}
.r-field-value{flex:1;min-width:0;font:600 17px/1.35 var(--f-ui);color:var(--ink);overflow-wrap:anywhere}
.r-field-value a{color:var(--ink);text-underline-offset:3px}
/* RSVP polish, 26 Oct: plain link for "Just reply again", lining figures (Cormorant's old-style 1 reads as I),
   a clear green tick for done, matching button widths so rows line up, a 44px calendar link, and the "Copied" note */
.r-form *,.r-pop *{font-variant-numeric:lining-nums !important}   /* !important: the font shorthand on each element resets it */
.r-again{display:inline-flex;align-items:center;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font:italic 600 1em/1.3 var(--f-disp);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;min-height:44px}
.r-done .r-cal{min-height:44px}
.r-file{justify-content:center}
.r-k-id{min-width:6.4em}
.r-file i{display:inline-block;width:1em;margin-right:.25em;text-align:center;font-style:normal}   /* + and ✓ take the same space, so done and not-done pills match */
.r-file.done{background:rgba(47,122,78,.10);border-color:rgba(47,122,78,.75)}
.r-file.done .r-done{color:#245e3c}
.r-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%);z-index:61;margin:0;box-shadow:0 6px 18px rgba(20,30,40,.18);padding:10px 18px;border-radius:999px;background:var(--ink);color:#FFFDF8 !important;font:600 15px/1 var(--f-ui) !important}
#r-find .r-hint{margin-top:-6px}
/* RSVP, 26 Oct: where everyone on a family invitation stands (each person can reply on their own, later, on the same link) */
.r-who{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid rgba(33,77,116,.18)}
.r-who li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(33,77,116,.18)}
.r-who-name{font:600 clamp(19px,.4vw + 17.5px,22px)/1.3 var(--f-disp);color:var(--ink)}
.r-who li > span:last-child{flex:none;font:600 15px/1.3 var(--f-ui)}
.r-who-yes{color:#245e3c}
.r-who-no{color:#5c5752}
.r-who-none{color:var(--sindoor)}
.r-who li{align-items:center}
.r-who-reply{min-height:44px;padding:0 18px;font-size:16px;flex:none}
.r-who li{min-height:62px;box-sizing:border-box}   /* rows with a Reply button and rows without one are the same height */
/* Visiting India, 27 Oct: the cabs we recommend, one card each in Shruti's order, with a fold for the details */
.v-cabs{grid-column:1/-1;display:grid;gap:14px}
.v-cabs .v-cab{display:grid;gap:6px;align-content:start;padding:16px 18px 6px;border:1px solid rgba(33,77,116,.2);border-radius:14px;background:rgba(255,253,248,.55)}
.v-cabs .v-cab-first{border-color:rgba(33,77,116,.55);background:rgba(255,253,248,.9)}
.v-cabs p.v-cab-tag{margin:0;font:600 12.5px/1.3 var(--f-cap);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.v-cabs .v-cab-name{margin:0;font:600 clamp(22px,.5vw + 20px,26px)/1.2 var(--f-disp);color:var(--ink)}
.v-cabs p.v-cab-car{margin:0;font:600 17px/1.4 var(--f-ui);color:var(--ink);font-variant-numeric:lining-nums}
.v-cab-more summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font:600 16px/1.2 var(--f-ui);color:var(--ink);text-decoration:underline;text-underline-offset:4px;list-style:none}
.v-cab-more summary::-webkit-details-marker{display:none}
.v-cab-more summary::after{content:"";width:8px;height:8px;margin-left:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.v-cab-more[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.v-cabs .v-cab-more ul{margin:2px 0 12px;padding-left:1.1em;display:grid;gap:6px}
.v-cabs .v-cab-more li{font:500 16.5px/1.5 var(--f-ui);color:var(--body,#2b2826);font-variant-numeric:lining-nums}
@media (min-width:700px) and (min-aspect-ratio:1/1){ .v-cabs{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* phone numbers and card numbers in lining figures (Cormorant's old-style 1 reads as I); a phrase that must not break */
.v-cabs .v-cab-name,a[href^="https://wa.me"]{font-variant-numeric:lining-nums}
a[href^="https://wa.me"],.nw{white-space:nowrap}
/* the reference to give the cab companies, set apart so it's easy to copy; each card's WhatsApp contact */
.v-cols p.v-cab-ref{justify-self:start;margin:0;padding:10px 14px;border-radius:10px;background:rgba(33,77,116,.07);font:600 16.5px/1.45 var(--f-ui);color:var(--ink);font-variant-numeric:lining-nums}
.v-cabs p.v-cab-wa{margin:2px 0 0;font:500 16.5px/1.45 var(--f-ui);color:var(--ink);font-variant-numeric:lining-nums}
/* Getting here and back, read top to bottom in one column (Shruti, 28 Oct) */
.v-flow > p{max-width:64ch}
/* the WhatsApp message guests can copy for the cab companies (Shruti, 28 Oct) */
.v-msg{display:grid;gap:10px;justify-items:start;max-width:64ch;padding:14px 16px;border-radius:12px;background:rgba(33,77,116,.07)}
.v-cols p.v-msg-text{margin:0;font:500 16px/1.5 var(--f-ui);color:var(--ink);font-variant-numeric:lining-nums}
.v-copy{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid rgba(33,77,116,.6);border-radius:999px;background:#FFFDF8;color:var(--ink);font:600 16px/1 var(--f-ui);cursor:pointer}
.v-copy svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .v-copy:hover{background:#fff;border-color:var(--ink)} }
.v-cols p.v-copied{margin:0;font:600 15px/1.4 var(--f-ui);color:#245e3c}
/* the cab message: bullets with a hanging indent, gaps between its parts, and tinted [placeholders] to replace */
.v-msg-text .v-msg-li{display:block;padding-left:1.05em;text-indent:-1.05em}

.v-msg-text .v-ph{background:rgba(151,104,26,.16);border-radius:4px;padding:0 3px;color:#6d4a12}

/* 28 Oct (RSVP review): */
/* phones: the Home link and the language buttons keep their look but get a 44 px tall tap area */
@media (max-width:699px),(max-aspect-ratio:1/1){
  .lang button{position:relative}
  .back::after,.lang button::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
/* narrow phones: both answers sit side by side in Spanish too ("Sí, con alegría" · "Por desgracia, no") */
@media (max-width:420px){ .r-pill{padding:0 17px} .r-choices{gap:8px} }
/* the e-Visa guide's title and buttons line up with its text column on wide screens */
.r-pop-bar{padding-left:max(20px,calc((100% - 640px) / 2 + 20px));padding-right:max(16px,calc((100% - 640px) / 2 + 16px))}
/* the guide's step numbers in the plain font (in Cinzel a "1" reads as "I") */
.r-pop-body h3 .r-n{font-family:var(--f-ui);font-weight:600;letter-spacing:.02em}
@media (max-width:380px){ .r-pill{padding:0 13px} }   /* 360 px phones: the Spanish pair still fits on one row */
/* RSVP on phones: a slimmer garland and a tighter title block, so the form starts higher on small screens */
@media (max-width:699px),(max-aspect-ratio:1/1){
  .r-page > .toran{--tw:max(100vw,500px)}
  .r-page .w-hero{gap:4px}
  .r-page .w-title{font-size:clamp(38px,8vw + 10px,52px)}
  .r-page .w-intro{margin-top:6px}
}
/* 28 Oct (visual check): */
/* single-column sections: lists stop where the paragraphs do, not at the full laptop width */
.v-colhead > ul,.v-colhead > ol{max-width:62ch}
/* a menu jump to a section with a painting lands on its heading (its id moved there) */
.v-split > .v-colhead[id]{scroll-margin-top:76px}
/* the e-Visa guide scrolls from anywhere on a laptop screen, not only over its text column */
.r-pop-body{max-width:none;margin:0;padding-left:max(20px,calc((100% - 640px) / 2 + 20px));padding-right:max(20px,calc((100% - 640px) / 2 + 20px))}
/* the guide's link to the official site is a full-size tap target */
.r-pop-body .r-field-value a{display:inline-flex;align-items:center;min-height:44px}
/* Visiting India: the e-Visa guide's button under its step */
.v-cols li .v-guide{display:flex;width:fit-content;margin-top:12px}
/* Gifts: the bank details, label and value side by side, in the plain font so every digit is clear */
.v-bank dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:8px 0 12px}
.v-bank dt{font:500 15.5px/1.5 var(--f-ui);color:#5c5752}
.v-bank dd{margin:0;font:600 17px/1.5 var(--f-ui);color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:lining-nums}
/* 28 Oct: on phones every reading page starts the same way, and higher. The garland sits at the very top, behind the Home and
   language buttons (as on Wardrobe), a little slimmer, with the title close under it. */
@media (max-width:699px),(max-aspect-ratio:1/1){
  .w-page > .toran{margin-top:env(safe-area-inset-top,0px)}
  .w-page .toran{--tw:max(100vw,500px)}
  .w-page .w-hero{padding-top:8px}
}
/* 28 Oct: home page on phones: the garland like the inner pages (Shruti prefers it there): at the very top, the slimmer size */
@media (max-width:699px),(max-aspect-ratio:1/1){
  .opening .toran{margin-top:env(safe-area-inset-top,0px);--tw:max(100vw,500px)}
}
/* Visiting India: the cab message opens from a button, like the e-Visa guide (Shruti, 28 Oct) */
.v-msg-fold > summary{list-style:none;cursor:pointer;width:fit-content}
.v-msg-fold > summary::-webkit-details-marker{display:none}
.v-msg-fold[open] > summary{margin-bottom:14px}
.v-msg-fold:not([open]) .v-when-open,.v-msg-fold[open] .v-when-shut{display:none}
/* the e-Visa guide: rows each guest fills in themselves */
.r-ph{background:rgba(151,104,26,.16);border-radius:4px;padding:0 4px;color:#6d4a12;font-weight:500}
/* phones: the garland sways a little faster, so its smaller leaves visibly move (Shruti, 28 Oct) */
@media (max-width:699px),(max-aspect-ratio:1/1){ .toran-row span{animation-duration:3.2s} }
/* RSVP connected to the database, 29 Oct: each person's documents sit under their name, with the upload's state:
   "Uploading…", "✓ Passport received" with a small preview and "Replace", or "This didn't go through" with "Try again" */
.r-id{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0}
.r-id .r-name{flex:none}
.r-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0}
.r-saved{margin:0;font:600 18px/1.4 var(--f-ui);color:#245e3c}
.r-got{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 16px/1.3 var(--f-ui);color:#245e3c}
.r-thumb{flex:none;width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid rgba(33,77,116,.25);background:#fff}
.r-thumb-pdf{display:inline-grid;place-items:center;box-sizing:border-box;font:700 11px/1 var(--f-ui);letter-spacing:.06em;color:var(--ink)}
.r-replace{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font:600 16px/1 var(--f-ui);color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.r-replace input{position:absolute;opacity:0;width:1px;height:1px}
.r-replace:has(input:focus-visible){outline:2px solid var(--sindoor);outline-offset:3px}
.r-fail{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font:500 16px/1.4 var(--f-ui);color:var(--sindoor)}
.r-retry{min-height:44px;padding:0 16px;font-size:16px}
.r-file.busy{opacity:.7;pointer-events:none;font-style:italic}
.r-switch{margin:4px 0 0}
#r-send:disabled{opacity:.7;cursor:progress}
/* phones and tablets get the garland at the size they show it (1920 px, 326 KB instead of 733 KB; 29 Oct, loading time) */
@media (max-width:1000px){ .toran-row span{background-image:url(assets/img/toran-m.webp)} }