@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

:root { --primary:#003f5e; --secondary:#2094a1; --spacing:2px; }

body { margin:0; box-sizing:border-box; font-family:Arial,sans-serif; background:#fff; }
body.index { overflow:hidden; }


#caption-bar { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); padding:10px; background:rgba(0,0,0,0.5); color:#fff; font-size:18px; border-radius:6px; z-index:15; pointer-events:none; }
#nav-dots { position:fixed; bottom:40px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:15; }
.dot { width:12px; height:12px; background:rgba(255,255,255,0.5); border-radius:50%; cursor:pointer; transition:background 0.3s; }
.dot.active { background:#fff; }

#bg-slider { position:fixed; top:20px; left:20px; width:calc(100% - 40px); height:calc(100% - 40px); z-index:-1; overflow:hidden; }
#bg-slider img { position:absolute; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease-in-out; }
#bg-slider img.active { opacity:1; }

header { position:fixed; top:0; left:40px; width:calc(100% - 80px); height:120px; display:flex; align-items:center; box-sizing:border-box; background:#fff; color:var(--primary); font-size:32px; z-index:10; border-bottom:1px solid var(--primary); font-family:"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif; font-weight:300; }
header.index { color:#fff; border-bottom-color:#fff; background:rgba(255,255,255,0); top:40px; text-shadow:0 0 10px rgba(0,0,0,0.7); }
.logo-link { display:flex; align-items:center; height:100%; padding:0; margin:0; text-decoration:none; }
.header-logo { height:75%; object-fit:contain; margin-right:20px; transition:transform 0.25s ease,opacity 0.25s ease; }
.header-logo:hover { opacity:.5; animation:spin .5s linear infinite; }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
#tagline { display:block; font-size:.5em; color:var(--secondary); }
header.index #tagline { color:#fff; }
#tagline strong {font-weight:500;}
.desktop-nav { margin-left:auto; display:flex; gap:30px; font-size:22px; }
.desktop-nav a { text-decoration:none; color:var(--primary); }
header.index .desktop-nav a { color:#fff; }
.desktop-nav a:hover { opacity:.7; }


.arrow { position:fixed; top:50%; transform:translateY(-50%); font-size:50px; color:white; cursor:pointer; z-index:20; user-select:none; padding:10px; background:rgba(0,0,0,0.3); border-radius:6px; }
#arrow-left { left:40px; }
#arrow-right { right:40px; }


.hamburger { display:none; font-size:40px; cursor:pointer; margin-left:auto; padding:10px; z-index:1001; user-select:none; transition:transform 0.3s ease; }
.hamburger.active { transform:rotate(90deg); }
.mobile-menu-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:1000; opacity:0; transition:opacity 0.3s ease; }
.mobile-menu-overlay.active { display:block; opacity:1; }
.mobile-menu { display:flex; position:fixed; top:0; right:-260px; width:260px; height:100%; background:rgba(255,255,255,0.95); backdrop-filter:blur(6px); padding-top:50px; box-sizing:border-box; z-index:1001; transition:right 0.3s ease; flex-direction:column; gap:30px; padding-left:30px; font-size:24px; }
.mobile-menu.active { right:0; }
.mobile-menu a { color:var(--primary); text-decoration:none; }
.mobile-menu a:hover { color:var(--secondary); }


.dropdown { position:relative; }
.dropbtn { cursor:pointer; }
.dropdown-content { display:none; position:absolute; top:30px; left:0; background:white; padding:15px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.2); flex-direction:column; gap:10px; z-index:999; white-space:nowrap; font-size:18px; width:max-content; min-width:160px; }
.dropdown:hover .dropdown-content { display:flex; }
header.index .desktop-nav .dropdown-content a { color:var(--primary); }
.mobile-dropdown { display:flex; flex-direction:column; }
.mobile-dropbtn { font-size:24px; cursor:pointer; }
.mobile-dropdown-content { display:none; flex-direction:column; gap:15px; padding-left:20px; font-size:.6em; }
.mobile-dropbtn.active + .mobile-dropdown-content { display:flex; }


@media(max-width:700px) { header { height:70px; font-size:22px; } header img { margin-right:6px; } #tagline { font-size:.4em; } .arrow { font-size:36px; } #caption-bar { font-size:14px; padding:4px; } }
@media(max-width:700px) { .desktop-nav { display:none!important; } .hamburger { display:block; } }


.container { padding:140px 40px 40px 40px; max-width:1200px; margin:0 auto; }
.container-columns { display:flex; gap:30px; }
.container h1, .container h2 { font-family:"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif; font-weight:300; }
.container a { color:var(--primary); }
.container a:hover { color:var(--secondary); }
h2 + .story-date { margin:-10px 0 0 0; padding:0; }
.story-date { font-size:.8em; font-style:italic; }
.text-column { flex:1.6; max-width:700px; }
.image-column { flex:1; }
.image-column img { width:100%; height:auto; display:block; }
@media(max-width:768px) { .container { flex-direction:column; padding-top:80px; } .container-columns { display:block; } .image-column { padding:20px 0; } }


.thumb-column { flex:1; display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; align-content:start; }
.thumb-column img { width:100%; height:100px; object-fit:cover; cursor:pointer; border-radius:6px; transition:transform 0.2s; }
.thumb-column img:hover { transform:scale(1.05); }


#lightbox { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); display:none; justify-content:center; align-items:center; z-index:1000; }
#lightbox img { max-width:94%; max-height:90%; border-radius:8px; }
.lightbox-nav { position:fixed; top:50%; transform:translateY(-50%); font-size:50px; color:white; cursor:pointer; user-select:none; padding:20px; }
#lb-caption { top:90%; font-size:18px; text-shadow:0 0 10px rgba(0,0,0,0.7); }
#lb-prev { left:20px; }
#lb-next { right:20px; }
#lb-close { position:fixed; top:20px; right:30px; font-size:40px; color:white; cursor:pointer; }


.video-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:10px; margin-bottom:20px; }
.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

.country-list { float:left; width:30%; overflow:hidden; }
.country-list ol { font-size:.8em; margin:0; padding-left:0; counter-reset:item; }
.country-list li { list-style:none; counter-increment:item; position:relative; padding-left:2.5em; color:var(--primary); }
.country-list li::before { content:counter(item) "."; position:absolute; left:0; width:2em; text-align:right; }
.country-list li.future { color:var(--secondary); }
#map { height:calc(100vh - 200px); width:70%; overflow:hidden; }

.cal-month { clear:both; padding:20px 0 0 0; }
.cal-month h2 { margin-bottom:0; }
#calendar ul { list-style:none; padding:0; margin:0 auto; }
#calendar ul li { display:block; float:left; width:calc(14% - calc(var(--spacing) * 2)); box-sizing:border-box; padding:10px; margin:var(--spacing); text-align:center; font-size:12px; }
#calendar ol { list-style:none; counter-reset:item; padding:0; margin:0 auto; height:calc(100vh - 300px); }
#calendar ol li { counter-increment:item; display:block; float:left; width:calc(14% - calc(var(--spacing) * 2)); box-sizing:border-box; border:1px solid var(--primary); height:calc(100%/6); padding:10px; margin:var(--spacing); font-size:12px; font-family:Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,"sans-serif"; overflow:hidden; position:relative; }
#calendar ol li::before { content:counter(item); display:block; font-weight:bold; font-size:.75em; margin-bottom:4px; color:#333; position:relative; z-index:1; }
#calendar ol li::after { content:""; position:absolute; inset:0; background:rgba(255,255,255,0.45); pointer-events:none; transition:opacity 0.25s ease; z-index:0; }
#calendar ol li>* { position:relative; z-index:1; }
#calendar ol li:hover::after { opacity:0; }
#calendar ol li.bg:hover { color:#fff; cursor:pointer;}
#calendar .d-mon.first { margin-left:calc(14% + var(--spacing)); }
#calendar .d-tue.first { margin-left:calc(28% + var(--spacing)); }
#calendar .d-wed.first { margin-left:calc(42% + var(--spacing)); }
#calendar .d-thu.first { margin-left:calc(56% + var(--spacing)); }
#calendar .d-fri.first { margin-left:calc(70% + var(--spacing)); }
#calendar .d-sat.first { margin-left:calc(84% + var(--spacing)); }
#calendar .today { border:4px solid var(--secondary); background:var(--secondary); }


footer { border-top:2px solid var(--primary); padding:10px 40px; margin:20px 0; color:var(--secondary); }
footer p { display:flex; align-items:center; float:right; }
footer p a { color:var(--secondary); text-decoration:none; display:flex; align-items:center; padding-right:10px; }
footer p a:hover { color:var(--primary); text-decoration:underline; }
footer p a img { height:30px; object-fit:contain; margin-right:4px; transition:transform 0.25s ease,opacity 0.25s ease; }
footer p a:hover img { opacity:.5; animation:spin .5s linear infinite; }


@media(max-width:768px) { #calendar ul li span { display:none; } #calendar ol li::before { margin-bottom:2px; } #calendar ol li { padding:2px; } footer { display:none; } .country-list { float:none; width:100%; } #map { width:100%; margin-top:20px; } }