/* Color palette based on #9dac93 */
    :root{
      --primary: #9dac93;           /* banner */
      --primary-muted: #b6c1ae;     /* content background (muted) */
      --primary-dark: #7e8a76;      /* footer */
      --text: #222;
      --max-width: 1100px;
    }

    *{box-sizing:border-box}
    body{font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); margin:0; line-height:1.4}

    /* Banner */
    .banner{
      background:var(--primary);
      background: #7e8a76;
      padding:12px 20px;
      display:flex;
      align-items:center;
      border-bottom: 2px solid rgba(0,0,0,0.35);
    }
    .banner .logo{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .banner img.logo-img{
      height:44px;
      width:auto;
      display:block;
    }
    .banner .site-title{
      font-weight:600;
      font-size:1.5rem;
    }

    /* Container to limit width */
    .container{max-width:var(--max-width); margin:0 auto; width:100%;}

    /* Navigation (menu) */
    nav.site-nav{
      background:transparent;
    }


.menu {
  display: flex;
  flex-wrap: wrap;       /* allow items to flow to a new line */
  justify-content: center;
  gap: 16px;
  padding: 12px 10px;
  list-style: none;
  margin: 0;
  font-weight: 500;
}

.menu li {
  flex: 0 1 auto;        /* prevents links from stretching too far */
}

.menu a {
  text-decoration: none;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;   /* keep text on one line */
}

.menu a:hover,
.menu a:focus {
  background: rgba(0,0,0,0.04);
  outline: none;
}

/* Further tweak for small screens */
@media (max-width: 480px) {
  .menu {
    gap: 8px;
    font-size: 0.9rem;
    padding: 8px 4px;
  }
}




    /* Content */
    main.content{
      background:var(--primary-muted);
      padding:28px 20px;
      min-height:40vh;
    }
    .card{
      background:white;
      padding:18px;
      border-radius:8px;
      box-shadow:0 6px 18px rgba(0,0,0,0.35);
      max-width:1000px;
      margin:0 auto;
    }

a {
  color: #3e4639;
  text-decoration: underline;
}

a:hover,
a:focus {
  color: #2d3228;
  text-decoration: none;
}

    /* Footer */
    footer.site-footer{
      background:var(--primary-dark);
      color:#fff;
      padding:16px 20px;
    }
    footer .container{display:flex;justify-content:space-between;align-items:center;gap:12px}

    /* Responsive */
    @media (max-width:640px){
      .menu{gap:12px; font-size:0.95rem; padding:8px}
      .banner img.logo-img{height:36px}
      .banner{padding:10px}
      main.content{padding:18px}
    }
    
    
    
    
.card .gallery {
  width: 90%;
  margin: 0 auto;
  border-collapse: collapse;
  text-align: center;
}

.card .gallery td {
  padding: 8px;
}

.card .gallery img {
  width: 100%;
  height: auto;
  max-width: 200px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


.card img {
  width: 90%;      /* use 60% of the card width */
  max-width: 400px; /* optional upper limit */
  height: auto;     /* keep aspect ratio */
  display: block;
  margin: 0 auto;   /* center horizontally */
}

.map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 8px;     /* optional for rounded corners */
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}