:root {
  --maroon-deep: #3B0912;
  --maroon: #6E1424;
  --kumkum: #A3172F;
  --kumkum-bright: #D7262E;
  --gold: #D9A441;
  --gold-light: #F4D88C;
  --ivory: #FFF7E8;
  --turmeric: #F0B323;
  --ink: #4A0B16;
  --serif: 'Cormorant Garamond', 'Noto Serif Telugu', Georgia, serif;
  --display: 'Cormorant Garamond', 'Ramaraja', Georgia, serif;
  --caps: 'Cinzel', 'Ramaraja', serif;
  --vh: 1vh;
  --top: max(52px, calc(env(safe-area-inset-top) + 44px)); /* room for the language button */
  --bottom: max(10px, env(safe-area-inset-bottom));
  /* Page size: one page on phones/portrait, two-page spread on wide screens */
  --pw: min(calc(100vw - 20px), 560px);
  --ph: min(calc(var(--vh) * 100 - var(--top) - var(--bottom)), 980px);
}
@supports (height: 1svh) { :root { --vh: 1svh; } }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  :root { --top: 24px; --bottom: 24px; --pw: min(46vw, calc((var(--vh) * 100 - 48px) * .74), 620px); --ph: min(calc(var(--vh) * 100 - 48px), 900px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  :root { --top: 8px; --bottom: 8px; --pw: min(calc(100vw - 230px), 820px); }
}

* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ivory);
  font: 400 1.1rem/1.6 var(--serif);
  font-variant-numeric: lining-nums;
  background:
    repeating-linear-gradient(115deg, rgba(244, 216, 140, .03) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 30%, #2A0A10 0%, #14040A 100%);
  background-color: #14040A;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.locked { overflow: hidden; }
p, h1, h2, h3, ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* ---------- Language toggle ---------- */
.lang-btn {
  position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 70;
  font: 600 .95rem/1 var(--serif);
  color: var(--maroon-deep); background: var(--gold-light);
  border: 0; border-radius: 99px; padding: .6em 1.1em; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

/* ---------- Envelope intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; align-content: center; gap: clamp(1rem, 4vh, 2.4rem); padding: 16px;
  background: radial-gradient(circle at 50% 42%, var(--maroon) 0%, var(--maroon-deep) 60%, #1A0509 100%);
  transition: opacity .9s ease, visibility .9s;
  cursor: pointer; touch-action: none; /* any touch opens the envelope */
}
.intro.gone { opacity: 0; visibility: hidden; }
/* fade the envelope in once the fonts have arrived (app.js removes .loading) */
.intro > *, .lang-btn { transition: opacity .6s ease; }
.loading .intro > *, .loading .lang-btn { opacity: 0; }
/* the book stays unpainted behind the envelope, so phones only animate the envelope */
body.locked .book { visibility: hidden; }
.env-float { animation: float 4.5s ease-in-out infinite; perspective: 1400px; }
@keyframes float { 50% { transform: translateY(-10px); } }
.envelope {
  position: relative;
  width: min(86vw, 440px, calc(var(--vh) * 62 * 1.4));
  aspect-ratio: 7 / 5;
  transform-style: preserve-3d;
  transition: transform .4s ease-out;
}
.env-back, .env-front, .flap, .letter { position: absolute; }
.env-back { inset: 0; background: #5E0F1D; border-radius: 6px; box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 120px rgba(217, 164, 65, .12); }
.letter {
  left: 6%; right: 6%; top: 6%; bottom: 6%; z-index: 2;
  display: grid; place-content: center; text-align: center; gap: .3rem;
  background: var(--ivory); color: var(--ink);
  border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: -8px;
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .75s, opacity .7s;
}
.letter-title { font: 500 clamp(.85rem, 3.4vw, 1.05rem) var(--caps); letter-spacing: .08em; color: var(--kumkum); }
.letter-names { font: italic 500 clamp(1.25rem, 5.5vw, 2rem)/1.15 var(--display); padding: 0 .5em; }
.env-front {
  inset: 0; z-index: 3; border-radius: 0 0 6px 6px;
  background:
    conic-gradient(from 135deg at 50% 0, var(--gold) 90deg, transparent 0) 0 calc(100% - 10px) / 18px 9px repeat-x,
    linear-gradient(160deg, #9B1F33, #7A1628 60%, #64101F);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.flap {
  left: 0; right: 0; top: 0; height: 58%; z-index: 4;
  background: linear-gradient(180deg, #A82339, #7A1628);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transition: transform .9s cubic-bezier(.5, 0, .3, 1), z-index 0s .45s;
}
.seal {
  position: absolute; left: 50%; top: 58%; z-index: 5;
  width: clamp(60px, 20%, 90px); aspect-ratio: 1; padding: 0; border: 0; cursor: pointer;
  transform: translate(-50%, -50%);
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #D8394A, #9A1222 55%, #5C0812);
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .18), inset 0 0 0 7px rgba(255, 200, 120, .18), 0 6px 18px rgba(0, 0, 0, .5);
  color: var(--gold-light); font: 700 clamp(1rem, 4vw, 1.25rem) var(--caps); letter-spacing: .04em;
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .45s ease;
}
/* a gold ring ripples out of the seal to invite the tap */
.seal::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--gold-light);
  animation: ripple 2.2s ease-out infinite;
}
@keyframes ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.tap { font-style: italic; color: var(--gold-light); opacity: .85; text-align: center; }
/* Om above the envelope, softly glowing */
.om {
  font: 400 clamp(2.8rem, 12vw, 4.2rem)/1 'Noto Serif Devanagari', 'Nirmala UI', 'Mangal', serif;
  color: var(--gold-light); text-align: center;
  text-shadow: 0 0 14px rgba(255, 200, 90, .75), 0 0 34px rgba(255, 160, 50, .4);
  animation: om-glow 3.6s ease-in-out infinite;
}
@keyframes om-glow { 50% { text-shadow: 0 0 20px rgba(255, 210, 100, .95), 0 0 50px rgba(255, 170, 60, .6); } }
.intro.open .om { opacity: 0; transition: opacity .6s; }
/* family label stuck on the envelope front, below the seal */
.sticker {
  position: absolute; left: 50%; bottom: 13%; z-index: 4;
  transform: translateX(-50%) rotate(-3deg);
  max-width: 84%; padding: .35em 1.1em; white-space: nowrap;
  font: 600 clamp(.85rem, 3.6vw, 1.1rem)/1.2 var(--serif); color: var(--maroon-deep);
  background: linear-gradient(135deg, #FFF3D2, var(--gold-light) 55%, #E9C46F);
  border-radius: 4px; outline: 1px dashed rgba(110, 20, 36, .55); outline-offset: -4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
  transition: opacity .4s;
}
.intro.open .sticker { opacity: 0; }
.intro.open .seal { transform: translate(-50%, -50%) scale(1.6) rotate(20deg); opacity: 0; pointer-events: none; }
.intro.open .seal::after { animation: none; opacity: 0; }
.intro.open .flap { transform: rotateX(180deg); z-index: 1; }
.intro.open .letter { transform: translateY(-52%); }
.intro.open .tap { opacity: 0; transition: opacity .3s; }
.intro.zoom .letter { transform: translateY(-30%) scale(2.4); opacity: 0; transition: transform .9s cubic-bezier(.6, 0, .3, 1), opacity .9s ease .1s; }
.intro.zoom .env-back, .intro.zoom .env-front, .intro.zoom .flap { opacity: 0; transition: opacity .5s; }

/* ---------- Effects canvas (petals + gold sparks) ---------- */
#fx { position: fixed; inset: 0; z-index: 55; pointer-events: none; width: 100%; height: 100%; }

/* ---------- Book ---------- */
.book { position: relative; height: calc(var(--vh) * 100 * var(--n, 1)); }
.stage {
  position: sticky; top: 0; height: calc(var(--vh) * 100);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: var(--top); overflow: hidden;
}
.spread { position: relative; width: var(--pw); height: var(--ph); }
.page {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d; will-change: transform;
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .spread { width: calc(var(--pw) * 2); }
  .page { left: 50%; width: 50%; }
}
.snaps { position: absolute; inset: 0; pointer-events: none; }
.snaps div { height: calc(var(--vh) * 100); scroll-snap-align: start; scroll-snap-stop: always; }

.face {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  container-type: size;
  border-radius: 2px 8px 8px 2px;
  background:
    repeating-linear-gradient(115deg, rgba(244, 216, 140, .04) 0 2px, transparent 2px 8px),
    radial-gradient(ellipse at 50% 20%, var(--kumkum) 0%, var(--maroon) 45%, var(--maroon-deep) 100%);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
}
.back { transform: rotateY(180deg); border-radius: 8px 2px 2px 8px; }
/* spine gutter + light as the page turns + shadow cast by the page above */
.face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 5%),
    linear-gradient(90deg, rgba(0, 0, 0, calc(var(--cast, 0) * .6)), rgba(0, 0, 0, 0) 85%),
    linear-gradient(270deg, rgba(255, 236, 190, calc(var(--turn, 0) * .22)), rgba(0, 0, 0, calc(var(--a, 0) * .55)) 70%);
}
.back::after {
  background:
    linear-gradient(270deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 5%),
    linear-gradient(90deg, rgba(255, 236, 190, calc(var(--turn, 0) * .18)), rgba(0, 0, 0, calc((1 - var(--a, 0)) * .55)) 70%);
}
/* thin gold border with small corner arcs */
.face::before {
  content: ""; position: absolute; inset: clamp(5px, 1.6cqmin, 10px); pointer-events: none; z-index: 1;
  border: 1px solid rgba(217, 164, 65, .75);
  background:
    radial-gradient(circle at 0 0, transparent 0 6px, var(--gold) 6px 7px, transparent 7px) top left / 16px 16px no-repeat,
    radial-gradient(circle at 100% 0, transparent 0 6px, var(--gold) 6px 7px, transparent 7px) top right / 16px 16px no-repeat,
    radial-gradient(circle at 0 100%, transparent 0 6px, var(--gold) 6px 7px, transparent 7px) bottom left / 16px 16px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 0 6px, var(--gold) 6px 7px, transparent 7px) bottom right / 16px 16px no-repeat;
}

/*
 * Every size inside a page is in em of the page's base size, so one number
 * (--fit, set by app.js) shrinks a page that would otherwise overflow.
 */
.frame {
  position: absolute; inset: clamp(5px, 1.6cqmin, 10px); z-index: 2;
  --base: clamp(15px, 4.7cqmin, 23px);
  font-size: calc(var(--base) * var(--fit, 1));
  line-height: 1.45;
  padding: max(10px, 1em) max(10px, .9em);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: clamp(.35em, 2cqh, 1em); text-align: center;
  overflow: hidden auto; scrollbar-width: none;
}
.frame::-webkit-scrollbar { display: none; }
.frame.tight { overflow-wrap: anywhere; } /* last resort if even the smallest size can't fit a word */
/* flexible spacers centre the content but can never push it above the top edge */
.frame::before, .frame::after { content: ""; flex: 1 1 0; min-height: 0; margin: calc(-1 * clamp(.35em, 2cqh, 1em)) 0; }
.album .frame::before, .album .frame::after { display: none; }
html[lang="te"] .frame { line-height: 1.6; }

/* Back of each page: silk lining with monogram */
.back-art {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(217, 164, 65, .07) 0 6deg, transparent 6deg 15deg),
    radial-gradient(circle at 50% 50%, var(--maroon) 0%, var(--maroon-deep) 75%);
}
.mono {
  width: 32cqmin; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--gold); outline: 1px solid rgba(217, 164, 65, .5); outline-offset: 5px;
  font: 500 8cqmin var(--caps); color: var(--gold); background: rgba(59, 9, 18, .7);
}

/* Content of a page rises in as the page is uncovered */
.frame > * { opacity: 0; transform: translateY(12px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.page.seen .frame > * { opacity: 1; transform: none; }
.page.seen .frame > :nth-child(2) { transition-delay: .1s; }
.page.seen .frame > :nth-child(3) { transition-delay: .2s; }
.page.seen .frame > :nth-child(4) { transition-delay: .3s; }
.page.seen .frame > :nth-child(5) { transition-delay: .4s; }
.page.seen .frame > :nth-child(6) { transition-delay: .5s; }
.page.seen .frame > :nth-child(n+7) { transition-delay: .6s; }
/* while app.js measures pages, show the final layout */
.fitting .frame > * { transform: none !important; transition: none !important; }

/* ---------- Shared type ---------- */
.section-head { font: 500 2em/1.1 var(--display); color: var(--gold-light); }
.small-head { font: 500 .8em/1.3 var(--caps); color: var(--gold); letter-spacing: .05em; }
html[lang="te"] .small-head, html[lang="te"] .blessing { letter-spacing: 0; font-family: var(--serif); font-weight: 600; }
.txt { font-size: 1.12em; max-width: 30ch; }
.shimmer {
  background: linear-gradient(100deg, #C8963A 20%, #FFF2C4 38%, #E2B455 50%, #C8963A 70%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.btn {
  display: inline-flex; align-items: center; gap: .35em; min-height: 40px;
  font: 600 .82em/1.1 var(--serif); text-decoration: none; cursor: pointer;
  color: var(--gold-light); background: transparent;
  border: 1px solid var(--gold); border-radius: 3px; padding: .55em .9em;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--gold); color: var(--maroon-deep); }

/* ---------- Small ornaments ---------- */
.lotus { width: 6.5em; height: auto; flex: none; }
.toran {
  position: absolute; top: clamp(5px, 1.6cqmin, 10px); left: clamp(5px, 1.6cqmin, 10px); right: clamp(5px, 1.6cqmin, 10px);
  height: clamp(26px, 6cqh, 44px); z-index: 3; transform-origin: top;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='70'%3E%3Cpath d='M0 8Q40 16 80 8' stroke='%23C8902F' stroke-width='2' fill='none'/%3E%3Cpath d='M40 12C26 30 30 52 40 66C50 52 54 30 40 12Z' fill='%233E6B35'/%3E%3Cpath d='M40 14V63' stroke='%2391B26B'/%3E%3Ccircle cx='0' cy='9' r='8' fill='%23F0A020'/%3E%3Ccircle cx='80' cy='9' r='8' fill='%23F0A020'/%3E%3Ccircle cx='0' cy='9' r='4' fill='%23D9640F'/%3E%3Ccircle cx='80' cy='9' r='4' fill='%23D9640F'/%3E%3C/svg%3E") repeat-x top center / auto 100%;
  animation: sway 6s ease-in-out infinite;
}
@keyframes sway { 50% { transform: skewX(1.5deg); } }
.diya {
  position: relative; display: inline-block; width: 1.9em; height: .7em; flex: none;
  background: radial-gradient(ellipse at 50% 0, #E07B39, #8A3B12 70%);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  margin-top: 1.1em;
}
.diya i {
  position: absolute; left: 50%; bottom: .5em; width: .55em; height: 1.1em; margin-left: -.275em;
  background: radial-gradient(ellipse at 50% 75%, #FFF6C2 0 22%, #FFC23A 45%, rgba(255, 120, 20, .85) 70%, transparent 72%);
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  filter: drop-shadow(0 0 8px rgba(255, 180, 60, .9));
  transform-origin: 50% 100%;
  animation: flicker 1.8s ease-in-out infinite alternate;
}
.diya:nth-child(2n) i { animation-duration: 1.3s; }
.diya:nth-child(3n) i { animation-duration: 2.2s; }
@keyframes flicker {
  0% { transform: scale(1, 1) rotate(-2deg); opacity: .95; }
  40% { transform: scale(.92, 1.08) rotate(2deg); }
  70% { transform: scale(1.04, .94) rotate(-1deg); opacity: 1; }
  100% { transform: scale(.97, 1.05) rotate(1deg); opacity: .9; }
}

/* ---------- Cover ---------- */
.cover .frame { gap: clamp(.4em, 2.6cqh, 1.4em); padding-top: max(2.2em, 7cqh); }
.emblem-wrap { position: relative; display: grid; place-items: center; }
.rays {
  position: absolute; width: 230%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(244, 216, 140, .2) 0 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 62%); mask: radial-gradient(circle, #000 0 18%, transparent 62%);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.emblem { position: relative; height: min(4.6em, 14cqh); width: auto; filter: drop-shadow(0 0 14px rgba(244, 216, 140, .3)); }
.blessing { white-space: nowrap; font: 500 .82em/1.3 var(--caps); color: var(--gold-light); letter-spacing: .05em; }
.shubhalekha { font: 500 1.25em var(--caps); color: var(--gold); letter-spacing: .14em; }
html[lang="te"] .shubhalekha { letter-spacing: 0; font: 400 1.7em var(--display); }
.cover-names { display: flex; flex-direction: column; align-items: center; gap: .15em; }
.name { font: italic 500 3.1em/1.05 var(--display); padding: 0 .12em .1em; }
html[lang="te"] .name { font-style: normal; font-size: 2.6em; line-height: 1.3; }
.cover-date { font: 600 1.2em var(--serif); color: var(--gold-light); }
.hint { font-size: .85em; font-style: italic; display: grid; justify-items: center; gap: .1em; }
.page.seen .hint { opacity: .75; }
.hint::after { content: ""; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px) rotate(45deg); } }

/* ---------- Invitation page ---------- */
.person { display: flex; flex-direction: column; align-items: center; }
.prefix { font: italic 500 1em var(--serif); color: var(--gold-light); }
.name-md { font: italic 500 2.3em/1.1 var(--display); padding: 0 .12em .08em; }
html[lang="te"] .name-md { font-style: normal; font-size: 2em; line-height: 1.35; }
.of { font-size: .95em; opacity: .85; max-width: 32ch; }

/* ---------- Kolam page: the date shows first, then the kolam draws around it and slowly turns ---------- */
.kolam-box { position: relative; display: grid; place-items: center; width: min(80cqw, 50cqh); flex: none; container-type: inline-size; }
.kolam-box > * { grid-area: 1 / 1; }
/* slow gold rays turning behind the kolam */
.kolam-rays {
  width: 125%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(244, 216, 140, .16) 0 3deg, transparent 3deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 30%, transparent 70%); mask: radial-gradient(circle, transparent 0 22%, #000 30%, transparent 70%);
  animation: spin 90s linear infinite reverse;
}
/* dark disc with a breathing gold glow, so the date reads clearly over everything */
.kolam-glow {
  width: 47%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #4A0B16 0%, #2A0509 72%);
  box-shadow: 0 0 0 1px rgba(244, 216, 140, .5), 0 0 6cqw rgba(244, 196, 90, .45), inset 0 0 5cqw rgba(0, 0, 0, .55);
  animation: glow 3.6s ease-in-out infinite;
}
@keyframes glow { 50% { box-shadow: 0 0 0 1px rgba(244, 216, 140, .8), 0 0 11cqw rgba(244, 196, 90, .7), inset 0 0 5cqw rgba(0, 0, 0, .55); } }
#kolam { width: 100%; height: auto; overflow: visible; }
.page.seen #kolam { animation: spin 120s linear 3.5s infinite; }
#kolam path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.4, 0, .2, 1) .9s; }
#kolam path:nth-child(2) { transition-delay: 1.2s; }
#kolam path:nth-child(3) { transition-delay: 1.4s; }
#kolam path:nth-child(4) { transition-delay: 1.8s; }
#kolam path:nth-child(5) { transition-delay: 2.2s; }
#kolam .dot { fill: var(--gold-light); opacity: 0; transition: opacity .6s 2.5s; }
.page.seen #kolam path { stroke-dashoffset: 0; }
.page.seen #kolam .dot { opacity: 1; }
.kolam-center { position: relative; width: 44%; display: grid; justify-items: center; line-height: 1.1; }
.kolam-center > * { opacity: 0; transform: scale(.85); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.page.seen .kolam-center > * { opacity: 1; transform: none; }
.page.seen .kolam-center > :nth-child(2) { transition-delay: .1s; }
.page.seen .kolam-center > :nth-child(3) { transition-delay: .2s; }
.page.seen .kolam-center > :nth-child(4) { transition-delay: .3s; }
.page.seen .kolam-center > :nth-child(5) { transition-delay: .4s; }
.k-label { font: 500 3cqw var(--caps); color: var(--gold); letter-spacing: .06em; }
.k-day { font: 500 4.2cqw var(--serif); color: var(--ivory); }
.k-num {
  font: 600 13cqw/.95 var(--display); color: #FFE9A8;
  text-shadow: 0 0 2cqw rgba(255, 200, 90, .85), 0 0 5cqw rgba(255, 170, 60, .5);
}
.k-date { font: 600 4.8cqw var(--display); color: var(--gold-light); }
.k-time { font: 700 5cqw var(--serif); color: #FFE9A8; margin-top: .3cqw; }
html[lang="te"] .k-label { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
.countdown { display: flex; justify-content: center; align-items: center; gap: .8em; }
.clock { display: flex; gap: .8em; margin-top: .2em; }
.clock div { display: flex; flex-direction: column; min-width: 2.2ch; }
.clock b { font: 600 2.1em/1 var(--display); color: var(--ivory); font-variant-numeric: lining-nums tabular-nums; }
.clock span { white-space: nowrap; font-size: .78em; color: var(--gold-light); }

/* ---------- Rituals page ---------- */
.ritual-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1em .8em; }
.ritual-list li { display: grid; justify-items: center; gap: .2em; align-content: start; }
.ritual-list svg { width: 2.3em; height: 2.3em; color: var(--gold-light); }
.ritual-list h3 { font: 600 1.18em/1.15 var(--display); color: var(--gold); }
.ritual-list p { font-size: .92em; line-height: 1.4; }

/* ---------- Event pages ---------- */
.e-day { font: 500 .9em var(--caps); color: var(--gold); letter-spacing: .05em; }
html[lang="te"] .e-day { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
.e-big { font: 500 4.4em/.9 var(--display); color: var(--gold-light); }
.e-month { font: 500 1.15em var(--serif); }
.e-title { font: 600 2em/1.1 var(--display); color: var(--ivory); }
.e-time { font: 700 1.35em var(--serif); color: var(--gold-light); }
.e-venue { font-size: 1.15em; max-width: 26ch; }
.e-note { font-size: 1.02em; font-style: italic; opacity: .85; }
.e-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .45em; margin-top: .2em; }
/* The muhurtham page keeps the book's maroon paper; only its date glows */
.main .e-big { color: #FFE9A8; text-shadow: 0 0 .25em rgba(255, 200, 90, .7), 0 0 .6em rgba(255, 170, 60, .35); }

/* ---------- Album pages ---------- */
.collage { flex: 1 1 0; min-height: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: .5em; padding: 4px; }
.collage > :first-child:nth-last-child(odd) { grid-column: span 2; }
.collage button { padding: 4px; border: 0; background: var(--ivory); cursor: zoom-in; min-height: 0; min-width: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.collage button:nth-child(2n) { transform: rotate(1deg); }
.collage button:nth-child(2n+1) { transform: rotate(-.8deg); }
.collage img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Back cover ---------- */
.frame .mono { width: 4.6em; font-size: 1.1em; }
.from { list-style: none; padding: 0; display: grid; gap: .25em; font-size: 1.2em; }
.diya-row { display: flex; justify-content: center; gap: .9em; }
.thanks { font: italic 500 1.55em/1.25 var(--display); color: var(--gold-light); max-width: 18ch; }

/* ---------- Short landscape phones: names side by side, rituals in a row ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .face::before { display: none; }
  .frame { gap: .3em; }
  .cover-names { flex-direction: row; gap: .6em; }
  .cover-names .lotus { width: 2.5em; }
  .hint, .frame > .lotus { display: none; }
  .ritual-list { grid-template-columns: repeat(4, 1fr); }
  .kolam-box { width: 52cqh; }
}

/* ---------- Swipe hint ---------- */
.swipe-hint {
  position: fixed; left: 50%; bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px)); z-index: 60;
  transform: translateX(-50%); pointer-events: none;
  display: grid; justify-items: center; gap: 8px;
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
}
.swipe-hint.show { opacity: 1; visibility: visible; }
.demo .cover .hint { opacity: 0 !important; } /* the swipe hint says it instead */
.swipe-hint p {
  font: italic 600 1rem/1.3 var(--serif); color: var(--maroon-deep); white-space: nowrap;
  background: var(--gold-light); padding: .45em 1.1em; border-radius: 99px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.swipe-track { position: relative; width: 70px; height: 120px; }
.hand {
  position: absolute; left: 50%; bottom: 0; width: 48px; margin-left: -18px;
  fill: #FFF7E8; stroke: var(--maroon-deep); stroke-width: 2; stroke-linejoin: round;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
  animation: swipe-hand 2.4s ease-in-out infinite;
}
/* the gold trail the fingertip leaves behind */
.swipe-trail {
  position: absolute; left: 50%; bottom: 46px; width: 6px; margin-left: -3px; height: 70px; border-radius: 3px;
  background: linear-gradient(to top, rgba(244, 216, 140, 0), rgba(244, 216, 140, .9));
  transform-origin: bottom; animation: swipe-trail 2.4s ease-in-out infinite;
}
@keyframes swipe-hand {
  0%, 15% { transform: translateY(0) scale(1); opacity: 0; }
  20% { transform: translateY(0) scale(.92); opacity: 1; }
  55% { transform: translateY(-62px) scale(.92); opacity: 1; }
  70%, 100% { transform: translateY(-70px) scale(1); opacity: 0; }
}
@keyframes swipe-trail {
  0%, 20% { transform: scaleY(0); opacity: 0; }
  55% { transform: scaleY(1); opacity: 1; }
  75%, 100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Lightbox ---------- */
dialog#lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 92vh; overflow: visible; }
dialog#lightbox::backdrop { background: rgba(30, 4, 9, .92); }
dialog#lightbox img { display: block; max-width: 94vw; max-height: 84vh; border: 6px solid var(--ivory); }
.lb-close { margin: 10px auto 0; display: block; font: 600 1rem var(--serif); background: var(--gold); color: var(--maroon-deep); border: 0; border-radius: 3px; padding: .6em 1.4em; cursor: pointer; }

/* Reduced motion: keep what the guest drives (envelope, page turns), drop ambient loops */
@media (prefers-reduced-motion: reduce) {
  .om, .env-float, .seal::after, .shimmer, .rays, .diya i, .hint::after, .toran,
  .kolam-rays, .kolam-glow, .page.seen #kolam { animation: none !important; }
}