.reader-page,.directory-page { max-width:980px; margin:0 auto; padding:12px 0 40px; }
.reader-hero { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:28px; margin-bottom:32px; align-items:start; }
.reader-hero > img { width:100%; height:auto; aspect-ratio:355/200; object-fit:contain; border-radius:12px; }
.reader-eyebrow { color:#77dca6; letter-spacing:1.2px; font-size:11px; }
.reader-hero h1,.directory-page h1 { color:#e6bb58; font-size:clamp(24px,3vw,34px); line-height:1.3; margin-bottom:16px; }
.reader-hero p,.reader-note,.directory-page > p { color:#adbed0; line-height:1.7; }
.reader-actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.reader-prose { line-height:1.85; color:#d0dce8; overflow-wrap:anywhere; }
.reader-prose h2 { font-size:22px; margin-bottom:20px; color:#e2eaf3; }
.reader-prose img { max-width:100%; height:auto; }
.reader-more { margin:24px 0; color:#b7c8d9; }
.reader-more summary { cursor:pointer; padding:12px 0; }
.reader-back { margin-top:36px; }
.directory-search { width:100%; padding:12px 14px; border:1px solid #2c455e; background:#132b43; border-radius:10px; color:#eaf0f7; margin:8px 0 24px; font-size:16px; }
.directory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.directory-grid a { padding:16px; background:#142b41; border:1px solid #2b4157; color:#d4e2ef; border-radius:10px; overflow-wrap:anywhere; }
.directory-grid a:hover { border-color:#deb04e; color:#deb04e; }
.directory-grid a[hidden] { display:none; }
.directory-page :is(a,input):focus-visible,.reader-page :is(a,summary):focus-visible { outline:2px solid #e1b54b; outline-offset:3px; }
@media(max-width:991px) { .reader-page,.directory-page { padding:12px 16px 36px; } .directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:575px) { .reader-hero { grid-template-columns:1fr; gap:20px; } .reader-hero > img { max-width:355px; margin:0 auto; } .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
body { margin-bottom:0; min-height:100vh; display:flex; flex-direction:column; }
#body_page { flex:1; }
.footer { position:static; white-space:normal; line-height:1.7; padding:16px 0; }
.navbar .site-search { flex:1; min-width:160px; max-width:300px; margin:0 16px; position:relative; }
.site-search-field { display:flex; background:#142c43; border:1px solid #30465a; border-radius:8px; }
.site-search-field input { width:100%; min-width:0; background:transparent; border:0; padding:9px 12px; color:#e8eff7; font-size:14px; }
.site-search-field input::placeholder { color:#a6b9cd; }
.site-search-field button { background:transparent; color:#d6b05b; border:0; padding:8px 12px; }
.site-search input:focus-visible { outline:2px solid #e1b54b; outline-offset:2px; border-radius:8px; }
.site-search .list-search-res { position:absolute; top:100%; left:0; right:0; width:auto; z-index:1050; }
.list-search-res:empty,.list-search-res.hide { display:none!important; }
@media(max-width:575px) { .navbar .site-search { order:3; flex-basis:100%; max-width:none; margin:10px 0 0; } #main-navigation { order:4; } }