/* ============================================================
   ET VOYAJ — Shared hero emblem system
   Drop <div class="hero-emblem" data-feature="NAME"></div> inside a
   position:relative hero (.page-hero .frame). Emblem scales with the
   viewport (vw) so its proportion to the headline is constant at every width.
   ============================================================ */
:root{ --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }

/* ===== FEATURE STAGE ===== */
 .stage{ position:relative; height:min(64vh,560px); display:grid; place-items:center; }
 .feat{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; visibility:hidden; transform:scale(.94);
 transition:opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1), visibility .6s; }
 .feat.show{ opacity:1; visibility:visible; transform:scale(1); }

 .fwrap{ position:relative; width:min(56vh,500px); aspect-ratio:1; z-index:1; }
 .fwrap svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
 .f-glow{ position:absolute; inset:-12%; z-index:0;
 background:radial-gradient(circle at 50% 50%, rgba(160,136,88,.26), transparent 62%);
 filter:blur(10px); animation:glow-breathe 9s ease-in-out infinite; }
 @keyframes glow-breathe{ 0%,100%{ opacity:.7; transform:scale(1);} 50%{ opacity:1; transform:scale(1.05);} }
 .f-center{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none; }
 .f-center .mark{ font-family:var(--display); font-size:clamp(28px,4.4vh,44px); color:var(--warm); letter-spacing:.04em; line-height:1; }
 .f-center .mark .amp{ font-style:italic; color:var(--gold); }
 .f-center .sub{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--gold-2); margin-top:11px; text-transform:uppercase; }
 .f-hud{ position:absolute; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,245,240,.52); line-height:1.5; }
 .f-hud.tl{ top:-6px; left:-6px; } .f-hud.tr{ top:-6px; right:-6px; text-align:right; }
 .f-hud.bl{ bottom:-6px; left:-6px; } .f-hud.br{ bottom:-6px; right:-6px; text-align:right; }
 .f-hud .g{ color:var(--gold-2); }

 /* shared svg line classes */
 .ln1{ fill:none; stroke:rgba(198,168,116,.7); stroke-width:1; stroke-linejoin:round; }
 .ln2{ fill:none; stroke:rgba(198,168,116,.42); stroke-width:1; stroke-linejoin:round; }
 .ln3{ fill:none; stroke:rgba(247,245,240,.14); stroke-width:1; }
 .lng{ fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; }
 .fillg{ fill:rgba(160,136,88,.10); stroke:rgba(198,168,116,.5); stroke-width:1; }
 .ringtext text{ fill:var(--gold-2); font-family:var(--ui); font-size:12px; letter-spacing:.4em; text-transform:uppercase; font-weight:500; }

 @keyframes spin{ to{ transform:rotate(360deg);} }
 @keyframes spin-rev{ to{ transform:rotate(-360deg);} }
 .spin-vslow{ transform-origin:200px 200px; animation:spin 140s linear infinite; }
 .spin-slow{ transform-origin:200px 200px; animation:spin 80s linear infinite; }
 .spin-mid{ transform-origin:200px 200px; animation:spin 70s linear infinite; }
 .spin-rev{ transform-origin:200px 200px; animation:spin-rev 100s linear infinite; }
 .spin-rev-slow{ transform-origin:200px 200px; animation:spin-rev 120s linear infinite; }

 /* ===== APERTURE ===== */
 .ap .dial-ring{ fill:none; stroke:rgba(198,168,116,.32); stroke-width:1; }
 .ap .dial-ring.soft{ stroke:rgba(247,245,240,.10); }
 .ap .ticks line{ stroke:rgba(198,168,116,.5); stroke-width:1; }
 .ap .ticks line.major{ stroke:rgba(247,245,240,.55); }
 .ap .focus-arc{ fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; transform-origin:200px 200px; animation:spin 22s cubic-bezier(.6,0,.4,1) infinite; }
 .ap .iris polygon{ fill:none; stroke:rgba(198,168,116,.55); stroke-width:1; stroke-linejoin:round; }
 .ap .iris-breathe{ transform-origin:200px 200px; animation:iris-breathe 7s ease-in-out infinite; }
 @keyframes iris-breathe{ 0%,100%{ transform:scale(.93);} 50%{ transform:scale(1.02);} }

 /* ===== SIGNATURE (About) ===== */
 .sig-stage{ position:absolute; inset:0; display:grid; place-items:center; }
 .sig-name{ font-family:var(--display); font-style:italic; font-size:clamp(46px,7vh,76px); color:var(--warm); line-height:1; letter-spacing:.01em;
 white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,#000 0 0); position:relative; }
 .sig-name .reveal{ display:inline-block; clip-path:inset(0 100% 0 0); animation:write 2.2s 0.4s cubic-bezier(.6,0,.3,1) forwards; }
 @keyframes write{ to{ clip-path:inset(0 0 0 0);} }
 .sig-flourish{ position:absolute; left:50%; top:62%; transform:translateX(-50%); width:62%; height:60px; overflow:visible; }
 .sig-flourish path{ fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round;
 stroke-dasharray:520; stroke-dashoffset:520; animation:draw 1.6s 2.2s ease forwards; }
 @keyframes draw{ to{ stroke-dashoffset:0; } }
 .sig-sub{ position:absolute; left:50%; top:78%; transform:translateX(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-2); opacity:0; animation:fadein 1s 3.4s forwards; white-space:nowrap; }
 @keyframes fadein{ to{ opacity:1; } }

 /* ===== FIVE-POINT (Services) ===== */
 .fp .spoke{ stroke:var(--gold); stroke-width:1.4; stroke-dasharray:3 7; stroke-linecap:round; animation:flow 2.6s linear infinite; }
 @keyframes flow{ to{ stroke-dashoffset:-40; } }
 .fp .web{ fill:none; stroke:rgba(198,168,116,.28); stroke-width:1; }
 .fp .node{ fill:var(--ink); stroke:var(--gold-2); stroke-width:1.4; }
 .fp .node-pulse{ fill:none; stroke:var(--gold); stroke-width:1.2; transform-origin:center; animation:nodepulse 2.8s ease-out infinite; }
 @keyframes nodepulse{ 0%{ transform:scale(.6); opacity:.8;} 100%{ transform:scale(2.4); opacity:0;} }
 .fp .hub{ fill:rgba(160,136,88,.14); stroke:var(--gold); stroke-width:1.4; }
 .fp .nlabel{ fill:rgba(247,245,240,.82); font-family:var(--ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
 .fp .nnum{ fill:var(--gold-2); font-family:var(--mono); font-size:9px; letter-spacing:.1em; }

 /* ===== JOURNEY THREAD (Itinerary) ===== */
 .thr .route-bg{ fill:none; stroke:rgba(247,245,240,.12); stroke-width:1.5; }
 .thr .route{ fill:none; stroke:rgba(198,168,116,.6); stroke-width:1.5; stroke-dasharray:3 6; stroke-linecap:round;
 animation:flow 3.4s linear infinite; }
 .thr .stop{ fill:var(--ink); stroke:var(--gold-2); stroke-width:1.4; }
 .thr .stop-ring{ fill:none; stroke:var(--gold); stroke-width:1.2; transform-box:fill-box; transform-origin:center; }
 .thr .traveler{ fill:var(--warm); }
 .thr .traveler-glow{ fill:var(--gold); opacity:.4; }
 .thr .daynum{ fill:var(--gold-2); font-family:var(--mono); font-size:9px; letter-spacing:.08em; }
 .thr .dayname{ fill:rgba(247,245,240,.78); font-family:var(--ui); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

 /* ===== COMPASS (Transport) ===== */
 .cmp .dial{ fill:none; stroke:rgba(198,168,116,.32); stroke-width:1; }
 .cmp .ticks line{ stroke:rgba(198,168,116,.45); stroke-width:1; }
 .cmp .ticks line.major{ stroke:rgba(247,245,240,.55); }
 .cmp .card{ fill:var(--gold-2); font-family:var(--ui); font-size:15px; letter-spacing:.1em; font-weight:600; }
 .cmp .card.minor{ fill:rgba(247,245,240,.45); font-size:11px; font-weight:500; }
 .cmp .needle{ transform-origin:200px 200px; animation:needle 11s ease-in-out infinite alternate; }
 @keyframes needle{ 0%{ transform:rotate(-34deg);} 100%{ transform:rotate(46deg);} }
 .cmp .needle .n-n{ fill:var(--gold); }
 .cmp .needle .n-s{ fill:rgba(247,245,240,.3); }
 .cmp .hub-o{ fill:var(--ink); stroke:var(--gold-2); stroke-width:1.4; }

 /* ===== LANTERNS (MICE) ===== */
 .lan-svg .link{ stroke:rgba(198,168,116,.22); stroke-width:1; }
 .lan{ position:absolute; transform:translate(-50%,-50%); }
 .lan .glow{ position:absolute; inset:-9px; border-radius:50%; background:radial-gradient(circle,rgba(198,168,116,.5),transparent 68%); }
 .lan .dot{ position:relative; width:7px; height:7px; background:var(--gold-2); transform:rotate(45deg); box-shadow:0 0 8px rgba(198,168,116,.7); }
 .lan.big .dot{ width:11px; height:11px; background:var(--warm); }
 .lan-anim{ animation:twinkle 3.4s ease-in-out infinite, floaty 7s ease-in-out infinite; }
 @keyframes twinkle{ 0%,100%{ opacity:.45;} 50%{ opacity:1;} }
 @keyframes floaty{ 0%,100%{ transform:translate(-50%,-50%);} 50%{ transform:translate(-50%,calc(-50% - 7px));} }

 /* ===== CONTINUOUS THREAD / INFINITY (End-to-End) ===== */
 .inf .track{ fill:none; stroke:rgba(198,168,116,.28); stroke-width:1.5; }
 .inf .comet{ fill:none; stroke:var(--gold); stroke-width:2.4; stroke-linecap:round;
 stroke-dasharray:60 740; animation:comet 5.5s linear infinite; }
 @keyframes comet{ to{ stroke-dashoffset:-800; } }
 .inf .stop{ fill:var(--ink); stroke:var(--gold-2); stroke-width:1.3; }
 .inf .traveler{ fill:var(--warm); }
 .inf .traveler-glow{ fill:var(--gold); opacity:.45; }
 .inf .slabel{ fill:rgba(247,245,240,.7); font-family:var(--ui); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; }

 /* ===== BAB BOU JELOUD (Home — the Blue Gate of Fès) ===== */
 .bbj path,.bbj line,.bbj circle,.bbj polygon,.bbj rect,.bbj ellipse{ vector-effect:non-scaling-stroke; }
 .bbj .g-ln{ fill:none; stroke:rgba(206,176,122,.92); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
 .bbj .g-soft{ fill:none; stroke:rgba(198,168,116,.5); stroke-width:1; stroke-linejoin:round; stroke-linecap:round; }
 .bbj .g-faint{ fill:none; stroke:rgba(247,245,240,.1); stroke-width:1; }
 .bbj .tile{ fill:rgba(31,67,93,.36); stroke:none; }
 .bbj .net{ fill:none; stroke:rgba(198,168,116,.18); stroke-width:1; }
 .bbj .bbj-glow{ animation:doorglow 6s ease-in-out infinite; }
 .bbj .minar{ fill:none; stroke:rgba(246,214,150,.78); stroke-width:1.3; stroke-linejoin:round; stroke-linecap:round; }
 .bbj .minar-fill{ fill:rgba(246,214,150,.55); stroke:none; }
 .bbj .star{ fill:#e9c98a; opacity:.5; animation:haloflick 3s ease-in-out infinite; }
 .bbj .arch-draw2{ stroke-dasharray:1700; stroke-dashoffset:1700; animation:draw 2.6s .2s ease forwards; }

 /* ===== THE MINARET (Home — Hassan II, Casablanca) ===== */
 .minaret path,.minaret line,.minaret circle,.minaret polygon,.minaret rect,.minaret ellipse{ vector-effect:non-scaling-stroke; }
 .minaret .mn-ln{ fill:none; stroke:rgba(206,176,122,.9); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
 .minaret .mn-soft{ fill:none; stroke:rgba(198,168,116,.46); stroke-width:1; stroke-linejoin:round; }
 .minaret .mn-faint{ fill:none; stroke:rgba(247,245,240,.12); stroke-width:1; }
 .minaret .mn-glow{ animation:doorglow 6s ease-in-out infinite; }
 .minaret .mn-orb{ fill:#f4e3b8; filter:drop-shadow(0 0 7px rgba(244,210,140,.85)); }
 .minaret .mn-star{ fill:#e9c98a; opacity:.5; animation:haloflick 3.2s ease-in-out infinite; }

 /* ===== THE DOOR / BAB (Home — glowing Moorish threshold) ===== */
 .bab path, .bab circle, .bab polygon, .bab line, .bab ellipse{ vector-effect:non-scaling-stroke; }
 .bab .door-ln{ fill:none; stroke:rgba(206,176,122,.9); stroke-width:1.85; stroke-linejoin:round; stroke-linecap:round; }
 .bab .door-soft{ fill:none; stroke:rgba(198,168,116,.46); stroke-width:1; stroke-linejoin:round; stroke-linecap:round; }
 .bab .door-faint{ fill:none; stroke:rgba(247,245,240,.12); stroke-width:1; }
 .bab .door-diamond{ fill:none; stroke:rgba(198,168,116,.5); stroke-width:1; }
 .bab .glow-fill{ animation:doorglow 6s ease-in-out infinite; }
 @keyframes doorglow{ 0%,100%{ opacity:.6;} 50%{ opacity:1;} }
 .bab .beam{ stroke:rgba(246,212,150,.13); stroke-width:1; animation:doorglow 5s ease-in-out infinite; }
 .bab .mote{ fill:#f4e3b8; opacity:0; transform-box:fill-box; animation:mote 6.5s ease-in-out infinite; }
 @keyframes mote{ 0%{ opacity:0; transform:translateY(4px);} 28%{ opacity:.9;} 100%{ opacity:0; transform:translateY(-66px);} }
 .bab .arch-draw{ stroke-dasharray:1500; stroke-dashoffset:1500; animation:draw 2.4s .2s ease forwards; }
 .fwrap.bab{ width:min(64vh,580px); }

 /* ===== THE MARK (Home — luminous rosette + flight orbit) ===== */
 .mark polygon, .mark circle, .mark path, .mark ellipse{ vector-effect:non-scaling-stroke; }
 .mark .mk-ros{ transform-origin:200px 200px; animation:spin 150s linear infinite; }
 .mark .mk-s1{ fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(160,136,88,.4)); }
 .mark .mk-s2{ fill:none; stroke:rgba(198,168,116,.5); stroke-width:1; stroke-linejoin:round; }
 .mark .mk-s3{ fill:none; stroke:rgba(247,245,240,.12); stroke-width:1; }
 .mark .mk-fill{ fill:rgba(160,136,88,.12); stroke:rgba(198,168,116,.55); stroke-width:1; }
 .mark .mk-diamond{ fill:none; stroke:rgba(198,168,116,.45); stroke-width:1; }
 .mark .mk-bloom{ fill:#caa86a; opacity:.16; }
 .mark .mk-core{ fill:#f4e3b8; filter:drop-shadow(0 0 11px rgba(244,210,140,.85)); transform-box:fill-box; transform-origin:center; animation:flicker 4s ease-in-out infinite; }
 .mark .mk-orbit{ fill:none; stroke:rgba(198,168,116,.4); stroke-width:1.1; stroke-dasharray:2 6; }
 .mark .mk-comet{ fill:none; stroke:var(--gold); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:40 860; animation:comet-mk 7s linear infinite; }
 @keyframes comet-mk{ to{ stroke-dashoffset:-900; } }
 .mark .mk-port{ fill:var(--gold-2); }
 .mark .mk-plane{ fill:var(--warm); }
 .mark .mk-plane-glow{ fill:var(--gold); opacity:.55; }

 /* ===== THE GALA (MICE — concentric banquet rings + stage) ===== */
 .gala polygon, .gala circle{ vector-effect:non-scaling-stroke; }
 .gala .tbl{ animation:gala-wave 5s ease-in-out infinite; }
 @keyframes gala-wave{ 0%,100%{ opacity:.32;} 50%{ opacity:1;} }
 .gala .tbl-ring{ fill:none; stroke:rgba(198,168,116,.6); stroke-width:1; }
 .gala .tbl-dot{ fill:var(--gold-2); }
 .gala .stage{ fill:none; stroke:var(--gold); stroke-width:1.5; }
 .gala .stage-core{ fill:var(--warm); }
 .gala .stage-glow{ fill:rgba(160,136,88,.20); animation:glow-breathe 5s ease-in-out infinite; transform-origin:200px 200px; }

 /* ===== THE LANTERN / FANOUS (MICE) ===== */
 .fanous path, .fanous circle, .fanous polygon, .fanous line{ vector-effect:non-scaling-stroke; }
 .fanous .lan-gold{ fill:none; stroke:rgba(198,168,116,.8); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }
 .fanous .lan-soft{ fill:none; stroke:rgba(198,168,116,.42); stroke-width:1; stroke-linejoin:round; stroke-linecap:round; }
 .fanous .lan-fill{ fill:rgba(160,136,88,.08); stroke:none; }
 .fanous .lantern{ transform-box:fill-box; transform-origin:50% 0%; animation:sway 6.5s ease-in-out infinite; }
 @keyframes sway{ 0%,100%{ transform:rotate(-2.4deg);} 50%{ transform:rotate(2.4deg);} }
 .fanous .flame{ fill:#f6d99c; transform-box:fill-box; transform-origin:center; animation:flicker 2.4s ease-in-out infinite; filter:drop-shadow(0 0 9px rgba(246,210,140,.9)); }
 @keyframes flicker{ 0%,100%{ opacity:.82; transform:scale(1);} 42%{ opacity:1; transform:scale(1.12);} 70%{ opacity:.66; transform:scale(.95);} }
 .fanous .halo{ animation:haloflick 2.4s ease-in-out infinite; }
 @keyframes haloflick{ 0%,100%{ opacity:.45;} 45%{ opacity:.85;} }
 .fanous .ray{ stroke:rgba(246,212,150,.16); stroke-width:1; }
 .fanous .rays{ animation:haloflick 3.2s ease-in-out infinite; }
 .fanous .star-fill{ fill:rgba(246,210,140,.14); stroke:rgba(198,168,116,.55); stroke-width:1; }
 .fanous .ember{ fill:#e9c98a; opacity:0; animation:ember 4.6s ease-in-out infinite; }
 @keyframes ember{ 0%{ opacity:0; transform:translateY(0);} 18%{ opacity:.9;} 100%{ opacity:0; transform:translateY(-58px);} }
 .fanous .mini{ animation:haloflick 3s ease-in-out infinite; }

 /* ===== ZELLIGE (Hotels) ===== */
 .zel .diamond, .mark .diamond{ fill:none; stroke:rgba(198,168,116,.5); stroke-width:1; }
 .zel polygon, .zel circle, .zel path{ vector-effect:non-scaling-stroke; }

 /* ===== SOLARI (Destinations) ===== */
 .solari{ position:relative; width:min(560px,94%); z-index:1; }
 .solari .board-head{ display:flex; justify-content:space-between; align-items:center; font-family:var(--ui); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-2); margin-bottom:16px; padding:0 2px; }
 .solari .board-head .live{ display:inline-flex; align-items:center; gap:8px; color:rgba(247,245,240,.6); }
 .solari .board-head .live .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(160,136,88,.7); animation:blink 1.8s ease-in-out infinite; }
 @keyframes blink{ 0%,55%,100%{opacity:1;} 28%{opacity:.2;} }
 .solari .board{ border:1px solid rgba(247,245,240,.14); background:rgba(10,8,6,.34); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:10px; display:flex; flex-direction:column; gap:7px; box-shadow:0 30px 70px rgba(0,0,0,.4); }
 .solari .row{ display:grid; grid-template-columns:auto minmax(150px,1fr) auto; gap:9px; align-items:stretch; perspective:600px; }
 .solari .flap{ position:relative; overflow:hidden; display:flex; align-items:center; transform-origin:center; transition:transform .26s cubic-bezier(.5,0,.5,1); backface-visibility:hidden; }
 .solari .flap::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.55); }
 .solari .flap.code{ gap:4px; }
 .solari .flap.code .ch{ width:30px; height:42px; display:grid; place-items:center; background:linear-gradient(180deg,#221c14,#14110b); font-family:var(--mono); font-weight:500; font-size:22px; color:var(--gold-2); position:relative; overflow:hidden; }
 .solari .flap.code .ch::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.6); }
 .solari .flap.city{ padding:0 16px; height:42px; background:linear-gradient(180deg,#1c1813,#121009); }
 .solari .flap.city .nm{ font-family:var(--display); font-size:22px; line-height:1; color:var(--warm); letter-spacing:.01em; white-space:nowrap; }
 .solari .flap.note{ padding:0 14px; height:42px; background:linear-gradient(180deg,#1c1813,#121009); }
 .solari .flap.note .tx{ font-family:var(--ui); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,245,240,.55); text-align:right; white-space:nowrap; }
 .solari .flap.flip{ transform:rotateX(90deg); }
 .solari .board-foot{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,245,240,.45); margin-top:14px; padding:0 2px; }
 .solari .board-foot .g{ color:var(--gold-2); }

 /* ===== PAGE SWITCHER ===== */
 .switcher{ position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:90; max-width:96vw;
 display:flex; align-items:stretch; gap:2px; overflow-x:auto; scrollbar-width:none;
 background:rgba(20,15,10,.66); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
 border:1px solid rgba(247,245,240,.16); border-bottom:0; padding:6px; box-shadow:0 -10px 40px rgba(0,0,0,.5); }
 .switcher::-webkit-scrollbar{ display:none; }
 .switcher button{ font:inherit; cursor:pointer; background:none; border:0; color:rgba(247,245,240,.62);
 font-family:var(--ui); font-size:11.5px; letter-spacing:.06em; padding:10px 14px; white-space:nowrap;
 transition:background .3s,color .3s; display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1; }
 .switcher button .n{ font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; color:var(--gold-2); opacity:.65; }
 .switcher button:hover{ color:var(--warm); }
 .switcher button.active{ background:var(--gold); color:var(--ink); }
 .switcher button.active .n{ color:var(--ink); opacity:.55; }

 .exp-tag{ position:fixed; top:16px; left:5vw; z-index:90; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(247,245,240,.5); }
 .exp-tag .g{ color:var(--gold-2); }
 .exp-hint{ position:fixed; top:16px; right:5vw; z-index:90; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,245,240,.4); }

 /* ===== THE KHATIM / SEAL (Home — Moroccan geometry) ===== */
 .seal path,.seal circle,.seal line,.seal polygon{ vector-effect:non-scaling-stroke; }
 .fwrap.seal{ width:min(62vh,560px); }
 .seal .kh-faint{ fill:none; stroke:rgba(247,245,240,.1); stroke-width:1; }
 .seal .kh-faint2{ fill:none; stroke:rgba(198,168,116,.16); stroke-width:1; }
 .seal .kh-star{ fill:rgba(247,245,240,.85); animation:twinkle 3.4s ease-in-out infinite; }
 .seal .kh-bloom{ animation:glow-breathe 8s ease-in-out infinite; }
 .seal .kh-rays{ animation:haloflick 6s ease-in-out infinite; transform-origin:200px 200px; }
 .seal .kh-ray{ stroke:rgba(246,212,150,.12); stroke-width:1; }
 .seal .kh-rot{ animation:spin 170s linear infinite; }
 .seal .kh-gold{ fill:none; stroke:rgba(198,168,116,.9); stroke-width:1.7; stroke-linejoin:round; }
 .seal .kh-soft{ fill:none; stroke:rgba(198,168,116,.42); stroke-width:1; stroke-linejoin:round; }
 .seal .kh-diamond{ fill:rgba(246,210,140,.18); stroke:rgba(198,168,116,.6); stroke-width:1; }
 .seal .kh-coreglow{ animation:glow-breathe 6s ease-in-out infinite; transform-origin:200px 200px; }
 .seal .kh-starfill{ fill:rgba(246,210,140,.18); stroke:rgba(198,168,116,.6); stroke-width:1; }
 .seal .kh-core{ fill:#f6d99c; transform-box:fill-box; transform-origin:center; animation:flicker 2.8s ease-in-out infinite; filter:drop-shadow(0 0 12px rgba(246,210,140,.9)); }
 .seal .kh-ember{ fill:#e9c98a; opacity:0; animation:ember 4.8s ease-in-out infinite; }
 .seal .kh-seal{ transform-origin:200px 200px; animation:seal-breathe 9s ease-in-out infinite; }
 @keyframes seal-breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.012);} }

 /* ===== THE DESERT SUN (Home — Le Grand Sud) ===== */
 .dsun path,.dsun circle,.dsun line,.dsun polygon{ vector-effect:non-scaling-stroke; }
 .fwrap.dsun{ width:min(60vh,540px); }
 .dsun .sky-faint{ fill:none; stroke:rgba(247,245,240,.1); stroke-width:1; }
 .dsun .sun-bloom{ animation:glow-breathe 8s ease-in-out infinite; }
 .dsun .rays{ animation:spin 120s linear infinite, haloflick 4.5s ease-in-out infinite; }
 .dsun .ray{ stroke:rgba(246,212,150,.42); stroke-width:1; }
 .dsun .sun-rim{ fill:none; stroke:rgba(246,224,164,.7); stroke-width:1; }
 .dsun .ridge{ fill:none; stroke:rgba(206,176,122,.92); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
 .dsun .ridge.soft{ stroke:rgba(206,176,122,.62); stroke-width:1.3; }
 .dsun .star{ fill:#e9c98a; opacity:.5; animation:haloflick 3s ease-in-out infinite; }
 .dsun .mote{ fill:#f4e3b8; opacity:0; transform-box:fill-box; animation:mote 6.8s ease-in-out infinite; }
 .dsun .bird{ fill:none; stroke:rgba(206,176,122,.7); stroke-width:1.4; stroke-linecap:round; }
 .dsun .birds{ transform-box:fill-box; transform-origin:center; animation:floaty 11s ease-in-out infinite; }

 /* ===== THE OASIS (Home alt — moon, palm & still water) ===== */
 .oasis path,.oasis circle,.oasis line{ vector-effect:non-scaling-stroke; }
 .oasis .oa-ln{ fill:none; stroke:rgba(206,176,122,.9); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
 .oasis .oa-soft{ fill:none; stroke:rgba(198,168,116,.5); stroke-width:1; stroke-linecap:round; }
 .oasis .oa-frond{ fill:none; stroke:rgba(206,176,122,.82); stroke-width:1.4; stroke-linecap:round; }
 .oasis .oa-date{ fill:#caa86a; }
 .oasis .oa-rim{ fill:none; stroke:rgba(246,224,164,.55); stroke-width:1; }
 .oasis .oa-water{ stroke:rgba(198,168,116,.4); stroke-width:1; }
 .oasis .oa-refl{ animation:oaglow 6.5s ease-in-out infinite; }
 @keyframes oaglow{ 0%,100%{ opacity:.2;} 50%{ opacity:.4;} }
 .oasis .oa-ripple path{ fill:none; stroke:rgba(198,168,116,.32); stroke-width:1; animation:oarip 5.5s ease-in-out infinite; }
 @keyframes oarip{ 0%,100%{ opacity:.12;} 50%{ opacity:.5;} }
 .oasis .star{ fill:#e9c98a; opacity:.5; animation:haloflick 3.2s ease-in-out infinite; }

 /* ===== MOBILE ===== */
 @media (max-width:860px){
 .frame{ grid-template-columns:1fr; gap:44px; padding:110px 7vw 150px; min-height:auto; align-items:start; }
 .hero h1{ font-size:clamp(44px,11vw,74px); }
 .stage{ height:min(82vw,420px); order:2; }
 .fwrap{ width:min(76vw,360px); }
 .solari{ width:100%; }
 .solari .flap.note{ display:none; }
 .solari .row{ grid-template-columns:auto minmax(120px,1fr); }
 .exp-hint{ display:none; }
 .switcher button{ padding:9px 11px; font-size:10.5px; }
 .switcher button .n{ display:none; }
 }
 @media (max-width:480px){ .hero .meta{ grid-template-columns:1fr; } }

/* ===== EMBLEM HOST — proportional placement (overrides gallery caps) ===== */
.hero-emblem{
  position:absolute; z-index:1;
  top:50%; left:50%; transform:translateY(-50%);
  display:grid; place-items:center;
  pointer-events:none;
  opacity:0; animation:emblem-in 1.1s ease forwards;
}
@keyframes emblem-in{ to{ opacity:1; } }
/* every circular emblem: left edge at screen centre, sized by viewport width */
.hero-emblem .fwrap{ width:min(38vw, 80vh); aspect-ratio:1; }
/* the Solari departures board is a wide tabular panel, not a disc:
   anchor its left edge at screen centre (consistent placement, never hugging
   either side) and bump the lettering for legibility */
.hero-emblem:has(.solari){ left:53%; right:auto; transform:translateY(-50%); }
.hero-emblem .solari{ width:min(43vw, 760px); }
.hero-emblem .solari .flap.code .ch{ width:36px; height:50px; font-size:26px; }
.hero-emblem .solari .flap.city{ height:50px; }
.hero-emblem .solari .flap.note{ height:50px; }
.hero-emblem .solari .flap.city .nm{ font-size:26px; }
.hero-emblem .solari .flap.note .tx{ font-size:11.5px; }
.hero-emblem .solari .board-head{ font-size:12px; }
.hero-emblem .solari .board-foot{ font-size:11px; }
.hero-emblem .f-glow{ animation:glow-breathe 9s ease-in-out infinite; }

/* ============================================================
   Tablet + phone (≤1024): the side-by-side hero is too cramped for the
   large display headline, so the emblem flows at the TOP in normal order
   and the copy stacks beneath it. Side-by-side stays desktop-only (≥1025).
   ============================================================ */
@media (max-width: 1024px){
  .page-hero .frame{ min-height:auto; justify-content:flex-start; align-items:stretch; text-align:left; gap:0; padding:130px 7vw 78px; }
  /* order on mobile: breadcrumb · TITLE · geometry · lede · meta */
  .page-hero .frame > .crumbs{ order:0; justify-content:flex-start; margin-bottom:24px; }
  .page-hero .frame > h1{ order:1; font-size:clamp(50px, 12vw, 104px); line-height:.94; letter-spacing:-.022em; max-width:none; margin:0; }
  .page-hero .frame > .hero-emblem{ order:2; }
  .page-hero .frame > .lede{ order:3; margin:32px 0 0; max-width:58ch; border-top:0; padding-top:0; font-size:clamp(16px,2.3vw,19px); }
  .page-hero .frame > .meta-row{ order:4; justify-content:flex-start; margin:30px 0 0; max-width:100%; }
  /* geometry as a bold centerpiece: big enough that the linework reads,
     decorative HUD corner labels stripped (unreadable noise on small screens) */
  .hero-emblem{ position:static; transform:none; width:100%; display:flex; justify-content:center; margin:40px 0 6px; }
  .hero-emblem .fwrap{ width:min(80vw, 460px); }
  .hero-emblem .f-hud{ display:none; }
  /* Destinations: the Solari board becomes a real mobile feature —
     full-width, code + city only (drop the note column), reset desktop offset */
  .hero-emblem:has(.solari){ display:flex; position:static; transform:none; left:auto; right:auto; }
  .hero-emblem .solari{ width:100%; max-width:460px; }
  .hero-emblem .solari .row{ grid-template-columns:auto 1fr; }
  .hero-emblem .solari .flap.note{ display:none; }
  .hero-emblem .solari .flap.code .ch{ width:32px; height:46px; font-size:22px; }
  .hero-emblem .solari .flap.city{ height:46px; }
  .hero-emblem .solari .flap.city .nm{ font-size:21px; }
}
@media (max-width: 760px){
  .page-hero .frame{ padding:114px 7vw 66px; }
  .page-hero .frame > h1{ font-size:clamp(44px, 13vw, 78px); }
  .hero-emblem{ margin:34px 0 4px; }
  .hero-emblem .fwrap{ width:min(86vw, 380px); }
}
@media (max-width: 460px){
  .page-hero .frame{ padding-top:104px; }
  .page-hero .frame > h1{ font-size:clamp(40px, 12.5vw, 62px); }
  .hero-emblem .fwrap{ width:min(84vw, 330px); }
}