/* The own site's layer (core look: "Own site ... web sizes; light or dark from the reader's own setting").
   Every color is a core-look job from tokens.css; the values live in .claude/skills/core-look/tokens.json. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.55 Geist, system-ui, -apple-system, sans-serif; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.band { height: 8px; background: var(--accent); }
.page { max-width: 640px; margin: 0 auto; padding-inline: 20px; padding-block: 56px 64px; display: grid; gap: 28px; }
.nameline { margin: 0; font: 400 13px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.nameline a { text-decoration: none; }
h1 { margin: 0; font-weight: 700; font-size: clamp(34px, 7vw, 52px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
h2 { margin: 0; font-weight: 600; font-size: 22px; line-height: 1.16; letter-spacing: -0.01em; }
.lede { margin: 0; max-width: 60ch; color: var(--ink); }
.signup { display: grid; gap: 12px; }
.button { display: inline-block; justify-self: start; padding: 16px 26px; border-radius: 18px; background: var(--accent); color: var(--onAccent); font-weight: 600; text-decoration: none; }
.button:hover { filter: brightness(1.05); }
.embed { width: 100%; max-width: 100%; min-height: 160px; border-radius: 18px; overflow: hidden; } /* beehiiv's form brings its own Warm white ground: seamless on light, a light card on dark, since the form is light only */
.first { margin: 0; color: var(--ink2); font-size: 16px; }
.signup .first + .first { margin-top: -6px; }
.parts { display: grid; gap: 14px; padding-top: 24px; border-top: 2px solid var(--quiet); }
.parts ol { margin: 0; padding-left: 24px; display: grid; gap: 10px; }
.sample, .about { padding-top: 24px; border-top: 2px solid var(--quiet); }
.story { display: grid; gap: 12px; padding: 22px 24px; border: 2px solid var(--quiet); border-left: 8px solid var(--accent); border-radius: 18px; }
.story p { margin: 0; }
.kicker { font: 400 13px/1.3 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.about p { margin: 0; max-width: 60ch; }
.foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 24px; border-top: 2px solid var(--quiet); font-size: 15px; color: var(--ink2); }
section { display: grid; gap: 12px; }
.count { font: 400 13px "Geist Mono", ui-monospace, monospace; color: var(--ink2); }
.sources { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sources li { overflow-wrap: anywhere; }
.kind { font: 400 12px "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }