:root{--bg:#f7f5ef;--ink:#243c36;--muted:#63736c;--line:#dedfd4;--accent:#9b6a32}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 system-ui,sans-serif}a{color:inherit;text-underline-offset:4px}a:hover{color:var(--accent)}.wrap{max-width:1160px;margin:auto;padding:0 28px}header{border-bottom:1px solid var(--line)}header .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:20px;padding-bottom:20px}.brand{text-decoration:none;font:700 25px Georgia,serif}nav{display:flex;gap:24px;font-size:14px}main{min-height:70vh;padding-top:45px;padding-bottom:65px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--accent);font-weight:700}h1,h2,h3{font-family:Georgia,serif;line-height:1.18;font-weight:400}h1{font-size:clamp(35px,6vw,64px);max-width:900px;margin:18px 0 24px}h2{font-size:32px}h3{font-size:23px;margin:10px 0}.lead{max-width:700px;font-size:19px;color:var(--muted)}.stats{display:flex;gap:35px;margin:28px 0;color:var(--muted)}.stats b{color:var(--ink)}input{width:100%;padding:18px 20px;border:1px solid #b7c2b7;border-radius:9px;font:inherit;background:white;color:var(--ink)}.alphabet{display:flex;flex-wrap:wrap;gap:8px;padding:24px 0;position:sticky;top:0;background:var(--bg);z-index:1}.alphabet a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:5px;text-decoration:none}.letter{scroll-margin-top:100px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.card{display:block;background:#fffef9;border:1px solid var(--line);border-radius:10px;padding:22px;text-decoration:none;transition:transform .15s}.card:hover{transform:translateY(-3px);border-color:#9aa997}.meta{font-size:13px;color:var(--muted)}.count{font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}.reading{max-width:760px;margin:auto}.reading h1{font-size:clamp(32px,5vw,48px)}.prose{font:21px/1.85 Georgia,serif}.prose p{margin:0 0 1.3em;white-space:pre-line}.crumbs{font-size:13px;color:var(--muted);margin-bottom:28px}.pager{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:24px;margin-top:40px}.story-list{list-style:none;padding:0}.story-list li{border-bottom:1px solid var(--line);padding:20px 0}.story-list a{text-decoration:none}.story-list p{margin:7px 0;color:var(--muted);font-size:15px}footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:13px}.note{border-left:3px solid #b79158;padding:12px 20px;background:#f0ede3;font-size:14px}.search-results{margin-top:20px}.hidden,[hidden]{display:none!important}button{font:inherit;cursor:pointer;padding:10px 18px;background:var(--ink);color:white;border:0;border-radius:6px}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #b48a45;outline-offset:3px}@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.wrap{padding:0 18px}header .wrap{align-items:flex-start;flex-direction:column;gap:10px}nav{gap:18px}.grid{grid-template-columns:1fr}.stats{gap:18px;font-size:14px}.prose{font-size:19px}.alphabet{position:static}.card{padding:18px}}@media print{header,footer,.pager,.alphabet,input,button{display:none}.wrap{max-width:none}.prose{font-size:12pt}body{background:white;color:black}}

main.wrap { padding-top: 45px; padding-bottom: 65px; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; margin: 20px 0 36px; }
.chapter-grid a { text-align: center; padding: 12px 4px; }
.prose img, .source-info img { max-width: 100%; height: auto; }
.prose { overflow-wrap: anywhere; }
.prose table { display: block; overflow-x: auto; }
.source-info figure { margin: 24px 0; }
.source-info .has-text-align-center { text-align: center; }
.related { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-left: 1.2em; }

.kifa-reading .kifa-note { color: var(--muted); }
.kifa-reading hr { border: 0; border-top: 1px solid var(--line); }

header .brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { flex: none; object-fit: cover; border-radius: 4px; }
.brand-dot { color: var(--accent); }
.brand-subtitle { font-size: .72em; font-weight: 400; }
.home-main #info { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 12px; }
@media (max-width: 520px) {
  .brand-subtitle { display: block; }
}
