:root {
  color-scheme: dark;
  --amber:        #c4873a;
  --font-display: 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
  --font-cond:    'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-mono:    'DM Mono', ui-monospace, Menlo, monospace;
  --text:         clamp(19px, 0.35vw + 17.5px, 21px);
  --measure:      58ch;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--white);
  font-family: var(--font-cond); font-weight: 400; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
*:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--amber) 30%, transparent); color: var(--white); }

.guide {
  font-size: var(--text);
  max-width: calc(var(--measure) + 2 * var(--kr-gutter));
  margin-inline: auto;
  padding: 56px var(--kr-gutter) 104px;
}

.guide-head { padding-bottom: 32px; border-bottom: 1px solid var(--rule); margin-bottom: 44px; }
.guide-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid);
}
.guide-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--amber); }
.guide-head h1 {
  margin: 18px 0 22px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 5.4vw + 22px, 84px); line-height: 0.94; letter-spacing: 0.02em;
  color: var(--white); text-wrap: balance; overflow-wrap: break-word;
}
.guide-standfirst { font-size: 1.2em; line-height: 1.4; color: var(--light); text-wrap: pretty; }
.guide-meta {
  display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 24px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.guide-meta > * + *::before { content: "\00b7"; margin: 0 10px; }

.prose {
  font-size: var(--text); line-height: 1.6; letter-spacing: 0.006em;
  color: var(--light); overflow-wrap: break-word;
  counter-reset: sec;
}
.prose > * + * { margin-top: 1.05em; }
.prose p { text-wrap: pretty; }
.prose strong { font-weight: 600; color: var(--white); }
.prose em { font-style: italic; }
.prose a {
  color: var(--amber); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.prose a:hover { color: var(--white); }

.prose h2 {
  counter-increment: sec;
  margin-top: 2.4em;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 1.6vw + 20px, 40px); line-height: 1; letter-spacing: 0.04em;
  color: var(--white); text-wrap: balance;
}
.prose h2::before {
  content: counter(sec, decimal-leading-zero);
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; color: var(--dim);
}
.prose > h2:first-child { margin-top: 0; }
.prose h2 + * { margin-top: 0.75em; }
.prose h3 {
  margin-top: 1.8em;
  font-weight: 600; font-size: 1.2em; line-height: 1.25; color: var(--white); text-wrap: balance;
}
.prose h3 + * { margin-top: 0.45em; }

.prose ul, .prose ol { list-style: none; }
.prose li { position: relative; padding-left: 28px; }
.prose li + li { margin-top: 0.5em; }
.prose ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.8em; width: 14px; height: 1px; background: var(--amber);
}
.prose ol { counter-reset: item; }
.prose ol > li { counter-increment: item; }
.prose ol > li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute; left: 0; top: 0.3em;
  font-family: var(--font-mono); font-size: 0.6em; font-weight: 500; letter-spacing: 0.1em; color: var(--amber);
}

.prose blockquote {
  border-left: 2px solid var(--amber); padding: 4px 0 4px 22px;
  font-size: 1.15em; line-height: 1.4; color: var(--white);
}
.prose :not(pre) > code {
  font-family: var(--font-mono); font-size: 0.8em; color: var(--white);
  background: var(--bg3); border: 1px solid var(--rule); border-radius: 3px; padding: 0.06em 0.4em;
}
.prose pre {
  overflow-x: auto; padding: 16px 18px;
  background: var(--bg2); border: 1px solid var(--rule); border-radius: 4px;
  font-family: var(--font-mono); font-size: 0.8em; line-height: 1.6; color: var(--white);
}
.prose img, .prose svg, .prose video { display: block; max-width: 100%; height: auto; }
.prose figcaption { margin-top: 10px; font-weight: 300; font-size: 0.9em; line-height: 1.4; color: var(--mid); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2em; }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg2); }
.prose table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prose th, .prose td {
  padding: 11px 16px; border-bottom: 1px solid var(--rule);
  text-align: left; vertical-align: top; line-height: 1.45;
}
.prose thead th {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); white-space: nowrap;
}
.prose td { font-size: 0.92em; }
.prose tbody tr:last-child > * { border-bottom: 0; }

@media (max-width: 480px) {
  .guide { padding-top: 40px; padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}