/* Shared, persistent site header; scoped to avoid changing reader layouts. */
.site-masthead{position:fixed;top:0;left:0;right:0;width:100%;z-index:20;color:#293d32;background-color:#f6e5cf;background-image:linear-gradient(90deg,rgba(250,240,225,.97) 0%,rgba(250,240,225,.90) 50%,rgba(250,240,225,.40) 100%),url('assets/bach-essences.webp');background-size:cover;background-position:center 54%;border-bottom:1px solid #ded4be;box-shadow:0 3px 12px #293d3210}
.site-masthead .header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;max-width:none;width:100%;margin:0;padding:14px max(5vw,calc((100vw - 1152px)/2));border-bottom:1px solid #daceb8}
.site-masthead .brand{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%;color:#293d32;text-decoration:none;line-height:1.2;flex-shrink:1}
.site-masthead .brand-logo{display:block;width:120px;height:68px;object-fit:contain;border-radius:6px;border:1px solid #dacbb5;flex-shrink:0}
.site-masthead .brand-copy{display:block;min-width:0}.site-masthead .brand-title{display:block;line-height:1.3;color:#922953;overflow-wrap:anywhere}.site-masthead .brand small{display:block;margin-top:5px;line-height:1.35;letter-spacing:.4px;color:#293d32}
.site-masthead .header nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:16px}
.site-masthead .header nav a,.site-masthead .text-button{display:inline-block;background:#fff;border:1px solid #d9cfba;border-radius:5px;padding:7px 12px;color:#293d32;cursor:pointer;text-decoration:none;line-height:1.65}
.site-masthead .header nav a:hover,.site-masthead .text-button:hover{border-color:#71866b}
.site-masthead .library-intro{display:block;max-width:none;width:100%;margin:0;padding:6px max(5vw,calc((100vw - 1152px)/2)) 10px;min-height:0}
.site-masthead .library-intro h1{margin:0;line-height:1.3;letter-spacing:normal;font-weight:normal;color:#3f7d20}.site-masthead .library-intro h1 em{color:#3f7d20}
html{scroll-padding-top:calc(var(--site-header-height,180px) + 16px)}
.reader-layout>aside{top:calc(var(--site-header-height,180px) + 16px);max-height:calc(100dvh - var(--site-header-height,180px) - 32px)}
.reader-layout .book-part,.reader-layout .book-part h3{scroll-margin-top:16px}
@media(min-width:1450px){.site-masthead .header{padding-left:5vw;padding-right:5vw}.site-masthead .library-intro{padding-left:5vw;padding-right:5vw}}
@media(max-width:800px){.reader-layout>aside{position:static;max-height:none}}
@media(max-width:700px){.site-masthead .header{padding-top:9px;padding-bottom:9px;gap:9px 16px}.site-masthead .brand-logo{width:80px;height:45px}.site-masthead .header nav{gap:10px}.site-masthead .library-intro{padding-top:4px;padding-bottom:8px}}
@media(max-width:400px){.site-masthead .brand-logo{width:64px;height:36px}.site-masthead .brand{gap:9px}.site-masthead .brand small{letter-spacing:0}}
@media print{.site-masthead{display:none}html{scroll-padding-top:0}}

/* Reserve the actual header height so content remains visible below it. */
body{padding-top:var(--site-header-height,180px)}
.skip{z-index:30}
@media print{body{padding-top:0}}