/* Shared cover-inspired identity across every route. */
body>header,body>footer{max-width:none;background:#344334;color:#f4f0e4;border-color:#71806a}
body>header{padding:1rem 5%;gap:1rem 2rem;align-items:center}
body>header .wordmark,body>footer .wordmark{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font:1.35rem/1.2 Georgia,serif;letter-spacing:.06em;text-transform:uppercase}
.brand-leaf{width:32px;height:38px;flex:none}
.wordmark .brand-name{font-style:normal}
body>header nav{flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.85rem}
body>footer{padding:1.3rem 5%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.55rem}
body>footer nav{justify-content:center;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0;font-size:.8rem;order:2}
body>footer .wordmark{font-size:1rem;order:0}
body>footer .brand-leaf{width:24px;height:28px}
body>footer p{margin:0;font-size:.8rem;line-height:1.45;order:1}
body>footer .fine{max-width:780px;font-size:.7rem;opacity:.82;order:3}
@media(max-width:650px){body>header{padding:.8rem 5%;gap:.6rem;align-items:center;text-align:center}body>header nav{justify-content:center;font-size:.8rem}body>footer{padding:1.1rem 5%}}

/* Consistent feedback for links, including navigation, credits and card links. */
body a{transition:color .16s ease,background-color .16s ease,box-shadow .16s ease,text-decoration-color .16s ease;text-decoration-thickness:1px}
@media(hover:hover){
 body a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
 body main a:hover{color:#405632}
 body>header a:hover,body>footer a:hover{color:#fff7cf}
 body a.button:hover{background:#425b3e;color:#fff;text-decoration:none;box-shadow:0 3px 10px #1a2c2425}
 body a.outline-link:hover{background:#344334;color:#fff;text-decoration:none}
 body a.collection-tile:hover,body a.book:hover{box-shadow:0 0 0 2px #687951,0 6px 18px #28312718;text-decoration:none}
 body .awareness a:hover{color:#fff7cf}
 body button:not(:disabled):hover,body summary:hover{filter:brightness(.93);text-decoration:underline;text-underline-offset:.2em}
}
body a:focus-visible,body button:focus-visible,body summary:focus-visible{outline:3px solid #9c752e;outline-offset:4px}
body>header a:focus-visible,body>footer a:focus-visible{outline-color:#f5dd92}
@media(prefers-reduced-motion:reduce){body a{transition:none}}

/* Comfortable touch targets and resilient long content on small screens. */
body>header nav a,body>footer nav a{display:inline-flex;align-items:center;min-height:44px}
body>header .wordmark,body>footer .wordmark{min-height:44px}
main{overflow-wrap:break-word}input,textarea,select{font-size:16px}
@media(max-width:650px){body>header nav{column-gap:1rem;row-gap:0}body>footer nav{row-gap:0}}
/* Native disclosure navigation: touch, mouse, and keyboard use the same menu. */
body>header{position:relative;z-index:10}
.guide-menu{position:relative;text-align:left}
.guide-menu summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.4rem;list-style:none}
.guide-menu summary::-webkit-details-marker{display:none}
.guide-menu summary::after{content:'▾';font-size:.8em}
.guide-menu[open] summary::after{content:'▴'}
.guide-menu-links{position:absolute;top:100%;left:0;min-width:280px;width:max-content;max-width:calc(100vw - 32px);max-height:65vh;overflow-y:auto;background:#f8f5ed;color:#26392e;border:1px solid #71806a;box-shadow:0 8px 24px #14221433;padding:.4rem;z-index:20}
body>header .guide-menu-links a{display:flex;padding:.45rem .8rem;min-height:44px;font:1rem/1.3 Georgia,serif;text-align:left;white-space:normal}
body>header .guide-menu-links a:hover,body>header .guide-menu-links a[aria-current=page]{background:#e3e8db;color:#26392e}
body>header .guide-menu-links a:focus-visible{outline:2px solid #876427;outline-offset:-2px}
@media(max-width:650px){body>header .guide-menu{position:static}.guide-menu-links{left:5%;right:5%;width:auto;min-width:0;max-width:none;top:100%;max-height:60vh}}

/* Shared navigation stays aligned when the available width changes. */
body>header nav{font-family:system-ui,sans-serif}
@media(max-width:650px){body>header>nav{width:100%}}
@media(max-width:370px){
 body>header>nav{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem}
 body>header>nav>a,body>header>nav>.guide-menu summary{justify-content:center}
}
@media(max-height:500px){.guide-menu-links{max-height:55vh}}