:root {
  --bg: #0b0504;
  --line: rgba(255, 120, 80, .17);
  --text: #f7ebe4;
  --muted: #b69c92;
  --ember: #ff5b37;
  --rose: #ff2e63;
  --amber: #ffb36b;
  --grad: linear-gradient(120deg, var(--amber) 0%, var(--ember) 55%, var(--rose) 100%);
  --display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: radial-gradient(120% 50% at 50% 0%, #1d0a06 0%, var(--bg) 60%) no-repeat, var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.wrap { width: min(100% - 32px, 720px); margin-inline: auto; padding: 72px 0 40px; }

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .7rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.eyebrow::before, .eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--ember); flex: none; }

h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.1rem, 8vw, 3.4rem); line-height: 1.05; letter-spacing: .01em;
  margin-bottom: 20px;
}
h1 .grad, .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.35rem, 4.6vw, 1.75rem); line-height: 1.15;
  margin: 44px 0 12px;
}

p, li { color: var(--muted); max-width: 620px; }
p + p { margin-top: 12px; }
.lead { font-size: 1.15rem; color: var(--text); }
.updated { font-size: .85rem; margin-bottom: 8px; }
strong { color: var(--text); font-weight: 500; }

ul { padding-left: 1.2em; margin-top: 8px; }
li { margin: 6px 0; }
li::marker { color: var(--ember); }

a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { color: var(--text); }

.docs { display: grid; gap: 12px; margin-top: 14px; max-width: 620px; }
.docs a {
  display: block; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--text); font-family: var(--display); font-size: 1.15rem;
}
.docs a span { display: block; font-family: var(--sans); font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.docs a:hover { border-color: var(--ember); }

footer {
  width: min(100% - 32px, 720px); margin: 24px auto 0; padding: 28px 0 48px;
  border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }
footer .brand { font-family: var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--text); margin-bottom: 12px; }