/* ===== SIWS Studio Theme (flat lime / ink / cream) ===== */
:root{--lime:#dbe672;--ink:#161815;--cream:#f3f0e8}
body{background:var(--cream)!important;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
/* hero */
.c-header{background:var(--lime)!important;background-image:none!important;min-height:640px;position:relative}
.c-header .mask{display:none!important}
.c-header .vegas-slide,.c-header .vegas-overlay,.c-header .vegas-timer,.c-header .vegas-wrapper{display:none!important}
.c-header a,.c-header .navbar-brand,.c-header .nav-link,.c-header .navbar-text{color:var(--ink)!important;text-shadow:none!important}
.siws-hero{position:relative;z-index:2;padding:120px 4vw 140px}
.siws-eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:22px}
.siws-title{font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.045em;font-size:clamp(3.4rem,11vw,10.5rem);margin:0;color:var(--ink)}
.siws-title .l{display:block;overflow:hidden;padding-bottom:.04em}
.siws-title .l>span{display:inline-block;transform:translateY(105%);animation:siwsUp .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes siwsUp{to{transform:none}}
.siws-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.siws-btn{display:inline-flex;align-items:center;gap:.7rem;padding:16px 28px;border:1px solid var(--ink);font-weight:700;color:var(--ink)!important;text-decoration:none!important;transition:background .25s,color .25s}
.siws-btn i{font-style:normal;transition:transform .25s}
.siws-btn:hover{background:var(--ink);color:var(--lime)!important}.siws-btn:hover i{transform:translate(4px,-4px)}
.siws-btn.solid{background:var(--ink);color:var(--lime)!important}.siws-btn.solid:hover{background:transparent;color:var(--ink)!important}
/* stats */
.siws-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-top:80px}
.siws-stat{padding:34px 4vw;border-right:1px solid var(--ink)}.siws-stat:last-child{border-right:0}
.siws-stat b{display:block;font-size:clamp(2.4rem,6vw,5rem);font-weight:900;letter-spacing:-.04em;line-height:1}
.siws-stat span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
/* marquee */
.siws-marquee{background:var(--ink);color:var(--lime);overflow:hidden;white-space:nowrap;padding:18px 0;font-weight:900;text-transform:uppercase;font-size:1.6rem;letter-spacing:.02em}
.siws-marquee .track{display:inline-block;animation:siwsMarq 32s linear infinite}
.siws-marquee .track span{padding-right:1.5rem}
@keyframes siwsMarq{to{transform:translateX(-50%)}}
/* scene */
.siws-scene{background:var(--ink);padding:60px 4vw 30px;text-align:center}
.siws-scene-label{color:var(--lime);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.siws-scene svg{width:100%;max-width:1200px;height:auto}
.siws-scene .draw{fill:none;stroke:var(--cream);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s ease}
.siws-scene.siws-in .draw{stroke-dashoffset:0}
.siws-scene .sign{fill:var(--lime)}.siws-scene text{font-weight:900;font-size:20px;fill:var(--ink);letter-spacing:.08em}
.siws-scene .van rect,.siws-scene .van circle{fill:var(--lime);stroke:var(--ink);stroke-width:2}
.siws-scene .van path{stroke:var(--ink);stroke-width:2;fill:none}
.siws-scene .van{animation:siwsDrive 16s linear infinite}
@keyframes siwsDrive{from{transform:translateX(-140px)}to{transform:translateX(1260px)}}
.siws-scene .cloud{animation:siwsCloud 20s ease-in-out infinite alternate}.siws-scene .c2{animation-duration:26s}
@keyframes siwsCloud{to{transform:translateX(70px)}}
.siws-scene .rays{transform-origin:130px 95px;animation:siwsSpin 24s linear infinite}
@keyframes siwsSpin{to{transform:rotate(360deg)}}
/* sections */
.siws-sec{padding:100px 4vw 40px;border-top:1px solid var(--ink)}
.siws-sec.container{max-width:1320px}
.siws-sec-head{margin-bottom:44px}
.siws-sec-head small{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.siws-sec-head h2{font-size:clamp(2.6rem,8vw,7rem);font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-.045em;margin:0 0 18px}
.siws-sec-head p{max-width:560px;color:#44463f}
#slims-home h4{font-weight:800;text-transform:none}
/* topics */
ul.topic{display:grid!important;grid-template-columns:repeat(5,1fr);padding:0;margin:0;list-style:none;border-top:1px solid var(--ink);border-left:1px solid var(--ink);counter-reset:t}
ul.topic li{margin:0!important;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);counter-increment:t;position:relative;transition:background .25s}
ul.topic li::before{content:"0" counter(t);position:absolute;top:14px;left:16px;font-size:.72rem;font-weight:700;letter-spacing:.14em}
ul.topic li a{display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;padding:20px;color:var(--ink)!important;text-decoration:none!important;position:relative}
ul.topic li img{width:84px!important;margin:0 0 auto auto;transition:transform .4s}
ul.topic li span{font-weight:900;font-size:1.25rem;text-transform:uppercase;letter-spacing:-.02em}
ul.topic li i{position:absolute;right:18px;bottom:18px;font-style:normal;font-size:1.4rem;transition:transform .25s}
ul.topic li:hover{background:var(--lime)}ul.topic li:hover img{transform:rotate(-8deg) scale(1.12)}ul.topic li:hover i{transform:translate(5px,-5px)}
/* collections / readers / visit */
#slims-home img{transition:transform .35s,box-shadow .35s}
#slims-home a:hover img{transform:translateY(-8px);box-shadow:0 16px 28px rgba(0,0,0,.25)}
.siws-readers{background:var(--lime)}.siws-readers .siws-sec-head p{color:var(--ink)}
.siws-visit iframe{filter:grayscale(1);transition:filter .4s;border:1px solid var(--ink)!important}.siws-visit iframe:hover{filter:none}
.siws-sq{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid var(--ink);margin-right:10px;color:var(--ink)!important;transition:background .2s,color .2s}
.siws-sq:hover{background:var(--ink);color:var(--lime)!important}
/* scroll reveal (JS adds .siws-js; reveal falls back to visible) */
.siws-js .rv{opacity:0;transform:translateY(40px);transition:opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.siws-js .rv.siws-in{opacity:1;transform:none}
@media(max-width:900px){ul.topic{grid-template-columns:repeat(2,1fr)}.siws-stats{grid-template-columns:repeat(2,1fr)}.siws-stat:nth-child(2){border-right:0}.siws-stat:nth-child(-n+2){border-bottom:1px solid var(--ink)}}
@media(prefers-reduced-motion:reduce){.siws-title .l>span{animation:none;transform:none}.siws-marquee .track,.siws-scene .van,.siws-scene .cloud,.siws-scene .rays{animation:none}.siws-js .rv{opacity:1;transform:none;transition:none}.siws-scene .draw{stroke-dashoffset:0;transition:none}}

/* ===== navbar + search restyle ===== */
.c-header .navbar{padding:18px 4vw;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--ink);position:relative;z-index:5}
.c-header .navbar-brand{max-width:34%;white-space:normal;margin-right:1rem}
.c-header .navbar-brand h1{font-size:1rem!important;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.c-header .navbar-brand h2{font-size:.72rem!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.c-header .navbar-brand img{height:42px!important;width:auto!important}
.c-header .navbar-collapse{flex-grow:1}
.c-header .nav-link{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.5rem .8rem!important;position:relative}
.c-header .nav-link::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:2px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.c-header .nav-item:hover>.nav-link::after,.c-header .nav-item.active>.nav-link::after{transform:scaleX(1)}
.c-header .dropdown-toggle::after{display:none}
.c-header .navbar-toggler{border-color:var(--ink)}
.c-header .navbar-toggler-icon{filter:invert(1)}
.c-header .dropdown-menu{border-radius:0;border:1px solid var(--ink);background:var(--cream)}
.c-header .dropdown-menu a{color:var(--ink)!important}
.c-header .dropdown-item:hover{background:var(--lime)}
.siws-hero{padding-top:70px!important}
@media(max-width:991px){.c-header .navbar-brand{max-width:70%}.c-header .nav-link::after{display:none}}
/* search box */
#search-wraper{position:relative;z-index:6;margin-top:-70px;padding:0 4vw}
#search-wraper .card{border-radius:0;border:1px solid var(--ink)!important;box-shadow:none!important;background:var(--cream)}
#search-wraper .card-body{padding:0}
#search-wraper #search-input{font-size:1.4rem;font-weight:700;padding:22px 26px;background:transparent;border:0;outline:0;color:var(--ink)}
#search-wraper #search-input::placeholder{color:#6d6f66;text-transform:uppercase;letter-spacing:.06em;font-size:1rem}
#search-wraper .card:focus-within{background:#fff;box-shadow:8px 8px 0 var(--ink)!important}
#search-wraper .advanced-wraper{border-radius:0;border:1px solid var(--ink);background:var(--cream);box-shadow:none!important}
#search-wraper .btn{border-radius:0;font-weight:700;text-transform:uppercase;font-size:.74rem;letter-spacing:.1em}
#search-wraper .btn-primary{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--lime)!important}
#search-wraper .btn-outline-secondary,#search-wraper .btn-outline-primary{border-color:var(--ink);color:var(--ink)}
#search-wraper .btn-outline-secondary:hover,#search-wraper .btn-outline-primary:hover{background:var(--lime);color:var(--ink)}

/* ===== footer restyle ===== */
footer.bg-grey-darkest{background:var(--ink)!important;color:var(--cream)!important;padding:0!important;margin-top:100px;border-top:1px solid var(--ink)}
footer .container{max-width:1320px;padding:0 4vw}
footer .row.py-4{padding-top:70px!important;padding-bottom:50px!important}
footer h4{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);border-top:1px solid var(--lime);padding-top:14px;margin-bottom:18px!important}
footer p,footer .mb-2,footer .mb-4{color:#cfcdc3}
footer .col-md-3>.mb-4{font-size:1.5rem;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:1;color:var(--cream)}
footer svg,footer img.h-12,footer img.h-10{filter:brightness(0) invert(1);opacity:.9}
footer ul.list-reset{list-style:none;padding:0;margin:0}
footer ul.list-reset li{margin-bottom:10px}
footer a.text-light{color:var(--cream)!important;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;text-decoration:none!important;background:linear-gradient(var(--lime),var(--lime)) left bottom/0 2px no-repeat;padding-bottom:3px;transition:background-size .3s,color .3s}
footer a.text-light:hover{background-size:100% 2px;color:var(--lime)!important}
footer .form-control{border-radius:0;background:transparent;border:1px solid var(--cream);color:var(--cream);padding:12px 14px;height:auto}
footer .form-control::placeholder{color:#8f8d84}
footer .form-control:focus{background:rgba(255,255,255,.06);border-color:var(--lime);box-shadow:none;color:var(--cream)}
footer .btn{border-radius:0!important;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
footer .btn-primary{background:var(--lime)!important;border-color:var(--lime)!important;color:var(--ink)!important}
footer .btn-primary:hover{background:transparent!important;color:var(--lime)!important}
footer .btn-outline-success,footer .btn-outline-light{border-color:var(--cream);color:var(--cream)}
footer .btn-outline-success:hover,footer .btn-outline-light:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
footer hr{border-color:rgba(243,240,232,.25)}
footer .flex.font-thin{padding:10px 0 28px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#a9a79d}
footer code{color:var(--lime);background:transparent}
/* chat button */
#show-pchat2 .btn{border-radius:0;background:var(--ink)!important;border:1px solid var(--lime)!important;color:var(--lime)!important;font-weight:700}

/* ===== vue cards: books, subjects, readers ===== */
@keyframes siwsPop{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
/* book cards */
#slims-home .collection{margin-left:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
#slims-home .collection>div{padding:0!important;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);animation:siwsPop .7s cubic-bezier(.2,.8,.2,1) both}
#slims-home .collection>div:nth-child(2){animation-delay:.06s}
#slims-home .collection>div:nth-child(3){animation-delay:.12s}
#slims-home .collection>div:nth-child(4){animation-delay:.18s}
#slims-home .collection>div:nth-child(5){animation-delay:.24s}
#slims-home .collection>div:nth-child(6){animation-delay:.30s}
#slims-home .collection>div:nth-child(n+7){animation-delay:.36s}
#slims-home .collection .card{border:0!important;border-radius:0;background:transparent;box-shadow:none!important;transition:background .25s}
#slims-home .collection .card-body{padding:18px}
#slims-home .collection .card-image{overflow:hidden;background:var(--cream)}
#slims-home .collection .card-image img{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s;box-shadow:none}
#slims-home .collection .card-text{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.25;color:var(--ink)!important;margin-top:14px!important}
#slims-home .collection a.card:hover{background:var(--lime)}
#slims-home .collection a.card:hover .card-image img{transform:translateY(-6px) rotate(-2deg) scale(1.04);box-shadow:0 14px 24px rgba(0,0,0,.28)}
/* subject chips */
#slims-home a.btn.btn-outline-secondary{border-radius:0!important;border:1px solid var(--ink);color:var(--ink)!important;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;background:transparent;transition:background .2s,color .2s,transform .2s}
#slims-home a.btn.btn-outline-secondary:hover{background:var(--ink);color:var(--lime)!important;transform:translateY(-2px)}
/* reader cards */
#slims-home .siws-readers .card{border-radius:0;border:1px solid var(--ink);background:var(--cream);box-shadow:none!important;transition:transform .3s,box-shadow .3s;animation:siwsPop .7s cubic-bezier(.2,.8,.2,1) both}
#slims-home .siws-readers .card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)!important}
#slims-home .siws-readers .card-image-rounded{overflow:hidden;border-radius:50%;border:1px solid var(--ink)}
#slims-home .siws-readers .card-image-rounded img{filter:grayscale(1);transition:filter .35s,transform .45s}
#slims-home .siws-readers .card:hover .card-image-rounded img{filter:none;transform:scale(1.08)}
#slims-home .siws-readers .card-title{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:1.05rem}
#slims-home .siws-readers .card-title small{font-size:.68rem;letter-spacing:.12em;font-weight:700;color:#44463f!important}
#slims-home .siws-readers .card-text b{font-size:1.25rem;font-weight:900}
/* loading spinner */
#slims-home .spinner-border{color:var(--ink)!important}
@media(prefers-reduced-motion:reduce){#slims-home .collection>div,#slims-home .siws-readers .card{animation:none}}

/* ===== fix: hero content + topic grid + hero height ===== */
.c-header .vegas-wrapper{display:block!important;position:relative;z-index:2;background:transparent!important}
.c-header .vegas-container,.c-header.vegas-container{background:var(--lime)!important}
.c-header{min-height:0!important}
.siws-hero{padding:60px 4vw 110px!important}
.siws-title{font-size:clamp(3rem,9vw,8.5rem)}
.siws-stats{margin-top:60px}
ul.topic li{width:auto!important;max-width:none!important;flex:none!important;float:none!important;display:block!important}
ul.topic li a{width:100%;height:100%}
ul.topic li img{max-width:84px;height:auto}

/* ===== animated quote book ===== */
.siws-book{position:absolute;right:calc(4vw + 125px);top:46%;margin-top:-210px;width:250px;height:330px;perspective:1500px;z-index:3;opacity:0;transition:opacity .8s}
.siws-book.is-in{opacity:1}
.bk-float{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:bkFloat 6s ease-in-out infinite}
@keyframes bkFloat{50%{transform:translateY(-10px)}}
.bk-book{position:absolute;inset:0;transform-style:preserve-3d;transform:translateX(0) rotateX(6deg) rotateY(-14deg);transition:transform 1.4s cubic-bezier(.65,0,.25,1);cursor:pointer}
.siws-book.is-open .bk-book{transform:translateX(125px) rotateX(3deg) rotateY(0deg)}
.bk-base,.bk-leaf,.bk-cover{position:absolute;inset:0;transform-origin:left center}
.bk-base{background:var(--cream);border:1px solid var(--ink);box-shadow:9px 9px 0 var(--ink)}
.bk-page-right{position:absolute;inset:0;padding:34px 26px 24px 34px;display:flex;flex-direction:column;justify-content:center;color:var(--ink);background:linear-gradient(90deg,rgba(22,24,21,.16),transparent 16%)}
.bk-page-right>*{opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s}
.siws-book.is-open .bk-page-right>*{opacity:1;transform:none}
.siws-book.is-open .bk-no{transition-delay:1.5s}
.siws-book.is-open .bk-q{transition-delay:1.65s}
.siws-book.is-open .bk-a{transition-delay:1.85s}
.bk-no{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid var(--ink);padding-top:10px;margin-bottom:16px}
.bk-q{font-size:1.08rem;font-weight:800;line-height:1.3;letter-spacing:-.01em;margin:0 0 18px}
.bk-a{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
/* flipping leaves */
.bk-leaf{background-color:#f8f6ef;background-image:repeating-linear-gradient(transparent 0 23px,rgba(22,24,21,.12) 23px 24px);border:1px solid var(--ink);transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.bk-leaf.l1{transform:translateZ(2px);transition-delay:.3s}
.bk-leaf.l2{transform:translateZ(3px);transition-delay:.15s}
.bk-leaf.l3{transform:translateZ(4px);transition-delay:0s;transform-style:preserve-3d;background:none;border:0}
.siws-book.is-open .bk-leaf.l1{transform:translateZ(7px) rotateY(-176deg);transition-delay:.3s}
.siws-book.is-open .bk-leaf.l2{transform:translateZ(8px) rotateY(-178deg);transition-delay:.45s}
.siws-book.is-open .bk-leaf.l3{transform:translateZ(9px) rotateY(-180deg);transition-delay:.6s}
.bk-lf,.bk-lb{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--ink)}
.bk-lf{background-color:#f8f6ef;background-image:repeating-linear-gradient(transparent 0 23px,rgba(22,24,21,.12) 23px 24px)}
.bk-lb{background:var(--cream);transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;background-image:linear-gradient(270deg,rgba(22,24,21,.16),transparent 16%)}
.bk-ex{border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;padding:26px 20px;text-align:center;width:72%;color:var(--ink)}
.bk-ex small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.bk-ex b{display:block;font-size:1.7rem;font-weight:900;letter-spacing:-.04em;margin:8px 0 4px}
.bk-ex span{display:block;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.bk-ex i{display:block;width:34px;height:2px;background:var(--ink);margin:14px auto 0}
/* cover */
.bk-cover{transform:translateZ(6px);transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.65,0,.25,1);transition-delay:.45s}
.siws-book.is-open .bk-cover{transform:translateZ(6px) rotateY(-180deg);transition-delay:0s}
.bk-front,.bk-inside{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--ink)}
.bk-front{background:var(--ink);color:var(--lime);display:flex;flex-direction:column;justify-content:space-between;padding:28px 26px 26px 36px}
.bk-front::before{content:"";position:absolute;left:16px;top:0;bottom:0;width:1px;background:var(--lime);opacity:.7}
.bk-front::after{content:"";position:absolute;inset:10px 10px 10px 24px;border:1px solid rgba(219,230,114,.45);pointer-events:none}
.bk-top,.bk-sub{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;position:relative;z-index:1}
.bk-front b{font-size:3.1rem;font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;position:relative;z-index:1}
.bk-inside{background:#ebe7da;transform:rotateY(180deg)}
/* caption under closed book */
.bk-cap{position:absolute;top:100%;left:50%;width:380px;margin:46px 0 0 -190px;text-align:center;opacity:0;transition:opacity .6s}
.siws-book:not(.is-open) .bk-cap{opacity:1;transition-delay:1.4s}
.bk-cq{display:block;font-weight:800;font-size:.95rem;line-height:1.3;color:var(--ink)}
.bk-ca{display:block;margin-top:6px;font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
@media(max-width:1000px){.siws-book{display:none}}
@media(prefers-reduced-motion:reduce){.bk-float{animation:none}.bk-book,.bk-cover,.bk-leaf,.bk-page-right>*,.bk-cap{transition:none}}

/* remove line above the book */
.siws-eyebrow{border-top:0!important;padding-top:0!important}

/* ===== space panel + stage switch ===== */
.siws-book:not(.is-in){pointer-events:none}
.siws-space{position:absolute;right:4vw;top:46%;margin-top:-235px;width:440px;height:380px;z-index:3;background:var(--ink);border:1px solid var(--ink);box-shadow:9px 9px 0 rgba(22,24,21,.22);overflow:hidden;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s .8s}
.siws-space.is-in{opacity:1;visibility:visible;transition:opacity .8s}
.siws-space:not(.is-in){pointer-events:none}
.sp-cv{position:absolute;left:0;top:0;width:440px;height:380px;display:block}
.sp-tag{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);pointer-events:none}
.sp-card{position:absolute;right:12px;top:50%;width:200px;padding:16px 16px 14px;background:rgba(22,24,21,.92);border:1px solid var(--cream);color:var(--cream);opacity:0;transform:translate(14px,-50%);transition:opacity .5s,transform .5s;pointer-events:none}
.sp-card.on{opacity:1;transform:translate(0,-50%)}
.sp-no{display:block;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.sp-name{display:block;font-size:1.9rem;font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.95;margin:8px 0 12px;color:var(--cream)}
.sp-card dl{margin:0;border-top:1px solid rgba(243,240,232,.35)}
.sp-card dl>div{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid rgba(243,240,232,.2);font-size:.64rem}
.sp-card dt{font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a9a79d}
.sp-card dd{margin:0;font-weight:800;text-align:right;color:var(--cream)}
.sp-fact{font-size:.68rem;line-height:1.4;margin:10px 0 0;color:var(--lime);font-weight:700}
@media(max-width:1000px){.siws-space{display:none}}
@media(prefers-reduced-motion:reduce){.siws-space{display:none}}

/* ===== bigger space panel ===== */
.siws-space{width:clamp(460px,41vw,600px);height:auto;aspect-ratio:560/470;top:46%;margin-top:0;transform:translateY(-50%)}
.sp-cv{width:100%;height:100%}
.sp-tag{left:18px;right:18px;top:16px;font-size:.66rem}
.sp-card{width:215px;right:16px;padding:20px 18px 16px}
.sp-no{font-size:.64rem}
.sp-name{font-size:2.3rem;margin:10px 0 14px}
.sp-card dl>div{font-size:.72rem;padding:6px 0}
.sp-fact{font-size:.76rem;margin-top:12px}

/* ===== inner pages: search box sits below the navbar, no overlap ===== */
html:not(.siws-home) #search-wraper{margin-top:0!important;position:relative!important;top:auto!important;bottom:auto!important;padding:22px 4vw 26px!important;background:var(--lime)}
html:not(.siws-home) #search-wraper .card{max-width:760px;margin:0 auto}
html:not(.siws-home) .c-header{padding-bottom:0}
html:not(.siws-home) #search-wraper #search-input{padding:16px 22px;font-size:1.1rem}
/* ===== footer logo: keep the real logo, only whiten the fallback svg ===== */
footer img{filter:none!important;opacity:1!important;background:#fff;padding:4px;height:56px!important;width:auto!important}
footer svg{filter:brightness(0) invert(1)}

/* ===== inner pages: scroll animations ===== */
.siws-js .pg{opacity:0;transform:translateY(26px);transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),box-shadow .3s}
.siws-js .pg.pg-in{opacity:1;transform:none}
.siws-js img.pg{transform:translateY(26px) scale(.94)}
.siws-js img.pg.pg-in{transform:none}
.siws-js .pg-title{transform:translateY(44px);font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.95;font-size:clamp(2.2rem,5.5vw,4.2rem)}
.siws-js :is(h2,h3,h4).pg:not(.pg-title){width:fit-content;max-width:100%;padding-bottom:6px;background:linear-gradient(var(--ink),var(--ink)) left bottom/0 2px no-repeat;transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),background-size .9s ease .35s}
.siws-js :is(h2,h3,h4).pg.pg-in:not(.pg-title){background-size:100% 2px}
.siws-js .pg b,.siws-js .pg strong{background:linear-gradient(var(--lime),var(--lime)) 0 88%/0 45% no-repeat;transition:background-size .8s ease .5s}
.siws-js .pg.pg-in b,.siws-js .pg.pg-in strong{background-size:100% 45%}
.siws-js .pg-line{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.siws-js .pg-line.pg-in{transform:scaleX(1)}
/* after the entrance: quick hover effects */
.siws-js .pg.pg-done{--d:0s;transition-duration:.3s}
.siws-js img.pg.pg-done:hover{transform:scale(1.05)}
.siws-js .card.pg.pg-done:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
.siws-js li.pg.pg-done:hover{transform:translateX(6px)}
/* reading progress bar */
.siws-prog{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;z-index:99999;pointer-events:none}
@media(prefers-reduced-motion:reduce){.siws-js .pg,.siws-js .pg-line{opacity:1;transform:none;transition:none}.siws-prog{display:none}}

/* ===== librarian hover preview ===== */
.librarian{cursor:pointer;outline:1px solid transparent;outline-offset:8px;transition:outline-color .3s,background .3s}
.librarian:focus-visible,.librarian.lib-on{outline-color:var(--ink);background:rgba(219,230,114,.22)}
.lib-pv{position:fixed;left:0;top:0;z-index:99990;width:min(400px,calc(100vw - 24px));background:var(--ink);color:var(--cream);border:1px solid var(--ink);box-shadow:9px 9px 0 rgba(22,24,21,.25);padding:22px 22px 12px;opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);transform:translateY(14px) scale(.96);transform-origin:top left;transition:clip-path .55s cubic-bezier(.2,.8,.2,1),opacity .35s,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s .55s}
.lib-pv.on{opacity:1;visibility:visible;clip-path:inset(-4px -14px -14px -4px);transform:none;transition:clip-path .55s cubic-bezier(.2,.8,.2,1),opacity .35s,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s}
.lib-pv::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .7s ease .15s}
.lib-pv.on::before{transform:scaleX(1)}
.lib-top{display:flex;gap:16px;align-items:flex-end;margin-bottom:16px}
.lib-ph{width:104px;height:130px;flex:none;border:1px solid var(--cream);overflow:hidden;background:#2a2c27}
.lib-ph img{width:100%;height:100%;object-fit:cover;display:block}
.lib-hd small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.lib-hd b{display:block;font-size:1.6rem;font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.95;color:var(--cream)}
.lib-rows{border-top:1px solid rgba(243,240,232,.35)}
.lib-r{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0}
.lib-r::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:rgba(243,240,232,.3);transform:scaleX(0);transform-origin:left}
.lib-k{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);flex:none}
.lib-v{font-size:.82rem;font-weight:800;text-align:right;color:var(--cream);word-break:break-word}
.lib-v a{color:var(--lime)!important;text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) left bottom/0 1px no-repeat;transition:background-size .3s}
.lib-v a:hover{background-size:100% 1px}
/* staggered reveal each time the card opens */
.lib-pv.on .lib-ph img{animation:libPh .8s cubic-bezier(.2,.8,.2,1) .15s both}
.lib-pv.on .lib-hd>*{animation:libRow .6s cubic-bezier(.2,.8,.2,1) .25s both}
.lib-pv.on .lib-hd>b{animation-delay:.35s}
.lib-pv.on .lib-r{animation:libRow .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .1s + .45s)}
.lib-pv.on .lib-r::after{animation:libLine .7s ease both;animation-delay:calc(var(--i) * .1s + .55s)}
@keyframes libPh{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:none}}
@keyframes libRow{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes libLine{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.lib-pv,.lib-pv.on,.lib-pv::before{transition:none}.lib-pv.on .lib-ph img,.lib-pv.on .lib-hd>*,.lib-pv.on .lib-r,.lib-pv.on .lib-r::after{animation:none}.lib-r::after{transform:none}}

/* ===== librarian preview: opens upward ===== */
.lib-pv.up{transform-origin:bottom left}
.lib-pv.up:not(.on){clip-path:inset(100% 0 0 0);transform:translateY(-14px) scale(.96)}
.lib-pv.up::before{top:auto;bottom:0}

/* ===== home: physics kick section ===== */
.siws-phys{background:var(--ink);color:var(--cream);padding:90px 4vw 50px;margin-top:70px}
.siws-phys .sp-wrap{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:50px;align-items:center;max-width:1400px;margin:0 auto}
.siws-phys .sp-text small{display:block;font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:18px}
.siws-phys .sp-text h2{font-size:clamp(2.6rem,6vw,5.4rem);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;margin:0 0 22px;color:var(--cream)}
.siws-phys .sp-text p{font-size:.95rem;line-height:1.6;max-width:430px;color:rgba(243,240,232,.8);margin:0 0 26px}
.siws-phys .sp-read{margin:0;border-top:1px solid rgba(243,240,232,.35)}
.siws-phys .sp-read>div{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(243,240,232,.25)}
.siws-phys .sp-read dt{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.siws-phys .sp-read dd{margin:0;font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums}
.siws-phys .sp-phase{margin-top:16px;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);min-height:1.2em}
.siws-phys .sp-stage{border:1px solid var(--lime);box-shadow:10px 10px 0 rgba(219,230,114,.25);background:#161815;overflow:hidden}
.siws-phys .sp-svg{display:block;width:100%;height:auto}
.siws-phys .sp-note{max-width:1400px;margin:30px auto 0;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,240,232,.45)}
@media(max-width:900px){.siws-phys{padding:60px 5vw 40px}.siws-phys .sp-wrap{grid-template-columns:1fr;gap:34px}}

/* physics section sits directly under the book scene */
.siws-scene + .siws-phys{margin-top:0}

/* ===== hero scene 3: football ===== */
.siws-kick .kk{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:44px 14px 14px;box-sizing:border-box}
.siws-kick svg{display:block;width:100%;height:auto}
.siws-kick .kk-ph{color:var(--cream)}
.siws-kick .kk-r{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid rgba(243,240,232,.35)}
.siws-kick .kk-r>div{padding:8px 4px 0}
.siws-kick .kk-r dt{font-size:.54rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.siws-kick .kk-r dd{margin:2px 0 0;font-size:.9rem;font-weight:800;color:var(--cream);font-variant-numeric:tabular-nums}

/* ===== top readers: crowns ===== */
.siws-readers .rk-host{position:relative}
.rk-crown{position:absolute;width:46px;height:34px;z-index:3;pointer-events:none;filter:drop-shadow(0 3px 0 rgba(22,24,21,.25))}
.rk-crown .rk-in{width:100%;height:100%;transform-origin:50% 100%;animation:rkFloat 3s ease-in-out infinite}
.rk-crown svg{display:block;width:100%;height:100%;overflow:visible}
.rk-crown.rk-silver .rk-in{animation-delay:-1s}
.rk-crown.rk-bronze .rk-in{animation-delay:-2s}
.rk-gleam{transform:skewX(-20deg);animation:rkGleam 3.2s ease-in-out infinite}
.rk-silver .rk-gleam{animation-delay:-1s}
.rk-bronze .rk-gleam{animation-delay:-2s}
.rk-sp{transform-box:fill-box;transform-origin:center;animation:rkSpark 2.2s ease-in-out infinite}
.rk-crown.rk-hot .rk-in{animation:rkHover .9s cubic-bezier(.2,.8,.2,1) infinite alternate}
.rk-crown.rk-hot .rk-sp{animation:rkSpin 1s linear infinite}
.rk-crown.rk-hot .rk-gleam{animation-duration:1.1s}
.siws-readers .card,.siws-readers .card-body{overflow:visible}
@keyframes rkFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes rkHover{from{transform:translateY(-4px) rotate(-8deg) scale(1.12)}to{transform:translateY(-8px) rotate(8deg) scale(1.2)}}
@keyframes rkGleam{0%{transform:translateX(0) skewX(-20deg)}55%,100%{transform:translateX(90px) skewX(-20deg)}}
@keyframes rkSpark{0%,100%{transform:scale(.2);opacity:0}50%{transform:scale(1);opacity:1}}
@keyframes rkSpin{from{transform:rotate(0) scale(1)}to{transform:rotate(360deg) scale(1)}}

/* crown size matches the JS centring offset */
.siws-readers .rk-crown{width:60px;height:44px}

/* crown size matches the JS centring offset */
.siws-readers .rk-crown{width:60px;height:44px}

/* crowns: let them show above the circle, keep the photo round */
.siws-readers .card-image-rounded.rk-host{overflow:visible}
.siws-readers .card-image-rounded.rk-host > *:not(.rk-crown){border-radius:50%}
.siws-readers .card-image-rounded.rk-host img,.siws-readers .card-image-rounded.rk-host svg.siws-avatar,.siws-readers .card-image-rounded.rk-host .siws-avatar{border-radius:50%}

/* crowns: sit fully above the circle */
.siws-readers .card-image-rounded.rk-host{margin-top:30px !important;overflow:visible !important}
.siws-readers .rk-crown{top:-34px !important;z-index:20 !important}

/* ===== famous voices scene ===== */
.siws-voices{container-type:inline-size}
.vc-tag{position:absolute;left:18px;right:18px;top:14px;display:flex;justify-content:space-between;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);z-index:2}
.vc-slide{position:absolute;left:8%;right:8%;top:44px;bottom:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.vc-slide.on{opacity:1;visibility:visible;transition:opacity .45s}
.vc-av{width:84px;width:clamp(76px,20cqw,112px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid var(--cream);flex:none;opacity:0;transform:scale(.4) rotate(-14deg);transition:transform .7s cubic-bezier(.2,.9,.3,1.2),opacity .4s}
.vc-av svg{display:block;width:100%;height:100%}
.vc-slide.on .vc-av{opacity:1;transform:none;transition-delay:.1s}
.vc-q{margin:16px 0 12px;padding:0;border:0;font-size:1.05rem;font-size:clamp(.95rem,4.2cqw,1.6rem);font-weight:800;line-height:1.18;letter-spacing:-.01em;color:var(--cream);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s}
.vc-slide.on .vc-q{opacity:1;transform:none;transition-delay:.35s}
.vc-by{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.vc-slide.on .vc-by{opacity:1;transform:none;transition-delay:.6s}
.vc-by b{position:relative;display:inline-block;font-size:.78rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);padding-bottom:4px}
.vc-by b::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--lime);transition:width .6s .8s}
.vc-slide.on .vc-by b::after{width:100%}
.vc-by span{display:block;margin-top:6px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a9a79d}
.vc-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(243,240,232,.15)}
.vc-bar i{display:block;height:100%;width:0;background:var(--lime)}
@keyframes vcBar{from{width:0}to{width:100%}}

/* ===== best sellers 2026 scene ===== */
.siws-best{container-type:inline-size}
.bs-tag{position:absolute;left:18px;right:18px;top:14px;display:flex;justify-content:space-between;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);z-index:2}
.bs-slide{position:absolute;left:7%;right:7%;top:46px;bottom:22px;display:flex;align-items:center;gap:6%;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.bs-slide.on{opacity:1;visibility:visible;transition:opacity .4s}
.bs-stage{flex:none;width:38%;perspective:700px}
.bs-cover{position:relative;width:100%;aspect-ratio:2/3;border:2px solid var(--cream);box-shadow:8px 8px 0 var(--lime);background:var(--ink);overflow:hidden;transform-origin:left center;transform:rotateY(-78deg) translateX(-14px);opacity:0;transition:transform .8s cubic-bezier(.2,.9,.3,1.1),opacity .4s}
.bs-slide.on .bs-cover{transform:rotateY(0) translateX(0);opacity:1;transition-delay:.1s}
.bs-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2}
.bs-fb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12% 10%;color:var(--ink);text-align:left}
.bs-fb b{font-size:clamp(.8rem,3.6cqw,1.3rem);font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:-.02em}
.bs-fb span{font-size:clamp(.5rem,1.9cqw,.7rem);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.bs-info{flex:1;min-width:0;color:var(--cream)}
.bs-rank{font-size:clamp(2.4rem,11cqw,4.6rem);font-weight:900;line-height:.85;letter-spacing:-.05em;color:var(--lime);opacity:0;transform:translateX(-18px);transition:opacity .45s,transform .6s}
.bs-slide.on .bs-rank{opacity:1;transform:none;transition-delay:.3s}
.bs-title{margin:12px 0 6px;font-size:clamp(.95rem,4.4cqw,1.6rem);font-weight:900;line-height:1.05;text-transform:uppercase;letter-spacing:-.02em;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s}
.bs-slide.on .bs-title{opacity:1;transform:none;transition-delay:.45s}
.bs-au{font-size:.72rem;font-weight:700;color:#a9a79d;opacity:0;transition:opacity .5s}
.bs-slide.on .bs-au{opacity:1;transition-delay:.6s}
.bs-sales{margin-top:14px;padding-top:10px;border-top:1px solid rgba(243,240,232,.3);font-size:.78rem;font-weight:700;color:var(--cream);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.bs-sales b{color:var(--lime);font-size:1.15rem;font-weight:900;margin-right:4px}
.bs-sales small{display:block;margin-top:3px;font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a9a79d}
.bs-slide.on .bs-sales{opacity:1;transform:none;transition-delay:.75s}
.bs-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(243,240,232,.15)}
.bs-bar i{display:block;height:100%;width:0;background:var(--lime)}
@keyframes bsBar{from{width:0}to{width:100%}}

/* search box: straddle the green / cream boundary */
.siws-home #search-wraper{position:relative !important;top:26px !important;z-index:6 !important}

/* ===== topic popup: clean grid ===== */
#exampleModal .modal-dialog{max-width:min(960px,94vw)}
#exampleModal .modal-content{border:1px solid var(--ink);border-radius:0;box-shadow:10px 10px 0 rgba(22,24,21,.22)}
#exampleModal .modal-body{max-height:calc(100vh - 230px);overflow-y:auto;padding:22px}
#exampleModal ul.topic{grid-template-columns:repeat(5,1fr)!important;gap:0}
#exampleModal ul.topic li{height:auto!important;min-height:0!important}
#exampleModal ul.topic li::before{content:counter(t,decimal-leading-zero);top:12px;left:14px}
#exampleModal ul.topic li a{min-height:176px!important;height:100%;justify-content:flex-start!important;align-items:center!important;text-align:center;padding:36px 12px 16px!important;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;line-height:1.25}
#exampleModal ul.topic li img{width:64px!important;max-width:64px;height:64px;object-fit:contain;margin:0 auto 12px!important}
#exampleModal .modal-footer{justify-content:flex-start}
#exampleModal.show ul.topic li{animation:tpIn .45s cubic-bezier(.2,.8,.2,1) both}
#exampleModal.show ul.topic li:nth-child(1){animation-delay:.05s}#exampleModal.show ul.topic li:nth-child(2){animation-delay:.10s}
#exampleModal.show ul.topic li:nth-child(3){animation-delay:.15s}#exampleModal.show ul.topic li:nth-child(4){animation-delay:.20s}
#exampleModal.show ul.topic li:nth-child(5){animation-delay:.25s}#exampleModal.show ul.topic li:nth-child(6){animation-delay:.30s}
#exampleModal.show ul.topic li:nth-child(7){animation-delay:.35s}#exampleModal.show ul.topic li:nth-child(8){animation-delay:.40s}
#exampleModal.show ul.topic li:nth-child(9){animation-delay:.45s}#exampleModal.show ul.topic li:nth-child(10){animation-delay:.50s}
@keyframes tpIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:900px){#exampleModal ul.topic{grid-template-columns:repeat(2,1fr)!important}#exampleModal ul.topic li a{min-height:150px!important}}
@media(prefers-reduced-motion:reduce){#exampleModal.show ul.topic li{animation:none}}

/* topic popup: hide the icon credit line */
#exampleModal .modal-footer{display:none!important}

/* ===== designed cover for books without an uploaded cover ===== */
.siws-nc{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:100%;max-width:200px;aspect-ratio:2/3;margin:0 auto;padding:14% 10% 10% 26%;box-sizing:border-box;overflow:hidden;border:1px solid #161815;box-shadow:5px 5px 0 rgba(22,24,21,.25);background:#dbe672;color:#161815;container-type:inline-size;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.siws-nc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16%;background:#161815}
.siws-nc::after{content:"";position:absolute;left:16%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.35)}
.siws-nc-title{display:block;font-size:11px;font-size:clamp(9px,9cqw,16px);font-weight:900;line-height:1.08;text-transform:uppercase;letter-spacing:-.01em;word-break:break-word}
.siws-nc-lib{display:block;font-size:7px;font-size:clamp(6px,4.4cqw,9px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.siws-nc-1{background:#f3f0e8}
.siws-nc-2{background:#d9803a}
.siws-nc-3{background:#3d63dc;color:#f3f0e8}
.siws-nc-4{background:#8fd6da}
.siws-nc-5{background:#e8a7b8}
.siws-nc.not-available{opacity:.55;filter:grayscale(.5)}
.card:hover .siws-nc,.grid-item:hover .siws-nc{transform:translateY(-4px) rotate(-1.5deg);box-shadow:8px 9px 0 rgba(22,24,21,.25)}
@media(prefers-reduced-motion:reduce){.siws-nc{transition:none}}

/* ===== designed cover for books without an uploaded cover ===== */
.siws-nc{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:100%;max-width:200px;aspect-ratio:2/3;margin:0 auto;padding:14% 10% 10% 26%;box-sizing:border-box;overflow:hidden;border:1px solid #161815;box-shadow:5px 5px 0 rgba(22,24,21,.25);background:#dbe672;color:#161815;container-type:inline-size;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.siws-nc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16%;background:#161815}
.siws-nc::after{content:"";position:absolute;left:16%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.35)}
.siws-nc-title{display:block;font-size:11px;font-size:clamp(9px,9cqw,16px);font-weight:900;line-height:1.08;text-transform:uppercase;letter-spacing:-.01em;word-break:break-word}
.siws-nc-lib{display:block;font-size:7px;font-size:clamp(6px,4.4cqw,9px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.siws-nc-1{background:#f3f0e8}
.siws-nc-2{background:#d9803a}
.siws-nc-3{background:#3d63dc;color:#f3f0e8}
.siws-nc-4{background:#8fd6da}
.siws-nc-5{background:#e8a7b8}
.siws-nc.not-available{opacity:.55;filter:grayscale(.5)}
.card:hover .siws-nc,.grid-item:hover .siws-nc{transform:translateY(-4px) rotate(-1.5deg);box-shadow:8px 9px 0 rgba(22,24,21,.25)}
@media(prefers-reduced-motion:reduce){.siws-nc{transition:none}}