.site-heading {
    background: #eee;                   /* grey curved background */
    padding: 0.6rem 1rem;               /* vertical + horizontal padding */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18px 18px 18px 18px;       /* curved lower corners */
    
   margin-bottom:12px;
  }

  .site-heading__inner {
    color: #337ab7;                     /* requested heading colour */
    font-weight: 600;
    /* responsive size: scales between 18px and 28px */
    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 1;
    letter-spacing: 0.2px;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
   /* overflow: hidden;*/
    text-overflow: ellipsis;            /* prevents wrapping on very small screens */
  }

 .site-heading__inner a {
color:#337ab7;
text-decoration:none
}

  /* Optional: tighter layout on wide screens */
  @media (min-width: 900px) {
    .site-heading {
      padding: 1rem 2rem;
    }
    .site-heading__inner {
      font-size: 26px;
    }
  }

    :root{
      --bg:#ffffff;--fg:#0f172a;--muted:#475569;--accent:#0ea5e9;--accent-contrast:#ffffff;--border:#e2e8f0;--card:#f8fafc;--shadow:0 10px 20px rgba(2,6,23,0.08)
    }
    @media(prefers-color-scheme:dark){
      :root{
        --bg:#0b1220;--fg:#e5e7eb;--muted:#94a3b8;--accent:#38bdf8;
        --accent-contrast:#0b1220;--border:#1f2937;--card:#0f172a;
        --shadow:0 10px 20px rgba(0,0,0,0.5)
      }
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
      background:var(--bg);
      color:var(--fg);
      line-height:1.65
    }
    a{color:var(--accent)}
    .wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 1rem 1.2rem 3rem;
      box-sizing: border-box;
    }
    /* map container id changed to avoid duplicate IDs */
    #map-canvas {
      height: 420px;
      width: 100%;
      border-radius: 1rem;
      outline: 1px solid var(--border);
      box-sizing: border-box;
    }
    header{padding:2rem 0 1rem}
    .toc {
      position: sticky;
      top: 0;
      z-index: 2000; /* keep above Leaflet layers */
      background: var(--bg);
      border-top: 2px solid var(--border);
      border-bottom: 2px solid var(--border); /* cleaner separation */
    }
    .toc .inner {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding: .6rem 0;
    }
    @media(max-width:640px){
      .toc .inner {
        display: grid;
        grid-template-columns: repeat(7, max-content); /* shrink to text */
        /* justify-content: center; optional if you want centered */
      }
      .toc a {
        justify-self: start; /* border only under text */
      }
    }
    .toc a {
      display: inline-block;       /* shrink to text */
      text-decoration: none;
      color: var(--fg);
      padding-bottom: 2px;
      border-bottom: 2px solid transparent;
      align-self: flex-start;      /* prevent flex stretching */
    }
    .toc a.active { border-bottom: 2px solid #000; }

    section{
      scroll-margin-top:4.5rem;
      padding:1.5rem 1.2rem;
      border:1px solid var(--border);
      border-radius:1rem;
      box-shadow:var(--shadow);
      margin-top:2rem
    }

    .toc + section {
      margin-top: 2px;
    }

    /* ✅ Fix margin collapse so sections sit closer to .toc */
    section h1:first-child,
    section h2:first-child {
      margin-top: 0;
    }

    h1{
      font-size:2rem;
      margin:.2rem 0;
      display:flex;
      justify-content:space-between;
      align-items:baseline
    }
    h2{
      font-size:clamp(1.25rem,1.2vw+1rem,1.75rem);
      margin:0 0 .75rem
    }

  .map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* space between links */
	}
 .map-links a {
  
  margin: 0; /* remove vertical margin */
	}

.video {
  position: relative;
  width: 100%;
  height: 420px; /* same as the map */
  border-radius: 1rem;
  overflow: hidden;
  outline: 1px solid var(--border);
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
    .inline-links{display:flex;flex-wrap:wrap;gap:.75rem}
.photo-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:1rem;
      padding-bottom:10px
    }
 .photo-item {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-radius: .75rem;
  overflow: hidden;
}
   .photo-item img {
  width: 100%;
  aspect-ratio: 4 / 3;      /* slightly wider than tall, adjust as needed */
  object-fit: cover;         /* crops edges instead of stretching */
  border-radius: .75rem;
  outline: 1px solid var(--border);
  box-shadow: var(--shadow) 
}
    .photo-caption{
      font-size:16px;
      line-height:1.5
    }
    .elevation{
      width:100%;
      height:auto;
      border-radius:.75rem;
      outline:1px solid var(--border)
    }
    footer{padding:2rem 0 4rem;color:var(--muted)}
    .more-text{display:none}
    .show-more .more-text{display:inline}
    .show-more .dots{display:none}
    .more-link{cursor:pointer;color:var(--accent);text-decoration:underline}

/* Hide on desktop, show on mobile */
.mobile-only {
  display: none;
}


/* Hide on mobile, show on desktop */
.desktop-only {
  display: block;
}


#desc-text{
margin-bottom:0px;
margin-top:5px
}

@media (max-width: 768px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none !important;
  }

#map-canvas {
height:330px;
}

.photo-item img {
width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}


h1{
      font-size:1.3rem;

}
   .video{
      
     height: 300px; /* balanced height for mobile */
    aspect-ratio: auto; /* disable aspect ratio */
}

body {
    font-size: 18px; /* improves readability on iPhone */
  }
}



@media (max-width: 1024px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
body {
    font-size: 18px; /* improves readability on iPad */
  }
}


/* iPad landscape fix – keep image height balanced */
@media (max-width: 1024px) and (orientation: landscape) {
  .photo-grid {
    grid-template-columns: 1fr;
  }

  .photo-item img {
    aspect-ratio: 3 / 2; /* slightly taller look for landscape */
    object-fit: cover;
    height: auto;
  }
}