/* ══════════════════════════════════════════════════════
   Sweebook — Stylesheet
   Paper texture · Book typography · Pastel palette
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600&display=swap');

:root {
    /* Paper & Background */
    --paper:          #F5F0E8;
    --paper-light:    #FAF7F2;
    --paper-dark:     #E8E0D0;
    --paper-shadow:   #D4CBBA;

    /* Ink & Text */
    --ink:            #2C2416;
    --ink-light:      #5A4D3C;
    --ink-faint:      #8B7F6E;

    /* Book cover pastels */
    --leather:        #8B7355;
    --sage:           #7B9E7B;
    --sage-light:     #A8C5A8;
    --dusty-rose:     #C4929A;
    --dusty-rose-light:#E8C5CA;
    --muted-gold:     #C4A862;
    --slate-blue:     #7B8DAE;
    --plum:           #9B7BA8;

    /* UI */
    --surface:        #FCFAF6;
    --border:         #DFD6C6;
    --border-strong:  #C9BEA9;
    --success:        #7B9E7B;
    --danger:         #C07070;
    --warning:        #C4A862;
    --info:           #7B8DAE;

    /* Elevation */
    --shadow-sm:      0 1px 2px rgba(44,36,22,.06),0 1px 3px rgba(44,36,22,.05);
    --shadow-md:      0 4px 12px -2px rgba(44,36,22,.12),0 2px 5px -2px rgba(44,36,22,.07);
    --shadow-lg:      0 16px 36px -10px rgba(44,36,22,.2),0 4px 10px -4px rgba(44,36,22,.08);

    /* Motion */
    --ease:           cubic-bezier(.4,0,.2,1);
    --ring:           0 0 0 3px rgba(139,115,85,.22);

    /* Spacing */
    --radius:         12px;
    --radius-sm:      8px;
    --radius-lg:      18px;

    /* Typography */
    --font-body:   'Crimson Pro', Georgia, 'Times New Roman', serif;
    --font-heading:'Playfair Display', Georgia, serif;
    --font-ui:     'Source Sans 3', -apple-system, sans-serif;
}

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
    font-family:var(--font-body);color:var(--ink);
    background-color:var(--paper);
    background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    line-height:1.7;-webkit-font-smoothing:antialiased;min-height:100vh;
    display:flex;flex-direction:column;
}
a{color:var(--leather);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--ink)}
img{max-width:100%;display:block}
/* Font Awesome sets `display` on .fas, which beats the UA rule for [hidden]. */
[hidden]{display:none!important}

/* Visible keyboard focus everywhere, without a ring on mouse clicks */
:focus-visible{outline:2px solid var(--leather);outline-offset:2px;border-radius:2px}
.site-header :focus-visible{outline-color:var(--paper-light)}
::selection{background:rgba(139,115,85,.22);color:var(--ink)}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    .book-card:hover,.book-card:hover .book-cover{transform:none}
}

/* Paper overlay */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
    background:radial-gradient(ellipse at 20% 50%,rgba(199,183,153,.06)0%,transparent 50%),
    radial-gradient(ellipse at 80% 20%,rgba(199,183,153,.04)0%,transparent 40%)}

/* ══════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════ */
.site-header{
    background:linear-gradient(135deg,rgba(139,115,85,.96),rgba(97,82,60,.96));
    -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);
    color:var(--paper-light);
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 24px -8px rgba(44,36,22,.35);
    position:sticky;top:0;z-index:1000;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 2rem;max-width:1400px;margin:0 auto}
.site-logo{font-family:var(--font-heading);font-size:1.35rem;font-weight:700;color:var(--paper-light);display:flex;align-items:center;gap:.55rem;letter-spacing:.01em;transition:opacity .2s var(--ease)}
.site-logo:hover{color:var(--paper-light);opacity:.85}
.site-logo i{font-size:1.05rem;opacity:.75}

.site-nav{display:flex;align-items:center;gap:.35rem}
.site-nav a{
    position:relative;font-family:var(--font-ui);font-size:.78rem;font-weight:600;
    color:rgba(250,247,242,.72);letter-spacing:.07em;text-transform:uppercase;
    padding:.45rem .8rem;border-radius:999px;
    display:inline-flex;align-items:center;gap:.45rem;
    transition:color .2s var(--ease),background .2s var(--ease);
}
.site-nav a i{font-size:.85em;opacity:.8}
.site-nav a:hover{color:var(--paper-light);background:rgba(255,255,255,.1)}
.site-nav a.active{color:var(--paper-light);background:rgba(255,255,255,.16)}
.menu-toggle{display:none;background:none;border:none;color:var(--paper-light);font-size:1.3rem;cursor:pointer;padding:.3rem .4rem;border-radius:var(--radius-sm)}

@media(max-width:768px){
    .site-header .container{padding:.7rem 1rem}
    .menu-toggle{display:block}
    .site-nav{
        display:none;position:absolute;top:100%;left:0;right:0;
        background:linear-gradient(135deg,#8B7355,#61523C);
        flex-direction:column;align-items:stretch;padding:.6rem;gap:.2rem;
        box-shadow:0 12px 28px -8px rgba(44,36,22,.45);
    }
    .site-nav.open{display:flex}
    .site-nav a{padding:.7rem .9rem;border-radius:var(--radius-sm)}
}

/* ══════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════ */
/* width:100% is required: as a flex child of <body>, `margin:0 auto` would
   otherwise cancel the stretch and shrink the container to its content. */
.container{width:100%;max-width:1400px;margin:0 auto;padding:0 2rem}
@media(max-width:768px){.container{padding:0 1rem}}

.page-title{
    font-family:var(--font-heading);font-weight:700;color:var(--ink);
    font-size:clamp(1.9rem,1.3rem + 2vw,2.6rem);line-height:1.15;
    margin:2.75rem 0 1.5rem;letter-spacing:-.01em;
}
.page-subtitle{font-family:var(--font-ui);font-size:.98rem;color:var(--ink-faint);margin-top:-.9rem;margin-bottom:2.25rem;max-width:46rem;line-height:1.6}

/* ══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */
.hero{
    position:relative;isolation:isolate;overflow:hidden;
    min-height:min(78vh,660px);
    display:flex;align-items:center;
    margin-bottom:1rem;
}
.hero-photo{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
    animation:heroDrift 26s var(--ease) infinite alternate;
}
@keyframes heroDrift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.2%,-1.6%,0)}}

.hero-scrim{
    position:absolute;inset:0;z-index:-1;
    background:
        linear-gradient(100deg,rgba(24,19,11,.9) 0%,rgba(24,19,11,.72) 42%,rgba(24,19,11,.34) 72%,rgba(24,19,11,.5) 100%),
        linear-gradient(to top,rgba(245,240,232,.96) 0%,rgba(245,240,232,0) 26%);
}

.hero-inner{position:relative;padding-top:4rem;padding-bottom:5rem;max-width:1400px}
.hero-eyebrow{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:var(--font-ui);font-size:.72rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.18em;color:rgba(250,247,242,.82);
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    padding:.4rem .9rem;border-radius:999px;margin-bottom:1.4rem;
}
.hero-title{
    font-family:var(--font-heading);font-weight:700;color:#FCFAF6;
    font-size:clamp(2.3rem,1.4rem + 3.6vw,4.4rem);line-height:1.05;letter-spacing:-.02em;
    max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero-sub{
    font-family:var(--font-ui);font-size:clamp(1rem,.94rem + .3vw,1.18rem);
    color:rgba(250,247,242,.86);line-height:1.65;max-width:44ch;margin-top:1.1rem;
    text-shadow:0 1px 16px rgba(0,0,0,.35);
}

.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.btn-hero{
    background:var(--paper-light);color:var(--ink);
    padding:.85rem 1.6rem;font-size:.92rem;border-radius:999px;
    box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
}
.btn-hero:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.btn-hero-ghost{
    background:rgba(255,255,255,.09);color:#FCFAF6;
    border-color:rgba(255,255,255,.34);
    padding:.85rem 1.6rem;font-size:.92rem;border-radius:999px;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.btn-hero-ghost:hover{background:rgba(255,255,255,.2);color:#fff}

.hero-facts{
    list-style:none;display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.4rem;
    font-family:var(--font-ui);font-size:.82rem;color:rgba(250,247,242,.7);
}
.hero-facts li{display:flex;align-items:center;gap:.5rem}
.hero-facts i{opacity:.75}

.hero-scroll{
    position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);
    width:38px;height:38px;border-radius:50%;z-index:2;
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-light);background:rgba(250,247,242,.75);
    border:1px solid var(--border);
    animation:heroBob 2.4s var(--ease) infinite;
}
.hero-scroll:hover{color:var(--ink);background:var(--paper-light)}
@keyframes heroBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}

@media(max-width:768px){
    .hero{min-height:min(84vh,600px)}
    .hero-inner{padding-top:2.5rem;padding-bottom:4rem}
    .hero-title{max-width:100%}
    .hero-facts{gap:.9rem 1.2rem;margin-top:1.8rem;font-size:.76rem}
    .hero-actions .btn{flex:1 1 auto;justify-content:center}
}

/* ══════════════════════════════════════════════════════
   BOOK CARDS
   ══════════════════════════════════════════════════════ */
.section-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem;
}
.section-head .page-title{margin-bottom:.5rem}
.section-head .page-subtitle{margin:0}
.section-head .filter-bar{margin-bottom:.35rem}
.filter-bar{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.filter-bar label{font-family:var(--font-ui);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}
.filter-bar select{font-family:var(--font-ui);padding:.5rem 1rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.88rem;cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.filter-bar select:hover{border-color:var(--border-strong)}

.books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2.5rem 2rem;margin-bottom:3.5rem}
.book-card{display:block;cursor:pointer;text-align:center;color:inherit;transition:transform .35s var(--ease)}
.book-card:hover{transform:translateY(-8px);color:inherit}

/* ── Flip card: the cover turns to show the summary ── */
.flip-card{width:180px;height:262px;margin:0 auto 1.1rem;perspective:1100px}
.flip-inner{
    position:relative;width:100%;height:100%;
    transform-style:preserve-3d;
    transition:transform .75s var(--ease);
}
@media(hover:hover){
    .flip-card.can-flip:hover .flip-inner,
    .book-card:focus-visible .flip-card.can-flip .flip-inner{transform:rotateY(180deg)}
}
/* Child selector: .book-cover is declared later and would otherwise win
   `position:relative` at equal specificity, stacking the faces instead of
   superimposing them. */
.flip-inner>.flip-face{position:absolute;inset:0;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-inner>.flip-face.back{transform:rotateY(180deg)}

.book-cover{
    position:relative;width:180px;height:262px;border-radius:3px 10px 10px 3px;
    box-shadow:4px 5px 16px -3px rgba(44,36,22,.28),1px 1px 3px rgba(44,36,22,.12),inset -3px 0 8px rgba(0,0,0,.08);
    display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;
    overflow:hidden;transition:box-shadow .35s var(--ease);
}
.book-card:hover .book-cover{
    box-shadow:10px 14px 34px -6px rgba(44,36,22,.38),2px 2px 6px rgba(44,36,22,.16),inset -3px 0 8px rgba(0,0,0,.08);
}

/* Back cover: solid board, summary, and the call to action */
.flip-face.back{
    justify-content:flex-start;padding:1.5rem 1.3rem 1.3rem;
    border-radius:10px 3px 3px 10px;
}
.back-genre{
    flex-shrink:0;font-family:var(--font-ui);font-size:.56rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.85);
    border:1px solid rgba(255,255,255,.4);border-radius:999px;
    padding:.2rem .6rem;margin-bottom:.75rem;
}
.back-summary{
    flex:1;min-height:0;overflow:hidden;padding-bottom:.4rem;
    font-family:var(--font-body);font-size:.82rem;line-height:1.55;
    color:rgba(255,255,255,.92);text-align:left;
    -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
}

.cover-genre{
    position:absolute;top:.85rem;left:1.4rem;z-index:2;
    font-family:var(--font-ui);font-size:.54rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.9);
    background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    padding:.18rem .5rem;border-radius:999px;
}

/* Touch devices never get the hover flip, so the summary is shown inline. */
.book-card .book-summary{display:none}
@media(hover:none){
    .book-card .book-summary{
        display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
        font-family:var(--font-ui);font-size:.78rem;line-height:1.5;
        color:var(--ink-light);margin:.15rem 0 .35rem;text-align:left;
    }
}

.book-card .book-meta-line{
    display:flex;align-items:center;justify-content:center;gap:.4rem;
    font-family:var(--font-ui);font-size:.78rem;color:var(--ink-faint);
}
.book-card .book-genre{color:var(--leather);font-weight:600}
.book-card .book-meta-line .sep{opacity:.5}
/* Spine and page edges */
.book-cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.04));border-radius:4px 0 0 4px;z-index:3}
.book-cover::after{content:'';position:absolute;right:-2px;top:4px;bottom:4px;width:6px;background:repeating-linear-gradient(to bottom,var(--paper-light) 0px,var(--paper-dark) 1px,var(--paper-light) 2px);border-radius:0 3px 3px 0;z-index:3}

.cover-photo{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.cover-veil{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,rgba(18,14,8,.88) 0%,rgba(18,14,8,.34) 45%,rgba(18,14,8,.12) 70%,rgba(18,14,8,.4) 100%);
}

.book-cover i{font-size:2.2rem;color:rgba(255,255,255,.8);margin-bottom:.8rem;position:relative;z-index:2}
.cover-text{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;justify-content:center;width:100%}
.book-cover.has-photo .cover-text{justify-content:flex-end}
.book-cover .cover-title{font-family:var(--font-heading);font-size:1rem;font-weight:600;color:rgba(255,255,255,.97);text-align:center;line-height:1.3;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.book-cover .cover-author{font-family:var(--font-ui);font-size:.65rem;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.12em;margin-top:.55rem;text-shadow:0 1px 6px rgba(0,0,0,.5)}

.book-card .book-info{padding:0 .5rem}
.book-card .book-title{font-family:var(--font-heading);font-size:1.05rem;font-weight:600;color:var(--ink);margin-bottom:.15rem;line-height:1.3}
.book-card .book-subtitle{font-family:var(--font-ui);font-size:.8rem;color:var(--ink-light);margin-bottom:.25rem;line-height:1.4}
.book-card .book-year{font-family:var(--font-ui);font-size:.78rem;color:var(--ink-faint)}

.empty-state{text-align:center;padding:4rem 0;color:var(--ink-faint)}
.empty-state i{font-size:3rem;opacity:.2;margin-bottom:1rem;display:block}
.empty-state p{font-family:var(--font-ui)}

/* ══════════════════════════════════════════════════════
   BOOK PAGE (présentation avant lecture)
   ══════════════════════════════════════════════════════ */
.book-stage{
    position:relative;isolation:isolate;overflow:hidden;
    display:flex;align-items:flex-end;justify-content:center;
    /* Bottom padding keeps the cover's drop shadow inside the clipped stage. */
    padding:3.5rem 1.5rem 2.75rem;
}
.book-stage-bg{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
    transform:scale(1.1);filter:blur(26px) saturate(115%);
}
.book-stage-scrim{
    position:absolute;inset:0;z-index:-1;
    background:
        linear-gradient(to bottom,rgba(24,19,11,.55) 0%,rgba(24,19,11,.4) 45%,rgba(245,240,232,.92) 88%,var(--paper) 100%);
}
.book-stage-inner{position:relative;display:flex;justify-content:center;width:100%}

.book-cover-lg{
    width:260px;height:378px;padding:2rem 1.8rem;
    border-radius:4px 14px 14px 4px;
    box-shadow:10px 18px 48px -10px rgba(20,15,8,.65),2px 2px 6px rgba(20,15,8,.3),inset -4px 0 12px rgba(0,0,0,.1);
}
.book-cover-lg .cover-title{font-size:1.3rem}
.book-cover-lg .cover-author{font-size:.72rem;margin-top:.7rem}
.book-cover-lg i{font-size:3rem}
.book-cover-lg::before{width:18px}

.book-page{max-width:720px;text-align:center;padding-bottom:4rem}
.book-page-genre{
    font-family:var(--font-ui);font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.16em;color:var(--leather);
    margin-top:2.25rem;
}
.book-page-title{
    font-family:var(--font-heading);font-weight:700;color:var(--ink);
    font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem);line-height:1.1;letter-spacing:-.015em;
    margin-top:.5rem;
}
.book-page-subtitle{
    font-family:var(--font-heading);font-style:italic;font-size:1.15rem;
    color:var(--ink-light);margin-top:.5rem;
}
.book-page-byline{
    font-family:var(--font-ui);font-size:.85rem;color:var(--ink-faint);
    margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
}
.book-page-byline .sep{opacity:.45}

.book-page-summary{
    font-size:1.12rem;line-height:1.8;color:var(--ink-light);text-align:left;
    margin:2.25rem auto 0;max-width:38rem;
    padding-top:2rem;border-top:1px solid var(--border);
}

.book-page-actions{
    display:flex;flex-direction:column;align-items:center;gap:.9rem;
    margin-top:2.5rem;
}
.btn-read{padding:.9rem 2rem;font-size:.95rem;border-radius:999px}
.book-page-note{font-family:var(--font-ui);font-size:.78rem;color:var(--ink-faint)}

.book-page-toc{margin-top:3rem;text-align:left;max-width:38rem;margin-left:auto;margin-right:auto}
.book-page-toc h2{
    font-family:var(--font-ui);font-size:.74rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;color:var(--ink-faint);margin-bottom:.9rem;
}
.book-page-toc ol{list-style:none;counter-reset:toc;border-top:1px solid var(--border)}
.book-page-toc li{counter-increment:toc;border-bottom:1px solid var(--border)}
.book-page-toc a{
    display:flex;align-items:baseline;gap:.9rem;padding:.85rem .2rem;
    color:var(--ink);transition:background .15s var(--ease),padding-left .15s var(--ease);
}
.book-page-toc a::before{
    content:counter(toc,decimal-leading-zero);
    font-family:var(--font-ui);font-size:.72rem;font-weight:600;color:var(--ink-faint);
    min-width:1.6rem;
}
.book-page-toc a:hover{background:var(--paper-light);padding-left:.6rem}
.book-page-toc .toc-title{flex:1;font-family:var(--font-heading);font-size:1.02rem}
.book-page-toc .toc-wc{font-family:var(--font-ui);font-size:.74rem;color:var(--ink-faint);white-space:nowrap}

.book-page-back{margin-top:3rem;font-family:var(--font-ui);font-size:.85rem}

@media(max-width:768px){
    .book-stage{padding:2rem 1rem 2rem}
    .book-cover-lg{width:200px;height:291px;padding:1.5rem 1.3rem}
    .book-cover-lg .cover-title{font-size:1.05rem}
    .book-page-summary{font-size:1.02rem;margin-top:1.8rem;padding-top:1.5rem}
    .book-page-toc a{padding:.75rem .2rem}
}

/* ══════════════════════════════════════════════════════
   READER
   ══════════════════════════════════════════════════════ */
/* The reader owns the viewport: the book never scrolls, it turns. */
body.reader-layout{height:100vh;height:100dvh;overflow:hidden}
.reader-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}

.reader-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;
    padding:.55rem 1.5rem;flex-shrink:0;
    background:var(--surface);border-bottom:1px solid var(--border);
}
.reader-toolbar .book-meta{font-family:var(--font-ui);font-size:.85rem;color:var(--ink-faint);min-width:0}
.reader-toolbar .book-meta strong{color:var(--ink);font-weight:600}
.reader-controls{display:flex;align-items:center;gap:.7rem}
.reader-controls button,.reader-controls select{
    font-family:var(--font-ui);font-size:.8rem;padding:.35rem .7rem;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    background:var(--paper-light);color:var(--ink);cursor:pointer;transition:all .18s var(--ease);
}
.reader-controls button:hover{background:var(--paper-dark);border-color:var(--ink-faint)}
.reader-fs-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0!important}
.font-size-controls{display:flex;align-items:center;gap:.3rem}
.font-size-controls span{font-family:var(--font-ui);font-size:.78rem;color:var(--ink-faint);min-width:2.6rem;text-align:center}

.reader-body{
    flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;
    padding:2rem 1.5rem;position:relative;overflow:hidden;touch-action:pan-y;
}

/* ── The open book ──────────────────────────────────── */
.reader-book{
    display:flex;align-items:stretch;width:100%;max-width:780px;min-height:0;
    border-radius:8px;
    box-shadow:0 24px 60px -18px rgba(44,36,22,.32),0 3px 10px rgba(44,36,22,.08);
    transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.reader-book.spread{max-width:1280px}

.reader-page{
    flex:1 1 0;min-width:0;min-height:0;
    display:flex;flex-direction:column;
    background:var(--paper-light);
    padding:3rem 3.25rem 1.2rem;
    position:relative;overflow:hidden;
    background-image:
        linear-gradient(to bottom,transparent 97%,rgba(44,36,22,.02) 100%),
        url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* Single-page mode */
.reader-book:not(.spread) .page-left{border-radius:8px}
.reader-book:not(.spread) .page-right{display:none}

/* Two-page spread: the gutter is a shadow, not a gap */
.reader-book.spread .page-left{
    border-radius:8px 0 0 8px;
    box-shadow:inset -22px 0 28px -22px rgba(44,36,22,.35);
}
.reader-book.spread .page-right{
    border-radius:0 8px 8px 0;
    box-shadow:inset 22px 0 28px -22px rgba(44,36,22,.35);
    border-left:1px solid rgba(44,36,22,.09);
}
.reader-book.spread .page-left{padding-right:2.6rem}
.reader-book.spread .page-right{padding-left:2.6rem}

.reader-page .chapter-title{
    flex-shrink:0;font-family:var(--font-heading);font-size:1.7rem;font-weight:700;
    color:var(--ink);margin-bottom:1.6rem;text-align:center;letter-spacing:.02em;line-height:1.25;
}
.reader-page .chapter-title::after{content:'❧';display:block;margin-top:.7rem;font-size:1.1rem;color:var(--ink-faint);opacity:.4}

.reader-page .page-content{
    flex:1;min-height:0;overflow:hidden;
    font-size:inherit;line-height:1.85;color:var(--ink);text-align:justify;hyphens:auto;
}
.reader-page .page-content p{margin-bottom:1.2em;text-indent:1.5em}
.reader-page .page-content p:first-child{text-indent:0}
/* No trailing margin: it would eat a line of measured room on every page. */
.reader-page .page-content>*:last-child{margin-bottom:0}
.reader-page .page-content blockquote{margin:1.2em 1.5em;padding-left:1rem;border-left:2px solid var(--paper-shadow);font-style:italic;color:var(--ink-light);text-indent:0}
.reader-page .page-content h2,.reader-page .page-content h3{font-family:var(--font-heading);text-indent:0;margin:1.2em 0 .5em;line-height:1.3}
.reader-page .page-content h2{font-size:1.3em}
.reader-page .page-content h3{font-size:1.12em}
.reader-page .page-content ul,.reader-page .page-content ol{margin:0 0 1.2em 1.6em;text-indent:0}
.reader-page .page-content li{margin-bottom:.3em}
.reader-page .page-content hr{border:none;border-top:1px solid var(--paper-shadow);margin:1.5em auto;width:40%}

.page-footer{
    flex-shrink:0;display:flex;justify-content:space-between;gap:1rem;
    margin-top:.9rem;padding-top:.7rem;
    border-top:1px solid rgba(44,36,22,.07);
    font-family:var(--font-ui);font-size:.72rem;color:var(--ink-faint);
}
.page-footer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loading-placeholder{margin:auto;text-align:center;padding:3rem;color:var(--ink-faint)}

/* ── Page turn ──────────────────────────────────────── */
.reader-book.turning-left{animation:turnLeft .28s var(--ease) forwards}
.reader-book.turning-right{animation:turnRight .28s var(--ease) forwards}
@keyframes turnLeft{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-36px);opacity:0}}
@keyframes turnRight{0%{transform:translateX(0);opacity:1}100%{transform:translateX(36px);opacity:0}}
.reader-book.entering-left{animation:enterLeft .3s var(--ease) forwards}
.reader-book.entering-right{animation:enterRight .3s var(--ease) forwards}
@keyframes enterLeft{0%{transform:translateX(36px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes enterRight{0%{transform:translateX(-36px);opacity:0}100%{transform:translateX(0);opacity:1}}

/* ── Side navigation ────────────────────────────────── */
.reader-nav{
    position:fixed;top:50%;transform:translateY(-50%);
    width:46px;height:46px;border-radius:50%;
    background:var(--surface);border:1px solid var(--border);color:var(--ink-faint);
    font-size:1.05rem;cursor:pointer;z-index:100;
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-sm);transition:all .18s var(--ease);
}
.reader-nav:hover:not(:disabled){background:var(--paper-dark);color:var(--ink);box-shadow:var(--shadow-md);transform:translateY(-50%) scale(1.06)}
.reader-nav.prev{left:1.2rem}
.reader-nav.next{right:1.2rem}
.reader-nav:disabled{opacity:.25;cursor:default}

.reader-wrapper .copyright-footer{flex-shrink:0;padding:.85rem 2rem;font-size:.72rem;line-height:1.6}

/* ── Immersive / fullscreen ─────────────────────────── */
body.reader-immersive .reader-site-header,
body.reader-immersive .reader-toolbar,
body.reader-immersive .reader-wrapper .copyright-footer{display:none}
/* Desktop only — on mobile the page already goes edge to edge. */
@media(min-width:769px){body.reader-immersive .reader-body{padding:1.5rem}}

/* Short viewports: give the text back the room the margins were taking */
@media(max-height:780px){
    .reader-body{padding:1.25rem}
    .reader-page{padding:2rem 2.5rem 1rem}
    .reader-page .chapter-title{font-size:1.45rem;margin-bottom:1.1rem}
    .reader-book.spread .page-left{padding-right:2rem}
    .reader-book.spread .page-right{padding-left:2rem}
}
@media(max-height:560px){
    .reader-body{padding:.6rem}
    .reader-page{padding:1.1rem 1.5rem .7rem}
    .reader-page .chapter-title{font-size:1.2rem;margin-bottom:.7rem}
    .reader-page .chapter-title::after{display:none}
    .reader-wrapper .copyright-footer{display:none}
}

/* Mobile bar — hidden on desktop */
.reader-mobile-bar{display:none}

@media(max-width:1023px){
    .reader-book{max-width:720px}
}

@media(max-width:768px){
    .reader-site-header{display:none}
    .reader-toolbar{padding:.4rem .7rem;gap:.4rem}
    .reader-toolbar .book-meta{font-size:.78rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .reader-controls{gap:.4rem}
    .reader-controls select{max-width:8rem}
    .reader-wrapper .copyright-footer{display:none}
    .reader-body{padding:0}

    .reader-book{max-width:100%;border-radius:0;box-shadow:none}
    .reader-book:not(.spread) .page-left{border-radius:0}
    .reader-page{padding:1.4rem 1.2rem .4rem}
    .reader-page .chapter-title{font-size:1.4rem;margin-bottom:1.1rem}
    .page-footer{margin-top:.6rem;padding-top:.5rem;padding-bottom:.4rem}

    .reader-nav{display:none}
    .hide-mobile{display:none}

    /* ── Fixed bottom bar ───────────────────────────── */
    .reader-mobile-bar{
        display:flex;align-items:stretch;gap:.1rem;flex-shrink:0;
        padding:.25rem .35rem;
        padding-bottom:calc(.25rem + env(safe-area-inset-bottom,0px));
        background:var(--surface);border-top:1px solid var(--border);
        box-shadow:0 -2px 14px rgba(44,36,22,.07);
    }
    .rmb-btn{
        flex:0 0 auto;min-width:54px;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
        padding:.35rem .25rem;border:none;background:none;border-radius:var(--radius-sm);
        font-family:var(--font-ui);font-size:.58rem;font-weight:500;letter-spacing:.02em;
        color:var(--ink-light);text-decoration:none;cursor:pointer;
        transition:background .15s var(--ease),color .15s var(--ease);
        -webkit-tap-highlight-color:transparent;
    }
    .rmb-btn i{font-size:1.05rem}
    .rmb-btn:active{background:var(--paper-dark);color:var(--ink)}
    .rmb-btn:disabled{opacity:.28;cursor:default}

    .rmb-progress{
        flex:1;min-width:0;display:flex;flex-direction:column;
        align-items:center;justify-content:center;gap:.3rem;padding:0 .4rem;
    }
    .rmb-progress span{font-family:var(--font-ui);font-size:.66rem;color:var(--ink-faint);white-space:nowrap}
    .rmb-bar{width:100%;max-width:140px;height:3px;background:var(--paper-dark);border-radius:2px;overflow:hidden}
    .rmb-bar-fill{height:100%;width:0;background:var(--leather);border-radius:2px;transition:width .3s var(--ease)}
}

@media(max-width:380px){
    .rmb-btn span{display:none}
    .rmb-btn{min-width:44px}
}

/* ══════════════════════════════════════════════════════
   COPYRIGHT FOOTER
   ══════════════════════════════════════════════════════ */
.copyright-footer{background:var(--ink);color:rgba(250,247,242,.5);padding:2rem;text-align:center;font-family:var(--font-ui);font-size:.8rem;line-height:1.8;margin-top:auto}
.copyright-footer strong{color:rgba(250,247,242,.8)}
.copyright-footer .legal{font-size:.72rem;max-width:700px;margin:.5rem auto 0}

/* ══════════════════════════════════════════════════════
   ADMIN LAYOUT
   ══════════════════════════════════════════════════════ */
.admin-layout{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 52px)}
@media(max-width:900px){
    .admin-layout{grid-template-columns:1fr}
    .admin-sidebar{display:none}
    .admin-sidebar.open{display:block;position:fixed;left:0;top:52px;bottom:0;width:280px;z-index:999}
}

.admin-sidebar{background:var(--paper-light);border-right:1px solid var(--border);padding:1.5rem 0;overflow-y:auto}
.admin-sidebar h3{font-family:var(--font-ui);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);padding:0 1.2rem;margin-bottom:.5rem}

.sidebar-book{padding:.6rem 1.2rem;cursor:pointer;font-family:var(--font-ui);font-size:.88rem;transition:background .15s;border-left:3px solid transparent;display:flex;align-items:center;gap:.5rem}
.sidebar-book:hover{background:var(--paper-dark)}
.sidebar-book.active{background:var(--paper-dark);border-left-color:var(--leather);font-weight:600}
.sidebar-book-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-year{color:var(--ink-faint);font-size:.72rem}

.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.status-dot.draft{background:var(--warning)}
.status-dot.published{background:var(--success)}
.status-dot.archived{background:var(--ink-faint)}

.sidebar-chapter{padding:.4rem 1.2rem .4rem 2.5rem;cursor:pointer;font-family:var(--font-ui);font-size:.82rem;color:var(--ink-light);transition:background .15s;display:flex;align-items:center;gap:.4rem}
.sidebar-chapter:hover{background:var(--paper-dark)}
.sidebar-chapter.active{background:var(--paper);font-weight:600;color:var(--ink)}
.sidebar-chapter-icon{font-size:.7rem;opacity:.4}
.sidebar-chapter-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-wc{color:var(--ink-faint);margin-left:auto;font-size:.72rem;flex-shrink:0}

.sidebar-actions{padding:.8rem 1.2rem;border-top:1px solid var(--border);margin-top:.5rem}
.sidebar-bottom{padding:1rem 1.2rem;border-top:1px solid var(--border);margin-top:1rem}

/* ── Admin Main ────────────────────────────────────── */
.admin-main{padding:2rem;overflow-y:auto}

.welcome-box{text-align:center;padding:3rem}
.welcome-icon{font-size:3rem;color:var(--leather);opacity:.3;margin-bottom:1.5rem;display:block}
.welcome-box h2{font-family:var(--font-heading);color:var(--ink);margin-bottom:.5rem}
.welcome-box p{font-family:var(--font-ui);color:var(--ink-faint)}

/* ── Editor ────────────────────────────────────────── */
.editor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:.8rem}
.chapter-input{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;border:none;background:transparent;color:var(--ink);outline:none;border-bottom:2px solid transparent;padding-bottom:.2rem;flex:1;min-width:200px}
.chapter-input:focus{border-bottom-color:var(--leather)}

.save-status{font-family:var(--font-ui);font-size:.8rem;color:var(--ink-faint);display:flex;align-items:center;gap:.4rem}
.save-status.saving{color:var(--warning)}
.save-status.saved{color:var(--success)}
.save-status.error{color:var(--danger)}

.editor-toolbar{display:flex;gap:.3rem;padding:.5rem;background:var(--paper-light);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;flex-wrap:wrap;align-items:center}
.editor-toolbar button{font-family:var(--font-ui);font-size:.8rem;padding:.35rem .6rem;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--ink-light);cursor:pointer;transition:all .15s}
.editor-toolbar button:hover{background:var(--paper-dark);color:var(--ink)}
.toolbar-sep{width:1px;height:1.2rem;background:var(--border);margin:0 .2rem}

.editor-textarea{
    width:100%;min-height:500px;padding:2rem;font-family:var(--font-body);font-size:1.05rem;line-height:1.8;
    color:var(--ink);border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);
    background:var(--paper-light);resize:vertical;outline:none;transition:border-color .2s;
    background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
}
.editor-textarea:focus{border-color:var(--leather)}

.word-count-bar{display:flex;justify-content:space-between;padding:.5rem 0;font-family:var(--font-ui);font-size:.78rem;color:var(--ink-faint)}

/* ── Versions ──────────────────────────────────────── */
.versions-panel{background:var(--paper-light);border:1px solid var(--border);border-radius:var(--radius);margin-top:1.5rem;overflow:hidden}
.versions-header{padding:.8rem 1rem;background:var(--paper-dark);font-family:var(--font-ui);font-size:.85rem;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.versions-list{max-height:300px;overflow-y:auto}
.versions-empty{padding:1rem;color:var(--ink-faint);font-size:.85rem;text-align:center;font-family:var(--font-ui)}
.version-item{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid var(--paper-dark);font-family:var(--font-ui);font-size:.82rem;transition:background .15s}
.version-item:hover{background:var(--paper)}
.version-item .v-time{color:var(--ink-faint);font-size:.75rem}
.version-item .v-type{font-size:.7rem;padding:.15rem .5rem;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.v-type.edit{background:var(--sage-light);color:#3D5E3D}
.v-type.delete{background:var(--dusty-rose-light);color:#7A3D45}
.v-type.restore{background:#C5D5E8;color:#3D5075}

/* ══════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════ */
.btn{font-family:var(--font-ui);font-size:.85rem;font-weight:600;letter-spacing:.01em;padding:.58rem 1.2rem;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background .18s var(--ease),box-shadow .18s var(--ease),transform .12s var(--ease),color .18s var(--ease);display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-primary{background:var(--leather);color:var(--paper-light);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#7A644A;color:var(--paper-light);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--border)}
.btn-secondary:hover{background:var(--paper-dark);border-color:var(--border-strong)}
.btn-success{background:var(--sage);color:#fff}
.btn-success:hover{background:#6A8D6A}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#A85858}
.btn-sm{font-size:.78rem;padding:.3rem .7rem}
.btn-ghost{background:transparent;color:var(--ink-light)}
.btn-ghost:hover{background:var(--paper-dark)}
.btn-full{width:100%}
.flex-1{flex:1}

/* ══════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════ */
.form-group{margin-bottom:1.2rem}
.form-group label{font-family:var(--font-ui);font-size:.82rem;font-weight:600;color:var(--ink-light);display:block;margin-bottom:.3rem}
.form-control{width:100%;padding:.6rem .85rem;font-family:var(--font-ui);font-size:.9rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);outline:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.form-control:hover{border-color:var(--border-strong)}
.form-control:focus{border-color:var(--leather);box-shadow:var(--ring)}
.form-control::placeholder{color:var(--ink-faint);opacity:.7}

/* ══════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(44,36,22,.5);backdrop-filter:blur(4px);z-index:5000;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--paper-light);border-radius:var(--radius-lg);padding:2rem;max-width:500px;width:100%;box-shadow:0 20px 60px rgba(44,36,22,.2);transform:translateY(20px);transition:transform .25s;max-height:88vh;overflow-y:auto}
.modal>h2{font-family:var(--font-heading);font-size:1.4rem;margin-bottom:1.4rem;display:flex;align-items:center;gap:.6rem}
.modal>h2 i{font-size:1rem;color:var(--ink-faint)}
.modal-overlay.open .modal{transform:translateY(0)}
.modal h2{font-family:var(--font-heading);font-size:1.3rem;margin-bottom:1.2rem}
.modal-msg{font-family:var(--font-ui);font-size:.95rem;line-height:1.6;color:var(--ink)}
.modal-wide{max-width:760px;width:100%;display:flex;flex-direction:column;max-height:85vh;overflow-y:auto}
.modal-version-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.version-preview-body{
    flex:1;overflow-y:auto;padding:1.5rem 2rem;
    background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-sm);
    font-family:var(--font-body);font-size:1rem;line-height:1.85;color:var(--ink);
    min-height:200px;margin-bottom:1rem;
}
.version-preview-body p{margin-bottom:1.1em;text-indent:1.5em}
.version-preview-body p:first-child{text-indent:0}
.version-preview-body h2,.version-preview-body h3{font-family:var(--font-heading);margin:1.2em 0 .5em}
.version-preview-body blockquote{border-left:3px solid var(--border);padding-left:1rem;color:var(--ink-light);margin:1em 0}
@media(max-width:768px){.modal-wide{max-height:92vh}.version-preview-body{padding:1rem}}
/* Sticky so the save button stays reachable in a long, scrolling modal. */
.modal-actions{
    display:flex;gap:.8rem;justify-content:flex-end;
    position:sticky;bottom:-2rem;z-index:2;
    margin:1.5rem -2rem -2rem;padding:1rem 2rem 1.4rem;
    background:var(--paper-light);border-top:1px solid var(--border);
}

/* ══════════════════════════════════════════════════════
   STATS
   ══════════════════════════════════════════════════════ */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;margin-bottom:2rem}
.stat-card{background:var(--paper-light);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center}
.stat-card .stat-value{font-family:var(--font-heading);font-size:2rem;font-weight:700;color:var(--ink)}
.stat-card .stat-label{font-family:var(--font-ui);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-top:.3rem}
.charts-row{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;margin-bottom:2rem}
@media(max-width:900px){.charts-row{grid-template-columns:1fr}}
.chart-card{background:var(--paper-light);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.chart-card h3{font-family:var(--font-ui);font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:1rem}
.chart-container{height:280px}

/* ══════════════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════════════ */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.login-box{background:var(--paper-light);border-radius:var(--radius-lg);padding:3rem;max-width:400px;width:100%;box-shadow:0 10px 40px rgba(44,36,22,.1);text-align:center}
.login-box h1{font-family:var(--font-heading);font-size:1.5rem;margin-bottom:.3rem}
.login-box p{font-family:var(--font-ui);font-size:.85rem;color:var(--ink-faint);margin-bottom:1.5rem}
.login-box .form-group{text-align:left}
.login-error{background:var(--dusty-rose-light);color:#7A3D45;padding:.6rem;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:1rem;font-family:var(--font-ui)}

/* ══════════════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════════════ */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9000;display:flex;flex-direction:column;gap:.5rem}
.toast{font-family:var(--font-ui);font-size:.85rem;padding:.7rem 1.2rem;border-radius:var(--radius-sm);background:var(--ink);color:var(--paper-light);box-shadow:0 4px 15px rgba(0,0,0,.15);animation:toastIn .3s ease;max-width:350px}
.toast.success{background:var(--sage)}
.toast.error{background:var(--danger)}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ══════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════ */
.hidden{display:none!important}
.flex{display:flex}.gap-1{gap:.5rem}.gap-2{gap:1rem}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.text-sm{font-size:.85rem}.text-muted{color:var(--ink-faint)}.text-danger{color:var(--danger)!important}
.font-ui{font-family:var(--font-ui)}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--paper-shadow);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}

.color-options{display:flex;gap:.5rem;flex-wrap:wrap}
.color-option{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .15s}
.color-option:hover{transform:scale(1.15)}
.color-option.active{border-color:var(--ink)}

/* ══════════════════════════════════════════════════════
   Author profile — public page
   ══════════════════════════════════════════════════════ */
.author-banner{position:relative;height:clamp(180px,26vw,300px);overflow:hidden}
.author-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.author-banner-scrim{
    position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(24,19,11,.42) 0%,rgba(24,19,11,.2) 40%,var(--paper) 100%);
}

.author-hero{display:flex;align-items:center;gap:2rem;margin:-4.5rem 0 2rem;position:relative;z-index:1;flex-wrap:wrap}
.author-hero .author-avatar{border:5px solid var(--paper);box-shadow:0 12px 30px -8px rgba(44,36,22,.4)}
.author-avatar{
    width:120px;height:120px;flex-shrink:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:4px 4px 18px rgba(44,36,22,.18),inset -2px -2px 8px rgba(0,0,0,.1);
}
.author-avatar i{font-size:2.8rem;color:rgba(255,255,255,.85)}
.author-identity{flex:1;min-width:240px}
.author-name{font-family:var(--font-heading);font-size:2.4rem;font-weight:700;color:var(--ink);line-height:1.15;letter-spacing:.01em}
.author-tagline{font-family:var(--font-ui);font-size:1rem;color:var(--ink-faint);margin-top:.4rem;letter-spacing:.02em}
.author-links{display:flex;gap:1.2rem;margin-top:1rem;flex-wrap:wrap}
.author-links a{font-family:var(--font-ui);font-size:.85rem;font-weight:500;color:var(--leather);display:inline-flex;align-items:center;gap:.4rem;text-transform:uppercase;letter-spacing:.05em}
.author-links a:hover{color:var(--ink)}

.author-bio{
    max-width:44rem;font-size:1.08rem;line-height:1.85;color:var(--ink-light);
    padding:1.8rem 0 .5rem;border-top:1px solid var(--border);
}
.author-bio p{margin-bottom:1rem}
.author-bio h2,.author-bio h3{font-family:var(--font-heading);color:var(--ink);margin:1.5rem 0 .6rem}
.author-bio h2{font-size:1.4rem}
.author-bio h3{font-size:1.15rem}
.author-bio blockquote{border-left:3px solid var(--paper-shadow);padding-left:1.2rem;font-style:italic;color:var(--ink-faint);margin:1.2rem 0}
.author-bio ul,.author-bio ol{margin:0 0 1rem 1.4rem}
.author-bio li{margin-bottom:.35rem}

.author-books{margin-top:3rem}
.section-title{
    font-family:var(--font-heading);font-size:1.5rem;font-weight:600;color:var(--ink);
    display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;
    padding-top:1.8rem;border-top:1px solid var(--border);
}
.section-title i{font-size:1.1rem;color:var(--ink-faint)}
.section-count{
    font-family:var(--font-ui);font-size:.75rem;font-weight:600;color:var(--ink-faint);
    background:var(--paper-dark);border-radius:999px;padding:.1rem .6rem;letter-spacing:.05em;
}

@media(max-width:768px){
    .author-hero{gap:1.2rem;margin:2rem 0 1.5rem}
    .author-avatar{width:88px;height:88px}
    .author-avatar i{font-size:2rem}
    .author-name{font-size:1.8rem}
}

/* ══════════════════════════════════════════════════════
   Author profile — admin editor
   ══════════════════════════════════════════════════════ */
.profile-admin{max-width:1100px}
.profile-editor{display:grid;grid-template-columns:1fr 280px;gap:2.5rem;align-items:start}
.profile-form{min-width:0}
.form-hint{display:block;font-family:var(--font-ui);font-size:.76rem;color:var(--ink-faint);margin-top:.3rem;line-height:1.5}
.form-sep{border:none;border-top:1px solid var(--border);margin:1.8rem 0}
.switch-row{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-family:var(--font-ui);font-size:.88rem;color:var(--ink-light)}
.switch-row input{width:16px;height:16px;accent-color:var(--sage);cursor:pointer}
.switch-row code{background:var(--paper-dark);padding:.05rem .35rem;border-radius:4px;font-size:.8rem}

/* ── Book sheet (admin) ─────────────────────────────── */
.book-editor{display:grid;grid-template-columns:1fr 240px;gap:2.5rem;align-items:start;max-width:1000px}
.book-editor-form{min-width:0}
.form-row{display:grid;grid-template-columns:1fr 140px;gap:1rem}
.book-editor-actions{
    display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
    margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--border);
}
.book-editor-actions .text-danger{margin-left:auto}

.book-editor-preview{
    position:sticky;top:1.5rem;background:var(--paper-light);
    border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;
}
.book-editor-preview h3{
    font-family:var(--font-ui);font-size:.75rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.08em;color:var(--ink-faint);display:flex;align-items:center;gap:.4rem;margin-bottom:1rem;
}
.book-editor-preview .flip-card{margin-bottom:.8rem}
.book-editor-preview .flip-card:hover .flip-inner{transform:rotateY(180deg)}
.preview-hint{
    font-family:var(--font-ui);font-size:.7rem;color:var(--ink-faint);
    text-align:center;display:flex;align-items:center;justify-content:center;gap:.4rem;
}

@media(max-width:900px){
    .book-editor{grid-template-columns:1fr;gap:2rem}
    .book-editor-preview{position:static;order:-1}
    .form-row{grid-template-columns:1fr}
}

/* ── Image picker ───────────────────────────────────── */
.image-options{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
    gap:.6rem;max-height:290px;overflow-y:auto;padding:.15rem;
}
.image-options.wide{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));max-height:none}
.image-option{
    position:relative;cursor:pointer;border-radius:var(--radius-sm);overflow:hidden;
    border:2px solid transparent;background:var(--paper-dark);
    aspect-ratio:3/4;transition:border-color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);
}
.image-options.wide .image-option{aspect-ratio:16/9}
.image-option img{width:100%;height:100%;object-fit:cover;display:block}
.image-option span{
    position:absolute;left:0;right:0;bottom:0;
    font-family:var(--font-ui);font-size:.6rem;font-weight:600;line-height:1.25;
    color:#fff;padding:.9rem .35rem .3rem;text-align:center;
    background:linear-gradient(to top,rgba(0,0,0,.78),transparent);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.image-option:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.image-option.active{border-color:var(--leather);box-shadow:var(--ring)}
.image-option.active::after{
    content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;
    position:absolute;top:.3rem;right:.3rem;width:20px;height:20px;
    display:flex;align-items:center;justify-content:center;
    font-size:.6rem;color:#fff;background:var(--leather);border-radius:50%;
}
.image-option.none{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
    background:var(--paper-light);border:2px dashed var(--border);color:var(--ink-faint);
}
.image-option.none i{font-size:1rem}
.image-option.none span{position:static;background:none;color:var(--ink-faint);padding:0;font-size:.62rem}
.image-option.none.active{border-style:solid;border-color:var(--leather);color:var(--ink)}

.form-section{
    font-family:var(--font-ui);font-size:.74rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.1em;color:var(--ink-faint);
    display:flex;align-items:center;gap:.45rem;margin:0 0 1rem;
}

.icon-options{display:flex;gap:.5rem;flex-wrap:wrap}
.icon-option{
    width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border);
    background:var(--paper-light);color:var(--ink-faint);cursor:pointer;transition:all .15s;
    display:flex;align-items:center;justify-content:center;
}
.icon-option i{pointer-events:none}
.icon-option:hover{border-color:var(--ink-faint);color:var(--ink)}
.icon-option.active{border-color:var(--ink);background:var(--paper-dark);color:var(--ink)}

.profile-actions{display:flex;align-items:center;gap:1rem;margin-top:2rem;flex-wrap:wrap}

.profile-preview{
    position:sticky;top:1.5rem;background:var(--paper-light);border:1px solid var(--border);
    border-radius:var(--radius);padding:1.5rem;
}
.profile-preview h3{
    font-family:var(--font-ui);font-size:.75rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.08em;color:var(--ink-faint);display:flex;align-items:center;gap:.4rem;margin-bottom:1rem;
}
.preview-card{text-align:center}
.preview-avatar{width:80px;height:80px;margin:0 auto .8rem}
.preview-avatar i{font-size:1.9rem}
.preview-name{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1.2;word-break:break-word}
.preview-tagline{font-family:var(--font-ui);font-size:.8rem;color:var(--ink-faint);margin-top:.3rem;word-break:break-word}
.preview-cover{
    width:120px;height:170px;margin:0 auto;border-radius:4px 6px 6px 4px;
    background:linear-gradient(145deg,var(--slate-blue),#5c6b87);
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:1rem .7rem;position:relative;
    box-shadow:4px 4px 18px rgba(44,36,22,.22),inset -3px 0 8px rgba(0,0,0,.08);
}
.preview-cover i{font-size:1.4rem;color:rgba(255,255,255,.8);margin-bottom:.6rem}
.preview-cover .cover-title{font-family:var(--font-heading);font-size:.85rem;font-weight:600;color:rgba(255,255,255,.95);text-align:center;line-height:1.25}
.preview-cover .cover-author{font-family:var(--font-ui);font-size:.55rem;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.1em;margin-top:auto;text-align:center;word-break:break-word}

@media(max-width:900px){
    .profile-editor{grid-template-columns:1fr;gap:2rem}
    .profile-preview{position:static;order:-1}
}