:root { --ink: #171717; --muted: #6b6b6b; --line: #dedede; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: Arial, "Noto Sans", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.site-header { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: auto; padding: 0 24px; border-bottom: 1px solid var(--line); }
.brand { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
main { max-width: 1280px; margin: auto; padding: 0 24px; }
.collection { padding: 32px 0 80px; }
.collection-head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 10px; }
.search { width: min(320px, 50%); }
.search input { width: 100%; border: 1px solid var(--line); border-radius: 0; outline: 0; background: #fff; padding: 11px 12px; color: var(--ink); font: 14px Arial, sans-serif; }
.search input:focus { border-color: var(--ink); }
.search input::placeholder { color: #888; }
.result-count { min-height: 18px; margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.alphabet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.card, .card.featured { min-width: 0; padding: 24px 24px 25px 0; border-right: 0; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); }
.card:nth-child(odd) { padding-right: 36px; border-right: 1px solid var(--line); }
.card:nth-child(even) { padding-left: 36px; }
.card.featured { grid-column: auto; }
.card-top { display: flex; justify-content: space-between; gap: 16px; }
.index, .badge { display: none; }
.card h3, .featured h3 { margin: 0 0 5px; font-size: 18px; font-weight: 700; letter-spacing: 0; }
.card { scroll-margin-top: 24px; }
.permalink { margin-left: 8px; color: #aaa; font-weight: 400; opacity: 0; }
.card:hover .permalink, .permalink:focus-visible { opacity: 1; }
.card h3 small, .featured h3 small { margin-left: 8px; color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.card-top p, .featured .card-top p { margin: 0; color: var(--muted); font-size: 13px; }
.letters, .featured .letters, .letters.compact { margin: 24px 0 21px; color: var(--ink); font-family: "Noto Sans", "Segoe UI", Arial, sans-serif; font-size: clamp(23px, 2.3vw, 32px); line-height: 1.65; letter-spacing: .045em; overflow-wrap: anywhere; }
.sample, .featured .sample { margin: 0; padding: 0; border: 0; color: var(--muted); font-family: Georgia, "Noto Serif", serif; font-size: 14px; line-height: 1.55; font-style: normal; }
.rtl .card-top { direction: rtl; }
.empty-state { padding: 80px 0; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) {
  .site-header { height: 56px; padding: 0 18px; }
  main { padding: 0 18px; }
  .collection-head { align-items: flex-start; gap: 20px; }
  .search { width: 60%; }
  .alphabet-grid { grid-template-columns: 1fr; }
  .card, .card.featured, .card:nth-child(odd), .card:nth-child(even) { padding: 23px 0; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }