/* Shared base for every wedding template. Templates override the variables and decorate on top. */
:root{
  --bg:#faf7f2;--bg2:#f1ebe2;--ink:#2b2321;--muted:#7a6e69;--accent:#7a2a3a;--accent2:#b99567;--accent-ink:#fff;
  --line:rgba(0,0,0,.14);--card:#fff;--radius:14px;
  --font-head:Georgia,'Times New Roman',serif;--font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--font-script:var(--font-head);
  --maxw:1080px;--gut:clamp(18px,5vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 clamp(16px,1.1vw + 12px,18px)/1.7 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.has-intro{overflow:hidden;height:100vh;height:100dvh}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);font-weight:500;line-height:1.15;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(56px,10vw,110px) 0;position:relative}
.sec-head{text-align:center;margin-bottom:clamp(28px,5vw,56px)}
.sec-head h2{font-size:clamp(30px,5.5vw,52px)}
.kicker{font-size:.78em;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0 0 .8em}
.orn{display:block;width:90px;height:14px;margin:18px auto 0;background:linear-gradient(var(--accent2),var(--accent2)) center/100% 1px no-repeat;position:relative}
.orn::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--bg);border:1px solid var(--accent2);transform:translate(-50%,-50%) rotate(45deg)}
.lead{font-size:1.12em;color:var(--ink);max-width:620px;margin-left:auto;margin-right:auto}
.invite{text-align:center;max-width:720px;margin:0 auto}
.invite h2{font-size:clamp(28px,5vw,46px)}
.invite .lead{margin-top:1.6em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.78em 1.5em;border-radius:999px;border:1px solid var(--accent);background:transparent;color:var(--accent);font:600 .82em/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.btn:hover{background:var(--accent);color:var(--accent-ink)}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--accent);color:var(--accent-ink)}
.btn-solid:hover{filter:brightness(1.12)}
.btn-ghost{padding:.65em 1.2em;font-size:.72em}

/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.js .reveal.in{opacity:1;transform:none}

/* countdown */
.countdown{display:flex;justify-content:center;gap:clamp(10px,3vw,26px);flex-wrap:wrap}
.cd{min-width:64px;text-align:center}
.cd b{display:block;font:500 clamp(30px,6vw,52px)/1 var(--font-head);font-variant-numeric:tabular-nums}
.cd span{display:block;margin-top:6px;font-size:.66em;letter-spacing:.24em;text-transform:uppercase;opacity:.75}

/* events */
.events{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.event{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center;position:relative}
.event h3{font-size:1.7em;margin-bottom:.35em}
.event-no{position:absolute;top:14px;left:18px;font:500 .8em var(--font-head);color:var(--accent2);letter-spacing:.15em}
.event-when{font-weight:600;letter-spacing:.04em;margin-bottom:.6em}
.event-venue{font-family:var(--font-head);font-size:1.15em;margin-bottom:.1em}
.event-addr,.event-notes{color:var(--muted);font-size:.92em}
.event-dress{font-size:.9em;margin:.4em 0}
.event-dress span,.code span{font-size:.72em;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-right:.4em}
.event-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* story timeline */
.story{list-style:none;margin:0;padding:0;position:relative;max-width:860px;margin-inline:auto}
.story::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-.5px)}
.story-item{position:relative;display:flex;justify-content:flex-start;padding:0 0 clamp(28px,5vw,50px)}
.story-item.alt{justify-content:flex-end}
.story-card{width:calc(50% - 38px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.story-card h3{font-size:1.45em;margin-bottom:.3em}
.story-card p:last-child{margin:0;color:var(--muted)}
.story-when{font-size:.74em;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:.5em}
.story-img{aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--radius) - 4px);margin-bottom:14px}
.story-img img{width:100%;height:100%;object-fit:cover}
.story-dot{position:absolute;left:50%;top:26px;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--bg);transform:translateX(-50%)}
@media(max-width:700px){
  .story::before{left:11px}.story-dot{left:11px}
  .story-item,.story-item.alt{justify-content:flex-end}
  .story-card{width:calc(100% - 40px)}
}

/* travel + stays */
.travel-text{max-width:640px;margin:0 auto 34px;text-align:center}
.stays{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.stay{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.stay h3{font-size:1.4em;margin-bottom:.4em}
.stay p{color:var(--muted);font-size:.94em}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}
.g-item{margin:0;position:relative;overflow:hidden;border-radius:calc(var(--radius) - 4px);aspect-ratio:4/5;background:var(--bg2)}
.g-item.g0,.g-item.g3{aspect-ratio:1/1.25}
.g-item a{display:block;height:100%}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.g-item:hover img{transform:scale(1.06)}
.g-item figcaption{position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;color:#fff;font-size:.82em;letter-spacing:.06em;background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transition:opacity .4s}
.g-item:hover figcaption,.g-item:focus-within figcaption{opacity:1}
.g-ph{height:100%;display:grid;place-items:center;background:linear-gradient(145deg,var(--bg2),color-mix(in srgb,var(--accent2) 30%,var(--bg)));color:var(--accent);font:italic 500 2em var(--font-head);opacity:.85}

/* rsvp */
.rsvp-intro{text-align:center;max-width:560px;margin:0 auto}
.rsvp-by{text-align:center;font-size:.78em;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:1.4em 0 1.8em}
.rsvp-form{max-width:600px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);padding:clamp(22px,5vw,40px)}
.f{margin:0 0 18px;border:0;padding:0;min-width:0}
.f label,.f legend{display:block;font-size:.76em;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;padding:0}
.f i{text-transform:none;letter-spacing:0;opacity:.7}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input:not([type]),.f select,.f textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.f-row{grid-template-columns:1fr}}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice legend{grid-column:1/-1}
.pill input,.check input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:block;text-align:center;padding:13px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:.92em;letter-spacing:0;text-transform:none;color:var(--ink);transition:.2s}
.pill input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pill input:focus-visible+span,.check input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.checks{display:grid;gap:8px}
.check span{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--ink);letter-spacing:0;text-transform:none;font-size:.95em}
.check span::before{content:"";width:18px;height:18px;border:1.5px solid var(--accent);border-radius:5px;flex:none;transition:.2s}
.check input:checked+span::before{background:var(--accent);box-shadow:inset 0 0 0 3px var(--card)}
.if-yes.off{display:none}
.hp{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0;clip-path:inset(50%);pointer-events:none}
.rsvp-form .btn{width:100%;padding:1.1em}
.form-msg{margin:14px 0 0;text-align:center;font-size:.92em;min-height:1.2em;color:#b3261e}
.demo-note{text-align:center;font-size:.8em;color:var(--muted);margin:10px 0 0}
.rsvp-done{text-align:center;max-width:520px;margin:0 auto;padding:30px 0}
.rsvp-done h3{font-size:1.7em;margin-top:12px}

/* faq */
.faq{max-width:720px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font:500 1.2em var(--font-head);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:300 1.6em var(--font-body);color:var(--accent);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 18px}

/* registry */
.registry-text{max-width:560px;margin:0 auto 30px;text-align:center}
.registry{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.gift{display:block;min-width:230px;text-align:center;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;transition:transform .3s,border-color .3s}
.gift:hover{transform:translateY(-4px);border-color:var(--accent)}
.gift b{display:block;font:500 1.3em var(--font-head)}
.gift span{color:var(--muted);font-size:.9em}

/* footer */
.foot{padding:70px 0 90px;text-align:center}
.hashtag{font:italic 500 clamp(26px,5vw,40px) var(--font-head);color:var(--accent);margin-bottom:1em}
.contact .who{font:500 1.2em var(--font-head);margin-bottom:.3em}
.ways{display:flex;gap:6px 22px;justify-content:center;flex-wrap:wrap}
.ways a{color:var(--accent);text-underline-offset:4px}
.footnote{margin-top:2em;color:var(--muted);font-size:.9em}
.owner{margin-top:2.4em;opacity:.35}.owner a{text-decoration:none;font-size:1.1em}.owner a:hover{opacity:1}

/* floating buttons */
.edit-fab{text-decoration:none}.edit-fab,.music-btn{position:fixed;z-index:60;width:56px;height:56px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:var(--accent-ink);background:var(--accent);box-shadow:0 8px 26px rgba(0,0,0,.28);transition:transform .25s}
.edit-fab{right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom))}
.edit-fab:hover,.music-btn:hover{transform:scale(1.08) rotate(-4deg)}
.edit-fab::after{content:"Edit";position:absolute;right:66px;background:#222;color:#fff;font:600 12px/1 var(--font-body);padding:8px 10px;border-radius:8px;opacity:0;transform:translateX(6px);transition:.25s;pointer-events:none;white-space:nowrap}
.edit-fab:hover::after{opacity:1;transform:none}
.music-btn{left:calc(18px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));width:48px;height:48px;background:var(--card);color:var(--accent);border:1px solid var(--line)}
.music-btn.on{animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 18%,transparent)}}

/* modal + lightbox */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(15,10,10,.6);backdrop-filter:blur(4px);padding:20px}
.modal[hidden],.lightbox[hidden]{display:none}
.modal-card{background:#fff;color:#222;border-radius:18px;padding:34px 30px 30px;width:min(400px,100%);position:relative;text-align:center;animation:pop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(10px)}}
.modal-card h3{font-size:1.6em;margin-bottom:6px}
.modal-card p{color:#666;font-size:.95em}
.modal-card input{width:100%;text-align:center;font:600 28px/1 ui-monospace,Menlo,monospace;letter-spacing:.5em;padding:16px 10px 16px 20px;border:1px solid #ccc;border-radius:12px;margin:6px 0 14px}
.modal-card input:focus{outline:2px solid var(--accent);border-color:transparent}
.modal-card .btn{width:100%}
.modal-x,.lightbox button{position:absolute;top:10px;right:14px;background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:inherit;opacity:.6}
.err{color:#b3261e;min-height:1.3em;margin:10px 0 0;font-size:.9em}
.lightbox{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:20px}
.lightbox img{max-width:100%;max-height:92vh;border-radius:6px}
.lightbox button{color:#fff;font-size:38px;top:14px;right:20px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* ================= motion layer (shared) ================= */
:root{--ease:cubic-bezier(.2,.75,.2,1);--ease-io:cubic-bezier(.65,.05,.25,1)}

/* scroll progress */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;background:linear-gradient(90deg,var(--accent2),var(--accent));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
[dir=rtl] .progress{transform-origin:100% 50%}
body.has-intro .progress{opacity:0}

/* ambient particles */
.fx-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.intro .fx-layer{z-index:1}
.fx{position:absolute;left:var(--x);top:var(--y);display:block;will-change:transform,opacity}
.fx-petal{top:-8%;width:var(--s);height:calc(var(--s)*1.35);border-radius:100% 0 100% 0;background:radial-gradient(circle at 30% 30%,#f3c4c8,#c05468 80%);opacity:0;animation:petal var(--t) linear var(--dl) infinite}
.hero .fx-petal{background:radial-gradient(circle at 30% 30%,#f6d3d3,#d98a98 80%)}
@keyframes petal{0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:0}10%{opacity:.85}90%{opacity:.7}100%{transform:translate3d(var(--dx),112vh,0) rotate(var(--r));opacity:0}}
.fx-firefly{width:6px;height:6px;border-radius:50%;background:#fff7c9;box-shadow:0 0 10px 3px rgba(255,240,170,.75);animation:drift var(--t) ease-in-out var(--dl) infinite alternate,twinkle 3.2s ease-in-out var(--dl) infinite}
.hero .fx-firefly{background:#fffbe0;box-shadow:0 0 8px 3px rgba(190,170,90,.55)}
@keyframes drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(var(--dx),-14vh,0)}}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:1}}
.fx-spark{width:var(--s);height:var(--s);background:#e8c872;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:spark calc(var(--t)*.45) ease-in-out var(--dl) infinite}
@keyframes spark{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(90deg)}}

/* hero entrance: names are "written on" with a mask, the rest rises in */
.js .hero .names{clip-path:inset(-20% 101% -20% -2%)}
[dir=rtl].js .hero .names,[dir=rtl] .js .hero .names{clip-path:inset(-20% -2% -20% 101%)}
.js .hero .names.in{animation:writeon 1.9s var(--ease-io) both;animation-delay:calc(var(--i,0)*90ms + 150ms)}
@keyframes writeon{to{clip-path:inset(-20% -2% -20% -2%)}}
.js .hero .reveal{transition-duration:1.1s}
.js .hero .oval.reveal,.js .hero .arch.reveal,.js .hero .star.big.reveal{transform:scale(.88) translateY(18px)}
.js .hero .oval.reveal.in,.js .hero .arch.reveal.in,.js .hero .star.big.reveal.in{transform:none}
.hero{--px:0;--py:0;--sy:0}
.hero-in{transform:translate3d(0,calc(var(--sy)*.14px),0);opacity:calc(1 - var(--sy)/1100)}
.hero .corner,.hero .branch,.hero .hero-deco{translate:calc(var(--px)*-18px) calc(var(--py)*-12px)}
.hero .oval,.hero .arch{translate:calc(var(--px)*8px) calc(var(--py)*6px)}

/* buttons: soft shine sweep */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%);transform:translateX(-130%);pointer-events:none}
.btn:hover::after{transform:translateX(130%);transition:transform .9s var(--ease)}
.btn-solid:not(:hover)::after{animation:shine 5s var(--ease) 2.5s infinite}
@keyframes shine{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* countdown digit roll */
.cd b{display:block}.cd b.roll{animation:roll .45s var(--ease)}
@keyframes roll{from{transform:translateY(38%);opacity:0}to{transform:none;opacity:1}}

/* gallery: images are unveiled with a wipe + slow settle */
.js .g-item.reveal{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-io) calc(var(--i,0)*90ms)}
.js .g-item.reveal.in{clip-path:inset(0)}
.js .g-item.reveal img{transform:scale(1.22);transition:transform 1.8s var(--ease) calc(var(--i,0)*90ms)}
.js .g-item.reveal.in img{transform:none}
.js .g-item.reveal.in:hover img{transform:scale(1.06);transition-delay:0s;transition-duration:.9s}

/* cards lift gently */
.event,.stay,.gift,.story-card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .8s,border-color .3s}
.event:hover,.stay:hover{transform:translateY(-6px)}
.js .event.reveal.in:hover,.js .stay.reveal.in:hover{transform:translateY(-6px)}

/* story timeline draws itself while scrolling */
.story{--tp:0}
.story::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(var(--accent2),var(--accent));transform:translateX(-1px) scaleY(var(--tp));transform-origin:50% 0}
@media(max-width:700px){.story::after{left:11px;transform:translateX(-1px) scaleY(var(--tp))}}
.story-card{transform-origin:50% 50%}
.js .story-item.reveal{transform:translateY(34px)}
.js .story-item.reveal.in{transform:none}

/* section headings draw their ornament */
.js .sec-head.reveal .orn{transform:scaleX(0);transition:transform 1.2s var(--ease) .35s}
.js .sec-head.reveal.in .orn{transform:none}

/* faq answer fades in */
.faq details[open] p{animation:faqIn .5s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}

/* music button: equaliser */
.music-btn .eq{display:flex;align-items:flex-end;gap:3px;height:16px}
.music-btn .eq i{display:block;width:3px;height:30%;border-radius:2px;background:currentColor;transition:height .3s}
.music-btn.on .eq i{animation:eq 1s ease-in-out infinite}
.music-btn.on .eq i:nth-child(2){animation-delay:-.4s}.music-btn.on .eq i:nth-child(3){animation-delay:-.75s}.music-btn.on .eq i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.music-btn{animation:fabIn .9s var(--ease) 1s backwards}.edit-fab{animation:fabIn .9s var(--ease) 1.2s backwards}
@keyframes fabIn{from{opacity:0;transform:scale(.4)}}

/* intro shared bits */
.intro{will-change:opacity,transform}
.intro-hint{animation:hintIn 1s var(--ease) 1.6s backwards,hint 2.4s ease-in-out 2.6s infinite}
@keyframes hintIn{from{opacity:0;transform:translateY(8px)}}
.intro .fx-layer{opacity:1;transition:opacity .8s}

/* right-to-left languages */
[dir=rtl] .faq summary{padding:18px 0 18px 36px}
[dir=rtl] .faq summary::after{right:auto;left:4px}
[dir=rtl] .event-no{left:auto;right:18px}
[dir=rtl] .story-item{justify-content:flex-end}[dir=rtl] .story-item.alt{justify-content:flex-start}
[dir=rtl] .music-btn{left:auto;right:calc(18px + env(safe-area-inset-right))}
[dir=rtl] .edit-fab{right:auto;left:calc(18px + env(safe-area-inset-left))}
[dir=rtl] .edit-fab::after{right:auto;left:66px}
[dir=rtl] .kicker,[dir=rtl] .cd span,[dir=rtl] .f label,[dir=rtl] .f legend,[dir=rtl] .btn,[dir=rtl] .rsvp-by{letter-spacing:0}
[dir=rtl] .modal-card input{letter-spacing:.5em;direction:ltr}
@media(max-width:700px){[dir=rtl] .story::before,[dir=rtl] .story::after{left:auto;right:11px}[dir=rtl] .story-dot{left:auto;right:11px;transform:translateX(50%)}[dir=rtl] .story-item,[dir=rtl] .story-item.alt{justify-content:flex-start}}

@media (prefers-reduced-motion:reduce){
  .fx-layer,.btn::after{display:none}
  .js .hero .names{clip-path:none}.js .g-item.reveal{clip-path:none}.js .g-item.reveal img{transform:none}
  .js .sec-head.reveal .orn{transform:none}
  .hero-in{transform:none;opacity:1}
}

/* Arabic-script glyphs (Arabic, Urdu) borrow Amiri inside every template font, so nothing falls back to a random system face */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/amiri-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/amiri-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/amiri-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Parisienne';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/amiri-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Lora';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/amiri-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Lora';font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/amiri-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/amiri-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

.credit{margin:2.2em 0 0;font-size:.78em;letter-spacing:.06em;opacity:.7}.credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}.credit a:hover{opacity:1}

/* music volume */
.vol{position:fixed;z-index:60;left:calc(76px + env(safe-area-inset-left));bottom:calc(35px + env(safe-area-inset-bottom));width:96px;height:22px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;opacity:0;transform:translateX(-8px);pointer-events:none;transition:opacity .35s,transform .35s var(--ease)}
.music-btn.on~.vol,.music-btn:hover~.vol,.music-btn:focus-visible~.vol,.vol:hover,.vol:focus-visible,.vol:active{opacity:1;transform:none;pointer-events:auto}
.vol::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--v,60%),color-mix(in srgb,var(--accent) 22%,transparent) var(--v,60%))}
.vol::-moz-range-track{height:4px;border-radius:2px;background:color-mix(in srgb,var(--accent) 22%,transparent)}
.vol::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
.vol::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--accent);border:2px solid var(--card,#fff);box-shadow:0 1px 6px rgba(0,0,0,.3)}
.vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--card,#fff)}
[dir=rtl] .vol{left:auto;right:calc(76px + env(safe-area-inset-right));transform:translateX(8px)}
[dir=rtl] .music-btn.on~.vol,[dir=rtl] .music-btn:hover~.vol,[dir=rtl] .vol:hover,[dir=rtl] .vol:focus-visible,[dir=rtl] .vol:active{transform:none}
[dir=rtl] .vol{direction:rtl}
@media (prefers-reduced-motion:reduce){.vol{transition:none}}
.vol{padding:0 14px;box-sizing:content-box;width:84px;height:30px;bottom:calc(27px + env(safe-area-inset-bottom));border-radius:20px;background-color:var(--card,#fff);box-shadow:0 2px 14px rgba(0,0,0,.18);border:1px solid var(--line,rgba(0,0,0,.08))}
.vol::-webkit-slider-runnable-track{margin:13px 0}
.vol::-webkit-slider-thumb{margin-top:-6px}

/* language picker (demo pages only) */
/* demo-only language strip, top centre */
.demo-lang{position:fixed;z-index:61;left:0;right:0;top:0;height:42px;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(18,18,24,.88);backdrop-filter:blur(8px);color:#fff;font:600 13px system-ui,sans-serif;letter-spacing:.02em}
body:has(.demo-lang) .bar{top:42px}
body:has(.demo-lang) .progress{top:42px}
@media(min-width:1px){.demo-lang select{appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,.28);border-radius:99px;background:rgba(255,255,255,.1);color:#fff;font:inherit;padding:6px 28px 6px 14px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-size:5px 5px;background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-repeat:no-repeat}}
.demo-lang select option{color:#222}
.demo-lang select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}


.sec{scroll-margin-top:70px}
main{overflow-x:clip}.g-item a{overflow:hidden}

.edit-fab{width:44px;height:44px;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}.edit-fab svg{width:19px;height:19px}.edit-fab::after{right:54px}
[dir=rtl] .edit-fab{right:auto;left:calc(14px + env(safe-area-inset-left))}[dir=rtl] .edit-fab::after{right:auto;left:54px}
.modal-card .store-link{margin:18px 0 0;padding-top:14px;border-top:1px solid #eee}.modal-card .store-link a{color:var(--accent);font-weight:600;text-decoration:none}.modal-card .store-link a:hover{text-decoration:underline}