:root {
  color-scheme: dark;
  background: #191916;
  color: #f2eee4;
  font: 17px/1.6 system-ui, sans-serif;
  --muted: #cbc4b4;
  --accent: #f6c478;
}
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { width: min(100% - 2.5rem, 64rem); margin-inline: auto; }
header { background: #23211b; padding: clamp(3rem, 9vw, 7rem) 0 2.25rem; }
.brand {
  margin: 0 0 .4rem;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .14em;
}
h1, h2, h3 { line-height: 1.12; }
h1 { margin: 0; font-size: clamp(2.8rem, 9vw, 6rem); letter-spacing: -.065em; }
h1 span { color: var(--accent); }
.intro { max-width: 40rem; color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); }
nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.7rem; }
a { color: var(--accent); }
nav a { padding: .45rem .8rem; border: 1px solid #625c4d; border-radius: .45rem; text-decoration: none; }
nav a:hover, nav a:focus-visible { background: #393327; }
.skip { position: absolute; left: 1rem; top: 1rem; background: #191916; padding: .5rem; }
.skip:not(:focus) { clip-path: inset(50%); }
section { padding-block: clamp(2rem, 6vw, 4rem); }
section + section { border-top: 1px solid #4f4a3e; }
h2 { margin: 0 0 1rem; font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -.035em; }
h3 { margin: 1.75rem 0 .55rem; font-size: 1.25rem; color: var(--accent); }
li, section p { max-width: 73ch; color: var(--muted); }
ul { padding-left: 1.25rem; margin: .65rem 0 0; }
li + li { margin-top: .65rem; }
strong { color: #f2eee4; }
footer { padding-block: 1.25rem 3rem; color: var(--muted); border-top: 1px solid #4f4a3e; }