/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Merriweather',Georgia,serif;color:#2c2416;background:#f5f0e6;line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:#6b4226;text-decoration:none;transition:color .3s}
a:hover{color:#a0522d}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}

/* ===== VARIABLES ===== */
:root{
  --brown:#6b4226;--brown-light:#8b6340;--brown-dark:#4a2e1a;
  --cream:#f5f0e6;--cream-dark:#e8dfc9;--cream-light:#faf7f0;
  --green:#4a7c59;--green-light:#6b9e7a;
  --blue:#3a6b8c;--blue-light:#5a8bac;
  --gold:#c9a84c;--gold-light:#dfc06e;
  --red-brown:#8b4513;
  --text:#2c2416;--text-light:#5a4a3a;
  --shadow:0 4px 20px rgba(0,0,0,.12);
  --radius:12px;
  --transition:all .3s ease;
}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;color:var(--brown-dark);line-height:1.3}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.5rem)}
h3{font-size:clamp(1.2rem,2.5vw,1.6rem)}
p{margin-bottom:1rem}

/* ===== NAVIGATION ===== */
.navbar{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgba(74,46,26,.95);backdrop-filter:blur(8px);
  padding:.75rem 0;transition:var(--transition);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.navbar .container{display:flex;align-items:center;justify-content:space-between}
.nav-brand{color:#f5f0e6;font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;letter-spacing:.5px}
.nav-brand span{color:var(--gold)}
.nav-links{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
.nav-links a{
  color:#e8dfc9;font-size:.85rem;padding:.4rem .7rem;border-radius:6px;
  transition:var(--transition);font-family:'Lato',sans-serif;font-weight:400;
}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.15);color:#fff}
.nav-toggle{display:none;background:none;border:none;color:#f5f0e6;font-size:1.5rem;padding:.25rem}

/* ===== CONTAINER ===== */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* ===== HERO SECTION ===== */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#3a2a1a 0%,#5c3d2e 30%,#2e4a3a 60%,#1a3a4a 100%);
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="1"/></pattern></defs><rect width="100%25" height="100%25" fill="url(%23grid)"/></svg>');
  opacity:.6;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.5) 100%);
}
.hero-content{position:relative;z-index:2;text-align:center;max-width:800px;padding:2rem;animation:fadeInUp .8s ease-out}
.hero-badge{
  display:inline-block;padding:.4rem 1.2rem;border:1px solid var(--gold);
  color:var(--gold);font-family:'Lato',sans-serif;font-size:.8rem;
  letter-spacing:3px;text-transform:uppercase;border-radius:30px;margin-bottom:1.5rem;
}
.hero h1{color:#f5f0e6;margin-bottom:1rem;text-shadow:2px 2px 8px rgba(0,0,0,.5)}
.hero h1 span{color:var(--gold);display:block;font-size:.6em;margin-top:.5rem;font-style:italic}
.hero-desc{color:#c9bfab;font-size:1.1rem;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}
.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.8rem;border-radius:30px;font-family:'Lato',sans-serif;
  font-size:.95rem;font-weight:600;border:2px solid transparent;transition:var(--transition);
}
.btn-primary{background:var(--gold);color:var(--brown-dark);border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 4px 15px rgba(201,168,76,.4);color:var(--brown-dark)}
.btn-secondary{background:transparent;color:#f5f0e6;border-color:rgba(255,255,255,.4)}
.btn-secondary:hover{border-color:#fff;color:#fff;transform:translateY(-2px)}
.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;animation:bounce 2s infinite;color:rgba(255,255,255,.5);font-size:1.5rem}

/* ===== SECTION COMMONS ===== */
.section{padding:5rem 0}
.section-alt{background:var(--cream-dark)}
.section-dark{background:var(--brown-dark);color:var(--cream)}
.section-dark h2,.section-dark h3{color:var(--gold)}
.section-header{text-align:center;margin-bottom:3rem}
.section-header h2{margin-bottom:.75rem}
.section-header p{color:var(--text-light);max-width:600px;margin:0 auto;font-size:1.05rem}
.section-divider{width:60px;height:3px;background:var(--gold);margin:1rem auto;border-radius:2px}

/* ===== SUMMARY (HOME) ===== */
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.summary-text p{font-size:1.05rem;color:var(--text-light)}
.summary-map{
  background:var(--cream-light);border-radius:var(--radius);padding:2rem;
  box-shadow:var(--shadow);text-align:center;
}
.summary-map svg{max-width:100%;height:auto}
.route-line{stroke:var(--red-brown);stroke-width:2.5;fill:none;stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawLine 3s ease forwards 1s}

/* ===== QUOTE SECTION ===== */
.quote-section{
  background:linear-gradient(135deg,var(--brown-dark),var(--brown));
  padding:4rem 0;text-align:center;
}
.quote-section blockquote{
  color:var(--cream);font-size:clamp(1.1rem,2.5vw,1.4rem);
  font-style:italic;max-width:700px;margin:0 auto;line-height:1.8;
}
.quote-section cite{display:block;color:var(--gold);margin-top:1rem;font-size:.95rem;font-style:normal}

/* ===== TIMELINE ===== */
.timeline-section{background:var(--cream-dark);padding:5rem 0;overflow:hidden}
.timeline-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.timeline-filter{display:flex;gap:.5rem;flex-wrap:wrap}
.filter-btn{
  padding:.4rem 1rem;border:1px solid var(--brown-light);background:transparent;
  color:var(--brown);border-radius:20px;font-size:.85rem;transition:var(--transition);
}
.filter-btn.active,.filter-btn:hover{background:var(--brown);color:#fff;border-color:var(--brown)}
.timeline-search{
  display:flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid #ddd;border-radius:20px;padding:.3rem .8rem;
}
.timeline-search input{border:none;outline:none;font-size:.9rem;font-family:inherit;background:transparent;width:160px}
.timeline-search button{background:none;border:none;color:var(--brown);font-size:1rem}
.swiper{padding:1rem .5rem 3rem}
.timeline-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:var(--transition);height:auto;
}
.timeline-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.15)}
.card-image{
  height:200px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brown-light),var(--green));
}
.card-image .card-icon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:3.5rem;opacity:.7;
}
.card-date{
  position:absolute;top:.75rem;left:.75rem;
  background:var(--brown);color:#fff;padding:.3rem .8rem;
  border-radius:20px;font-size:.75rem;font-family:'Lato',sans-serif;font-weight:600;
}
.card-category{
  position:absolute;top:.75rem;right:.75rem;
  padding:.25rem .6rem;border-radius:12px;font-size:.7rem;font-weight:600;
  font-family:'Lato',sans-serif;text-transform:uppercase;letter-spacing:.5px;
}
.cat-journey{background:var(--blue);color:#fff}
.cat-discovery{background:var(--green);color:#fff}
.cat-encounter{background:var(--gold);color:var(--brown-dark)}
.cat-challenge{background:var(--red-brown);color:#fff}
.card-body{padding:1.25rem}
.card-body h3{font-size:1.1rem;margin-bottom:.5rem}
.card-body p{font-size:.9rem;color:var(--text-light);margin-bottom:.75rem}
.card-location{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--blue);font-family:'Lato',sans-serif}
.card-quote{
  margin-top:.75rem;padding:.75rem;background:var(--cream);border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;font-style:italic;font-size:.85rem;color:var(--text-light);
  display:none;
}
.timeline-card:hover .card-quote,.timeline-card.expanded .card-quote{display:block}
.swiper-pagination-bullet{background:var(--brown);width:10px;height:10px}
.swiper-pagination-bullet-active{background:var(--gold);width:24px;border-radius:5px}
.swiper-button-next,.swiper-button-prev{color:var(--brown);transform:scale(.7)}

/* ===== LEADERS & CREW ===== */
.leaders-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-bottom:3rem}
.leader-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);transition:var(--transition);
}
.leader-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.15)}
.leader-header{
  padding:2rem;text-align:center;position:relative;
  background:linear-gradient(135deg,var(--brown),var(--brown-dark));color:#fff;
}
.leader-avatar{
  width:100px;height:100px;border-radius:50%;margin:0 auto 1rem;
  border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;background:rgba(255,255,255,.15);
}
.leader-header h3{color:#fff;margin-bottom:.25rem}
.leader-header .role{color:var(--gold);font-size:.9rem;font-family:'Lato',sans-serif}
.leader-body{padding:1.5rem}
.leader-body p{font-size:.95rem;color:var(--text-light)}
.leader-achievements{margin-top:1rem}
.leader-achievements li{
  padding:.4rem 0;padding-left:1.5rem;position:relative;font-size:.9rem;color:var(--text-light);
}
.leader-achievements li::before{content:'\2726';position:absolute;left:0;color:var(--gold)}
.crew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}
.crew-card{
  background:#fff;border-radius:var(--radius);padding:1.25rem;text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08);transition:var(--transition);position:relative;overflow:hidden;
}
.crew-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.crew-avatar{
  width:60px;height:60px;border-radius:50%;margin:0 auto .75rem;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;background:var(--cream-dark);
}
.crew-card h4{font-size:.95rem;margin-bottom:.25rem}
.crew-card .crew-role{font-size:.8rem;color:var(--text-light);font-family:'Lato',sans-serif}
.crew-tooltip{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--brown-dark);color:#fff;padding:1rem;
  transform:translateY(100%);transition:var(--transition);font-size:.8rem;
}
.crew-card:hover .crew-tooltip{transform:translateY(0)}

/* ===== MAP ===== */
.map-wrapper{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
#expedition-map{height:500px;width:100%;z-index:1}
.map-legend{
  display:flex;gap:1.5rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap;
}
.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-family:'Lato',sans-serif}
.legend-dot{width:12px;height:12px;border-radius:50%}
.map-overlays{display:flex;gap:.75rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}
.overlay-btn{
  padding:.4rem 1.2rem;border:1px solid var(--brown-light);background:#fff;
  color:var(--brown);border-radius:20px;font-size:.85rem;transition:var(--transition);
}
.overlay-btn.active{background:var(--brown);color:#fff}

/* ===== CHALLENGES & DISCOVERIES ===== */
.cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.cd-card{
  background:#fff;border-radius:var(--radius);padding:1.5rem;
  box-shadow:0 2px 12px rgba(0,0,0,.08);transition:var(--transition);
  border-top:4px solid var(--brown);
}
.cd-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cd-card.challenge{border-top-color:var(--red-brown)}
.cd-card.discovery{border-top-color:var(--green)}
.cd-icon{font-size:2.5rem;margin-bottom:1rem}
.cd-card h3{font-size:1.05rem;margin-bottom:.5rem}
.cd-card p{font-size:.9rem;color:var(--text-light)}
.cd-card .species{font-style:italic;color:var(--green);font-size:.85rem;margin-top:.5rem}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-top:3rem}
.gallery-item{
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  position:relative;box-shadow:0 2px 10px rgba(0,0,0,.1);transition:var(--transition);
}
.gallery-item:hover{transform:scale(1.02);box-shadow:var(--shadow)}
.gallery-item .gallery-img{
  height:200px;display:flex;align-items:center;justify-content:center;
  font-size:3rem;background:linear-gradient(135deg,var(--cream-dark),var(--cream));
}
.gallery-item .gallery-caption{padding:1rem;background:#fff;font-size:.9rem}

/* ===== TRIBES ===== */
.tribes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.tribe-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.08);transition:var(--transition);
}
.tribe-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tribe-header{
  padding:1.5rem;position:relative;
  background:linear-gradient(135deg,var(--green),var(--blue));color:#fff;
}
.tribe-header h3{color:#fff;margin-bottom:.25rem}
.tribe-header .tribe-location{font-size:.85rem;opacity:.85;font-family:'Lato',sans-serif}
.tribe-body{padding:1.5rem}
.tribe-body p{font-size:.9rem;color:var(--text-light)}
.tribe-details{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.tribe-tag{
  padding:.25rem .6rem;background:var(--cream);border-radius:12px;
  font-size:.75rem;color:var(--brown);font-family:'Lato',sans-serif;
}
.tribe-quote{
  margin-top:1rem;padding:.75rem;background:var(--cream);
  border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  font-style:italic;font-size:.85rem;color:var(--text-light);
  max-height:0;overflow:hidden;transition:max-height .4s ease;
}
.tribe-card:hover .tribe-quote{max-height:200px}

/* ===== SUPPLIES ===== */
.supplies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem}
.supply-card{
  background:#fff;border-radius:var(--radius);padding:1.5rem;text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.08);transition:var(--transition);position:relative;overflow:hidden;
}
.supply-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.supply-icon{font-size:2.5rem;margin-bottom:1rem}
.supply-card h4{margin-bottom:.5rem}
.supply-card p{font-size:.85rem;color:var(--text-light)}
.supply-detail{
  position:absolute;inset:0;background:rgba(74,46,26,.95);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.5rem;transform:translateY(100%);transition:var(--transition);
}
.supply-card:hover .supply-detail{transform:translateY(0)}
.supply-detail h4{color:var(--gold);margin-bottom:.5rem}
.supply-detail p{font-size:.85rem;color:var(--cream)}

/* ===== QUIZ ===== */
.quiz-container{max-width:700px;margin:0 auto}
.quiz-card{
  background:#fff;border-radius:var(--radius);padding:2rem;
  box-shadow:var(--shadow);text-align:center;
}
.quiz-question{font-size:1.2rem;margin-bottom:1.5rem;color:var(--brown-dark)}
.quiz-options{display:grid;gap:.75rem;margin-bottom:1.5rem}
.quiz-option{
  padding:.75rem 1.25rem;border:2px solid #ddd;border-radius:var(--radius);
  background:#fff;font-size:.95rem;transition:var(--transition);text-align:left;
}
.quiz-option:hover{border-color:var(--brown);background:var(--cream)}
.quiz-option.correct{border-color:var(--green);background:#e8f5e9;color:var(--green)}
.quiz-option.wrong{border-color:#c0392b;background:#fde8e8;color:#c0392b}
.quiz-option.disabled{pointer-events:none;opacity:.7}
.quiz-progress{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.5rem}
.quiz-dot{width:10px;height:10px;border-radius:50%;background:#ddd}
.quiz-dot.active{background:var(--gold)}
.quiz-dot.answered{background:var(--green)}
.quiz-score{font-size:1.5rem;color:var(--gold);font-weight:700;margin-bottom:.5rem}
.quiz-nav{display:flex;gap:1rem;justify-content:center}

/* ===== FOOTER ===== */
.footer{
  background:var(--brown-dark);color:var(--cream);padding:3rem 0 1.5rem;
}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}
.footer h4{color:var(--gold);margin-bottom:.75rem;font-size:1rem}
.footer p,.footer a{font-size:.9rem;color:#c9bfab}
.footer a:hover{color:var(--gold)}
.footer ul li{margin-bottom:.4rem}
.footer-bottom{text-align:center;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:#8a7d6b}

/* ===== MODAL ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;
  display:none;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.active{display:flex}
.modal{
  background:#fff;border-radius:var(--radius);max-width:600px;width:100%;
  max-height:80vh;overflow-y:auto;padding:2rem;position:relative;
  animation:fadeInUp .3s ease;
}
.modal-close{
  position:absolute;top:1rem;right:1rem;background:none;border:none;
  font-size:1.5rem;color:var(--text-light);transition:var(--transition);
}
.modal-close:hover{color:var(--brown)}

/* ===== BACK TO TOP ===== */
.back-to-top{
  position:fixed;bottom:2rem;right:2rem;z-index:999;
  width:44px;height:44px;border-radius:50%;border:none;
  background:var(--brown);color:#fff;font-size:1.2rem;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;transition:var(--transition);
}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background:var(--gold);transform:translateY(-2px)}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-5px)}}
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;width:100%;
    background:var(--brown-dark);padding:1rem;flex-direction:column;gap:0;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.6rem 1rem;width:100%}
  .nav-toggle{display:block}
  .summary-grid{grid-template-columns:1fr}
  .leaders-grid{grid-template-columns:1fr}
  #expedition-map{height:350px}
  .hero-buttons{flex-direction:column;align-items:center}
  .section{padding:3rem 0}
  .timeline-controls{flex-direction:column;align-items:stretch}
  .timeline-search{width:100%}
  .timeline-search input{width:100%}
}
@media(max-width:480px){
  .container{padding:0 1rem}
  .crew-grid{grid-template-columns:repeat(2,1fr)}
  .supplies-grid{grid-template-columns:repeat(2,1fr)}
}