/* Styles for native replacements for the retired Aesop/Bootstrap widgets. */
.novella-quote { max-width:700px; margin:2rem auto; padding:1.5rem; border-left:4px solid currentColor; }
.novella-quote p { margin:0 0 1rem; }
.novella-quote cite { font-size:.85em; }
.novella-align-center { text-align:center; }
.novella-align-right { text-align:right; }
.novella-chapter { max-width:700px; margin:2rem auto; scroll-margin-top:100px; }
.novella-audio,.novella-video { max-width:700px; margin:2rem auto; }
.novella-video-player { display:block; width:100%; height:auto; min-height:200px; aspect-ratio:16/9; border:0; }
.novella-audio audio { width:100%; }
.novella-gallery { max-width:700px; margin:2rem auto 0; }
.novella-gallery figure { margin:0; min-width:0; }
.novella-gallery img { display:block; max-width:100%; height:auto; margin:auto; }
.novella-gallery figcaption { padding:.5rem; font-size:.85em; }
.novella-gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.novella-gallery-slides { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; position:relative; }
.novella-gallery-slides figure { flex:0 0 100%; scroll-snap-align:start; }
.novella-gallery-slides img { max-height:550px; object-fit:contain; }
.novella-gallery-controls { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:1rem auto 2rem; }
.novella-gallery-controls button,.novella-load-more-posts button { padding:.5rem 1rem; cursor:pointer; }
dialog.novella-dialog,dialog.novella-image-dialog { border:0; border-radius:4px; padding:1.5rem; max-width:min(92vw,1000px); max-height:90vh; overflow:auto; }
dialog::backdrop { background:rgba(0,0,0,.8); }
dialog button { cursor:pointer; display:block; margin:0 0 1rem auto; padding:.4rem .8rem; }
.novella-image-dialog img { display:block; max-width:100%; max-height:70vh; object-fit:contain; margin:auto; }
.novella-dialog nav { padding:1rem; }
.novella-dialog nav li { margin:.7rem; }
.novella-nav-toggle:focus-visible,a:focus-visible,button:focus-visible { outline:3px solid #527b91; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .animated { animation:none!important; } }