:root {
  --ink: #1f2b34;
  --muted: #5e6870;
  --paper: #fffdf8;
  --line: #d8d0c2;
  --hero-a: #173243;
  --hero-b: #285a6e;
  --accent: #8f4e24;
  --bg-a: #f4eee4;
  --bg-b: #e3eef3;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Alegreya", "Palatino Linotype", serif;
  background:
    radial-gradient(980px 560px at 10% -8%, #fff1ca 0%, transparent 58%),
    radial-gradient(900px 500px at 92% 0%, #d8e8ef 0%, transparent 56%),
    linear-gradient(160deg, var(--bg-a), var(--bg-b));
}
.shell { width: min(1080px, 100% - 36px); margin: 24px auto 48px; }
.hero {
  background: linear-gradient(120deg, var(--hero-a), var(--hero-b));
  color: #f3f8fa;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.2);
  padding: clamp(22px, 4vw, 40px);
}
.kicker { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: #c2d6e1; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); }
.lead { margin-top: 12px; max-width: 68ch; color: #d8e7ef; }
.host { margin-top: 10px; color: #b4c7d1; }
.topnav { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.topnav a { text-decoration: none; color: #edf6fb; border: 1px solid rgba(255,255,255,0.26); border-radius: 999px; padding: 7px 12px; font-size: .88rem; }
.hero-media { margin: 16px 0 4px; }
.hero-media img { width: 100%; display: block; border-radius: 14px; border: 1px solid rgba(255,255,255,0.24); }
.grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.card h2, .card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.card p { margin: 0 0 8px; color: var(--muted); }
.gallery { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.shot { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.shot img { width: 100%; display: block; border-radius: 10px; border: 1px solid #d9d2c6; }
.shot h3 { margin: 10px 0 6px; }
.shot p { margin: 0; color: var(--muted); }
a { color: var(--accent); text-underline-offset: 3px; }