:root{color-scheme:dark;--ink:#06151b;--bg2:#08202a;--deep:#0b2a33;--sea:#1f7a7a;--seal:#7fc4bd;--bronze:#c98a4b;--gold:#e3b868;--ember:#c4452d;--marble:#f2e8d5;--muted:#9fb6b4;--line:rgba(227,184,104,.22);--hdr:rgba(6,21,27,.9);--card:rgba(11,42,51,.8);--card2:rgba(6,21,27,.8);--card3:rgba(11,42,51,.7);--ft:#041015;--glow:rgba(31,122,122,.12);--emb:rgba(196,69,45,.28);--emb2:#1a0d0a;

--f-title:'Gideon Roman','Amiri',serif;--f-hero:'Italiana','Amiri',serif;--f-body:'Newsreader','Amiri',serif;--f-mono:'Chivo Mono','Tajawal',monospace}
:root[data-theme=light]{color-scheme:light;--ink:#f6efe0;--bg2:#efe4cc;--deep:#e6d9bd;--sea:#17706f;--seal:#17625f;--bronze:#9a5a22;--gold:#8a5614;--ember:#b23a22;--marble:#1c2a2e;--muted:#4f6366;--line:rgba(120,80,20,.3);--hdr:rgba(246,239,224,.92);--card:rgba(255,250,238,.92);--card2:rgba(244,234,214,.92);--card3:rgba(255,250,238,.88);--ft:#e8dbbf;--glow:rgba(23,112,111,.1);--emb:rgba(178,58,34,.18);--emb2:#f1dfcf}
[dir=rtl]{--f-body:'Amiri','Newsreader',serif;--f-mono:'Tajawal','Chivo Mono',sans-serif}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
html{scroll-padding-top:78px}body{background:linear-gradient(180deg,var(--ink),var(--bg2) 40%,var(--ink));color:var(--marble);font:19px/1.75 var(--f-body);overflow-x:clip;padding-top:62px;transition:background .3s,color .3s}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
#prog{position:fixed;top:0;inset-inline-start:0;height:3px;background:linear-gradient(90deg,var(--sea),var(--gold),var(--ember));z-index:99;width:0}
header{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;gap:14px;padding:10px 5vw;min-height:62px;background:var(--hdr);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--f-hero);font-size:1.45rem;letter-spacing:.06em;color:var(--gold);white-space:nowrap}.brand small{display:block;font:.6rem var(--f-mono);letter-spacing:.3em;color:var(--muted)}
nav{margin-inline-start:auto;display:flex;gap:20px;font:.74rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
nav a{opacity:.8;white-space:nowrap}nav a:hover{opacity:1;color:var(--gold)}
.tools{display:flex;gap:8px}.tools select,.tools button{background:var(--ink);color:var(--marble);border:1px solid var(--line);border-radius:99px;padding:5px 10px;font:.72rem var(--f-mono)}.tools a,.tools button{border:1px solid var(--line);background:none;padding:5px 12px;border-radius:99px;font:.72rem var(--f-mono)}
#menuBtn{display:none}
@media(max-width:1360px){#menuBtn{display:block;margin-inline-start:auto;border:1px solid var(--line);background:none;border-radius:8px;padding:5px 11px}nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--ink);border-bottom:1px solid var(--line);padding:16px 5vw;display:none;margin:0}nav.open{display:flex}.tools a.pg{display:none}}
section{padding:90px 6vw;position:relative}.wrap{max-width:1180px;margin:auto}
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:26px}.kicker i{width:46px;height:1px;background:var(--gold)}.kicker span{font:1.6rem var(--f-hero);color:var(--gold)}
h1,h2,h3{font-family:var(--f-title);font-weight:400;line-height:1.15}
h2{font-size:clamp(2rem,5.2vw,3.6rem);margin-bottom:18px}h2 em{color:var(--gold);font-style:normal;background:linear-gradient(90deg,var(--gold),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
h3{font-size:1.35rem;margin:6px 0}p+p{margin-top:12px}.over{font-style:italic;color:var(--seal);margin-bottom:6px}.note{font-size:.88rem;color:var(--muted);border-inline-start:2px solid var(--bronze);padding-inline-start:12px;margin-top:16px}
.hero2{position:relative;padding:0;display:flex;justify-content:center;overflow:hidden;background:#06151b;height:calc(100vh - 62px);height:calc(100svh - 62px);min-height:200px}.hero2:before{content:'';position:absolute;inset:-30px;background:url(../assets/images/echo-of-helen-hero.webp) center/cover;filter:blur(28px) brightness(.5)}.hero-img{position:relative;display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;align-self:center}
@media(max-width:700px){.hero2{height:auto;display:block}.hero-img{width:100%;max-height:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hero-sub{text-align:center;max-width:860px;margin:auto;padding:44px 6vw 10px}.hero-sub h2{font-size:clamp(1.3rem,3vw,2rem);color:var(--seal);margin-bottom:12px}
.btn{display:inline-flex;gap:10px;align-items:center;background:linear-gradient(135deg,var(--gold),var(--bronze));color:var(--ink);padding:13px 26px;border-radius:99px;font:600 .8rem var(--f-mono);letter-spacing:.12em;margin-top:22px}
.model-stage{position:relative;height:400px;width:100%}.model-stage canvas{width:100%!important;height:100%!important;cursor:grab;touch-action:pan-y}
.model-loader{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);text-align:center;font:.8rem var(--f-mono)}
.cap{font:.7rem var(--f-mono);letter-spacing:.14em;color:var(--muted);text-align:center;text-transform:uppercase}
@media(max-width:860px){.model-stage{height:320px}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}@media(max-width:860px){.two{grid-template-columns:1fr;gap:28px}}
.facts{display:grid;gap:10px;margin-top:20px}.facts div{display:flex;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding-top:10px}.facts span{font:1.2rem var(--f-hero);color:var(--gold);min-width:120px}
.band{background:linear-gradient(180deg,transparent,var(--glow),transparent)}.ember{background:radial-gradient(800px 400px at 50% 0,var(--emb),transparent),linear-gradient(180deg,var(--emb2),var(--ink))}
.frame{border:1px solid var(--line);padding:10px;border-radius:6px;background:linear-gradient(135deg,rgba(227,184,104,.1),rgba(31,122,122,.1))}.frame img{display:block;width:auto;max-width:100%;height:auto;max-height:min(82vh,780px);margin:0 auto;object-fit:contain;border-radius:3px}
.badge{display:inline-block;font:.64rem var(--f-mono);letter-spacing:.1em;padding:3px 10px;border-radius:99px;margin-top:10px;border:1px solid}
.b-fact{color:#8fe0b0;border-color:#8fe0b0}.b-text{color:var(--gold);border-color:var(--gold)}.b-myth{color:#d99aff;border-color:#d99aff}.b-photo{color:#9bd3ff;border-color:#9bd3ff}.b-art{color:var(--muted);border-color:var(--muted)}.b-hypo{color:#ffb38a;border-color:#ffb38a}
.strata{display:flex;flex-direction:column;gap:3px;margin:24px 0}.stratum{color:#f2e8d5;display:flex;justify-content:space-between;align-items:center;height:46px;padding:0 18px;border:0;border-radius:4px;background:linear-gradient(90deg,#3a2415,#6b4426);opacity:.65;transition:.25s}
.stratum:nth-child(odd){background:linear-gradient(90deg,#2a1c12,#52391f)}.stratum.on{opacity:1;background:linear-gradient(90deg,var(--ember),var(--bronze));transform:scale(1.015)}.stratum b{font:1.1rem var(--f-hero)}.stratum small{font:.68rem var(--f-mono)}
.strata-panel{border:1px solid var(--line);padding:22px;border-radius:8px;background:var(--card3)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin-top:30px}
.card,.echo,.doc{border:1px solid var(--line);border-radius:8px;padding:22px;background:linear-gradient(160deg,var(--card),var(--card2))}
.place-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card3);cursor:pointer;transition:.25s}.place-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:#0b1418 center/cover no-repeat}.ph:before{content:'';position:absolute;inset:-20px;background:inherit;filter:blur(18px) brightness(.55)}.ph img{position:relative;width:100%;height:100%;object-fit:contain}.place-card div{padding:16px 18px 20px}.place-card p{font-size:.92rem;color:#d7e4e1;line-height:1.6}
#plan,#route{height:440px;border-radius:8px;border:1px solid var(--line);margin-top:20px;z-index:1}
.pin span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ember);color:#fff;font:700 .8rem var(--f-mono);border:2px solid var(--marble)}.pin.sp span{background:var(--sea)}
.rlabel{overflow:visible}.rlabel i{display:block;width:8px;height:8px;border-radius:50%;background:var(--gold)}.rlabel b{position:absolute;top:-4px;inset-inline-start:14px;white-space:nowrap;font:600 .74rem var(--f-mono);color:#20150c;background:rgba(242,232,213,.92);padding:1px 7px;border-radius:4px}
.ship svg{width:40px;height:30px;filter:drop-shadow(0 2px 3px #000)}
.tabrow{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.tab{background:none;border:1px solid var(--line);border-radius:99px;padding:6px 16px;font-size:.9rem}.tab.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}.tabbody{border-inline-start:2px solid var(--bronze);padding-inline-start:18px;min-height:130px}
.echo .mono{display:block}
.arms{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-top:30px}.arm{border:1px solid var(--line);border-radius:8px;padding:16px;background:radial-gradient(circle at 50% 30%,var(--glow),var(--card2))}.arm .model-stage{height:290px}.arm h3{text-align:center}
.arm p{font-size:.86rem;color:var(--muted);text-align:center;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.filter{background:none;border:1px solid var(--line);padding:6px 16px;border-radius:99px;font:.74rem var(--f-mono)}.filter.on{background:var(--gold);color:var(--ink)}
.gallery{columns:3 260px;gap:16px;margin-top:20px}.gitem img{width:100%;height:auto;object-fit:contain}.gitem{break-inside:avoid;margin-bottom:16px;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:zoom-in;background:var(--deep)}.gitem figcaption{padding:10px 14px 14px;font-size:.92rem}.gitem b{font-weight:400;display:block}
#lb{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;z-index:200;padding:56px 14px 44px;touch-action:pan-y}#lb.on{display:grid}
#lb figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-width:0}
#lb img{max-width:100%;max-height:calc(100% - 44px);object-fit:contain;border-radius:6px;opacity:0;transition:opacity .25s}#lb img.in{opacity:1}
#lb figcaption{color:#f2e8d5;font-size:.95rem;margin-top:12px;text-align:center;min-height:1.5em}
.lb-x{position:absolute;top:10px;right:14px;width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:rgba(6,21,27,.8);color:var(--gold);font-size:1.1rem;line-height:1}
.lb-nav{width:50px;height:50px;border-radius:50%;border:1px solid var(--gold);background:rgba(6,21,27,.8);color:var(--gold);font-size:2rem;line-height:1;padding-bottom:5px;transition:.2s}.lb-nav:hover,.lb-x:hover{background:var(--gold);color:#06151b}
.lb-count{position:absolute;bottom:12px;left:0;right:0;text-align:center;font:.72rem var(--f-mono);letter-spacing:.14em;color:#9fb6b4}
#lb.single .lb-nav{visibility:hidden}
@media(hover:none) and (pointer:coarse){.lb-nav{display:none}#lb{grid-template-columns:minmax(0,1fr);padding:56px 8px 44px}}
.nav-extra{display:none}nav a.on,.tools a.on{color:var(--gold);opacity:1}
@media(max-width:1360px){.nav-extra{display:block}.nav-extra{border-top:1px solid var(--line);padding-top:12px!important}.nav-extra~.nav-extra{border-top:0;padding-top:6px!important}#mainNav a{padding:6px 0}}
footer{padding:50px 6vw 240px;border-top:1px solid var(--line);background:var(--ft);font-size:.9rem;color:var(--muted)}footer .row{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;max-width:1180px;margin:auto}footer img{height:48px;width:48px;border-radius:8px}
.rv{opacity:0;transform:translateY(24px);transition:.8s}.rv.in{opacity:1;transform:none}
.leaflet-popup-content{font-family:var(--f-body);color:#20150c;font-size:14px}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

.fab{position:fixed;z-index:70;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--gold);background:var(--ink);color:var(--gold);display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.35);transition:.3s;cursor:pointer;padding:0}
.fab:hover{box-shadow:0 0 22px var(--gold);transform:translateY(-2px)}.fab svg{width:26px;height:26px;fill:var(--gold)}
#topBtn{left:16px;bottom:150px;opacity:0;pointer-events:none;font-size:1.3rem}#topBtn.on{opacity:1;pointer-events:auto}
#waBtn{left:16px;bottom:90px}
#kmBtn{right:16px;bottom:90px;overflow:hidden}#kmBtn img{width:150%;max-width:none;margin:-2% 0 0 0;object-fit:cover}
#kmBtn.glow{animation:glow 1s ease-in-out 3}
@keyframes glow{0%,100%{box-shadow:0 0 6px var(--gold)}50%{box-shadow:0 0 34px 8px var(--gold)}}
#kmShow{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .45s}#kmShow.on{opacity:1}
#kmShow img{width:min(64vw,340px);border-radius:24px;box-shadow:0 0 80px rgba(227,184,104,.6);transform:scale(.85);transition:transform .45s}#kmShow.on img{transform:scale(1)}
footer .copy{max-width:900px;margin:26px auto 0;text-align:center;font-size:.82rem;line-height:1.7}footer .copy a{color:var(--gold)}
.tools{align-items:center}#themeBtn{width:34px;height:30px;padding:0;font-size:1rem}
@media(max-width:560px){header{gap:6px;padding:8px 3vw}.brand{font-size:1.05rem}.brand small{display:none}.tools{gap:5px}.tools select{font-size:.64rem;padding:4px 5px}#themeBtn{width:30px}#menuBtn{padding:4px 9px}.fab{width:44px;height:44px}}
