/* ============================================================
   WEDDING INVITATION - CSS
   ============================================================

   Beginner guide:
   1. :root contains the main colors and fonts.
   2. Change those variables to quickly change the theme.
   3. Each section below has a comment such as HERO, EVENTS, RSVP.
   4. Mobile styles are at the bottom inside @media.

   ============================================================ */

:root{--iv:#f7efdc;--iv2:#efe2c4;--mar:#6b1d1d;--verm:#b3372a;--tur:#c9962b;--grn:#4a6b3a;--gold:#a8842f;--ink:#3b2a1e;--en:'Cormorant Garamond','Times New Roman',serif;--te:'Tiro Telugu','Noto Serif Telugu',serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--iv);color:var(--ink);font:1.1rem/1.65 var(--en);overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit}
.te{font-family:var(--te);color:var(--verm);margin:0}
h1,h2,h3{font-family:var(--en);font-weight:600;color:var(--mar);margin:.2em 0;line-height:1.15}
nav{position:sticky;top:0;z-index:20;background:var(--iv);border-bottom:1px solid var(--gold);display:flex;justify-content:center;gap:1.6rem;padding:.7rem 1rem}
nav a{text-decoration:none;font-size:1.1rem;color:var(--mar);padding:.2rem 0}
nav a:hover{border-bottom:1px solid var(--verm)}
#bg{display:none;background:none;border:0;font-size:1.6rem;color:var(--mar);cursor:pointer;padding:.3rem .6rem}
section{padding:4.5rem 1.2rem;position:relative}
.wrap{max-width:980px;margin:auto}
.hd{text-align:center;margin-bottom:2.2rem}.hd h2{font-size:2.4rem}.hd .te{font-size:1.3rem}
.lot{display:block;margin:.5rem auto;width:46px;height:auto}
.btn{display:inline-block;background:var(--mar);color:var(--iv);border:1px solid var(--mar);padding:.65rem 1.4rem;text-decoration:none;font:600 1.05rem var(--en);cursor:pointer;min-height:44px;letter-spacing:.03em}
.btn:hover{background:var(--verm);border-color:var(--verm)}.btn.o{background:none;color:var(--mar)}.btn.o:hover{background:var(--mar);color:var(--iv)}
/* hero */
#home{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem 1rem;overflow:hidden}
.card{position:relative;background:#fbf5e4;max-width:540px;width:100%;text-align:center;border:2px solid var(--mar);outline:1px solid var(--gold);outline-offset:-9px;padding:0 1.5rem 2.2rem;animation:rise 1.4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tor{margin:0 -1.5rem;line-height:0}.tor svg{width:100%;height:auto}
.inv{font-size:1.45rem;line-height:1.9;margin:.6rem 0}
.names{font:italic 500 3.3rem/1.05 var(--en);color:var(--mar);margin:.4rem 0}.names i{display:block;font-size:1.6rem;color:var(--tur);font-style:normal}
.frame{border:1px solid var(--gold);padding:8px;background:var(--iv);margin:1.2rem auto;max-width:330px}.frame img{width:100%;max-height:300px;object-fit:cover;object-position:top}
.date{font-size:1.5rem;color:var(--verm);margin:.3rem 0 1rem}
.petal{position:absolute;top:-20px;width:10px;height:10px;border-radius:60% 0 60% 0;opacity:.7;pointer-events:none;animation:fall linear infinite;z-index:3}
@keyframes fall{0%{transform:translate(0,-5vh) rotate(0)}50%{transform:translate(40px,55vh) rotate(180deg)}100%{transform:translate(-20px,110vh) rotate(360deg)}}
/* story */
#story{background:var(--iv2);text-align:center}#story p.s{max-width:620px;margin:1rem auto;font-size:1.3rem}
/* events */
.tl{position:relative;display:grid;gap:2.2rem}.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--gold)}
.ev{position:relative;display:flex;background:#fbf5e4;border:1px solid var(--gold);outline:1px solid var(--iv2);outline-offset:-6px;width:100%}
.ev.r{flex-direction:row-reverse}
.ev .art{flex:0 0 38%;background:var(--iv2);display:flex;align-items:center;justify-content:center;padding:.8rem}.ev .art img{max-height:280px;width:auto;object-fit:contain}.ev .art svg{width:110px;height:110px}
.ev .tx{padding:1.5rem 1.6rem;flex:1}.ev h3{font-size:1.9rem}.ev .te{font-size:1.15rem}
.meta{color:var(--verm);font-weight:600;margin:.3rem 0}.ven{margin:.5rem 0}.btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.ev.main{background:var(--mar);border-color:var(--tur);color:var(--iv);outline-color:var(--tur)}.ev.main h3,.ev.main .te,.ev.main .meta{color:#f3d58c}.ev.main .art{background:#8a2a25}.ev.main .btn{background:var(--tur);border-color:var(--tur);color:var(--mar)}.ev.main .btn.o{background:none;color:var(--iv);border-color:var(--iv)}
.mant{font-family:var(--te);color:#f3d58c;margin:.4rem 0}
/* countdown */
#count{background:var(--tur);color:var(--mar);text-align:center;background-image:radial-gradient(circle,rgba(107,29,29,.12) 1.5px,transparent 2px);background-size:22px 22px}
#count .te{color:var(--mar)}
.cd{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}.cd div{background:var(--iv);border:2px solid var(--mar);min-width:96px;padding:.8rem .4rem}.cd b{display:block;font:600 2.6rem/1 var(--en);color:var(--mar)}.cd span{font-size:.95rem;letter-spacing:.12em}
/* venue */
#venue .wrap{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;text-align:center}#venue svg.tm{width:100%;max-width:300px;margin:auto}#venue h3{font-size:2rem}
/* family */
#family{background:var(--iv2)}.fam{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.fam div{border:1px solid var(--gold);background:#fbf5e4;padding:1.6rem;text-align:center;outline:1px solid var(--iv2);outline-offset:-6px}.fam h3{font-size:1.5rem}.fam p{white-space:pre-line}
/* blessing */
#bless{background:var(--mar);color:var(--iv);text-align:center}#bless .te{color:#f3d58c;font-size:1.35rem;line-height:2;margin-top:1.4rem}#bless p.q{font:italic 500 1.9rem/1.4 var(--en);max-width:560px;margin:1rem auto}
/* gallery */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.5rem}.chip{background:none;border:1px solid var(--gold);color:var(--mar);padding:.35rem 1rem;font:1rem var(--en);cursor:pointer}.chip.on{background:var(--mar);color:var(--iv)}
.gal{columns:3 220px;column-gap:1.2rem}.gal figure{margin:0 0 1.2rem;break-inside:avoid;background:#fff9ea;border:1px solid var(--gold);padding:8px 8px 22px;transform:rotate(-.6deg)}.gal figure:nth-child(even){transform:rotate(.7deg)}.gal img{width:100%}.gal figcaption{text-align:center;font-size:.95rem;color:var(--gold);margin-top:6px}
.empty{text-align:center;border:1px dashed var(--gold);padding:2rem}
/* rsvp */
#rsvp{background:var(--iv2)}form.rs{max-width:520px;margin:auto;display:grid;gap:1rem}
label{display:grid;gap:.25rem;font-weight:600;color:var(--mar)}
input,select,textarea{font:1.05rem var(--en);padding:.6rem;border:1px solid var(--gold);background:#fffaf0;color:var(--ink);width:100%}
textarea{min-height:90px}.ok{text-align:center;font-size:1.4rem;color:var(--grn);padding:1.5rem;border:1px solid var(--grn)}
footer{text-align:center;padding:2rem;background:var(--mar);color:#f3d58c}footer a{opacity:.7;font-size:.9rem}
#mus{position:fixed;right:14px;bottom:14px;z-index:30;background:var(--iv);border:1px solid var(--mar);color:var(--mar);padding:.5rem 1rem;font:1.05rem var(--en);cursor:pointer;min-height:44px}
/* admin */
#adm{display:none;position:fixed;inset:0;z-index:100;background:#f4ecd8;overflow:auto;padding:1rem}
#adm .in{max-width:820px;margin:auto}#adm h2{margin-top:2rem;border-bottom:1px solid var(--gold)}
#adm .g{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}#adm fieldset{border:1px solid var(--gold);margin:1rem 0;padding:1rem}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.5rem 0}.sm{padding:.3rem .8rem;min-height:36px;font-size:.95rem}
table{width:100%;border-collapse:collapse;font-size:1rem}td,th{border:1px solid var(--gold);padding:.4rem;text-align:left}
.th{width:70px;height:70px;object-fit:cover;border:1px solid var(--gold)}
@media(max-width:760px){
nav{justify-content:space-between;flex-wrap:wrap;gap:0}#bg{display:block;margin-left:auto}nav a{display:none;width:100%;padding:.7rem}nav.open a{display:block}nav b{font:italic 600 1.3rem var(--en);color:var(--mar)}
section{padding:3rem 1rem}.names{font-size:2.8rem}.tl::before{left:8px}.ev,.ev.r{flex-direction:column;margin-left:22px;width:calc(100% - 22px)}.ev .art{flex-basis:auto}
#venue .wrap,.fam,#adm .g{grid-template-columns:1fr}.hd h2{font-size:2rem}}
@media(min-width:761px){nav b{display:none}}
@media(prefers-reduced-motion:reduce){.petal{display:none}*{animation:none!important;scroll-behavior:auto}}