* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Global focus styles for accessibility */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Selection styling */
::selection {
    background: rgba(92, 74, 58, 0.2);
    color: inherit;
}

body.dark ::selection {
    background: rgba(168, 64, 64, 0.3);
}

/* pages controls (mobile/tablet) */
.pages-controls { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.6rem; }
.view-toggle select { padding:0.35rem 0.5rem; border-radius:6px; border:1px solid rgba(0,0,0,0.06); background:transparent; }

.carousel-pagination { display:flex; gap:0.5rem; align-items:center; }
.carousel-pagination .dot { width:10px; height:10px; border-radius:50%; background: rgba(0,0,0,0.1); border: none; cursor: pointer; transition: transform 280ms cubic-bezier(.2,.9,.2,1), background 200ms, box-shadow 200ms; }
.carousel-pagination .dot:hover { background: rgba(0,0,0,0.15); transform: scale(1.15); }
.carousel-pagination .dot.active { transform: scale(1.35); background: rgba(0,0,0,0.25); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
body.dark .carousel-pagination .dot { background: rgba(255,255,255,0.12); }
body.dark .carousel-pagination .dot:hover { background: rgba(255,255,255,0.2); }
body.dark .carousel-pagination .dot.active { background: rgba(168,64,64,0.6); box-shadow: 0 0 0 3px rgba(168,64,64,0.15); }

/* small sr-only helper */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* active page scaling for silkier feel */
.pages-carousel .page-section.active { transform: translateY(-8px) scale(1.01); box-shadow: 0 18px 36px rgba(0,0,0,0.08); }

/* pages hint dialog (mobile) */
.pages-hint { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12vh; z-index: 9999; width: min(92%, 520px); max-width: 520px; border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,1)); opacity: 0; pointer-events: none; transform-origin: center; transition: transform 360ms cubic-bezier(.2,.9,.2,1), opacity 240ms ease; }
.pages-hint[aria-hidden="false"] { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.pages-hint-inner { padding:0.95rem 1rem; }
.pages-hint h4 { margin:0 0 0.35rem 0; font-size:1rem; }
.pages-hint p { margin:0 0 0.5rem 0; font-size:0.92rem; color: rgba(0,0,0,0.72); }
.pages-hint-actions { display:flex; gap:0.5rem; justify-content:flex-end; }
.small-btn { padding:0.35rem 0.65rem; border-radius:8px; border:1px solid rgba(0,0,0,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3)); cursor:pointer; font-weight:600; transition: all 0.18s ease; }
.small-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6)); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.small-btn:active { transform: translateY(0); }
body.dark .small-btn { background: linear-gradient(180deg, rgba(60,30,30,0.4), rgba(40,20,20,0.3)); border-color: rgba(255,255,255,0.06); color: #f5e9e9; }
body.dark .small-btn:hover { background: linear-gradient(180deg, rgba(80,40,40,0.5), rgba(50,25,25,0.4)); }

/* hide hint on larger screens and reduce for desktop */
@media (min-width:900px) {
    .pages-hint { display:none; }
}


body {
    font-family: 'Georgia', 'Garamond', serif;
    line-height: 1.8;
    transition: background-color 0.5s cubic-bezier(.4,0,.2,1), color 0.4s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.sepia {
    background-color: #f4e8d8;
    background-image: 
        radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(180,160,140,0.1) 0%, transparent 40%);
    color: #5c4a3a;
}

body.dark {
    /* Dark wine red palette with red-tinted black bg */
    background-color: #1a0d0d; /* black with red tint */
    background-image: 
        radial-gradient(ellipse at 10% 10%, rgba(168,64,64,0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 90%, rgba(60,30,30,0.15) 0%, transparent 50%);
    color: #dcd7d6; /* warm off-white for body text */
    --v-red: #a84040; /* darker wine red accent */
    --v-red-weak: rgba(168,64,64,0.10);
    --v-muted: #3b2626; /* muddy muted maroon/panel/border color */
    --panel-bg: rgba(40, 20, 20, 0.68); /* slightly translucent panel with red tint */
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* backlink */
.backlink {
    display:inline-block;
    margin: -1rem 0 1.25rem -0.1rem;
    font-size:0.9rem;
    color: rgba(0,0,0,0.6);
    text-decoration: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.backlink:hover { transform: translateX(-6px); opacity:0.95 }
body.dark .backlink { color: rgba(255,240,240,0.7) }

.theme-toggle {
    position: fixed;
    top: 2rem;
    right: 2rem;
    display: flex;
    gap: 0.5rem;
    z-index: 1000;
}

/* Splash overlay (page load) */
.splash-overlay { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(12,10,8,0.75); z-index: 3000; opacity:0; visibility:hidden; transition: opacity 360ms ease, visibility 360ms; }
.splash-overlay[aria-hidden="false"] { opacity:1; visibility:visible; }
.splash-panel { width: min(92%, 680px); max-width:820px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,244,241,0.96)); color: #231f20; padding: 2.25rem; border-radius: 14px; box-shadow: 0 40px 120px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1) inset; display:flex; flex-direction:column; align-items:flex-start; gap:0.75rem; transform: translateY(0) scale(1); animation: splashEnter 0.5s cubic-bezier(.2,.9,.2,1) both; }
@keyframes splashEnter { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.splash-panel .splash-brand { font-family: 'Georgia', serif; font-size: 28px; font-weight:700; color: #2f2722; }
.splash-panel .splash-sub { color: rgba(0,0,0,0.6); font-size: 0.98rem }
.splash-actions { margin-top: 0.6rem; align-self:flex-end }
.splash-actions .glory-btn { padding: 0.5rem 1rem; border-radius: 10px }

/* when splash is in 'auto-fade' mode it will slowly fade away after a delay */
.splash-overlay.fading { transition: opacity 900ms ease-out, visibility 900ms; opacity:0; visibility:hidden }

@media (max-width:900px) {
    .splash-panel { padding: 1.2rem; border-radius: 10px; }
}

.theme-btn {
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

body.sepia .theme-btn {
    background-color: #d4c4b0;
    color: #5c4a3a;
    border: 1px solid #5c4a3a;
}

body.dark .theme-btn {
    background-color: #262224;
    color: #dcd7d6;
    border: 1px solid #3b2f30;
}

.theme-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.theme-btn:active {
    transform: translateY(0) scale(0.98);
}

.theme-btn.active {
    font-weight: bold;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

body.sepia .theme-btn.active {
    background-color: #5c4a3a;
    color: #f4e8d8;
}

body.dark .theme-btn.active {
    background-color: var(--v-red);
    color: #ffffff;
    border-color: rgba(180,30,30,0.5);
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: normal;
    letter-spacing: 0.02em;
}

/* HERO — focused, clean */
.hero { 
    position: relative;
    margin: 0 -2rem 1.5rem;
    padding: 2.5rem 2rem 2rem;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
}

.hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.5;
}

body.sepia .hero {
    background: linear-gradient(145deg, #e8dcc8 0%, #d4c4a8 100%);
}

body.sepia .hero-backdrop {
    background: radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.4) 0%, transparent 50%);
}

body.dark .hero {
    background: linear-gradient(145deg, #2a1515 0%, #1a0a0a 100%);
}

body.dark .hero-backdrop {
    background: radial-gradient(ellipse at 70% 30%, rgba(168,64,64,0.12) 0%, transparent 50%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 580px;
}

.badge-wip { 
    display: inline-block;
    padding: 0.3rem 0.65rem; 
    border-radius: 4px; 
    font-weight: 600; 
    font-size: 0.7rem; 
    letter-spacing: 0.05em; 
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

body.sepia .badge-wip {
    background: rgba(92,74,58,0.12);
    color: #5c4a3a;
}

body.dark .badge-wip { 
    background: rgba(168,64,64,0.2);
    color: #e8a0a0;
}

.hero-title {
    margin-bottom: 0.75rem;
}

.hero-title .title-main {
    display: block;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 0.2rem;
}

.hero-title .title-sub {
    display: block;
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 400;
    opacity: 0.7;
    font-style: italic;
}

body.sepia .hero-title .title-main { color: #3a2a1a; }
body.sepia .hero-title .title-sub { color: #5c4a3a; }
body.dark .hero-title .title-main { color: #ffe8e6; }
body.dark .hero-title .title-sub { color: #d4a8a8; }

.hero-blurb {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
    opacity: 0.8;
    max-width: 520px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-primary::after, .btn-secondary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn-primary:hover::after, .btn-secondary:hover::after {
    opacity: 1;
}

.btn-icon { 
    font-size: 1em;
    transition: transform 0.2s ease;
}

.btn-primary:hover .btn-icon {
    transform: translateY(2px);
}

body.sepia .btn-primary {
    background: linear-gradient(135deg, #5c4a3a, #4a3a2a);
    color: #f4e8d8;
    box-shadow: 0 4px 12px rgba(92,74,58,0.3);
}

body.sepia .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(92,74,58,0.4);
}

body.dark .btn-primary {
    background: linear-gradient(135deg, #a84040, #8a3030);
    color: #fff;
    box-shadow: 0 4px 12px rgba(168,64,64,0.4);
}

body.dark .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(168,64,64,0.5);
}

body.sepia .btn-secondary {
    background: rgba(255,255,255,0.8);
    color: #5c4a3a;
    border: 1px solid rgba(0,0,0,0.1);
}

body.dark .btn-secondary {
    background: rgba(255,255,255,0.1);
    color: #f4e5e5;
    border: 1px solid rgba(255,255,255,0.15);
}

.btn-secondary:hover { transform: translateY(-2px); }

.hero-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    opacity: 0.75;
}

.meta-item { display: inline; }
.meta-item strong { font-weight: 600; }
.meta-item a { font-weight: 600; text-decoration: none; }
.meta-item a:hover { text-decoration: underline; }

body.sepia .meta-item a { color: #5c4a3a; }
body.dark .meta-item a { color: #d4a8a8; }

.meta-sep { opacity: 0.4; }

.status-wip {
    color: #2a8a4a;
    font-weight: 600;
}

body.dark .status-wip { color: #6ac88a; }

/* Context bar — quick inline info */
.context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

body.sepia .context-bar {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.06);
}

body.dark .context-bar {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

.context-bar p {
    margin: 0;
    opacity: 0.8;
}

.context-bar strong { font-weight: 600; }

@media (max-width: 600px) {
    .context-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* Responsive hero */
@media (max-width: 600px) {
    .hero {
        padding: 2rem 1.25rem 1.5rem;
        margin: 0 -1rem 1rem;
    }
    
    .hero-actions {
        flex-direction: column;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .meta-sep { display: none; }
}

@media (max-width:720px) {
    .panel.thumb { min-width: 90px; max-width: 120px; padding: 0.7rem; font-size: 0.85rem; }
    .carousel-btn { display:none; }
    .carousel-wrap { margin: 0 -0.5rem; padding: 0 0.5rem; }
    .panel-rail { gap: 0.6rem; padding: 0.5rem 0.25rem; }
}

@media (max-width:480px) {
    .panel.thumb { min-width: 75px; max-width: 100px; padding: 0.55rem; font-size: 0.8rem; }
    .panel-rail { gap: 0.45rem; }
}

/* Pages carousel layout: desktop stacked, tablet/mobile horizontal scroll */

/* Desktop: stacked vertical layout (no carousel) */
@media (min-width: 901px) {
    .pages-carousel {
        display: block;
        overflow: visible;
        direction: ltr;
    }
    .pages-carousel .page-section {
        direction: ltr;
        text-align: left;
    }
}

/* Tablet: horizontal RTL scrolling carousel */
@media (max-width: 900px) and (min-width: 481px) {
    .pages-carousel {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1rem 0.5rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        direction: rtl;
        scrollbar-width: thin;
    }

    .pages-carousel:focus { outline: 3px solid rgba(0,0,0,0.06); border-radius: 12px; }

    .pages-carousel .page-section {
        flex: 0 0 72%;
        min-width: 280px;
        max-width: 420px;
        scroll-snap-align: center;
        margin: 0;
        border-radius: 12px;
        padding: 1rem;
        animation: none !important;
        direction: ltr;
        text-align: left;
    }

    .pages-carousel + .narration { margin-top: 1.25rem; }

    .pages-carousel::-webkit-scrollbar { height: 8px; }
    .pages-carousel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 999px; }
    .pages-carousel::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); }
}

/* Mobile: horizontal RTL scrolling carousel - full width cards */
@media (max-width: 480px) {
    .pages-carousel {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.75rem 0.35rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        direction: rtl;
        scrollbar-width: none; /* hide scrollbar on mobile */
    }

    .pages-carousel::-webkit-scrollbar { display: none; }

    .pages-carousel .page-section {
        flex: 0 0 88%;
        min-width: 260px;
        scroll-snap-align: center;
        margin: 0;
        border-radius: 10px;
        padding: 0.85rem;
        animation: none !important;
        direction: ltr;
        text-align: left;
    }

    .pages-carousel + .narration { margin-top: 1rem; }
}

/* when user chooses list mode on small screens, revert layout back to stacked flow */
@media (max-width:900px) {
    .pages-carousel.list-mode {
        display: block;
        overflow: visible;
        padding: 0;
        direction: ltr;
    }
    .pages-carousel.list-mode .page-section {
        flex: none;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 1.2rem 0;
        scroll-snap-align: none;
        animation: kenBurnsZoom 18s ease-in-out infinite;
        animation-delay: calc(var(--i, 0) * 1.2s);
    }
    .pages-controls { display:flex; align-items:center; justify-content:space-between; gap: 0.5rem; flex-wrap: wrap; }
}

/* hide pages-controls on large screens (they're mobile-first) */
@media (min-width: 901px) {
    .pages-controls { display: none; }
}

.hero-cta { display:flex; gap:0.7rem; align-items:center; margin-top:0.6rem }
.glory-btn { border: 1px solid rgba(0,0,0,0.1); padding:0.5rem 0.8rem; border-radius:8px; cursor:pointer; background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4)); color: inherit; font-weight:700; box-shadow: 0 2px 4px rgba(0,0,0,0.04); transition: transform 0.18s cubic-bezier(.2,.9,.2,1), background 0.2s ease, box-shadow 0.2s ease; }
.glory-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7)); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.glory-btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
body.dark .glory-btn { background: linear-gradient(180deg, rgba(60,30,30,0.6), rgba(40,20,20,0.4)); border-color: rgba(255,255,255,0.08); }
body.dark .glory-btn:hover { background: linear-gradient(180deg, rgba(80,40,40,0.7), rgba(50,25,25,0.5)); }
.muted-link { color: rgba(0,0,0,0.45); text-decoration:underline; font-size:0.9rem; transition: color 0.2s ease, text-decoration-color 0.2s ease; text-underline-offset: 3px; }
.muted-link:hover { color: rgba(0,0,0,0.7); }
body.dark .muted-link { color: rgba(255,240,240,0.5); }
body.dark .muted-link:hover { color: rgba(255,240,240,0.8); }

/* General link styling */
a { transition: color 0.2s ease; }
a:hover { opacity: 0.85; }

/* small author metadata and actions */
.author-meta { margin: 0.8rem 0 1.2rem; padding: 0.75rem 0.95rem; border-radius:12px; background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8)); box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03); border: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.author-meta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); }
body.dark .author-meta { background: linear-gradient(135deg, rgba(60,30,30,0.6), rgba(40,20,20,0.5)); box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.03); }
.author-line { font-size:0.95rem; color: rgba(0,0,0,0.75); margin-bottom:0.3rem }
body.dark .author-line { color: rgba(255,240,240,0.85); }
.author-note { font-size:0.92rem; color: rgba(0,0,0,0.6); margin-bottom:0.5rem; line-height: 1.5; }
body.dark .author-note { color: rgba(255,240,240,0.6); }
.author-actions { display:flex; gap:0.5rem; justify-content:flex-end }

/* artist notes (details element) */
details.artist-notes { margin-top:0.75rem; background: linear-gradient(135deg, rgba(0,0,0,0.025), rgba(0,0,0,0.015)); border-radius: 10px; padding:0.6rem 0.75rem; border: 1px solid rgba(0,0,0,0.04); transition: background 0.2s ease, border-color 0.2s ease; }
details.artist-notes:hover { background: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.025)); }
details.artist-notes[open] { background: linear-gradient(135deg, rgba(0,0,0,0.035), rgba(0,0,0,0.02)); border-color: rgba(0,0,0,0.06); }
details.artist-notes summary { cursor:pointer; font-weight:700; font-size:0.92rem; margin-bottom:0.25rem; padding: 0.2rem 0; display: flex; align-items: center; gap: 0.4rem; }
details.artist-notes summary::marker { content: ''; }
details.artist-notes summary::before { content: '▸'; font-size: 0.8em; transition: transform 0.2s ease; }
details.artist-notes[open] summary::before { transform: rotate(90deg); }
details.artist-notes .notes { font-size:0.9rem; color: rgba(0,0,0,0.6); margin-top:0.4rem; line-height:1.5; padding-left: 1rem; border-left: 2px solid rgba(0,0,0,0.06); }
body.dark details.artist-notes { background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(255,255,255,0.015)); border-color: rgba(255,255,255,0.04); }
body.dark details.artist-notes:hover { background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025)); }
body.dark details.artist-notes .notes { color: rgba(255,240,240,0.6); border-left-color: rgba(255,255,255,0.08); }

/* campaign note — guerrilla creative tagline */
.campaign-note { font-size: 0.92rem; font-style: italic; color: rgba(0,0,0,0.55); margin-top:0.6rem; padding: 0.5rem 0.7rem; background: rgba(0,0,0,0.025); border-left: 3px solid rgba(0,0,0,0.08); border-radius: 4px; }
body.dark .campaign-note { color: rgba(255,240,240,0.55); background: rgba(255,255,255,0.025); border-left-color: rgba(255,255,255,0.1); }

/* script view modal / overlay */
.script-overlay { position:fixed; inset:0; background: rgba(10,8,6,0.6); display:flex; align-items:center; justify-content:center; z-index:2000; visibility:hidden; opacity:0; transition: opacity 220ms ease, visibility 220ms; }
.script-overlay.active { visibility:visible; opacity:1; }
.script-panel { width: min(92%,900px); max-height: 86vh; overflow:auto; background: linear-gradient(180deg,#fff,#fbf9f7); padding:1.1rem 1.25rem; border-radius:12px; box-shadow: 0 28px 62px rgba(0,0,0,0.38); border: 1px solid rgba(0,0,0,0.06); }
.script-panel pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; font-size:0.95rem; white-space:pre-wrap; word-wrap:break-word; color: #1a1a1a; line-height:1.6 }
.script-close { position:absolute; right:0.85rem; top:0.75rem; border-radius:6px; padding:0.35rem 0.55rem; }

/* make panels and text pop more visually */
.page-section { transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; border-radius:12px; padding:1.25rem; overflow:hidden; position:relative; }

/* ---- Ken Burns / subtle parallax motion for page sections ---- */
@keyframes kenBurnsPan {
    0%   { background-position: 50% 48%; transform: scale(1); }
    50%  { background-position: 52% 52%; transform: scale(1.012); }
    100% { background-position: 50% 48%; transform: scale(1); }
}
@keyframes kenBurnsZoom {
    0%   { transform: scale(1) translateY(0); }
    50%  { transform: scale(1.018) translateY(-2px); }
    100% { transform: scale(1) translateY(0); }
}

/* apply gentle zoom/pan to page sections — staggered per section */
.page-section { animation: kenBurnsZoom 18s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.2s); }
.page-section:nth-child(odd)  { animation-name: kenBurnsPan; animation-duration: 22s; }
.page-section:nth-child(even) { animation-name: kenBurnsZoom; animation-duration: 20s; }

/* panel thumbnails: slow subtle drift */
@keyframes thumbDrift {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-3px) scale(1.015); }
    100% { transform: translateY(0) scale(1); }
}
.panel.thumb { animation: thumbDrift 14s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.6s); }

/* respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .page-section, .panel.thumb { animation: none !important; }
}
.page-section h3 { font-weight:700; letter-spacing:0.01em; font-size:1.18rem; color:inherit; text-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.page-section, .page-section p, .page-section li, .page-section h3, .page-section .dialogue { text-align: left !important; direction: ltr; unicode-bidi: isolate; }
.page-section p, .page-section li { color: inherit; font-size:0.98rem }

/* Dialogue on its own indented line */
.page-section .dialogue {
    display: block;
    font-style: italic;
    font-size: inherit;
    color: #48392f;
    margin-top: 0.35rem;
    padding-left: 1.2rem;
    border-left: 2px solid rgba(0,0,0,0.08);
    line-height: 1.55;
}

body.dark .page-section .dialogue { color: #f4e5e5; border-left-color: rgba(255,255,255,0.1); }

/* active page highlight */
.pages-carousel .page-section.active { box-shadow: 0 18px 56px rgba(0,0,0,0.18); transform: translateY(-8px) scale(1.02); border-left-color: rgba(0,0,0,0.14) }

/* small responsive polish for author-meta and controls */
@media (max-width:900px) {
    .author-meta { padding: 0.6rem; }
    .author-actions { justify-content:flex-start; flex-wrap: wrap; gap: 0.4rem; }
}

@media (max-width:480px) {
    .author-meta { padding: 0.5rem; margin: 0.6rem 0 1rem; }
    .author-line { font-size: 0.88rem; }
    .author-note { font-size: 0.85rem; }
    .author-contact { font-size: 0.82rem !important; }
    .small-btn { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
}

/* gentle shimmer */
.hero .hero-title { position: relative; overflow: visible }
.hero .hero-title:after { content: ''; position: absolute; left:-60%; top:0; width:40%; height:100%; transform: skewX(-15deg) translateX(-6%); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0)); opacity:0.6; mix-blend-mode: overlay; animation: shimmer 6.2s linear infinite; pointer-events:none }

@keyframes shimmer { 0% { transform: translateX(-120%) skewX(-18deg) } 40% { transform: translateX(100%) skewX(-18deg) } 100% { transform: translateX(260%) skewX(-18deg) } }

/* tiny confetti / celebration particles (pure-CSS) */
.glory-burst { position:absolute; inset:0; pointer-events:none; z-index:0 }
.glory-burst .dot { position:absolute; width:6px; height:6px; border-radius:50%; opacity:0; transform: translateY(0) scale(0.45); }

/* improve existing page-section micro-interaction */
.page-section { will-change: transform, opacity; }
.page-section[data-parallax] { transition: transform 0.35s ease, filter 0.35s ease; }

/* small floating effect for narration box */
.narration { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0% { transform: translateY(0) } 50% { transform: translateY(-6px) } 100% { transform: translateY(0) } }

body.sepia h1 {
    color: #3a2a1a;
    text-shadow: 2px 4px 10px rgba(92, 74, 58, 0.12);
    letter-spacing: 0.02em;
}

body.dark h1 {
    color: #ffe8e6;
    text-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.02);
    letter-spacing: 0.02em;
}

h2 {
    font-size: 1.8rem;
    margin: 2.5rem 0 1rem;
    font-weight: normal;
    letter-spacing: 0.01em;
}

body.sepia h2 {
    color: #6d5a47;
    border-bottom: 2px solid #c4b4a0;
    padding-bottom: 0.5rem;
}

body.dark h2 {
    color: var(--v-red);
    border-bottom: 2px solid rgba(59,51,52,0.35);
    padding-bottom: 0.5rem;
}

h3 {
    font-size: 1.3rem;
    margin: 1.5rem 0 0.8rem;
    font-style: italic;
}

body.sepia h3 {
    color: #7d6a57;
}

body.dark h3 {
    color: #f6b8b8;
}

p {
    margin-bottom: 1rem;
    text-align: justify;
}

strong {
    font-weight: bold;
}

body.sepia strong {
    color: #4a3a2a;
}

body.dark strong {
    color: var(--v-red);
}

em {
    font-style: italic;
}

body.sepia em {
    color: #8d7a67;
}

body.dark em {
    color: #ffb86b;
}

ul {
    margin: 1rem 0 1rem 2rem;
    list-style-type: none;
}

li {
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.5rem;
    display: block;
}

li::before {
    content: "›";
    position: absolute;
    left: 0;
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1.6;
}

body.sepia li::before {
    color: #9d8a77;
}

body.dark li::before {
    color: var(--v-muted);
}

.page-section {
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(.2,.9,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    position: relative;
}

body.sepia .page-section {
    background: linear-gradient(135deg, rgba(212, 196, 176, 0.35), rgba(220,205,185,0.25));
    border-left: 4px solid #9d8a77;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

body.dark .page-section {
    background: linear-gradient(135deg, var(--panel-bg), rgba(35,18,18,0.6));
    border-left: 4px solid rgba(168,64,64,0.4);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.page-section:hover {
    transform: translateX(6px) translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

body.dark .page-section:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,0.25);
    border-left-color: rgba(168,64,64,0.6);
}

/* Base dialogue styling (overridden by .page-section .dialogue for panel content) */
.dialogue {
    font-style: italic;
    display: block;
    padding-left: 1.2rem;
    margin: 0.35rem 0;
    border-left: 2px solid rgba(0,0,0,0.08);
}

body.sepia .dialogue {
    border-left-color: #b4a490;
    color: #6d5a47;
}

body.dark .dialogue {
    border-left-color: rgba(255,255,255,0.1);
    color: #e9dfde;
}

.narration {
    font-style: italic;
    text-align: center;
    margin: 2.5rem 0;
    padding: 1.25rem 1.5rem;
    font-size: 1.1rem;
    border-radius: 12px;
    position: relative;
}

.narration::before, .narration::after {
    content: '"';
    font-size: 2.5rem;
    opacity: 0.15;
    position: absolute;
    font-family: Georgia, serif;
    line-height: 1;
}
.narration::before { top: 0.3rem; left: 0.8rem; }
.narration::after { bottom: 0; right: 0.8rem; transform: rotate(180deg); }

body.sepia .narration {
    color: #7d6a57;
    background: linear-gradient(135deg, rgba(157, 138, 119, 0.15), rgba(170,150,130,0.1));
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

body.dark .narration {
    color: var(--v-red);
    background-color: var(--v-red-weak);
}

hr {
    margin: 3rem 0;
    border: none;
    height: 1px;
    position: relative;
}

hr::after {
    content: '◆';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.6rem;
    padding: 0 1rem;
}

body.sepia hr {
    background: linear-gradient(to right, transparent, #b4a490, transparent);
}
body.sepia hr::after {
    background: #f4e8d8;
    color: #9d8a77;
}

body.dark hr {
    background: linear-gradient(to right, transparent, rgba(168,64,64,0.25), transparent);
}
body.dark hr::after {
    background: #1a0d0d;
    color: rgba(168,64,64,0.5);
}

@media (max-width: 768px) {
    .container {
        padding: 2rem 1rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    h1 {
        font-size: 1.85rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    .theme-toggle {
        top: 0.75rem;
        right: 0.75rem;
        gap: 0.35rem;
    }

    .theme-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 1.5rem 0.75rem;
    }

    h1 {
        font-size: 1.6rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.25rem;
        margin: 1.75rem 0 0.75rem;
    }

    .hero {
        padding: 1rem 0.85rem 1.5rem;
    }

    .hero-cta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .glory-btn {
        font-size: 0.88rem;
        padding: 0.45rem 0.65rem;
    }
}

/* Sticky footer — celebrates work-in-progress with a compact, interactive banner */
:root {
    --sf-height: 84px;
}

/* Footer is anchored in the content flow now — no extra page-bottom padding required */
body { padding-bottom: 0; }

.sticky-footer {
    /* anchored footer inside the flow of .container — visually separate but not overlaying */
    position: static;
    margin-top: 3rem;
    height: auto;
    display: block;
    z-index: 10;
}

.sticky-footer .sf-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.35rem;
    gap: 1rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
    box-shadow: 0 -4px 20px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
    border-radius: 12px 12px 0 0;
}

body.dark .sticky-footer .sf-inner {
    background: linear-gradient(180deg, rgba(20,12,12,0.88), rgba(20,12,12,0.96));
    border-top-color: rgba(255,255,255,0.03);
}

.sticky-footer .sf-left { display:flex; align-items:center; gap:0.9rem; }

.sf-badge {
    background: transparent;
    color: inherit;
    font-weight: 700;
    border-radius: 6px;
    padding: 0.22rem 0.45rem;
    font-family: monospace;
    letter-spacing: 0.04em;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.06);
    opacity: 0.9;
}

.sf-text strong { display:block; font-size:0.95rem; }
.sf-sub { font-size:0.82rem; opacity:0.8; margin-top: 4px; }

.sf-actions { display:flex; align-items:center; gap:0.5rem; }
.sf-btn {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}

body.dark .sf-btn { border-color: rgba(255,255,255,0.06); color: #f5e9e9; }

.sf-toggle {
    background: transparent;
    border: none;
    font-size: 1.05rem;
    opacity: 0.9;
    cursor: pointer;
}

.sf-strip {
    font-size: 0.8rem;
    padding: 0.35rem 1.25rem;
    background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0));
    opacity: 0.95;
    color: #666;
}

body.dark .sf-strip { color: rgba(235,205,205,0.9); background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent); }

/* Collapsed footer */
.sticky-footer.collapsed .sf-inner { transform: translateY(48px); opacity: 0; pointer-events: none; }
.sticky-footer.collapsed { height: 36px; }

/* small screens compact */
@media (max-width:480px) {
    :root { --sf-height: 68px; }
    .sf-sub { display:none; }
    .sf-inner { padding-left: 0.75rem; padding-right: 0.75rem; }
    .sf-badge { padding: 0.3rem 0.45rem; }
}

@keyframes pulse { 0% { transform: scale(0.995); opacity:0.96 } 50% { transform: scale(1.01); opacity:0.99 } 100% { transform: scale(0.995); opacity:0.96 } }

/* Theme transition helper */
body.theme-transitioning * {
    transition-duration: 0.5s !important;
}

/* Subtle page load fade-in */
@keyframes pageLoad {
    from { opacity: 0.85; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.container {
    animation: pageLoad 0.6s cubic-bezier(.2,.9,.2,1) both;
}

/* Active state for interactive elements */
button:active, .small-btn:active, .glory-btn:active {
    transform: scale(0.97) !important;
}

/* Improve code/monospace styling */
code {
    font-family: ui-monospace, SFMono-Regular, 'Roboto Mono', monospace;
    font-size: 0.88em;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    background: rgba(0,0,0,0.05);
}
body.dark code {
    background: rgba(255,255,255,0.08);
}