@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --bg: #0f1014;
  --surface: #18191f;
  --border: #2a2b33;
  --text: #e8e9ee;
  --muted: #888a99;
  --accent: #c2692a;
  --accent-light: #e07c35;
  --gold: #f0b429;
  --green: #3ecf8e;
}

* { box-sizing: border-box; }
html { background: var(--bg) !important; scroll-behavior: smooth; }
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  max-width: 860px !important;
  width: auto !important;
  margin: 0 auto !important;
  padding: 32px 32px 120px !important;
}

.shell {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.top-nav,
.top-nav.shell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 36px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

.top-nav a,
.top-nav.shell a,
.page-footer a,
footer.page-footer a {
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: color 160ms ease, border-color 160ms ease !important;
}

.top-nav a:hover,
.page-footer a:hover,
footer.page-footer a:hover { color: var(--text) !important; }

.top-nav .back-link,
.top-nav .brand {
  color: var(--accent-light) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

.top-nav .back-link:hover,
.top-nav .brand:hover {
  border-color: var(--accent) !important;
  color: var(--accent-light) !important;
}

.nav-links,
.top-nav .nav-links {
  display: flex !important;
  gap: 13px !important;
  flex-wrap: wrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

header,
header.hero,
header.shell.hero {
  border-bottom: 1px solid var(--border) !important;
  padding: 0 0 40px !important;
  margin: 0 0 56px !important;
}

.logo,
.eyebrow,
.step-num {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin: 0 0 20px !important;
}

.step-num { margin-bottom: 10px !important; }

h1 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
  margin: 0 0 12px !important;
}

h2 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  color: var(--text) !important;
  margin: 0 0 12px !important;
}

h3 {
  color: var(--text) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  margin: 28px 0 10px !important;
}

.subtitle {
  color: var(--muted) !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  max-width: none !important;
  margin: 0 !important;
}

main,
main.shell { padding: 0 !important; }

section,
section.card,
.step {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 38px !important;
}

.step { margin-bottom: 72px !important; }

p,
li {
  color: #c8cad4 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important;
}

p { margin: 0 0 14px !important; }
ul, ol { padding-left: 22px !important; margin: 0 0 14px !important; }
strong { color: var(--text); font-weight: 500; }
a { color: var(--accent-light); }

.notice,
.callout,
.example,
.pull {
  background: var(--surface) !important;
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 14px 18px !important;
  margin: 24px 0 40px !important;
  color: #b0b2bc !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
}

.callout strong,
.notice strong,
.example strong { color: var(--accent-light) !important; font-weight: 500 !important; }

.img-wrap {
  margin: 24px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
.img-wrap img { display: block !important; width: 100% !important; height: auto !important; }
.img-caption {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  padding: 10px 14px !important;
  border-top: 1px solid var(--border) !important;
}
.img-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin: 24px 0 !important; }
.img-row-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; margin: 24px 0 !important; }
.small-img { max-width: 420px !important; }
.tiny-img { max-width: 220px !important; }

.tag {
  display: inline-block !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-right: 6px !important;
}
.tag-green { background: rgba(62,207,142,0.15) !important; color: var(--green) !important; }
.tag-orange { background: rgba(193,105,42,0.18) !important; color: var(--accent-light) !important; }
.tag-gold { background: rgba(240,180,41,0.15) !important; color: var(--gold) !important; }

hr {
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  margin: 64px 0 !important;
}

.cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--accent-light) !important;
  padding: 8px 12px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.cta:hover { border-color: var(--accent) !important; color: var(--accent-light) !important; }

.page-footer,
footer.page-footer {
  border-top: 1px solid var(--border) !important;
  margin: 72px 0 0 !important;
  padding: 24px 0 0 !important;
  color: var(--muted) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  justify-content: flex-start !important;
}
.page-footer nav,
footer.page-footer nav { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; }

@media (max-width: 700px) {
  body { padding: 32px 18px 80px !important; }
  h1 { font-size: 38px !important; }
  .top-nav, .top-nav.shell { align-items: flex-start !important; flex-direction: column !important; }
  .nav-links, .top-nav .nav-links { justify-content: flex-start !important; }
  .img-row, .img-row-3 { grid-template-columns: 1fr !important; }
}