:root {
  --bg: #000;
  --fg: hsl(0 0% 98%);
  --muted: hsl(0 0% 55%);
  --faint: hsl(0 0% 34%);
  --line: hsl(0 0% 12%);
  --primary: hsl(350 89% 50%);
  --primary-soft: hsl(350 89% 62%);
  --surface: hsl(0 0% 4%);
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --display: 'Outfit', var(--sans);
  --mono: Menlo, Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* The app's red silk glow, reduced to something that will not fight text. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 80% -10%, hsl(350 89% 40% / 0.18), transparent 70%),
    radial-gradient(50% 35% at 0% 5%, hsl(350 89% 30% / 0.12), transparent 70%);
}

a { color: var(--primary-soft); text-decoration-color: hsl(350 89% 62% / 0.35); text-underline-offset: 3px; }
a:hover { color: var(--fg); }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--line); background: hsl(0 0% 0% / 0.8); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; max-width: 960px; margin: 0 auto; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 300; letter-spacing: 0.14em; font-size: 17px; color: var(--fg); text-decoration: none; }
.wordmark img { width: 24px; height: 24px; object-fit: contain; }
.wordmark b { font-weight: 300; color: var(--primary); }
.masthead nav { display: flex; gap: 18px; font-size: 14px; }
.masthead nav a { color: var(--muted); text-decoration: none; }
.masthead nav a:hover { color: var(--fg); }

/* ---------- article ---------- */
article { padding: 56px 0 24px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin: 0 0 14px; }
h1 { font-family: var(--display); font-weight: 300; font-size: clamp(32px, 6vw, 50px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 18px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--faint); margin: 0 0 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.byline strong { color: var(--muted); font-weight: 500; }

/* The block answer engines lift. Stated plainly, above everything else. */
.summary { border: 1px solid var(--line); border-left: 2px solid var(--primary); background: var(--surface); border-radius: 4px; padding: 20px 22px; margin: 0 0 36px; }
.summary h2 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; border: 0; padding: 0; }
.summary p { margin: 0 0 10px; font-size: 16px; color: hsl(0 0% 88%); }
.summary ul { margin: 0; padding-left: 20px; font-size: 15px; color: hsl(0 0% 80%); }
.summary li { margin: 5px 0; }
.summary > :last-child { margin-bottom: 0; }

.toc { margin: 0 0 40px; font-size: 14px; }
.toc summary { cursor: pointer; color: var(--muted); font-weight: 500; }
.toc ol { margin: 12px 0 0; padding-left: 20px; color: var(--faint); }
.toc li { margin: 4px 0; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--fg); text-decoration: underline; }
.toc .sub { padding-left: 16px; }

article h2 { font-family: var(--display); font-weight: 400; font-size: clamp(23px, 3.6vw, 29px); line-height: 1.25; letter-spacing: -0.01em; margin: 52px 0 16px; padding-top: 4px; scroll-margin-top: 80px; }
article h3 { font-family: var(--display); font-weight: 500; font-size: 19px; margin: 36px 0 12px; scroll-margin-top: 80px; }
article h4 { font-size: 16px; font-weight: 700; margin: 28px 0 8px; color: var(--muted); }
article p { margin: 0 0 20px; }
article strong { color: #fff; font-weight: 600; }
article ul, article ol { margin: 0 0 22px; padding-left: 22px; }
article li { margin: 7px 0; }
article li::marker { color: var(--primary); }
article img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
article hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

blockquote { margin: 28px 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--primary); color: hsl(0 0% 78%); font-style: italic; }
blockquote p { margin: 0; }

code { font-family: var(--mono); font-size: 0.87em; background: hsl(0 0% 100% / 0.06); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
pre { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; overflow-x: auto; margin: 0 0 22px; }
pre code { background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.6; }

/* Comparison tables are the most-quoted thing on these pages and the worst
   served by a 720px measure — five columns inside it wrap every cell to two
   words. So a table breaks out of the text column and centres itself on the
   page instead, up to the width the index uses. 94vw never exceeds the
   viewport, so this cannot introduce a horizontal scrollbar on the page; a
   table too wide even for that scrolls inside its own box. */
.table-scroll { overflow-x: auto; margin: 0 0 26px; border: 1px solid var(--line); border-radius: 6px; width: min(94vw, 960px); margin-left: 50%; transform: translateX(-50%); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface); font-weight: 600; color: var(--fg); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- index ---------- */
.index-head { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.index-head h1 { margin-bottom: 14px; }
.index-head p { color: var(--muted); font-size: 18px; max-width: 46ch; margin: 0; }
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-bottom: 1px solid var(--line); }
.posts a.post { display: block; padding: 30px 0; text-decoration: none; color: inherit; }
.posts a.post:hover h2 { color: var(--primary-soft); }
.posts .meta { font-size: 12px; color: var(--faint); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; }
.posts h2 { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.25; margin: 0 0 8px; transition: color 0.15s; }
.posts p { color: var(--muted); font-size: 15.5px; margin: 0; }

.related { margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.related h2 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { margin: 0 0 10px; }
.related a { font-size: 16px; }

.cta { margin: 56px 0 0; padding: 28px 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); text-align: center; }
.cta p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.cta a.button { display: inline-block; background: var(--primary); color: #fff; font-weight: 600; font-size: 15px; padding: 11px 26px; border-radius: 999px; text-decoration: none; }
.cta a.button:hover { background: var(--primary-soft); color: #fff; }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--line); margin-top: 72px; padding: 32px 0 56px; font-size: 13px; color: var(--faint); }
footer.site .row { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--fg); }
footer.site .links { display: flex; flex-wrap: wrap; gap: 16px; }
.age { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; }
.age b { color: var(--primary-soft); font-size: 10px; letter-spacing: 0.08em; }

/* On a phone the masthead has room for the wordmark and two links. Left to
   wrap, "Open the app" broke across three lines and pushed the bar four rows
   tall, so the two links that are also in the footer step aside instead. */
@media (max-width: 640px) {
  body { font-size: 16px; }
  article { padding-top: 36px; }
  .masthead-inner { padding: 12px 16px; }
  .masthead nav { gap: 16px; font-size: 13px; }
  .masthead nav a { white-space: nowrap; }
  .masthead nav a.optional { display: none; }
  .wrap, .wrap-wide { padding: 0 16px; }
  h1 { font-size: clamp(28px, 8vw, 38px); }
}

@media print {
  body::before, .masthead, .cta, .related { display: none; }
  body { background: #fff; color: #000; }
}