:root {
  --red: #cc0000;
  --black: #000;
  --white: #fff;
  --grey: #4d4d4d;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.wrap { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: var(--white); color: var(--black); padding: 0.5rem 0.75rem; z-index: 10; }
.head { display: flex; align-items: center; gap: 0.75rem; padding-top: 1.5rem; padding-bottom: 1rem; }
.mark { border-radius: 8px; display: block; }
.name { font-weight: 700; letter-spacing: 0.01em; }
.name a { color: inherit; text-decoration: none; }
h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.15; margin: 1.5rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.body { margin: 0 0 1rem; max-width: 36rem; }
a { color: var(--red); }
a:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
.foot {
  margin-top: 3rem; padding-top: 1rem; padding-bottom: 2rem;
  border-top: 1px solid var(--black); font-size: 0.875rem; color: var(--grey);
}
.foot p { margin: 0.25rem 0; }
.foot a { color: var(--grey); }
ul { padding-left: 1.25rem; max-width: 36rem; }
li { margin: 0.35rem 0; }