/* ============================================================
   HERO — rebuilt 1:1 from docs/head.pdf (1440 × 809.75 artboard)
   Every layer below is placed from the transformation matrix
   found in the PDF content stream, and every image is extracted
   from the Illustrator PDF itself.
   ============================================================ */

.hero{
  position:relative;
  background:#03102f;
  container-type:inline-size;
  overflow:hidden;
}
.hero__stage{
  position:relative;
  width:100%;
  aspect-ratio:1440 / 809.75;
  overflow:hidden;
}

/* every absolutely-placed artwork layer */
.hl{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none}
.hc{position:absolute;pointer-events:none}

/* ---------- art layers (exact PDF matrices) ---------- */

/* Im0 — background gradient */
.hl--bg{left:-3.2423%;top:-3.2432%;width:106.5104%;height:106.5143%}

/* Fm0 — geometric pattern, drawn at 32% in the PDF */
.hl--pattern{left:-1.7463%;top:-18.6461%;width:103.4896%;height:183.1121%;opacity:.32}

/* Fm1 — the faint architectural silhouette, drawn at 30% */
.hl--silhouette{left:0;top:0;width:100%;height:100%;opacity:.30}

/* Im1 — gold sparkle wave, top right (clipped to a polygon) */
.hc--sparkA{position:absolute;inset:0;clip-path:polygon(36.8597% 0%, 53.9277% 18.8144%, 100% 69.6006%, 100% 0%)}
.hl--sparkA{left:52.9655%;top:-88.0577%;width:89.1667%;height:89.9352%;transform-origin:0 0;transform:rotate(31.793deg)}

/* Im2 — same wave, bottom left */
.hc--sparkB{position:absolute;inset:0;clip-path:polygon(0.091% 100%, 63.4987% 100%, 67.4104% 81.3181%, 0.091% 36.7412%)}
.hl--sparkB{left:-12.4305%;top:8.2156%;width:89.1667%;height:89.9352%;transform-origin:0 0;transform:rotate(20.423deg)}

/* Fm2 — cloud tucked behind the crescent (mirrored) */
.hl--cloudMid{left:61.4992%;top:55.6019%;width:34.6354%;height:31.306%;transform:scaleX(-1)}

/* Im3 — front-left cloud */
.hl--cloudA{left:50%;top:76.3525%;width:34.6354%;height:31.306%}

/* Im4 — soft shadow under the cloud bank */
.hl--cloudShadow{left:56.7838%;top:74.0362%;width:51.2013%;height:18.8799%;transform-origin:0 0;transform:rotate(-3.45deg)}

/* Im5 — crescent + mosque, clipped at the bottom exactly as in the PDF */
.hc--moon{left:53.3242%;top:17.6037%;width:44.6875%;height:64.8348%;overflow:hidden}
.hl--moon{left:0;top:0;width:100.3497%;height:119.1429%}

/* Im6 — front-right cloud */
.hl--cloudB{left:63.2856%;top:70.4425%;width:45.625%;height:41.3091%}

/* Im7 — MEMS + DaR International Alliance lockup */
.hl--orgs{left:6.9932%;top:5.8814%;width:18.2292%;height:10.7441%}

/* Fm3 / Im8 — the two lantern clusters, each clipped to its own window */
.hc--lanternsB{left:82.6681%;top:0;width:17.3319%;height:31.0471%;overflow:hidden}
.hl--lanternsB{left:0;top:-33.9457%;width:168.6035%;height:133.9469%;transform:scaleX(-1)}
.hc--lanternsA{left:72.1698%;top:0;width:9.5833%;height:26.7675%;overflow:hidden}
.hl--lanternsA{left:0;top:-17.5787%;width:230.4348%;height:117.6455%}

/* Im9 / Im10 — star flares */
.hl--flareA{left:54.9835%;top:19.6441%;width:11.4583%;height:20.284%;transform-origin:0 0;transform:rotate(-8.981deg)}
.hl--flareB{left:85.6638%;top:32.1697%;width:5.3125%;height:9.4474%;transform-origin:0 0;transform:rotate(34.5deg)}

/* Fm4 — the venue cartouche, built from three clipped copies like the original */
.hc--plaqueL{left:5.625%;top:70.4179%;width:14.1662%;height:8.8422%;overflow:hidden}
.hc--plaqueM{left:19.7%;top:70.4179%;width:10.0384%;height:8.8422%;overflow:hidden}
.hc--plaqueR{left:29.6233%;top:70.4179%;width:13.7441%;height:8.8422%;overflow:hidden}
.hc--plaqueL .hl,.hc--plaqueM .hl,.hc--plaqueR .hl{top:0;width:auto;height:100%}
.hc--plaqueL .hl{left:0}
.hc--plaqueM .hl{left:-37.16%;transform:scaleX(-1)}
.hc--plaqueR .hl{left:-27.19%}

/* ---------- type ---------- */
.ht{position:absolute;margin:0;pointer-events:auto}

.hl--wordmark{left:1.7687%;top:18.8762%;width:43.3056%;height:auto}

.ht--title{
  left:6.9932%;top:48.147%;
  font-family:var(--f-body);font-weight:900;font-size:2.0828cqw;line-height:2.4479cqw;
  color:#ecc67d;letter-spacing:.093em;white-space:nowrap;
  text-shadow:0 0.18cqw 0.35cqw rgba(0,10,40,.45);
}
.ht--pill{
  left:6.6667%;top:57.9438%;width:6.7167%;height:3.0256%;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;
  background:linear-gradient(180deg,#f8dc99 0%,#f0cc88 55%,#e8bc73 100%);
  box-shadow:0 0.12cqw 0.3cqw rgba(0,10,40,.35);
  font-weight:800;font-size:1.1109cqw;line-height:1;color:#000;letter-spacing:.093em;text-indent:.093em;
}
.ht--themeText{
  left:6.9932%;top:62.4165%;
  font-weight:800;font-style:italic;font-size:1.1109cqw;line-height:1;
  color:#ecc67d;letter-spacing:.093em;white-space:nowrap;
  text-shadow:0 0.12cqw 0.28cqw rgba(0,10,40,.4);
}
.ht--date{
  left:6.9932%;top:66.7162%;
  font-weight:600;font-style:italic;font-size:1.3885cqw;line-height:1;
  color:#fff;letter-spacing:.093em;white-space:nowrap;
  text-shadow:0 0.12cqw 0.3cqw rgba(0,10,40,.45);
}
.ht--date sup{font-size:.6em;vertical-align:super;letter-spacing:0}
.ht--date__venue{display:none}
.ht--date__day{display:inline}
.ht--venue{
  left:8.1%;top:73.2324%;width:33.1167%;
  text-align:center;font-weight:600;font-style:italic;font-size:1.2506cqw;line-height:1;
  color:#000;letter-spacing:.093em;white-space:nowrap;
}

/* ---------- calls to action, placed in the artboard's free space ---------- */
.ht--actions{
  left:6.9932%;top:81.5066%;
  display:flex;gap:1.11cqw;align-items:center;
}
.ht--actions .btn{
  --btn-pad:1.11cqw 2.36cqw;
  font-size:1.111cqw;border-radius:999px;
}
.ht--meta{
  left:6.9932%;top:90.7688%;
  font-size:.903cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,227,172,.85);
}
.ht--meta b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}

/* the venue wrapper is inert on the artboard, real on mobile */
.ht--venuewrap{display:contents}
.hl--plaqueSolo{display:none}

/* ---------- gentle life (composition never moves) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hl--moon{animation:heroFloat 11s ease-in-out infinite}
  .hl--flareA{animation:heroTwinkle 5.5s ease-in-out infinite}
  .hl--flareB{animation:heroTwinkle 4.2s ease-in-out infinite .8s}
  .hl--lanternsA{animation:heroSwayA 7.5s ease-in-out infinite}
  .hl--lanternsB{animation:heroSwayB 9s ease-in-out infinite}
  .hl--sparkA,.hl--sparkB{animation:heroShimmer 9s ease-in-out infinite}
  .hero__stage > *{animation-play-state:running}
}
@keyframes heroFloat{0%,100%{translate:0 0}50%{translate:0 -0.9%}}
@keyframes heroTwinkle{0%,100%{opacity:.85;scale:1}50%{opacity:1;scale:1.06}}
@keyframes heroSwayA{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.5deg)}}
@keyframes heroSwayB{0%,100%{transform:scaleX(-1) rotate(-.4deg)}50%{transform:scaleX(-1) rotate(.4deg)}}
@keyframes heroShimmer{0%,100%{opacity:.92}50%{opacity:1}}

/* ============================================================
   STACKED LAYOUT — the artboard cannot hold up on a phone,
   so below 860px the same artwork is re-composed vertically.
   ============================================================ */
@media (max-width:860px){
  .hero__stage{
    aspect-ratio:auto;min-height:100svh;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:22px 22px clamp(292px,62vw,392px);
  }

  .hl--bg{left:0;top:0;width:100%;height:100%;object-fit:cover}
  .hl--pattern{left:-20%;top:-10%;width:140%;height:auto}
  .hl--silhouette{left:-25%;top:6%;width:150%;height:auto;opacity:.18}
  .hc--sparkA{clip-path:none;top:auto;height:52%}
  .hl--sparkA{left:-10%;top:-46%;width:170%;height:auto}
  .hc--sparkB{clip-path:none;top:auto;bottom:0;height:46%}
  .hl--sparkB{left:-30%;top:8%;width:190%;height:auto;transform:rotate(12deg)}

  .hc--moon{left:50%;bottom:clamp(82px,17vw,132px);top:auto;
    width:min(60vw,300px);height:auto;aspect-ratio:643.5 / 525;
    transform:translateX(-50%);overflow:hidden}
  .hl--cloudMid{left:-6%;bottom:clamp(0px,4vw,30px);top:auto;width:66%;height:auto}
  .hl--cloudA{left:38%;bottom:-6%;top:auto;width:74%;height:auto}
  .hl--cloudB{left:-14%;bottom:-10%;top:auto;width:80%;height:auto}
  .hl--cloudShadow{display:none}
  .hl--flareA{left:6%;top:auto;bottom:34%;width:26%;height:auto}
  .hl--flareB{left:78%;top:auto;bottom:44%;width:14%;height:auto}

  .hc--lanternsA{left:auto;right:-2%;top:0;width:26%;height:20%}
  .hl--lanternsA{width:150%;top:-14%}
  .hc--lanternsB{left:-4%;right:auto;top:0;width:22%;height:17%}
  .hl--lanternsB{width:150%;top:-16%}

  /* content flows normally */
  .hero__stage > .ht{
    position:relative;left:auto;top:auto;right:auto;
    width:auto;height:auto;white-space:normal;
  }
  .hero__stage > .hl--orgs{
    position:relative;left:auto;top:auto;height:auto;
    width:min(42vw,252px);margin:0 auto 22px;
  }
  .hero__stage > .hl--wordmark{
    position:relative;left:auto;top:auto;height:auto;
    width:min(70vw,330px);margin:0 auto 12px;
  }
  /* the title leads; everything below it steps down in size */
  .ht--title{font-size:12px;line-height:1.35;margin-bottom:13px}
  .ht--pill{
    position:relative;display:inline-flex;width:auto;height:auto;
    padding:5px 14px;margin:0 auto 10px;font-size:10px;
  }
  .ht--themeText{font-size:10.5px;line-height:1.5;margin-bottom:15px}
  .ht--date{font-size:11px;line-height:1.5;margin-bottom:20px}
  .ht--date__venue{display:block;margin-bottom:3px}
  .ht--date__day{display:block}

  .hc--plaqueL,.hc--plaqueM,.hc--plaqueR{display:none}
  .hero__stage > .ht--venuewrap{display:none}
  .ht--actions{
    position:relative;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:18px;
  }
  .ht--actions .btn{--btn-pad:14px 26px;font-size:.92rem}
  .ht--meta{position:relative;font-size:9px;letter-spacing:.12em}
}

@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .hl--lanternsA,.hl--lanternsB{animation:none}
}