/* Base layer (foundation): reset, stage frame, section shells, fallback cards, splash rules. */
@layer base{
*,*::before,*::after{box-sizing:border-box}
html{background:var(--c-cream);color:var(--c-ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;scroll-behavior:auto;overflow-x:clip}
body{margin:0;min-height:var(--vh-small);font-family:var(--font-serif);font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:500;font-variant-numeric:lining-nums;overflow-x:clip;overscroll-behavior-y:none}
:lang(ar){letter-spacing:0 !important;font-synthesis:none;text-transform:none}
img,svg,canvas{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--c-forest)}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--c-forest);outline-offset:3px;box-shadow:0 0 0 6px rgba(250,246,240,.9)}
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none !important}
bdi{unicode-bidi:isolate}

/* ---------- splash: no laid-out live text before the tap, so no web font loads ---------- */
html.is-splash #main,html.is-splash #ui{display:none}
html.is-intro #main{pointer-events:none}
html.is-splash #opening,html.is-splash #opening .vh{font-family:Georgia,'Geeza Pro',serif}
[tabindex="-1"]:focus{outline:none;box-shadow:none}

/* ---------- the stage (fixed, top-centre anchored, S = max(vw/393, lvh/852)) ---------- */
#stage{position:fixed;inset:0 0 auto 0;height:var(--vh-large);overflow:hidden;z-index:var(--z-stage);
  background:linear-gradient(180deg,#D7E2D3 0%,#EED8D3 34%,#F6CDBB 56%,#FBDDB3 62%,var(--c-stone) 62.2%,var(--c-stone-hi) 100%);
  contain:strict}
.stage-world{position:absolute;left:50%;top:0;width:393px;height:852px;transform-origin:50% 0;
  transform:translateX(-50%) scale(var(--S))}
.stage-layer{position:absolute;inset:0;width:393px;height:852px;transform-origin:0 0;pointer-events:none}
.stage-layer>img{position:absolute;max-width:none}
.stage-slot{position:absolute;pointer-events:none}
/* sunset veils (stage.js): in design units, oversized so camera moves never show an edge; the horizon is y 528 */
.stage-veils{position:absolute;left:-200px;right:-200px;top:-120px;height:1092px;pointer-events:none}
.stage-veil{position:absolute;inset:0;opacity:0;visibility:hidden;will-change:opacity;contain:strict}
/* 5 PM: golden hour, warm light pooled at the horizon behind the glass diamond */
.stage-veil--golden{background:linear-gradient(180deg,rgba(255,206,140,.10) 0%,rgba(255,196,120,.22) 46%,rgba(255,186,104,.34) 59%,rgba(255,214,160,.16) 72%,rgba(255,220,170,.06) 100%)}
/* 6:00-6:30: rosy dusk, coral-rose (warm, never mauve) */
.stage-veil--rosy{background:linear-gradient(180deg,rgba(92,120,132,.40) 0%,rgba(150,132,146,.26) 26%,rgba(214,140,132,.36) 44%,rgba(248,160,124,.66) 55%,rgba(252,176,132,.72) 60%,rgba(220,146,124,.34) 68%,rgba(150,104,98,.22) 82%,rgba(120,90,86,.20) 100%)}
/* 9 PM: blue-sage twilight, the first stars; the plaza keeps a warm candle band */
.stage-veil--twilight{background:linear-gradient(180deg,rgba(30,66,80,.78) 0%,rgba(40,80,90,.66) 34%,rgba(56,94,100,.52) 50%,rgba(66,104,108,.40) 59%,rgba(40,72,78,.52) 70%,rgba(30,58,66,.60) 100%)}
/* late: a deep candlelit night, deep teal (never black, never purple) with warm light low on the plaza */
.stage-veil--night{background:linear-gradient(180deg,rgba(10,34,46,.92) 0%,rgba(14,44,56,.86) 34%,rgba(24,58,66,.72) 50%,rgba(32,66,74,.58) 59%,rgba(22,50,58,.66) 72%,rgba(16,40,50,.74) 100%)}
canvas.stage-canvas{position:absolute;left:0;top:0;width:393px;height:852px;pointer-events:none}
#fx{position:fixed;inset:0;width:100%;height:var(--vh-large);pointer-events:none;z-index:var(--z-fx)}
/* ambient particles: above the painted stage, below every card, caption and the dock */
#fx-amb{position:fixed;inset:0;width:100%;height:var(--vh-large);pointer-events:none;z-index:var(--z-stage)}
html.is-splash #fx-amb,html.is-intro #fx-amb{visibility:hidden}
html.is-intro #fx{z-index:var(--z-fx-intro)}

/* ---------- content column ---------- */
#main{position:relative;z-index:var(--z-content)}
.sec{position:relative;min-height:var(--vh-small);padding:calc(72px + var(--safe-t)) var(--gutter) calc(96px + var(--safe-b));
  pointer-events:none;display:flex;flex-direction:column;align-items:center}
.sec a,.sec button,.sec input,.sec textarea,.sec label,.sec select,.sec summary,.sec [data-tap]{pointer-events:auto}
.sec[data-section="hero"]{min-height:var(--vh-small);justify-content:flex-start;text-align:center;padding-top:calc(56px + var(--safe-t))}
.sec[data-section="essentials"]{min-height:calc(var(--vh-small) * 1.1)}
.sec[data-section="arrive"]{min-height:calc(var(--vh-small) * 1.4)}
.sec[data-section="entrance"]{min-height:calc(var(--vh-small) * 1.5)}
.sec[data-section="rings"]{min-height:calc(var(--vh-small) * 1.8)}
.sec[data-section="dinner"]{min-height:calc(var(--vh-small) * 1.2)}
.sec[data-section="late"]{min-height:calc(var(--vh-small) * 1.3)}
.sec[data-section="rsvp"]{min-height:calc(var(--vh-small) * 1.3)}
.sec[data-section="finale"]{min-height:calc(var(--vh-small) * 1.1)}

/* ---------- fallback essentials (static HTML; modules replace or restyle) ---------- */
.fb{width:100%;max-width:var(--col-max);text-align:center}
.fb-card{background:rgba(255,253,249,.94);border-radius:var(--r-card);box-shadow:var(--sh-card);
  border:var(--hairline-in);padding:var(--sp-6) var(--sp-5);text-align:start}
.fb-halo{background:radial-gradient(closest-side,rgba(246,239,230,.92),rgba(246,239,230,.75) 60%,rgba(246,239,230,0));
  padding:var(--sp-4) var(--sp-6);border-radius:var(--r-card)}
.fb-eyebrow{font-family:var(--font-label);font-weight:600;font-size:var(--fs-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--c-silver-ink)}
.fb-title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-display);line-height:1.15;color:var(--c-forest);margin:var(--sp-2) 0}
.fb-names{font-family:var(--font-display);font-size:var(--fs-names);line-height:1.1;color:var(--c-forest);font-weight:500}
.fb-names .amp{color:var(--c-amp);font-style:italic;font-size:.66em}
.fb-lead{font-style:italic;font-size:var(--fs-lead);color:var(--c-ink-2)}
:lang(ar) .fb-lead{font-style:normal}
.fb-rule{width:120px;height:9px;margin:var(--sp-3) auto;background:
  linear-gradient(90deg,transparent,var(--c-silver-500) 30%,var(--c-silver-500) 44%,transparent 44%,transparent 56%,var(--c-silver-500) 56%,var(--c-silver-500) 70%,transparent) center/100% 1px no-repeat,
  linear-gradient(45deg,transparent 30%,var(--c-silver-500) 30% 70%,transparent 70%) center/7px 7px no-repeat}
.fb-tag{font-style:italic;font-size:var(--fs-tag);color:var(--c-rose-700)}
.fb-dl{display:grid;gap:var(--sp-4)}
.fb-dl dt{font-family:var(--font-label);font-weight:600;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-silver-ink)}
.fb-dl dd{margin:2px 0 0;color:var(--c-ink)}
.fb-sched{display:grid;gap:var(--sp-1)}
.fb-sched li{display:flex;gap:var(--sp-3)}
.fb-sched time{min-width:5.2em;font-weight:600;color:var(--c-forest)}
.fb-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.fb-note{font-size:var(--fs-small);color:var(--c-ink-2)}

/* ---------- buttons (shared) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:0 var(--sp-5);
  border-radius:var(--r-btn);font-family:var(--font-ui);font-weight:600;font-size:var(--fs-btn);text-decoration:none;
  transition:transform var(--dur-press) var(--ease-out-soft)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--c-forest);color:var(--c-ivory);box-shadow:inset 0 0 0 1px rgba(233,237,240,.4)}
.btn--secondary{background:var(--c-ivory);color:var(--c-forest);border:1px solid var(--c-sage-600)}
.btn--chip{min-height:44px;padding:0 var(--sp-4);border-radius:var(--r-chip);background:var(--c-ivory);color:var(--c-forest);border:var(--hairline);font-size:var(--fs-small)}
.btn svg{width:20px;height:20px;flex:none}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- opening skeleton (the opening module paints over this) ---------- */
#opening{position:fixed;inset:0;height:var(--vh-large);z-index:var(--z-opening);background:var(--c-linen);overflow:hidden;
  display:flex;flex-direction:column;align-items:center}
html:not(.is-splash):not(.is-intro) #opening{display:none}
.opening-slot{position:absolute;pointer-events:none}
.opening-title{position:absolute;left:0;right:0;top:calc(var(--vh-small) * .13);display:flex;flex-direction:column;align-items:center;gap:10px}
.opening-title svg{height:auto}
.opening-env{position:absolute;left:50%;top:calc(var(--vh-small) * .53);width:300px;height:210px;transform:translate(-50%,-50%);
  border-radius:6px;background:linear-gradient(180deg,#FFFDF9,#F6EFE6);box-shadow:0 22px 40px -18px rgba(62,90,69,.45),0 2px 6px rgba(62,90,69,.1)}
.opening-env::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49.6%,rgba(169,176,182,.55) 50%,transparent 50.4%),
  linear-gradient(to bottom left,transparent 49.6%,rgba(169,176,182,.55) 50%,transparent 50.4%);background-size:50% 100%;background-repeat:no-repeat;background-position:0 0,100% 0;
  clip-path:polygon(0 0,100% 0,50% 62%)}
.opening-seal{position:absolute;left:50%;top:62%;width:78px;height:78px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 38% 34%,var(--c-wax-1),var(--c-wax-2) 55%,var(--c-wax-3));box-shadow:0 6px 14px -4px rgba(168,87,111,.5);
  display:grid;place-items:center;pointer-events:auto}
.opening-seal img{width:62%;height:62%}
.opening-langs{position:absolute;left:0;right:0;top:calc(var(--vh-small) * .784);display:flex;justify-content:center;gap:14px}
.opening-pill{width:148px;height:52px;border-radius:var(--r-chip);background:rgba(255,253,249,.9);border:1px solid var(--c-silver-500);
  box-shadow:var(--sh-pill),inset 0 0 0 3px rgba(255,253,249,.9),inset 0 0 0 4px rgba(169,176,182,.38);display:grid;place-items:center;color:var(--c-forest)}
.opening-pill svg{fill:currentColor;height:22px;width:auto}
.opening-sound{direction:ltr;position:absolute;left:0;right:0;top:calc(var(--vh-small) * .862);display:flex;justify-content:center;align-items:center;gap:6px;color:var(--c-ink-2)}
.opening-sound>svg{height:15px;width:auto;fill:currentColor}
#sound-pref{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--c-sage-600)}
#sound-pref[aria-pressed="false"] .ico-on,#sound-pref[aria-pressed="true"] .ico-off{display:none}
@media (max-height:700px){
  .opening-title{top:calc(var(--vh-small) * .107)}
  .opening-env{top:calc(var(--vh-small) * .49);width:270px;height:190px}
  .opening-langs{top:calc(var(--vh-small) * .806)}
  .opening-sound{top:calc(var(--vh-small) * .9)}
}

/* ---------- desktop "through the arch" ---------- */
@media (min-width:900px){
  :root{--arch-w:min(620px,46vw,calc((100vh - 48px) * .5))}
  html{background:radial-gradient(ellipse at 50% 40%,var(--c-sage-50),var(--c-linen) 60%,var(--c-sage-200))}
  #stage{left:50%;right:auto;top:24px;width:var(--arch-w);height:calc(100vh - 48px);transform:translateX(-50%);
    border-radius:calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) 24px 24px;box-shadow:0 30px 80px -30px rgba(62,90,69,.45),0 0 0 1px rgba(169,176,182,.6),0 0 0 7px rgba(255,253,249,.8),0 0 0 8px rgba(169,176,182,.5)}
  #main{width:var(--arch-w);margin-inline:auto}
  .sec{min-height:calc(100vh - 48px)}
  #fx,#fx-amb{left:50%;width:var(--arch-w);top:24px;height:calc(100vh - 48px);transform:translateX(-50%)}
  #fx-amb{border-radius:calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) 24px 24px}
  #opening{left:50%;width:var(--arch-w);right:auto;top:24px;height:calc(100vh - 48px);transform:translateX(-50%);
    border-radius:calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) 24px 24px}
  .opening-title{top:15%}.opening-env{top:52%}.opening-langs{top:76%}.opening-sound{top:85%}
}
@media (min-width:600px) and (max-width:899px){
  #main{max-width:var(--col-max);margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
}