:root {
  --bg: #eceef3;
  --ink: #1b1d29;
  --soft: #555a6e;
  --a: #5530f0;
  --b: #1a222c;
  --c: #5a2a6c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #16181f; --ink: #eef0f6; --soft: #a6abbd; }
}
:root[data-theme="dark"] { --bg: #16181f; --ink: #eef0f6; --soft: #a6abbd; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 "Geist", system-ui, sans-serif;
}
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: max(40px, env(safe-area-inset-top)) 16px 40px;
}
h1 {
  font: 700 clamp(2.2rem, 7vw, 4.2rem)/1.02 "Bricolage Grotesque", sans-serif;
  letter-spacing: -0.02em;
  max-width: 14ch;
  margin: 0 0 16px;
}
.lede { color: var(--soft); max-width: 60ch; margin: 0 0 32px; }
.dirs { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dir {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
  min-height: 210px;
  padding: 22px 22px 24px;
  border-radius: 22px;
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease;
}
.dir:hover { transform: translateY(-2px); }
.dir:active { transform: scale(.98); }
.dir:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dir.a { background: var(--a); font-family: "Bricolage Grotesque", sans-serif; }
.dir.b { background: var(--b); color: #dde4ea; border-radius: 10px; font-family: "Geist", sans-serif; }
.dir.c { background: var(--c); border-radius: 34px; font-family: "Young Serif", serif; }
.letter { font-size: 3.4rem; line-height: 1; font-weight: 700; }
.dir.b .letter { color: #82c3b6; font-weight: 500; }
.dir.c .letter { color: #f3cf4f; font-weight: 400; }
.name { font-size: 1.6rem; font-weight: 700; }
.dir.b .name, .dir.c .name { font-weight: 400; }
.what { grid-column: 1 / -1; margin-top: 18px; font: 1rem/1.5 "Geist", system-ui, sans-serif; opacity: .92; }
.foot { color: var(--soft); font-size: .9rem; margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { .dir { transition: none; } }