/* Section `hero` (module story). Layout per blueprint §4 at 852 and 670 tall; ×1.12 at 440×956.
   Anything below design y 260 stays ≤ 250 px wide (clears the big right column). */
@layer sections{
[data-section="hero"]{--hero-k:1;min-height:var(--vh-small);padding:0 var(--gutter);display:block;text-align:center;pointer-events:none;position:relative;overflow:clip}
[data-section="hero"] .hero-stack{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;padding-top:calc(64px * var(--hero-k))}
[data-section="hero"] .hero-halo{position:absolute;z-index:-1;left:50%;top:calc(112px * var(--hero-k));width:calc(340px * var(--hero-k));height:calc(300px * var(--hero-k));transform:translateX(-50%);
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(246,239,230,.74),rgba(246,239,230,.42) 60%,rgba(246,239,230,0))}
[data-section="hero"] .hero-logo{width:calc(44px * var(--hero-k));height:calc(44px * var(--hero-k));flex:none}
[data-section="hero"] .hero-logo{position:relative}
[data-section="hero"] .hero-logo>*{position:absolute;inset:0;width:100%;height:100%}
[data-section="hero"] .hero-logo>.hero-logo-img:not(:only-child){display:none}
[data-section="hero"] .hero-over{margin-top:calc(11px * var(--hero-k));font-family:var(--font-label);font-weight:600;font-size:var(--fs-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;line-height:1.3;color:var(--c-silver-ink)}
/* names: per-glyph outlines; live text stays for assistive tech and as the fallback */
[data-section="hero"] .hero-names{position:relative;margin-top:calc(2px * var(--hero-k));height:calc(70px * var(--hero-k));width:100%;max-width:calc(320px * var(--hero-k));
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:calc(var(--fs-names) * .82);line-height:1;color:var(--c-forest);outline-offset:6px}
[data-section="hero"].hero-has-art .hero-names-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-section="hero"] .hero-names-art{position:absolute;inset:0;display:none}
[data-section="hero"] .hero-names-art.is-art{display:block}
[data-section="hero"] .hero-names-art svg{width:100%;height:100%;overflow:visible}
[data-section="hero"] .hero-glyph{stroke:var(--c-silver-700);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0;stroke-opacity:0;stroke-linejoin:round;paint-order:stroke}
[data-section="hero"] .hero-names-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:var(--hero-mask) center/contain no-repeat;mask:var(--hero-mask) center/contain no-repeat}
[data-section="hero"] .hero-names-sheen i{position:absolute;top:-10%;bottom:-10%;left:0;width:34%;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 45%,rgba(220,235,242,.9) 55%,rgba(255,255,255,0))}
[data-section="hero"] .hero-lead{margin-top:calc(6px * var(--hero-k));font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:var(--fs-lead);line-height:1.25;color:var(--c-ink);max-width:300px}
/* the hashtag unfold */
[data-section="hero"] .hero-tagline{margin-top:calc(4px * var(--hero-k));height:calc(34px * var(--hero-k));display:flex;align-items:center;justify-content:center}
[data-section="hero"] .hero-tag{position:relative;min-height:44px;padding:0 var(--sp-3);margin:-5px 0;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:var(--fs-tag);line-height:1;letter-spacing:.01em;color:var(--c-rose-700);
  border-radius:var(--r-chip);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
[data-section="hero"] .hero-tag:active{transform:scale(.97)}
[data-section="hero"] .hero-tag-word{position:relative;display:inline-flex;white-space:pre}
[data-section="hero"] .hero-tag-c{display:inline-block;transform-origin:50% 60%}
[data-section="hero"] .hero-tag-slot{position:relative}
[data-section="hero"] .hero-tag-H{display:inline-block;transform-origin:50% 55%}
[data-section="hero"] .hero-tag-h{position:absolute;left:0;top:0;display:inline-block;opacity:0;transform-origin:50% 55%}
[data-section="hero"] .hero-tag-hana{position:relative;z-index:0;display:inline-flex;color:var(--c-rose-700)}
[data-section="hero"] .hero-tag-glow{position:absolute;z-index:-1;left:-30%;right:-30%;top:-45%;bottom:-45%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,243,246,.62),rgba(243,217,224,.38) 52%,rgba(243,217,224,0))}
[data-section="hero"] .hero-tag-sheenbox{position:absolute;inset:-4% 0;overflow:hidden;pointer-events:none}
[data-section="hero"] .hero-tag-sheen{position:absolute;top:0;bottom:0;left:0;width:22px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9) 50%,rgba(255,255,255,0))}
[data-section="hero"] .hero-tag-apos{position:absolute;top:0;right:100%;transform-origin:100% 40%;color:var(--c-silver-700);opacity:0;-webkit-text-fill-color:var(--c-silver-700)}
[data-section="hero"] .hero-tag-star{position:absolute;top:-.42em;width:.62em;height:.62em;margin-left:-.31em;opacity:0;pointer-events:none}
[data-section="hero"] .hero-tag-star svg{width:100%;height:100%;overflow:visible}
/* rule with a brilliant in profile at its heart */
[data-section="hero"] .hero-rule{margin-top:calc(2px * var(--hero-k));display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:calc(170px * var(--hero-k));height:16px}
[data-section="hero"] .hero-rule i{flex:1;height:1px;background:linear-gradient(90deg,rgba(169,176,182,0),var(--c-silver-500))}
[data-section="hero"] .hero-rule i:last-child{transform:scaleX(-1)}
[data-section="hero"] .hero-gem{flex:none;width:20px;height:15px;overflow:visible}
[data-section="hero"] .hero-date{margin-top:calc(4px * var(--hero-k));max-width:calc(250px * var(--hero-k));font-family:var(--font-label);font-weight:600;font-size:var(--fs-label);
  letter-spacing:.17em;text-transform:uppercase;line-height:1.35;color:var(--c-forest);white-space:nowrap}
[data-section="hero"] .hero-local{margin-top:2px;max-width:calc(250px * var(--hero-k));font-size:var(--fs-small);font-style:italic;color:var(--c-ink-2);line-height:1.3}
[data-section="hero"] .hero-venue{margin-top:calc(6px * var(--hero-k));max-width:calc(250px * var(--hero-k));display:flex;flex-direction:column;font-family:var(--font-serif);line-height:1.2;color:var(--c-ink)}
[data-section="hero"] .hero-venue1{font-size:calc(17px * var(--hero-k));font-weight:600;color:var(--c-forest)}
[data-section="hero"] .hero-venue2{font-size:calc(15.5px * var(--hero-k));font-style:italic}
/* the Living Line */
[data-section="hero"] .hero-live{margin-top:calc(10px * var(--hero-k));max-width:calc(290px * var(--hero-k))}
[data-section="hero"] .hero-live-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 var(--sp-3) 0 var(--sp-4);border-radius:var(--r-chip);
  background:rgba(255,253,249,.8);border:var(--hairline-in);font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:var(--fs-small);color:var(--c-ink);white-space:nowrap}
[data-section="hero"] .hero-odo{display:inline-flex;direction:ltr;unicode-bidi:isolate;font-style:normal;font-weight:600;color:var(--c-forest);font-variant-numeric:tabular-nums lining-nums}
[data-section="hero"] .hero-odo-col{display:inline-block;height:1.25em;line-height:1.25em;overflow:hidden;vertical-align:bottom}
[data-section="hero"] .hero-odo-strip{display:flex;flex-direction:column;transform:translateY(-90%)}
[data-section="hero"] .hero-odo-strip span{height:1.25em;line-height:1.25em}
[data-section="hero"] .hero-odo-strip span::before{content:attr(data-d)}
[data-section="hero"] .hero-sun{position:relative;display:inline-block;width:15px;height:9px;overflow:hidden;border-bottom:1px solid var(--c-silver-500);margin-inline-start:2px}
[data-section="hero"] .hero-sun i{position:absolute;left:3px;top:4px;width:9px;height:9px;border-radius:50%;transform:translateY(2px);
  background:radial-gradient(circle at 50% 40%,var(--c-bulb),var(--c-flame) 60%,var(--c-dibla))}
/* scroll cue, just above the dock */
[data-section="hero"] .hero-cue{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 56px + 28px);display:flex;flex-direction:column;align-items:center;gap:0;
  font-family:var(--font-label);font-weight:600;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-forest);
  transition:opacity .4s var(--ease-out-soft)}
[data-section="hero"] .hero-cue-t{padding:2px 10px;border-radius:var(--r-chip);background:rgba(250,246,240,.66)}
[data-section="hero"] .hero-cue-chev{display:block;color:var(--c-forest);animation:hero-bob 1.4s var(--ease-silk) infinite alternate}
[data-section="hero"] .hero-cue.is-gone{opacity:0}
[data-section="hero"] .hero-cue.is-gone .hero-cue-chev{animation:none}
@keyframes hero-bob{from{transform:translateY(0)}to{transform:translateY(6px)}}
/* before the opening reveals it, and in film mode */
[data-section="hero"].hero-pre .hero-stack>:not(.hero-halo):not(.hero-logo){opacity:0}
[data-section="hero"].hero-pre .hero-cue{opacity:0}
/* reduced motion: final state, "Hana" lit in silver */
[data-section="hero"]:is(.is-reduced *) .hero-tag-hana{color:var(--c-silver-ink)}
[data-section="hero"]:is(.is-reduced *) .hero-tag-glow{opacity:.5}
[data-section="hero"]:is(.is-reduced *) .hero-cue-chev{animation:none}
/* Arabic */
[data-section="hero"]:lang(ar) .hero-over{font-size:14px;letter-spacing:0;text-transform:none}
[data-section="hero"]:lang(ar) .hero-names{font-style:normal}
[data-section="hero"]:lang(ar) .hero-lead{font-style:normal;font-size:clamp(19px,5vw,21px);line-height:1.6}
[data-section="hero"]:lang(ar) .hero-date{font-size:14px;letter-spacing:0;text-transform:none;font-weight:500}
[data-section="hero"]:lang(ar) .hero-venue2{font-style:normal;font-size:calc(16px * var(--hero-k));line-height:1.6}
[data-section="hero"]:lang(ar) .hero-live-chip{font-style:normal;font-size:16px;padding:0 var(--sp-4) 0 var(--sp-3)}
[data-section="hero"]:lang(ar) .hero-cue{font-size:15px;letter-spacing:0;text-transform:none}
[data-section="hero"]:lang(ar) .hero-local{font-style:normal}
[data-section="hero"] .hero-tagline bdi{font-style:italic}
/* 670-tall (WhatsApp in-app) composition */
@media (max-height:760px){
  [data-section="hero"] .hero-stack{padding-top:52px}
  [data-section="hero"] .hero-halo{top:90px;height:270px}
  [data-section="hero"] .hero-logo{width:36px;height:36px}
  [data-section="hero"] .hero-over{margin-top:9px;line-height:1.1}
  [data-section="hero"] .hero-names{height:58px;margin-top:1px}
  [data-section="hero"] .hero-lead{margin-top:4px;font-size:18px}
  [data-section="hero"] .hero-tagline{height:30px;margin-top:2px}
  [data-section="hero"] .hero-rule{margin-top:1px}
  [data-section="hero"] .hero-date{margin-top:2px}
  [data-section="hero"] .hero-venue{margin-top:4px}
  [data-section="hero"] .hero-venue1{font-size:16px}
  [data-section="hero"] .hero-venue2{font-size:15px}
  [data-section="hero"] .hero-live{margin-top:7px}
  [data-section="hero"] .hero-cue{bottom:calc(var(--safe-b) + 56px + 24px)}
}
/* 440 × 956: identical composition at S = 1.12 */
@media (min-width:420px) and (min-height:900px){[data-section="hero"]{--hero-k:1.12}}
[data-section="hero"] .hero-live-chip{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
/* the sunsets countdown (couple, 01:50): a real moment. Large rolling numerals, understated words and a
   tiny painted sun with a warm glow that sinks below a hairline horizon (tap: one full mini sunset) */
/* the sunsets countdown (couple-notes 01:50): free-standing odometer numerals, a painted sun setting
   behind a hairline horizon beside them, and an understated italic line. No pill: a soft scene glow only. */
[data-section="hero"] .hero-live-chip.is-count{border:0;position:relative;gap:calc(10px * var(--hero-k));min-height:44px;padding:0 calc(6px * var(--hero-k));
  background:none;box-shadow:none;border-radius:0;isolation:isolate}
[data-section="hero"] .hero-live-chip.is-count::before{content:"";position:absolute;z-index:-1;inset:-14px -30px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,250,240,.78),rgba(255,250,240,.42) 55%,rgba(255,250,240,0))}
[data-section="hero"] .is-count .hero-odo{font-family:var(--font-display);font-weight:400;font-size:calc(60px * var(--hero-k));line-height:1;letter-spacing:-.01em;color:var(--c-forest);
  text-shadow:0 1px 0 rgba(255,253,249,.7),0 0 18px rgba(255,248,236,.9)}
[data-section="hero"] .is-count .hero-odo-col{height:1.04em;line-height:1.04em}
[data-section="hero"] .is-count .hero-odo-strip span{height:1.04em;line-height:1.04em}
[data-section="hero"] .is-count .hero-count-w{font-style:italic;font-size:calc(17px * var(--hero-k));color:var(--c-ink);letter-spacing:.01em;text-shadow:0 0 10px rgba(255,248,236,.95);max-width:6.2em;line-height:1.15;text-align:start}
[data-section="hero"] .is-count .hero-sun{order:-1;width:calc(40px * var(--hero-k));height:calc(24px * var(--hero-k));margin:0;overflow:visible;clip-path:inset(-80% -90% 0 -90%);border-bottom:0;
  background:linear-gradient(90deg,rgba(111,119,126,0),var(--c-silver-500) 20%,var(--c-silver-500) 80%,rgba(111,119,126,0)) bottom/100% 1px no-repeat,
  radial-gradient(50% 100% at 50% 100%,rgba(255,196,128,.7),rgba(255,213,138,.22) 62%,rgba(255,213,138,0) 100%)}
[data-section="hero"] .is-count .hero-sun i{left:calc(9px * var(--hero-k));top:calc(4px * var(--hero-k));width:calc(22px * var(--hero-k));height:calc(22px * var(--hero-k));transform:none;
  background:radial-gradient(circle at 46% 38%,#FFF6DF,var(--c-flame) 52%,#E8936A 92%);box-shadow:0 0 14px 4px rgba(255,200,130,.6)}
[data-section="hero"]:lang(ar) .is-count .hero-count-w{font-style:normal;font-size:calc(16px * var(--hero-k));line-height:1.5;max-width:7em}
[data-section="hero"]:lang(ar) .hero-live-chip.is-count{padding:0 calc(6px * var(--hero-k))}
@media (max-height:700px){[data-section="hero"] .is-count .hero-odo{font-size:calc(50px * var(--hero-k))}[data-section="hero"] .hero-live-chip.is-count{min-height:40px}}
/* round 1: "Hana" stays deep rose; its single silver sweep is a gradient clipped to the letters themselves */
[data-section="hero"] .hero-tag-ink{color:var(--c-rose-700)}
[data-section="hero"] .hero-tag-hana.is-sweep .hero-tag-ink{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,var(--c-rose-700) 30%,var(--c-silver-200) 45%,var(--c-diamond) 50%,var(--c-silver-200) 55%,var(--c-rose-700) 70%);
  background-size:300% 100%;background-position:100% 0}
[data-section="hero"] .hero-tag-h{transform:none}
[data-section="hero"] .hero-tag-sheenbox{display:none}
[data-section="hero"]:is(.is-reduced *) .hero-tag-hana{color:var(--c-rose-700)}
/* the countdown sun sits at the physical LEFT of the numerals in both languages, over open sky */
[data-section="hero"]:lang(ar) .is-count .hero-sun{order:99}
/* a soft cream "air" behind the venue lines and the countdown, so they read on clean air over the columns */
[data-section="hero"] .hero-venue{position:relative;isolation:isolate}
[data-section="hero"] .hero-venue::before{content:"";position:absolute;z-index:-1;inset:-14px -40px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(250,244,234,.72),rgba(250,244,234,.46) 58%,rgba(250,244,234,0))}
[data-section="hero"] .hero-live-chip.is-count::before{inset:-18px -40px;background:radial-gradient(closest-side,rgba(252,246,236,.86),rgba(252,246,236,.55) 58%,rgba(252,246,236,0))}
/* the hero mark: larger, on a soft cream halo */
[data-section="hero"] .hero-logo{width:calc(68px * var(--hero-k));height:calc(68px * var(--hero-k))}
[data-section="hero"] .hero-logo::before{content:"";position:absolute;inset:-16px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(252,247,240,.8),rgba(252,247,240,0))}
@media (max-height:760px){[data-section="hero"] .hero-logo{width:52px;height:52px}}
/* Arabic: two faces only (Aref Ruqaa for the names, Amiri for the rest) */
[data-section="hero"]:lang(ar) .hero-over{font-family:'Amiri',serif;font-weight:400;font-size:16px;color:var(--c-ink-2)}
[data-section="hero"]:lang(ar) .hero-date{font-family:'Amiri',serif;font-weight:700;font-size:16px;color:var(--c-forest)}
}

/* the lit beat: "Ahmed hayet" steps back to silver ink while "Hana" stays deep rose on a blush halo, so her
   name is the brightest, warmest thing in the line (no white haze over the glyphs) */
[data-section="hero"] .hero-tag-c{transition:color .45s var(--ease-out-soft, ease-out)}
[data-section="hero"] .hero-tag-word:has(.hero-tag-hana.is-lit) > .hero-tag-c{color:var(--c-silver-ink)}

[data-section="hero"] .hero-gem{color:var(--c-silver-500)}
[data-section="hero"] .hero-gem path{vector-effect:non-scaling-stroke}