@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

:root { color-scheme: light; font-family: Georgia, 'Times New Roman', serif; color: #30496c; background: #c8d5e2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 18% 12%, #ffffff70, transparent 45%), radial-gradient(ellipse at 77% 4%, #f5f7fa9c, transparent 54%), radial-gradient(ellipse at 91% 82%, #9cb8d16b, transparent 49%), linear-gradient(155deg, #e1e6ed 0%, #c9d4e1 57%, #b6c9db 100%); }
main { padding: 28px 26px 44px; max-width: 1800px; margin: auto; }
.site-header { display: flex; align-items: center; gap: 32px; min-height: 72px; padding: 10px 50px; border-bottom: 1px solid #ffffff70; background: #f4f6f9b3; }
.site-brand { color: #192b47; font-size: 28px; text-decoration: none; white-space: nowrap; }
.site-menu { display: flex; align-items: center; gap: 34px; }
.top-link { display: inline-block; padding: 9px 0; border: 0; background: transparent; color: #465a79; font: 21px/1.25 Georgia, serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.top-link.current { color: #192b47; border-bottom: 2px solid #344968; }
.top-link:hover { color: #192b47; }
.site-actions { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.site-header { padding-right: 30px; }
.about-menu { position: relative; }
.about-toggle { color: #192b47; }
.about-dropdown { position: absolute; top: 100%; left: -16px; z-index: 10; min-width: 260px; padding: 7px; background: #e3eaf2; border: 1px solid #ffffffbd; border-radius: 9px; box-shadow: 0 12px 30px #30496c26; }
.about-item { display: block; width: 100%; padding: 12px 13px; border: 0; border-radius: 4px; background: transparent; color: #30496c; text-align: left; font: 18px/1.3 Georgia, serif; text-decoration: none; cursor: pointer; }
.about-item:hover, .about-item:focus-visible { background: #b9cde25c; }
.site-header :focus-visible { outline: 2px solid #557395; outline-offset: 3px; }
@media (max-width: 950px) { .site-header { padding-inline: 24px; gap: 24px; flex-wrap: wrap; } .site-brand { font-size: 25px; } .site-menu { gap: 22px; } .top-link { font-size: 18px; } }
@media (max-width: 600px) { .site-header { gap: 8px 20px; padding: 12px 18px; } .site-brand { flex: 1; } .site-menu { order: 3; width: 100%; justify-content: space-between; gap: 12px; } .top-link { font-size: 18px; } }
.masthead { text-align: center; height: 122px; }
.eyebrow { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #5b6e8b; }
h1 { font-family: 'Great Vibes', 'Monotype Corsiva', 'URW Chancery L', cursive; font-size: 76px; font-weight: 400; line-height: 1.08; margin: 4px 0 0; color: #465d7f; text-shadow: 0 2px 0 #ffffff80; }
.archive { display: grid; grid-template-columns: clamp(245px, 22%, 300px) 1fr; overflow: hidden; margin-top: 17px; border: 1px solid #ffffffd9; border-top-width: 2px; border-radius: 35px; background: linear-gradient(110deg, #f3f5fa42, #e7f1fb30); box-shadow: 0 18px 48px #40567509, inset 0 1px 0 #ffffff4d; min-height: 515px; }
nav { border-right: 1px solid #8294af40; padding: 48px 13px 0 0; }
.selector { appearance: none; width: 100%; min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px 14px 27px; border: 0; border-bottom: 1px solid #8294af40; background: transparent; color: #233e65; text-align: left; font: 700 16px/1.3 'Segoe UI', Arial, sans-serif; letter-spacing: 2.3px; text-transform: uppercase; cursor: pointer; transition: background-color 150ms, box-shadow 150ms; }
.selector:last-child { border-bottom: 0; }
.selector:hover { background: #b4c7dd38; }
.selector.active { background: #a9bfd64f; box-shadow: inset 3px 0 #6581a580; }
.selector:focus-visible { outline: 2px solid #557395; outline-offset: -5px; }
.archive { grid-template-columns: clamp(195px, 18%, 245px) 1fr; height: clamp(540px, calc(100vh - 349px), 780px); }
nav { overflow-y: auto; min-height: 0; }
.reading-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: 56px minmax(0, 1fr) 64px; }
.pane-header { border-bottom: 1px solid #8294af40; }
.pane-footer { border-top: 1px solid #ffffff70; background: #d5e0ed24; }
.pane-content { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #8b9fba #dbe3ed55; }
.starting-message { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 28px; text-align: center; font: italic 18px/1.6 Georgia, serif; color: #5b6e8b; }
.reading-category summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 46px; padding: 10px 20px 10px 17px; border-bottom: 1px solid #8294af30; background: #d7e2ed38; font: 600 20px/1.3 'Segoe UI', Arial, sans-serif; cursor: pointer; list-style: none; }
.reading-category summary::-webkit-details-marker { display: none; }
.reading-category summary:hover { background: #aec7e344; }
.reading-category summary:focus-visible { outline: 2px solid #557395; outline-offset: -3px; }
.category-code { margin-left: auto; color: #626f97; font: 700 14px/1.3 'Segoe UI', Arial, sans-serif; letter-spacing: .5px; }
.reading-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 32px; align-items: center; gap: 0; min-height: 60px; padding: 14px 20px 14px 30px; border-bottom: 1px solid #8294af22; }
.reading-row:hover { background: #aecded66; }
.reading-date { color: #466186; font: 500 12px/1.4 'Segoe UI', Arial, sans-serif; }
.reading-title { color: #253f64; font: 600 16px/1.4 Georgia, serif; }
@media (max-width: 700px) { .starting-message { padding: 18px; font-size: 16px; } .reading-row { grid-template-columns: minmax(0, 1fr) 28px; gap: 5px; padding: 12px 15px; } .reading-title { grid-column: 1; } .reading-abbreviation { grid-column: 2; grid-row: 1 / span 2; } .reading-category summary { font-size: 16px; padding-inline: 15px; } }
footer { margin: 12px 23px 0; min-height: 55px; border-block: 1px solid #8195ae38; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 13px 3px; }
@media (max-width: 700px) { main { padding: 22px 14px 30px; } .archive { grid-template-columns: min(175px, 43%) 1fr; border-radius: 25px; } nav { padding-right: 7px; padding-top: 30px; } .selector { font-size: 12px; letter-spacing: 1.2px; padding-left: 15px; padding-right: 9px; min-height: 60px; } footer { margin-inline: 10px; } footer .eyebrow { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .selector { transition: none; } }



.reading-abbreviation { justify-self: end; color: #626f97; font: 700 12px/1.4 'Segoe UI', Arial, sans-serif; text-decoration: none; letter-spacing: .5px; }