/* Build86: unified responsive story navigation, legible memoir posters and champagne soundtrack. */
.story-mobile-menu-toggle{display:none}
/* Explicit music CTA: visually separate from the subdued page-turning controls. */
.memoir-controls button.memoir-soundtrack{
 background:var(--champagne,#b89b72)!important;
 color:var(--ink-deep,#1c1a16)!important;
 border:1px solid var(--champagne,#b89b72)!important;
 font-size:10px!important;font-weight:700!important;
 letter-spacing:.08em!important;padding:0 16px!important;
 min-width:72px;height:36px;
 box-shadow:0 2px 14px rgba(184,155,114,.23);
}
.memoir-controls button.memoir-soundtrack:is(:hover,:focus-visible){
 background:#d6bd94!important;border-color:#d6bd94!important;color:#1c1a16!important;
 box-shadow:0 0 0 3px rgba(184,155,114,.26),0 3px 18px rgba(184,155,114,.28);
}
.memoir-controls button.memoir-soundtrack:focus-visible{outline:2px solid #f6f1ea;outline-offset:3px}
@media(max-width:1100px){
 .story-topbar.story-subnav-bar{overflow:visible}
 .story-mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;
   min-height:38px;padding:7px 12px;border:1px solid rgba(184,155,114,.52);
   border-radius:999px;background:rgba(184,155,114,.1);color:inherit;
   font:600 10px/1.2 'Inter',Arial,sans-serif;letter-spacing:.045em;cursor:pointer;flex-shrink:0}
 .story-mobile-menu-toggle:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
 .story-menu-icon{display:flex;flex-direction:column;gap:3px;width:14px}
 .story-menu-icon i{height:1.5px;width:100%;background:currentColor;display:block}
 .story-topbar .story-subnav-left>.story-section-nav{display:none!important;
   position:absolute;left:12px;right:12px;top:calc(100% + 2px);width:auto;
   max-width:none!important;max-height:min(320px,calc(100svh - 76px));
   overflow-y:auto;overflow-x:hidden;flex-direction:column;align-items:stretch;
   gap:0!important;padding:9px 16px!important;background:#f6f1ea;
   border:1px solid rgba(184,155,114,.4);border-radius:9px;
   box-shadow:0 18px 42px rgba(28,26,22,.13);mask-image:none!important}
 .story-topbar.story-menu-open .story-subnav-left>.story-section-nav{display:flex!important}
 .story-topbar .story-section-nav .story-section-link{display:block;padding:13px 8px;
    color:#2b2823!important;opacity:1!important;white-space:normal;font-size:12px!important;
    border-bottom:1px solid rgba(184,155,114,.17)!important}
 .story-topbar .story-section-nav .story-section-link:last-child{border-bottom:0!important}
 .story-topbar .story-section-nav .story-section-link.is-current{color:#8d704d!important;font-weight:700}
 .story-topbar .story-section-nav .story-section-link::before{display:none!important}
 .memoir-page .story-topbar .story-subnav-left>.story-section-nav{background:#1c1a16;
    border-color:rgba(184,155,114,.55);box-shadow:0 18px 42px rgba(0,0,0,.5)}
 .memoir-page .story-topbar .story-section-nav .story-section-link{color:#f0ece4!important;
    border-bottom-color:rgba(184,155,114,.19)!important}
 .memoir-page .story-topbar .story-section-nav .story-section-link.is-current{color:#d6bd94!important}
}
@media(max-width:360px){
 .story-topbar.story-subnav-bar{padding:0 10px}
 .story-mobile-menu-toggle{padding:7px 8px;gap:6px}
 .story-subnav-right{gap:8px}
 .memoir-controls button.memoir-soundtrack{min-width:64px;padding:0 10px!important}
}


/* Build86: the Beyond the Title header uses its own DOM and needs the same discoverable pages menu. */
.btt-mobile-menu-toggle{display:none}
@media(max-width:1100px){
 .site-header .brand-header-inner.btt-unified-header{position:relative;z-index:25;overflow:visible!important}
 .site-header .btt-header-left{gap:10px!important}
 .site-header .btt-mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;
   min-height:38px;padding:7px 12px;border:1px solid rgba(184,155,114,.52);border-radius:999px;
   background:rgba(184,155,114,.1);color:#2b2823;font:600 10px/1.2 'Inter',Arial,sans-serif;
   letter-spacing:.045em;cursor:pointer;white-space:nowrap;flex-shrink:0}
 .site-header .btt-mobile-menu-toggle:focus-visible{outline:2px solid #b89b72;outline-offset:3px}
 .site-header .btt-story-nav{display:none!important}
 .site-header .btt-unified-header.btt-menu-open .btt-story-nav{display:flex!important;position:absolute;
   left:12px;right:12px;top:calc(100% - 1px);width:auto;z-index:35;max-height:min(320px,calc(100svh - 90px));
   overflow-y:auto;overflow-x:hidden;flex-direction:column;align-items:stretch;gap:0!important;
   padding:9px 16px!important;background:#f6f1ea;border:1px solid rgba(184,155,114,.4);
   border-radius:9px;box-shadow:0 18px 42px rgba(28,26,22,.16);white-space:normal}
 .site-header .btt-unified-header .btt-story-nav .btt-story-section-link{display:block!important;
   padding:13px 8px;font:500 12px/1.4 'Inter',Arial,sans-serif!important;
   letter-spacing:.03em!important;opacity:1!important;color:#2b2823!important;
   white-space:normal;border-bottom:1px solid rgba(184,155,114,.17)!important}
 .site-header .btt-unified-header .btt-story-nav .btt-story-section-link:last-child{border-bottom:0!important}
 .site-header .btt-unified-header .btt-story-nav .btt-story-section-link.is-current{color:#8d704d!important;font-weight:700!important}
}
@media(max-width:360px){
 .site-header .btt-mobile-menu-toggle{padding:7px 8px;gap:6px}
}

/* Build86: at mobile/tablet widths display the complete portrait art at a readable width.
   The former max-height:66svh scaled a 2:3 poster down to a thumbnail in short windows.
   Avoid object-fit:cover so embedded titles and original image quotations are never cropped. */
@media(max-width:1100px){
 body.memoir-page{overflow-y:auto;overflow-x:hidden}
 .memoir-book{height:auto;min-height:100svh}
 .memoir-frame{height:auto;min-height:calc(100svh - 64px);grid-template-columns:1fr;overflow:visible;padding-bottom:72px}
 .memoir-frame.is-active{display:block}
 .memoir-art{min-width:0;min-height:0;height:auto;display:flex;align-items:flex-start;justify-content:center;
   padding:clamp(7px,1.4vw,18px);background:#080807}
 .memoir-art img{display:block;width:100%;max-width:860px;max-height:none!important;height:auto;
   object-fit:contain;box-shadow:0 18px 60px rgba(0,0,0,.42)}
 .memoir-copy{height:auto;overflow:visible;padding:34px clamp(20px,4.5vw,48px) 96px}
 .memoir-controls{right:50%;transform:translateX(50%);bottom:12px}
}
@media(max-width:520px){
 .memoir-art{padding:6px}
 .memoir-frame{min-height:calc(100svh - 58px)}
}