/* Words that flow through the painting rather than sit on it: each verse anchors
   where the composition is quiet, and the light in the shader follows it there. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { margin: 0; background: #241713; overflow-x: clip; opacity: 0; transition: opacity 1s ease; }
body.ready { opacity: 1; }

#gl { position: fixed; inset: 0; z-index: 0; display: block; }
#road { position: relative; }
#band { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

.verse {
  position: absolute; width: min(640px, 78vw);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: 0; will-change: opacity, transform;
  font-family: 'Marcellus', ui-serif, Georgia, serif;
  color: #5d2320;
}
.verse.hero { width: min(940px, 90vw); }

.deva { font-family: 'Tiro Devanagari', serif; color: #8a2f2a;
  font-size: clamp(15px, 2vw, 24px); letter-spacing: .05em; margin-bottom: 1.6em; }

.lead { font-size: clamp(11px, 1.25vw, 15px); letter-spacing: .34em; padding-left: .34em;
  text-transform: uppercase; color: #8c5330; line-height: 1.9; max-width: 34ch; }

.main { font-family: 'Parisienne', cursive; color: #6d1c26;
  font-size: clamp(38px, 6.6vw, 92px); line-height: 1.06; margin: .3em 0 0; text-wrap: balance; }
.verse.hero .main { font-family: 'Marcellus', serif; letter-spacing: .04em;
  font-size: clamp(32px, 5.2vw, 72px); text-transform: none; }

.sub { margin-top: 1.6em; font-size: clamp(10px, 1.15vw, 14px);
  letter-spacing: .2em; padding-left: .2em; text-transform: uppercase;
  color: #6b3a2a; font-feature-settings: 'tnum'; line-height: 2.1; max-width: 42ch; }
.sub::before { content: ''; display: block; width: 150px; height: 1px; margin: 0 auto 1.8em;
  background: linear-gradient(to right, transparent, rgba(140,83,48,.8), transparent); }

.cta { pointer-events: auto; margin-top: 2.2em; display: inline-block; text-decoration: none;
  font-family: 'Marcellus', serif; font-size: clamp(11px, 1.3vw, 15px);
  letter-spacing: .3em; padding: 1.3em 2.6em 1.3em calc(2.6em + .3em); text-transform: uppercase;
  color: #6d1c26; border: 1px solid rgba(140,83,48,.7); background: rgba(255,250,242,.6);
  transition: background .4s ease, border-color .4s ease; }
.cta:hover, .cta:focus-visible { background: #fffaf2; border-color: #8a2f2a; outline: none; }

#scrollcue { position: fixed; left: 50%; bottom: 4.5vh; transform: translateX(-50%); z-index: 3;
  pointer-events: none; opacity: .6; transition: opacity .8s; }
body.moved #scrollcue { opacity: 0; }
#scrollcue svg { animation: cue 2.8s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity:.5 } 50% { transform: translateY(9px); opacity:1 } }
@media (prefers-reduced-motion: reduce) { #scrollcue svg { animation: none } }


/* ---------- type, by kind ---------- */
/* A ceremony is not a poem. Its name and its hour are the loudest things here. */
.role { font-size: clamp(10px,1.1vw,13px); letter-spacing:.4em; padding-left:.4em;
  text-transform:uppercase; color:#9a6236; margin-bottom:1.4em; }
.who { font-family:'Marcellus',serif; font-size:clamp(19px,2.5vw,34px); line-height:1.35;
  color:#5d2320; letter-spacing:.02em; text-wrap:balance; }
.who-with { margin-top:.5em; font-family:'Marcellus',serif;
  font-size:clamp(14px,1.7vw,22px); color:#7a3a2c; }
.whisper { margin-top:1.5em; font-size:clamp(11px,1.2vw,15px); line-height:1.85;
  color:#7d4a33; max-width:38ch; font-style:italic; }
.names { font-family:'Marcellus',serif; font-size:clamp(30px,5vw,68px); line-height:1.12;
  letter-spacing:.05em; color:#6d1c26; margin-top:.25em; text-wrap:balance; }
.fine { margin-top:1.4em; font-size:clamp(10px,1.15vw,14px); letter-spacing:.22em;
  padding-left:.22em; text-transform:uppercase; color:#6b3a2a;
  font-feature-settings:'tnum'; line-height:2; }

.fancy { font-family:'Parisienne',cursive; color:#6d1c26;
  font-size:clamp(40px,6.4vw,88px); line-height:1.04; text-wrap:balance; }
.clock { margin-top:.7em; display:flex; align-items:center; gap:1.1em; flex-wrap:wrap; justify-content:center; }
.formal { font-size:clamp(11px,1.2vw,15px); letter-spacing:.32em; padding-left:.32em;
  text-transform:uppercase; color:#9a6236; }
.time { font-family:'Marcellus',serif; font-size:clamp(22px,2.9vw,40px);
  color:#5d2320; font-feature-settings:'tnum'; letter-spacing:.04em; }
.clock::before, .clock::after { content:''; width:34px; height:1px; background:rgba(154,98,54,.6); }

.place { font-family:'Marcellus',serif; font-size:clamp(22px,3.2vw,44px);
  color:#5d2320; line-height:1.2; text-wrap:balance; }
.qr-link { pointer-events:auto; display:flex; flex-direction:column; align-items:center;
  gap:.8em; margin-top:1.8em; text-decoration:none; }
.qr { width:clamp(92px,10vw,124px); height:clamp(92px,10vw,124px); background:#fffaf2;
  padding:9px; border:1px solid rgba(154,98,54,.55); background-size:cover;
  image-rendering:pixelated; display:block; }
.qr-cap { font-size:clamp(9px,1vw,12px); letter-spacing:.28em; padding-left:.28em;
  text-transform:uppercase; color:#8c5330; }

/* ---------- the way in ---------- */
#gate { position:fixed; inset:0; z-index:40; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  /* Taken from the painting rather than invented: its marigold ground, its saffron,
     and the vermilion of the border it is framed in. The centre stays light so the
     gold mark still reads against it. */
  background:radial-gradient(ellipse 60% 52% at 50% 44%,
    #fff9ea 0%, #ffe8b4 34%, #fac874 58%, #f0994e 80%, #dd6a3c 100%);
  transition:opacity 1200ms ease, visibility 1200ms; }
#gate.open { opacity:0; visibility:hidden; pointer-events:none; }
#gate svg { width:min(60vw,286px); height:auto; overflow:visible; }
#gate .ink { fill:none; stroke:url(#siva-gold); stroke-width:3.1;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(122,74,6,.28)); }
#gate .ring { stroke-width:1.7; opacity:.85 } #gate .leaf { stroke-width:1.5; opacity:.75 }
#gate .draw { stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  animation:draw 1500ms cubic-bezier(.6,.04,.35,1) forwards; }
#gate .d2{animation-delay:400ms} #gate .d3{animation-delay:120ms;animation-duration:1800ms}
#gate .d4{animation-delay:980ms;animation-duration:900ms}
@keyframes draw { to { stroke-dashoffset:0 } }
#gate .wordmark { margin-top:24px; font-family:'Marcellus',serif; font-size:13px;
  letter-spacing:.46em; padding-left:.46em; color:#7a4a06; opacity:0;
  animation:riseIn 900ms ease 1600ms forwards; }
@keyframes riseIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* The story is a circle: past the end, it begins again. */
body::after { content:''; position:fixed; inset:0; z-index:30; pointer-events:none;
  background:#fffaf2; opacity:0; transition:opacity 600ms ease; }
body.wrapping::after { opacity:1; }


/* Hindi, set as its own voice rather than a translation in brackets. */
.hi { font-family:'Tiro Devanagari', serif; color:#7a2f28;
  font-size:clamp(19px,2.9vw,38px); line-height:1.6; margin-top:.45em;
  letter-spacing:.01em; text-wrap:balance; }
.hi-small { font-family:'Tiro Devanagari', serif; color:#8c5330;
  font-size:clamp(14px,1.7vw,21px); line-height:1.7; margin-top:.5em; }
.k-event .hi-small { font-size:clamp(16px,2vw,26px); color:#7a3a2c; }


/* Where you are in the story. Quiet, but always answerable. */
#rail { position: fixed; right: clamp(12px, 2vw, 26px); top: 50%; transform: translateY(-50%);
  z-index: 4; display: flex; flex-direction: column; gap: 7px; align-items: center; }
/* Id-scoped on purpose: every dot also carries the beat's `kind` class, so a bare
   .k-* width rule elsewhere in this file can otherwise stretch a dot across the
   screen. Specificity here makes that impossible. */
#rail .mark { width: 5px; height: 5px; flex: 0 0 auto; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(140,83,48,.55); background: transparent;
  transition: background .35s ease, transform .35s ease, border-color .35s ease; }
.mark:hover { background: rgba(140,83,48,.5); }
.mark.on { background: #8a2f2a; border-color: #8a2f2a; transform: scale(1.75); }
/* Beats that carry practical detail read differently from beats that carry story. */
.mark.k-card, .mark.k-family, .mark.k-masthead, .mark.k-final { border-color: rgba(122,46,58,.85); }
#rail .mark.k-card { width: 7px; height: 7px; }
.mark:focus-visible { outline: 2px solid #a8761f; outline-offset: 3px; }
@media (max-width: 700px) { #rail { right: 7px; gap: 5px; }
  #rail .mark { width: 4px; height: 4px; }
  #rail .mark.k-card { width: 6px; height: 6px; } }


/* Phones, and readers who are not twenty. Type gets larger relative to the screen,
   the measure narrows, and the ink darkens for contrast on a bright pool. */
@media (max-width: 700px) {
  /* The rail lives in the right margin. The measure has to stop short of it, or long
     lines run under the dots — which happened to every beat on a phone. */
  .verse { width: 82vw; }
  .verse.hero { width: 86vw; }
  .lead { font-size: 12px; letter-spacing: .24em; padding-left: .24em; line-height: 1.8; max-width: 26ch; }
  .main { font-size: clamp(34px, 10.5vw, 54px); line-height: 1.14; }
  .hi { font-size: clamp(20px, 6.2vw, 30px); }
  .names { font-size: clamp(30px, 9vw, 46px); }
  .fancy { font-size: clamp(36px, 11vw, 56px); }
  .time { font-size: clamp(24px, 7vw, 34px); }
  .formal { font-size: 12px; }
  .who { font-size: clamp(19px, 5.4vw, 26px); }
  .whisper { font-size: 14px; line-height: 1.8; max-width: 30ch; }
  .fine, .sub { font-size: 12px; letter-spacing: .16em; line-height: 1.95; }
  .place { font-size: clamp(24px, 7vw, 34px); }
  .cta { font-size: 13px; padding: 1.4em 2.2em 1.4em calc(2.2em + .3em); }
}
/* Darker ink throughout: the pool is bright, so the type can afford to be strong. */
.lead { color: #7a4222; }
.whisper { color: #5f3423; font-style: normal; }
.main, .fancy, .names { color: #63161f; }
.sub, .fine { color: #5a2d20; }


/* The browser's own [hidden] rule is weaker than any author class that sets display,
   so `.rs { display:flex }` quietly beat it and the form stayed on screen after a
   successful reply, sitting underneath the thank-you. This has to win. */
[hidden] { display: none !important; }

/* ---------- the reply, inside the story ---------- */
.verse.k-rsvp { width:min(520px,86vw); }
/* On this beat the form is the point, not the flourish, so the heading gives way. */
.verse.k-rsvp .fancy { font-size:clamp(28px,4vw,50px); }
.verse.k-rsvp .hi-small { font-size:clamp(15px,1.8vw,22px); color:#7a3a2c; }
.rs { pointer-events:auto; width:100%; display:flex; flex-direction:column;
  gap:.85em; margin-top:1.4em; text-align:left; }
.rs-lab { display:block; font-family:'Marcellus',serif; font-size:clamp(11px,1.2vw,14px);
  letter-spacing:.2em; padding-left:.2em; text-transform:uppercase; color:#63161f; }
.rs-in { width:100%; background:rgba(255,250,242,.85); color:#4f1a1c;
  border:0; border-bottom:1.5px solid rgba(122,46,58,.75); border-radius:0;
  font-family:'Marcellus',serif; font-size:clamp(17px,1.95vw,22px);
  letter-spacing:.03em; padding:.6em .6em; margin-top:.3em;
  font-feature-settings:'tnum'; -webkit-appearance:none; appearance:none; }
.rs-in::placeholder { color:#8c5330; opacity:.62; }
.rs-in:focus-visible { outline:1px solid #a8761f; outline-offset:2px; background:#fffaf2; }
.rs-two { display:grid; grid-template-columns:1fr 1fr; gap:.75em; }

.rs-count { display:flex; align-items:center; justify-content:space-between;
  gap:1em; margin-top:.3em; }
.rs-stepper { display:flex; align-items:center; gap:.55em; }
.rs-step { width:2.1em; height:2.1em; cursor:pointer; border:1px solid rgba(140,83,48,.6);
  background:rgba(255,250,242,.72); color:#63161f; font-family:'Marcellus',serif;
  font-size:clamp(14px,1.5vw,17px); line-height:1; border-radius:50%; }
.rs-step:hover { background:#fffaf2; border-color:#8a2f2a; }
.rs-num { font-family:'Marcellus',serif; font-size:clamp(22px,2.7vw,32px); color:#4f1a1c;
  min-width:1.6em; text-align:center; font-feature-settings:'tnum'; }

.rs-err { font-size:clamp(12px,1.25vw,14px); line-height:1.55; color:#8a2f2a;
  background:rgba(255,250,242,.8); border-left:2px solid #8a2f2a; padding:.6em .8em; }

.rs-go, .rs-no { cursor:pointer; font-family:'Marcellus',serif; text-transform:uppercase; }
.rs-go { margin-top:.5em; padding:1.15em 1.2em 1.15em calc(1.2em + .26em);
  font-size:clamp(13px,1.5vw,17px); letter-spacing:.26em;
  color:#5c1119; border:1.5px solid rgba(122,46,58,.9); background:#fffaf2;
  box-shadow:0 2px 14px rgba(120,60,40,.16); }
.rs-go:hover, .rs-go:focus-visible { background:#fffaf2; border-color:#8a2f2a; outline:none; }
.rs-go[disabled] { opacity:.6; cursor:default; }
.rs-no { padding:.7em; font-size:clamp(11px,1.2vw,13px); letter-spacing:.2em;
  color:#6b3220; background:transparent; border:0; text-decoration:underline;
  text-underline-offset:4px; }
.rs-priv { font-size:clamp(9px,1vw,11px); letter-spacing:.16em; text-transform:uppercase;
  color:#8c5330; text-align:center; text-decoration:underline; text-underline-offset:3px; }
#rs-ts { display:flex; justify-content:center; }
.rs-done .main { max-width:16ch; }

@media (max-width:700px) {
  /* With the keyboard up the viewport halves, so the reply beat has to be able to
     scroll on its own rather than trapping the send button below the fold. */
  .verse.k-rsvp { width:88vw; max-height:88vh; overflow-y:auto;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .verse.k-rsvp .fancy { font-size:clamp(26px,8vw,34px); }
  .verse.k-rsvp .hi-small { font-size:15px; }
  .rs { gap:.7em; margin-top:1em; }
  .rs-two { grid-template-columns:1fr; gap:.7em; }
  .rs-in { font-size:17px; }   /* never below 16px, or iOS zooms the page on focus */
  .rs-lab { font-size:11px; letter-spacing:.13em; }
  .rs-go { font-size:13px; letter-spacing:.16em; padding:1.05em .8em; }
  .rs-num { font-size:22px; }
}


/* ---------- the standing bar ---------- */
/* The real fix for "too many swipes": two taps that are always there, so nobody has
   to walk the story to find a time and a place. It fades in once you have left the
   masthead, where it would only repeat what is already on screen. */
#topbar { position:fixed; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding:calc(env(safe-area-inset-top) + .85rem) clamp(14px,3vw,30px) .85rem;
  opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s;
  font-family:'Marcellus', ui-serif, Georgia, serif; }
/* The painting moves under this bar, and some of it is vermilion. Without a ground
   of its own the date line lands on red and disappears. */
#topbar::before { content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(255,250,242,.94) 0%,
    rgba(255,250,242,.86) 55%, rgba(255,250,242,0) 100%);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
body.moved #topbar { opacity:1; visibility:visible; }

.tb-id { display:flex; align-items:baseline; gap:.7em; flex-wrap:wrap; min-width:0; }
.tb-hi { font-family:'Tiro Devanagari', serif; font-size:clamp(13px,1.5vw,17px); color:#63161f; }
.tb-when { font-size:clamp(9px,1vw,11px); letter-spacing:.2em; text-transform:uppercase;
  color:#7a4222; font-feature-settings:'tnum'; white-space:nowrap; }

.tb-acts { display:flex; align-items:center; gap:.5em; flex-shrink:0; }
#tb-details, .tb-rsvp { pointer-events:auto; cursor:pointer; text-decoration:none;
  font-family:'Marcellus', serif; font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.2em; padding:.75em 1.15em .75em calc(1.15em + .2em);
  text-transform:uppercase; color:#63161f; border:1px solid rgba(140,83,48,.6);
  background:rgba(255,250,242,.72); transition:background .35s ease, border-color .35s ease; }
.tb-rsvp { background:rgba(255,250,242,.92); border-color:rgba(122,46,58,.8); }
#tb-details:hover, .tb-rsvp:hover, #tb-details:focus-visible, .tb-rsvp:focus-visible {
  background:#fffaf2; border-color:#8a2f2a; outline:none; }
@media (max-width:700px) {
  #topbar { padding-left:12px; padding-right:12px; }
  .tb-id { flex-direction:column; gap:.1em; }
  #tb-details, .tb-rsvp { font-size:10px; letter-spacing:.14em; padding:.7em .85em; }
}


/* ---------- quoted verse ---------- */
/* A script face is for two words, not for a sentence. Renderings of Kalidasa run long,
   so they are set in the serif at a readable size; the script is kept for ceremony
   names and for the one modern line, where it has only a few words to carry. */
.k-verse .main, .k-final .main {
  font-family: 'Marcellus', ui-serif, Georgia, serif;
  font-size: clamp(21px, 3.1vw, 40px); line-height: 1.34;
  letter-spacing: .01em; max-width: 20ch; margin-top: .5em;
}
.k-ours .main { max-width: 14ch; }

/* The original, under the rendering. Never larger than it — it is the ground, not
   the headline, and Devanagari at display size crowds a phone. */
.shloka { font-family:'Tiro Devanagari', serif; color:#7a2f28;
  font-size:clamp(15px,1.9vw,24px); line-height:2.0; margin-top:1.1em;
  letter-spacing:.005em; text-wrap:balance; }
.k-final .shloka { margin-top:0; margin-bottom:.2em; }

/* Attribution. Small, spaced, and always present on a quoted line — it is what turns
   a borrowed sentence into a citation instead of a slogan. */
.src { margin-top:.9em; font-family:'Tiro Devanagari', serif;
  font-size:clamp(10px,1.05vw,13px); letter-spacing:.16em; color:#8c5330; opacity:.92; }


/* ---------- the families ---------- */
.kin { display:flex; flex-direction:column; align-items:center; gap:.45em; }
.kin-line { font-family:'Tiro Devanagari', serif; color:#7a4222;
  font-size:clamp(13px,1.5vw,18px); line-height:1.75; text-wrap:balance; }
.kin-name { font-family:'Tiro Devanagari', serif; color:#63161f;
  font-size:clamp(26px,3.6vw,46px); line-height:1.2;
  display:flex; align-items:baseline; gap:.6em; flex-wrap:wrap; justify-content:center; }
.kin-en { font-family:'Marcellus', serif; font-size:.44em; letter-spacing:.22em;
  text-transform:uppercase; color:#8c5330; }
.kin-rule { width:120px; height:1px; margin:1.5em 0;
  background:linear-gradient(to right, transparent, rgba(140,83,48,.75), transparent); }

/* Both houses beyond the parents. Two columns at every width — the pairing IS the
   information, and stacking them loses which side each elder belongs to. */
.verse.k-kin { width:min(720px,90vw); }
.kin-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2em clamp(14px,3vw,44px);
  margin-top:1.6em; width:100%; }
.kin-col { display:flex; flex-direction:column; align-items:center; gap:1.15em;
  position:relative; }
.kin-col:first-child::after { content:''; position:absolute; right:calc(-1 * clamp(7px,1.5vw,22px));
  top:8%; bottom:8%; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(140,83,48,.5), transparent); }
.kin-head { font-family:'Tiro Devanagari',serif; font-size:clamp(17px,2.1vw,26px);
  color:#63161f; line-height:1.2; }
.kin-head-en { font-size:clamp(9px,1vw,11px); letter-spacing:.2em; padding-left:.2em;
  text-transform:uppercase; color:#8c5330; margin-top:-.85em; }
.kin-row { display:flex; flex-direction:column; align-items:center; gap:.2em; }
.kin-role { font-family:'Tiro Devanagari',serif; font-size:clamp(12px,1.35vw,16px);
  color:#8c5330; }
.kin-who { font-family:'Marcellus',serif; font-size:clamp(13px,1.55vw,19px);
  line-height:1.45; color:#5d2320; text-wrap:balance; }

@media (max-width:700px) {
  .verse.k-kin { width:92vw; }
  .kin-grid { gap:1em 10px; margin-top:1.2em; }
  .kin-head { font-size:17px; }
  .kin-head-en { font-size:9px; letter-spacing:.12em; }
  .kin-role { font-size:12px; }
  .kin-who { font-size:13px; line-height:1.4; }
  .kin-col { gap:.95em; }
}


/* ---------- a whole day on one screen ---------- */
/* The single change that most reduces swiping: every ceremony, hour, the venue and
   the map for one day, in one beat, instead of five. */
/* Scoped to .verse: `kind` is also a class on the rail dot, and an unscoped
   width rule stretched the dot to 86vw so it rendered mid-screen. */
.verse.k-card { width:min(560px,86vw); }
.sched { list-style:none; margin:1.5em 0 1.7em; padding:0; width:100%;
  display:flex; flex-direction:column; gap:.85em; }
.sched li { display:grid; grid-template-columns:auto auto 1fr auto; align-items:baseline;
  gap:.65em; text-align:left; }
.s-en { font-family:'Marcellus',serif; font-size:clamp(13px,1.5vw,18px);
  letter-spacing:.2em; text-transform:uppercase; color:#7a4222; }
.s-hi { font-family:'Tiro Devanagari',serif; font-size:clamp(16px,2vw,25px); color:#63161f; }
.s-dot { height:1px; background:repeating-linear-gradient(to right,
  rgba(140,83,48,.55) 0 2px, transparent 2px 6px); transform:translateY(-.28em); }
.s-time { font-family:'Marcellus',serif; font-size:clamp(19px,2.4vw,30px);
  color:#5d2320; font-feature-settings:'tnum'; letter-spacing:.03em; white-space:nowrap; }
.verse.k-card .place { margin-top:.2em; font-size:clamp(18px,2.4vw,30px); }
.verse.k-card .fine { margin-top:.7em; }
.verse.k-card .qr-link { margin-top:1.4em; }

/* Devanagari date under the masthead, so the first screen answers "when" in both. */
.fine-hi { margin-top:.55em; font-family:'Tiro Devanagari', serif;
  font-size:clamp(13px,1.5vw,18px); letter-spacing:.06em; color:#5a2d20; }


@media (max-width: 700px) {
  .k-verse .main, .k-final .main { font-size:clamp(20px,5.6vw,28px); line-height:1.38; max-width:17ch; }
  .shloka { font-size:clamp(15px,4.4vw,21px); line-height:1.95; }
  .src { font-size:11px; letter-spacing:.12em; }
  .kin-line { font-size:clamp(13px,3.9vw,16px); }
  .kin-name { font-size:clamp(25px,7.6vw,34px); }
  .kin-rule { margin:1.2em 0; }
  .s-en { font-size:11px; letter-spacing:.13em; }
  .s-hi { font-size:clamp(16px,4.9vw,21px); }
  .s-time { font-size:clamp(18px,5.6vw,24px); }
  .sched { gap:.7em; margin:1.2em 0 1.3em; }
  .verse.k-card .place { font-size:clamp(17px,5vw,22px); }
  .verse.k-card .qr { width:84px; height:84px; }
  .fine-hi { font-size:13px; }
}


/* ---------- no WebGL, or the painting failed to load ---------- */
/* The story is the decoration; the invitation is the point. Here the same beats
   become an ordinary scrolling document on a warm ground, so a guest on an old
   phone or inside a stripped-down in-app browser still gets every name, time,
   venue and the reply form. */
html.nogl, html.nogl body { height:auto; overflow:auto; }
html.nogl body { background:#fdf5ea; }
html.nogl #gl, html.nogl #scrollcue, html.nogl #rail { display:none; }
html.nogl #band { position:static; inset:auto; pointer-events:auto;
  max-width:640px; margin:0 auto; padding:0 6vw 12vh; }
html.nogl .verse { position:static; opacity:1; transform:none !important;
  width:100%; max-width:100%; margin:0 auto; padding:7vh 0 0; }
html.nogl .verse + .verse { border-top:1px solid rgba(140,83,48,.18); }
html.nogl #topbar { position:sticky; opacity:1; visibility:visible;
  background:#fdf5ea; border-bottom:1px solid rgba(140,83,48,.25); }
html.nogl #topbar::before { display:none; }
html.nogl .rs-in { background:#fffaf2; }


/* ---------- the one-time install nudge ---------- */
/* Sits low, out of the way of the words, and leaves on its own. It must never read as
   an ad: same ink, same paper, no shadow theatre. */
#install {
  position:fixed; z-index:7;
  left:50%; bottom:calc(env(safe-area-inset-bottom) + 18px);
  transform:translate(-50%, 14px);
  display:flex; align-items:center; gap:.9em;
  max-width:min(430px, 92vw);
  padding:.85em 1em .85em 1.15em;
  background:rgba(255,250,242,.95);
  border:1px solid rgba(140,83,48,.45);
  font-family:'Marcellus', ui-serif, Georgia, serif;
  opacity:0; transition:opacity .5s ease, transform .5s ease;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
#install.up { opacity:1; transform:translate(-50%, 0); }
.ins-text { flex:1; font-size:clamp(12px,1.3vw,14px); line-height:1.5; color:#5f3423; }
.ins-text b { color:#63161f; font-weight:400; }
.ins-go { flex-shrink:0; cursor:pointer; font-family:'Marcellus',serif;
  font-size:clamp(10px,1.1vw,12px); letter-spacing:.2em; padding:.7em 1em .7em calc(1em + .2em);
  text-transform:uppercase; color:#63161f;
  border:1px solid rgba(122,46,58,.8); background:#fffaf2; }
.ins-go:hover, .ins-go:focus-visible { border-color:#8a2f2a; outline:none; }
.ins-x { flex-shrink:0; cursor:pointer; background:transparent; border:0;
  color:#8c5330; font-size:19px; line-height:1; padding:.2em .3em; }
.ins-x:hover { color:#8a2f2a; }
@media (prefers-reduced-motion: reduce) { #install { transition:opacity .5s ease; } }
/* In the plain no-WebGL page it scrolls with the document rather than floating. */
html.nogl #install { position:fixed; }