/* kevnk.ai
   Type, spacing and line-height come only from the golden-ratio tokens below
   (.claude/skills/golden-ratio). Widths are plain ch/rem measures, not golden-% grids. */

:root {
  /* spacer ladder: s_n = 1.5rem * PHI^(n-6) */
  --s3: 0.354102rem;
  --s4: 0.572949rem;
  --s5: 0.927051rem;
  --s6: 1.5rem;
  --s7: 2.427051rem;
  --s8: 3.927051rem;
  --s9: 6.354102rem;
  /* halves: vertical padding only */
  --s4-half: 0.2864745rem;
  --s5-half: 0.4635255rem;
  --s6-half: 0.75rem;

  /* type scale: 16px * PHI^n */
  --t0: 1rem;
  --t1: 1.618034rem;
  --t2: 2.618034rem;
  --t3: 4.236068rem;

  /* line-heights: the closed family of four */
  --lh-tight: 1.145898;
  --lh-snug: 1.236064;
  --lh-read: 1.381966;
  --lh-loose: 1.618034;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* one accent; all text pairs are WCAG AA (lowest: muted on paper-2, 5.1:1) */
  --paper: #f6f3ec;
  --paper-2: #ede7da;
  --ink: #1b1915;
  --ink-2: #3b372f;
  --muted: #655f54;
  --rule: #d6cdbd;
  --accent: #a13a16;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161412;
    --paper-2: #201d19;
    --ink: #efeae1;
    --ink-2: #d2cbbf;
    --muted: #a69e91;
    --rule: #3a352e;
    --accent: #f08c5a;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* No scroll anchoring: when a tab hides rows, the tabs stay under your finger and the rows glide
   up to them (tabs.js). Chrome reads the viewport's setting from body, so set both. This only
   turns off anchoring; it never stops scrolling. Nothing on this site sets overflow on html/body. */
html, body { overflow-anchor: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t0) / var(--lh-loose) var(--sans);
}

h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
p, li, dd { text-wrap: pretty; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: var(--s5); top: calc(-1 * var(--s8)); }
.skip:focus { top: var(--s5); background: var(--paper); padding: var(--s4-half) var(--s4); }

.wrap {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--s5);
}
@media (min-width: 40rem) {
  .wrap { padding-inline: var(--s6); }
}

/* ---------- site header + footer ---------- */

.site-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--s5);
}
.wordmark {
  font: 700 var(--t0) / var(--lh-snug) var(--serif);
  color: var(--ink);
  text-decoration: none;
}
.hire { font-weight: 600; }

.site-foot {
  margin-top: var(--s9);
  padding-block: var(--s7) var(--s8);
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}
.site-foot .wrap > * + * { margin-top: var(--s5); }
.foot-name { font: 700 var(--t1) / var(--lh-snug) var(--serif); color: var(--ink); }
.tagline { font-family: var(--serif); font-style: italic; color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); }
.foot-links a { font-weight: 600; }
.colophon { color: var(--muted); }

/* ---------- shared bits ---------- */

h1 {
  font: 700 var(--t2) / var(--lh-tight) var(--serif);
  letter-spacing: -0.01em;
}
@media (min-width: 48rem) {
  h1 { font-size: var(--t3); }
}
.lead { color: var(--ink); }
/* motion is only in tabs.js; this is a belt-and-braces guard for anything CSS might add later */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.hedge {
  font-weight: 700;
  color: var(--accent);
  margin-left: 0.1em;
}
/* ---------- index ---------- */

.intro { padding-top: var(--s7); }
.intro > * + * { margin-top: var(--s5); }
.intro h1 + .lead { margin-top: var(--s6); }
.intro p { line-height: var(--lh-read); }

/* Tabs: pills with a border, so they read as buttons at a glance (Kevin: the old type filter
   "doesn't look like clickable tabs"). They need JS, so they only show when html.js is set. */
.toolbar { display: none; }
.js .toolbar {
  display: block;
  margin-top: var(--s7);
  padding-block: var(--s5) var(--s5-half);
  border-bottom: 1px solid var(--rule);
}
.tabs { display: flex; flex-wrap: wrap; gap: var(--s4); }
[role="tab"] {
  font: inherit;
  line-height: var(--lh-snug);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: var(--s4-half) var(--s5);
  cursor: pointer;
}
[role="tab"]:hover { border-color: var(--ink-2); }
[role="tab"][aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
[role="tab"][aria-selected="true"] .n { color: inherit; opacity: 0.8; }
.n { font-family: var(--mono); color: var(--muted); font-weight: 400; }

.toolbar-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4) var(--s6);
  margin-top: var(--s5);
  color: var(--muted);
}
.sort button {
  font: inherit;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0;
  margin-left: var(--s4);
  cursor: pointer;
}
.sort button:hover { color: var(--ink); }
.sort button[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

.pre-ai-note { margin-top: var(--s7); color: var(--ink-2); }

.group { margin-top: var(--s8); }
.group-head { padding-bottom: var(--s5); }
.group-head h2 { font: 700 var(--t1) / var(--lh-snug) var(--serif); }
.group-head .count { font: 400 var(--t0) / var(--lh-snug) var(--mono); color: var(--muted); vertical-align: 0.2em; margin-left: var(--s3); }
.group-head p { margin-top: var(--s4); color: var(--ink-2); line-height: var(--lh-read); }

.row { border-top: 1px solid var(--rule); }
.row-main { position: relative; padding-block: var(--s6-half); }
.row-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s4); }
.row-name {
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* the whole row is the click target; the link text stays just the name */
.row-name::after { content: ""; position: absolute; inset: 0; }
.row-name:focus-visible { outline: none; }
.row-name:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.row-main:hover .row-name { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }
.row-line { padding-top: var(--s4-half); color: var(--ink-2); line-height: var(--lh-read); }
.row-meta { color: var(--muted); line-height: var(--lh-snug); }
.row-main .row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding-top: var(--s4-half); }

/* badges: same size as body text (golden-ratio floor), quiet by default */
.kind, .fav, .era {
  display: inline-block;
  font-size: var(--t0);
  line-height: var(--lh-tight);
  padding: 0 var(--s3);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink-2);
  white-space: nowrap;
}
.fav { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.era { border-style: dashed; }

/* the favorite picks: an accent rule down the left edge */
.row.is-fav > .row-main { padding-left: var(--s5); box-shadow: inset 3px 0 0 var(--accent); background: var(--paper-2); }

/* children sit indented under their parent, on a thin rule */
.children { margin-left: var(--s5); padding-left: var(--s5); border-left: 1px solid var(--rule); }
@media (min-width: 40rem) {
  .children { margin-left: var(--s6); }
}
.row.is-context > .row-main { opacity: 0.6; }
.kids { padding-bottom: var(--s5); }
.kids summary {
  display: inline-block;
  margin-left: var(--s5);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.kids summary::before { content: "+ "; font-family: var(--mono); }
.kids[open] summary::before { content: "− "; }
.kids[open] summary { margin-bottom: var(--s4); }

/* usage: 0-3 dots */
.dots { display: inline-flex; gap: var(--s3); align-items: center; }
.dots i { width: var(--s4); height: var(--s4); border-radius: 50%; border: 1px solid var(--muted); }
.dots[data-n="1"] i:nth-child(-n+1), .dots[data-n="2"] i:nth-child(-n+2), .dots[data-n="3"] i:nth-child(-n+3) { background: var(--accent); border-color: var(--accent); }
.visits { font-family: var(--mono); }

.browse { margin-top: var(--s9); padding-top: var(--s7); border-top: 2px solid var(--ink); }
.browse h2 { font: 700 var(--t1) / var(--lh-snug) var(--serif); }
.browse h2 + * { margin-top: var(--s5); }
.browse * + h2 { margin-top: var(--s7); }
.topic-list li + li { margin-top: var(--s5); }
.topic-list a { font-weight: 600; }
.topic-list .row-meta { display: block; }
.tool-chips { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s5); }
.tool-chips a {
  display: inline-block;
  padding: var(--s4-half) var(--s5);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  line-height: var(--lh-snug);
}
.tool-chips a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- detail ---------- */

.crumb { padding-top: var(--s6); }
.item { padding-top: var(--s7); }
.eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s4); }
.eyebrow .in { color: var(--muted); }
.item h1 { margin-top: var(--s5); }
.item .lead { margin-top: var(--s6); line-height: var(--lh-read); }
.item > * + p { margin-top: var(--s5); }
.item section { margin-top: var(--s7); }
.item h2 { font: 700 var(--t1) / var(--lh-snug) var(--serif); }
.item h2 + * { margin-top: var(--s5); }
.item h3 { font: 600 var(--t0) / var(--lh-snug) var(--sans); color: var(--muted); margin-top: var(--s6); }
.item h3 + * { margin-top: var(--s4); }
.item section p { line-height: var(--lh-read); }

.status-card {
  margin-top: var(--s7);
  padding-block: var(--s6);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.status-card > * + * { margin-top: var(--s5); }
.status-card .status-label { font: 700 var(--t1) / var(--lh-snug) var(--serif); }
.status-card p { line-height: var(--lh-read); }
.note { font-style: italic; font-family: var(--serif); color: var(--ink); }
.numbers li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.numbers li + li { margin-top: var(--s4); }
.numbers .source { flex-basis: 100%; color: var(--muted); line-height: var(--lh-read); }

.links { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); }
.links a { font-weight: 600; overflow-wrap: anywhere; }
.no-link { color: var(--ink-2); }

.more li + li, .tool-index li + li { margin-top: var(--s4); }
.more li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s4); }
.more a, .tool-index a { font-weight: 600; }
.mini-note { flex-basis: 100%; color: var(--ink-2); line-height: var(--lh-read); }
.tool-index .mini-note { display: block; }
.tool-index .n { margin-left: var(--s3); }

/* "How I know": the raw receipts, collapsed so they don't crowd the read */
.receipts {
  margin-top: var(--s8);
  background: var(--paper-2);
  padding: var(--s5);
  border-block: 1px dashed var(--muted);
}
.receipts summary { font: 700 var(--t0) / var(--lh-snug) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.receipts-sub { color: var(--muted); margin-top: var(--s5); line-height: var(--lh-read); }
.receipts ul { margin-top: var(--s5); }
.receipts li {
  font-family: var(--mono);
  line-height: var(--lh-read);
  overflow-wrap: anywhere;
  padding-left: var(--s6);
  text-indent: calc(-1 * var(--s6));
}
.receipts li::before { content: "—"; display: inline-block; width: var(--s6); text-indent: 0; color: var(--muted); }
.receipts li + li { margin-top: var(--s4); }

.facts { margin-top: var(--s6); }
.facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s5);
  padding-block: var(--s5-half);
  border-top: 1px solid var(--rule);
}
.facts dt { flex: 0 0 7rem; color: var(--muted); }
.facts dd { flex: 1 1 14rem; }
.explainer { display: block; color: var(--ink-2); line-height: var(--lh-read); }