/* site.css — everything below the film. Photography only: no drawn ornament,
   no inline vector art. All imagery lives in media/site/.

   The palette is the invitation card the film opens into: warm ivory paper,
   maroon ink, gold hairlines. The site must not read darker than the card
   that just flew out of the envelope. */

:root{
  --paper:#f6efe2;      /* page */
  --paper-2:#efe5d3;    /* alternating band */
  --card:#fdf9f0;       /* raised card */
  --ink:#5b4633;        /* body */
  --ink-2:#8b7358;      /* muted */
  --maroon:#8a2233;     /* headings */
  --maroon-deep:#5c1420;
  --gold:#b8892f;
  --line:rgba(138,98,52,.26);
  /* Marcellus for display — an inscriptional roman: stately, and it holds up
     over photography where a high-contrast garalde goes to mush.
     Lora for reading, Jost for the small uppercase labels. */
  --display:'Marcellus',Georgia,serif;
  --serif:'Lora',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --w:min(100vw,56.25vh);            /* the piece is a 9:16 column */
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:#0c0705;color:var(--ink);font-family:var(--serif);
  overflow:hidden;-webkit-font-smoothing:antialiased}

/* the two stacked columns: scrolling site, and the film on top of it */
.col{position:fixed;top:0;bottom:0;left:50%;width:var(--w);margin-left:calc(var(--w) / -2)}
#frame{overflow:hidden;background:var(--paper)}
body.opened #frame{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch}
#overlay{z-index:10;pointer-events:none;overflow:hidden;background:#0c0705}
#overlay.live{pointer-events:auto}

#film{width:100%;height:100%;object-fit:cover;transition:opacity .7s ease}
#film.gone{opacity:0}
#skip{position:absolute;right:14px;bottom:18px;z-index:12;padding:.55rem 1rem;border-radius:2px;
  background:rgba(10,6,7,.45);border:1px solid rgba(217,164,65,.45);color:#f0dcae;
  font-family:var(--sans);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;backdrop-filter:blur(6px)}
#skip.gone{display:none}

/* ── shared type ─────────────────────────────────────────────── */
section{position:relative;padding:13vh 7%}
.kicker{font-family:var(--sans);font-size:.56rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold)}
h2{font-family:var(--display);font-size:clamp(1.9rem,8.4vw,2.7rem);font-weight:400;
  line-height:1.16;margin:.55rem 0 0;color:var(--maroon)}
h3{font-family:var(--display);font-size:clamp(1.45rem,6.6vw,2rem);font-weight:400;
  line-height:1.2;color:var(--maroon)}
p{line-height:1.7}
.gold{color:var(--gold)}

/* reveal on scroll */
.up{opacity:0;transform:translateY(30px);filter:blur(5px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.up.in{opacity:1;transform:none;filter:none}

/* photo frames — the only decoration is the photograph itself */
.shot{position:relative;overflow:hidden;border-radius:3px;
  box-shadow:0 18px 40px rgba(92,60,30,.18)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;
  will-change:transform}     /* nudged by the parallax loop */

/* ── 1 · home — one plate, one depth map, a scripted camera ──── */
#home{padding:0;height:260vh}          /* the scrub track for the frame sequence */
.hero-stage{position:sticky;top:0;height:100dvh;display:grid;place-items:center;
  overflow:hidden;background:#efe6d6;isolation:isolate}
.hero-stage .plate,.hero-stage canvas{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.hero-stage canvas{opacity:0;transition:opacity 1.1s ease}
.hero-stage.gl canvas{opacity:1}
/* type never parallaxes — decoration moves, words do not */
.hero-stage .wash{position:absolute;inset:0;
  background:
    radial-gradient(78% 46% at 50% 50%,rgba(255,252,246,.88) 0%,rgba(255,251,242,.62) 46%,
                    rgba(255,250,240,.18) 72%,transparent 100%),
    linear-gradient(180deg,rgba(255,252,244,.12) 0%,rgba(255,250,238,.16) 44%,
                    rgba(250,242,226,.52) 82%,rgba(246,239,226,.94) 100%)}
.hero-stage .in{position:relative;z-index:2;text-align:center;width:100%;padding:0 8%}

.hero-stage .kicker{opacity:0;transform:translateY(14px);color:#9a6413;font-weight:500}
.names{font-family:var(--display);margin-top:1rem;font-size:clamp(2.5rem,13vw,4.4rem);
  line-height:1.02;font-weight:400;letter-spacing:.005em;color:#65121f;perspective:600px}
.names span{display:block}
.names i{display:block;font-family:var(--serif);font-size:.28em;color:var(--gold);
  font-style:italic;margin:.22em 0}
.names .c{display:inline-block;opacity:0;transform:translateY(.42em) rotateX(-55deg);
  transform-origin:50% 100%}
.names .w{display:inline-block;white-space:nowrap}

.hero-stage .rule{display:block;width:56%;max-width:220px;height:1px;margin:1.6rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0)}
.hero-stage .meta > *{opacity:0;transform:translateY(14px)}
.when{margin-top:1.4rem;font-size:1.02rem;letter-spacing:.01em;color:#4a3a2a}
.where{margin-top:.3rem;font-size:.9rem;color:#7a6448}
.hero-stage .scrollcue{position:absolute;left:0;right:0;bottom:5vh;z-index:2;opacity:0;
  font-family:var(--sans);font-size:.54rem;letter-spacing:.3em;text-align:center;
  text-transform:uppercase;color:var(--ink-2);animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px)}}

/* no WebGL2, or reduced motion: the plate and the type still carry it */
.hero-stage.ready .kicker,.hero-stage.ready .meta > *{opacity:1;transform:none}
.hero-stage.ready .names .c{opacity:1;transform:none}
.hero-stage.ready .rule{transform:scaleX(1)}
.hero-stage.ready .scrollcue{opacity:.75}

/* ── 2 · countdown ───────────────────────────────────────────── */
#count{text-align:center;background:var(--paper-2)}
.cd{display:flex;justify-content:center;gap:.6rem;margin-top:1.7rem}
.cd div{flex:1;max-width:88px;padding:.95rem .2rem;border:1px solid var(--line);
  border-radius:3px;background:var(--card)}
.cd b{display:block;font-family:var(--display);font-size:1.6rem;font-weight:400;color:var(--maroon)}
.cd small{font-family:var(--sans);font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.muhurat{margin-top:1.5rem;font-size:.95rem;color:var(--ink-2)}

/* ── 3 · story ───────────────────────────────────────────────── */
#story{background:var(--paper)}
.chapter{margin-top:3.2rem}
.chapter:first-of-type{margin-top:2.2rem}
.chapter .shot{aspect-ratio:3/4;margin-bottom:1.4rem}
.chapter .no{font-family:var(--sans);font-size:.56rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold)}
.chapter h3{margin-top:.35rem}
.chapter p{margin-top:.7rem;color:var(--ink-2)}

/* ── 4 · functions ───────────────────────────────────────────── */
#events{background:var(--paper-2)}
.ev{margin-top:2.2rem;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:var(--card);box-shadow:0 14px 34px rgba(92,60,30,.10)}
.ev .shot{aspect-ratio:4/3;border-radius:0;box-shadow:none}
.ev .body{padding:1.5rem 1.3rem 1.7rem}
.ev h3{margin-bottom:.5rem}
.ev .meta{font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold)}
.ev .venue{margin-top:.45rem;font-size:1.02rem}
.ev .note{margin-top:.7rem;font-size:.95rem;color:var(--ink-2);font-style:italic}
.ev .dress{margin-top:.95rem;padding-top:.85rem;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}

/* ── 5 · send a wish ─────────────────────────────────────────── */
#wishes{background:var(--paper);text-align:center}
#wishes .lede{margin-top:.8rem;color:var(--ink-2);font-size:1.05rem}
.card{position:relative;margin-top:1.9rem;padding:2rem 1.4rem;border-radius:4px;
  text-align:left;overflow:hidden;background:var(--card);
  border:1px solid var(--line);box-shadow:0 18px 44px rgba(92,60,30,.14)}
form{display:grid;gap:.7rem}
input,select,textarea{width:100%;padding:.9rem;border-radius:3px;font:inherit;
  font-size:1rem;color:var(--ink);background:#fffdf8;
  border:1px solid var(--line);resize:vertical}
::placeholder{color:rgba(139,115,88,.7)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,137,47,.18)}
button.send{margin-top:.4rem;padding:1.05rem;border:none;border-radius:3px;cursor:pointer;
  background:linear-gradient(180deg,var(--maroon),var(--maroon-deep));color:#f6e6c8;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.sent{margin-top:.7rem;text-align:center;color:var(--maroon);font-size:.98rem}

/* the wishes already left */
.wall{margin-top:1.8rem;display:grid;gap:.7rem;text-align:left}
.wish{padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:3px;
  background:var(--card)}
.wish p{font-size:1rem;font-style:italic}
.wish b{display:block;margin-top:.55rem;font-family:var(--sans);font-weight:400;
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ── 6 · travel ──────────────────────────────────────────────── */
#travel{background:var(--paper-2)}
#travel .shot{aspect-ratio:4/3;margin-top:1.6rem}
.tcard{margin-top:.8rem;padding:1.15rem 1.2rem;border-radius:3px;
  border:1px solid var(--line);background:var(--card)}
.tcard h4{font-family:var(--display);font-size:1.14rem;font-weight:400;color:var(--maroon)}
.tcard p{margin-top:.3rem;font-size:.96rem;color:var(--ink-2)}

/* ── 7 · gallery ─────────────────────────────────────────────── */
#gallery{background:var(--paper)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.7rem}
.grid .shot{aspect-ratio:1}
#gallery .note{margin-top:1.3rem;font-size:.9rem;color:var(--ink-2);text-align:center}

/* ── 8 · footer ──────────────────────────────────────────────── */
footer{padding:12vh 7% 10vh;text-align:center;background:var(--paper-2);
  border-top:1px solid var(--line)}
footer .fam{margin-top:1.4rem;font-size:1.05rem;line-height:1.9}
footer a{color:var(--maroon);text-decoration:none;border-bottom:1px solid var(--line)}
footer .hash{margin-top:2rem;font-family:var(--sans);font-size:.56rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .up{opacity:1;transform:none;filter:none}
}

/* ── the evening, as a rail ──────────────────────────────────── */
#evening{background:var(--paper)}
.rail{list-style:none;padding:0;margin:2rem 0 0}
.rail li{position:relative;display:grid;grid-template-columns:5.2rem 1fr;gap:1.6rem;
  padding:0 0 1.9rem}
.rail li::before{content:"";position:absolute;left:5.9rem;top:.55rem;bottom:-.3rem;
  width:1px;background:var(--line)}
.rail li:last-child::before{display:none}
.rail li::after{content:"";position:absolute;left:5.66rem;top:.42rem;width:7px;height:7px;
  border-radius:50%;background:var(--paper);border:1px solid var(--gold)}
.rail li.now::after{background:var(--gold);box-shadow:0 0 0 4px rgba(184,137,47,.16)}
.rail .t{font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);padding-top:.15rem;text-align:right}
.rail h4{font-family:var(--display);font-size:1.16rem;font-weight:400;color:var(--maroon);line-height:1.3}
.rail p{margin-top:.3rem;font-size:.96rem;color:var(--ink-2)}

/* ── plan your evening ───────────────────────────────────────── */
#plan{background:var(--paper-2);text-align:center}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.8rem}
.tile{display:grid;align-content:center;gap:.4rem;padding:1.6rem 1rem;border-radius:4px;
  border:1px solid var(--line);background:var(--card);text-decoration:none;color:inherit;
  transition:transform .3s ease,box-shadow .3s ease}
.tile:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(92,60,30,.14)}
.tile.wide{grid-column:1 / -1}
.tile b{font-family:var(--display);font-weight:400;font-size:1.14rem;color:var(--maroon)}
.tile span{font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2)}


/* ── full-bleed pages: story chapters and functions ──────────── */
.page{position:relative;height:100dvh;padding:0;overflow:hidden;display:grid;
  align-items:end;isolation:isolate}
.page .bg{position:absolute;inset:0;z-index:0}
.page .bg img{width:100%;height:100%;object-fit:cover;display:block;
  will-change:transform,filter,clip-path}
.page .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,10,6,.12) 0%,rgba(20,10,6,.06) 28%,
                             rgba(24,12,7,.55) 58%,rgba(16,8,5,.88) 82%,
                             rgba(12,6,4,.96) 100%)}
.page .in{position:relative;z-index:2;padding:0 8% 12vh;color:#f7efe2;
  max-width:34rem}
.page .no{font-family:var(--sans);font-size:.56rem;letter-spacing:.3em;
  text-transform:uppercase;color:#f0cf8e;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.page .ttl{font-family:var(--display);margin:.7rem 0 0;font-size:clamp(1.9rem,9vw,2.9rem);font-weight:400;
  line-height:1.08;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.page .ttl .w{display:inline-block;white-space:nowrap}
.page .ttl .c{display:inline-block}
.page .body{margin-top:.9rem;font-size:1.03rem;line-height:1.6;color:rgba(247,239,226,.9);
  text-shadow:0 1px 16px rgba(0,0,0,.6)}
.page .meta{margin-top:.9rem;font-family:var(--sans);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:#f0cf8e;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.page .venue{margin-top:.35rem;font-size:1.08rem;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.page .dress{margin-top:1.1rem;padding-top:.9rem;font-family:var(--sans);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(247,239,226,.78);
  text-shadow:0 1px 14px rgba(0,0,0,.7);
  border-top:1px solid rgba(233,195,124,.3)}
/* no GSAP: everything is simply visible */
.page.ready .ttl,.page.ready .no,.page.ready .body,.page.ready .meta,
.page.ready .venue,.page.ready .dress{opacity:1}

#events-intro{background:var(--paper-2);text-align:center;padding:16vh 7%}

/* ── scratch-to-reveal date card ─────────────────────────────── */
#scratch{background:var(--paper);text-align:center}
.scratch-card{position:relative;margin:2rem auto 0;width:100%;aspect-ratio:4/3;
  border-radius:5px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#fdf9f0,#f2e8d4);
  box-shadow:0 20px 46px rgba(92,60,30,.16)}
.scratch-card .under{position:absolute;inset:0;display:grid;align-content:center;
  gap:.5rem;padding:1.4rem}
.under .lbl{font-family:var(--sans);font-size:.54rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold)}
.under .date{display:flex;justify-content:center;align-items:baseline;gap:.5rem;
  font-family:var(--display);font-size:clamp(2.1rem,11.5vw,3.2rem);line-height:1;color:var(--maroon)}
.under .date i{font-style:normal;font-size:.42em;color:var(--gold)}
.under .sub{margin-top:.3rem;font-size:1.05rem}
.under .place{font-size:.9rem;color:var(--ink-2)}

#foil{position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:none;cursor:grab;transition:opacity .8s ease}
#foil.gone{opacity:0;pointer-events:none}
.scratch-card .prompt{position:absolute;left:0;right:0;bottom:14%;pointer-events:none;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:#6b4a12;transition:opacity .4s ease}
.scratch-card .prompt .star{color:#8a6a1c}
.scratch-card.scratched .prompt{opacity:0}

.reveal-all{margin-top:1.1rem;padding:.55rem 1rem;border-radius:3px;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--sans);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase}
.reveal-all.gone{display:none}

/* ── sound toggle ────────────────────────────────────────────── */
#sound{position:fixed;z-index:30;right:calc(50% - var(--w)/2 + 14px);top:16px;
  display:flex;align-items:center;gap:.45rem;padding:.5rem .8rem;border-radius:100px;
  cursor:pointer;background:rgba(12,7,5,.5);border:1px solid rgba(217,164,65,.45);
  color:#f0dcae;font-family:var(--sans);font-size:.54rem;letter-spacing:.18em;
  text-transform:uppercase;backdrop-filter:blur(8px);transition:opacity .4s ease}
#sound span{font-size:.8rem;line-height:1}
#sound[aria-pressed="true"]{background:rgba(138,34,51,.55);color:#fff}
body.opened #sound{background:rgba(253,249,240,.82);border-color:var(--line);
  color:var(--ink-2)}
body.opened #sound[aria-pressed="true"]{background:var(--maroon);color:#f6e6c8;
  border-color:var(--maroon)}

/* ── travel: where to stay ─────────────────────────────────────
   A hotel block is a decision, not a paragraph: the name, what it costs,
   what to say when booking, and the two things a guest actually taps. */
#travel .kicker.stay{margin-top:2.4rem}
.hotel{margin-top:.8rem;padding:1.15rem 1.2rem;border-radius:3px;
  background:var(--card);border:1px solid var(--line)}
.hotel h4{font-family:var(--display);font-size:1.14rem;font-weight:400;color:var(--maroon)}
.hotel .hmeta{margin-top:.25rem;font-family:var(--sans);font-weight:300;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.hotel .hprice{margin-top:.55rem;font-size:1rem;color:var(--ink)}
.hotel .hhold{margin-top:.2rem;font-size:.92rem;color:var(--ink-2)}
.hotel .hhold b{font-weight:500;color:var(--gold);letter-spacing:.04em}
.hotel .hlinks{display:flex;gap:.5rem;margin-top:.9rem}
.hotel .hlinks a{flex:1;padding:.55rem;border:1px solid var(--line);border-radius:3px;
  text-align:center;text-decoration:none;font-family:var(--sans);font-weight:400;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.hotel .hlinks a:hover{border-color:var(--gold);color:var(--maroon)}
.hotel .hlinks a[hidden]{display:none}

/* ── gifts & blessings ─────────────────────────────────────────
   Shagun is given to a SIDE, so each family gets its own card. The QR is the
   loudest thing here because it is the thing a phone is actually pointed at. */
#gifts{background:var(--paper-2);text-align:center}
#gifts .lede{margin-top:.8rem;color:var(--ink-2);font-size:1.05rem}
.shagun{margin-top:1.6rem;padding:1.6rem 1.3rem;border-radius:4px;
  background:var(--card);border:1px solid var(--line)}
.shagun .skicker{font-family:var(--sans);font-size:.56rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold)}
.shagun .qr{display:block;width:min(190px,58%);height:auto;margin:1.1rem auto .9rem;
  border:1px solid var(--line);border-radius:3px;background:var(--card)}
.shagun .qr[hidden]{display:none}
.shagun .upi{display:flex;align-items:stretch;gap:.4rem;justify-content:center;
  max-width:20rem;margin:0 auto}
.shagun .upi[hidden]{display:none}
.shagun .upi code{flex:1;min-width:0;padding:.5rem .6rem;border:1px solid var(--line);
  border-radius:3px;background:var(--paper);font-family:var(--sans);font-size:.82rem;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
.shagun .copy{padding:.5rem .8rem;border:1px solid var(--line);border-radius:3px;
  background:none;cursor:pointer;font-family:var(--sans);font-weight:400;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.shagun .copy:hover{border-color:var(--gold);color:var(--maroon)}
.shagun .pay{display:block;max-width:20rem;margin:.55rem auto 0;padding:.7rem;
  border-radius:3px;background:var(--maroon);color:var(--card);text-decoration:none;
  font-family:var(--sans);font-weight:400;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase}
.shagun .pay[hidden]{display:none}
.shagun .swho{margin-top:.9rem;font-style:italic;font-size:.95rem;color:var(--ink-2)}
#gifts .regnote{margin-top:2.2rem;font-size:.95rem;color:var(--ink-2)}
#gifts .regnote[hidden]{display:none}
#gifts .reg{display:block;margin-top:.6rem;padding:.85rem;border:1px solid var(--line);
  border-radius:3px;text-decoration:none;color:var(--maroon);font-size:.98rem}
#gifts .reg:hover{border-color:var(--gold)}


/* ── the opening film, played live ─────────────────────────────
   Each composition is authored at 1080x1920 and scaled from its top-left to
   the width of the column, so the frame lands exactly whatever the device. */
#stage{position:absolute;inset:0;overflow:hidden;opacity:0;background:#0c0705}
#stage.on{opacity:1}
/* Beats crossfade rather than cut. The render dissolved between scenes; a
   hard swap between an iframe and a video reads as a flash of black. */
.shot-frame{position:absolute;top:0;left:0;width:1080px;height:1920px;border:0;
  transform-origin:0 0;opacity:0;pointer-events:none;transition:opacity .3s linear}
video.shot-frame{object-fit:cover;background:#0c0705}
.shot-frame.live{opacity:1}

/* ── Hindi / Marathi ───────────────────────────────────────────
   Marcellus and Lora carry no Devanagari. When the invitation is in Hindi
   or Marathi, a designed Devanagari serif takes the display and body roles;
   Latin glyphs in names still fall through to the original faces. */
html[lang="hi"]{--display:'Tiro Devanagari Hindi','Marcellus',serif;--serif:'Tiro Devanagari Hindi','Lora',serif}
html[lang="mr"]{--display:'Tiro Devanagari Marathi','Marcellus',serif;--serif:'Tiro Devanagari Marathi','Lora',serif}
html[lang="hi"] .kicker,html[lang="mr"] .kicker,
html[lang="hi"] .t-label,html[lang="mr"] .t-label{letter-spacing:.12em}