/* Bookshelf — FlippingBook "wood-skyless" style reproduction */

:root {
    --rowH: 235px;          /* height of one shelf row */
    --board: 18px;          /* shelf board thickness */
    --coverH: 150px;        /* standing book cover height */
    --capBand: 0px;         /* reserved caption strip below each board (set when captions on) */
    --boardTop: calc(var(--rowH) - var(--board) - var(--capBand));
    --slot: 150px;          /* fixed width of one book column */
    --col-gap: 44px;        /* horizontal gap between books in a row */
    --max-cols: 5;          /* hard cap: books per shelf row (FlippingBook default) */
    --rowW: calc(var(--max-cols) * var(--slot) + (var(--max-cols) - 1) * var(--col-gap));
    --wood-frame-1: #d7b384;
    --wood-frame-2: #c09a68;
    --board-hi: #ecd2a4;
    --board-1: #d6ae78;
    --board-2: #b98d58;
    --board-lo: #8a6238;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #fbfbfb;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: #444;
}

/* ---------- top bar ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    padding: 0 14px;
}

.topbar-title {
    font-size: 13px;
    color: #555;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #666;
    cursor: pointer;
}
.iconbtn:hover { background: #ececec; }

.searchbox { display: inline-flex; align-items: center; }
.searchbox input {
    width: 0;
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    color: #444;
    outline: none;
    transition: width .18s ease, border-color .18s ease;
}
.searchbox.open input {
    width: 190px;
    padding: 4px 6px;
    border-bottom-color: #bbb;
}

.menuwrap { position: relative; }
.menu {
    position: absolute;
    top: 36px;
    right: 0;
    min-width: 175px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,.22);
    padding: 4px 0;
    z-index: 50;
}
.menu-head {
    padding: 8px 14px 4px;
    font-size: 12px;
    color: #999;
}
.menu button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: #444;
    cursor: pointer;
}
.menu button:hover { background: #f2f2f2; }
.menu button.active { background: #e9e9e9; }

/* ---------- shelf unit ---------- */

.shelf-wrap {
    width: 92%;
    max-width: 1060px;
    margin: 26px auto 60px;
}

.shelf-unit {
    width: fit-content;
    min-width: 340px;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px 15px 10px;
    border-radius: 3px;
    /* horizontal-grain frame wood */
    background-color: var(--wood-frame-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Crect width='280' height='280' fill='%23d0a874'/%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.12' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45  0 0 0 0 0.30  0 0 0 0 0.14  0.8 0 0 0 0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E");
    box-shadow:
        0 30px 55px -18px rgba(0,0,0,.42),
        0 6px 14px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.shelf-rows.has-captions { --capBand: 48px; }   /* room for title + date under each board */

.shelf-rows {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 0 var(--col-gap);
    padding: 0;
    /* cap the row at exactly --max-cols book slots so the 6th book wraps */
    max-width: calc(var(--rowW) + 2px);
    margin: 0 auto;
    min-height: var(--rowH);
    /* layers, top to bottom:
       1. shelf boards (one per row)
       2. contact shadow above each board
       3. vertical plank seams
       4. top vignette from the frame
       5. vertical-grain back panel texture           */
    background-image:
        repeating-linear-gradient(180deg,
            transparent 0,
            transparent var(--boardTop),
            var(--board-hi) var(--boardTop),
            var(--board-1) calc(var(--boardTop) + 3px),
            var(--board-2) calc(var(--boardTop) + var(--board) - 3px),
            var(--board-lo) calc(var(--boardTop) + var(--board)),
            transparent calc(var(--boardTop) + var(--board)),
            transparent var(--rowH)),
        repeating-linear-gradient(180deg,
            rgba(0,0,0,0) 0,
            rgba(0,0,0,0) calc(var(--boardTop) - 30px),
            rgba(60,35,10,.16) var(--boardTop),
            rgba(0,0,0,0) var(--boardTop),
            rgba(0,0,0,0) var(--rowH)),
        repeating-linear-gradient(90deg,
            rgba(94,64,32,.05) 0,
            rgba(94,64,32,.05) 1px,
            rgba(255,255,255,.06) 1px,
            rgba(255,255,255,.06) 2px,
            rgba(0,0,0,0) 2px,
            rgba(0,0,0,0) 158px),
        linear-gradient(180deg,
            rgba(62,36,10,.34) 0,
            rgba(62,36,10,.10) 70px,
            rgba(62,36,10,0) 140px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Crect width='280' height='280' fill='%23e2c493'/%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12 0.008' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.52  0 0 0 0 0.36  0 0 0 0 0.18  0.7 0 0 0 0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23g)' opacity='0.4'/%3E%3C/svg%3E");
    background-color: #e2c493;
    box-shadow:
        inset 0 10px 22px -8px rgba(70,40,10,.5),
        inset 16px 0 26px -16px rgba(70,40,10,.45),
        inset -16px 0 26px -16px rgba(70,40,10,.45);
}

/* ---------- books ---------- */

.book {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--slot);          /* fixed slot; cover is centered within it */
    height: var(--rowH);
    padding-bottom: calc(var(--board) + var(--capBand));
    text-decoration: none;
}

.book::after {                       /* contact shadow under the cover */
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: calc(var(--board) + var(--capBand) - 6px);
    height: 12px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 70%);
    z-index: 0;
}

.book img,
.book .book-fallback {
    position: relative;
    z-index: 1;
    height: var(--coverH);
    width: auto;
    box-shadow:
        0 2px 6px rgba(0,0,0,.35),
        0 8px 18px -6px rgba(0,0,0,.35);
    transition: transform .16s ease, box-shadow .16s ease;
}

.book:hover img,
.book:hover .book-fallback {
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 6px 12px rgba(0,0,0,.35),
        0 16px 26px -8px rgba(0,0,0,.4);
}

.book .book-fallback {
    width: calc(var(--coverH) * 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    background: linear-gradient(160deg, #2d5c8f, #173a5e);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
}

.book-caption {
    position: absolute;
    top: calc(100% - var(--board) - var(--capBand) + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    max-height: var(--capBand);
    overflow: hidden;
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
    color: #59431f;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
    pointer-events: none;
}
.book-caption .cap-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* keep long titles from overrunning the band */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.book-caption .cap-date { color: #7d6234; font-size: 10px; }

/* ---------- tooltip ---------- */

.tooltip {
    position: absolute;
    max-width: 250px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 14px rgba(0,0,0,.25);
    z-index: 60;
    pointer-events: none;
}
.tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 3px 3px 6px rgba(0,0,0,.08);
}
.tooltip.below::after {
    bottom: auto;
    top: -5px;
    box-shadow: -2px -2px 5px rgba(0,0,0,.06);
}
.tooltip-title { font-size: 13px; font-weight: 600; color: #333; }
.tooltip-desc  { font-size: 12px; color: #8a8a8a; margin-top: 4px; }
.tooltip-desc:empty, .tooltip-date:empty { display: none; }
.tooltip-date  { font-size: 11px; color: #aaa; margin-top: 4px; }

/* ---------- misc ---------- */

.shelf-empty {
    margin-top: 26px;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.noscript-list { max-width: 700px; margin: 30px auto; }

/* the .shelf-floor element is only used by themes that need it (glass) */
.shelf-floor { display: none; }


/* ============================================================
   Glass Floor Shelf theme  (body.style-glass)
   Dark metal frame + glass shelf + book reflections, white bg.
   Everything here is scoped so the default wood theme is untouched.
   ============================================================ */

body.style-glass {
    background: #f6f7f8;
    --glassZone: 42px;        /* space below the book baseline: reflection + glass surface */
    --metal-1: #565d69;       /* highlight */
    --metal-2: #3d434d;       /* main */
    --metal-3: #2c313a;       /* shadow / edges */
}

/* --- metal frame: top beam + side posts (base rail is .shelf-floor) --- */
body.style-glass .shelf-unit {
    position: relative;
    width: fit-content;
    min-width: 360px;
    max-width: 100%;
    margin: 8px auto 60px;
    padding: 22px 16px 0;                       /* top beam, side posts */
    border-radius: 4px 4px 0 0;
    background:
        linear-gradient(180deg, var(--metal-1) 0, var(--metal-2) 14px, var(--metal-2) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 1px 0 0 rgba(255,255,255,.06),
        inset -1px 0 0 rgba(0,0,0,.25);
}
/* legs, extending below the base with an open gap between them */
body.style-glass .shelf-unit::before,
body.style-glass .shelf-unit::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 16px;
    height: 34px;
    height: clamp(28px, 4vw, 36px);
}
body.style-glass .shelf-unit::before {
    left: 0;
    background: linear-gradient(90deg, var(--metal-1), var(--metal-3));
    border-radius: 0 0 2px 3px;
    box-shadow: 0 12px 12px -8px rgba(0,0,0,.35);
}
body.style-glass .shelf-unit::after {
    right: 0;
    background: linear-gradient(90deg, var(--metal-3), var(--metal-1));
    border-radius: 0 0 3px 2px;
    box-shadow: 0 12px 12px -8px rgba(0,0,0,.35);
}

/* --- white "skyless" interior, with one glass shelf surface per row --- */
body.style-glass .shelf-rows {
    position: relative;
    box-shadow: none;
    padding-bottom: calc(var(--glassZone) + var(--capBand));
    overflow: visible;
    /* layer 1: a glass shelf drawn at every row's baseline (repeats each --rowH,
       so extra rows of books each get their own glass surface);
       layer 2: the flat white "skyless" interior.                              */
    background:
        repeating-linear-gradient(180deg,
            transparent 0,
            transparent calc(var(--rowH) - var(--glassZone) - var(--capBand)),
            rgba(255,255,255,.90) calc(var(--rowH) - var(--glassZone) - var(--capBand)),
            rgba(223,232,235,.34) calc(var(--rowH) - var(--glassZone) - var(--capBand) + 2px),
            rgba(194,208,213,.13) calc(var(--rowH) - var(--capBand)),
            transparent           calc(var(--rowH) - var(--capBand)),
            transparent           var(--rowH)),
        linear-gradient(180deg, #e4e7eb 0, #f7f8f9 40%, #ffffff 100%);
}

/* --- base rail below the glass, spanning the full frame width --- */
body.style-glass .shelf-floor {
    display: block;
    position: relative;
    height: 20px;
    margin: 0 -16px;                            /* break out over the posts to full width */
    background: linear-gradient(180deg, var(--metal-2) 0, var(--metal-3) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    z-index: 2;
}

/* --- books stand on the glass and cast a reflection --- */
body.style-glass .book {
    padding-bottom: calc(var(--glassZone) + var(--capBand));
    z-index: 1;
}
body.style-glass .book::after { display: none; }   /* no wood contact shadow */
body.style-glass .shelf-rows:not(.has-captions) .book img,
body.style-glass .shelf-rows:not(.has-captions) .book .book-fallback {
    -webkit-box-reflect: below 1px
        linear-gradient(to bottom, transparent 52%, rgba(0,0,0,.16) 100%);
}
body.style-glass .book:hover img,
body.style-glass .book:hover .book-fallback {
    transform: translateY(-6px) scale(1.03);
}
body.style-glass .book-caption { color: #4a5560; text-shadow: none; }
body.style-glass .book-caption .cap-date { color: #7a8790; }

/* --- soft floor shadow under the whole unit --- */
body.style-glass .shelf-wrap { position: relative; }
body.style-glass .shelf-wrap::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 32px;
    height: 26px;
    background: radial-gradient(ellipse at center, rgba(30,35,45,.22) 0, rgba(30,35,45,0) 72%);
    z-index: -1;
}


/* ============================================================
   Glass Shelf theme  (body.style-glassbox)
   Wall-mounted 3D shadowbox: a dark metal frame with receding
   mitered inner walls, a white back panel, a glass shelf with
   book reflections, and faint vertical bay dividers. No legs.
   ============================================================ */

body.style-glassbox {
    background: #fbfbfc;
    --glassZone: 40px;          /* reflection + glass surface below the baseline */
    --gb-wall:   #363b44;       /* side walls */
    --gb-wallHi: #474d58;       /* top wall (lit) */
    --gb-wallLo: #2b3038;       /* bottom wall (glass, darker) */
    --gb-frame:  #22262d;       /* outer front frame edge */
    --gb-depth:  46px;          /* frame / wall thickness */
}

/* white back panel (+ faint vertical dividers) and the drop shadow;
   the receding walls and the front frame edge are the pseudo-elements. */
body.style-glassbox .shelf-unit {
    position: relative;
    width: fit-content;
    min-width: 460px;
    max-width: 100%;
    margin: 12px auto 74px;
    padding: var(--gb-depth);
    background:
        repeating-linear-gradient(90deg,
            transparent 0,
            transparent calc(25% - 1px),
            rgba(20,24,30,.09) calc(25% - 1px),
            rgba(20,24,30,.09) 25%),
        linear-gradient(180deg, #e9ecef 0, #f8f9fa 45%, #ffffff 100%);
    box-shadow:
        inset 0 0 34px 6px rgba(20,24,30,.30),   /* recessed depth around the back panel */
        0 36px 46px -22px rgba(0,0,0,.4);         /* drop shadow (wall-mounted) */
}
/* receding walls — four mitered trapezoids shown only in the frame band.
   Layer 1 darkens the inner (back) edge of every wall to read as depth;
   layer 2 is the mitered wall colours.                                     */
body.style-glassbox .shelf-unit::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: var(--gb-depth);
    pointer-events: none;
    background:
        radial-gradient(140% 140% at 50% 46%, rgba(0,0,0,0) 46%, rgba(0,0,0,.42) 72%),
        conic-gradient(from 45deg at 50% 50%,
            var(--gb-wall)   0deg 90deg,      /* right  */
            var(--gb-wallLo) 90deg 180deg,    /* bottom */
            var(--gb-wall)   180deg 270deg,   /* left   */
            var(--gb-wallHi) 270deg 360deg);  /* top    */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}
/* dark outer front frame edge */
body.style-glassbox .shelf-unit::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 5px solid var(--gb-frame);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* interior: one glass shelf drawn per row (repeats every --rowH) */
body.style-glassbox .shelf-rows {
    position: relative;
    z-index: 1;
    overflow: visible;
    box-shadow: none;
    padding-bottom: calc(var(--glassZone) + var(--capBand));
    background:
        repeating-linear-gradient(180deg,
            transparent 0,
            transparent calc(var(--rowH) - var(--glassZone) - var(--capBand)),
            rgba(255,255,255,.85) calc(var(--rowH) - var(--glassZone) - var(--capBand)),
            rgba(223,232,235,.30) calc(var(--rowH) - var(--glassZone) - var(--capBand) + 2px),
            rgba(196,208,213,.10) calc(var(--rowH) - var(--capBand)),
            transparent           calc(var(--rowH) - var(--capBand)),
            transparent           var(--rowH));
}
body.style-glassbox .shelf-floor { display: none; }   /* no legs / base rail */

/* books stand on the glass shelf and cast a reflection */
body.style-glassbox .book {
    padding-bottom: calc(var(--glassZone) + var(--capBand));
    z-index: 1;
}
body.style-glassbox .book::after { display: none; }
body.style-glassbox .shelf-rows:not(.has-captions) .book img,
body.style-glassbox .shelf-rows:not(.has-captions) .book .book-fallback {
    -webkit-box-reflect: below 1px
        linear-gradient(to bottom, transparent 52%, rgba(0,0,0,.16) 100%);
}
body.style-glassbox .book:hover img,
body.style-glassbox .book:hover .book-fallback {
    transform: translateY(-6px) scale(1.03);
}
body.style-glassbox .book-caption { color: #4a5560; text-shadow: none; }
body.style-glassbox .book-caption .cap-date { color: #7a8790; }


/* ============================================================
   White Shelf theme  (body.style-white)
   A minimal, frameless floating white plank. Books stand on a
   thin white shelf (drawn once per row) with a faint reflection
   and a soft drop shadow. No frame, no back panel.
   ============================================================ */

body.style-white {
    background: #ffffff;
    --glassZone: 40px;
    --plankH: 15px;         /* visible thickness of the shelf's front face */
    --plankBase: calc(var(--rowH) - var(--glassZone) - var(--capBand));   /* book baseline */
}
body.style-white .shelf-unit {
    position: relative;
    width: var(--rowW);          /* a fixed 5-slot plank; books centre on it */
    max-width: 100%;
    margin: 26px auto 96px;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
/* the white plank, drawn at each row's baseline (repeats every --rowH) */
body.style-white .shelf-rows {
    position: relative;
    box-shadow: none;
    overflow: visible;
    padding-bottom: calc(var(--glassZone) + var(--capBand));
    /* a floating white plank at every row's baseline, each with its own soft shadow */
    background:
        repeating-linear-gradient(180deg,
            transparent 0,
            transparent var(--plankBase),
            #ffffff       var(--plankBase),                          /* lit top edge */
            #eceef2       calc(var(--plankBase) + 2px),
            #dfe2e8       calc(var(--plankBase) + var(--plankH) - 3px),
            #f3f4f7       calc(var(--plankBase) + var(--plankH)),    /* underside */
            rgba(120,132,150,.22) calc(var(--plankBase) + var(--plankH)),  /* drop shadow */
            rgba(120,132,150,0)   calc(var(--plankBase) + var(--plankH) + 20px),
            transparent   calc(var(--plankBase) + var(--plankH) + 20px),
            transparent   var(--rowH));
}
body.style-white .shelf-floor { display: none; }   /* per-row shadow above replaces it */
body.style-white .book { padding-bottom: calc(var(--glassZone) + var(--capBand)); }
body.style-white .book::after { display: none; }
body.style-white .shelf-rows:not(.has-captions) .book img,
body.style-white .shelf-rows:not(.has-captions) .book .book-fallback {
    -webkit-box-reflect: below 0
        linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.09) 100%);
}
body.style-white .book:hover img,
body.style-white .book:hover .book-fallback { transform: translateY(-6px) scale(1.03); }
body.style-white .book-caption { color: #667; text-shadow: none; }
body.style-white .book-caption .cap-date { color: #99a; }


/* ============================================================
   Wooden Shelf theme  (body.style-woodplank)
   A single walnut plank suspended from the wall by two thin
   cables with anchors. Books stand on the plank; soft shadow.
   ============================================================ */

body.style-woodplank {
    background: #fbfbfb;
    --glassZone: 44px;
    --plankH: 20px;
    --plankBase: calc(var(--rowH) - var(--glassZone) - var(--capBand));   /* book baseline */
    --wp-top:   #8a5a30;     /* lit top edge of the plank */
    --wp-face1: #5c3a1c;     /* front face (upper) */
    --wp-face2: #3d2712;     /* front face (lower) */
    --wp-cable: #2f2f2f;
}
body.style-woodplank .shelf-unit {
    position: relative;
    width: var(--rowW);                     /* a fixed 5-slot plank */
    max-width: 100%;
    margin: 66px auto 96px;                 /* headroom for the cables */
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
/* two suspension cables (anchor dot at top, thin line down to the plank end) */
body.style-woodplank .shelf-unit::before,
body.style-woodplank .shelf-unit::after {
    content: "";
    position: absolute;
    top: -50px;
    /* reach from the anchor (above) down to the top row's plank baseline */
    height: calc(var(--plankBase) + 50px);
    width: 12px;
    pointer-events: none;
    background:
        radial-gradient(circle at 6px 6px, var(--wp-cable) 4px, transparent 4.5px) top center / 12px 12px no-repeat,
        linear-gradient(var(--wp-cable), var(--wp-cable)) center 9px / 1.5px calc(100% - 9px) no-repeat;
}
body.style-woodplank .shelf-unit::before { left: 4%;  transform: rotate(6deg);  transform-origin: bottom center; }
body.style-woodplank .shelf-unit::after  { right: 4%; transform: rotate(-6deg); transform-origin: bottom center; }

/* the walnut plank, drawn at each row's baseline */
body.style-woodplank .shelf-rows {
    position: relative;
    z-index: 1;
    box-shadow: none;
    overflow: visible;
    padding-bottom: calc(var(--glassZone) + var(--capBand));
    /* a walnut plank at every row's baseline, each with its own soft shadow */
    background:
        repeating-linear-gradient(180deg,
            transparent 0,
            transparent var(--plankBase),
            var(--wp-top)   var(--plankBase),                        /* lit top edge */
            #6b431f         calc(var(--plankBase) + 3px),
            var(--wp-face1) calc(var(--plankBase) + 5px),
            var(--wp-face2) calc(var(--plankBase) + var(--plankH) - 2px),
            #2a1a0c         calc(var(--plankBase) + var(--plankH)),
            rgba(45,28,12,.26) calc(var(--plankBase) + var(--plankH)),   /* drop shadow */
            rgba(45,28,12,0)   calc(var(--plankBase) + var(--plankH) + 20px),
            transparent     calc(var(--plankBase) + var(--plankH) + 20px),
            transparent     var(--rowH));
}
body.style-woodplank .shelf-floor { display: none; }   /* per-row shadow above replaces it */
body.style-woodplank .book { padding-bottom: calc(var(--glassZone) + var(--capBand)); z-index: 1; }
body.style-woodplank .book::after { display: none; }
body.style-woodplank .shelf-rows:not(.has-captions) .book img,
body.style-woodplank .shelf-rows:not(.has-captions) .book .book-fallback {
    -webkit-box-reflect: below 0
        linear-gradient(to bottom, transparent 58%, rgba(0,0,0,.12) 100%);
}
body.style-woodplank .book:hover img,
body.style-woodplank .book:hover .book-fallback { transform: translateY(-6px) scale(1.03); }
body.style-woodplank .book-caption { color: #6a5238; text-shadow: none; }
body.style-woodplank .book-caption .cap-date { color: #8a7350; }


@media (max-width: 640px) {
    :root { --rowH: 200px; --board: 15px; --coverH: 118px; --slot: 112px; --col-gap: 22px; }
    .shelf-wrap { width: 96%; }
    .searchbox.open input { width: 130px; }
    body.style-glass { --glassZone: 34px; }
}