:root {
  --bg: #0d1117;
  --bg-soft: #161b22;
  --line: #2f353d;
  --text: #e6edf3;
  --muted: #9da7b3;
  --accent: #d6b370;
  --accent-deep: #6a4f22;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(214,179,112,.12), transparent 30%),
    linear-gradient(180deg, #0b0f14 0%, var(--bg) 100%);
  font: 16px/1.6 Georgia, 'Times New Roman', serif;
}
.shell {
  width: min(860px, calc(100vw - 32px));
  margin: 8vh auto;
  padding: 32px;
  border: 1px solid var(--line);
  background: rgba(13,17,23,.82);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
}
h1 {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  line-height: .95;
  color: #f5e7c6;
}
.lead {
  margin: 20px 0 28px;
  color: var(--muted);
  max-width: 62ch;
}
.panel {
  padding: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(214,179,112,.06), rgba(255,255,255,.02));
}
.panel + .panel { margin-top: 18px; }
.panel.alt {
  border-color: rgba(214,179,112,.35);
  background: linear-gradient(180deg, rgba(106,79,34,.18), rgba(255,255,255,.02));
}
h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
}
ul {
  margin: 0;
  padding-left: 20px;
}
strong { color: #f3d28f; }
@media (max-width: 700px) {
  .shell { margin: 0; min-height: 100vh; width: 100%; padding: 24px; }
}