/* ---------- Base ---------- */
:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #6b7280;
  --accent: #0f172a;
  --link: #0a66c2;
  --maxw: 1120px;
  --pad: clamp(12px, 2.2vw, 24px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text); background: var(--bg); line-height: 1.6;
}
h1,h2,h3{font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; line-height:1.2; margin: 0 0 .6em}
h1{font-size: clamp(34px, 5vw, 56px)}
h2{font-size: clamp(24px, 3.6vw, 36px)}
p{margin: 0 0 1em}
a{color: var(--link); text-decoration: none}
a:hover{text-decoration: underline}
.container{max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad)}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50; background: #fff; border-bottom: 1px solid #eee;
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding: 14px var(--pad)}
.brand{display:flex; gap:12px; align-items:center}
.brand img{width:36px; height:36px; border-radius:4px; object-fit:cover; background:#efe9dd}
.brand .title{font-weight:600}
.nav a{margin-left: 18px; color: inherit; font-weight: 600}
.nav a.active{text-decoration: underline}

/* ---------- Hero ---------- */
.hero{
  position: relative; min-height: clamp(360px, 55vh, 640px); display:grid; place-items:center; color:#fff;
  background:#0b1b2a url('../img/hero.jpg') center/cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0; background: rgba(0,0,0,.35);
}
.hero h1{position:relative; z-index:1; font-weight:700}

/* ---------- Content blocks ---------- */
.section{padding: clamp(28px, 6vw, 64px) 0}
.lede{font-size: clamp(18px, 1.6vw, 22px)}
ul.bullets{margin: 1em 0 1.2em 1.2em}
ul.bullets li{margin:.4em 0}

/* ---------- Two-column media/text ---------- */
.media{
  display:grid; gap: clamp(18px, 3vw, 36px);
  grid-template-columns: minmax(240px, 420px) 1fr;
  align-items:start;
}
.media img{width:100%; height:auto; border-radius:8px}

/* ---------- Gallery (About) ---------- */
.gallery{
  display:grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.gallery img{width:100%; height:auto; border-radius:10px; display:block}

/* ---------- Quote ---------- */
.quote{
  text-align:center; font-family: ui-serif, Georgia, serif;
  font-size: clamp(22px, 3.2vw, 40px);
  font-style: italic; color:#222; margin: 56px auto 12px;
}
.figcap{ text-align:center; color: var(--muted); margin-bottom: 36px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid #eee; padding: 36px var(--pad); color: var(--muted); text-align:center}

/* ---------- Small screens ---------- */
@media (max-width: 820px){
  .media{grid-template-columns: 1fr}
}