/* Appearance sits above both the static pages and React islands. */
.theme-control{position:fixed;z-index:100;right:18px;top:14px;display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #93816855;border-radius:4px;background:#100f0deb;color:#e5dccb;box-shadow:0 3px 15px #0005;font:12px/1.2 'Special Elite',monospace}
.theme-control>span{min-width:38px;text-transform:uppercase;letter-spacing:.08em}
.theme-switch{position:relative;display:block;line-height:0}
html[data-theme=light],html[data-theme=light] body{background:#e9e0d0;color:#211b16}
html[data-theme=light] .theme-control{background:#f5ecdbf2;color:#211b16;border-color:#76655077}
html[data-theme=light] .reader-canvas{background:#ded2bd;box-shadow:0 0 60px #62513c33}
/* Keep the original ink/tape framing in both modes, not a photographic negative. */
html[data-theme=light] .poster-frame{filter:none}
html[data-theme=light] .scripture-sheet{background-color:#f4ecdd;filter:drop-shadow(.5cqw .7cqw .8cqw #62513c66)}
html[data-theme=light] .father-copy,html[data-theme=light] .chapter-strip{background-color:#f4ecdd}
html[data-theme=light] .visual-hotspot .passage-engraving{filter:none}
/* Header branding remains ivory against the original black collage. */
html[data-theme=light] .collage-header{color:#eee8de}
html[data-theme=light] .collage-header nav a,html[data-theme=light] .collage-header nav button{color:#eee8de}
html[data-theme=light] .collage-header nav [aria-current=page],html[data-theme=light] .collage-header nav [aria-pressed=true]{color:#fff4e9}
html[data-theme=light] .collage-cross{filter:drop-shadow(1px 1px 0 #080807)}
.collage-header nav{left:26%;right:37%;flex-wrap:nowrap;gap:12px;font-size:clamp(12px,1cqw,16px)}
.collage-header #appearance-control{position:absolute;left:64%;top:49%;transform:translateY(-50%)}
.collage-header .theme-control{position:relative;left:auto;right:auto;top:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#eee8de}
html[data-theme=light] .collage-header .theme-control{background:none;color:#eee8de}
@media(min-width:801px) and (max-width:1100px){
 .collage-header nav{left:24%;right:39%;gap:4px;font-size:11px;letter-spacing:.03em}
 .collage-header .theme-control>span{display:none}
}
html[data-theme=light] .scrap-footer{background:linear-gradient(#ece2d0ed,#ece2d0f5),url('collage-background-clean.png') center/cover;color:#211b16}
html[data-theme=light] .footer-manifesto>p:not(.footer-label),html[data-theme=light] .footer-connect>p,html[data-theme=light] .footer-colophon{color:#514438}
html[data-theme=light] .footer-motto{background:#261d17;color:#f1e8d8}
html[data-theme=light] .footer-label img{filter:brightness(0)}
html[data-theme=light] [data-site-footer]{--fo-background:#f5eddf;--fo-foreground:#211b16}
html[data-theme=light] .scrap-footer .footer-icon{background:#f5eddf;border-color:#76655077}
html[data-theme=light] .footer-icon img{filter:brightness(0)}
html[data-theme=light] .footer-icon-item:hover img,html[data-theme=light] .footer-icon-item:focus-within img{filter:brightness(0) invert(1)}
html[data-theme=light] .scrap-footer .footer-icon:focus-visible{outline-color:#8b261e}
html[data-theme=light] .page-heading h1,html[data-theme=light] .page-heading>p,html[data-theme=light] .shelf-note,html[data-theme=light] .era{color:#211b16}
html[data-theme=light] .shell{background:linear-gradient(#e9e0d0eb,#e9e0d0f5),url('collage-background-clean.png') center/cover fixed}
html[data-theme=light] .site-rail{background:#191611;color:#e5dccb}
@media(max-width:800px){
 .theme-control{right:10px;top:10px;padding:7px 9px;gap:6px}
 .theme-control>span{font-size:10px;min-width:32px}
 .reader-canvas .collage-header{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;background:#090909;margin:0 -14px;width:calc(100% + 28px);padding:18px 14px 14px}
 .collage-header .collage-cross{grid-column:1;grid-row:1}
 .collage-header .collage-brand{grid-column:2;grid-row:1}
 .collage-header #appearance-control{position:relative;left:auto;top:auto;transform:none;grid-column:3;grid-row:1}
 .collage-header .theme-control{padding:0;gap:0}
 .collage-header .theme-control>span{display:none}
 .reader-canvas .collage-header nav{grid-column:1/-1;grid-row:2;position:relative;left:auto;right:auto;top:auto;transform:none;flex-wrap:wrap;justify-content:space-between;font-size:13px;gap:4px 12px}
 html[data-theme=light] .reader-canvas{background:#e9e0d0}
 /* Mobile now exposes the same section-synchronized artwork, not a hidden slot. */
 .reader-canvas .visual-hotspot{display:block;position:relative;left:auto;top:auto;width:100%;height:360px;margin:16px 0;clip-path:polygon(1% 2%,98% 0,100% 97%,2% 100%);overflow:hidden}
 .reader-canvas .visual-hotspot .passage-engraving{object-position:center}
 .reader-canvas .creation-strip{display:flex;position:relative;left:auto;top:auto;width:100%;height:auto;gap:8px;margin:12px 0}
 .reader-canvas .creation-strip button{flex:1;min-height:44px;border:1px solid #8b7a6980;color:#e5dccb;background:#221d18;font:12px 'Special Elite',monospace}
 .reader-canvas .creation-strip button::before{content:attr(data-day)}
 .reader-canvas .creation-strip button.active{background:#92231e;color:#fff}
 .reader-canvas .creation-strip button::after{display:none}
}