:root { 
  --bg: #0b0f14; 
  --panel: #121820; 
  --ink: #eef2f6; 
  --muted: #b8c2d6; 
  --accent: #4cc9f0; 
  --border: rgba(255, 255, 255, 0.14); 
  --hover: rgba(255, 255, 255, 0.08); 
} 

/* Reset & base */
* { box-sizing: border-box; } 
body { 
  margin: 0; 
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; 
  line-height: 1.6; 
  color: var(--ink); 
  background: var(--bg); 
} 
img { max-width: 100%; border-radius: 12px; display: block; } 
a, a:visited { color: var(--ink); text-decoration: none; } 
a:hover { color: var(--ink); } 

/* Layout */
.container { width: min(1100px, 92%); margin-inline: auto; } 
.flex { display: flex; } 
.between { justify-content: space-between; } 
.center-v { align-items: center; } 

/* Header / Nav */
.site-header { 
  background: var(--panel); 
  padding: 1rem; 
  position: sticky; 
  top: 0; 
  z-index: 20; 
} 
.brand { 
  font-weight: 700; 
  color: var(--ink); 
  text-decoration: none; 
  font-family: 'Playfair Display', serif; 
  font-size: 1.3rem; 
} 
.site-nav { display: flex; gap: 1rem; align-items: center; } 
.site-nav a { 
  color: var(--muted); 
  padding: .5rem .75rem; 
  border-radius: 8px; 
} 
.site-nav a.active, .site-nav a:hover { 
  background: var(--hover); 
  color: var(--ink); 
} 
.nav-toggle { 
  display: none; 
  background: none; 
  border: 0; 
  color: var(--ink); 
  font-size: 1.4rem; 
} 

/* ---------- HERO WITH OVERLAYED SUBSET BUTTONS ---------- */
.hero { 
  position: relative; 
  text-align: center; 
  color: var(--ink); 
  padding: 0; /* overlay version uses full-bleed image */ 
} 
.hero figure { margin: 0; } 
.hero .hero-image { 
  position: relative; 
  width: 100%; 
  overflow: hidden; 
  border-radius: 0; /* keep hero full-bleed */ 
} 
.hero .hero-image img { 
  width: 100%; 
  height: 62vh; /* nice viewport height */ 
  min-height: 420px; 
  max-height: 820px; 
  object-fit: cover; 
  border-radius: 0; 
  display: block; 
} 
.hero .overlay { 
  position: absolute; 
  inset: 0; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  padding: clamp(16px, 3vw, 32px); 
  background: linear-gradient( to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.35) 100% ); 
  text-align: center; 
} 
.hero .overlay h1 { 
  margin: 0 0 .5rem 0; 
  font-family: 'Playfair Display', serif; 
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); 
  color: #fff; 
} 
.hero .overlay .lead { 
  color: #f4f7fb; 
  opacity: .95; 
  max-width: 900px; 
  margin: 0.5rem auto 1.2rem auto; 
} 
.hero .overlay .actions { 
  display: flex; 
  gap: .75rem; 
  flex-wrap: wrap; 
  justify-content: center; 
} 

/* Buttons */
.btn { 
  padding: .7rem 1rem; 
  border-radius: 12px; 
  text-decoration: none; 
  border: 1px solid var(--border); 
  color: var(--ink); 
  transition: background .2s ease, transform .12s ease; 
  will-change: transform; 
} 
.btn.primary { 
  background: var(--accent); 
  color: #0b0f14; 
  font-weight: 600; 
  border-color: transparent; 
} 
.btn.ghost { background: transparent; } 
.btn:hover { background: var(--hover); transform: translateY(-1px); } 

/* Cards (thumbnails) */
.cards { 
  display: grid; 
  gap: 1.5rem; 
  margin: 2rem auto; 
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
  align-items: stretch; /* equalize card heights */ 
} 
.card { 
  background: var(--panel); 
  padding: 1rem; 
  border-radius: 16px; 
  text-align: center; 
  border: 1px solid var(--border); 
  display: flex; 
  flex-direction: column; 
} 
.card img { 
  width: 100%; 
  height: 200px; /* uniform image height */ 
  object-fit: cover; /* crop without distortion */ 
  border-radius: 12px; 
} 
.card h3 { margin: 1rem 0 .5rem 0; font-size: 1.1rem; } 
.card p { color: var(--muted); margin: .1rem 0 .2rem 0; } 

/* Small helper text */
.small { font-size: 0.95rem; } 
.muted { color: var(--muted); } 

/* Footer */
.site-footer { 
  background: #0d1420; 
  padding: 1rem; 
  text-align: center; 
  color: var(--muted); 
  margin-top: 2rem; 
} 

/* Modal (optional; safe to keep even if unused) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50} 
.modal[aria-hidden="false"]{display:flex} 
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)} 
.modal-dialog{ position:relative;z-index:1;background:var(--panel); border:1px solid var(--border);border-radius:16px;padding:20px;width:min(520px,92%) } 
.modal-close{ position:absolute;top:8px;right:10px;background:transparent;border:none; color:var(--ink);font-size:24px;line-height:1;cursor:pointer } 

/* Responsive Nav */
@media (max-width: 768px) { 
  .site-nav { 
    display: none; 
    flex-direction: column; 
    gap: .5rem; 
    background: var(--panel); 
    position: absolute; 
    top: 100%; 
    right: 0; 
    padding: 1rem; 
    border-radius: 12px; 
    border: 1px solid var(--border); 
  } 
  .site-nav.open { display: flex; } 
  .nav-toggle { display: block; } 
}