@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cinzel:wght@500;600;700&display=swap");

:root { --night:#091619; --night-soft:#0e2023; --paper:#eee4cc; --gold:#d8b66c; --muted:#9ba6a0; --line:#d8b66c33; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--night); color:var(--paper); font-family:"Amiri", Georgia, serif; transition:background .25s,color .25s; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.23; background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px,transparent 5px); mix-blend-mode:soft-light; }
main { overflow:hidden; }
.site-header { width:min(1240px,90vw); height:92px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--paper); text-decoration:none; direction:ltr; }
/* The actual Atlas emblem used by the login and application headers. */
.login-logo-emblem { position:relative; display:grid; place-items:center; width:128px; height:128px; border:2px solid var(--gold); border-radius:50%; color:var(--paper); background:radial-gradient(circle,#183438 0 46%,transparent 47%); box-shadow:0 0 0 7px #d8b66c1d,0 0 0 8px var(--gold); }.login-logo-emblem::before { content:""; position:absolute; inset:12px; border:1px solid var(--gold); border-radius:50%; transform:rotate(45deg); }.login-logo-emblem::after { content:""; position:absolute; inset:-13px 61px; border-left:2px solid var(--gold); }.login-logo-dna { position:absolute; top:19px; z-index:1; display:flex; flex-direction:column; gap:5px; width:64px; opacity:.75; }.login-logo-dna i { display:block; height:5px; border-top:2px solid #c58e50; border-bottom:2px solid var(--gold); border-radius:50%; transform:rotate(-12deg); }.login-logo-dna i:nth-child(even){transform:rotate(12deg)}.login-logo-emblem b { position:absolute; z-index:2; bottom:19px; padding:2px 7px; color:var(--paper); background:var(--night); font:800 16px "Cinzel",serif; letter-spacing:2px; }
.login-logo { display:block; height:48px; width:48px; }.login-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.start-actions { display:flex; align-items:center; gap:10px; }.header-link,.text-action { color:var(--paper); text-decoration:none; font-size:17px; }
.header-link { padding:8px 16px; border-bottom:1px solid var(--gold); }
.theme-toggle { border:1px solid var(--line); border-radius:999px; padding:7px 12px; color:var(--paper); background:transparent; font:16px "Amiri",serif; cursor:pointer; }
html[lang="ar"] .theme-toggle { direction:rtl; font-family:"Amiri","Noto Naskh Arabic",Tahoma,serif; font-size:17px; font-weight:700; line-height:1.25; }
.hero { width:min(1240px,90vw); min-height:620px; margin:auto; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:30px; }
.eyebrow { margin:0 0 16px; color:var(--gold); direction:ltr; font:600 11px "Cinzel",serif; letter-spacing:.18em; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-weight:400; }
h1 { font-size:clamp(54px,7vw,98px); line-height:.98; letter-spacing:-.045em; margin-bottom:24px; } h1 em { color:var(--gold); font-style:normal; }
.intro { max-width:540px; color:#c1c9c1; font-size:21px; line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:27px; margin:34px 0 54px; }
.primary-action { display:inline-flex; align-items:center; gap:24px; padding:14px 20px; color:#181914; background:var(--gold); text-decoration:none; font-size:18px; transition:transform .2s,background .2s; } .primary-action:hover { transform:translateY(-3px); background:#f0d08b; }
.primary-action span { font:22px Arial,sans-serif; }
.hero-metrics { display:flex; gap:0; margin:0; } .hero-metrics div { padding:0 26px; border-inline-start:1px solid var(--line); } .hero-metrics div:first-child { padding-inline-start:0; border:0; } .hero-metrics dt { color:var(--gold); font-size:18px; } .hero-metrics dd { margin:0; color:var(--muted); font-size:15px; }
.hero-art { position:relative; width:min(450px,80vw); aspect-ratio:1; justify-self:end; display:grid; place-items:center; }
.landing-globe { width:100%; height:100%; overflow:hidden; border-radius:50%; background:transparent; }
.landing-globe .maplibregl-canvas-container,.landing-globe .maplibregl-canvas { border-radius:50%; }
.landing-globe .maplibregl-ctrl-attrib,.landing-globe .maplibregl-ctrl-top-right,.landing-globe .maplibregl-ctrl-bottom-left,.landing-globe .maplibregl-ctrl-bottom-right { display:none; }
.landing-battle-marker { width:11px; height:11px; border:2px solid #fff3d4; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px #d8b66c30; cursor:pointer; }
.landing-globe .maplibregl-popup-content { padding:8px 11px; color:#f8eed8; background:#102124; border:1px solid #d8b66c88; border-radius:4px; font:600 15px "Amiri", Georgia, serif; box-shadow:none; }
.landing-globe .maplibregl-popup-tip { border-top-color:#102124; border-bottom-color:#102124; }
.globe { position:relative; z-index:2; display:grid; place-items:center; width:73%; aspect-ratio:1; overflow:hidden; border:1px solid #d9b96399; border-radius:50%; background:radial-gradient(circle at 35% 28%,#3a5952 0 4%,#172f31 29%,#0a171a 72%); box-shadow:inset -35px -22px 60px #000c,0 0 70px #d8b66c22; }
.globe::before { content:""; position:absolute; width:50%; height:92%; border:1px solid #d8b66c33; border-radius:50%; } .globe::after { content:""; position:absolute; inset:45% 0 auto; border-top:1px solid #d8b66c44; }
.globe-brand { z-index:2; display:flex; align-items:center; gap:9px; color:#ead6a7; direction:ltr; font:600 clamp(20px,3vw,35px) "Cinzel",serif; letter-spacing:.18em; text-shadow:0 3px 12px #000; }
.globe-brand i { display:grid; place-items:center; width:clamp(21px,2.3vw,30px); height:clamp(21px,2.3vw,30px); border:1px solid #d8b66c; border-radius:50%; color:#d8b66c; font:normal clamp(10px,1.2vw,14px) Georgia,serif; }
.globe-light { position:absolute; width:48%; height:31%; top:25%; left:21%; border-radius:44% 56% 42% 58%; background:#b7a56b55; filter:blur(2px); transform:rotate(-16deg); }
.globe-line { position:absolute; width:120%; border-top:1px solid #d8b66c33; } .line-a { top:30%; transform:rotate(19deg); }.line-b { top:60%; transform:rotate(-12deg); }.line-c { top:78%; transform:rotate(9deg); }
.orbit { position:absolute; z-index:1; width:100%; height:42%; border:1px solid #d8b66c44; border-radius:50%; transform:rotate(-24deg); } .orbit-two { width:83%; transform:rotate(48deg); }
.place-pin { position:absolute; z-index:3; width:11px; height:11px; border:2px solid var(--paper); border-radius:50%; background:var(--gold); box-shadow:0 0 0 6px #d8b66c22; }.pin-one { top:24%; left:30%; }.pin-two { top:39%; right:20%; }.pin-three { bottom:22%; left:35%; }
.coordinate { position:absolute; bottom:-4px; color:var(--muted); direction:ltr; font:11px "Cinzel",serif; letter-spacing:.08em; }
.intro-band { width:min(900px,90vw); padding:120px 0; margin:auto; text-align:center; }.intro-band h2 { max-width:780px; margin:0 auto 22px; font-size:clamp(33px,4vw,58px); line-height:1.18; }.intro-band > p:not(.eyebrow) { max-width:640px; margin:0 auto; color:var(--muted); font-size:19px; line-height:1.8; }.flags-note { margin-top:24px !important; padding:17px 22px; border:1px solid var(--line); color:var(--paper) !important; background:color-mix(in srgb,var(--night-soft) 70%,transparent); }.flags-note strong { color:var(--gold); }
.atlas-modes { width:min(1240px,90vw); margin:0 auto 130px; }.atlas-modes > h2 { max-width:640px; margin:0 0 34px; font-size:clamp(34px,4.3vw,58px); line-height:1.1; }.atlas-mode-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.atlas-mode { position:relative; min-height:260px; padding:28px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg,#11282b,#0a181a); }.atlas-mode::after { content:""; position:absolute; inset:auto -16% -40% auto; width:190px; aspect-ratio:1; border:1px solid #d8b66c55; border-radius:50%; }.atlas-mode span { color:var(--gold); font:12px "Cinzel",serif; }.atlas-mode h3 { position:relative; z-index:1; margin:72px 0 13px; font-size:30px; }.atlas-mode p { position:relative; z-index:1; max-width:285px; margin:0; color:var(--muted); font-size:17px; line-height:1.7; }.mode-time::after { border-radius:3px; transform:rotate(45deg); }.mode-moon::after { background:radial-gradient(circle at 34% 30%,#d8d0bd 0 3%,#7d837f 4% 5%,#364448 6% 100%); border-color:#d8b66c44; }.mode-archive::before { content:""; position:absolute; inset:20px 28px auto auto; width:70px; height:45px; border-top:1px solid #d8b66c77; border-bottom:1px solid #d8b66c77; transform:rotate(-13deg); }.mode-flags::before { content:"⚑"; position:absolute; inset:21px 25px auto auto; color:var(--gold); font:34px Georgia,serif; opacity:.86; }.mode-flags::after { width:150px; height:98px; border-radius:0; transform:skewY(-10deg); }
.archive { width:min(1240px,90vw); margin:130px auto; }.archive-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:36px; }.archive h2 { max-width:550px; margin:0; font-size:clamp(34px,4.4vw,62px); line-height:1.1; }.archive-images { display:grid; grid-template-columns:1fr 1.1fr; grid-template-rows:250px 180px; gap:14px; }.archive figure { position:relative; margin:0; overflow:hidden; background:#162426; }.archive img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) sepia(.25) contrast(1.1); transition:transform .7s; }.archive figure:hover img { transform:scale(1.05); }.image-tall { grid-row:span 2; }.image-wide { grid-column:2; }.archive figcaption { position:absolute; inset-inline:16px; bottom:12px; color:#fff3d4; text-shadow:0 2px 8px #000; font-size:18px; }.archive blockquote { grid-column:2; margin:0; display:flex; align-items:center; padding:28px; background:#c5a865; color:#10191a; font-size:25px; line-height:1.55; }
.closing { padding:120px 5vw; text-align:center; background:linear-gradient(135deg,#12272a,#0a1719); border-top:1px solid var(--line); }.closing h2 { margin:0 0 34px; font-size:clamp(48px,6vw,82px); line-height:1; }
footer { width:min(1240px,90vw); min-height:100px; margin:auto; display:flex; justify-content:space-between; align-items:center; color:var(--muted); direction:ltr; font:11px "Cinzel",serif; letter-spacing:.1em; } footer a { color:var(--gold); text-decoration:none; font-family:"Amiri",serif; letter-spacing:0; font-size:15px; direction:rtl; }
body.light-mode { --night:#f5efe0; --night-soft:#e9dfc9; --paper:#273435; --gold:#9b6a1e; --muted:#596a67; --line:#9b6a1e44; } body.light-mode::before { opacity:.08; } body.light-mode .globe { background:radial-gradient(circle at 35% 28%,#a2bbb0 0 4%,#698984 29%,#294448 72%); } body.light-mode .atlas-mode { background:linear-gradient(145deg,#e1eadf,#ccdcd3); } body.light-mode .archive figure { background:#c9d2c9; } body.light-mode .closing { background:linear-gradient(135deg,#dfe9df,#cddbd2); } body.light-mode .theme-toggle { background:#ffffff88; } body.light-mode .primary-action { color:#fff9e9; background:#8d651f; } body.light-mode .primary-action:hover { background:#745016; }
@media (max-width:1000px) { .atlas-mode-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px) { .site-header{height:72px}.hero{grid-template-columns:1fr;padding:62px 0 70px;min-height:0}.hero-art{justify-self:center;grid-row:1;width:min(360px,90vw)}.hero-copy{grid-row:2}.hero-metrics div{padding:0 15px}.intro{font-size:18px}.intro-band{padding:85px 0}.atlas-modes{margin-bottom:85px}.atlas-mode-grid{grid-template-columns:1fr}.atlas-mode{min-height:210px}.atlas-mode h3{margin-top:32px}.archive{margin:85px auto}.archive-heading{display:block}.archive-heading .eyebrow{margin-bottom:10px}.archive-images{grid-template-columns:1fr;grid-template-rows:250px 180px 180px}.image-tall,.image-wide,.archive blockquote{grid-column:1;grid-row:auto}.archive blockquote{font-size:21px}.closing{padding:90px 5vw}footer{padding:25px 0;gap:18px;align-items:flex-start;flex-direction:column}.header-link{font-size:15px} }