:root{
  /* Light mode colors (default) */
  --bg: #fbf9f7;
  --fg:#111;
  --muted:#777;
  --accent:#111;
  --max-width:1200px;
  --gap:18px;
  /* Major Mono Display for headings/title/nav */
  --display-font: 'Major Mono Display', monospace;
  /* Use a readable system stack for body text; if you want Inter too, add it via Google Fonts */
  --body-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Dark mode colors */
body.dark-mode {
  --bg: #013220;
  --fg: #fbf9f7;
  --muted: #b8b8b8;
  --accent: #fbf9f7;
}

body.dark-mode .site-footer {
  border-top: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode .dropdown-content {
  box-shadow: 0 8px 16px rgba(255,255,255,0.1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  line-height:1.45;
  font-family: var(--body-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:28px;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
  color:inherit;
}
.logo{
  width:325px; /* increased by 25% from 260px */
  height:auto;
  display:block;
  filter:none; /* ensure SVG is not recolored */
}
.site-title{
  margin:0;
  font-weight:400;
  font-size:18px;
  color:var(--fg);
  font-family: var(--display-font);
  letter-spacing: 0.06em;
}
.site-nav{
  display:flex;
  gap:18px;
  align-items:center;
}
.site-nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:400;
  font-family: var(--display-font);
  letter-spacing: 0.08em;
  font-size:14px;
  position:relative;
}
/* Dropdown container */
.site-nav .dropdown{
  position:relative;
  display:inline-block;
}
/* Dropdown button styling - matches nav links */
.site-nav .dropdown > a{
  color:var(--muted);
  text-decoration:none;
  font-weight:400;
  font-family: var(--display-font);
  letter-spacing: 0.08em;
  font-size:14px;
  cursor:pointer;
}
/* Dropdown content (hidden by default) */
.site-nav .dropdown-content{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--bg);
  min-width:160px;
  box-shadow:0 8px 16px rgba(0,0,0,0.1);
  z-index:1;
  margin-top:8px;
  border-radius:4px;
  padding:8px 0;
}
/* Dropdown links */
.site-nav .dropdown-content a{
  color:var(--muted);
  padding:12px 16px;
  text-decoration:none;
  display:block;
  font-family: var(--display-font);
  letter-spacing: 0.08em;
  font-size:14px;
  transition:background 0.2s ease;
}
/* Change color on hover */
.site-nav .dropdown-content a:hover{
  background:rgba(0,0,0,0.04);
}

body.dark-mode .site-nav .dropdown-content a:hover{
  background:rgba(255,255,255,0.08);
}
/* Show the dropdown menu on hover */
.site-nav .dropdown:hover .dropdown-content{
  display:block;
}
/* Tooltip styles for desktop hover effect */
@media (min-width: 641px){
  .nav-tooltip{
    position:absolute;
    bottom:-32px;
    left:50%;
    transform:translateX(-50%);
    background:var(--fg);
    color:var(--bg);
    padding:6px 12px;
    border-radius:4px;
    font-size:12px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s ease;
    z-index:1000;
  }
  .nav-tooltip::before{
    content:'';
    position:absolute;
    top:-4px;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid var(--fg);
  }
  .nav-tooltip.show{
    opacity:1;
  }
}
/* Mobile menu button */
.mobile-menu-btn{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  color:var(--fg);
  font-size:24px;
  line-height:1;
}
.mobile-menu-btn:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.hero{
  text-align:center;
  padding:56px 0;
}
/* Hero heading uses Major Mono Display */
.hero h2{
  margin:0;
  font-family: var(--display-font);
  font-size:36px;
  letter-spacing: 0.06em;
}
.hero .lead{
  color:var(--muted);
  max-width:60ch;
  margin:12px auto 0;
  font-size:14px; /* decreased by 10% from default 16px */
}
/* Section headings use Major Mono Display */
.home h3, .about h3, .contact h3{
  margin-top:6px;
  margin-bottom:12px;
  font-size:20px;
  font-family: var(--display-font);
  letter-spacing: 0.06em;
}
.gallery{
  column-gap:var(--gap);
  column-count:3;
}
.gallery-item{
  display:inline-block;
  width:100%;
  margin:0 0 var(--gap);
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  break-inside:avoid;
}
.gallery-item img{
  width:100%;
  height:auto;
  display:block;
  border-radius:4px;
  box-shadow:0 6px 18px rgba(10,10,10,0.06);
}
@media (max-width:1000px){ .gallery{column-count:2} }
@media (max-width:640px){ 
  .gallery{column-count:1;} 
  .hero{padding:28px 0;}
  .logo{width:225px;} /* increased by 25% from 180px */
  .site-title{font-size:14px;}
  .mobile-menu-btn{display:block;}
  .site-nav{
    position:fixed;
    top:0;
    right:-100%;
    width:70%;
    max-width:300px;
    height:100vh;
    background:var(--bg);
    flex-direction:column;
    align-items:flex-start;
    padding:80px 28px 28px;
    gap:24px;
    box-shadow:-4px 0 12px rgba(0,0,0,0.1);
    transition:right 0.3s ease;
    z-index:1000;
  }
  .site-nav.active{right:0;}
  .site-nav a{font-size:18px;}
  /* Mobile dropdown styles */
  .site-nav .dropdown{
    width:100%;
  }
  .site-nav .dropdown-content{
    position:static;
    box-shadow:none;
    margin-top:0;
    padding-left:16px;
    background:transparent;
  }
  .site-nav .dropdown-content a{
    font-size:16px;
  }
  /* Show dropdown on click in mobile (will need JS for toggle) */
  .site-nav .dropdown.active .dropdown-content{
    display:block;
  }
  .mobile-menu-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:999;
  }
  .mobile-menu-overlay.active{display:block;}
}

.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.85);
  z-index:9999;
  padding:24px;
}
.lightbox[aria-hidden="false"]{ display:flex; }
.lightbox-image{
  max-width:90%;
  max-height:80%;
  object-fit:contain;
  border-radius:4px;
}
.lightbox-caption{
  color:#eee;
  margin-top:12px;
  text-align:center;
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed;
  background:none;
  border:none;
  color:#fff;
  font-size:36px;
  cursor:pointer;
  padding:12px;
}
.lightbox-close{ right:18px; top:18px }
.lightbox-prev{ left:18px; top:50%; transform:translateY(-50%) }
.lightbox-next{ right:18px; top:50%; transform:translateY(-50%) }

.site-footer{
  text-align:center;
  padding:40px 0;
  color:var(--muted);
  border-top:1px solid rgba(0,0,0,0.06);
}

/* Dark mode toggle styles */
.footer-toggle {
  margin-bottom: 16px;
}
.footer-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--display-font);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.footer-toggle input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

/* Quick tweaks for captions / bio */
.bio{ max-width:68ch; color:var(--muted); }

/* Adventure-specific styles for masonry grid */
.adventure-gallery {
  column-gap: var(--gap);
  column-count: 3;
}
.adventure-gallery .gallery-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--gap);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  break-inside: avoid;
  position: relative;
}
.adventure-gallery .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(10,10,10,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.adventure-gallery .gallery-item:hover img,
.adventure-gallery .gallery-item:focus img {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,10,10,0.12);
}
.adventure-gallery .gallery-item.loading img {
  opacity: 0.6;
}
.adventure-gallery .gallery-item.error {
  display: none;
}
@media (max-width:1000px) { 
  .adventure-gallery { column-count: 2; } 
}
@media (max-width:640px) { 
  .adventure-gallery { column-count: 1; } 
}

/* Gallery-test specific styles */
.gallery-test .lead { margin-bottom: 1rem; color: #444; }
.gallery-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; margin-top:1rem; }
.gallery-grid .gallery-item { display:block; background:#f7f7f7; border-radius:6px; overflow:hidden; text-decoration:none; color:inherit; }
.gallery-grid .gallery-item img { width:100%; height: auto; display:block; }
.gallery-note { font-size:0.95rem; color:#666; margin-top:0.25rem; }