:root { --bg: #070b16; --panel: #0f1628; --text: #e9ecf3; --muted: #9aa6bf; --fire: #ffb45c; --line: #1e2a44; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
a { color: var(--fire); }
/* The banner is shown whole (it has the title and the camp in it), with the icon and heading below it.
   Width is capped so it doesn't get huge on wide monitors; 37.5% is the image's 1920x720 shape. */
.hero { position: relative; background: var(--bg) url(/assets/camp.jpg) top center / min(100%, 1600px) auto no-repeat;
  padding-top: min(37.5vw, 600px); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; top: calc(min(37.5vw, 600px) * 0.7);
  height: calc(min(37.5vw, 600px) * 0.3); background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; padding-top: 12px; padding-bottom: 8px; }
.wrap { position: relative; z-index: 1; padding-bottom: 24px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.brand { display: flex; align-items: center; gap: 16px; }
.brand img { width: 96px; height: auto; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
h1 { font-size: clamp(28px, 6vw, 44px); line-height: 1.1; margin: 0; }
h2 { font-size: 22px; margin: 36px 0 8px; }
.tag { color: var(--muted); margin: 4px 0 0; }
main { padding: 8px 0 48px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin: 20px 0; }
nav { display: flex; gap: 20px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--line); margin-top: 40px;
  color: var(--muted); font-size: 15px; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--text); }
ul { padding-left: 20px; }
.muted { color: var(--muted); font-size: 15px; }