:root{--bg:#f8f7f2;--panel:#f3f2ea;--card-bg:#ffffff;--stroke-1:#d9d7cf;--stroke-2:#c6c3ba;--text-1:#1f2937;--text-2:#475569;--accent:#0b3b79;--accent-2:#c5a25f;--shadow:0 4px 12px rgba(0,0,0,.06)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text-1);font:17px/1.65 Georgia, 'Times New Roman', Times, serif;height:100%}
body{overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
img{max-width:100%;height:auto}
.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--stroke-1)}
.header-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;padding:.25rem .5rem}
.site-header .brand{display:flex;gap:.6rem;align-items:center;padding:.5rem .5rem;text-decoration:none;color:var(--text-1);min-width:0;justify-self:start;margin-left:-.25rem}
.logo-img{width:24px;height:24px;border-radius:4px;object-fit:cover;border:1px solid var(--stroke-1);flex-shrink:0}
.site-header .brand-text{font-weight:700;letter-spacing:.3px;word-wrap:break-word;overflow-wrap:break-word}
.nav{--navSize:30px;--navGap:.15rem;--navStep:calc(var(--navSize) + var(--navGap));--navFudge:1px;display:grid;gap:var(--navGap) 0;padding:.2rem 0;align-content:center;justify-content:center;overflow:visible;flex-shrink:0;justify-self:center}
.nav.nav-desktop{grid-template-rows:auto auto}
.nav.nav-mobile{grid-template-rows:auto auto auto}
.nav .row{display:grid;justify-content:center;gap:var(--navGap);grid-auto-flow:column;grid-auto-columns:var(--navSize)}
.nav .row-2{margin-left:0}
.nav .row-2.odd{margin-left:calc(var(--navStep)/2 - 10px)}
.nav .spacer{display:none}
.nav .letter{display:grid;place-items:center;min-width:var(--navSize);width:var(--navSize);height:var(--navSize);border-radius:3px;background:var(--card-bg);color:var(--text-2);text-decoration:none;border:1px solid var(--stroke-1);font-size:.78rem}
.nav .letter:hover{color:var(--text-1);border-color:var(--accent)}
.nav .letter.active{background:#eef2f7;color:var(--accent);border-color:var(--accent)}
@media(min-width:768px){.nav{--navSize:30px;--navGap:.2rem;--navStep:calc(var(--navSize) + var(--navGap));--navFudge:1px;padding:.35rem 0}.nav .letter{font-size:.88rem}}
@media(min-width:900px){.nav{padding:.3rem 0}.nav.nav-mobile{display:none}}
@media(max-width:640px){.header-inner{grid-template-columns:1fr;gap:.25rem}.site-header .brand{display:none}.nav{--navSize:26px;--navGap:.2rem;--navStep:calc(var(--navSize) + var(--navGap));--navFudge:1px;width:100%;padding:.25rem .5rem}.nav .letter{font-size:.85rem}.nav.nav-desktop{display:none}.nav.nav-mobile{display:grid}}
.container{max-width:1100px;margin:0 auto;padding:1rem;flex:1}
@media(max-width:640px){.container{padding:.75rem .5rem}}
.hero{display:grid;gap:.5rem;margin:1.25rem 0 1rem}
.hero .title{font-size:clamp(24px,5.5vw,36px);font-weight:700;color:var(--accent);margin:0}
.hero .subtitle{color:var(--text-2);margin:0;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}
.letters-wrap{background:var(--panel);border:1px solid var(--stroke-1);padding:.75rem;border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
@media(max-width:640px){.letters-wrap{padding:.5rem;margin:0 -.25rem}}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
@media(max-width:600px){.card-grid{grid-template-columns:1fr}}
.card{background:var(--card-bg);border:1px solid var(--stroke-1);border-radius:8px;box-shadow:var(--shadow)}
.card .card-body{padding:1rem}
.list{list-style:none;margin:0;padding:.25rem}
.list a{display:flex;justify-content:space-between;gap:.75rem;padding:.5rem .6rem;border-radius:6px;color:var(--text-1);text-decoration:none;border:1px solid transparent}
.list a:hover{background:#faf9f6;border-color:var(--stroke-2)}
.list li+li{border-top:1px solid var(--stroke-1)}
@media(max-width:520px){.list a{flex-direction:column;align-items:flex-start;border-color:var(--stroke-1);background:#fff}}
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.1rem .45rem;border-radius:999px;border:1px solid var(--stroke-2);background:#faf9f6;color:#333;font-size:.78rem}
.muted{color:var(--text-2)}
.site-footer{border-top:1px solid var(--stroke-1);margin-top:auto;background:#fff;flex-shrink:0}
.footer-inner{max-width:1100px;margin:0 auto;padding:1rem;color:var(--text-2)}
.word-title{font-size:clamp(22px,4.5vw,30px);font-weight:700;margin:0}
.meaning{font-size:1rem}
.word-title,.meaning,.poem-item,.list a span{overflow-wrap:anywhere;word-break:break-word}
.poem-item{border-left:3px solid var(--accent);padding-left:.75rem;margin:.5rem 0}
.poem-title{font-weight:600;color:var(--text-1);font-size:.95rem}
.poem-verse{white-space:pre-wrap}
.breadcrumbs{display:flex;gap:.5rem;align-items:center;color:var(--text-2);font-size:.92rem;margin:.25rem 0 1rem}
.breadcrumbs{flex-wrap:wrap}
.crumb{color:var(--text-2);text-decoration:none}
.crumb:hover{color:var(--accent)}
.home-grid{display:grid;grid-template-columns:1fr min(36vw,400px);gap:1.2rem;align-items:start}
.home-main{display:grid;gap:1rem}
.home-aside{display:grid;place-items:center}
.home-aside .portrait{width:100%;aspect-ratio:1/1;border-radius:50%;object-fit:cover;-webkit-mask-image:radial-gradient(circle at 50% 50%, #000 80%, transparent 100%);mask-image:radial-gradient(circle at 50% 50%, #000 80%, transparent 100%)}
@media(max-width:900px){.home-grid{grid-template-columns:1fr}.home-aside{display:none}}