/* The look of the homepage, for the pages that are mostly words.
   Same tokens, same split: her cream boxes keep her ink, the page
   around them follows the system. */
:root {
  --bg: #FCFAF5; --tint: #F6F1E6; --card: #FFFFFF;
  --ink: #2B2424; --body: #6E6255; --muted: #857A6B; --faint: #9A8D7D;
  --line: #EFE8DA; --card-line: #EDE5D5;
  --blue-deep: #4E7695; --blue-wash: #E7EFF5; --tan: #A3907A;
  --paper: #FBF6E9; --blue: #6B94B5; --slab: #2B2424; --slab-ink: #FBF6E9;
  color-scheme: light;
}
/* Dark is near-black and barely tinted, not the warm brown the paper
   theme inverts into. Three states, not two: no stamp on the root means
   follow the machine, which is where most readers are, so the tokens
   are declared once behind prefers-color-scheme (guarded so an explicit
   light choice still beats a dark OS) and once more behind the stamp so
   the switch wins the other way. */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --d-bg: #101012; --d-tint: #17171A; --d-card: #191A1D;
  --d-ink: #F2F1EE; --d-body: #A6A6AD; --d-muted: #95959C; --d-faint: #82828A;
  --d-line: #26262B; --d-card-line: #2C2C32;
  --d-blue-deep: #9CC0DA; --d-blue-wash: #1E2A33; --d-tan: #A7A7B0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--d-bg); --tint: var(--d-tint); --card: var(--d-card);
    --ink: var(--d-ink); --body: var(--d-body);
    --muted: var(--d-muted); --faint: var(--d-faint);
    --line: var(--d-line); --card-line: var(--d-card-line);
    --blue-deep: var(--d-blue-deep); --blue-wash: var(--d-blue-wash); --tan: var(--d-tan);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--d-bg); --tint: var(--d-tint); --card: var(--d-card);
  --ink: var(--d-ink); --body: var(--d-body);
  --muted: var(--d-muted); --faint: var(--d-faint);
  --line: var(--d-line); --card-line: var(--d-card-line);
  --blue-deep: var(--d-blue-deep); --blue-wash: var(--d-blue-wash); --tan: var(--d-tan);
  color-scheme: dark;
}

/* The switch itself. Two labelled halves rather than one icon that
   toggles: an icon leaves you guessing whether it shows the theme you
   are in or the one you would get. */
.theme { display: inline-flex; border: 1px solid var(--card-line); border-radius: 20px; overflow: hidden; margin-right: 18px; }
.theme button {
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  border: 0; background: none; color: var(--body); padding: 5px 11px;
}
.theme button:hover { color: var(--ink); }
/* The lit half is the theme you are in, so it inverts against the page
   while the other half stays on the page's own ground. */
.theme button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: Manrope, -apple-system, system-ui, 'Segoe UI', sans-serif;
  font-size: 16px; -webkit-font-smoothing: antialiased;
}
.px {
  font-family: 'VT323', 'Courier New', monospace;
  -webkit-font-smoothing: none; font-smooth: never;
}
a { color: var(--blue-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 760px; margin: 0 auto; padding-inline: 28px; }

header { border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; height: 72px; }
.wordmark { font-size: 40px; line-height: 1; letter-spacing: 1px; color: var(--ink); text-decoration: none; }
.grow { flex-grow: 1; }
.back { font-size: 14px; font-weight: 700; color: var(--body); text-decoration: none; }
.back:hover { color: var(--ink); }

main { padding-block: 64px 90px; }
.eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tan);
}
h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin-top: 12px; }
.lede { font-size: 18px; line-height: 1.6; color: var(--body); margin-top: 16px; }
h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.015em; margin-top: 48px; }
p { font-size: 16px; line-height: 1.7; color: var(--body); margin-top: 14px; }

.points { margin-top: 26px; display: grid; gap: 12px; }
.point {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 14px; padding: 18px 20px;
}
.point b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.point span { display: block; font-size: 15px; line-height: 1.65; color: var(--body); margin-top: 5px; }

.slab {
  position: relative; margin-top: 16px;
  background: var(--slab); color: var(--slab-ink);
  border-radius: 12px; padding: 18px 20px; overflow-x: auto;
}
.slab pre {
  margin: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13.5px; line-height: 1.75; white-space: pre;
}
.slab button {
  position: absolute; top: 12px; right: 12px;
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--paper); color: var(--slab); border: 0; border-radius: 6px; padding: 5px 11px;
}
footer { border-top: 1px solid var(--line); padding: 30px 0 46px; }
.foot { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.foot a { font-size: 14px; font-weight: 600; color: var(--body); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .sp { margin-left: auto; font-size: 13.5px; color: var(--faint); font-weight: 600; }
.heart { color: #C13A2A; }
@media (max-width: 640px) { h1 { font-size: 34px; } main { padding-block: 42px 64px; } }