:root {
  color-scheme: dark;
  --paper: #121A1E;
  --ink: #E7EEF0;
  --ink-soft: #B6C4C9;
  --ink-mute: #94A7AE;
  --rule: #35454C;
  --accent-deep: #6C1611;
  --accent-line: #C4382D;
  --accent-ink: #FFDCD5;
  --accent-soft: #EC8378;
  --wordmark: 'Archivo', 'Arial Narrow', sans-serif;
  --title: 'IBM Plex Mono', monospace;
  --body: 'IBM Plex Sans Condensed', sans-serif;
  --space: 1.25rem;
}

* { box-sizing: border-box; border-radius: 0; box-shadow: none; }
html { background: var(--paper); scroll-padding-top: var(--space); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
::selection { background: var(--accent-deep); color: var(--accent-ink); }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-soft); }
a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 5px; }
.wrap { width: calc(100% - 2 * var(--space)); max-width: 68ch; margin-inline: auto; }
.skip-link { position: absolute; inset: .5rem auto auto .5rem; padding: .5rem 1rem; background: var(--paper); transform: translateY(-200%); z-index: 2; }
.skip-link:focus { transform: translateY(0); }
.masthead { padding-block: 2.75rem 1.5rem; border-bottom: 2px solid var(--ink); }
.brand { display: inline-block; text-decoration: none; }
.brand:hover { color: var(--ink); }
.wordmark {
  position: relative;
  display: block;
  isolation: isolate;
  width: fit-content;
  font-family: var(--wordmark);
  font-size: clamp(2.3rem, 9vw, 3.5rem);
  font-weight: 900;
  font-stretch: 66%;
  font-variation-settings: 'wdth' 66;
  line-height: 1;
  letter-spacing: .5px;
}
.wordmark::after {
  content: '';
  position: absolute;
  inset: auto -.055em .06em .055em;
  height: .14em;
  background: var(--accent-line);
  opacity: .62;
  pointer-events: none;
}
.subline { display: block; margin-top: .9rem; font: 500 .75rem/1.5 var(--title); letter-spacing: .12em; color: var(--ink-soft); }
main { padding-block: 2.25rem 3rem; }
.eyebrow { margin: 0 0 .8rem; font: 600 .75rem/1.5 var(--title); letter-spacing: .08em; color: var(--accent-soft); }
h1, h2, h3 { font-family: var(--title); font-weight: 600; line-height: 1.35; }
h1 { margin: 0 0 1.25rem; font-size: clamp(1.6rem, 5.5vw, 2.2rem); letter-spacing: -.04em; }
h2 { margin: 0 0 .85rem; font-size: 1.15rem; }
h3 { margin: 0 0 .65rem; font-size: 1rem; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 1.3rem; line-height: 1.6; }
.muted, .date { color: var(--ink-soft); }
.date, code, time { font-variant-numeric: tabular-nums; }
code { font-family: var(--title); font-size: .85em; }
section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
section section { margin-top: 1.5rem; }
ul, ol { padding-left: 1.25rem; }
li { padding-left: .2rem; margin-block: .5rem; }
.owner-note { padding: 1rem 0 1rem 1rem; border-left: 3px solid var(--accent-line); color: var(--ink-soft); }
.owner-note strong, .placeholder { color: var(--accent-ink); }
.placeholder { font-family: var(--title); font-size: .9em; }
.page-links { display: grid; margin-top: 2rem; border-top: 2px solid var(--ink); }
.page-links a { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.page-links .number { flex: 0 0 2ch; font: 600 .85rem/1.6 var(--title); color: var(--ink-mute); }
.store-link { display: inline-block; margin-top: 1.5rem; padding: .75rem 1.1rem; min-height: 44px; background: var(--accent-deep); color: var(--accent-ink); border: 1px solid var(--accent-line); font: 600 1rem/1.5 var(--title); text-decoration: none; }
.store-link:hover { color: var(--accent-ink); text-decoration: underline; }
dl { margin: 0; }
.data-row, .qa-row { padding-block: 1.4rem; border-bottom: 1px solid var(--rule); }
dt { font-family: var(--title); font-weight: 600; line-height: 1.5; margin-bottom: .6rem; }
dd { margin: 0; }
.contact a { display: inline-block; padding-block: .4rem; min-height: 44px; }
.footer { border-top: 2px solid var(--ink); padding-block: 1.5rem 2.5rem; color: var(--ink-soft); font-size: 1rem; }
.footer .date { font: 400 .75rem/1.7 var(--title); margin-top: 1rem; }
.footer nav { display: flex; flex-wrap: wrap; column-gap: 1.5rem; margin-top: .8rem; }
.footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer [aria-current='page'] { color: var(--accent-ink); text-decoration-thickness: 2px; }
@media (max-width: 360px) {
  :root { --space: 1rem; }
  .masthead { padding-top: 2rem; }
  .footer nav { column-gap: 1rem; }
}