/* info — tokens are documented in DESIGN.md; never add a value that is not a token. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/s/fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/s/fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #ffffff;
  --surface: #f2f4f7;
  --surface-2: #e6e9ee;
  --line: #dde1e7;
  --fg: #12151a;
  --fg-2: #4a515c;
  --fg-3: #626a76;
  --accent: #1f4fd1;
  --accent-ink: #ffffff;
  --accent-soft: rgba(31, 79, 209, .09);
  --danger: #b3261e;

  --font: "Instrument Sans", "Segoe UI", sans-serif;
  --t-s: 13px; --t-m: 16px; --t-l: 20px; --t-xl: 28px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px;
  --r-s: 6px; --r-m: 10px;
  --bar: 64px; /* sticky header height */
  --fade: 140ms ease-out;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101215;
    --surface: #191c21;
    --surface-2: #23272e;
    --line: #2b3038;
    --fg: #e9ecf1;
    --fg-2: #aab1bc;
    --fg-3: #8c94a0;
    --accent: #8ea8ff;
    --accent-ink: #0c1430;
    --accent-soft: rgba(142, 168, 255, .12);
    --danger: #ff8a80;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--bar) + var(--s3)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 var(--t-m)/1.45 var(--font);
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh; display: flex; flex-direction: column;
}
a { color: var(--accent); text-underline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ext { width: 12px; height: 12px; margin-inline-start: var(--s1); vertical-align: -1px; color: var(--fg-3); flex: none; }

/* ---- header + search ---- */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--s3);
  height: var(--bar); padding: 0 var(--s4);
  padding-top: env(safe-area-inset-top);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.mark { font-weight: 700; font-size: var(--t-l); letter-spacing: -.02em; color: var(--fg); text-decoration: none; }
.search { position: relative; flex: 1; max-width: 640px; }
.search .glass { position: absolute; left: var(--s3); top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.search input {
  width: 100%; height: 44px; padding: 0 var(--s3) 0 40px;
  font: inherit; font-size: var(--t-m); color: var(--fg);
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r-m);
  outline: none; -webkit-appearance: none; appearance: none;
}
.search input:focus { border-color: var(--accent); background: var(--bg); }
.search input::placeholder { color: var(--fg-3); }

main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--s4) var(--s6); }

/* ---- home ---- */
.hero { padding: var(--s5) 0 var(--s3); }
.hero h1 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 var(--s2); }
.lede { color: var(--fg-2); margin: 0; }
.try { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.try a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s3);
  border-radius: var(--r-s); background: var(--surface); color: var(--fg); text-decoration: none; font-size: var(--t-s); font-weight: 500;
}
.try a:active { background: var(--surface-2); }

.dir h2, .results .count { font-size: var(--t-s); font-weight: 600; color: var(--fg-3); margin: var(--s5) 0 var(--s1); }
.dlist, .rlist, .elist { list-style: none; margin: 0; padding: 0; }
.d, .e-site { position: relative; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.d-link { color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; }
.d-link::after { content: ''; position: absolute; inset: 0; }
.d-name { font-weight: 600; }
.d-what { margin: 2px 0 0; color: var(--fg-2); font-size: var(--t-s); }
.d-n, .e-when { display: block; margin-top: 2px; color: var(--fg-3); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.d:active, .r:active, .e-site:active { background: var(--surface); }

/* ---- results ---- */
.results { padding-top: var(--s1); }
.r { position: relative; display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.av { width: 40px; height: 40px; flex: none; border-radius: var(--r-s); background: var(--surface); object-fit: cover; }
.av.face { border-radius: 50%; }
.glyph { display: grid; place-items: center; color: var(--fg-2); }
.glyph svg { width: 22px; height: 22px; }
.r-body { min-width: 0; flex: 1; }
.r-link { color: var(--fg); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; max-width: 100%; }
.r-link::after { content: ''; position: absolute; inset: 0; }
.r-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-sub, .r-sites { margin: 1px 0 0; font-size: var(--t-s); color: var(--fg-2); overflow-wrap: anywhere; }
.r-sites { color: var(--fg-3); }
.empty { color: var(--fg-2); padding: var(--s5) 0; }

/* ---- entity ---- */
.entity { padding-top: var(--s5); }
.e-head { display: flex; gap: var(--s4); align-items: center; margin-bottom: var(--s3); }
.e-head .av { width: 72px; height: 72px; }
.e-head .glyph svg { width: 34px; height: 34px; }
.e-head h1 { margin: 0; font-size: var(--t-xl); line-height: 1.15; letter-spacing: -.02em; }
.e-kind { margin: var(--s1) 0 0; color: var(--fg-2); font-size: var(--t-s); }

/* ---- estate cards on the person page ---- */
.e-bio { margin: var(--s2) 0 0; color: var(--fg-2); font-size: var(--t-s); }
.e-site.has-card { padding-bottom: var(--s4); }
.e-h { margin: 0; font-size: var(--t-m); }
.e-link { color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.c-list { list-style: none; margin: 0; padding: 0; }
.c-item { padding: var(--s2) 0 var(--s2) var(--s3); border-left: 2px solid var(--line); margin-bottom: var(--s2); }
.c-title { color: var(--fg); font-weight: 500; text-decoration: none; display: inline; }
.c-title:active { color: var(--accent); }
.c-quote { margin: var(--s1) 0 0; color: var(--fg-2); font-size: var(--t-s); }
.c-meta { margin: 2px 0 0; color: var(--fg-3); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.c-all { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-s); font-weight: 600; }
.e-site.has-card:active, .e-site.has-card:hover { background: none; }

/* ---- prose (about, privacy, feedback) ---- */
.prose { padding-top: var(--s5); max-width: 62ch; }
.prose h1 { font-size: var(--t-xl); letter-spacing: -.02em; margin: 0 0 var(--s3); line-height: 1.15; }
.prose h2 { font-size: var(--t-m); margin: var(--s5) 0 var(--s2); }
.prose p, .prose li { color: var(--fg-2); }
.prose .sites li { margin-bottom: var(--s2); }
.prose code { font-size: .9em; }
.fb-form label, .fb-form legend { display: block; font-weight: 600; margin: var(--s4) 0 var(--s2); color: var(--fg); }
.fb-form fieldset { border: 0; padding: 0; margin: 0; }
.fb-kind { display: flex !important; align-items: center; gap: var(--s2); font-weight: 400 !important; margin: 0 !important; min-height: 44px; }
.fb-form textarea, .fb-form input[type=email] {
  width: 100%; font: inherit; font-size: var(--t-m); color: var(--fg); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s3);
}
.fb-form textarea:focus, .fb-form input[type=email]:focus { outline: none; border-color: var(--accent); }
.fb-opt { font-weight: 400; color: var(--fg-3); }
.fb-hp { position: absolute; left: -9999px; }
.fb-err { color: var(--danger); font-weight: 600; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s5);
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--r-s);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}

.foot {
  display: flex; gap: var(--s5); justify-content: center; flex-wrap: wrap;
  padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); font-size: var(--t-s);
}
.foot a { color: var(--fg-2); min-height: 44px; display: inline-flex; align-items: center; }

@media (hover: hover) {
  .c-title:hover { color: var(--accent); }
  .d:hover, .r:hover, .e-site:hover { background: var(--surface); }
  .try a:hover { background: var(--surface-2); }
}
@media (min-width: 900px) {
  .top { padding: 0 var(--s5); }
  .d, .r, .e-site { padding-inline: var(--s2); margin-inline: calc(-1 * var(--s2)); border-radius: var(--r-s); }
}
@media (prefers-reduced-motion: no-preference) {
  .d, .r, .e-site, .try a { transition: background var(--fade); }
}