/* Etienne & Christelle — layout generated from the Canva design (6 sections, each 360 x 720).
   1 Canva px = var(--u). Positions / sizes / colours come from tools/gen_page.py. */

/* ---- Fonts. Drop the licensed files into /fonts to activate; until then fallbacks + size multipliers are used. ---- */
@font-face{font-family:"The Seasons";font-weight:400;src:local("The Seasons"),url("/fonts/TheSeasons-Regular.woff2") format("woff2"),url("/fonts/TheSeasons-Regular.otf") format("opentype"),url("/fonts/TheSeasons-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"The Seasons";font-weight:700;src:local("The Seasons Bold"),url("/fonts/TheSeasons-Bold.woff2") format("woff2"),url("/fonts/TheSeasons-Bold.otf") format("opentype"),url("/fonts/TheSeasons-Bold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Amoresa";src:local("Amoresa"),url("/fonts/Amoresa.woff2") format("woff2"),url("/fonts/Amoresa.otf") format("opentype"),url("/fonts/Amoresa.ttf") format("truetype");font-display:swap}
/* Arabic fonts of the design. Drop the licensed files into /fonts (names below) to activate them;
   until then Cairo / Aref Ruqaa are used as fallbacks. */
@font-face{font-family:"FS Albert Arabic";font-weight:400;src:local("FS Albert Arabic"),url("/fonts/FSAlbertArabic-Regular.woff2") format("woff2"),url("/fonts/FSAlbertArabic-Regular.otf") format("opentype"),url("/fonts/FSAlbertArabic-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"FS Albert Arabic";font-weight:700;src:local("FS Albert Arabic Bold"),url("/fonts/FSAlbertArabic-Bold.woff2") format("woff2"),url("/fonts/FSAlbertArabic-Bold.otf") format("opentype"),url("/fonts/FSAlbertArabic-Bold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Badr";src:local("Badr"),url("/fonts/Badr.woff2") format("woff2"),url("/fonts/Badr.otf") format("opentype"),url("/fonts/Badr.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Madani Arabic";src:local("Madani Arabic"),url("/fonts/MadaniArabic.woff2") format("woff2"),url("/fonts/MadaniArabic.otf") format("opentype"),url("/fonts/MadaniArabic.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Gragio";src:url("/fonts/Gragio.otf") format("opentype");font-display:swap}
@font-face{font-family:"Old Money";src:url("/fonts/OldMoney-Script.otf") format("opentype");font-display:swap}

:root{
  --u:calc(min(100vw, 520px) / 360);
  --wine:#570917; --ivory:#f7f1da; --cream:#f7f1da; --sage:#5f705a;
  /* fallback size multipliers (become 1 automatically once the real fonts load, see app.js) */
  --k-t:1.03; --k-m:1; --k-s1:1; --k-s2:1.1; --k-a:.9; --k-as:1; --k-ab:1;
}
html.real-seasons{--k-t:1}


*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--wine);-webkit-text-size-adjust:100%}
body{background:var(--wine);overflow-x:hidden}
img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
.page{width:min(100vw,520px);margin:0 auto}

/* language blocks */
.lang-ar{display:none}
html[lang="ar"] .lang-en{display:none}
html[lang="ar"] .lang-ar{display:block}

/* ---- Sections ---- */
.sec{position:relative;width:100%;height:calc(720 * var(--u));overflow:hidden;isolation:isolate}
.sec2,.sec4{background:#6a2632}   /* design #570917 + paper-texture overlay renders as ~#6a2632 */
.sec3,.sec5{background:#f3efe0}                /* design #f7f1da + texture renders as ~#f3efe0 */
.sec2::before,.sec3::before,.sec4::before,.sec5::before{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='720'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014 .02' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") center/100% 100%;pointer-events:none}
.sec2::before,.sec4::before{opacity:.07}
.sec3::before,.sec5::before{opacity:.05}

.hero-img,.closing{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tex--photo{position:absolute;inset:0;background:rgba(255,255,255,.12);pointer-events:none}
.couple{position:absolute;display:block;overflow:visible}
.mono{position:absolute;left:50%;transform:translateX(-50%);top:calc(31 * var(--u));width:calc(75 * var(--u));height:auto}

/* language button: invisible hit-area over the "English"/"عربي" label text */
.lang-btn{position:absolute;z-index:2;top:calc(14 * var(--u));left:calc(284 * var(--u));width:calc(62 * var(--u));height:calc(28 * var(--u));background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mono--hero{left:calc(99 * var(--u));top:calc(36.5 * var(--u));width:calc(162 * var(--u));transform:none}

/* ---- Text ---- */
.x{position:absolute;text-align:center;white-space:normal;font-weight:400}
.f-t{font-family:"The Seasons","Gragio",Georgia,serif}
.f-t.name{font-family:"The Seasons","Cormorant Garamond",Georgia,serif;--k-t:.93}
html.real-seasons .f-t.name{--k-t:1}
.f-s1,.f-s2{font-family:"Great Vibes","Amoresa","Old Money","Pinyon Script",cursive}
.f-m{font-family:"Montserrat","Helvetica Neue",Arial,sans-serif}
.f-m.b{font-weight:600}
.f-a{font-family:"FS Albert Arabic","Cairo","Tajawal",sans-serif}
.f-as{font-family:"Madani Arabic","Aref Ruqaa","Amiri",serif}
.f-ab{font-family:"Badr","Aref Ruqaa","Amiri",serif}
/* no synthetic bold on fallback fonts */
.f-s2{display:flex;justify-content:center;white-space:nowrap}
html:not(.real-amoresa) .f-s2{letter-spacing:0 !important}
.f-t.b,.f-s1.b,.f-s2.b{font-weight:400}
.f-t.name.b{font-weight:600}
html.real-seasons .f-t.b{font-weight:700}
.f-a.b{font-weight:600}
.lang-ar .x i{font-style:normal}
.lang-ar .x{letter-spacing:0 !important}
.fam{white-space:pre-line}

/* ---- Ornaments (recoloured via mask, like Canva's recolour) ---- */
.names{position:absolute;left:50%;transform:translateX(-50%);top:calc(319 * var(--u));width:calc(265 * var(--u));height:auto}
.orn{position:absolute}
.bow,.chev{position:absolute;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.bow{background:var(--c,#f7f1da);-webkit-mask-image:url("/img/bow-mask.png");mask-image:url("/img/bow-mask.png")}
.chev{background:var(--ivory);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M1.5 1.5 12 11.5 22.5 1.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M1.5 1.5 12 11.5 22.5 1.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");pointer-events:none}

/* ---- RSVP dropdowns ---- */
.selbox{position:absolute;background:#5f705a;border:1px solid #5f705a;border-radius:calc(5 * var(--u))}
.selbox select{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;outline:0;appearance:none;-webkit-appearance:none;
  color:var(--ivory);font:400 calc(13 * var(--u)) "Montserrat",Arial,sans-serif;padding:0 calc(34 * var(--u)) 0 calc(14 * var(--u));cursor:pointer}
.lang-ar .selbox select{font-family:"FS Albert Arabic","Cairo",sans-serif;font-weight:600;direction:rtl}
.selbox select option{color:#222;background:#fff}

.nw{display:flex;flex-direction:column;align-items:center;white-space:nowrap}

/* ---- Music button ---- */
.music-btn{position:fixed;z-index:50;right:calc(12px);bottom:calc(12px);width:38px;height:38px;border-radius:50%;border:1px solid rgba(247,241,218,.7);background:rgba(87,9,23,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.music-btn svg{width:20px;height:20px;fill:none;stroke:#f7f1da;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.music-btn .off{display:none}
.music-btn.muted .off{display:inline}
.music-btn.muted .on{opacity:.55}
@media (min-width:520px){.music-btn{right:calc(50% - 260px + 12px)}}

/* ---- Scroll fade in / out (text + ornaments); photos & backgrounds stay put ---- */
html.js .sec .x,html.js .sec .names,html.js .sec .orn,html.js .sec .bow,html.js .sec .chev,html.js .sec .selbox,html.js .sec .mono,html.js .sec .couple{
  opacity:0 !important;translate:0 calc(14 * var(--u));
  transition:opacity .9s ease,translate .9s cubic-bezier(.22,.61,.36,1);transition-delay:0s}
html.js .sec.in .x,html.js .sec.in .names,html.js .sec.in .orn,html.js .sec.in .bow,html.js .sec.in .chev,html.js .sec.in .selbox,html.js .sec.in .mono,html.js .sec.in .couple{
  opacity:1 !important;translate:0 0;transition-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){
  html.js .sec .x,html.js .sec .names,html.js .sec .orn,html.js .sec .bow,html.js .sec .chev,html.js .sec .selbox,html.js .sec .mono,html.js .sec .couple{opacity:1 !important;translate:none;transition:none}}

/* ---- RSVP form (name field, send button, thank-you) ---- */
.rsvp-note{font-size:calc(12 * var(--u));line-height:calc(16 * var(--u));color:#5f705a}
.rsvp-name{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;outline:0;text-align:start;color:var(--ivory);font:400 calc(13 * var(--u)) "Montserrat",Arial,sans-serif;border-radius:0;padding:0 calc(14 * var(--u))}
.rsvp-name::placeholder{color:rgba(247,241,218,.8)}
.rsvp-send{display:none;height:calc(28 * var(--u));background:#5f705a;color:var(--ivory);border:0;border-radius:calc(5 * var(--u));font-size:calc(13 * var(--u));letter-spacing:.08em;cursor:pointer}
.rsvp-send.show{display:block}
.rsvp-send:disabled{opacity:.6}
.rsvp-note{min-height:calc(18 * var(--u));pointer-events:none}
.lang-ar .rsvp-send,.lang-ar .rsvp-name,.lang-ar .rsvp-note{font-family:"FS Albert Arabic","Cairo",sans-serif;font-weight:600;letter-spacing:0}
[hidden]{display:none !important}

/* ---- Footer credit (overlays the bottom of the closing photo, no background) ---- */
.credit{position:relative;z-index:3;margin-top:calc(-26 * var(--u));height:calc(26 * var(--u));line-height:calc(26 * var(--u));text-align:center;
  font:400 calc(8 * var(--u)) "Cormorant Garamond",Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,241,218,.85);text-shadow:0 0 6px rgba(0,0,0,.45)}
.credit a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(247,241,218,.45);padding-bottom:1px}
.credit a:hover{border-bottom-color:var(--ivory)}
.ph{white-space:nowrap}
.tel{color:inherit;text-decoration:none;cursor:pointer}
.tel:hover{text-decoration:underline}
.map{color:inherit;text-decoration:none}
.map:hover{text-decoration:underline}
.pin{display:block;height:auto}
/* hero: full white wash over the photo (as in the Canva design) so the monogram and verse stay readable */
.sec1 .tex--photo{background:rgba(255,255,255,.4)}